/* =========================================
   KEE-AT-LOI GLOBAL CSS
   ========================================= */

/* --- 1. FONTS & BASICS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #0d1117; 
    color: #e5e7eb;
    font-size: 0.85rem; /* PERMANENT COMPACT BASE */
}

/* --- 2. PERMANENT COMPACT STYLES --- */
th, td { 
    padding: 6px 10px !important; 
    font-size: 0.8rem !important; 
}

input, select, textarea { 
    padding-top: 4px !important; 
    padding-bottom: 4px !important; 
    font-size: 0.8rem !important; 
    min-height: 28px !important; 
    height: auto !important;
}

button { 
    padding: 4px 10px !important; 
    font-size: 0.8rem !important; 
}

.p-6 { padding: 1rem !important; } /* Reduced card padding */
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; } /* Tighter field spacing */
.gap-4 { gap: 0.5rem !important; } /* Tighter grids */
footer { padding-top: 8px !important; padding-bottom: 8px !important; }

/* --- 3. SCROLLBAR STYLING --- */
::-webkit-scrollbar { 
    width: 12px; 
    height: 12px; 
}
::-webkit-scrollbar-track { 
    background: #0d1117; /* Matches the body background */
}
::-webkit-scrollbar-thumb { 
    background: #374151; /* Neutral Gray-700 instead of Purple */
    border-radius: 10px; 
    border: 3px solid #0d1117; /* Matches track for a clean padded look */
}
::-webkit-scrollbar-thumb:hover { 
    background: #4b5563; /* Lighter gray on hover */
}

/* --- 4. UTILITY CLASSES --- */
.text-red-500 { color: #ef4444 !important; }
.text-green-500 { color: #22c55e !important; }

/* Hide number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] { -moz-appearance: textfield; }

/* --- 5. COMPONENT STYLES --- */

/* Sidebar Base */
#sidebar { transition: width 0.3s ease; overflow-x: hidden; }

/* =========================================
   SIDEBAR MINIMIZED: MASTER ARCHITECTURE
   ========================================= */

/* 1. FORCE THE SIDEBAR SHRINK & STRIP WRAPPER PADDING */
#sidebar.minimized { 
    width: 4.5rem !important; 
    min-width: 4.5rem !important; 
    max-width: 4.5rem !important; 
    overflow-x: hidden !important;
}

/* Strip invisible wall padding from all main sidebar containers */
#sidebar.minimized nav,
#sidebar.minimized > div,
#sidebar.minimized .border-t,
#sidebar.minimized .mt-auto {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. HIDE ALL TEXT & UNWANTED ELEMENTS */
#sidebar.minimized .nav-text, 
#sidebar.minimized .sidebar-title, 
#sidebar.minimized .admin-section-title, 
#sidebar.minimized h1, 
#sidebar.minimized h2, 
#sidebar.minimized .logo-text,
#sidebar.minimized .shimmer-overlay,
#sidebar.minimized span:not(.sr-only), /* Hides all spans except screen readers */
#sidebar.minimized p { 
    display: none !important; 
}

/* 3. LOGO SWAP */
.mini-logo { display: none; }
#sidebar.minimized .full-logo { display: none !important; }
#sidebar.minimized .mini-logo { 
    display: block !important; 
    margin: 0 auto !important; 
}

/* 4. PLUMB-LINE ALIGNMENT FOR ALL TABS & BUTTONS */
/* Converts every link and button into a perfect centered square */
#sidebar.minimized a, 
#sidebar.minimized button.tab-button,
#sidebar.minimized button[onclick="handleLogout()"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 3rem !important;          /* Exact square width */
    height: 3rem !important;         /* Exact square height */
    padding: 0 !important;           /* Nuke all Tailwind padding */
    margin: 0.25rem auto !important; /* 'auto' forces it to the mathematical center */
    border: none !important;
}

/* Force every SVG icon to be the exact same size and dead-center in its square */
#sidebar.minimized a svg,
#sidebar.minimized a i,
#sidebar.minimized button svg,
#sidebar.minimized button i {
    margin: 0 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex-shrink: 0 !important;
}

/* 5. PERFECT SQUARE ACTIVE HIGHLIGHT */
#sidebar.minimized .active,
#sidebar.minimized .bg-gray-800 {
    background-color: #4f46e5 !important; /* Indigo block */
    border-radius: 0.5rem !important; 
}
#sidebar.minimized .active svg,
#sidebar.minimized .active i {
    color: white !important; 
}

/* 6. BOTTOM SECTION: USER AVATAR ALIGNMENT */
/* Force the container holding the avatar to center its contents */
#sidebar.minimized .user-info,
#sidebar.minimized .flex.items-center.mt-auto {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
}

/* Lock the avatar circle into the center */
#sidebar.minimized img.rounded-full,
#sidebar.minimized div.rounded-full {
    display: block !important;
    margin: 0 auto !important; /* Mathematical center */
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex-shrink: 0 !important;
}

/* Modals */
.modal { transition: opacity 0.25s ease; }
.modal-content { transition: transform 0.25s ease; }
.modal.opacity-0 { pointer-events: none; }
.modal.opacity-100 .modal-content { transform: translateY(0); }
.modal.opacity-0 .modal-content { transform: translateY(-20px); }

/* Image Viewer Zoom */
#document-viewer-image {
    transform-origin: center center;
    cursor: grab;
    transition: transform 0.05s ease-out;
    max-width: 100%;
    max-height: 100%;
    user-select: none;
}
#document-viewer-image:active { cursor: grabbing; }

/* FullCalendar Overrides */
:root {
    --fc-bg-color: #1f2937; 
    --fc-border-color: #374151; 
    --fc-text-color: #e5e7eb; 
    --fc-title-color: #ffffff; 
    --fc-today-bg-color: #312e81; 
    --fc-event-bg-color: #4f46e5; 
    --fc-event-border-color: #818cf8; 
}
#calendar-container .fc { background-color: #111827; color: var(--fc-text-color); }
#calendar-container .fc-daygrid-day-frame,
#calendar-container .fc-col-header-cell,
#calendar-container .fc-timegrid-slot,
#calendar-container .fc-timegrid-axis { border-color: var(--fc-border-color); }
#calendar-container .fc-day-today { background-color: var(--fc-today-bg-color) !important; }
#calendar-container .fc-toolbar-title { color: var(--fc-title-color); }
#calendar-container .fc-button-primary { background-color: #4f46e5; border: none; }
#calendar-container .fc-button-primary:hover { background-color: #4338ca; }
#calendar-container .fc-event { background-color: var(--fc-event-bg-color); border: 1px solid var(--fc-event-border-color); font-weight: 600; }

/* Global Calendar Icon Fix for Dark Theme */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- 6. ANIMATIONS --- */

/* Blink */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.blink { animation: blink 1s infinite; }

/* Shimmer Overlay */
.shimmer-container { 
    position: relative; 
    width: fit-content; 
    margin: 0 auto 0.5rem auto; 
    overflow: hidden; 
}
.shimmer-overlay {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg); animation: shimmer-move 3s infinite; pointer-events: none; z-index: 20;
}
@keyframes shimmer-move { 0% { left: -100%; } 40% { left: 200%; } 100% { left: 200%; } }

/* Logo Fill Loader */
.fill-loader-container { position: relative; width: 150px; height: 80px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.logo-base { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: 0.1; filter: grayscale(100%); }
.logo-overlay {
    position: absolute; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 100% 0 0);
    animation: logo-fill-animation 2s infinite ease-in-out; filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.6));
}
@keyframes logo-fill-animation {
    0% { clip-path: inset(0 100% 0 0); }
    50% { clip-path: inset(0 0 0 0); }
    80% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* =========================================
   7. PRINTING & DOCUMENT TEMPLATES
   ========================================= */

/* A4 Paper Generator (docgen.php) */
.a4-paper {
    width: 210mm;
    min-width: 210mm;
    min-height: 297mm;
    background: white;
    color: black;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    padding: 20mm;
}

/* Legacy Invoice Box */
.invoice-box { max-width: 800px; margin: auto; padding: 30px; font-size: 14px; line-height: 24px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #555; }
.invoice-box table { width: 100%; line-height: inherit; text-align: left; border-collapse: collapse; }
.invoice-box table td { padding: 5px; vertical-align: top; }
.invoice-box table tr td:nth-child(2) { text-align: right; }
.invoice-box table tr.top table td { padding-bottom: 20px; }
.invoice-box table tr.heading td { background: #eee !important; border-bottom: 1px solid #ddd; font-weight: bold; color: #000 !important; }
.invoice-box table tr.item td { border-bottom: 1px solid #eee; }
.invoice-box table tr.item.last td { border-bottom: none; }
.invoice-box table tr.total td:nth-child(2) { border-top: 2px solid #eee; font-weight: bold; }

/* Tells the PDF engine never to slice this element in half */
.avoid-page-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

/* --- MASTER PRINT RULES --- */
@media print {
    @page { margin: 0.5in; size: auto; }
    
    body.print-view, body.docgen-body { 
        background-color: #ffffff !important; 
        color: #000000 !important; 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
    body.print-view *, body.docgen-body * { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
    
    /* 1. DOCUMENT GENERATOR (docgen.php) RULES */
    body.docgen-body .no-print, 
    body.docgen-body nav, 
    body.docgen-body aside { 
        display: none !important; 
    }
    
    body.docgen-body, 
    body.docgen-body > div.flex, 
    body.docgen-body > div.flex > div:not(.no-print) {
        background: transparent !important; 
        padding: 0 !important; 
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
    }

    body.docgen-body .a4-paper { 
        box-shadow: none !important; 
        margin: 0 !important; 
        padding: 15mm 20mm !important; 
        width: 100% !important; 
        min-width: 100% !important; 
        min-height: 0 !important; 
        height: auto !important;
        display: block !important; 
    }

    body.docgen-body table { page-break-inside: auto; }
    body.docgen-body tr { page-break-inside: avoid; page-break-after: auto; }
    body.docgen-body thead { display: table-header-group; }
    body.docgen-body tfoot { display: table-footer-group; }

    /* 2. DASHBOARD & PAYSLIP RULES */
    body.print-view > *:not(.print-container) { display: none !important; }
    .print-container { display: block !important; position: absolute; top: 0; left: 0; width: 100%; background-color: #ffffff !important; color: #000000 !important; }
    .print-container table { width: 100%; border-collapse: collapse; font-size: 10pt; color: #000 !important; }
    .print-container th, .print-container td { border: 1px solid #000; padding: 4px; text-align: left; color: #000 !important; }
    .print-container tr, .print-container tr td { background-color: #ffffff !important; }
    .print-container tr.bg-gray-800, .print-container tr.bg-gray-800 td { background-color: #dcdcdc !important; }
    .print-container th { background-color: #eee !important; color: #000 !important; }
    .print-container h1, .print-container h2 { color: #000 !important; margin-bottom: 15px; }
    .print-container .text-right { text-align: right; }

    .payslip { width: 48%; height: 45vh; margin: 1%; float: left; border: 1px solid #666; padding: 10px; box-sizing: border-box; font-size: 9pt; color: #000 !important; background-color: #fff !important; }
    .payslip h3, .payslip h4, .payslip p, .payslip span { color: #000 !important; }
    .payslip h3, .payslip h4 { margin-top: 0; margin-bottom: 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
    .payslip table { font-size: 9pt; width: 100%; color: #000 !important; }
    .payslip th { text-align: left; padding: 2px; background-color: #fff !important; border: none; color: #000 !important; }
    .payslip td { text-align: right; padding: 2px; border: none; color: #000 !important; }
    .payslip .net-pay-row { font-weight: bold; font-size: 1.1em; border-top: 1px solid #999; }
    .payslip-page-break { page-break-after: always; clear: both; }
}

/* Force the native search "X" button to be pure white and clickable */
    #inventory-search-input::-webkit-search-cancel-button {
        filter: invert(0) brightness(2);
        cursor: pointer;
    }