/* =============================================
   SHEGER RESTAURANT — GLOBAL DESIGN SYSTEM
   Plain CSS | No Framework
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

:root {
    /* ===== Brand palette (Edgepath) ===== */
    --primary: #6b0f16;
    --primary-hover: #570b11;
    --primary-dark: #570b11; /* alias kept for legacy rules */
    --secondary: #a67c52;
    --accent: #d9a441;
    --accent-hover: #e6bd73;
    --sage: #d9a441;
    --sage-dark: #b8860b;

    --white: #FFFFFF;
    --background: #f7f8f7;
    --surface: #FFFFFF;
    --surface-soft: #f1f3f1;
    --card-bg: #FFFFFF; /* alias of --surface */
    --text: #20252b;
    --text-secondary: #667085;
    --text-muted: #667085; /* alias of --text-secondary */
    --border: #e5e7eb;

    --success: #B45309;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #7B1113;
    --purple: #991B1B;
    --cyan: #B45309;

    --sidebar-bg: #3a0c11;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-width: 196px;
    --topbar-height: 76px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 4px 15px rgba(0,0,0,0.03);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.06);
    --transition: all 0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--background);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

/* ===== LAYOUT ===== */
.layout-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    transition: var(--transition);
    overflow: hidden;
}

.sidebar.collapsed { width: 72px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #3a0c11, #240609);
    flex-shrink: 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
}

.brand-icon {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.brand-text { transition: var(--transition); white-space: nowrap; }
.sidebar.collapsed .brand-text { opacity: 0; width: 0; overflow: hidden; }

#sidebarToggle {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    color: white; 
    padding: 8px;
    border-radius: 8px;
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
#sidebarToggle:hover { 
    background: rgba(255,255,255,0.25); 
    border-color: rgba(255,255,255,0.35);
}
#sidebarToggle svg { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar.collapsed #sidebarToggle svg { transform: rotate(180deg); }

.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0; }
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sidebar-section {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 16px 20px 6px;
    letter-spacing: 1px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--transition);
}
.sidebar.collapsed .sidebar-section { opacity: 0; height: 0; padding: 0; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    margin: 2px 0;
    padding: 11px 20px 11px 17px;
    border-radius: 0;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
    border-left: 3px solid transparent;
    white-space: nowrap;
    gap: 10px;
    position: relative;
}
.sidebar.collapsed .sidebar-nav a { margin: 2px 0; padding: 11px; }

.sidebar-nav a svg { flex-shrink: 0; transition: var(--transition); }

.sidebar-nav a span { transition: var(--transition); overflow: hidden; }
.sidebar.collapsed .sidebar-nav a span { opacity: 0; width: 0; }
.sidebar.collapsed .sidebar-nav a { justify-content: center; padding: 12px; }

.sidebar-nav a:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border-left-color: rgba(255,255,255,0.85);
}

.sidebar-nav a.active {
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 700;
    border-left-color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(255,255,255,0.06);
}

.sidebar-nav a:hover svg { color: #fff; }
.sidebar-nav a.active svg { color: var(--accent); }

.sidebar-nav a .badge {
    margin-left: auto;
    background: var(--accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    flex-shrink: 0;
}
.sidebar.collapsed .badge { display: none; }

.sidebar-user {
    padding: 14px 16px;
    background: linear-gradient(135deg, #3a0c11, #240609);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
.sidebar-user:hover { background: rgba(255,255,255,0.05); }

.user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.user-info { flex: 1; overflow: hidden; transition: var(--transition); }
.user-info .name { font-weight: 600; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .role { font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.sidebar.collapsed .user-info { opacity: 0; width: 0; }
.sidebar.collapsed .sidebar-user { justify-content: center; }

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}
.sidebar.collapsed ~ .main-content { margin-left: 72px; }

/* ===== TOPBAR ===== */
.topbar {
    height: var(--topbar-height);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky; top: 0;
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar-left h1 { font-size: 1.1rem; font-weight: 700; line-height: 1.2; margin: 0; }
.topbar-left p { color: var(--text-muted); font-size: 0.8rem; margin: 2px 0 0 0; }

.topbar-right {
    display: flex; align-items: center; gap: 12px;
}

.avatar-stack { display: flex; align-items: center; }
.avatar-stack .av {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid white;
    background: #ccc;
    margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: white;
}
.avatar-stack .av:first-child { margin-left: 0; }
.av-1 { background: #d97706; }
.av-2 { background: #C81E23; }
.av-3 { background: #7B1113; }
.av-add {
    background: var(--background);
    color: var(--text-muted);
    font-weight: 700; font-size: 1rem;
}

.topbar-icon-btn {
    background: none; border: none;
    cursor: pointer; color: var(--text-muted);
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
    position: relative;
}
.topbar-icon-btn:hover { background: var(--background); color: var(--text); }
.topbar-icon-btn .notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid white;
}

/* Notification Dropdown */
.notif-wrapper { position: relative; }
.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    text-align: left;
}
.notif-wrapper.active .notif-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.notif-dropdown::before {
    content: ''; position: absolute; top: -6px; right: 20px;
    width: 12px; height: 12px; background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid rgba(0,0,0,0.06);
    border-top: 1px solid rgba(0,0,0,0.06);
}
.notif-header {
    padding: 16px 20px; border-bottom: 1px solid #f1f3f1;
    display: flex; justify-content: space-between; align-items: center;
}
.notif-header h4 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #20252b; }
.notif-header span { background: #fee2e2; color: #dc2626; font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.notif-list { max-height: 300px; overflow-y: auto; }
.notif-item {
    display: flex; gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid #f1f3f1; cursor: pointer; transition: background 0.2s;
}
.notif-item:hover { background: #f7f8f7; }
.notif-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.notif-icon.n-order { background: rgba(107, 15, 22,0.1); color: #6b0f16; }
.notif-icon.n-alert { background: rgba(245,158,11,0.1); color: #d97706; }
.notif-content { flex: 1; }
.notif-content h5 { margin: 0 0 4px 0; font-size: 0.82rem; font-weight: 700; color: #334155; }
.notif-content p { margin: 0; font-size: 0.75rem; color: #667085; line-height: 1.4; }
.notif-time { font-size: 0.65rem; color: #94a3b8; font-weight: 600; margin-top: 4px; display: block; }
.notif-footer {
    padding: 12px; text-align: center; border-top: 1px solid #f1f3f1;
}
.notif-footer a { color: #6b0f16; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.notif-footer a:hover { text-decoration: underline; }

.btn-export {
    background: var(--primary);
    color: white; border: none;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: var(--transition);
}
.btn-export:hover { background: var(--primary-dark); }

/* ===== TOAST ALERTS ===== */
.sg-toast-container {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    max-width: 420px;
    width: calc(100vw - 56px);
    pointer-events: none;
}
.sg-toast {
    pointer-events: auto;
}
.sg-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    color: white;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    border-left: 5px solid rgba(255,255,255,0.25);
    animation: sgToastIn 0.35s cubic-bezier(0.16,1,0.3,1);
    position: relative;
    overflow: hidden;
}
.sg-toast::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    pointer-events: none;
}
@keyframes sgToastIn {
    from { transform: translateX(-110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes sgToastOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(-110%); opacity: 0; }
}
.sg-toast.removing { animation: sgToastOut 0.3s ease forwards; }

.sg-toast-icon {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sg-toast-icon svg { display: block; }
.sg-toast-body { flex: 1; min-width: 0; }
.sg-toast-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 2px; }
.sg-toast-msg   { font-size: 0.82rem; opacity: 0.88; line-height: 1.4; }
.sg-toast-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
    font-family: 'Inter', sans-serif;
}
.sg-toast-btn:hover { background: rgba(255,255,255,0.35); }

/* Type colors */
.sg-toast.success { background: #7B1113; border-left-color: #d9a441; }
.sg-toast.error   { background: #7F1D1D; border-left-color: #dc2626; }
.sg-toast.warning { background: #92400E; border-left-color: #d97706; }
.sg-toast.info    { background: #7B1113; border-left-color: #7B1113; }

/* ===== CONTENT BODY ===== */
.content-body {
    padding: 28px;
    flex: 1;
}

.page-header { margin-bottom: 30px; }
.page-header h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--text); }
.page-header p { color: var(--text-muted); font-size: 0.95rem; margin-top: 4px; }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* ===== CARDS ===== */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: none;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Card with dark Sheger header & footer */
.card-header {
    background: linear-gradient(135deg, #240609, #3a0c11);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -24px -24px 20px -24px;
}
.card-header h3,
.card-header h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-header .ch-icon {
    width: 32px;
    height: 32px;
    background: rgba(217, 164, 65,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d9a441;
    flex-shrink: 0;
}
.card-header .ch-badge {
    background: #d9a441;
    color: #240609;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.card-header .ch-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    font-weight: 400;
    margin-top: 2px;
}

.card-footer {
    background: linear-gradient(135deg, #240609, #3a0c11);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px -24px -24px -24px;
}
.card-footer span,
.card-footer a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    text-decoration: none;
}
.card-footer a:hover {
    color: #d9a441;
}
.card-footer .cf-action {
    color: #d9a441;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Card with both header and footer — no inner top/bottom padding */
.card:has(.card-header) { padding-top: 24px; }
.card:has(.card-footer) { padding-bottom: 24px; }

/* ===== DASHBOARD HERO SUMMARY CARD (account-summary style) ===== */
.dash-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--primary), var(--primary-hover) 60%, #2e070b);
    border-radius: 22px;
    padding: 22px 22px 18px;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 16px 40px rgba(107,15,22,0.28);
}
.dash-hero-card::before {
    content: '';
    position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(217,164,65,0.18), transparent 70%);
    pointer-events: none;
}
.dash-hero-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.dash-hero-eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); font-weight: 700; margin-bottom: 6px; }
.dash-hero-brand { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(34,197,94,0.16); color: #4ade80;
    border: 1px solid rgba(74,222,128,0.35);
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
    padding: 3px 9px 3px 7px; border-radius: 20px;
}
.dash-hero-badge i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; }
.dash-hero-icon-btn {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: rgba(217,164,65,0.16); border: 1px solid rgba(217,164,65,0.35);
    color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.2s;
}
.dash-hero-icon-btn:hover { background: rgba(217,164,65,0.28); }
.dash-hero-icon-btn svg, .dash-hero-icon-btn i { width: 18px; height: 18px; }

.dash-hero-mid { position: relative; z-index: 1; margin-top: 22px; }
.dash-hero-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); font-weight: 700; margin-bottom: 6px; }
.dash-hero-amount { font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700; color: #4ade80; letter-spacing: -0.01em; }

.dash-hero-balance-row {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 18px;
}
.dash-hero-currency { text-align: right; }
.dash-hero-balance { font-size: 1.05rem; font-weight: 700; }

.dash-hero-stats-row {
    position: relative; z-index: 1;
    display: flex; align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 4px;
}
.dash-hero-stat { flex: 1; text-align: center; }
.dash-hero-stat-val { font-size: 1.1rem; font-weight: 800; }
.dash-hero-stat-val.accent { color: var(--accent); }
.dash-hero-stat-val.warn { color: #fbbf24; }
.dash-hero-stat-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-top: 3px; font-weight: 700; }
.dash-hero-report-btn {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--sage-dark));
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: transform 0.2s;
}
.dash-hero-report-btn:hover { transform: translateY(-2px); }
.dash-hero-report-btn svg, .dash-hero-report-btn i { width: 18px; height: 18px; }

@media (max-width: 600px) {
    .dash-hero-stats-row { flex-wrap: wrap; row-gap: 14px; }
    .dash-hero-stat { flex: 1 1 40%; }
    .dash-hero-report-btn { flex: 0 0 100%; width: 100%; margin-top: 6px; }
}

/* ===== METRIC CARDS ===== */
/* ===== METRIC CARDS (ep-card) ===== */
.ep-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 22px 24px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: default;
}
.ep-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* Large decorative circle in the top-right */
.ep-card::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    opacity: 0.10;
    z-index: 0;
}
/* Small decorative circle bottom-right */
.ep-card::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: -20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.06;
    z-index: 0;
}

.ep-content { position: relative; z-index: 2; width: 100%; }

/* Icon badge — rounded square */
.ep-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.ep-icon svg, .ep-icon i { width: 20px; height: 20px; }

/* Value — large and bold */
.ep-val {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 2px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* Label — small uppercase */
.ep-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #94A3B8;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.ep-progress { height: 4px; background: #f1f3f1; border-radius: 4px; margin-top: 16px; overflow: hidden; }
.ep-progress-inner { height: 100%; border-radius: 4px; transition: width 0.8s ease; }

/* ===== COLOR THEMES ===== */

/* Green — Net Sales / Success */
.c-green::before, .c-green::after { background: #B45309; }
.c-green .ep-icon { background: rgba(217,164,65,0.12); color: #B45309; }
.c-green .ep-val { color: #B45309; }
.c-green .ep-progress-inner { background: #B45309; }

/* Blue — Tables / Info */
.c-blue::before, .c-blue::after { background: #7B1113; }
.c-blue .ep-icon { background: rgba(107,15,22,0.12); color: #7B1113; }
.c-blue .ep-val { color: #6b0f16; }
.c-blue .ep-progress-inner { background: #7B1113; }

/* Purple — Orders / Premium */
.c-purple::before, .c-purple::after { background: #C81E23; }
.c-purple .ep-icon { background: rgba(200,30,35,0.12); color: #C81E23; }
.c-purple .ep-val { color: #991B1B; }
.c-purple .ep-progress-inner { background: #C81E23; }

/* Gold/Amber — Sheger Accent */
.c-orange::before, .c-orange::after { background: #d9a441; }
.c-orange .ep-icon { background: rgba(217, 164, 65,0.15); color: #d9a441; }
.c-orange .ep-val { color: #92400E; }
.c-orange .ep-progress-inner { background: #d9a441; }

/* Cyan — Availability */
.c-cyan::before, .c-cyan::after { background: #F0A81C; }
.c-cyan .ep-icon { background: rgba(240,168,28,0.12); color: #F0A81C; }
.c-cyan .ep-val { color: #92400E; }
.c-cyan .ep-progress-inner { background: #F0A81C; }

/* Red — Sheger Primary */
.c-red::before, .c-red::after { background: #6b0f16; }
.c-red .ep-icon { background: rgba(107, 15, 22,0.10); color: #6b0f16; }
.c-red .ep-val { color: #6b0f16; }
.c-red .ep-progress-inner { background: #6b0f16; }

/* Dark Red (Sheger Primary variant) */
.c-darkred::before, .c-darkred::after { background: #6b0f16; }
.c-darkred .ep-icon { background: rgba(107, 15, 22,0.10); color: #6b0f16; }
.c-darkred .ep-val { color: #6b0f16; }
.c-darkred .ep-progress-inner { background: #6b0f16; }

/* ===== KPI STAT CARDS (canonical — red/gold Sheger stat card, used site-wide) ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.kpi-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kpi {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.kpi:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(24,24,27,0.4); }
/* Decorative tint circle, top-right */
.kpi::before {
    content: '';
    position: absolute;
    right: -26px; top: -26px;
    width: 132px; height: 132px;
    border-radius: 50%;
    background: var(--kpi-tint, rgba(107,15,22,0.08));
    z-index: 0;
}
/* Gradient accent bar across the top edge */
.kpi::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--kpi-bar, linear-gradient(90deg,#7B1113,#C81E23));
    z-index: 1;
}
.kpi .ic {
    position: absolute;
    top: 16px; right: 16px;
    width: 40px; height: 40px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: var(--kpi-ic, linear-gradient(135deg,#7B1113,#C81E23));
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.55);
    z-index: 2;
}
.kpi .ic svg, .kpi .ic i { width: 18px; height: 18px; stroke-width: 2.1; }
.kpi .lbl { position: relative; z-index: 1; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--text-muted); padding-right: 50px; }
.kpi .val { position: relative; z-index: 1; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 900; margin: 10px 0 5px; letter-spacing: -0.03em; color: var(--kpi-ink, var(--text)); line-height: 1.15; word-break: break-word; }
.kpi .sub { position: relative; z-index: 1; font-size: 0.73rem; color: var(--text-muted); line-height: 1.4; }
.chip-up, .chip-down { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 0.68rem; }
.chip-up { color: #8A5A05; background: #FEF3C7; }
.chip-down { color: #B91C1C; background: #FEE2E2; }

/* Color variants — pick per card for visual variety while staying on-brand */
.kpi-wine   { --kpi-bar: linear-gradient(90deg,#7B1113,#C81E23); --kpi-ic: linear-gradient(135deg,#7B1113,#C81E23); --kpi-tint: rgba(200,30,35,.09); --kpi-ink:#C81E23; }
.kpi-red    { --kpi-bar: linear-gradient(90deg,#D71920,#FF7A5C); --kpi-ic: linear-gradient(135deg,#D71920,#FF7A5C); --kpi-tint: rgba(217,164,65,.10); --kpi-ink:#8A5A05; }
.kpi-amber  { --kpi-bar: linear-gradient(90deg,#B3121A,#F0353C); --kpi-ic: linear-gradient(135deg,#B45309,#F0A81C); --kpi-tint: rgba(240,168,28,.14); --kpi-ink:#B45309; }
.kpi-maroon { --kpi-bar: linear-gradient(90deg,#C81E23,#F0353C); --kpi-ic: linear-gradient(135deg,#C81E23,#F0353C); --kpi-tint: rgba(123,17,19,.10); --kpi-ink:#7B1113; }
.kpi-green  { --kpi-bar: linear-gradient(90deg,#166534,#16A34A); --kpi-ic: linear-gradient(135deg,#166534,#16A34A); --kpi-tint: rgba(22,163,74,.10); --kpi-ink:#166534; }
.kpi-slate  { --kpi-bar: linear-gradient(90deg,#475569,#64748B); --kpi-ic: linear-gradient(135deg,#475569,#64748B); --kpi-tint: rgba(71,85,105,.10); --kpi-ink:#475569; }

@media (max-width: 480px) {
    .kpi { padding: 16px 14px; }
    .kpi .ic { width: 34px; height: 34px; }
}

/* ===== GRIDS ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.grid-7-3 { display: grid; grid-template-columns: 7fr 3fr; gap: 20px; }
.grid-6-4 { display: grid; grid-template-columns: 6fr 4fr; gap: 20px; }

/* ===== BUTTONS ===== */
.btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer; border: none;
    display: inline-flex; align-items: center; gap: 7px;
    transition: var(--transition);
}
.btn-primary { background: var(--accent); color: #111; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(217, 164, 65,0.3); }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #8A5A05; }
.btn-warning { background: var(--warning); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }

/* ===== BADGES ===== */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 700;
}
.badge-green { background: #FDE68A; color: #78350F; }
.badge-red { background: #FEE2E2; color: #991B1B; }
.badge-yellow { background: #FEF3C7; color: #92400E; }
.badge-blue { background: #F3D9DA; color: #6b0f16; }
.badge-gray { background: #F3F4F6; color: #374151; }
.badge-purple { background: #FBDADA; color: #7B1113; }
.badge-orange { background: #FDE9CF; color: #9A3412; }
.badge-brown { background: #E8DACB; color: #5C3A21; }
.badge-indigo { background: #E0E3FA; color: #3730A3; }
.badge-gold { background: #F5E3B3; color: #7B5B12; }

/* ===== TABLE (Ledger style) ===== */
.dt-card { background: var(--card-bg); border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden; }
.dt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.dt-topbar-left { display: flex; align-items: center; gap: 12px; }
.dt-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dt-icon svg, .dt-icon i { width: 18px; height: 18px; }
.dt-title { font-size: 1rem; font-weight: 800; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.dt-count { font-weight: 500; color: var(--text-muted); font-size: 0.85rem; }
.dt-perpage { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; }
.dt-perpage select { border: 1px solid var(--border); border-radius: 8px; padding: 6px 28px 6px 10px; font-weight: 700; font-size: 0.85rem; color: var(--text); background: #fff; cursor: pointer; }
.dt-scroll { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--background); color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; padding: 14px 18px; text-align: left; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 0.875rem; transition: background 0.15s ease; }
.data-table tbody tr { position: relative; transition: background 0.15s ease; }
.data-table tbody tr:hover td { background: #f7faf7; }
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--sage); }
.data-table tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 0 var(--success); }
.data-table tbody tr.row-selected td { background: #f7faf7; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .td-center { text-align: center; }
.data-table th.th-check, .data-table td.td-check { width: 36px; text-align: center; padding-left: 20px; padding-right: 0; }
.dt-checkbox { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--primary); cursor: pointer; }
.dt-radio { width: 16px; height: 16px; accent-color: var(--success); cursor: pointer; }

/* Row action icon buttons */
.action-icons { display: flex; gap: 6px; align-items: center; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all 0.15s ease; }
.icon-btn svg, .icon-btn i { width: 14px; height: 14px; }
.icon-btn.icon-view { background: #FDE68A; color: #B45309; }
.icon-btn.icon-view:hover { background: #B45309; color: #fff; transform: translateY(-1px); }
.icon-btn.icon-edit { background: #F3F4F6; color: #4B5563; }
.icon-btn.icon-edit:hover { background: #4B5563; color: #fff; transform: translateY(-1px); }
.icon-btn.icon-delete { background: #FEF2F2; color: #DC2626; }
.icon-btn.icon-delete:hover { background: #DC2626; color: #fff; transform: translateY(-1px); }
.icon-btn.icon-print { background: #FBEAEA; color: #7B1113; }
.icon-btn.icon-print:hover { background: #7B1113; color: #fff; transform: translateY(-1px); }

/* ===== ACCENT TOP BAR (panel + ledger cards) ===== */
.card.accent-top, .dt-card { position: relative; }
.card.accent-top::before, .dt-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--success), var(--sage) 60%, var(--accent));
    z-index: 1;
}

/* ===== PANEL CARD (filter bars, form panels) ===== */
.panel-card { background: var(--card-bg); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 20px 22px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-header-left { display: flex; align-items: center; gap: 12px; }
.panel-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.panel-icon svg, .panel-icon i { width: 17px; height: 17px; }
.panel-title { font-size: 0.85rem; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; }
.panel-subtitle { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.panel-reset-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: var(--transition); }
.panel-reset-btn:hover { border-color: var(--primary); color: var(--primary); }
.panel-reset-btn svg, .panel-reset-btn i { width: 14px; height: 14px; }

/* ===== FILTER CARD ===== */
/* Unified "Filter X" bar used across Orders, Bills, Customers, Inventory,
   Menu, Tables, etc.: search + dropdowns + date in a single, narrow,
   responsive row. Scoped to .filter-card so it never touches the other
   (non-filter) panels that reuse .panel-card / .panel-header. */
.filter-card { padding: 14px 20px 16px; }

/* ---- shared report-style date filter bar (Today/7d/30d/Custom pills) ----
   Used by admin/dashboard.php, admin/reports.php, admin/revenue.php,
   admin/expenses.php, admin/pnl.php so the pill row looks identical
   everywhere without every page redeclaring these rules. */
:root{
  --rp-wine:#7B1113; --rp-wine-2:#C81E23; --rp-gold:#F0A81C; --rp-gold-2:#FBD46D;
  --rp-ink:#1F2124; --rp-muted:#6B7280; --rp-line:#EFEFF1;
  --rp-surface:#ffffff; --rp-soft:#FFFCF5;
  --rp-shadow:0 1px 2px rgba(24,24,27,.04), 0 10px 26px -16px rgba(24,24,27,.16);
  --rp-r:18px;
}
.dash-filter{background:var(--rp-surface);border:1px solid var(--rp-line);border-radius:var(--rp-r);
  padding:16px 18px;margin-bottom:20px;box-shadow:var(--rp-shadow);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.preset-pills{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.preset-pills::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;padding:8px 15px;border-radius:999px;font-size:.75rem;font-weight:800;text-decoration:none;
  border:1px solid var(--rp-line);color:var(--rp-muted);background:var(--rp-soft);transition:.18s;cursor:pointer}
.pill:hover{color:var(--rp-wine);border-color:rgba(215,25,32,.35)}
.pill.active{background:linear-gradient(135deg,var(--rp-wine),var(--rp-wine-2));border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(215,25,32,.9)}
.filter-card .panel-header { margin-bottom: 12px; }
.filter-card .panel-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); }
.filter-card .panel-icon svg, .filter-card .panel-icon i { width: 15px; height: 15px; }
.filter-card .panel-title { font-size: 0.76rem; letter-spacing: 0.5px; }
.filter-card .panel-reset-btn { padding: 7px 14px; border-radius: 9px; font-size: 0.76rem; }
.filter-card .btn.btn-primary,
.filter-card .btn.btn-outline { padding: 7px 14px; border-radius: 9px; font-size: 0.76rem; }
.filter-card .form-group { margin-bottom: 0; }
.filter-card .form-label { margin-bottom: 5px; font-size: 0.63rem; }
.filter-card .form-control,
.filter-card .shg-dd-trigger {
    padding: 9px 13px;
    font-size: 0.82rem;
    border-radius: 10px;
    background: var(--background, #f7f8f7);
    border-color: transparent;
}
.filter-card .form-control:focus,
.filter-card .shg-dd.open .shg-dd-trigger,
.filter-card .shg-dd-trigger:focus-visible { background: var(--white, #fff); }
.filter-card select.form-control { padding-right: 34px; }
.filter-card .search-pill-wrapper i,
.filter-card .search-pill-wrapper svg { width: 16px; height: 16px; }
.filter-card .search-pill { padding-left: 36px; }
/* Fields sit in one flexible row and only wrap the overflow — they never
   fall back to the app-wide grid collapse (which would stack each field
   full-width and blow out the card's height on tablet/mobile). Each field
   just shrinks/wraps in place, so the bar stays as short as possible at
   every viewport width. */
.filter-card .grid-2, .filter-card .grid-3, .filter-card .grid-4 {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
}
.filter-card .grid-2 > .form-group,
.filter-card .grid-3 > .form-group,
.filter-card .grid-4 > .form-group {
    flex: 1 1 150px; min-width: 130px;
}
.filter-card .grid-2 > .form-group:has(.search-pill-wrapper),
.filter-card .grid-3 > .form-group:has(.search-pill-wrapper),
.filter-card .grid-4 > .form-group:has(.search-pill-wrapper) {
    flex: 1.6 1 190px;
}
[data-theme="dark"] .filter-card .form-control,
[data-theme="dark"] .filter-card .shg-dd-trigger { background: var(--surface-soft); }
@media (max-width: 560px) {
    .filter-card .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .filter-card .panel-header > div:last-child { width: 100%; }
    .filter-card .panel-header > div:last-child .btn,
    .filter-card .panel-header > div:last-child .panel-reset-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
    .filter-card .grid-2 > .form-group,
    .filter-card .grid-3 > .form-group,
    .filter-card .grid-4 > .form-group,
    .filter-card .grid-2 > .form-group:has(.search-pill-wrapper),
    .filter-card .grid-3 > .form-group:has(.search-pill-wrapper),
    .filter-card .grid-4 > .form-group:has(.search-pill-wrapper) {
        flex: 1 1 100%;
    }
}

/* ===== SINGLE-ROW FILTER BAR ===== */
/* Everything — icon, title, search, dropdowns, date, actions — lives in
   ONE flex row so the whole filter section stays as short as possible.
   Row only wraps its individual controls (never stacks full-width) down
   to small phone widths, so it's always narrow-height and functional. */
.filter-card.filter-card-row { padding: 12px 18px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-row-label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.filter-row-label .panel-title { white-space: nowrap; }
.filter-row .search-pill-wrapper { flex: 1.6 1 170px; min-width: 150px; margin: 0; }
.filter-row .search-pill-wrapper .search-pill { width: 100%; }
.filter-row select.form-control,
.filter-row input[type="date"].form-control,
.filter-row input[type="text"].form-control:not(.search-pill) {
    width: auto; flex: 1 1 125px; min-width: 110px; margin: 0;
    padding: 9px 13px; font-size: 0.82rem; border-radius: 10px;
    background: var(--background, #f7f8f7); border-color: transparent;
}
.filter-row select.form-control { padding-right: 32px; }
.filter-row .form-control:focus { background: var(--white, #fff); }
/* Custom-select progressive enhancement (custom-select.js) replaces every
   native <select> with a .shg-dd wrapper + button trigger. Inside a filter
   row that wrapper must behave exactly like the plain select.form-control
   rule above (inline, compact, shrink/wrap in place) instead of falling
   back to its site-wide "block" full-width behavior — otherwise each
   dropdown drops to its own full-width line and the bar stacks tall. */
.filter-row .shg-dd.shg-dd-filter-row {
    display: inline-flex; width: auto;
    flex: 1 1 125px; min-width: 110px; max-width: none;
    margin: 0;
}
.filter-row .shg-dd-filter-row .shg-dd-trigger {
    width: 100%; min-width: 0;
    padding: 9px 13px; font-size: 0.82rem; border-radius: 10px;
    background: var(--background, #f7f8f7); border-color: transparent;
}
.filter-row .shg-dd-filter-row .shg-dd-trigger:hover,
.filter-row .shg-dd-filter-row.open .shg-dd-trigger,
.filter-row .shg-dd-filter-row .shg-dd-trigger:focus-visible { background: var(--white, #fff); }
[data-theme="dark"] .filter-row .shg-dd-filter-row .shg-dd-trigger { background: var(--surface-soft); }
.filter-row-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; }
[data-theme="dark"] .filter-row select.form-control,
[data-theme="dark"] .filter-row input.form-control { background: var(--surface-soft); }
@media (max-width: 720px) {
    .filter-row-actions { margin-left: 0; width: 100%; }
    .filter-row-actions .btn,
    .filter-row-actions .panel-reset-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
    .filter-row .search-pill-wrapper { flex: 1 1 100%; }
    .filter-row select.form-control,
    .filter-row input[type="date"].form-control,
    .filter-row .shg-dd.shg-dd-filter-row { flex: 1 1 calc(50% - 5px); }
}

/* ===== Standalone report-style filter bar (Reports / Analytics / Dashboard) =====
   Keep the preset pills + field row narrow and let fields wrap in place
   instead of stacking edge-to-edge on smaller screens. */
.rp-filter form, .dash-filter form { row-gap: 10px; }
@media (max-width: 480px) {
    .rp-filter, .dash-filter { padding: 12px 14px; }
    .rp-filter form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
}

/* NOTE: the old .filter-bar-modern (Tables page) filter bar was retired —
   Tables now uses the same .filter-card.filter-card-row / .filter-row
   system as every other admin list page. */


/* ===== FORMS ===== */
.form-group { margin-bottom: 18px; }

/* ===== FORM LABELS (uppercase caption style) ===== */
.form-label { display: block; margin-bottom: 7px; font-weight: 800; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.form-label .req { color: var(--danger); }

/* ===== PANEL TABS (icon-topped tab row, e.g. STATS/PLAYBOOK/FILLS/FILES) ===== */
.panel-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px -22px 20px; padding: 0 22px; }
.panel-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px 10px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.4px; text-transform: uppercase; border-bottom: 2px solid transparent; transition: var(--transition); }
.panel-tab svg, .panel-tab i { width: 16px; height: 16px; }
.panel-tab.active { color: var(--success); border-bottom-color: var(--success); }
.panel-tab:hover:not(.active) { color: var(--text); }

.form-control {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.875rem;
    font-family: inherit;
    transition: var(--transition);
    background: #f7f8f7;
    color: var(--text);
}
.form-control:focus { outline: none; border-color: var(--accent); background: white; box-shadow: 0 0 0 3px rgba(217, 164, 65,0.15); }
.form-control::placeholder { color: #9CA3AF; }
.search-pill {
    border-radius: 30px;
    background: #f1f3f1;
    border: 1px solid transparent;
    padding-left: 38px;
    padding-right: 16px;
}
.search-pill-wrapper {
    position: relative;
    display: inline-block;
    flex: 1; /* Helps with flex layouts */
}
.search-pill-wrapper i, .search-pill-wrapper svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.search-pill:focus { background: white; border-color: var(--accent); }
select.form-control { appearance: none; cursor: pointer; }

/* ===== CUSTOM DROPDOWN (progressive enhancement — every <select> site-wide) ===== */
.shg-dd { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }
.shg-dd.shg-dd-block { display: block; width: 100%; }
.shg-dd > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; }

.shg-dd-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-width: 150px; max-width: 100%;
    padding: 10px 14px;
    background: var(--white, #fff);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    color: var(--text, #20252b);
    cursor: pointer;
    transition: var(--transition, all .25s ease);
}
.shg-dd-block .shg-dd-trigger { min-width: 0; }
.shg-dd-trigger:hover { border-color: var(--primary); }
.shg-dd.open .shg-dd-trigger,
.shg-dd-trigger:focus-visible {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(107, 15, 22, 0.14);
    outline: none;
}
.shg-dd-trigger:disabled { opacity: .55; cursor: not-allowed; }
.shg-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shg-dd-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); transition: transform .2s ease; }
.shg-dd.open .shg-dd-chevron { transform: rotate(180deg); }

/* compact variant for toolbar-style selects (per-page, sort, inline filters) */
.shg-dd.shg-dd-sm .shg-dd-trigger { padding: 7px 10px 7px 12px; min-width: 92px; font-size: .8rem; border-radius: 9px; }
.shg-dd.shg-dd-sm .shg-dd-chevron { width: 14px; height: 14px; }

.shg-dd-panel {
    position: fixed; top: 0; left: 0;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(59, 6, 11, .18), 0 4px 14px rgba(0, 0, 0, .07);
    padding: 6px; margin: 0;
    max-height: 280px; overflow-y: auto;
    z-index: 4000;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px) scale(.98);
    transform-origin: top left;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.shg-dd-panel.dropup { transform-origin: bottom left; }
.shg-dd-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.shg-dd-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 9px;
    font-size: 0.85rem; font-weight: 600; color: var(--text, #20252b);
    cursor: pointer; transition: background .12s ease, color .12s ease;
    white-space: nowrap;
}
.shg-dd-option:hover, .shg-dd-option.focus { background: rgba(107, 15, 22, .08); }
.shg-dd-option.active { background: var(--primary, #6b0f16); color: #fff; }
.shg-dd-option.active:hover { background: var(--primary-hover, #570b11); }
.shg-dd-option .shg-dd-check { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent, #d9a441); opacity: 0; }
.shg-dd-option.active .shg-dd-check { opacity: 1; }
.shg-dd-option.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.shg-dd-empty { padding: 14px 12px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--text-muted); }

/* Re-asserted AFTER the .shg-dd-sm sizing rules above (same selector
   specificity, later source order wins the cascade) so the compact
   filter-row trigger sizing always applies, never the generic .shg-dd-sm
   toolbar sizing it would otherwise tie with. */
.filter-row .shg-dd.shg-dd-filter-row .shg-dd-trigger {
    width: 100%; min-width: 0;
    padding: 9px 13px; font-size: 0.82rem; border-radius: 10px;
}

/* ===== TABS ===== */
.tab-bar {
    display: flex; gap: 4px;
    background: var(--border);
    border-radius: 12px; padding: 4px;
    margin-bottom: 22px;
}
.tab-btn {
    flex: 1; padding: 8px 16px;
    border-radius: 9px; border: none;
    background: transparent; font-weight: 600;
    font-size: 0.82rem; cursor: pointer;
    transition: var(--transition); color: var(--text-muted);
}
.tab-btn.active { background: white; color: var(--primary); box-shadow: var(--shadow-sm); }

/* ── Scrollable variant: for tab bars with many items (menu categories on
   POS/Menu Management/New Order) where flex:1 would squeeze labels onto
   two lines on narrower screens. Tabs keep their natural width and the
   bar scrolls horizontally instead of shrinking. Short, fixed tab bars
   (e.g. Floor Plan/List View) keep the original equal-width segmented
   look and are unaffected. ── */
.tab-bar.tab-bar-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: space-between;
}
.tab-bar.tab-bar-scroll::-webkit-scrollbar { display: none; }
.tab-bar.tab-bar-scroll .tab-btn {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}
/* Note: justify-content:space-between only spreads tabs when they fit on
   one line with room to spare. If they ever overflow (very narrow screen,
   long labels), the browser naturally falls back to packed + scroll — no
   extra rule needed. */

/* ── Compact variant: for short 2-3 item view-switchers (e.g. Floor Plan /
   List View) that should sit at their natural width on the right side of
   the bar instead of stretching edge-to-edge like the segmented tab bars
   above. ── */
.tab-bar.tab-bar-compact {
    justify-content: flex-end;
    background: transparent;
    padding: 0;
    gap: 8px;
}
.tab-bar.tab-bar-compact .tab-btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    background: var(--border);
}
.tab-bar.tab-bar-compact .tab-btn.active { background: white; }

/* ===== STAT ROW ===== */
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-row-label { font-size: 0.85rem; font-weight: 500; }
.stat-row-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.stat-row-val { font-size: 0.95rem; font-weight: 700; }

/* ===== RECOMMENDATION CARDS ===== */
.rec-card { border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.rec-green { background: #FFF7E6; border: 1px solid #F0A81C; }
.rec-orange { background: #FFF7ED; border: 1px solid #FED7AA; }
.rec-blue { background: #FBEAEA; border: 1px solid #F3D9DA; }
.rec-card h4 { font-size: 0.82rem; font-weight: 700; margin-bottom: 4px; }
.rec-card p { font-size: 0.75rem; color: #475569; }

/* ===== ALERTS ===== */
.alert { 
    padding: 16px 20px; 
    border-radius: 12px; 
    margin-bottom: 16px; 
    font-size: 0.88rem; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    position: relative;
    overflow: hidden;
}
.alert-success { background: #FFF7E6; border-color: #F0A81C; border-left-color: #d9a441; color: #7B1113; }
.alert-warning { background: #FFF7ED; border-color: #FED7AA; border-left-color: #d97706; color: #92400E; }
.alert-danger { background: #FEF2F2; border-color: #FECACA; border-left-color: #dc2626; color: #991B1B; }
.alert-info { background: #FBEAEA; border-color: #F3D9DA; border-left-color: #7B1113; color: #6b0f16; }
.alert-darkred { background: #7B1113; border-color: #5c0d0f; border-left-color: #ffffff; color: #ffffff; }
.alert-darkred .alert-icon-block { background: rgba(255,255,255,0.15); color: #ffffff; }
.alert-darkred .alert-badge { background: rgba(255,255,255,0.2); color: #ffffff; }
.alert-darkred .alert-close { color: #ffffff; }
.alert-darkred .alert-close:hover { background: rgba(255,255,255,0.15); }

.alert svg { flex-shrink: 0; width: 18px; height: 18px; }
.alert strong { font-weight: 700; color: inherit; }

.alert-icon-block {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.alert-warning .alert-icon-block { background: #FDE68A; color: #D97706; }
.alert-info .alert-icon-block { background: #F3D9DA; color: #7B1113; }

.alert-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: #FDE68A;
    color: #92400E;
    margin-left: 6px;
    vertical-align: middle;
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background 0.2s;
}
.alert-close:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* ===== DIVIDER ===== */
.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

/* ===== MOBILE OVERLAY ===== */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
.sidebar-overlay.show { display: block; }

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

/* ===== MOBILE BOTTOM TAB BAR ===== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    align-items: flex-end;
    justify-content: space-around;
    background: var(--sidebar-bg);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);
}
.mbn-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; font-weight: 600;
    text-decoration: none;
    padding: 6px 2px 2px;
    transition: color 0.2s;
    position: relative;
}
.mbn-item:hover, .mbn-item.active { color: var(--accent); }
.mbn-item svg { flex-shrink: 0; }
.mbn-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

/* Tap feedback for the regular tabs — brief opacity dip so every
   button in the bar feels pressable, not just the POS circle */
.mbn-item:active { opacity: 0.6; transition: opacity 0.1s; }
.mbn-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Raised circular center button (POS) — floats above the bar and reads
   as a real, physical button: layered shadow at rest, a hover lift on
   desktop, and a press-down sink on tap/click. */
.mbn-raised { position: relative; color: var(--text-muted); }
.mbn-raised.active, .mbn-raised:hover { color: var(--accent); }
.mbn-raised-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--sage-dark));
    color: var(--sidebar-bg);
    margin-top: -26px;
    /* inner highlight (top) + inner shade (bottom) for a raised, embossed
       look, plus the outer drop shadow and the ring that separates the
       circle from the bar behind it */
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.45),
        inset 0 -2px 3px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.35),
        0 0 0 4px var(--sidebar-bg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Hover lift — desktop pointer only, like an elevated FAB */
.mbn-raised:hover .mbn-raised-circle,
.mbn-raised.active .mbn-raised-circle {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.45),
        inset 0 -2px 3px rgba(0,0,0,0.25),
        0 12px 26px rgba(0,0,0,0.4),
        0 0 0 4px var(--sidebar-bg);
}
/* Press feedback — sinks down and its shadow tightens, like a physical
   button being pushed. Works for both mouse :active and touch. */
.mbn-raised:active .mbn-raised-circle {
    transform: translateY(1px) scale(0.96);
    box-shadow:
        inset 0 1.5px 3px rgba(0,0,0,0.35),
        0 3px 8px rgba(0,0,0,0.35),
        0 0 0 4px var(--sidebar-bg);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
/* Keyboard focus ring on the raised circle itself, not just the link box */
.mbn-raised:focus-visible {
    outline: none;
}
.mbn-raised:focus-visible .mbn-raised-circle {
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.45),
        inset 0 -2px 3px rgba(0,0,0,0.25),
        0 8px 20px rgba(0,0,0,0.35),
        0 0 0 4px var(--sidebar-bg),
        0 0 0 7px var(--accent);
}

/* "More" tab — brand-mark badge with a tiny overflow-dots hint above it */
.mbn-more { gap: 2px; }
.mbn-more-dots { color: rgba(255,255,255,0.4); line-height: 0; transition: color 0.2s; }
.mbn-more-dots svg circle { fill: currentColor; }
.mbn-more.active .mbn-more-dots, .mbn-more:hover .mbn-more-dots { color: var(--accent); }
.mbn-more-badge {
    width: 26px; height: 26px;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: border-color 0.2s, transform 0.2s;
}
.mbn-more-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mbn-more.active .mbn-more-badge, .mbn-more:hover .mbn-more-badge {
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* "More" quick-access bottom sheet */
.mms-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mms-overlay.show { display: block; opacity: 1; }

.mobile-more-sheet {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1002;
    background: var(--surface, #fff);
    border-radius: 20px 20px 0 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0,0,0,0.3);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 72vh;
    overflow-y: auto;
}
.mobile-more-sheet.show { display: block; }
.mobile-more-sheet.open { transform: translateY(0); }

.mms-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(120,120,120,0.3);
    margin: 0 auto 10px;
}
.mms-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem;
    color: var(--text);
}
.mms-close {
    background: var(--surface-soft, #f1f1f1); border: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer;
}
.mms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
}
.mms-item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.72rem; font-weight: 600;
    text-align: center;
    padding: 6px 2px;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s;
}
.mms-item:hover { background: var(--surface-soft, rgba(0,0,0,0.04)); }
.mms-item.active { color: var(--accent); }
.mms-item.active .mms-icon { background: var(--accent); color: var(--sidebar-bg); }
.mms-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-soft, #f1f1f1);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
    position: relative;
}
.mms-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.mms-logout { color: #dc2626; }
.mms-logout .mms-icon { color: #dc2626; }

[data-theme="dark"] .mobile-bottom-nav { background: #0e0608; }
[data-theme="dark"] .mobile-more-sheet { background: var(--surface); }
[data-theme="dark"] .mms-close, [data-theme="dark"] .mms-icon { background: var(--surface-soft); }

@media (max-width: 1280px) {
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .grid-7-3 { grid-template-columns: 1fr; }
    .grid-6-4 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .grid-6 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 280px; }

    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content { margin-left: 0 !important; padding-bottom: 78px; }

    .topbar { padding: 0 16px; }
    .content-body { padding: 18px; }

    .grid-2, .grid-3, .grid-4, .grid-6, .grid-7-3, .grid-6-4 {
        grid-template-columns: 1fr;
    }

    .page-header-row { flex-direction: column; }
    .avatar-stack { display: none; }

    /* Bottom tab bar replaces most sidebar taps on mobile/tablet */
    .mobile-bottom-nav { display: flex; }
    .sheger-ai-fab { bottom: 86px; }
}

@media (max-width: 480px) {
    .topbar-left h1 { font-size: 0.95rem; }
    .content-body { padding: 14px; }
    .card { padding: 16px; }
    .ep-card { padding: 16px; }
    .btn-export span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================================
   GLOBAL SHEGER MODAL SYSTEM — WHITE + DARK RED ONLY
   =================================================== */
.sheger-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(123, 17, 19, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sheger-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* ── Base Modal Box ── */
.sheger-modal-box {
    background: #ffffff;
    border-radius: 24px;
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(107, 15, 22, 0.12),
        0 24px 64px rgba(107, 15, 22, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.10);
    transform: scale(0.93) translateY(24px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    display: flex;
    flex-direction: column;
}
.sheger-modal-overlay.show .sheger-modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Modal Header — universal dark-red ── */
.sheger-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(135deg, #6b0f16 0%, #3a0c11 100%);
    border-bottom: 3px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
/* Subtle top-right glow on header */
.sheger-modal-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* ── Variant overrides: ALL use the same dark-red header ── */
.sheger-modal-box.modal-delete .sheger-modal-header,
.sheger-modal-box.modal-edit   .sheger-modal-header,
.sheger-modal-box.modal-view   .sheger-modal-header {
    background: linear-gradient(135deg, #6b0f16 0%, #3a0c11 100%);
}
/* Delete variant — red-tinted shadow */
.sheger-modal-box.modal-delete {
    box-shadow:
        0 0 0 1px rgba(107, 15, 22, 0.20),
        0 24px 64px rgba(107, 15, 22, 0.30),
        0 8px 24px rgba(0, 0, 0, 0.12);
}
/* View variant — slightly lighter body bg */
.sheger-modal-box.modal-view .sheger-modal-body { background: #f9f9f9; }

/* ── Modal Icon ── */
.sheger-modal-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    margin-right: 16px;
}
.sheger-modal-icon svg,
.sheger-modal-icon i { width: 18px; height: 18px; stroke: #fff; color: #fff; }

.sheger-modal-header-info { flex: 1; }
.sheger-modal-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px 0;
    letter-spacing: -0.1px;
}
.sheger-modal-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.60);
    margin: 0;
    line-height: 1.4;
}

/* ── Close Button ── */
.sheger-modal-close {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.sheger-modal-close:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: rotate(90deg);
}

/* ── Body ── */
.sheger-modal-body {
    padding: 26px 28px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #ffffff;
}

/* ── Responsive fix: modals whose header/body/footer are wrapped in a
   <form> (Add/Edit Menu Item, Inventory, Payments, Tables, Customers).
   Without this, the <form> isn't part of the modal-box flex column, so
   it grows to fit ALL of its content and the modal-box's overflow:hidden
   silently chops off whatever doesn't fit — usually the footer buttons
   and any fields below them. This makes the form a proper flex column
   too, so only .sheger-modal-body scrolls internally while the header
   and footer (Save/Cancel/Update…) always stay fully visible. ── */
.sheger-modal-box > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* ── Footer ── */
.sheger-modal-footer {
    padding: 16px 28px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: #fafafa;
    border-radius: 0 0 24px 24px;
}

/* ── Form Labels inside modal ── */
.sheger-modal-body .modal-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #6b0f16;
    margin-bottom: 7px;
    letter-spacing: 0.9px;
}

/* ── Form Controls inside modal ── */
.sheger-modal-body .form-control,
.sheger-modal-body .form-select {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: #20252b;
    background: #ffffff;
    margin-bottom: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sheger-modal-body .form-control:hover,
.sheger-modal-body .form-select:hover {
    border-color: rgba(107, 15, 22, 0.35);
}
.sheger-modal-body .form-control:focus,
.sheger-modal-body .form-select:focus {
    outline: none;
    border-color: #6b0f16;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(107, 15, 22, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.sheger-modal-body .form-control::placeholder { color: #b0b7c3; }

/* ── Global dropdown override (all selects across all pages) ── */
select.form-control,
select.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b0f16' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px;
    padding-right: 38px;
    cursor: pointer;
}
select.form-control:focus,
select.form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b0f16' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Delete modal body center styles ── */
.sheger-modal-box.modal-delete .sheger-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 32px;
}
.modal-delete-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fef2f2;
    border: 2px solid #fecaca;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #dc2626;
}
.modal-delete-icon svg,
.modal-delete-icon i { width: 30px; height: 30px; color: #dc2626; }
.modal-delete-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #20252b;
    margin-bottom: 8px;
}
.modal-delete-msg {
    font-size: 0.9rem;
    color: #667085;
    line-height: 1.6;
    max-width: 300px;
}
.modal-delete-name {
    display: inline-block;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    margin-top: 10px;
    font-size: 0.92rem;
    border: 1px solid #fecaca;
}

/* ── Form row layout ── */
.sheger-modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.sheger-modal-body .form-group { margin-bottom: 2px; }

/* ── Dynamic repeater rows (Toppings / Removable Ingredients) ── */
.dyn-field { margin-top: 6px; }
.dyn-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.dyn-row { display: flex; align-items: center; gap: 10px; }
.dyn-row .form-control { flex: 1; margin-bottom: 0; }
.dyn-remove-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition);
}
.dyn-remove-btn:hover { background: #fdecec; color: var(--danger); }
.dyn-remove-btn i,
.dyn-remove-btn svg { width: 16px; height: 16px; }
.dyn-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1.5px dashed var(--border);
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition);
}
.dyn-add-btn:hover { border-color: var(--primary); background: #fbeeee; }
.dyn-add-btn i,
.dyn-add-btn svg { width: 16px; height: 16px; stroke: currentColor; }

/* ── Sizing variants ── */
.sheger-modal-box.slim { width: 460px; }
.sheger-modal-box.wide { width: 720px; }

/* ── View modal info grid ── */
.modal-view-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.modal-view-cell {
    background: #f8f8f8;
    border: 1px solid #efefef;
    border-radius: 12px;
    padding: 14px 16px;
}
.modal-view-cell-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b0f16;
    margin-bottom: 5px;
}
.modal-view-cell-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #20252b;
}

/* ── Divider inside modal body ── */
.modal-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #6b0f16;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Scrollbar kill ── */
.sheger-modal-overlay::-webkit-scrollbar,
.sheger-modal-box::-webkit-scrollbar,
.sheger-modal-body::-webkit-scrollbar { display: none; }
.sheger-modal-overlay,
.sheger-modal-box,
.sheger-modal-body { scrollbar-width: none; -ms-overflow-style: none; }

/* ===================================================
   SHEGER AI ASSISTANT WIDGET
   =================================================== */
.sheger-ai-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #6b0f16, #570b11);
    color: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(107, 15, 22,0.3);
    z-index: 9999;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 5px;
}
.sheger-ai-fab:hover { transform: scale(1.05) translateY(-2px); }

.sheger-ai-widget {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background: #f7f8f7;
    border-radius: 0;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sheger-ai-widget.show {
    transform: translateX(0);
}

.sheger-ai-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ai-head-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    padding: 7px;
    border-radius: 8px;
    transition: background 0.2s, border-color 0.2s;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.ai-head-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
}
.ai-head-btn svg { display: block; stroke: white; }

.sheger-ai-subheader {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: #f1f3f1;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sheger-ai-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sheger-ai-body::-webkit-scrollbar { width: 6px; }
.sheger-ai-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }

.ai-msg { display: flex; gap: 12px; align-items: flex-start; }
.ai-msg-avatar {
    width: 28px; height: 28px;
    background: #FDE68A; color: #78350F;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-msg-bubble {
    background: white; border: 1px solid var(--border);
    padding: 14px 16px; border-radius: 12px;
    font-size: 0.9rem; color: var(--text);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    line-height: 1.6; max-width: 85%;
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .ai-msg-avatar { display: none; }
.ai-msg.user .ai-msg-bubble {
    background: var(--primary); color: white; border: none;
    border-bottom-right-radius: 4px;
}
.ai-typing { display: flex; gap: 4px; padding: 6px 4px; }
.ai-typing span { width: 6px; height: 6px; background: #CBD5E1; border-radius: 50%; animation: aiBounce 1.4s infinite ease-in-out both; }
.ai-typing span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes aiBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.sheger-ai-suggestions {
    background: white;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}
.ai-sugg-scroll {
    display: flex; gap: 8px; overflow-x: auto;
    padding-bottom: 8px; scrollbar-width: none;
}
.ai-sugg-scroll::-webkit-scrollbar { display: none; }
.ai-sugg-btn {
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: white;
    font-size: 0.82rem; font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.ai-sugg-btn:hover { border-color: var(--accent); color: var(--primary); }

.sheger-ai-input {
    background: white;
    padding: 12px 20px 20px 20px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.ai-inp-btn {
    width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid var(--border);
    background: white; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
}
.ai-inp-btn:hover { background: #f1f3f1; color: var(--text); }
.ai-inp-field {
    flex: 1; border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    font-size: 0.9rem; font-family: 'Inter', sans-serif;
    outline: none; transition: border-color 0.2s;
}
.ai-inp-field:focus { border-color: var(--accent); }
.ai-send-btn {
    width: 38px; height: 38px;
    border-radius: 10px; border: none;
    background: #6b0f16; color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
    box-shadow: 0 4px 10px rgba(107, 15, 22,0.35);
}
.ai-send-btn:hover { background: #570b11; transform: translateY(-1px); }

/* =============================================
   DARK MODE — global theme toggle
   Toggled via [data-theme="dark"] on <html>
   ============================================= */
[data-theme="dark"] {
    --white: #1e1e1e;
    --background: #121214;
    --surface: #1a1a1d;
    --surface-soft: #232327;
    --card-bg: #1a1a1d;
    --text: #f2f2f3;
    --text-secondary: #a6a6ad;
    --text-muted: #9a9aa1;
    --border: #2c2c31;
    --shadow-sm: 0 4px 15px rgba(0,0,0,0.25);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.4);
}
[data-theme="dark"] body { background-color: var(--background); }
[data-theme="dark"] .sidebar { background-color: #0e0608; }
[data-theme="dark"] .dt-perpage select,
[data-theme="dark"] .panel-reset-btn,
[data-theme="dark"] .notif-dropdown,
[data-theme="dark"] .search-pill { background: var(--surface); color: var(--text); }
[data-theme="dark"] .notif-dropdown::before { background: var(--surface); }
[data-theme="dark"] .notif-header h4 { color: var(--text); }
[data-theme="dark"] .notif-item:hover { background: var(--surface-soft); }
[data-theme="dark"] .icon-btn.icon-edit { background: #2a2a2e; color: #cbd0d8; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    color-scheme: dark;
}
[data-theme="dark"] .ep-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel-card,
[data-theme="dark"] .dt-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .an-panel {
    border: 1px solid var(--border);
}
[data-theme="dark"] img { filter: brightness(0.94); }

/* Theme toggle button (topbar) */
.theme-toggle-btn { position: relative; overflow: hidden; }
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.3s ease;
}
.theme-toggle-btn .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-60deg) scale(0.6); }
[data-theme="dark"] .theme-toggle-btn .icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(60deg) scale(0.6); }
[data-theme="dark"] .theme-toggle-btn .icon-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }

/* =============================================
   ANALYTICS PAGE — metric cards, chart panel,
   top-list, sortable data table
   ============================================= */
.an-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.metric-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    border-left: 3px solid var(--m-color, var(--primary));
    position: relative;
}
.metric-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric-card-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.metric-card-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: color-mix(in srgb, var(--m-color, var(--primary)) 14%, transparent);
    color: var(--m-color, var(--primary));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.metric-card-icon svg, .metric-card-icon i { width: 15px; height: 15px; }
.metric-card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.metric-card-value { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.metric-card-trend { font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.metric-card-trend.up { color: var(--success); }
.metric-card-trend.down { color: var(--danger); }
.metric-card-trend svg { width: 12px; height: 12px; }

.an-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch; }

.an-panel {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 22px;
    display: flex;
    flex-direction: column;
}
.an-panel-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.an-panel-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.an-panel-header { margin-bottom: 18px; }

.an-chart-wrap { position: relative; height: 260px; width: 100%; }
.an-chart-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.an-chart-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.an-chart-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-color, var(--primary)); }
.an-chart-stat { font-size: 0.78rem; color: var(--text-muted); }
.an-chart-stat strong { color: var(--text); font-weight: 800; }
.an-chart-stat .diff { color: var(--success); font-weight: 800; }

.an-toplist { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.an-toplist li { display: grid; grid-template-columns: 108px 1fr 34px; align-items: center; gap: 10px; }
.an-toplist .an-item-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-toplist .an-bar-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--m-color, var(--primary)) 14%, transparent); overflow: hidden; }
.an-toplist .an-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--m-color, var(--primary)), color-mix(in srgb, var(--m-color, var(--primary)) 60%, white 10%)); }
.an-toplist .an-item-val { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-align: right; }

/* Sort toolbar above the engagement table */
.an-sort-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-sort-toolbar .an-sort-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.an-sort-toolbar select {
    border: 1px solid var(--border); border-radius: 9px; padding: 7px 30px 7px 12px;
    font-weight: 700; font-size: 0.8rem; color: var(--text); background: var(--card-bg); cursor: pointer;
}
.an-dir-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
    padding: 7px 13px; border-radius: 9px; font-size: 0.75rem; font-weight: 700; cursor: pointer;
    transition: var(--transition);
}
.an-dir-btn svg { width: 13px; height: 13px; }
.an-dir-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.an-dir-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

/* In-table meter bar (Scroll Depth style column) */
.an-meter { display: flex; align-items: center; gap: 8px; }
.an-meter-track { flex: 1; max-width: 90px; height: 6px; border-radius: 6px; background: var(--border); overflow: hidden; }
.an-meter-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary), var(--danger)); }
.an-meter-val { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); width: 30px; flex-shrink: 0; }

.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sortable .sort-caret { display: inline-block; margin-left: 3px; opacity: 0.4; font-size: 0.65rem; }
.data-table th.sortable.sort-active .sort-caret { opacity: 1; color: var(--primary); }

@media (max-width: 1100px) {
    .an-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .an-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .an-grid-4 { grid-template-columns: 1fr; }
}

/* =============================================
   LOCATION BANNER CARD — decorated version
   (dark maroon "Selected Location" card on Dashboard)
   ============================================= */
.loc-card {
    background:
        radial-gradient(circle at 88% -10%, rgba(217,164,65,0.35) 0%, rgba(217,164,65,0) 42%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: 1px solid rgba(217,164,65,0.25);
    box-shadow: 0 10px 30px rgba(107,15,22,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    isolation: isolate;
}

/* Ethiopian-textile-inspired diamond lattice, very low-opacity, purely decorative */
.loc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(45deg, rgba(217,164,65,0.07) 25%, transparent 25%, transparent 75%, rgba(217,164,65,0.07) 75%),
        linear-gradient(45deg, rgba(217,164,65,0.07) 25%, transparent 25%, transparent 75%, rgba(217,164,65,0.07) 75%);
    background-size: 26px 26px;
    background-position: 0 0, 13px 13px;
    mask-image: linear-gradient(160deg, black 0%, black 35%, transparent 85%);
    -webkit-mask-image: linear-gradient(160deg, black 0%, black 35%, transparent 85%);
}

/* Soft bottom-left glow flourish */
.loc-card::after {
    content: '';
    position: absolute;
    left: -40px; bottom: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,164,65,0.18) 0%, rgba(217,164,65,0) 70%);
    z-index: 0;
}

.loc-card > * { position: relative; z-index: 1; }

.loc-card-icon {
    position: absolute; right: 20px; top: 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(217,164,65,0.3);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 1;
    transition: transform 0.25s ease, background 0.25s ease;
}
.loc-card:hover .loc-card-icon { transform: translateY(-2px) rotate(-4deg); background: rgba(255,255,255,0.16); }
.loc-card-icon i, .loc-card-icon svg { color: var(--accent); width: 22px; height: 22px; display: block; }

.loc-card-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 800; color: var(--accent);
    letter-spacing: 1.2px; margin-bottom: 8px; text-transform: uppercase;
}
.loc-card-eyebrow svg { width: 11px; height: 11px; }

.loc-card-name {
    font-size: 1.85rem; font-weight: 800; margin: 0;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.loc-card-status {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    padding: 4px 10px 4px 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;
    width: fit-content;
}
.loc-card-status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #d9a441;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
    animation: loc-pulse 2s infinite;
}
.loc-card-status span {
    font-size: 0.7rem; font-weight: 800;
    color: rgba(255,255,255,0.9); letter-spacing: 1.2px;
}
@keyframes loc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}