/* OrderBell Admin UI: consolidated legacy styles. Keep page-specific inline styles where needed. */
:root {
    --purple-primary: #6D28D9;
    --purple-dark: #2E1065;
    --purple-light: #F8FAFC;
    --purple-secondary: #7C3AED;
    --purple-accent: #8B5CF6;
    --purple-subtle: #FAF5FF;
    --purple-border: #E9D5FF;
    --green: #10B981;
    --green-bg: #DCFCE7;
    --green-text: #166534;
    --amber: #F59E0B;
    --amber-bg: #FEF3C7;
    --amber-text: #92400E;
    --red: #EF4444;
    --red-bg: #FEE2E2;
    --red-text: #991B1B;
    --blue: #3B82F6;
    --blue-bg: #DBEAFE;
    --blue-text: #1E40AF;
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --border: #E2E8F0;
    --white: #FFFFFF;
    --card-shadow: 0 4px 20px -2px rgba(88, 28, 135, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    --card-shadow-hover: 0 10px 25px -5px rgba(88, 28, 135, 0.09), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--purple-light);
    color: var(--text-dark);
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* =========================================================
   SIDEBAR NAVIGATION (Desktop + Responsive Drawer)
   ========================================================= */

/* Backdrop overlay for mobile drawer */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar {
    width: 275px;
    background: linear-gradient(180deg, #1E0A3C 0%, #3B0764 45%, #581C87 100%);
    color: white;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 0 6px;
    position: relative;
}

.logo-badge {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.logo-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.logo-text h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: white;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-text p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Close button inside mobile drawer */
.btn-sidebar-close {
    display: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-sidebar-close:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Sidebar Admin Chip */
.sidebar-admin-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 20px;
}

.chip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #A855F7;
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.chip-name {
    font-size: 12px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-badge {
    font-size: 10px;
    color: #D8B4FE;
    font-weight: 600;
}

/* Nav Links */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.nav-item a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateX(4px);
}

.nav-item.active a {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.nav-item.active a::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #C084FC;
    border-radius: 4px;
}

.nav-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-item-badge {
    font-size: 10px;
    font-weight: 700;
    background: #10B981;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.sidebar-footer {
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.system-status-indicator {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--green);
    box-shadow: 0 0 10px var(--green);
    animation: pulseGlow 2s infinite;
    flex-shrink: 0;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 4px var(--green); }
    50% { transform: scale(1.15); box-shadow: 0 0 12px var(--green); }
    100% { transform: scale(0.95); box-shadow: 0 0 4px var(--green); }
}

.btn-logout {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #FCA5A5;
}

/* =========================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================= */
.mobile-bottom-nav {
    display: none;
}

/* =========================================================
   MAIN CONTENT & TOP NAVIGATION
   ========================================================= */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 30px 36px 40px 36px;
    overflow-y: auto;
    max-height: 100vh;
    background: var(--purple-light);
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    gap: 16px;
    flex-wrap: wrap;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

/* Hamburger button */
.btn-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-menu-toggle:hover {
    background: var(--purple-subtle);
    border-color: var(--purple-border);
}

.btn-menu-toggle .hamburger-bar {
    width: 18px;
    height: 2.2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.page-title {
    min-width: 0;
}

.page-title h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    line-height: 1.25;
    word-break: break-word;
}

.page-title p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
    line-height: 1.4;
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.server-badge {
    background: white;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--green);
    box-shadow: 0 0 8px var(--green);
    flex-shrink: 0;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-profile:hover {
    border-color: var(--purple-border);
    background: var(--purple-subtle);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED 0%, #581C87 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(88, 28, 135, 0.2);
    flex-shrink: 0;
}

.admin-details .admin-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.2;
}

.admin-details .admin-role {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* =========================================================
   STATISTICS & KPI CARDS (Fully Responsive Grid)
   ========================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.stat-card {
    background: white;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--purple-border);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--purple-primary) 0%, #A855F7 100%);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.stat-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.6px;
    line-height: 1.2;
    word-break: break-all;
}

.stat-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
    line-height: 1.4;
}

/* =========================================================
   BADGES & PILLS
   ========================================================= */
.badge-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.badge-green {
    background: var(--green-bg);
    color: var(--green-text);
}

.badge-purple {
    background: #F3E8FF;
    color: var(--purple-primary);
}

.badge-amber {
    background: var(--amber-bg);
    color: var(--amber-text);
}

.badge-red {
    background: var(--red-bg);
    color: var(--red-text);
}

.badge-blue {
    background: var(--blue-bg);
    color: var(--blue-text);
}

/* =========================================================
   CARD BOXES & RESPONSIVE TABLES
   ========================================================= */
.card-box {
    background: white;
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 24px;
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    max-width: 100%;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 14px;
}

.card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    text-align: left;
}

th {
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

td {
    font-size: 13px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: #FAF8FE;
}

.truncate-text {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.url-pill {
    background: #F1F5F9;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    font-family: monospace;
    color: var(--purple-dark);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.3;
    white-space: nowrap;
    min-height: 38px;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--purple-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25);
}

.btn-primary:hover {
    background: var(--purple-dark);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
}

.btn-secondary {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-dark);
}

.btn-secondary:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
    min-height: 32px;
}

/* =========================================================
   FILTERS & FORMS (Responsive Auto-Wrap)
   ========================================================= */
.filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.search-input {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    background: white;
    max-width: 100%;
}

.search-input:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

.select-filter {
    flex: 0 1 auto;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    background: white;
    outline: none;
    color: var(--text-dark);
    font-weight: 500;
}

.select-filter:focus {
    border-color: var(--purple-primary);
}

.form-group {
    margin-bottom: 16px;
    width: 100%;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
    background: white;
    max-width: 100%;
}

.form-control:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

/* Tabs Navigation Bar (Scrollable on small screens) */
.tabs-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tab-btn {
    background: white;
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.tab-btn:hover {
    color: var(--purple-primary);
    background: var(--purple-subtle);
}

.tab-btn.active {
    background: var(--purple-primary);
    color: white;
    border-color: var(--purple-primary);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}

.tab-pane {
    display: none;
    animation: tabFade 0.25s ease-out;
}

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

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

pre.code-block {
    background: #0F172A;
    color: #38BDF8;
    padding: 16px;
    border-radius: 12px;
    font-size: 12px;
    overflow-x: auto;
    max-height: 280px;
    font-family: monospace;
}

/* =========================================================
   MODAL POPUP (Mobile Safe & Centered)
   ========================================================= */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

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

.modal-box {
    background: white;
    border-radius: 20px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    margin: auto;
}

@keyframes modalPop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.modal-title {
    font-size: 18px;
    font-weight: 800;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    line-height: 1;
}

/* Responsive Pricing Plans Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES (DESKTOP, TABLET, MOBILE)
   ========================================================= */

/* Tablets & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {
    .sidebar-backdrop {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 285px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2000;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .btn-sidebar-close {
        display: flex;
    }

    .btn-menu-toggle {
        display: flex;
    }

    .main-content {
        padding: 22px 20px 84px 20px;
        max-height: none;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
    }
}

/* Mobile Phones (<= 768px) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .main-content {
        padding: 16px 12px 90px 12px;
    }

    .top-nav {
        margin-bottom: 16px;
        gap: 10px;
    }

    .page-title h1 {
        font-size: 19px;
    }

    .page-title p {
        font-size: 11.5px;
    }

    .server-badge {
        display: none;
    }

    .admin-details {
        display: none;
    }

    .admin-profile {
        padding: 4px;
        border-radius: 50%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }

    .stat-card {
        padding: 16px 18px;
    }

    .stat-value {
        font-size: 22px;
    }

    .card-box {
        padding: 18px 14px;
        border-radius: 16px;
        margin-bottom: 18px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .card-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .card-actions .btn {
        flex: 1 1 auto;
    }

    .card-title {
        font-size: 15.5px;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .search-input, .select-filter, .filter-bar .btn {
        width: 100%;
        min-width: 0;
    }

    /* Override inline CSS multi-columns to single column on mobile */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .profile-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px !important;
        gap: 14px !important;
    }

    .profile-banner .avatar-circle {
        margin: 0 auto;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        z-index: 1500;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    }

    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        padding: 6px 8px;
        border-radius: 10px;
        transition: all 0.2s ease;
        border: none;
        background: transparent;
        cursor: pointer;
        flex: 1;
        min-height: 48px;
    }

    .mob-nav-item.active {
        color: var(--purple-primary);
        font-weight: 700;
    }

    .mob-nav-icon {
        font-size: 18px;
        margin-bottom: 2px;
        line-height: 1;
    }

    .modal-box {
        padding: 20px 16px;
        border-radius: 16px;
    }
}


/* OrderBell Admin refresh: modern dark responsive control panel */
:root{--purple-primary:#6257f5;--purple-dark:#0d1424;--purple-light:#090e18;--purple-secondary:#6257f5;--purple-accent:#6257f5;--purple-subtle:#202b3d;--purple-border:#344156;--text-dark:#f4f7fb;--text-muted:#93a4bb;--border:#2b3749;--white:#1e293b;--card-shadow:0 8px 24px rgba(0,0,0,.18);--card-shadow-hover:0 12px 28px rgba(0,0,0,.25)}
html,body{background:#090e18!important;color:#e8edf6!important;max-width:100%;overflow-x:hidden}
.sidebar{background:#0f1729!important;border-right:1px solid #202c40!important;color:#cbd5e1!important}
.logo-area,.sidebar-admin-chip,.sidebar-footer{border-color:#202c40!important}
.nav-item a{color:#9aabc2!important;border-radius:10px!important}.nav-item.active a,.nav-item a:hover{background:rgba(98,87,245,.2)!important;color:#fff!important;border:1px solid rgba(98,87,245,.35)!important}
.nav-icon{width:28px;display:inline-flex;align-items:center;justify-content:center;color:#9eb1ca}.nav-icon i{font-size:16px}.logo-badge{display:flex;align-items:center;justify-content:center}.logo-badge i{font-size:21px;color:white}
.main-content{background:#090e18!important;color:#e8edf6!important;min-width:0}
.page-header,.header-content{background:#0f1729!important;border-color:#253247!important}
.card-box,.stat-card,.table-container,.content-card,.form-card,.chart-card,.subscription-card,.modal-content{background:#1e293b!important;color:#e8edf6!important;border:1px solid #2c3a4f!important;box-shadow:none!important;border-radius:16px!important}
.stat-title,.stat-desc,.text-muted,.help-text,label,.form-label{color:#9aabc2!important}
h1,h2,h3,h4,h5,.card-title,.stat-value{color:#f8fafc!important}
input,select,textarea,.form-control{background:#111a2b!important;color:#e8edf6!important;border:1px solid #35445a!important;border-radius:9px!important;max-width:100%}
input::placeholder,textarea::placeholder{color:#8292a9!important}
table{color:#e8edf6!important}th{background:#111a2b!important;color:#92a5bf!important;border-color:#2b3749!important}td,tr{border-color:#2b3749!important}tr:hover td{background:#243248!important}
.badge-pill,.badge,.plan-badge{border:1px solid #3b4a60!important}
.btn,.btn-primary,button.btn-primary{border-radius:9px!important}.btn-primary{background:#6257f5!important;color:white!important}
a{color:#aeb8ff} .mobile-bottom-nav{background:#0f1729!important;border-top:1px solid #2b3749!important}.mobile-bottom-nav a{color:#a7b5ca!important}.mobile-bottom-nav a.active{color:#8b83ff!important}
@media(max-width:768px){.main-content{width:100%!important;margin-left:0!important;padding:14px!important}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.stat-card{padding:14px!important;min-width:0}.card-box{padding:14px!important;max-width:100%;overflow-x:auto}.table-container{overflow-x:auto!important}.table-container table{min-width:680px}.page-header{gap:12px;flex-wrap:wrap}.page-header h1{font-size:20px!important}.form-grid,.stats-grid,.dashboard-grid{min-width:0}.mobile-bottom-nav{z-index:999!important}.mobile-bottom-nav a{min-width:0!important;font-size:10px!important;white-space:nowrap}.mobile-bottom-nav .nav-icon{font-size:16px!important}.modal,.modal-dialog{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;margin:12px auto!important}}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr!important}.mobile-bottom-nav a{font-size:9px!important;padding:6px 2px!important}}

/* Branding logo visibility improvement */
.logo-area .logo-badge { min-width: 64px; min-height: 58px; padding: 4px; }
.logo-area .logo-badge img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }

/* Global light admin theme override */
:root{color-scheme:light;--purple-primary:#1769f5;--purple-dark:#123b8a;--purple-light:#f5f8ff;--purple-secondary:#2478f5;--purple-accent:#4b91ff;--purple-subtle:#eef5ff;--purple-border:#d8e6ff;--text-dark:#172033;--text-muted:#667085;--border:#e2e8f0;--white:#fff;--card-shadow:0 4px 20px rgba(16,50,100,.06);--card-shadow-hover:0 10px 25px rgba(16,50,100,.10)}
html,body{background:#f5f8ff!important;color:#172033!important;color-scheme:light!important}
.sidebar{background:#fff!important;color:#172033!important;border-right:1px solid #e2e8f0!important;box-shadow:2px 0 14px rgba(16,50,100,.04)!important}
.sidebar .logo-text h2,.sidebar .logo-text p,.sidebar a,.sidebar button,.sidebar .nav-link,.sidebar .menu-item{color:#344054!important}
.sidebar .logo-badge{background:#eaf2ff!important;color:#1769f5!important;border:1px solid #d7e6ff!important;box-shadow:none!important}
.sidebar a:hover,.sidebar button:hover,.sidebar .nav-link:hover,.sidebar .menu-item:hover,.sidebar a.active,.sidebar .nav-link.active,.sidebar .menu-item.active{background:#edf4ff!important;color:#145de0!important}
.sidebar::-webkit-scrollbar-thumb{background:#d0d9e8!important}
main,.main-content,.content,.page-content,.dashboard-content{background:#f5f8ff!important;color:#172033!important}
.card,.stat-card,.panel,.modal-content,.table-container,.content-card,.settings-card,.gw-card,.cw-card{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important;box-shadow:0 4px 18px rgba(16,50,100,.05)!important}
h1,h2,h3,h4,h5,p,label,th,td,.text-muted,.subtitle{color:inherit}
input,select,textarea{background:#fff!important;color:#172033!important;border-color:#d0d8e5!important}
input::placeholder,textarea::placeholder{color:#98a2b3!important}
button,.btn,.btn-primary{box-shadow:none}
table{background:#fff!important;color:#172033!important}thead,th{background:#f3f6fb!important;color:#344054!important}tr{border-color:#e2e8f0!important}tbody tr:hover{background:#f7faff!important}
.badge,.nav-badge{filter:none}
.sidebar-backdrop{background:rgba(15,23,42,.25)!important}


/* Forced light admin theme */
:root{color-scheme:light!important;--admin-bg:#f5f7fb;--admin-surface:#fff;--admin-text:#172033;--admin-muted:#64748b;--admin-border:#e2e8f0}
html,body{background:#f5f7fb!important;color:#172033!important;color-scheme:light!important}
body,.main-content,.content,.page-content,.dashboard-content,.admin-content,.content-wrapper{background-color:#f5f7fb!important;color:#172033!important}
.sidebar,.admin-sidebar,aside{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important}
.sidebar a,.admin-sidebar a,aside a{color:#334155!important}
.card,.stat-card,.panel,.modal-content,.table-container,.settings-card,.form-card{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important;box-shadow:0 4px 18px rgba(15,23,42,.05)!important}
input,select,textarea{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
table,thead,tbody,tr,td,th{background-color:#fff!important;color:#172033!important;border-color:#e2e8f0!important}


/* Legacy supplemental stylesheet */
:root {
    --purple-primary: #6D28D9;
    --purple-dark: #2E1065;
    --purple-light: #F8FAFC;
    --purple-secondary: #7C3AED;
    --purple-accent: #8B5CF6;
    --purple-subtle: #FAF5FF;
    --purple-border: #E9D5FF;
    --green: #10B981;
    --green-bg: #DCFCE7;
    --green-text: #166534;
    --amber: #F59E0B;
    --amber-bg: #FEF3C7;
    --amber-text: #92400E;
    --red: #EF4444;
    --red-bg: #FEE2E2;
    --red-text: #991B1B;
    --blue: #3B82F6;
    --blue-bg: #DBEAFE;
    --blue-text: #1E40AF;
    --text-dark: #0F172A;
    --text-muted: #64748B;
    --border: #E2E8F0;
    --white: #FFFFFF;
    --card-shadow: 0 4px 20px -2px rgba(88, 28, 135, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    --card-shadow-hover: 0 10px 25px -5px rgba(88, 28, 135, 0.09), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--purple-light);
    color: var(--text-dark);
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

/* =========================================================
   SIDEBAR NAVIGATION (Desktop + Mobile Sliding Drawer)
   ========================================================= */

/* Backdrop overlay for mobile drawer */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar {
    width: 275px;
    background: linear-gradient(180deg, #1E0A3C 0%, #3B0764 45%, #581C87 100%);
    color: white;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 0 6px;
    position: relative;
}

.logo-badge {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.logo-text {
    flex: 1;
}

.logo-text h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: white;
    line-height: 1.2;
}

.logo-text p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Close button inside mobile drawer */
.btn-sidebar-close {
    display: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-sidebar-close:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Sidebar Admin Chip */
.sidebar-admin-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 20px;
}

.chip-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #A855F7;
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chip-info {
    display: flex;
    flex-direction: column;
}

.chip-name {
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.chip-badge {
    font-size: 10px;
    color: #D8B4FE;
    font-weight: 600;
}

/* Nav Links */
.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.nav-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.nav-item a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateX(4px);
}

.nav-item.active a {
    background: rgba(255, 255, 255, 0.22);
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.nav-item.active a::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #C084FC;
    border-radius: 4px;
}

.nav-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-text {
    flex: 1;
}

.nav-item-badge {
    font-size: 10px;
    font-weight: 700;
    background: #10B981;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.sidebar-footer {
    padding-top: 18px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.system-status-indicator {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--green);
    box-shadow: 0 0 10px var(--green);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 4px var(--green); }
    50% { transform: scale(1.15); box-shadow: 0 0 12px var(--green); }
    100% { transform: scale(0.95); box-shadow: 0 0 4px var(--green); }
}

.btn-logout {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #FCA5A5;
}

/* =========================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================= */
.mobile-bottom-nav {
    display: none;
}

/* =========================================================
   MAIN CONTENT & TOP NAVIGATION
   ========================================================= */
.main-content {
    flex: 1;
    padding: 30px 38px;
    overflow-y: auto;
    max-height: 100vh;
    background: var(--purple-light);
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Hamburger button */
.btn-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-menu-toggle:hover {
    background: var(--purple-subtle);
    border-color: var(--purple-border);
}

.btn-menu-toggle .hamburger-bar {
    width: 18px;
    height: 2.2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.page-title h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.page-title p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.server-badge {
    background: white;
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--green);
    box-shadow: 0 0 8px var(--green);
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-profile:hover {
    border-color: var(--purple-border);
    background: var(--purple-subtle);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED 0%, #581C87 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(88, 28, 135, 0.2);
}

.admin-details .admin-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.2;
}

.admin-details .admin-role {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* =========================================================
   STATISTICS & KPI CARDS
   ========================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}

.stat-card {
    background: white;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--purple-border);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--purple-primary) 0%, #A855F7 100%);
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.stat-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.6px;
    line-height: 1.2;
}

.stat-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 500;
}

/* =========================================================
   BADGES & PILLS
   ========================================================= */
.badge-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}

.badge-green {
    background: var(--green-bg);
    color: var(--green-text);
}

.badge-purple {
    background: #F3E8FF;
    color: var(--purple-primary);
}

.badge-amber {
    background: var(--amber-bg);
    color: var(--amber-text);
}

.badge-red {
    background: var(--red-bg);
    color: var(--red-text);
}

.badge-blue {
    background: var(--blue-bg);
    color: var(--blue-text);
}

/* =========================================================
   CARD BOXES & TABLES
   ========================================================= */
.card-box {
    background: white;
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 24px;
    box-shadow: var(--card-shadow);
    margin-bottom: 26px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.3px;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    text-align: left;
}

th {
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
    font-weight: 700;
    letter-spacing: 0.5px;
}

td {
    font-size: 13px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: #FAF8FE;
}

.truncate-text {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.url-pill {
    background: #F1F5F9;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    font-family: monospace;
    color: var(--purple-dark);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1.3;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--purple-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25);
}

.btn-primary:hover {
    background: var(--purple-dark);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
}

.btn-secondary {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-dark);
}

.btn-secondary:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* =========================================================
   FILTERS & FORMS
   ========================================================= */
.filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.search-input {
    flex: 1;
    min-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    background: white;
}

.search-input:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

.select-filter {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    background: white;
    outline: none;
    color: var(--text-dark);
    font-weight: 500;
}

.select-filter:focus {
    border-color: var(--purple-primary);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s;
    background: white;
}

.form-control:focus {
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

pre.code-block {
    background: #0F172A;
    color: #38BDF8;
    padding: 16px;
    border-radius: 12px;
    font-size: 12px;
    overflow-x: auto;
    max-height: 280px;
    font-family: monospace;
}

/* =========================================================
   MODAL POPUP
   ========================================================= */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2500;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

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

.modal-box {
    background: white;
    border-radius: 20px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 18px;
    font-weight: 800;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES (TABLET & MOBILE)
   ========================================================= */

/* Tablets & Small Laptops (<= 1024px) */
@media (max-width: 1024px) {
    .sidebar-backdrop {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 285px;
        max-width: 84vw;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2000;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .btn-sidebar-close {
        display: flex;
    }

    .btn-menu-toggle {
        display: flex;
    }

    .main-content {
        padding: 22px 20px 80px 20px;
        max-height: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Mobile Phones (<= 768px) */
@media (max-width: 768px) {
    .main-content {
        padding: 16px 14px 85px 14px;
    }

    .top-nav {
        margin-bottom: 18px;
    }

    .page-title h1 {
        font-size: 20px;
    }

    .page-title p {
        font-size: 11.5px;
    }

    .server-badge {
        display: none;
    }

    .admin-details {
        display: none;
    }

    .admin-profile {
        padding: 4px;
        border-radius: 50%;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 16px 18px;
    }

    .stat-value {
        font-size: 24px;
    }

    .card-box {
        padding: 18px 14px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .card-header {
        margin-bottom: 14px;
    }

    .card-title {
        font-size: 15.5px;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .search-input, .select-filter {
        width: 100%;
        min-width: 0;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        z-index: 1500;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    }

    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 10.5px;
        font-weight: 600;
        padding: 6px 10px;
        border-radius: 10px;
        transition: all 0.2s ease;
        border: none;
        background: transparent;
        cursor: pointer;
        flex: 1;
    }

    .mob-nav-item.active {
        color: var(--purple-primary);
        font-weight: 700;
    }

    .mob-nav-icon {
        font-size: 18px;
        margin-bottom: 2px;
        line-height: 1;
    }

    .modal-box {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .profile-banner {
        flex-direction: column;
        text-align: center;
        padding: 22px 16px;
        gap: 16px;
    }

    .profile-banner .avatar-circle {
        margin: 0 auto;
    }

    .color-inputs-grid,
    .mode-selection-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}


/* Branding logo visibility improvement */
.logo-area .logo-badge { min-width: 64px; min-height: 58px; padding: 4px; }
.logo-area .logo-badge img { max-width: 100%; max-height: 58px; width: auto; height: auto; object-fit: contain; }

/* Global light admin theme override */
:root{color-scheme:light;--purple-primary:#1769f5;--purple-dark:#123b8a;--purple-light:#f5f8ff;--purple-secondary:#2478f5;--purple-accent:#4b91ff;--purple-subtle:#eef5ff;--purple-border:#d8e6ff;--text-dark:#172033;--text-muted:#667085;--border:#e2e8f0;--white:#fff;--card-shadow:0 4px 20px rgba(16,50,100,.06);--card-shadow-hover:0 10px 25px rgba(16,50,100,.10)}
html,body{background:#f5f8ff!important;color:#172033!important;color-scheme:light!important}
.sidebar{background:#fff!important;color:#172033!important;border-right:1px solid #e2e8f0!important;box-shadow:2px 0 14px rgba(16,50,100,.04)!important}
.sidebar .logo-text h2,.sidebar .logo-text p,.sidebar a,.sidebar button,.sidebar .nav-link,.sidebar .menu-item{color:#344054!important}
.sidebar .logo-badge{background:#eaf2ff!important;color:#1769f5!important;border:1px solid #d7e6ff!important;box-shadow:none!important}
.sidebar a:hover,.sidebar button:hover,.sidebar .nav-link:hover,.sidebar .menu-item:hover,.sidebar a.active,.sidebar .nav-link.active,.sidebar .menu-item.active{background:#edf4ff!important;color:#145de0!important}
.sidebar::-webkit-scrollbar-thumb{background:#d0d9e8!important}
main,.main-content,.content,.page-content,.dashboard-content{background:#f5f8ff!important;color:#172033!important}
.card,.stat-card,.panel,.modal-content,.table-container,.content-card,.settings-card,.gw-card,.cw-card{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important;box-shadow:0 4px 18px rgba(16,50,100,.05)!important}
h1,h2,h3,h4,h5,p,label,th,td,.text-muted,.subtitle{color:inherit}
input,select,textarea{background:#fff!important;color:#172033!important;border-color:#d0d8e5!important}
input::placeholder,textarea::placeholder{color:#98a2b3!important}
button,.btn,.btn-primary{box-shadow:none}
table{background:#fff!important;color:#172033!important}thead,th{background:#f3f6fb!important;color:#344054!important}tr{border-color:#e2e8f0!important}tbody tr:hover{background:#f7faff!important}
.badge,.nav-badge{filter:none}
.sidebar-backdrop{background:rgba(15,23,42,.25)!important}


/* Forced light admin theme */
:root{color-scheme:light!important;--admin-bg:#f5f7fb;--admin-surface:#fff;--admin-text:#172033;--admin-muted:#64748b;--admin-border:#e2e8f0}
html,body{background:#f5f7fb!important;color:#172033!important;color-scheme:light!important}
body,.main-content,.content,.page-content,.dashboard-content,.admin-content,.content-wrapper{background-color:#f5f7fb!important;color:#172033!important}
.sidebar,.admin-sidebar,aside{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important}
.sidebar a,.admin-sidebar a,aside a{color:#334155!important}
.card,.stat-card,.panel,.modal-content,.table-container,.settings-card,.form-card{background:#fff!important;color:#172033!important;border-color:#e2e8f0!important;box-shadow:0 4px 18px rgba(15,23,42,.05)!important}
input,select,textarea{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important}
table,thead,tbody,tr,td,th{background-color:#fff!important;color:#172033!important;border-color:#e2e8f0!important}


/* Responsive admin refinements */

:root{color-scheme:light;--admin-bg:#f5f7fb;--admin-surface:#fff;--admin-text:#172033;--admin-muted:#64748b;--admin-border:#e2e8f0;--admin-primary:#1769f5}
html{color-scheme:light} body{min-width:320px}
img,video,canvas,svg{max-width:100%}
.main-content{min-width:0;box-sizing:border-box}
.table-responsive,.table-container,.table-wrapper{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea,button{max-width:100%;box-sizing:border-box}
@media(max-width:768px){.main-content{padding:18px 14px!important}.top-nav{gap:10px;flex-wrap:wrap}.top-nav-left{min-width:0;flex:1}.page-title h1{font-size:clamp(20px,5vw,28px)}.top-nav-right{max-width:100%;flex-wrap:wrap}.admin-details{min-width:0}.gw-layout{grid-template-columns:minmax(0,1fr)!important}.gw-fields{grid-template-columns:minmax(0,1fr)!important}.gw-preview{position:relative!important;top:auto!important}.card,.stat-card,.panel,.settings-card,.gw-card{padding:16px!important}}
@media(max-width:480px){.main-content{padding:14px 10px!important}.top-nav{padding:12px!important}.admin-profile .admin-details{display:none}.btn-menu-toggle{flex:0 0 auto}}


/* Dashboard layout + single-state sidebar hover correction (2026-10) */
:root {
  --purple-primary: #1769f5;
  --purple-secondary: #2478f5;
  --purple-accent: #4b91ff;
  --purple-light: #f5f7fb;
  --purple-subtle: #edf4ff;
  --purple-border: #d8e6ff;
  --text-dark: #172033;
  --text-muted: #667085;
  --border: #e2e8f0;
  --white: #ffffff;
  --card-shadow: 0 4px 18px rgba(16, 50, 100, .06);
  --card-shadow-hover: 0 8px 24px rgba(16, 50, 100, .10);
}
html, body { background: #f5f7fb !important; color: #172033 !important; }
body { align-items: stretch; }
.sidebar { flex: 0 0 275px; width: 275px; }
.main-content { flex: 1 1 auto; width: calc(100% - 275px); min-width: 0; padding: 28px 32px 40px; background: #f5f7fb !important; color: #172033 !important; }
.top-nav { width: 100%; padding: 0 0 20px; border-bottom: 1px solid #e7edf5; }
.page-title h1, .top-nav .page-title h1 { color: #172033 !important; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; }
.page-title p, .top-nav .page-title p { color: #64748b !important; }
.top-nav .admin-name { color: #172033 !important; }
.top-nav .admin-role { color: #64748b !important; }
.card-box, .stat-card, .table-container, .content-card, .form-card, .chart-card, .subscription-card, .modal-content {
  background: #fff !important; color: #172033 !important; border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(16, 50, 100, .06) !important; border-radius: 16px !important;
}
.card-title, .stat-value, .card-box h1, .card-box h2, .card-box h3, .card-box h4 { color: #172033 !important; }
.stat-title, .stat-desc, .card-box p, .help-text, .text-muted { color: #64748b !important; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card { min-width: 0; padding: 22px; }
.stat-header { align-items: flex-start; }
.stat-title { white-space: normal; line-height: 1.4; }
.stat-value { font-size: clamp(24px, 2.4vw, 32px); overflow-wrap: anywhere; }
.card-box { margin-bottom: 24px; padding: 24px; }
.table-responsive { width: 100%; overflow-x: auto; }
.table-responsive table { min-width: 760px; }
.table-responsive th { background: #f3f6fb !important; color: #344054 !important; }
.table-responsive td { background: #fff !important; color: #344054 !important; }
.table-responsive tbody tr:hover td { background: #f7faff !important; }
/* Exactly one visual response on hover; active state is separate and persistent. */
.sidebar .nav-item a,
.sidebar .nav-item a:hover,
.sidebar .nav-item.active a,
.sidebar .nav-item.active a:hover {
  transform: none !important;
  transition: background-color .16s ease, color .16s ease !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.sidebar .nav-item a:hover {
  background: #edf4ff !important;
  color: #145de0 !important;
}
.sidebar .nav-item.active a,
.sidebar .nav-item.active a:hover {
  background: #e7f0ff !important;
  color: #145de0 !important;
  border-color: #d6e6ff !important;
  font-weight: 700 !important;
}
.sidebar .nav-item.active a::before { width: 3px; left: -7px; background: #1769f5 !important; border-radius: 4px; }
.sidebar .nav-item a::after { display: none !important; }
.sidebar .nav-item a:hover::before { opacity: 0 !important; }
.sidebar .nav-item.active a::before { opacity: 1 !important; }
.sidebar .logo-text h2, .sidebar .logo-text p, .sidebar .chip-name, .sidebar .nav-item a { color: #344054 !important; }
.sidebar .chip-badge { color: #1769f5 !important; }
.sidebar .sidebar-admin-chip { background: #f8faff !important; border-color: #e2e8f0 !important; }
.sidebar .chip-avatar { background: #8b5cf6 !important; color: #fff !important; }
.btn-primary { background: #1769f5 !important; border-color: #1769f5 !important; color: #fff !important; }
@media (max-width: 1200px) {
  .main-content { padding: 24px 22px 32px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; transform: translateX(-105%); transition: transform .22s ease; z-index: 2000; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .main-content { width: 100%; margin-left: 0; padding: 20px; }
  .btn-menu-toggle { display: inline-flex; }
  .btn-sidebar-close { display: inline-flex; }
  .sidebar-backdrop { display: block; }
}
@media (max-width: 640px) {
  .main-content { padding: 14px 12px 28px; }
  .top-nav { align-items: flex-start; padding-bottom: 14px; }
  .top-nav-right { width: 100%; justify-content: space-between; }
  .server-badge { padding: 7px 10px; }
  .admin-profile { padding: 5px 9px; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stat-card, .card-box { padding: 16px !important; }
  .card-header { align-items: flex-start; }
  .card-actions { width: 100%; }
}


/* =========================================================
   OrderBell blue-gradient dashboard refresh
   Scoped global admin theme; preserves existing PHP behavior.
   ========================================================= */
:root {
  --purple-primary: #075CE5;
  --purple-dark: #073CA8;
  --purple-light: #F4F7FC;
  --purple-secondary: #087AF5;
  --purple-accent: #168BFF;
  --purple-subtle: #EAF3FF;
  --purple-border: #CFE2FF;
  --text-dark: #17243B;
  --text-muted: #687991;
  --border: #E1E8F2;
  --card-shadow: 0 5px 18px rgba(21, 55, 105, .055);
  --card-shadow-hover: 0 10px 26px rgba(21, 80, 170, .11);
}
body { background: #F4F7FC; color: var(--text-dark); }
.sidebar {
  background: #FFFFFF;
  color: #17243B;
  border-right: 1px solid #E5EAF2;
  box-shadow: 3px 0 18px rgba(25, 55, 100, .035);
  scrollbar-color: #C7D5E8 transparent;
}
.sidebar::-webkit-scrollbar-thumb { background: #C7D5E8; }
.logo-badge {
  background: linear-gradient(135deg, #075CE5 0%, #18B7FF 100%);
  border: 0;
  box-shadow: 0 5px 14px rgba(7, 92, 229, .22);
}
.logo-text h2 { color: #10233F; }
.logo-text p { color: #64748B; }
.sidebar-admin-chip {
  background: #F5F8FE;
  border: 1px solid #E2EAF5;
}
.chip-avatar {
  background: linear-gradient(135deg, #075CE5, #20B8FF);
}
.chip-name { color: #17243B; }
.chip-badge { color: #087AF5; }
.nav-item a {
  color: #53647C;
  border: 1px solid transparent;
  box-shadow: none;
  transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav-item a:hover {
  background: #EDF5FF;
  color: #075CE5;
  border-color: #D8E8FF;
  transform: none;
  box-shadow: none;
}
.nav-item.active a {
  background: linear-gradient(110deg, #075CE5 0%, #168BFF 100%);
  color: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0 5px 14px rgba(7, 92, 229, .2);
}
.nav-item.active a:hover {
  background: linear-gradient(110deg, #064FC8 0%, #087AF5 100%);
  color: #FFFFFF;
  transform: none;
  box-shadow: 0 5px 14px rgba(7, 92, 229, .2);
}
.nav-item.active a::before { background: #55D7FF; }
.nav-icon { color: inherit; }
.main-content {
  background: #F4F7FC;
  padding: 28px 32px 40px;
}
.top-nav { align-items: center; margin-bottom: 24px; }
.top-nav h1, .top-nav h2, .page-title { color: #14243D; }
.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.stat-card {
  border-radius: 16px;
  border: 1px solid #E2EAF4;
  box-shadow: 0 5px 18px rgba(21, 55, 105, .055);
  min-width: 0;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: #C5DDFF;
  box-shadow: 0 10px 26px rgba(21, 80, 170, .11);
}
.stat-card::before { background: linear-gradient(90deg, #075CE5, #18B7FF); }
.stat-value { color: #15243B; }
.card-box {
  background: #FFFFFF;
  border: 1px solid #E2EAF4;
  border-radius: 17px;
  box-shadow: 0 5px 18px rgba(21, 55, 105, .055);
  padding: 24px;
}
.card-title { color: #17243B; }
.btn-primary {
  background: linear-gradient(110deg, #075CE5 0%, #168BFF 100%);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 4px 12px rgba(7, 92, 229, .22);
}
.btn-primary:hover {
  background: linear-gradient(110deg, #064FC8 0%, #087AF5 100%);
  box-shadow: 0 6px 16px rgba(7, 92, 229, .27);
  transform: translateY(-1px);
}
.btn-secondary:hover {
  background: #EDF5FF;
  border-color: #C5DDFF;
  color: #075CE5;
}
table thead th {
  background: #EEF5FF;
  color: #24466F;
  border-bottom-color: #D8E7FA;
}
table tbody tr:hover { background: #F7FAFF; }
.badge-blue { background: #E4F0FF; color: #075CE5; border-color: #C8E0FF; }
@media (max-width: 1200px) {
  .main-content { padding: 24px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .main-content { padding: 16px 12px 28px; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .card-box { padding: 16px; border-radius: 14px; }
  .top-nav { gap: 12px; }
}


/* =========================================================
   OrderBell Dashboard refresh — blue gradient, cache-busted v2
   Scoped dashboard rules intentionally supersede legacy purple styles.
   ========================================================= */
:root {
  --ob-blue-950:#082f75; --ob-blue-800:#1247bd; --ob-blue-700:#155eef;
  --ob-blue-600:#1677ff; --ob-cyan:#12b8f6; --ob-bg:#f4f7fc;
  --ob-ink:#17243b; --ob-muted:#73819a; --ob-line:#e3eaf4;
  --ob-shadow:0 8px 24px rgba(18,53,112,.065);
}
body { background:var(--ob-bg) !important; color:var(--ob-ink); }
.sidebar { background:#fff !important; color:var(--ob-ink) !important; border-right:1px solid var(--ob-line); box-shadow:3px 0 18px rgba(18,53,112,.035); }
.sidebar .logo-text h2,.sidebar .chip-name { color:var(--ob-ink) !important; }
.sidebar .logo-text p,.sidebar .chip-badge { color:#64748b !important; }
.sidebar .logo-badge { color:#fff; background:linear-gradient(135deg,var(--ob-blue-700),var(--ob-cyan)) !important; border:0; box-shadow:0 5px 14px rgba(21,94,239,.2); }
.sidebar-admin-chip { background:#f7faff !important; border:1px solid var(--ob-line) !important; }
.sidebar .nav-links a { color:#42516a !important; border:1px solid transparent !important; box-shadow:none !important; transform:none !important; transition:background .18s ease,color .18s ease,border-color .18s ease !important; }
.sidebar .nav-links a:hover { background:#edf5ff !important; color:var(--ob-blue-800) !important; border-color:#d7e7ff !important; transform:none !important; box-shadow:none !important; }
.sidebar .nav-item.active > a,.sidebar .nav-links .active > a { color:#fff !important; background:linear-gradient(105deg,var(--ob-blue-800),var(--ob-blue-600) 70%,var(--ob-cyan)) !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(21,94,239,.20) !important; }
.sidebar .nav-item.active > a:hover,.sidebar .nav-links .active > a:hover { color:#fff !important; filter:brightness(1.03); }
.sidebar .nav-icon { color:inherit !important; }
.main-content { min-width:0; flex:1; width:calc(100% - 275px); padding:0 28px 34px !important; background:var(--ob-bg); }
.admin-topbar,.top-header,.page-header { background:rgba(255,255,255,.96) !important; border-bottom:1px solid var(--ob-line) !important; }
.main-content > .stats-grid { margin-top:26px; }
.dashboard-kpis { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px !important; margin-bottom:22px !important; }
.dashboard-kpis .stat-card,.card-box,.insight-card { min-width:0; background:#fff !important; border:1px solid var(--ob-line) !important; border-radius:17px !important; box-shadow:var(--ob-shadow) !important; }
.dashboard-kpis .stat-card { padding:22px !important; min-height:142px; }
.dashboard-kpis .stat-title { color:#78869d !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.045em; }
.dashboard-kpis .stat-value { color:#17243b !important; font-size:29px !important; line-height:1.25; font-weight:800 !important; margin:12px 0 6px; }
.dashboard-kpis .stat-desc { color:#8491a7 !important; font-size:12px !important; }
.dashboard-kpis .stat-header { gap:10px; align-items:center; }
.dashboard-kpis .badge-pill { font-size:10px !important; white-space:normal; text-align:center; }
.dashboard-health-card { margin:0 0 22px !important; padding:23px 25px !important; background:linear-gradient(115deg,#0b2f78 0%,#155eef 58%,#0baeea 100%) !important; border:0 !important; border-radius:17px !important; color:#fff !important; }
.dashboard-health-title { color:#fff !important; font-size:17px !important; font-weight:800; margin:0 0 7px !important; }
.dashboard-health-copy { color:rgba(255,255,255,.82) !important; font-size:13px; line-height:1.6; }
.dashboard-health-card .btn-secondary { background:#fff !important; color:#173c82 !important; border:1px solid rgba(255,255,255,.7) !important; }
.dashboard-health-card .btn-primary { background:#082f75 !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.dashboard-insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 22px; }
.insight-card { padding:21px 23px; overflow:hidden; }
.insight-card-heading { display:flex; align-items:center; gap:11px; color:#596982; font-size:13px; font-weight:700; }
.insight-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; color:#155eef; background:#e8f1ff; font-size:17px; }
.insight-icon-cyan { color:#0891b2; background:#def8ff; }
.insight-number { color:#17243b; font-size:31px; line-height:1.25; font-weight:800; margin:14px 0 4px; }
.insight-card p { color:#8491a7; font-size:12px; margin:0 0 15px; }
.insight-meter { height:6px; background:#e9effa; border-radius:20px; overflow:hidden; }
.insight-meter span { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#1247bd,#1677ff,#12b8f6); }
.insight-meter-cyan span { background:linear-gradient(90deg,#0891b2,#12b8f6); }
.dashboard-table-card { padding:0 !important; overflow:hidden; }
.dashboard-table-card .card-header { padding:21px 23px !important; margin:0 !important; border-bottom:1px solid var(--ob-line); gap:12px; }
.dashboard-table-card .card-title { color:#1a2940 !important; font-size:16px !important; font-weight:800 !important; }
.dashboard-table-card .table-responsive { overflow-x:auto; }
.dashboard-table-card table { width:100%; min-width:760px; border-collapse:collapse; }
.dashboard-table-card thead th { background:#edf5ff !important; color:#37527c !important; font-size:10px !important; letter-spacing:.045em; text-transform:uppercase; padding:14px 17px !important; border-bottom:1px solid #dce9fb !important; }
.dashboard-table-card tbody td { padding:15px 17px !important; color:#516078; border-bottom:1px solid #edf1f7 !important; font-size:12px; }
.dashboard-table-card tbody tr:hover { background:#f8fbff !important; }
.dashboard-empty { text-align:center; color:#8290a6 !important; padding:30px !important; }
.btn-primary { background:linear-gradient(110deg,#1247bd,#1677ff 68%,#12b8f6) !important; border-color:transparent !important; box-shadow:0 5px 13px rgba(21,94,239,.17); }
.btn-primary:hover { filter:brightness(1.04); }
.badge-blue,.badge-purple { background:#e8f1ff !important; color:#174ab7 !important; border-color:#d4e5ff !important; }
@media (max-width:1200px) { .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .main-content { padding-left:22px !important; padding-right:22px !important; } }
@media (max-width:760px) { .main-content { width:100%; padding:14px 14px 26px !important; } .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px !important; margin-top:16px !important; } .dashboard-kpis .stat-card { padding:15px !important; min-height:125px; } .dashboard-kpis .stat-value { font-size:24px !important; } .dashboard-insights { grid-template-columns:1fr; gap:12px; } .dashboard-health-card { padding:18px !important; } .dashboard-table-card .card-header { align-items:flex-start !important; flex-direction:column; padding:17px !important; } }
@media (max-width:420px) { .dashboard-kpis { grid-template-columns:1fr; } }


/* OrderBell Bootstrap-inspired responsive admin refresh (v20261017-bs1) */
:root{--ob-blue:#155eef;--ob-blue2:#08a5ff;--ob-ink:#172b4d;--ob-muted:#667085;--ob-line:#e4eaf3;--ob-bg:#f4f7fb;--ob-shadow:0 8px 24px rgba(16,42,88,.06);--purple-primary:#155eef;--purple-secondary:#1677ff;--purple-accent:#38a7ff;--purple-light:#f4f7fb;--purple-subtle:#eef5ff;--purple-border:#d9e7ff;--card-shadow:0 8px 24px rgba(16,42,88,.06);--card-shadow-hover:0 12px 30px rgba(16,42,88,.10)}
html{scroll-behavior:smooth} body{background:var(--ob-bg)!important;color:var(--ob-ink)!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;line-height:1.5}
.sidebar{background:#fff!important;color:var(--ob-ink)!important;border-right:1px solid var(--ob-line)!important;box-shadow:3px 0 18px rgba(16,42,88,.035)!important;padding:20px 14px!important}
.logo-text h2,.chip-name{color:var(--ob-ink)!important}.logo-text p,.chip-badge{color:#71819b!important}.logo-badge{background:linear-gradient(135deg,#eaf2ff,#d8e8ff)!important;border:1px solid #d5e4ff!important;box-shadow:none!important;color:var(--ob-blue)!important}.sidebar-admin-chip{background:#f7faff!important;border:1px solid var(--ob-line)!important}.chip-avatar{background:linear-gradient(135deg,#155eef,#14a8ff)!important}
.nav-links{gap:5px!important}.nav-item{margin:2px 0!important}.nav-item>a,.nav-links a{color:#344563!important;border:1px solid transparent!important;border-radius:11px!important;transition:background-color .16s ease,color .16s ease,border-color .16s ease!important;box-shadow:none!important;transform:none!important}.nav-item>a:hover,.nav-links a:hover{background:#f0f6ff!important;color:var(--ob-blue)!important;border-color:#e1edff!important;box-shadow:none!important;transform:none!important}.nav-item.active>a,.nav-item.active>a:hover{background:linear-gradient(100deg,#e9f1ff,#f2f8ff)!important;color:#124ac4!important;border:1px solid #c9dcff!important;box-shadow:none!important}.nav-icon{color:inherit!important}.nav-item-badge{background:#e7f1ff!important;color:#155eef!important}
.main-content{min-width:0!important;flex:1!important;background:var(--ob-bg)!important}.top-nav{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--ob-line)!important;box-shadow:0 2px 8px rgba(16,42,88,.025)!important;padding:16px 26px!important;min-height:76px!important}.page-title h1{color:#172b4d!important;font-size:clamp(20px,2vw,27px)!important;font-weight:750!important;letter-spacing:-.5px!important}.page-title p{color:#71819b!important}.server-badge,.admin-profile{background:#fff!important;border:1px solid var(--ob-line)!important;color:#344563!important;box-shadow:0 2px 8px rgba(16,42,88,.035)!important}.avatar{background:linear-gradient(135deg,#155eef,#08a5ff)!important}
.stats-grid{gap:18px!important;margin:24px 26px!important}.stat-card,.card-box,.content-card,.table-card,.panel,.settings-card{background:#fff!important;border:1px solid var(--ob-line)!important;border-radius:16px!important;box-shadow:var(--ob-shadow)!important;color:var(--ob-ink)!important}.stat-card{padding:22px!important;min-width:0!important}.stat-card:hover,.card-box:hover{box-shadow:var(--card-shadow-hover)!important;transform:translateY(-1px)}.stat-title,.stat-desc,.muted,.text-muted{color:var(--ob-muted)!important}.stat-value{color:#172b4d!important;font-weight:800!important;letter-spacing:-.5px}.dashboard-health-card{margin:0 26px 24px!important;background:linear-gradient(115deg,#123c9c 0%,#155eef 54%,#0799ef 100%)!important;border:0!important;color:#fff!important;border-radius:17px!important;padding:24px!important;box-shadow:0 10px 24px rgba(21,94,239,.16)!important}.dashboard-health-card h1,.dashboard-health-card h2,.dashboard-health-card h3,.dashboard-health-card p{color:#fff!important}.dashboard-health-card p{opacity:.86}
.main-content> .card-box,.main-content> .table-container,.main-content> .table-responsive,.main-content> .content-section{margin-left:26px!important;margin-right:26px!important;margin-bottom:24px!important}.table-responsive{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:14px!important}.table-responsive table,table{width:100%;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;color:#344563!important;font-size:13px!important}.table-responsive table{min-width:680px}.table-responsive thead th,table thead th{background:#edf4ff!important;color:#25466f!important;font-size:11px!important;font-weight:750!important;letter-spacing:.045em!important;text-transform:uppercase!important;border-bottom:1px solid #dce8f8!important;padding:14px 15px!important;white-space:nowrap}.table-responsive tbody td,table tbody td{padding:14px 15px!important;border-bottom:1px solid #edf1f7!important;vertical-align:middle!important;color:#344563!important;background:#fff!important}.table-responsive tbody tr:last-child td,table tbody tr:last-child td{border-bottom:0!important}.table-responsive tbody tr:hover td,table tbody tr:hover td{background:#f8fbff!important}.table-responsive tbody tr,table tbody tr{transition:background-color .12s ease!important}
button,.btn{font-family:inherit!important}.btn-primary,.btn-primary:not(:disabled){background:linear-gradient(100deg,#155eef,#079bf1)!important;border:1px solid #155eef!important;color:#fff!important;border-radius:9px!important;box-shadow:0 4px 10px rgba(21,94,239,.13)!important}.btn-primary:hover{filter:brightness(1.04);box-shadow:0 6px 14px rgba(21,94,239,.2)!important}.btn-secondary,.btn-outline-secondary{background:#fff!important;color:#344563!important;border:1px solid #d5dfed!important;border-radius:9px!important;box-shadow:none!important}.btn-secondary:hover,.btn-outline-secondary:hover{background:#f3f7ff!important;border-color:#b8d0fa!important;color:#155eef!important}.badge-pill,.badge,.status-badge{border-radius:999px!important}.form-control,.form-select,input[type=text],input[type=email],input[type=search],input[type=password],select,textarea{border:1px solid #d6e0ed!important;border-radius:9px!important;background:#fff!important;color:#172b4d!important;min-height:40px;box-shadow:none!important}.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{border-color:#80b2ff!important;box-shadow:0 0 0 .2rem rgba(21,94,239,.12)!important;outline:0!important}
/* Keep all table action buttons aligned and easy to identify */
table .btn, .table .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:nowrap!important;font-size:12px!important;padding:7px 10px!important}table th .fa-solid,table th .fa-regular,table th .fa-brands{color:#4774b7!important;margin-right:7px!important;font-size:12px!important}table td .fa-solid,table td .fa-regular{margin-right:5px}
@media(max-width:1024px){.top-nav{padding:14px 18px!important}.stats-grid{margin:18px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-health-card,.main-content> .card-box,.main-content> .table-container,.main-content> .table-responsive,.main-content> .content-section{margin-left:18px!important;margin-right:18px!important}}
@media(max-width:640px){.top-nav{padding:12px 14px!important;gap:10px!important;align-items:flex-start!important}.top-nav-right{gap:8px!important}.server-badge{display:none!important}.admin-details{display:none!important}.stats-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin:14px!important}.stat-card{padding:17px!important}.dashboard-health-card,.main-content> .card-box,.main-content> .table-container,.main-content> .table-responsive,.main-content> .content-section{margin-left:14px!important;margin-right:14px!important;padding:16px!important}.page-title h1{font-size:20px!important}.page-title p{font-size:12px!important}.table-responsive{margin-left:0!important;margin-right:0!important}.table-responsive table{min-width:700px}.btn{max-width:100%}}


/* Mobile drawer correction (2026-10-17): single overlay, no backdrop blur */
.sidebar-backdrop{
  background:rgba(15,23,42,.42)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  z-index:1900!important;
}
@media (max-width:1024px){
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(290px,86vw)!important;
    max-width:86vw!important;
    height:100vh!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .22s ease!important;
    z-index:2001!important;
    box-shadow:8px 0 28px rgba(16,42,88,.16)!important;
    padding:16px 12px!important;
  }
  body.sidebar-open .sidebar{
    transform:translate3d(0,0,0)!important;
  }
  .sidebar-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2000!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    background:rgba(15,23,42,.42)!important;
  }
  body.sidebar-open .sidebar-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .btn-sidebar-close{
    display:flex!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #dce6f5!important;
    border-radius:9px!important;
    color:#334155!important;
    background:#f8fbff!important;
  }
  body.sidebar-open{overflow:hidden!important}
  .main-content{min-width:0!important;width:100%!important;max-width:100%!important}
  .mobile-bottom-nav{z-index:1500!important}
}
@media (max-width:480px){
  .sidebar{width:min(280px,88vw)!important;max-width:88vw!important}
  .logo-area{gap:9px!important}
  .logo-text h2{font-size:17px!important}
  .nav-item>a,.nav-links a{min-height:42px!important;padding:10px 11px!important}
  .nav-text{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}