@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* Custom CSS for Filament Application */

/* Medicine Add Rows - Filament v4 Table-like Repeater Layout */

/* Repeater Container */
.fi-repeater {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0;
    background: transparent;
}

/* Repeater Items Container */
.fi-repeater>.space-y-3 {
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Repeater Item - Table Row Style */
.fi-repeater-item {
    display: grid;
    grid-template-columns: 5fr 3fr 3fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.fi-repeater-item:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Grid inside repeater item */
.fi-repeater-item .grid {
    display: contents;
}

/* Repeater Item Input Fields */
.fi-repeater-item input,
.fi-repeater-item select,
.fi-repeater-item [role="combobox"] {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    height: 40px !important;
}

.fi-repeater-item input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.fi-repeater-item input:focus,
.fi-repeater-item select:focus,
.fi-repeater-item [role="combobox"]:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
}

/* Disabled fields (Available Stock) */
.fi-repeater-item input:disabled {
    background: rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    cursor: not-allowed !important;
}

/* Delete Action Container */
.fi-repeater-item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Copy Button */
.fi-repeater-item-copy-action {
    color: #3b82f6;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.fi-repeater-item-copy-action:hover {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
}

/* Delete Icon Button */
.fi-repeater-item-delete-action {
    color: #ef4444;
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s ease;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.fi-repeater-item-delete-action:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}

/* Add Medicine Button - Aligned to Left */
.fi-repeater-add-action {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
    padding: 0 16px;
}

.fi-repeater-add-action button {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 8px 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
}

.fi-repeater-add-action button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Remove card styling from repeater items */
.fi-repeater-item-card {
    box-shadow: none !important;
    border: none !important;
}

/* Repeater item - inline layout */
.fi-repeater-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Position repeater actions (copy/delete) at the end */
.fi-repeater-item-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-left: auto !important;
    order: 99 !important;
}

/* Repeater clone button (copy) */
.fi-repeater-item-clone-action {
    color: #3b82f6 !important;
    cursor: pointer !important;
    padding: 6px !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fi-repeater-item-clone-action:hover {
    color: #2563eb !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Delete action button */
.fi-repeater-item-delete-action {
    color: #ef4444 !important;
    cursor: pointer !important;
    padding: 6px !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fi-repeater-item-delete-action:hover {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Tooltip styling - Dark theme matching graph tooltips */
.fi-tooltip {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Filament tooltip styling */
[data-tooltip] {
    --tooltip-background: rgba(0, 0, 0, 0.95);
    --tooltip-color: #ffffff;
}

/* Popper tooltip (used by Filament) */
.popper[data-popper-placement^="top"]>.arrow::before,
.popper[data-popper-placement^="bottom"]>.arrow::before,
.popper[data-popper-placement^="left"]>.arrow::before,
.popper[data-popper-placement^="right"]>.arrow::before {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Generic tooltip background */
.tooltip,
.tippy-box {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tippy-box[data-theme~='dark'] {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
}

/* Fix for page being disabled on initial load */
body.fi-loading {
    pointer-events: auto !important;
}

/* Ensure page content is always clickable */
.fi-page,
.fi-section,
.fi-form {
    pointer-events: auto !important;
}

/* Only disable during actual loading (when spinner is visible) */
.fi-loading-indicator {
    pointer-events: none;
}

/* Ensure form inputs are always interactive */
input,
textarea,
select,
button {
    pointer-events: auto !important;
}

/* Remove any overlay that might be blocking interaction */
.fi-overlay {
    display: none !important;
}

/* Ensure Filament modals don't block page on load */
.fi-modal-window {
    pointer-events: auto !important;
}


/* Medicine repeater - Small input fields for Stock, Quantity, and Max Allowed */
.fi-repeater-item input[type="number"] {
    max-width: 80px !important;
    width: 80px !important;
}

/* Ensure small numeric inputs stay compact */
.fi-repeater-item [class*="col-span-1"] input,
.fi-repeater-item [class*="col-span-2"] input[type="number"] {
    max-width: 80px !important;
    width: 80px !important;
}


/* Textarea expand button styling */
textarea {
    resize: vertical !important;
    overflow: auto !important;
}

/* Textarea wrapper for expand icon */
.fi-fo-textarea {
    position: relative;
}

/* Add expand icon to textarea wrapper */
.fi-fo-textarea::after {
    content: '⤢';
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    pointer-events: none;
    line-height: 1;
}


/* Staff Table - Align Card Status Badge near Card Number - DISABLED: These styles break global table layout */
/* Target the table cell containing card status badge */
/*
.fi-ta-cell:has(.fi-badge) {
    padding-right: 0 !important;
    margin-right: -8px !important;
}
*/

/* Badge styling in staff table */
/*
.fi-ta-cell .fi-badge {
    margin-right: -4px !important;
    margin-left: 0 !important;
}
*/

/* Assigned Card No column - reduce left padding to bring badge closer */
/*
.fi-ta-cell:nth-child(4) {
    padding-left: 4px !important;
}
*/

/* Ensure badge and card number are on same line */
/*
.fi-ta-cell {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
*/


/* Remarks Field Tooltip Styling */
/* Truncate text with ellipsis */
.fi-ta-cell .fi-text-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip container styling */
.fi-tooltip,
[data-tooltip],
.tippy-box {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    max-width: 400px !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Tooltip arrow styling */
.tippy-box[data-placement^='top']>.tippy-arrow::before,
.tippy-box[data-placement^='bottom']>.tippy-arrow::before,
.tippy-box[data-placement^='left']>.tippy-arrow::before,
.tippy-box[data-placement^='right']>.tippy-arrow::before {
    border-top-color: rgba(0, 0, 0, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.95) !important;
    border-left-color: rgba(0, 0, 0, 0.95) !important;
    border-right-color: rgba(0, 0, 0, 0.95) !important;
}

/* Dark theme tooltip */
.tippy-box[data-theme~='dark'] {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
}

/* Remarks text with tooltip trigger */
.fi-ta-cell [data-tooltip] {
    cursor: help;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    transition: border-color 0.2s ease;
}

.fi-ta-cell [data-tooltip]:hover {
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.fi-ta-record-content-ctn {
    background-color: #000000 !important;
    border-radius: 25px !important;
    border-left: 6px solid #38bdf8 !important;

    padding: 1.25rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.25s ease-in-out !important;
    height: 200px !important;
}

.fi-ta-record.fi-clickable {
    border-radius: 25px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.fi-ta-record.fi-clickable:hover {
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25) !important;
}

.fi-ta-record.fi-clickable:active {
    transform: scale(0.99) !important;
}

/* Overdue Filter Styling */
.overdue-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.overdue-count-badge {
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
}

.dark .overdue-count-badge {
    background-color: #ef4444;
}

/* Filter toggle styling */
.fi-fo-toggle .fi-fo-toggle-button[aria-checked="true"] {
    background-color: #dc2626 !important;
}

.dark .fi-fo-toggle .fi-fo-toggle-button[aria-checked="true"] {
    background-color: #ef4444 !important;
}

/* Overdue text styling */
.overdue-text {
    color: #dc2626;
    font-weight: 500;
}

.dark .overdue-text {
    color: #ef4444;
}

/* Deleted Row Styling */

/* 1. Strikethrough all content in data cells (exclude the actions cell container) */
.deleted-row {
    background-color: rgba(220, 38, 38, 0.05) !important;
}

.dark .deleted-row {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.deleted-row .fi-ta-cell:not(:has(.fi-ta-actions)) {
    text-decoration: line-through !important;
    opacity: 0.6;
}


/* Hide Checkboxes in Deleted Rows */
.deleted-row .fi-ta-selection-cell input,
.deleted-row .fi-ta-checkbox {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Target only the action dropdown panel by checking for a specific child class */
.fi-dropdown-panel:has(.view-logs-action),
.fi-dropdown-panel:has(.compact-dropdown) {
    width: 140px !important;
    max-width: calc(120vw - 2rem) !important;
}

.fi-dropdown-panel:has(.view-logs-action)>div,
.fi-dropdown-panel:has(.compact-dropdown)>div {
    width: 140px !important;
    padding: 4px 3px !important;
    overflow-x: hidden !important;
}

/* Trash Toggle Button Styles */
.trash-btn-inactive {
    background-color: transparent !important;
    border: 1px solid #d1d5db !important;
    border-radius: 9px !important;
    color: #6b7280 !important;
    padding: 5px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

.dark .trash-btn-inactive {
    background-color: #151517 !important;
    border-color: #3f3f46 !important;
    color: #9ca3af !important;
}

.trash-btn-active {
    background-color: rgba(239, 68, 68, 0.08) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
    border-radius: 9px !important;
    color: #ef4444 !important;
    padding: 5px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
}

.dark .trash-btn-active {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #f87171 !important;
}

.trash-btn-active svg {
    filter: drop-shadow(0 0 1px rgba(239, 68, 68, 0.3));
    color: #ef4444 !important;
}

.trash-btn-inactive svg {
    color: #6b7280 !important;
}

.group-action-btn:hover {
    background: #ecebeb !important;
    border-radius: 18px !important;
}

.dark .group-action-btn:hover {
    background: #242427 !important;
    border-radius: 18px !important;
}