/* ===== ADMIN SIDEBAR ===== */ :root { --admin-sidebar-width: 16rem; --admin-sidebar-width-collapsed: 5rem; } .admin-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: var(--admin-sidebar-width); transition: width 0.2s ease, transform 0.2s ease; } /* Icon-only desktop collapse, toggled by adding .sidebar-collapsed to (persisted in localStorage) — mirrors the dark-mode toggle convention. */ html.sidebar-collapsed .admin-sidebar { width: var(--admin-sidebar-width-collapsed); } html.sidebar-collapsed .admin-sidebar .sidebar-label, html.sidebar-collapsed .admin-sidebar .sidebar-submenu { display: none; } .admin-content { margin-left: var(--admin-sidebar-width); transition: margin-left 0.2s ease; } html.sidebar-collapsed .admin-content { margin-left: var(--admin-sidebar-width-collapsed); } /* Below lg: sidebar becomes an off-canvas overlay (.sidebar-open, driven by Alpine's sidebarOpen) instead of the icon-collapsed desktop state. */ @media (max-width: 1023px) { .admin-sidebar { transform: translateX(-100%); } .admin-sidebar.sidebar-open { transform: translateX(0); } .admin-content, html.sidebar-collapsed .admin-content { margin-left: 0; } } /* DataTables overrides for DataTables 2.x. The core `datatables.net` package ships with no theme CSS at all, so every generated element is styled here from scratch to match the rest of the admin panel. IMPORTANT: DataTables 2 renamed almost every class from the classic v1 scheme (.dataTables_wrapper, .dataTables_paginate, .paginate_button, a wrapping the page-number buttons) to a new `dt-*` scheme (.dt-container, .dt-paging, .dt-paging-button, buttons appended directly with no wrapping span). Selectors below target the real v2 classes — see node_modules/datatables.net/js/dataTables.js's `classes` extension object if this ever needs re-checking against a version bump. */ .dt-container { font-size: 0.875rem; color: #1e293b; } /* Default `layout` already pairs length+search on one row (top) and info+paging on another (bottom) — .dt-layout-row wraps each pair. */ .dt-container .dt-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 1.25rem; } /* Rounds the card's visible corners itself (top on the search/length row, bottom on the info/paging row) instead of clipping via `overflow-hidden` on the card wrapper — that would establish a scroll container ancestor around the table below, which silently hijacks the 's `position: sticky` containing block (browsers force `overflow-y` to `auto` whenever `overflow-x` isn't `visible`, even with no vertical overflow to speak of) and made the header render on top of the first body row instead of following the table's own scroll. */ .dt-container .dt-layout-row:first-child { border-bottom: 1px solid #f1f5f9; border-top-left-radius: 1rem; border-top-right-radius: 1rem; background: #fff; } .dt-container .dt-layout-row:last-child { border-top: 1px solid #f1f5f9; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } /* The row wrapping the itself shouldn't get row padding/borders — and must NOT be a flex container: that would make its .dt-layout-cell a flex item, which shrinks to fit the table's content instead of stretching to the card's full width (the "gap on the right" bug). `overflow: auto` + `max-height` make this row its own intentional scroll container — scrolling sideways for wide tables and, only once a table actually grows past the cap, vertically too — so the 's sticky `top: 0` below has an unambiguous, correctly-sized box to stick within instead of a page-level offset that doesn't apply here. */ .dt-container .dt-layout-row.dt-layout-table { display: block; width: 100%; padding: 0; border: none; overflow: auto; max-height: 65vh; } .dt-container .dt-layout-row.dt-layout-table .dt-layout-cell { width: 100%; } .dt-length label, .dt-search label { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.8rem; font-weight: 600; color: #64748b; white-space: nowrap; } .dt-search { position: relative; } .dt-search label { /* Label text ("Search:") is emptied via language.search in admin.js, so only the input shows — no gap needed for absent text. */ gap: 0; } .dt-search::before { content: '\f002'; font-family: 'Font Awesome 7 Free'; font-weight: 900; position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: #94a3b8; pointer-events: none; } .dt-search input.dt-input { padding-left: 1.75rem; width: 11rem; max-width: 100%; } /* .dt-input is shared by both the search and the length itself for reliable cross-browser support, and needs its own opaque background since content scrolls underneath. */ position: sticky; top: 0; z-index: 2; background: #f8fafc; box-shadow: inset 0 -1px 0 #f1f5f9; } table.dataTable thead th.dt-orderable-asc, table.dataTable thead th.dt-orderable-desc { cursor: pointer; } /* DataTables 2 wraps each header's content in its own flex row (.dt-column-header > .dt-column-title + .dt-column-order) — the latter is an empty span it creates specifically to hold a sort indicator. Icons go on that span (via ::before) rather than a ::after on the
rather than on
itself: the 's real content now lives inside that inner flex div, so a pseudo-element on the has no guaranteed place in the layout and was rendering invisibly/off-position. */ table.dataTable thead .dt-column-header { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } table.dataTable thead .dt-column-order { display: inline-flex; align-items: center; flex-shrink: 0; } table.dataTable thead .dt-column-order::before { font-family: 'Font Awesome 7 Free'; font-weight: 900; font-size: 0.7rem; line-height: 1; color: #cbd5e1; } table.dataTable thead th.dt-orderable-asc .dt-column-order::before, table.dataTable thead th.dt-orderable-desc .dt-column-order::before { content: '\f0dc'; } table.dataTable thead th.dt-ordering-asc .dt-column-order::before { content: '\f0de'; color: #0F4C81; } table.dataTable thead th.dt-ordering-desc .dt-column-order::before { content: '\f0dd'; color: #0F4C81; } .dt-info { font-size: 0.8rem; color: #64748b; white-space: nowrap; } /* Page-number buttons are appended directly into .dt-paging with no wrapping element in DataTables 2 (unlike v1's inner ), so a plain flex row with a gap is all that's needed to keep them evenly spaced. */ .dt-paging { display: flex; align-items: center; gap: 0.3rem; } .dt-paging .dt-paging-button { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; border: none; border-radius: 0.5rem; background: transparent; font-weight: 600; font-size: 0.75rem; color: #475569; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .dt-paging .dt-paging-button .ellipsis { padding: 0 0.2rem; color: #94a3b8; } .dt-paging .dt-paging-button:hover:not(.disabled) { background: rgba(15, 76, 129, 0.08); color: #0F4C81; } .dt-paging .dt-paging-button.current { background: #0F4C81; color: #fff; } .dt-paging .dt-paging-button.disabled { cursor: not-allowed; opacity: 0.35; } .dt-empty { text-align: center; padding: 3rem 1.5rem !important; color: #94a3b8; font-weight: 500; } @media (max-width: 640px) { .dt-container .dt-layout-row { flex-direction: column; align-items: stretch; } .dt-search input.dt-input { width: 100%; } .dt-paging { justify-content: center; } .dt-info { text-align: center; } }