@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    /* ── Sidebar Link Styling ──────────────────────────── */
    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-2.5 border-l-4 border-transparent text-xs font-semibold tracking-wide text-slate-600 transition-all duration-150 hover:bg-slate-50 hover:text-slate-900;
    }
    .sidebar-link.active {
        @apply bg-blue-50/60 text-[#0f4c81] font-bold border-l-[#0f4c81] pl-3;
    }
    
    /* ── Global Input Overrides ────────────────────────── */
    input[type="text"], input[type="search"], input[type="date"], select {
        @apply focus:ring-1 focus:ring-[#0f4c81] focus:border-[#0f4c81] focus:outline-none transition-all duration-150;
    }

    /* ── DataTables Global Overrides ────────────────────── */
    .dt-container {
        font-size: 0.8125rem !important;
        color: #334155 !important;
    }

    /* Top Toolbar (Search and Page Size) */
    .dt-container .dt-layout-row:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .dt-container .dt-search {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .dt-container .dt-search label {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
    }

    .dt-container .dt-search input {
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8125rem !important;
        color: #334155 !important;
        background: #ffffff !important;
        min-width: 200px !important;
        transition: all 0.15s !important;
    }

    .dt-container .dt-search input:focus {
        border-color: #0f4c81 !important;
        box-shadow: 0 0 0 2px rgba(15, 76, 129, 0.1) !important;
        outline: none !important;
    }

    .dt-container .dt-length {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .dt-container .dt-length label {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    .dt-container .dt-length select {
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.5rem !important;
        padding: 0.35rem 1.5rem 0.35rem 0.5rem !important;
        font-size: 0.8125rem !important;
        color: #334155 !important;
        background: #ffffff !important;
        cursor: pointer !important;
    }

    /* Table Structure */
    table.dataTable {
        border-collapse: collapse !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    table.dataTable thead tr {
        border-bottom: 2px solid #f1f5f9 !important;
    }

    table.dataTable thead th {
        background: #f8fafc !important;
        color: #64748b !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        padding: 0.65rem 0.875rem !important;
        border-bottom: none !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    table.dataTable thead th:hover {
        color: #0f4c81 !important;
    }

    /* Table sorting indicator overrides */
    table.dataTable thead th.dt-ordering-asc span.dt-column-order::before {
        color: #0f4c81 !important;
        opacity: 1 !important;
    }

    table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
        color: #0f4c81 !important;
        opacity: 1 !important;
    }

    table.dataTable thead th.dt-orderable-asc span.dt-column-order,
    table.dataTable thead th.dt-orderable-desc span.dt-column-order {
        opacity: 0.25 !important;
    }

    /* Table Body */
    table.dataTable tbody tr {
        border-bottom: 1px solid #f1f5f9 !important;
        background-color: #ffffff !important;
        transition: background-color 0.1s !important;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8fafc !important;
    }

    table.dataTable tbody tr:last-child {
        border-bottom: none !important;
    }

    table.dataTable tbody td {
        padding: 0.6rem 0.875rem !important;
        vertical-align: middle !important;
    }

    /* Bottom Toolbar */
    .dt-container .dt-layout-row:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 0.875rem !important;
    }

    .dt-container .dt-info {
        font-size: 0.75rem !important;
        color: #94a3b8 !important;
    }

    .dt-container .dt-paging {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .dt-container .dt-paging .dt-paging-button {
        padding: 0.3rem 0.65rem !important;
        border-radius: 0.4rem !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #475569 !important;
        cursor: pointer !important;
        transition: all 0.15s !important;
        line-height: 1.4 !important;
    }

    .dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #1e293b !important;
    }

    .dt-container .dt-paging button.dt-paging-button.current,
    .dt-container .dt-paging button.dt-paging-button.current:link,
    .dt-container .dt-paging button.dt-paging-button.current:visited {
        background: #e2e8f0 !important;
        color: #1e293b !important;
        border-color: #cbd5e1 !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    .dt-container .dt-paging button.dt-paging-button.current:hover {
        background: #cbd5e1 !important;
        border-color: #94a3b8 !important;
        color: #0f172a !important;
    }

    .dt-container .dt-paging .dt-paging-button.disabled {
        opacity: 0.3 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

    .dt-container .dt-paging .dt-paging-button.disabled:hover {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        color: #475569 !important;
    }

    /* Export Buttons */
    .dt-buttons {
        display: flex !important;
        gap: 0.375rem !important;
        flex-wrap: wrap !important;
    }

    .dt-buttons .dt-button {
        padding: 0.35rem 0.75rem !important;
        border-radius: 0.5rem !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        color: #475569 !important;
        cursor: pointer !important;
        transition: all 0.15s !important;
    }

    .dt-buttons .dt-button:hover {
        background: #f1f5f9 !important;
        border-color: #94a3b8 !important;
    }

    .dt-buttons .buttons-csv {
        color: #059669 !important;
        border-color: #a7f3d0 !important;
        background: #f0fdf4 !important;
    }

    .dt-buttons .buttons-csv:hover {
        background: #dcfce7 !important;
    }

    .dt-buttons .buttons-excel {
        color: #047857 !important;
        border-color: #6ee7b7 !important;
        background: #ecfdf5 !important;
    }

    .dt-buttons .buttons-excel:hover {
        background: #d1fae5 !important;
    }

    .dt-buttons .buttons-print {
        color: #0f4c81 !important;
        border-color: #bae6fd !important;
        background: #f0f9ff !important;
    }

    .dt-buttons .buttons-print:hover {
        background: #e0f2fe !important;
    }

    /* Empty state */
    table.dataTable tbody td.dataTables_empty {
        text-align: center !important;
        color: #94a3b8 !important;
        padding: 3rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Responsive controls */
    table.dataTable.dtr-inline.collapsed tbody td.dtr-control::before {
        background-color: #0f4c81 !important;
    }
}