/* Admin Rich UI System - 3DSelfiy */

:root {
    --admin-sidebar: #0f100a; /* Deeper, more sophisticated black */
    --admin-bg: #fdfdfd;
    --admin-card-bg: rgba(255, 255, 255, 0.85);
    --admin-card-border: rgba(0, 0, 0, 0.04);
    --admin-accent: #f8cc46;
    --admin-accent-glow: rgba(248, 204, 70, 0.25);
    --admin-text-main: #1a1a1a;
    --admin-text-secondary: #64748b;
}

.dark {
    --admin-sidebar: #050505;
    --admin-bg: #0a0a0b;
    --admin-card-bg: rgba(30, 41, 59, 0.4);
    --admin-card-border: rgba(255, 255, 255, 0.06);
    --admin-text-main: #f8fafc;
    --admin-text-secondary: #94a3b8;
}

/* Glassmorphism Surface */
.rich-card {
    background: var(--admin-card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--admin-card-border);
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.05);
    border-radius: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rich-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.08);
    border-color: var(--admin-accent-glow);
}

.dark .rich-card:hover {
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

/* Sidebar Styling */
aside {
    background: var(--admin-sidebar) !important;
    position: sticky !important;
    top: 0;
    height: 100vh;
    z-index: 40; /* Lower than dropdowns and mobile backdrop */
}

/* Header Stacking Context Fix */
header {
    position: relative;
    z-index: 50;
}

.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    width: 4px;
    height: 60%;
    background: var(--admin-accent);
    border-radius: 0 4px 4px 0;
    transition: transform 0.3s ease;
}

.nav-link.active::before {
    transform: translateY(-50%) translateX(0);
}

.nav-link.active {
    background: rgba(248, 204, 70, 0.08) !important;
    color: var(--admin-accent) !important;
    box-shadow: inset 0 0 12px rgba(248, 204, 70, 0.05);
}

/* Premium Badges */
.status-badge {
    position: relative;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-received {
    background: #f1f5f9;
    color: #475569;
}
.status-received::before { background: #64748b; }

.status-progress {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.1);
}
.status-progress::before { background: #4f46e5; box-shadow: 0 0 8px #4f46e5; }

.status-delivered {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}
.status-delivered::before { background: #10b981; box-shadow: 0 0 8px #10b981; }

.status-awaiting {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}
.status-awaiting::before { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }

/* ── Role badges - one distinct colour per role ──────────────────────────── */
.role-super-admin {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
}
.role-super-admin::before { background: #7c3aed; box-shadow: 0 0 8px #7c3aed; }

.role-admin {
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.12);
}
.role-admin::before { background: #4f46e5; box-shadow: 0 0 8px #4f46e5; }

.role-designer {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.12);
}
.role-designer::before { background: #0ea5e9; box-shadow: 0 0 8px #0ea5e9; }

.role-production {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.12);
}
.role-production::before { background: #10b981; box-shadow: 0 0 8px #10b981; }

.role-sales {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.12);
}
.role-sales::before { background: #f97316; box-shadow: 0 0 8px #f97316; }

.role-delivery {
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.12);
}
.role-delivery::before { background: #14b8a6; box-shadow: 0 0 8px #14b8a6; }

.role-default {
    background: #f1f5f9;
    color: #64748b;
}
.role-default::before { background: #94a3b8; }

/* Stat cards: disable the hover lift - they are not interactive */
.stat-card:hover {
    transform: none !important;
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--admin-card-border) !important;
}

/* Trend delta badge */
.trend-up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.trend-down {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.trend-neutral {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 800;
}

/* Table Styling */
.admin-table {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
}

.admin-table tr:not(thead tr) {
    background: var(--admin-card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--admin-card-border);
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-table tr:not(thead tr):hover {
    transform: scale(1.005) translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04);
}

.admin-table td {
    border: none !important;
    padding: 1.5rem;
}

.admin-table td:first-child { border-radius: 1.5rem 0 0 1.5rem; }
.admin-table td:last-child { border-radius: 0 1.5rem 1.5rem 0; }

/* Background Accents */
.admin-blur-dot {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--admin-accent-glow) 0%, transparent 70%);
    z-index: -1;
    filter: blur(100px);
    opacity: 0.4;
    pointer-events: none;
    animation: pulse-soft 8s infinite alternate;
}

/* Animations */
@keyframes reveal {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-soft {
    0% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    100% { transform: scale(1.1) translate(20px, 20px); opacity: 0.5; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(203, 213, 225, 0.7) 25%,
        rgba(241, 245, 249, 1) 50%,
        rgba(203, 213, 225, 0.7) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 0.5rem;
    display: block;
}

.dark .skeleton {
    background: linear-gradient(
        90deg,
        rgba(30, 41, 59, 0.9) 25%,
        rgba(51, 65, 85, 0.7) 50%,
        rgba(30, 41, 59, 0.9) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

/* Staggered shimmer wave across table rows */
.skel-row:nth-child(2) .skeleton { animation-delay: 0.1s; }
.skel-row:nth-child(3) .skeleton { animation-delay: 0.2s; }
.skel-row:nth-child(4) .skeleton { animation-delay: 0.3s; }
.skel-row:nth-child(5) .skeleton { animation-delay: 0.4s; }
.skel-row:nth-child(6) .skeleton { animation-delay: 0.15s; }
.skel-row:nth-child(7) .skeleton { animation-delay: 0.25s; }
.skel-row:nth-child(8) .skeleton { animation-delay: 0.35s; }

/* Global search - keyboard-focused result highlight */
.result-item.gs-focused {
    background: rgba(248, 204, 70, 0.08);
    outline: 2px solid rgba(248, 204, 70, 0.3);
    outline-offset: -2px;
}
.dark .result-item.gs-focused {
    background: rgba(248, 204, 70, 0.06);
    outline-color: rgba(248, 204, 70, 0.25);
}

.reveal {
    opacity: 0;
    will-change: transform, opacity;
}

.reveal.active {
    animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.shimmer-text {
    background: linear-gradient(90deg, #f8cc46 0%, #ffffff 50%, #f8cc46 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* Glassmorphism Dropdowns - High Z-Index to avoid obstruction */
#notifDropdown, #profileDropdown {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.2) !important;
    z-index: 9999 !important;
}

.dark #notifDropdown, .dark #profileDropdown {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6) !important;
}


/* Mobile Navigation System */
@media (max-width: 768px) {
    /* Break flex layout on mobile to prevent sidebar from pushing content */
    .flex.min-h-screen {
        display: block !important;
    }

    aside {
        display: flex !important;
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        /* Explicit opaque background required - fixed panel has no inherited bg   */
        background: #0a0a0a;
        z-index: 10000;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        width: 280px !important;
        box-shadow: 20px 0 60px rgba(0,0,0,0.5);
        pointer-events: none;
        will-change: transform;
        /* Allow scrolling so logout button (mt-auto) is always reachable when
           browser chrome eats vertical space on Android/iOS                        */
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Light mode: sidebar stays dark (text is always white)                       */
    :not(.dark) aside {
        background: #1e293b;
    }

    aside.mobile-active {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Ensure logout button is always visible - sticky to the bottom of sidebar    */
    aside #logoutBtn {
        position: sticky;
        bottom: 0;
        background: inherit;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 1rem;
        margin-top: auto;
    }

    main {
        padding: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* Prevent body scroll when menu is open */
    body.mobile-nav-lock {
        overflow: hidden !important;
        height: 100vh !important;
    }

    /* Backdrop for mobile sidebar.
       Appended inside div.flex.min-h-screen (same stacking context as the aside)
       by initMobileNav() so z-index comparisons work: aside(10000) > backdrop(9998).
       backdrop-filter:blur intentionally absent - it corrupts sibling stacking
       contexts on iOS Safari and makes nav links unclickable.                     */
    .admin-mobile-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .admin-mobile-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    header h1 {
        font-size: 1.875rem !important; /* text-3xl */
    }
}

.mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }
}

/* Scrollbar refinement */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

/* Custom Global Confirmation Modal */
#customConfirmModal {
    backdrop-filter: none; /* Handled by child backdrop */
    z-index: 100000;
}

#customConfirmModal .modal-backdrop {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.4s ease;
}

#customConfirmModal .modal-content {
    background: var(--admin-card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--admin-card-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark #customConfirmModal .modal-content {
    background: rgba(15, 23, 42, 0.9);
}

#customConfirmModal.hidden { display: none; }
#customConfirmModal.flex { display: flex; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - Full Rework
   All admin pages - phones (≤640px) and small tablets (≤768px)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Main content area - tighter padding on mobile ───────────── */
@media (max-width: 640px) {
    main.flex-1 {
        padding: 1rem !important;
    }
}
@media (min-width: 641px) and (max-width: 1023px) {
    main.flex-1 {
        padding: 1.5rem !important;
    }
}

/* ── 1. Table padding on tablets + phones ───────────────────────── */
@media (max-width: 768px) {
    .admin-table td {
        padding: 0.75rem 0.625rem !important;
    }
    .admin-table th {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.6875rem !important;  /* 11px - accessible minimum */
        letter-spacing: 0.1em !important;
    }
    /* Tighten the scrollable table wrapper */
    .p-6.overflow-x-auto {
        padding: 0.375rem !important;
    }
}

/* ── 2. Hide non-critical table columns on phones ────────────────── */
@media (max-width: 640px) {
    /* Orders: keep Tracking ID(1) Client(2) Status(6) Action(7)
       Hide: Phone(3) Order Type(4) Entry Date(5)               */
    #ordersTableEl th:nth-child(3), #ordersTableEl td:nth-child(3),
    #ordersTableEl th:nth-child(4), #ordersTableEl td:nth-child(4),
    #ordersTableEl th:nth-child(5), #ordersTableEl td:nth-child(5) {
        display: none !important;
    }

    /* Customers: keep Name(1) Phone(3) Total Orders(4)
       Hide: Email(2) Member Since(5)                      */
    #customersTableEl th:nth-child(2), #customersTableEl td:nth-child(2),
    #customersTableEl th:nth-child(5), #customersTableEl td:nth-child(5) {
        display: none !important;
    }

    /* Staff: keep Name(1) Role(4) Change Role(5)
       Hide: Email(2) Phone(3)                    */
    #staffTableEl th:nth-child(2), #staffTableEl td:nth-child(2),
    #staffTableEl th:nth-child(3), #staffTableEl td:nth-child(3) {
        display: none !important;
    }

    /* Messages: keep Status(1) Customer(2) Message(3) Action(5)
       Hide: Timestamp(4)                                        */
    #messagesTableEl th:nth-child(4), #messagesTableEl td:nth-child(4) {
        display: none !important;
    }
}

/* ── 3. Orders page - toolbar vertical stack on mobile ───────────── */
@media (max-width: 640px) {
    #ordersToolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.625rem !important;
    }
    /* Search: full-width */
    #ordersToolbar > .relative.group {
        flex: none !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #ordersToolbar > .relative.group input {
        width: 100% !important;
    }
    /* Type + Source selects: side-by-side row */
    #ordersToolbar > div.relative:not(.group) {
        flex: 1 !important;
    }
    /* Selects wrapper - put two selects in a row */
    #ordersFiltersRow {
        display: flex !important;
        gap: 0.5rem !important;
    }
    #ordersFiltersRow .relative {
        flex: 1 !important;
        min-width: 0 !important;
    }
    #ordersFiltersRow select {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Create Order CTA: full-width */
    #ordersToolbar a[href="create-order.html"] {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 4. Status filter tabs - bigger touch targets (min 44px) ─────── */
@media (max-width: 640px) {
    .status-filter-tab {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        flex: 1 1 auto !important;
        text-align: center !important;
        min-width: 0 !important;
        font-size: 0.625rem !important;
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }
}

/* ── 5. Messages page - toolbar + search full-width ─────────────── */
@media (max-width: 640px) {
    #messagesToolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.875rem 1rem !important;
    }
    /* Button group (All / Pending) */
    #messagesToolbar > .flex.gap-3 {
        width: 100% !important;
    }
    #messagesToolbar > .flex.gap-3 button {
        flex: 1 !important;
        text-align: center !important;
    }
    /* Right side controls */
    #messagesToolbar > .flex.items-center.gap-3 {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    /* Search input: full width */
    #messagesToolbar .relative.group {
        width: 100% !important;
    }
    #messageSearch {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* Clear All button: full-width */
    #clearAllBtn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── 6. Internal Ledger (order-details) - vertical stack ─────────── */
@media (max-width: 640px) {
    #noteInputRow {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    #newNoteInput {
        width: 100% !important;
    }
    #commitNoteBtn {
        height: auto !important;
        width: 100% !important;
        padding: 1rem 1.5rem !important;
    }
}

/* ── 7. Rich-card section padding on mobile ─────────────────────── */
@media (max-width: 640px) {
    /* Toolbar card header border-b area */
    .rich-card .border-b.flex {
        padding: 0.875rem 1rem !important;
    }
    /* Rich-card inner p-8 / p-10 sections */
    .rich-card .p-8 {
        padding: 1.125rem !important;
    }
    .rich-card .p-10 {
        padding: 1.125rem !important;
    }
    .rich-card.p-8 {
        padding: 1.125rem !important;
    }
    /* Staff promote modal */
    #promoteModalContent {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }
    /* Messages detail modal */
    #messageModal .p-8 {
        padding: 1rem !important;
    }
    #messageModal h2 {
        font-size: 1.125rem !important;
    }
}

/* ── 8. Staff search input ─────────────────────────────────────── */
@media (max-width: 640px) {
    #staffSearch {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
}

/* ── 9. Breadcrumb on order-details ───────────────────────────── */
@media (max-width: 640px) {
    nav[aria-label="Breadcrumb"] {
        margin-top: -0.25rem !important;
        margin-bottom: 1rem !important;
        font-size: 0.8125rem !important;
    }
}

/* ── 10. Create-order lookup button text ──────────────────────── */
@media (max-width: 640px) {
    #lookupBtn {
        font-size: 0.75rem !important;
    }
}

/* ── 11. Toast - prevent overflow on small screens ─────────────  */
@media (max-width: 640px) {
    #toastContainer {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        max-width: calc(100vw - 1.5rem) !important;
        transform: none !important;
    }
}

/* ── 12. Pagination bars - stack on mobile ────────────────────── */
@media (max-width: 640px) {
    #paginationBar,
    #customerPaginationBar {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.875rem 1rem !important;
    }
}

/* ── 13. Customers search - full-width on mobile ──────────────── */
@media (max-width: 640px) {
    #customerSearch {
        min-width: 0 !important;
    }
    /* Parent wrapper: stretch to full width */
    #customerSearch + span,
    #customerSearch {
        width: 100% !important;
    }
    /* Customers toolbar: full-width search */
    .flex.items-center.gap-3.mb-6 > .relative.group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── 14. Pagination buttons - 44px touch targets on mobile ────── */
@media (max-width: 640px) {
    /* All size-9 (36px) pagination buttons enlarged to 44px on mobile */
    #pageNumbers .size-9,
    #customerPageNumbers .size-9 {
        width: 2.75rem !important;  /* 44px */
        height: 2.75rem !important;
        border-radius: 0.875rem !important;
    }
}

/* ── 15. Staff modal close button - 44px touch target ────────── */
@media (max-width: 640px) {
    #closePromoteModalBtn {
        width: 2.75rem !important;   /* 44px */
        height: 2.75rem !important;
        border-radius: 0.875rem !important;
    }
    #closePromoteModalBtn .material-symbols-outlined {
        font-size: 1.125rem !important;
    }
}

/* ── 16. Analytics charts - min-height on very small phones ──── */
@media (max-width: 480px) {
    .chart-container,
    canvas[id$="Chart"] {
        min-height: 160px !important;
        max-height: 220px !important;
    }
}