/* Custom CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {

    /* Global Scrollbar Theme */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #64748b;
        /* slate-500: Lighter for better contrast on dark bg */
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8;
        /* slate-400 */
    }

    /* Specific 'custom-scrollbar' class for containers */
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
        /* Match global width for consistency */
        height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #475569;
        /* slate-600 */
        border-radius: 99px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #64748b;
        /* slate-500 */
    }
}

/* 
  SCREEN ONLY 
*/
#print-mount-point {
    display: none;
}

@media print {

    /* Set page margins to zero */
    @page {
        margin: 0;
        size: auto;
    }

    /* Reset body and hide main UI */
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        color: black !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Hide EVERYTHING inside the main application root */
    #root,
    .Sidebar,
    .Header,
    .AIAssistant {
        display: none !important;
    }

    /* Show only our mount point */
    #print-mount-point {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Allow children to keep their natural display (table, flex, etc.) */
    #print-mount-point * {
        visibility: visible !important;
    }

    #printable-receipt {
        display: block !important;
        width: 72mm !important;
        margin: 0 auto !important;
        padding: 4mm !important;
        box-sizing: border-box !important;
    }

    #printable-invoice-letter {
        display: block !important;
        width: 100% !important;
        max-width: 210mm !important;
        margin: 0 auto !important;
        padding: 15mm !important;
        box-sizing: border-box !important;
    }
}

/* DataTables Dark Theme */
.dataTables_wrapper {
    color: #cbd5e1 !important;
    font-family: 'Inter', sans-serif !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: #1c2631 !important;
    border: 1px solid #2d3947 !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}

table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 20px 0 !important;
    background: #1c2631 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

table.dataTable thead th {
    background-color: #111921 !important;
    color: #308ce8 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
    border-bottom: 2px solid #2d3947 !important;
}

table.dataTable tbody td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #2d3947 !important;
    font-size: 13px !important;
}

table.dataTable tbody tr {
    background-color: transparent !important;
    transition: all 0.2s !important;
}

table.dataTable tbody tr:hover {
    background-color: rgba(48, 140, 232, 0.05) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #64748b !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #308ce8 !important;
    color: white !important;
    border: 1px solid #308ce8 !important;
}

.dataTables_wrapper .dataTables_info {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-top: 15px !important;
}

/* Custom Date Input Styling for Dark Mode */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}