/* ==============================================================================
   HAMEL AL MESK - LUXURY ADMIN DASHBOARD STYLESHEET
   نظام التصميم الملكي الشفاف للوحة التحكم الإدارية
   ============================================================================== */

:root {
    --adm-bg: #0c0205;
    --adm-sidebar-bg: #140308;
    --adm-card-bg: rgba(30, 4, 11, 0.75);
    --adm-card-border: rgba(212, 175, 55, 0.25);
    --adm-card-hover: rgba(50, 7, 18, 0.9);
    --adm-primary: #ba1c38;
    --adm-primary-hover: #d82445;
    --adm-gold: #d4af37;
    --adm-gold-light: #f5e08c;
    --adm-text-main: #ffffff;
    --adm-text-muted: #bda3a9;
    --adm-text-dim: #7d656b;
    --adm-danger: #e63946;
    --adm-success: #2a9d8f;
    --adm-warning: #e9c46a;
    --adm-blue: #3a86ff;
    --adm-radius: 14px;
    --adm-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.admin-body {
    font-family: 'Rubik', sans-serif;
    background-color: var(--adm-bg);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(186, 28, 56, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 45%);
    background-attachment: fixed;
    color: var(--adm-text-main);
    min-height: 100vh;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==============================================================================
   1. LOGIN GATEWAY OVERLAY
   ============================================================================== */
.admin-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 1, 3, 0.94);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 1.5rem;
}

.login-modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: rgba(28, 4, 10, 0.9);
    border: 1px solid var(--adm-card-border);
    border-radius: 24px;
    padding: 2.8rem 2.2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(186, 28, 56, 0.35);
    text-align: center;
    overflow: hidden;
    animation: loginFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card-glow {
    position: absolute;
    top: -50px;
    right: 50%;
    transform: translateX(50%);
    width: 220px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.4) 0%, rgba(186, 28, 56, 0.3) 50%, transparent 80%);
    filter: blur(35px);
    pointer-events: none;
}

.login-logo-img {
    width: 68px;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.6));
}

.login-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.login-subtitle {
    font-size: 0.88rem;
    color: var(--adm-text-muted);
    margin-bottom: 2rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: right;
}

.login-input-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--adm-gold-light);
    margin-bottom: 0.45rem;
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap .input-icon {
    position: absolute;
    right: 14px;
    color: var(--adm-text-dim);
    font-size: 0.95rem;
    pointer-events: none;
}

.login-input-wrap input {
    width: 100%;
    padding: 0.85rem 2.8rem 0.85rem 1rem;
    background: rgba(15, 2, 5, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: var(--adm-transition);
}

.login-input-wrap input:focus {
    border-color: var(--adm-gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
    background: rgba(22, 3, 8, 0.9);
}

.btn-toggle-pwd {
    position: absolute;
    left: 12px;
    background: transparent;
    border: none;
    color: var(--adm-text-dim);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px;
}

.btn-toggle-pwd:hover {
    color: var(--adm-gold-light);
}

.login-error-msg {
    display: none;
    background: rgba(230, 57, 70, 0.15);
    border: 1px solid rgba(230, 57, 70, 0.4);
    color: #ff8a93;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.84rem;
    align-items: center;
    gap: 0.5rem;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--adm-text-muted);
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.default-hint-text {
    font-size: 0.75rem;
    color: var(--adm-gold);
    opacity: 0.8;
}

.btn-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.95rem 1.5rem;
    margin-top: 0.4rem;
    background: linear-gradient(135deg, var(--adm-primary) 0%, #8c1027 100%);
    border: 1px solid rgba(245, 224, 140, 0.5);
    border-radius: 14px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(186, 28, 56, 0.45);
    transition: var(--adm-transition);
}

.btn-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(186, 28, 56, 0.65);
    background: linear-gradient(135deg, var(--adm-primary-hover) 0%, #a81532 100%);
}

.btn-login-direct {
    margin-top: 0.5rem;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    padding: 0.75rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--adm-transition);
}

.btn-login-direct:hover {
    background: rgba(212, 175, 55, 0.3);
    color: #ffffff;
}

/* ==============================================================================
   2. MAIN ADMIN LAYOUT
   ============================================================================== */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR (Compact Luxury - Zero Scrollbar) */
.admin-sidebar {
    width: 270px;
    height: 100vh;
    background: linear-gradient(180deg, #160309 0%, #0d0104 100%);
    border-left: 1px solid var(--adm-card-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
    overflow: hidden !important;
}

.sidebar-header {
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}

.sidebar-logo {
    width: 30px;
    height: auto;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

.brand-name {
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    display: block;
}

.brand-badge {
    font-size: 0.62rem;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: var(--adm-gold-light);
    padding: 0.05rem 0.4rem;
    border-radius: 50px;
    font-weight: 700;
}

.sidebar-close-btn {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
}

.sidebar-nav {
    flex: 1;
    overflow: hidden !important;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.menu-item .menu-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.58rem 0.85rem;
    color: var(--adm-text-muted);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.87rem;
    transition: var(--adm-transition);
    position: relative;
}

.menu-item .menu-link i {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
    color: var(--adm-gold);
    transition: var(--adm-transition);
}

.menu-item:hover .menu-link {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.menu-item.active .menu-link {
    background: linear-gradient(90deg, rgba(186, 28, 56, 0.45) 0%, rgba(212, 175, 55, 0.12) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.orders-count-badge {
    margin-right: auto;
    background: var(--adm-primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.1rem 0.45rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.live-dot-tag {
    margin-right: auto;
    background: rgba(42, 157, 143, 0.25);
    border: 1px solid #2a9d8f;
    color: #5ce6d4;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.05rem 0.4rem;
    border-radius: 50px;
}

.sidebar-footer {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-sidebar-view-site {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--adm-gold-light);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: var(--adm-transition);
}

.btn-sidebar-view-site:hover {
    background: rgba(212, 175, 55, 0.25);
    color: #ffffff;
}

.btn-sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem;
    background: transparent;
    border: 1px solid rgba(230, 57, 70, 0.3);
    color: #ff8591;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--adm-transition);
}

.btn-sidebar-logout:hover {
    background: rgba(230, 57, 70, 0.2);
    color: #ffffff;
}

/* MAIN CONTENT */
.admin-main {
    flex: 1;
    margin-right: 280px;
    padding: 2rem 2.5rem;
    min-height: 100vh;
    transition: margin 0.35s ease;
}

/* TOP BAR */
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Topbar Toggle Button */
/* Topbar Toggle Button */
.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(212, 175, 55, 0.12);
    border: 1.5px solid rgba(212, 175, 55, 0.35);
    color: var(--adm-gold-light, #fbe6a2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    z-index: 995;
    pointer-events: auto !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    color: var(--adm-text-muted);
}

.breadcrumb-current {
    color: #ffffff;
    font-weight: 700;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sync-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(42, 157, 143, 0.15);
    border: 1px solid rgba(42, 157, 143, 0.4);
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    font-size: 0.78rem;
    color: #5ce6d4;
    font-weight: 600;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #2a9d8f;
    border-radius: 50%;
    box-shadow: 0 0 8px #2a9d8f;
    animation: pulseDotAnim 2s infinite ease-in-out;
}

@keyframes pulseDotAnim {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

.btn-topbar-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--adm-transition);
}

.btn-view-live {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-view-live:hover {
    background: rgba(255, 255, 255, 0.16);
}

.btn-save-master {
    background: linear-gradient(135deg, var(--adm-primary) 0%, #8c1027 100%);
    border: 1px solid rgba(245, 224, 140, 0.5);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(186, 28, 56, 0.4);
}

.btn-save-master:hover {
    background: linear-gradient(135deg, var(--adm-primary-hover) 0%, #a81532 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(186, 28, 56, 0.6);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-right: 0.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.user-avatar {
    width: 34px;
    height: 34px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 700;
}

/* ==============================================================================
   3. TAB PANES & DASHBOARD COMPONENTS
   ============================================================================== */
.tab-pane {
    display: none;
    animation: tabFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-pane.active {
    display: block;
}

@keyframes tabFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dashboard Banner */
.dashboard-banner {
    background: linear-gradient(135deg, rgba(186, 28, 56, 0.45) 0%, rgba(43, 3, 11, 0.9) 60%, rgba(15, 2, 5, 0.95) 100%);
    border: 1px solid var(--adm-card-border);
    border-radius: 20px;
    padding: 2.2rem 2.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.welcome-heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.welcome-sub {
    font-size: 0.95rem;
    color: var(--adm-text-muted);
}

.banner-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.btn-banner-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--adm-gold);
    color: #ffffff;
    padding: 0.75rem 1.4rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--adm-transition);
}

.btn-banner-action:hover {
    background: var(--adm-gold);
    color: #0c0205;
    transform: translateY(-2px);
}

.btn-banner-gold {
    background: linear-gradient(135deg, var(--adm-gold) 0%, #a6831d 100%);
    color: #0c0205;
    border: 1px solid #ffffff;
}

.btn-banner-gold:hover {
    background: var(--adm-gold-light);
    color: #000000;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--adm-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    backdrop-filter: blur(20px);
    transition: var(--adm-transition);
}

.stat-card:hover {
    transform: translateY(-4px);
    background: var(--adm-card-hover);
    border-color: rgba(212, 175, 55, 0.35);
}

.stat-card.card-glow-burgundy { box-shadow: 0 10px 25px rgba(186, 28, 56, 0.18); }
.stat-card.card-glow-gold { box-shadow: 0 10px 25px rgba(212, 175, 55, 0.15); }
.stat-card.card-glow-blue { box-shadow: 0 10px 25px rgba(58, 134, 255, 0.15); }
.stat-card.card-glow-green { box-shadow: 0 10px 25px rgba(42, 157, 143, 0.15); }

.stat-icon-wrap {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--adm-gold-light);
}

.stat-label {
    display: block;
    font-size: 0.84rem;
    color: var(--adm-text-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.stat-trend {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
}

.trend-up { background: rgba(42, 157, 143, 0.2); color: #5ce6d4; }
.trend-gold { background: rgba(212, 175, 55, 0.2); color: var(--adm-gold-light); }
.trend-blue { background: rgba(58, 134, 255, 0.2); color: #8cb8ff; }
.trend-green { background: rgba(42, 157, 143, 0.2); color: #5ce6d4; }

/* Dashboard Lower Grid & Chart */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
}

.dash-card {
    background: var(--adm-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.6rem;
    backdrop-filter: blur(20px);
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-card-header .header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dash-card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

.badge-chart-live {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(42, 157, 143, 0.2);
    color: #5ce6d4;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    border: 1px solid rgba(42, 157, 143, 0.4);
}

.chart-canvas-wrapper {
    width: 100%;
    height: 220px;
    position: relative;
    margin-bottom: 1rem;
}

.chart-footer-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 2, 5, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    font-size: 0.84rem;
}

.gold-text { color: var(--adm-gold-light); }
.green-text { color: #5ce6d4; }

.status-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.status-stat-pill {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pill-new { background: rgba(58, 134, 255, 0.15); border: 1px solid rgba(58, 134, 255, 0.3); color: #8cb8ff; }
.pill-processing { background: rgba(233, 196, 106, 0.15); border: 1px solid rgba(233, 196, 106, 0.3); color: #ffe28a; }
.pill-shipped { background: rgba(186, 28, 56, 0.2); border: 1px solid rgba(186, 28, 56, 0.4); color: #ff859c; }
.pill-completed { background: rgba(42, 157, 143, 0.15); border: 1px solid rgba(42, 157, 143, 0.3); color: #5ce6d4; }

.status-num {
    font-size: 1.2rem;
    font-weight: 800;
}

.dash-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 1.2rem 0;
}

.quick-links-title {
    font-size: 0.88rem;
    color: var(--adm-text-muted);
    margin-bottom: 0.75rem;
}

.quick-links-btns {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.btn-quick-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-align: right;
    transition: var(--adm-transition);
}

.btn-quick-nav:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--adm-gold);
    color: var(--adm-gold-light);
}

.recent-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recent-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    background: rgba(20, 3, 7, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: var(--adm-transition);
}

.recent-order-item:hover {
    background: rgba(35, 5, 12, 0.85);
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.roi-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 200px;
}

.roi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(186, 28, 56, 0.4) 0%, rgba(212, 175, 55, 0.2) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-gold-light);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.roi-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.roi-name {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 700;
}

.roi-sub {
    font-size: 0.8rem;
    color: var(--adm-text-muted);
}

.roi-sub i {
    color: var(--adm-gold);
    font-size: 0.75rem;
    margin-left: 2px;
}

.roi-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roi-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-sm-roi {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    color: #f1e4e6;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--adm-transition);
}

.btn-sm-roi:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--adm-gold);
    color: var(--adm-gold-light);
}

/* ==============================================================================
   4. LIVE SPLIT-SCREEN PREVIEW TAB
   ============================================================================== */
.live-preview-container {
    width: 100%;
    height: 75vh;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    transition: var(--adm-transition);
}

.preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #0d0104;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.preview-iframe.mobile-mode {
    width: 390px;
    border-left: 2px solid var(--adm-gold);
    border-right: 2px solid var(--adm-gold);
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.2);
}

.btn-viewport-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--adm-text-muted);
}

.btn-viewport-btn.active {
    background: var(--adm-gold);
    color: #0c0205;
}

/* ==============================================================================
   5. ORDERS MANAGEMENT TAB
   ============================================================================== */
.section-card {
    background: var(--adm-card-bg);
    border: 1px solid var(--adm-card-border);
    border-radius: 20px;
    padding: 2rem 2.2rem;
    backdrop-filter: blur(24px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
}

.section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-titles h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-titles p {
    font-size: 0.88rem;
    color: var(--adm-text-muted);
    margin-top: 0.2rem;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--adm-transition);
    border: none;
}

.btn-add-order {
    background: rgba(42, 157, 143, 0.2);
    border: 1px solid #2a9d8f;
    color: #5ce6d4;
}

.btn-add-order:hover {
    background: #2a9d8f;
    color: #0c0205;
}

.btn-export-csv {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
}

.btn-export-csv:hover {
    background: var(--adm-gold);
    color: #0c0205;
}

.btn-danger-soft {
    background: rgba(230, 57, 70, 0.15);
    border: 1px solid rgba(230, 57, 70, 0.4);
    color: #ff8591;
}

.btn-danger-soft:hover {
    background: var(--adm-danger);
    color: #ffffff;
}

.btn-save-tab {
    background: linear-gradient(135deg, var(--adm-primary) 0%, #8c1027 100%);
    border: 1px solid var(--adm-gold);
    color: #ffffff;
}

.btn-save-tab:hover {
    background: linear-gradient(135deg, var(--adm-primary-hover) 0%, #a81532 100%);
    transform: translateY(-2px);
}

/* Orders Toolbar */
.orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
}

.search-box {
    position: relative;
    width: 100%;
    max-width: 460px;
}

.search-box i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-text-dim);
}

.search-box input {
    width: 100%;
    padding: 0.75rem 2.8rem 0.75rem 1rem;
    background: rgba(15, 2, 5, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: var(--adm-transition);
}

.search-box input:focus {
    border-color: var(--adm-gold);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--adm-text-muted);
}

.admin-select {
    padding: 0.7rem 1rem;
    background: rgba(15, 2, 5, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
}

.admin-select:focus {
    border-color: var(--adm-gold);
}

/* Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: right;
}

.admin-table th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--adm-gold-light);
    padding: 1rem 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.admin-table td {
    padding: 1rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.order-id-badge {
    font-family: monospace;
    font-weight: 700;
    color: var(--adm-gold-light);
    background: rgba(212, 175, 55, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    cursor: pointer;
}

/* Status Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-new { background: rgba(58, 134, 255, 0.2); color: #8cb8ff; border: 1px solid rgba(58, 134, 255, 0.4); }
.status-processing { background: rgba(233, 196, 106, 0.2); color: #ffe28a; border: 1px solid rgba(233, 196, 106, 0.4); }
.status-shipped { background: rgba(186, 28, 56, 0.25); color: #ff859c; border: 1px solid rgba(186, 28, 56, 0.5); }
.status-completed { background: rgba(42, 157, 143, 0.2); color: #5ce6d4; border: 1px solid rgba(42, 157, 143, 0.4); }
.status-cancelled { background: rgba(230, 57, 70, 0.2); color: #ff8591; border: 1px solid rgba(230, 57, 70, 0.4); }

.table-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-act {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: var(--adm-transition);
}

.btn-wa { background: #25D366; color: #ffffff; }
.btn-wa:hover { background: #20b858; transform: scale(1.1); }
.btn-call { background: #3a86ff; color: #ffffff; }
.btn-call:hover { background: #2671eb; transform: scale(1.1); }
.btn-print { background: var(--adm-gold); color: #0c0205; }
.btn-print:hover { background: var(--adm-gold-light); transform: scale(1.1); }
.btn-del { background: rgba(230, 57, 70, 0.2); color: #ff8591; }
.btn-del:hover { background: var(--adm-danger); color: #ffffff; }

.empty-orders-view,
.empty-state-box {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--adm-text-muted);
}

.empty-orders-view i,
.empty-state-box i {
    font-size: 3rem;
    color: var(--adm-gold);
    opacity: 0.4;
    margin-bottom: 1rem;
}

/* ==============================================================================
   6. CMS CONTENT EDITING
   ============================================================================== */
.cms-group-card {
    background: rgba(18, 2, 6, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.8rem;
    margin-bottom: 1.6rem;
}

.cms-group-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--adm-gold-light);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sub-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.cms-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.cms-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--adm-text-muted);
}

.admin-input,
.admin-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(12, 1, 4, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: var(--adm-transition);
}

.admin-input:focus,
.admin-textarea:focus {
    border-color: var(--adm-gold);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
    background: rgba(20, 2, 7, 0.95);
}

.ingredients-edit-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ingredient-edit-box {
    background: rgba(28, 3, 9, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    position: relative;
}

.ingredient-edit-box.pheromone-edit-box {
    border-color: rgba(255, 107, 133, 0.4);
    background: rgba(38, 4, 12, 0.75);
}

.ing-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--adm-gold-light);
    background: rgba(212, 175, 55, 0.15);
    padding: 0.15rem 0.6rem;
    border-radius: 50px;
    margin-bottom: 0.8rem;
}

.tab-save-footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

/* ==============================================================================
   7. MEDIA MANAGER
   ============================================================================== */
.media-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
}

.media-card-box {
    background: rgba(18, 2, 6, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.4rem;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    transition: var(--adm-transition);
}

.media-card-box:hover {
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(28, 3, 9, 0.85);
}

.media-preview-wrap {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    background: #000000;
    border: 1.5px solid var(--adm-gold);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.media-preview-wrap.circle-preview {
    border-radius: 50%;
}

.media-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.media-details h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
}

.media-details p {
    font-size: 0.78rem;
    color: var(--adm-text-muted);
}

.media-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.btn-upload-file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--adm-gold-light);
    background: rgba(212, 175, 55, 0.15);
    border: 1px dashed var(--adm-gold);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    width: fit-content;
    transition: var(--adm-transition);
}

.btn-upload-file:hover {
    background: rgba(212, 175, 55, 0.3);
    color: #ffffff;
}

.btn-upload-file input[type="file"] {
    display: none;
}

/* ==============================================================================
   8. THEME & COLORS
   ============================================================================== */
.presets-container {
    margin-bottom: 1.8rem;
}

.preset-heading {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--adm-gold-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.preset-card {
    background: rgba(18, 2, 6, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: var(--adm-transition);
}

.preset-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.4);
}

.preset-card.active {
    border-color: var(--adm-gold);
    background: rgba(38, 4, 12, 0.9);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
}

.preset-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 0.8rem;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.preview-burgundy { background: radial-gradient(circle, #ba1c38 0%, #2b030b 100%); }
.preview-emerald { background: radial-gradient(circle, #0e6251 0%, #04251e 100%); }
.preview-sapphire { background: radial-gradient(circle, #1a5276 0%, #092233 100%); }
.preview-noir { background: radial-gradient(circle, #2c3e50 0%, #0d1117 100%); }

.dot-gold {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: #d4af37;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.dot-rose {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: #ff6b85;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.preset-card h4 {
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.preset-card p {
    font-size: 0.74rem;
    color: var(--adm-text-muted);
}

.color-pickers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.color-picker-item {
    background: rgba(18, 2, 6, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.color-picker-item label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--adm-text-muted);
}

.picker-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.picker-control input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
}

.picker-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.picker-control input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.hex-input {
    font-family: monospace;
    font-weight: 700;
    text-transform: uppercase;
}

/* ==============================================================================
   9. PRICING & PACKAGES
   ============================================================================== */
.packages-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.package-config-box {
    background: rgba(18, 2, 6, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.package-config-box.highlight-pkg {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(35, 4, 11, 0.85);
}

.pkg-config-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--adm-gold-light);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pkg-config-header h4 {
    font-size: 1rem;
    font-weight: 700;
}

/* ==============================================================================
   10. SETTINGS & DANGER ZONE
   ============================================================================== */
.danger-card {
    border-color: rgba(230, 57, 70, 0.3);
    background: rgba(30, 3, 6, 0.7);
}

.text-danger {
    color: #ff8591 !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e63946 0%, #9e1c27 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-danger:hover {
    background: #ff4757;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.4);
}

.card-desc-text {
    font-size: 0.88rem;
    color: var(--adm-text-muted);
    margin-bottom: 1.2rem;
}

.backup-actions-row,
.danger-actions-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ==============================================================================
   11. MODALS & INVOICE PRINTING
   ============================================================================== */
.admin-modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 1, 2, 0.88);
    backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.5rem;
}

.admin-modal.active {
    display: flex;
}

.admin-modal-dialog {
    position: relative;
    width: 95vw;
    max-width: 580px;
    background: #180308;
    border: 1px solid var(--adm-gold);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(186, 28, 56, 0.35);
    animation: modalScale 0.3s ease;
}

@keyframes modalScale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--adm-gold-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.required {
    color: var(--adm-danger);
}

/* Printable Invoice */
.invoice-dialog {
    position: relative;
    width: 95vw;
    max-width: 650px;
}

.printable-invoice-content {
    background: #ffffff;
    color: #1a1a1a;
    padding: 2.2rem;
    border-radius: 12px;
    direction: rtl;
    text-align: right;
}

.invoice-brand-header {
    text-align: center;
}

.inv-logo {
    width: 60px;
    margin-bottom: 0.4rem;
}

.invoice-brand-header h2 {
    font-size: 1.3rem;
    color: #8c1027;
    margin-bottom: 0.1rem;
}

.inv-divider {
    border: none;
    border-top: 1.5px dashed #ccc;
    margin: 1.2rem 0;
}

.inv-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

.inv-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.4rem;
}

.inv-items-table th,
.inv-items-table td {
    padding: 0.75rem;
    border: 1px solid #ddd;
    text-align: right;
    font-size: 0.9rem;
}

.inv-items-table th {
    background: #f7f7f7;
    color: #333;
}

.inv-total-bold {
    font-weight: 800;
    color: #8c1027;
    font-size: 1.1rem;
}

.inv-footer-note {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}

@media print {
    body * {
        visibility: hidden;
    }
    #printableInvoice, #printableInvoice * {
        visibility: visible;
    }
    #printableInvoice {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
    }
}

/* ==============================================================================
   12. TOAST NOTIFICATIONS
   ============================================================================== */
.admin-toast {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    background: rgba(18, 2, 6, 0.92);
    border: 1px solid var(--adm-gold);
    color: #ffffff;
    padding: 0.85rem 1.4rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.3);
    z-index: 999999;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.admin-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-icon {
    color: #5ce6d4;
    font-size: 1.2rem;
}

/* ==============================================================================
   13. RESPONSIVE BREAKPOINTS
   ============================================================================== */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-grid-2 { grid-template-columns: 1fr; }
    .presets-grid { grid-template-columns: repeat(2, 1fr); }
    .packages-settings-grid { grid-template-columns: 1fr; }
    .media-cards-grid { grid-template-columns: 1fr; }
    .color-pickers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(100%);
    }
    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }
    .sidebar-close-btn {
        display: block;
    }
    .admin-main {
        margin-right: 0;
        padding: 1.5rem 1rem;
    }
    /* Topbar Toggle Button */
/* Topbar Toggle Button */
.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(212, 175, 55, 0.12);
    border: 1.5px solid rgba(212, 175, 55, 0.35);
    color: var(--adm-gold-light, #fbe6a2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    z-index: 995;
    pointer-events: auto !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}
    .cms-form-grid-2,
    .cms-form-grid-3 {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .color-pickers-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}


/* ==============================================================================
   ENHANCED UNCLUTTERED ORDERS & CARDS STYLING
   ============================================================================== */

/* View Mode Toggle Buttons */
.view-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(15, 2, 5, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.3rem;
    border-radius: 12px;
}

.btn-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: transparent;
    border: none;
    color: var(--adm-text-muted);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--adm-transition);
}

.btn-view-toggle.active {
    background: var(--adm-gold);
    color: #0c0205;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Luxury Spaced Table */
.luxury-spaced-table {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
    margin-top: -0.5rem;
}

.luxury-spaced-table th {
    background: rgba(25, 3, 8, 0.7);
    color: var(--adm-gold-light);
    font-size: 0.88rem;
    font-weight: 800;
    padding: 0.9rem 1.2rem;
    border: none;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.luxury-spaced-table .order-table-row {
    background: rgba(20, 2, 7, 0.75);
    border-radius: 14px;
    transition: var(--adm-transition);
}

.luxury-spaced-table .order-table-row:hover {
    background: rgba(38, 4, 12, 0.95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.15);
}

.luxury-spaced-table td {
    padding: 1.1rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.luxury-spaced-table td:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.luxury-spaced-table td:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

/* Order ID & Time Stack */
.col-order-id {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.order-time-pill {
    font-size: 0.76rem;
    color: var(--adm-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Customer Stack */
.col-customer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cust-name-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
}

.cust-phone-link {
    font-size: 0.82rem;
    color: var(--adm-gold-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--adm-transition);
}

.cust-phone-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Address Stack */
.city-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--adm-gold-light);
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    margin-bottom: 0.25rem;
}

.addr-detail-text {
    font-size: 0.82rem;
    color: var(--adm-text-muted);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Package Stack */
.package-info-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pkg-pill-clean {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
    width: fit-content;
}

.pkg-pill-clean.pkg-1 { background: rgba(58, 134, 255, 0.15); border: 1px solid rgba(58, 134, 255, 0.35); color: #8cb8ff; }
.pkg-pill-clean.pkg-2 { background: rgba(42, 157, 143, 0.18); border: 1px solid rgba(42, 157, 143, 0.4); color: #5ce6d4; }
.pkg-pill-clean.pkg-3 { background: rgba(186, 28, 56, 0.25); border: 1px solid rgba(212, 175, 55, 0.45); color: var(--adm-gold-light); }

/* Luxury Quantity Pill Badge */
.qty-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.22rem 0.65rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    width: fit-content;
}

.qty-pill-badge strong {
    font-size: 0.86rem;
}

.qty-pill-badge.qty-1 {
    background: rgba(58, 134, 255, 0.15);
    border-color: rgba(58, 134, 255, 0.45);
    color: #93c5fd;
}

.qty-pill-badge.qty-2 {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.45);
    color: #6ee7b7;
}

.qty-pill-badge.qty-3 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(186, 28, 56, 0.25));
    border-color: rgba(212, 175, 55, 0.6);
    color: #fde047;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}

/* Package Pills */
.pkg-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    white-space: nowrap;
    width: fit-content;
}

.pkg-pill-tag.pkg-bronze {
    background: rgba(205, 127, 50, 0.15);
    border: 1px solid rgba(205, 127, 50, 0.4);
    color: #f6c89f;
}

.pkg-pill-tag.pkg-silver {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.45);
    color: #e2e8f0;
}

.pkg-pill-tag.pkg-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(107, 12, 27, 0.3));
    border: 1px solid rgba(212, 175, 55, 0.6);
    color: #fef08a;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.tag-gift-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(255, 107, 133, 0.15);
    border: 1px solid rgba(255, 107, 133, 0.35);
    color: #ff859c;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    width: fit-content;
}

/* Action Buttons */
.table-actions-spaced {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-act-wide {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--adm-transition);
}

.btn-info-detail {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-info-detail:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Cards Grid Layout (Alternative View) */
.orders-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.4rem;
    margin-top: 1rem;
}

.order-glass-card {
    background: rgba(20, 2, 7, 0.85);
    border: 1px solid var(--adm-card-border);
    border-radius: 18px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: var(--adm-transition);
}

.order-glass-card:hover {
    transform: translateY(-4px);
    background: rgba(35, 4, 11, 0.95);
    border-color: var(--adm-gold);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 55, 0.2);
}

.order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.head-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.card-customer-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cust-avatar-circle {
    width: 38px;
    height: 38px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.card-location-row {
    background: rgba(10, 1, 3, 0.6);
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-location-row .addr-detail-text {
    max-width: 100%;
    white-space: normal;
    margin-top: 0.25rem;
}

.card-package-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0.6rem;
}

.btn-card-act {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--adm-transition);
}

.card-footer-btns {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}


/* ==============================================================================
   LUXURY ULTRA-THIN CUSTOM SCROLLBAR FOR ADMIN PANEL
   ============================================================================== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #ba1c38 rgba(15, 2, 5, 0.95);
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(12, 2, 5, 0.95);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--adm-primary, #ba1c38) 0%, var(--adm-gold, #d4af37) 100%);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(186, 28, 56, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d82445 0%, #f5e08c 100%);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}

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


/* ==============================================================================
   DASHBOARD BUTTONS & RECENT ORDERS LUXURY STYLING
   ============================================================================== */
.btn-sm-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: var(--adm-transition);
}

.btn-sm-action:hover {
    background: var(--adm-gold);
    color: #0c0205;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.recent-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.recent-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(20, 2, 7, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: var(--adm-transition);
}

.recent-order-item:hover {
    background: rgba(35, 4, 11, 0.95);
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateX(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.r-order-info {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.r-avatar-icon {
    width: 38px;
    height: 38px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.r-text-stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.r-order-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}

.r-order-pkg {
    font-size: 0.8rem;
    color: var(--adm-text-muted);
}

.r-order-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}


/* ==============================================================================
   PERMANENT LUXURY ORDERS CARDS GRID
   ============================================================================== */
.orders-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.order-glass-card {
    background: linear-gradient(145deg, rgba(26, 3, 9, 0.9) 0%, rgba(14, 1, 5, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 18px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    transition: var(--adm-transition);
    position: relative;
    overflow: hidden;
}

.order-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--adm-gold) 50%, transparent 100%);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.order-glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--adm-gold);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.25);
    background: linear-gradient(145deg, rgba(38, 4, 12, 0.95) 0%, rgba(20, 2, 7, 0.98) 100%);
}

.order-glass-card:hover::before {
    opacity: 1;
}

.order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.head-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.card-customer-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cust-avatar-circle {
    width: 42px;
    height: 42px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.cust-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.card-location-row {
    background: rgba(8, 1, 3, 0.6);
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.card-notes-row {
    font-size: 0.8rem;
    color: var(--adm-gold-light);
    background: rgba(212, 175, 55, 0.1);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0.6rem;
}


/* ==============================================================================
   LUXURY UPDATE PASSWORD BUTTON STYLING
   ============================================================================== */
.btn-update-password {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.8rem 1.6rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(186, 28, 56, 0.45) 100%);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 15px rgba(212, 175, 55, 0.2);
    transition: var(--adm-transition);
    margin-top: 0.5rem;
}

.btn-update-password:hover {
    background: linear-gradient(135deg, var(--adm-gold) 0%, #b38f24 100%);
    color: #0c0205;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.45);
}

.btn-update-password i {
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.btn-update-password:hover i.fa-arrow-left {
    transform: translateX(-4px);
}


/* ==============================================================================
   1-CLICK UNIFIED BRAND COLOR SWITCHER STYLES
   ============================================================================== */
.highlight-unified-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(186, 28, 56, 0.25) 100%) !important;
    border: 1px solid var(--adm-gold) !important;
    margin-bottom: 1.8rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.2);
}

.unified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.unified-title-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.unified-title-wrap i {
    font-size: 2rem;
    color: var(--adm-gold);
    background: rgba(212, 175, 55, 0.15);
    padding: 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.unified-picker-box {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.unified-picker-box input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 48px;
    height: 48px;
    border: 2px solid var(--adm-gold);
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.unified-picker-box input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.unified-picker-box input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}


/* ==============================================================================
   COMPREHENSIVE COLOR MANAGEMENT STYLES
   ============================================================================== */
.btn-reset-colors {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--adm-gold);
    color: var(--adm-gold-light);
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--adm-transition);
}

.btn-reset-colors:hover {
    background: var(--adm-gold);
    color: #0c0205;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}

.color-role-section {
    background: rgba(18, 2, 7, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 16px;
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}

.color-role-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.color-role-header i {
    font-size: 1.4rem;
    color: var(--adm-gold);
    background: rgba(212, 175, 55, 0.12);
    padding: 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.color-role-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.color-role-header p {
    font-size: 0.85rem;
    color: var(--adm-text-muted);
}

.color-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem;
}

.color-role-card {
    background: rgba(10, 1, 4, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: var(--adm-transition);
}

.color-role-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.color-role-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.color-picker-bubble {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--adm-gold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
}

.color-picker-bubble input[type="color"] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    cursor: pointer;
    border: none;
    background: none;
}

.color-role-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.color-role-info h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.color-role-info .hex-input {
    font-family: monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.4rem 0.6rem;
}

.color-role-desc {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #d8c2c8;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.color-role-desc i {
    color: var(--adm-gold);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.color-role-desc strong {
    color: var(--adm-gold-light);
}


/* Save Bottom Bar */
.cms-save-bottom-bar {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--adm-card-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.cms-save-bottom-bar .btn-save-master {
    padding: 0.85rem 2.2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--adm-gold-main) 0%, var(--adm-gold-light) 50%, var(--adm-gold-main) 100%);
    color: #0c0205;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cms-save-bottom-bar .btn-save-master:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.55);
    filter: brightness(1.08);
}


/* Topbar Save Button Dynamic State */
.btn-save-master {
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-save-master.has-unsaved-changes {
    background: linear-gradient(135deg, #e11d48 0%, #ba1c38 50%, #996515 100%) !important;
    color: #ffffff !important;
    border-color: #fbe6a2 !important;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.65), 0 0 10px rgba(212, 175, 55, 0.5) !important;
    animation: saveButtonPulse 1.8s infinite ease-in-out;
}

.btn-save-master .unsaved-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: 0 0 8px #ffffff;
    animation: dotBlink 1s infinite alternate;
}

@keyframes saveButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(225, 29, 72, 0.5), 0 0 8px rgba(212, 175, 55, 0.4);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 25px rgba(225, 29, 72, 0.85), 0 0 15px rgba(251, 230, 162, 0.7);
    }
}

@keyframes dotBlink {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}


/* ==============================================================================
   MASTER COMPREHENSIVE RESPONSIVE SUITE (ALL SCREENS 320px - 4K)
   ============================================================================== */

/* Zero-Overflow Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}

.admin-layout {
    display: flex;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

/* Fluid Canvas */
.chart-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.chart-canvas-wrapper canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Fluid Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fluid Preview Iframe */
.live-preview-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.preview-iframe {
    max-width: 100% !important;
    border: none;
    border-radius: 12px;
}

.preview-iframe.desktop-mode {
    width: 100%;
    height: 750px;
}

.preview-iframe.mobile-mode {
    width: 390px;
    max-width: 100% !important;
    height: 750px;
}

/* Backdrop Overlay (With Explicit Pointer-Events Control) */
.admin-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5, 1, 3, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

.admin-sidebar-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==============================================================================
   RESPONSIVE BREAKPOINT: TABLET & LAPTOP (max-width: 1100px)
   ============================================================================== */
@media (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .dash-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    .presets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .packages-settings-grid,
    .packages-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    .media-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    .color-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

/* ==============================================================================
   RESPONSIVE BREAKPOINT: TABLET DRAWER (max-width: 960px)
   ============================================================================== */
@media (max-width: 960px) {
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: -15px 0 45px rgba(0, 0, 0, 0.95) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        cursor: pointer;
    }

    .sidebar-nav {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.8rem 0.6rem 2rem 0.6rem !important;
    }

    .admin-main {
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 1rem 0.85rem 3rem 0.85rem !important;
    }

    /* Topbar Toggle Button */
/* Topbar Toggle Button */
.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(212, 175, 55, 0.12);
    border: 1.5px solid rgba(212, 175, 55, 0.35);
    color: var(--adm-gold-light, #fbe6a2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    z-index: 995;
    pointer-events: auto !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}
}

/* ==============================================================================
   RESPONSIVE BREAKPOINT: SMARTPHONES (max-width: 768px)
   ============================================================================== */
@media (max-width: 768px) {
    /* Topbar */
    .admin-topbar {
        padding: 0.55rem 0.75rem !important;
        border-radius: 14px !important;
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .topbar-left {
        gap: 0.5rem !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Topbar Toggle Button */
/* Topbar Toggle Button */
.topbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(212, 175, 55, 0.12);
    border: 1.5px solid rgba(212, 175, 55, 0.35);
    color: var(--adm-gold-light, #fbe6a2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    position: relative;
    z-index: 995;
    pointer-events: auto !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    touch-action: manipulation;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

.topbar-toggle:hover,
.topbar-toggle:active {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.topbar-toggle i {
    pointer-events: none !important;
}

    .topbar-breadcrumb {
        font-size: 0.82rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar-breadcrumb .breadcrumb-root,
    .topbar-breadcrumb i {
        display: none !important;
    }

    .topbar-right {
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
    }

    .sync-status-indicator .sync-text {
        display: none !important;
    }

    .sync-status-indicator {
        padding: 0.35rem 0.55rem !important;
    }

    .btn-view-live span {
        display: none !important;
    }

    .btn-view-live {
        padding: 0.45rem 0.65rem !important;
    }

    .btn-save-master {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.8rem !important;
        gap: 0.35rem !important;
    }

    .topbar-user .user-name {
        display: none !important;
    }

    .topbar-user {
        padding: 0.25rem 0.4rem !important;
    }

    /* Dashboard Banner */
    .dashboard-banner {
        padding: 1.1rem !important;
        border-radius: 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .welcome-heading {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    .welcome-sub {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
    }

    .banner-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .btn-banner-action {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.7rem !important;
        font-size: 0.85rem !important;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }

    .stat-card {
        padding: 0.85rem 0.75rem !important;
        border-radius: 14px !important;
    }

    .stat-icon-box {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
        border-radius: 10px !important;
    }

    .stat-value {
        font-size: 1.18rem !important;
    }

    .stat-label {
        font-size: 0.74rem !important;
    }

    /* Dashboard Details */
    .chart-footer-stats {
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .status-breakdown-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }

    .quick-links-btns {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    .btn-quick-nav {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0.75rem 0.85rem !important;
        font-size: 0.82rem !important;
    }

    /* Orders Tab */
    .section-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
    }

    .header-tools {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .header-tools button,
    .header-tools a {
        width: 100% !important;
        justify-content: center !important;
    }

    .orders-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .search-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-box input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 0.7rem 2.4rem 0.7rem 0.85rem !important;
    }

    .filter-group {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }

    .filter-group select {
        width: 100% !important;
        font-size: 16px !important;
    }

    .orders-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .order-card-lux {
        padding: 1rem 0.9rem !important;
        border-radius: 14px !important;
    }

    .card-cust-info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .card-package-row {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .order-card-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
    }

    .btn-card-act.btn-wa {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.7rem !important;
        font-size: 0.88rem !important;
    }

    .card-footer-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        width: 100% !important;
        gap: 0.45rem !important;
    }

    .card-footer-btns .btn-act {
        width: 100% !important;
        height: 40px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Section Cards & Form CMS */
    .section-card {
        padding: 0.95rem !important;
        border-radius: 14px !important;
        margin-bottom: 1rem !important;
    }

    .cms-group-card {
        padding: 0.95rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.95rem !important;
    }

    .cms-form-grid-2,
    .cms-form-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .admin-input,
    .admin-textarea,
    .admin-select {
        font-size: 16px !important;
        padding: 0.65rem 0.85rem !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* Media Manager */
    .media-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .media-card-item {
        padding: 0.95rem !important;
        border-radius: 12px !important;
    }

    .media-preview-container {
        max-height: 180px !important;
    }

    .media-upload-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .btn-media-upload {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Theme & Colors */
    .presets-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }

    .preset-card {
        padding: 0.85rem 0.6rem !important;
        border-radius: 12px !important;
    }

    .preset-preview {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 0.5rem !important;
    }

    .preset-card h4 {
        font-size: 0.8rem !important;
    }

    .preset-card p {
        font-size: 0.66rem !important;
    }

    .color-role-section {
        padding: 0.95rem !important;
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
    }

    .color-role-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .color-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .color-role-card {
        padding: 0.85rem !important;
        border-radius: 12px !important;
    }

    .color-picker-bubble {
        width: 44px !important;
        height: 44px !important;
    }

    /* Pricing & Packages */
    .packages-settings-grid,
    .packages-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .package-config-box {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    /* Settings & Danger Zone */
    .backup-actions-row,
    .danger-actions-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.65rem !important;
    }

    .backup-actions-row button,
    .backup-actions-row label,
    .danger-actions-row button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Modals & Dialogs */
    .admin-modal {
        padding: 0.5rem !important;
        align-items: flex-end !important;
    }

    .admin-modal-dialog,
    .invoice-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 1.2rem 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .modal-footer {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .modal-footer button {
        width: 100% !important;
        justify-content: center !important;
    }

    .inv-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

    /* Save Bottom Bar */
    .cms-save-bottom-bar {
        margin-top: 1.2rem !important;
        padding-top: 1rem !important;
        justify-content: center !important;
    }

    .cms-save-bottom-bar .btn-save-master {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.85rem 1rem !important;
    }

    /* Toast */
    .admin-toast {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        width: auto !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.82rem !important;
        justify-content: center !important;
    }
}

/* ==============================================================================
   RESPONSIVE BREAKPOINT: COMPACT PHONES (max-width: 420px)
   ============================================================================== */
@media (max-width: 420px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .presets-grid {
        grid-template-columns: 1fr !important;
    }

    .status-breakdown-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==============================================================================
   LUXURY ORDER CARD ACTIONS & BUTTONS (PERFECT STYLING)
   ============================================================================== */
.order-card-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    outline: none;
}

.btn-card-action.btn-wa {
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25d366;
    flex: 1.2;
}

.btn-card-action.btn-wa:hover {
    background: #25d366;
    color: #0c0205;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.btn-card-action.btn-invoice {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--adm-gold-light, #fbe6a2);
    flex: 1;
}

.btn-card-action.btn-invoice:hover {
    background: var(--adm-gold, #d4af37);
    color: #0c0205;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.btn-card-action.btn-details {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    flex: 1;
}

.btn-card-action.btn-details:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    transform: translateY(-2px);
}

.btn-card-action.btn-del {
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.35);
    color: #ff8591;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
}

.btn-card-action.btn-del:hover {
    background: var(--adm-danger, #e63946);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4);
    transform: translateY(-2px);
}

/* Modal and Invoice Luxury Polish */
.order-detail-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0.5rem 0;
}

.od-field {
    background: rgba(18, 2, 6, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.od-field.full-w {
    grid-column: 1 / -1;
}

.od-field strong {
    font-size: 0.8rem;
    color: var(--adm-gold-light, #fbe6a2);
}

.od-field span, .od-field p, .od-field a {
    font-size: 0.92rem;
    color: #ffffff;
}

.od-field a {
    color: #5dade2;
    text-decoration: none;
}

/* Desktop Sidebar Base Rules (Strictly Visible on Desktop) */
@media (min-width: 961px) {
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 270px !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1000 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .admin-main {
        margin-right: 270px !important;
        margin-left: 0 !important;
    }

    .topbar-toggle {
        display: none !important;
    }

    .admin-sidebar-backdrop {
        display: none !important;
    }
}

/* Mobile Drawer Rules (Strictly for Mobile) */
@media (max-width: 960px) {
    .topbar-toggle {
        display: flex !important;
    }

    .admin-main {
        margin-right: 0 !important;
        padding: 1.2rem 1rem !important;
    }

    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: -15px 0 50px rgba(0, 0, 0, 0.95) !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .admin-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .order-card-actions {
        flex-wrap: wrap !important;
    }

    .btn-card-action.btn-wa {
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 0.7rem !important;
    }

    .btn-card-action.btn-invoice,
    .btn-card-action.btn-details {
        flex: 1 1 auto !important;
    }
}


/* Real-Time Instant Arrival Glow Animation */
@keyframes newOrderGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.9), 0 0 30px rgba(186, 28, 56, 0.8);
        border-color: #fbe6a2;
        transform: scale(1.02);
    }
    50% {
        box-shadow: 0 0 25px 8px rgba(212, 175, 55, 0.6), 0 0 45px rgba(186, 28, 56, 0.6);
        border-color: #d4af37;
    }
    100% {
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
        border-color: rgba(212, 175, 55, 0.22);
        transform: scale(1);
    }
}

.order-glass-card.new-arrival-pulse {
    animation: newOrderGlow 3s cubic-bezier(0.16, 1, 0.3, 1) 2 alternate;
}