/* C-Food Admin — design system */
:root {
    --brand-50: #fff7ed;
    --brand-100: #ffedd5;
    --brand-500: #f97316;
    --brand-600: #ea580c;
    --brand-700: #c2410c;
    --sidebar-w: 16.5rem;
    --sidebar-collapsed: 4.5rem;
}

body.admin-app {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* Sidebar */
#sidebar {
    transition: width 0.25s ease, transform 0.25s ease;
}
#sidebar.collapsed {
    width: var(--sidebar-collapsed);
}
#sidebar.collapsed .sidebar-text,
#sidebar.collapsed .logo-text,
#sidebar.collapsed .nav-section-label,
#sidebar.collapsed .user-meta {
    display: none;
}
#sidebar.collapsed .nav-item {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
#sidebar.collapsed .nav-item svg {
    margin-left: 0;
}

.nav-item {
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.nav-item:hover:not(.nav-item-active) {
    transform: translateX(2px);
}

/* List layout */
.admin-list-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .admin-list-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.admin-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.admin-filter-toolbar .admin-input,
.admin-filter-toolbar .admin-select,
.admin-filter-toolbar .admin-search-field {
    height: 2.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}
.admin-filter-toolbar .admin-search-wrap {
    display: flex;
    align-items: center;
}
.admin-search-wrap {
    position: relative;
    flex: 0 1 auto;
    min-width: 14rem;
    max-width: 20rem;
}
.admin-search-icon {
    pointer-events: none;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 1;
}
.admin-search-field {
    width: 100%;
    min-height: 2.5rem;
}
.admin-live-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.admin-live-footer nav[role="navigation"] {
    margin-left: auto;
}

/* Pagination admin */
.admin-pagination-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.admin-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.admin-page-btn:hover {
    background: #fff7ed;
    border-color: #fed7aa;
    color: var(--brand-700);
}
.admin-page-btn.is-active {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.admin-page-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.admin-page-ellipsis {
    padding: 0 0.25rem;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* Action menu (table) */
.admin-action-menu {
    position: relative;
    display: inline-block;
}
.admin-action-menu-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-action-menu-trigger::-webkit-details-marker {
    display: none;
}
.admin-action-menu[open] .admin-action-menu-trigger,
.admin-action-menu-trigger:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}
.admin-action-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 10.5rem;
    padding: 0.375rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}
.admin-action-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}
.admin-action-menu-item:hover {
    background: #f1f5f9;
}
.admin-action-menu-item.is-danger {
    color: #b91c1c;
}
.admin-action-menu-item.is-danger:hover {
    background: #fef2f2;
}
.admin-action-menu-item.is-warning {
    color: #b45309;
}
.admin-action-menu-panel form {
    display: block;
}

/* Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.admin-table.admin-table-wide {
    table-layout: auto;
}
.admin-table thead th,
.admin-table tbody td {
    vertical-align: middle;
    padding: 0.875rem 1rem;
}
.admin-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.admin-table tbody tr {
    background: #fff;
    transition: background 0.12s ease;
}
.admin-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.admin-table tbody tr:hover {
    background: #fff7ed !important;
}
.admin-table tbody td {
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-table .col-id { width: 4rem; }
.admin-table .col-name { width: 14%; }
.admin-table .col-email { width: 18%; }
.admin-table .col-phone { width: 9rem; }
.admin-table .col-id { width: 4rem; }
.admin-table .col-name { width: 14%; }
.admin-table .col-email { width: 18%; }
.admin-table .col-phone { width: 9rem; }
.admin-table .col-role { width: 11rem; }
.admin-table .col-num { width: 5.5rem; text-align: center; }
.admin-table .col-actions { width: 4.5rem; text-align: right; }
.admin-table .col-id-uuid { width: 5.5rem; }
.admin-table .col-rest-name { width: 14rem; }
.admin-table .col-delivery { width: 8rem; }
.admin-table .col-type { width: 7.5rem; }
.admin-table .col-owner { width: 11rem; }
.admin-table .col-status { width: 6.5rem; }
.admin-table .col-num,
.admin-table tbody .col-num {
    text-align: center;
}
.admin-table tbody .col-actions {
    text-align: right;
    overflow: visible;
}
.admin-cell-name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.admin-cell-name > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Form controls */
.admin-input,
.admin-select,
.admin-textarea {
    display: block;
    width: 100%;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.admin-input::placeholder {
    color: #94a3b8;
}
.admin-input.has-icon-left {
    padding-left: 2.5rem;
}

/* Cards */
.admin-card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
}
.admin-card-header {
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* Stat cards */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    opacity: 0.08;
    background: currentColor;
}

/* Scrollbar (sidebar) */
#sidebar nav::-webkit-scrollbar {
    width: 4px;
}
#sidebar nav::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

/* Checkbox / toggle in forms */
.admin-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.375rem;
    border-color: #cbd5e1;
    color: var(--brand-600);
}
.admin-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* Alerts */
.admin-alert {
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    animation: alert-in 0.3s ease;
}
@keyframes alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Page transitions (full navigation) ── */
#admin-main {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#admin-main.is-visible {
    opacity: 1;
    transform: translateY(0);
}
#admin-main.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition-duration: 0.2s;
}

/* ── Live region (HTMX lists) ── */
.admin-live-region {
    position: relative;
    min-height: 6rem;
    transition: opacity 0.2s ease;
}
.admin-live-region.is-loading {
    pointer-events: none;
}
.admin-live-region.is-loading .admin-live-content {
    opacity: 0.45;
    filter: blur(0.5px);
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.admin-live-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    border-radius: inherit;
}
.admin-live-region.is-loading .admin-live-overlay,
.admin-live-region.htmx-request .admin-live-overlay {
    opacity: 1;
    visibility: visible;
}
.admin-live-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid #e2e8f0;
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Table row enter */
@keyframes row-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
tbody tr.row-enter {
    animation: row-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Search input loading */
.admin-input.is-searching,
input.is-searching.admin-input {
    background-image: linear-gradient(90deg, #f1f5f9 0%, #fff 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Card subtle hover lift */
.admin-card {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.admin-card:hover {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.05);
}

/* Buttons press feedback */
.admin-card button[type="submit"],
a.inline-flex {
    transition: transform 0.1s ease;
}
button:active:not(:disabled) {
    transform: scale(0.98);
}

/* View Transitions API (navigateurs compatibles) */
@supports (view-transition-name: none) {
    ::view-transition-old(root) {
        animation: 0.2s ease both fade-out;
    }
    ::view-transition-new(root) {
        animation: 0.3s ease both fade-in;
    }
    @keyframes fade-out {
        to { opacity: 0; }
    }
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(6px); }
    }
}

/* ══════════════════════════════════════════════════════════════
   Dark Mode — Premium Overrides  (covers ALL admin pages)
   ══════════════════════════════════════════════════════════════ */

/* ── Base ── */
body.admin-app { background-color: #000000; color: #ffffff; }

/* ── Cards & Panels ── */
.admin-card,
.admin-action-menu-panel {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-color: #2c2c2e !important;
}
.admin-card-header {
    background: linear-gradient(180deg, #1c1c1e 0%, #161618 100%) !important;
    border-color: #2c2c2e !important;
}
.admin-card-header h3, .admin-card-header p { color: #ffffff !important; }

/* ── Tables ── */
.admin-table thead th {
    background-color: #111113 !important;
    color: #a1a1aa !important;
    border-color: #2c2c2e !important;
}
.admin-table tbody tr {
    background: #1c1c1e !important;
    transition: background 0.12s ease;
}
.admin-table tbody tr:nth-child(even) { background: #18181a !important; }
.admin-table tbody tr:hover { background-color: #2c2c2e !important; }
.admin-table tbody td { border-color: #2c2c2e !important; color: #ffffff; }

/* ── Form controls (Admin UI & generic HTML) ── */
.admin-input,
.admin-select,
.admin-textarea,
.admin-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="hidden"]),
.admin-app textarea,
.admin-app select {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-color: #3a3a3c !important;
}
.admin-app input::placeholder,
.admin-app textarea::placeholder { color: #71717a !important; }
.admin-input:focus, .admin-select:focus, .admin-textarea:focus,
.admin-app input:not([type="checkbox"]):not([type="radio"]):focus, .admin-app select:focus, .admin-app textarea:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important;
}

/* ── Pagination ── */
.admin-page-btn {
    background: #1c1c1e !important;
    color: #d4d4d8 !important;
    border-color: #3a3a3c !important;
}
a.admin-page-btn:hover { background: #2c2c2e !important; color: #ffffff !important; border-color: #52525b !important; }
.admin-page-btn.is-active { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; }
.admin-page-ellipsis { color: #71717a !important; }

/* ── Live footer ── */
.admin-live-footer {
    background-color: #111113 !important;
    border-color: #2c2c2e !important;
    color: #a1a1aa !important;
}
.admin-live-overlay { background: rgba(0, 0, 0, 0.6) !important; }

/* ── Action menu (3-dots dropdown) ── */
.admin-action-menu-trigger {
    background: #2c2c2e !important;
    border-color: #3a3a3c !important;
    color: #d4d4d8 !important;
}
.admin-action-menu[open] .admin-action-menu-trigger,
.admin-action-menu-trigger:hover {
    background: #3a3a3c !important;
    border-color: #52525b !important;
    color: #ffffff !important;
}
.admin-action-menu-panel {
    background: #1c1c1e !important;
    border-color: #3a3a3c !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.admin-action-menu-item { color: #d4d4d8 !important; }
.admin-action-menu-item:hover { background: #2c2c2e !important; color: #ffffff !important; }
.admin-action-menu-item.is-danger { color: #f87171 !important; }
.admin-action-menu-item.is-danger:hover { background: #371520 !important; color: #fca5a5 !important; }

/* ── Checkbox ── */
.admin-checkbox {
    background-color: #2c2c2e !important;
    border-color: #52525b !important;
}

/* ══════════════════════════════════════════════════════════════
   Tailwind utility class overrides for dark mode
   ══════════════════════════════════════════════════════════════ */

/* bg-white → dark card */
.bg-white { background-color: #1c1c1e !important; color: #ffffff !important; }
.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100,
[class*="bg-gray-50"], [class*="bg-slate-50"], [class*="bg-gray-100"], [class*="bg-slate-100"] { 
    background-color: #2c2c2e !important; color: #ffffff !important; 
}

/* Borders */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: #3a3a3c !important; }
.divide-gray-200 > :not(:last-child) { border-color: #3a3a3c !important; }

/* Text: dark → light */
.text-gray-900, .text-gray-800, .text-gray-700,
.text-slate-900, .text-slate-800, .text-slate-700 { color: #ffffff !important; }
.text-gray-600, .text-gray-500, .text-gray-400,
.text-slate-600, .text-slate-500, .text-slate-400 { color: #a1a1aa !important; }
.text-gray-300, .text-slate-300 { color: #71717a !important; }

/* Brand text colors */
.text-brand-900, .text-brand-800, .text-brand-700, .text-brand-600 { color: #ffffff !important; }

/* ── Buttons: bg-white variants → dark ── */
.bg-white.hover\:bg-slate-50:hover,
.bg-white.hover\:bg-gray-50:hover { background-color: #2c2c2e !important; }

/* Secondary buttons (the main culprit) */
[class*="bg-white"][class*="text-slate"], 
[class*="bg-white"][class*="text-gray"] {
    background-color: #2c2c2e !important;
    color: #ffffff !important;
    border-color: #3a3a3c !important;
}
[class*="bg-white"][class*="text-slate"]:hover, 
[class*="bg-white"][class*="text-gray"]:hover {
    background-color: #3a3a3c !important;
    color: #ffffff !important;
}

/* Danger button variants */
[class*="bg-white"][class*="text-red"] {
    background-color: #371520 !important;
    color: #f87171 !important;
    border-color: #5c2333 !important;
}
[class*="bg-white"][class*="text-red"]:hover {
    background-color: #4c1d2d !important;
}

/* Warning/Amber buttons */
.bg-amber-50, [class*="bg-amber-50"] { background-color: #3b2c10 !important; color: #fbbf24 !important; }
.bg-amber-100 { background-color: #4a3518 !important; }

/* Success/Emerald buttons */
.bg-emerald-50, [class*="bg-emerald-50"] { background-color: #0d2818 !important; color: #34d399 !important; }
.bg-emerald-100 { background-color: #133220 !important; }

/* Red/Danger backgrounds */
.bg-red-50, [class*="bg-red-50"] { background-color: #371520 !important; color: #f87171 !important; }
.bg-red-100 { background-color: #4c1d2d !important; }

/* ── Brand colors ── */
.bg-brand-100 { background-color: var(--brand-600) !important; color: #ffffff !important; }

/* ── Hover states for bg-gray-50 ── */
.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover { background-color: #3a3a3c !important; }

/* ── Shadows → darker for dark mode ── */
.shadow, .shadow-sm, .shadow-lg { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; }
.shadow-soft { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; }

/* ── Dropdowns / searchable selects ── */
[class*="bg-white"][class*="shadow"], 
[class*="bg-white"][class*="border"][class*="rounded"] {
    background-color: #1c1c1e !important;
    color: #ffffff !important;
    border-color: #3a3a3c !important;
}

/* ── Stat cards ── */
.stat-card { color: #ffffff !important; }

/* ── Searchable select dropdown (JS generated) ── */
.admin-app select option { background-color: #1c1c1e; color: #ffffff; }

/* ── Badge / pill overrides for visibility ── */
.admin-app [class*="rounded-full"][class*="bg-gray"],
.admin-app [class*="rounded-full"][class*="bg-slate"] {
    background-color: #2c2c2e !important;
    color: #d4d4d8 !important;
}

/* ── Generic link/button inheritance ── */
a, button { color: inherit; }
span, p, td, th, label, legend, h1, h2, h3, h4, h5, h6 { color: inherit; }

/* ── Specific: file input & color picker ── */
input[type="file"] { color: #a1a1aa !important; }
input[type="color"] { background: transparent !important; }

/* ── Alert banners ── */
.admin-alert { background-color: #1c1c1e !important; border-color: #3a3a3c !important; color: #ffffff !important; }

/* ── Shimmer search → dark ── */
.admin-input.is-searching,
input.is-searching.admin-input {
    background-image: linear-gradient(90deg, #2c2c2e 0%, #3a3a3c 50%, #2c2c2e 100%) !important;
}