/* =====================================================
   Web_POS — Brand Design System
   Font: IBM Plex Sans Arabic only
   Palette: White + Deep Maroon ONLY (no gold, no mixed fonts)
   ===================================================== */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
}

:root {
    /* Brand palette — Deep Maroon + Maroon accent only */
    --brand: #6B0F1A;
    --brand-dark: #4A0812;
    --brand-light: #8F2A3A;
    --brand-soft: #FBF5F5;
    --brand-outline: #EDE3E3;

    /* Surfaces — Ivory/Gray, not pure white */
    --bg: #F7F5F5;
    --bg-surface: #FDFCFC;
    --bg-muted: #EEECEA;
    --panel: #FFFFFF;

    /* Text */
    --text-main: #1A1A1A;
    --text-muted: #6B6570;
    --text-inverse: #FFFFFF;

    --success: #1F8A4C;
    --danger: #B91C1C;
    --info: #2563EB;

    --border-color: #EEE8E8;
    --border-soft: #F2EDEB;
    --sidebar-width: 260px;
}

html, body, input, button, textarea, select, table, th, td, h1, h2, h3, h4, h5, h6, p, label, a, span, div, strong, small, em, i, b, u, li, ol, ul, blockquote {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

body { font-family: 'IBM Plex Sans Arabic', sans-serif; color: var(--text-main); background: var(--bg); }

::selection { background: rgba(107, 15, 26, .35); color: var(--text-main); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-light); }

/* Brand buttons */
.btn-brand-solid { background: var(--brand) !important; color: #fff !important; border: none !important; border-radius: 8px; padding: 10px 18px; font-weight: 700; }
.btn-brand-solid:hover { background: var(--brand-dark) !important; }
.btn-brand-soft { background: #FFF5F5 !important; color: var(--brand) !important; border: 1px solid #EFE0E0 !important; border-radius: 8px; padding: 10px 18px; font-weight: 700; }
.btn-brand-soft:hover { background: #FCEAEA !important; }

/* Bootstrap primary → maroon */
.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: #BDAFB1;
    --bs-btn-disabled-border-color: #BDAFB1;
    background-image: none !important;
    border: none !important;
    font-weight: 700;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-color: #FFFFFF;
    font-weight: 700;
}

/* Nav tabs — maroon active */
.nav-tabs .nav-link, .nav.nav-tabs .nav-link { color: var(--text-muted); font-weight: 700; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.nav-tabs .nav-link.active, .nav.nav-tabs .nav-link.active {
    color: var(--text-inverse) !important;
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Sidebar active */
.sidebar a.active { background: var(--brand) !important; color: var(--text-inverse) !important; }
.sidebar a:not(.active):hover { background: var(--brand-soft) !important; color: var(--brand) !important; }

/* Form focus — maroon ring */
.form-control:focus, .form-select:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(107, 15, 26, .18) !important; font-family: 'IBM Plex Sans Arabic', sans-serif !important; }
.form-check-input:checked { background-color: var(--brand) !important; border-color: var(--brand) !important; }

/* Utility */
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff !important; }
.bg-brand-soft { background: var(--brand-soft) !important; }
.border-brand { border-color: var(--brand) !important; }
.card-header-brand { background: var(--brand); color: #fff; padding: 14px 18px; font-weight: 800; border-radius: 14px 14px 0 0; border-bottom: 3px solid var(--brand-dark); }
.badge.bg-brand { background: var(--brand) !important; color: #fff !important; }
.badge.bg-brand-soft { background: var(--brand-soft) !important; color: var(--brand) !important; }

/* Legacy mappings */
:root {
    --mind-maroon: var(--brand);
    --mind-gold: var(--brand);
    --brand-soft: var(--brand-soft);
}
.mind-gold, .text-mind-gold { color: var(--brand) !important; }
.bg-mind-gold { background-color: var(--brand-soft) !important; }

/* 🛡️ مفاتيح تحديد صلاحيات التابات — تصحيح العرض داخل المودال */
.upm-toggle.form-check-input {
    width: 2.6em !important;
    height: 1.4em !important;
    margin: 2px 0 0 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
    cursor: pointer;
    background-color: #e9ecef;
}
.upm-toggle.form-check-input:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}
#user-permissions-modal .form-check.form-switch {
    min-width: 44px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

/* ================= 📊 لوحة التحكم — ستايل الداشبورد الحقيقية ================= */
.dash-shell {
    background: #fff; border: 1px solid #F0E5E6; border-radius: 22px;
    box-shadow: 0 18px 45px rgba(44, 6, 12, .10); overflow: hidden;
}
.dash-top {
    display: flex; align-items: center; gap: 10px; padding: 10px 15px;
    background: #FBF8F8; border-bottom: 1px solid #F1E8E8;
}
.dash-dots { display: flex; gap: 5px; }
.dash-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; background: #DDD3D4; }
.dash-dots i:nth-child(1) { background: #E2A3AC; }
.dash-dots i:nth-child(2) { background: #D9BBA0; }
.dash-dots i:nth-child(3) { background: #C9D6C5; }
.dash-url {
    flex: 1; background: #fff; border: 1px solid #F1E8E8; border-radius: 8px;
    font-size: 11px; color: #9C9195; padding: 3px 10px; direction: ltr; text-align: left;
}
.dash-live {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    color: #1B7A44; background: #EAF7EF; border: 1px solid #DCEFE3; border-radius: 999px; padding: 3px 10px;
}
.dash-live small { color: #6B7C70; font-weight: 600; }
.dash-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #1B7A44; animation: dashPulse 1.6s infinite; }
@keyframes dashPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.dash-body { padding: 14px; background: linear-gradient(180deg, #fff, #FDFBFB); }
.dash-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: #F7F2F2; padding: 4px; border-radius: 11px; }
.dash-tab {
    flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 8px 4px;
    font-size: 12px; font-weight: 700; color: #7C7175; cursor: pointer; transition: all .2s ease;
}
.dash-tab:hover { color: #6B0F1A; }
.dash-tab.active { background: #fff; color: #6B0F1A; box-shadow: 0 4px 12px rgba(74, 8, 18, .10); }
.dash-panel { display: none; animation: dashFade .35s ease; }
.dash-panel.active { display: block; }
@keyframes dashFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.dash-stat { background: #FAF6F6; border: 1px solid #F2E9E9; border-radius: 11px; padding: 10px 12px; }
.dash-stat span { display: block; font-size: 10.5px; font-weight: 600; color: #94888C; margin-bottom: 3px; }
.dash-stat b { font-size: 19px; color: #6B0F1A; font-weight: 700; }
.dash-stat b small { font-size: 10px; color: #9C8F93; font-weight: 600; }
.dash-chart {
    display: flex; align-items: flex-end; gap: 7px; height: 92px; background: #FCFAFA;
    border: 1px solid #F3EBEB; border-radius: 11px; padding: 10px 12px 8px; margin-bottom: 10px;
}
.dash-chart i {
    flex: 1; background: linear-gradient(180deg, #A94456, #6B0F1A); border-radius: 4px 4px 2px 2px;
    opacity: .9; transform-origin: bottom; animation: dashBar .7s ease both;
}
.dash-chart i:nth-child(2n) { opacity: .55; }
@keyframes dashBar { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.dash-last {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff;
    border: 1px solid #F1E8E8; border-radius: 10px; padding: 8px 12px; font-size: 11px;
}
.dash-last span { color: #8A7F83; }
.dash-last b { color: #6B0F1A; direction: ltr; font-size: 11px; }
.dash-badge-ok { background: #EAF7EF; color: #1B7A44 !important; border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 700; }
.dash-tables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dash-table { border-radius: 10px; padding: 9px 4px; text-align: center; font-size: 10.5px; font-weight: 700; border: 1px solid transparent; }
.dash-table b { display: block; font-size: 15px; margin-bottom: 1px; }
.dash-table.free { background: #F2F8F4; color: #1B7A44; border-color: #DCEFE3; }
.dash-table.occ { background: #FBF0F1; color: #6B0F1A; border-color: #F0DEE0; }
.dash-table.res { background: #F6F3FA; color: #6B4E8A; border-color: #E9E1F1; }
.dash-table.clean { background: #F7F4EE; color: #8A6A2F; border-color: #EFE5D4; }
.dash-note { margin-top: 10px; font-size: 10.5px; color: #918589; display: flex; align-items: center; gap: 6px; }
.dash-queue { display: grid; gap: 7px; }
.dash-order {
    display: flex; align-items: center; justify-content: space-between; background: #fff;
    border: 1px solid #F1E8E8; border-radius: 10px; padding: 8px 11px; font-size: 11.5px;
}
.dash-order b { color: #3A3236; font-weight: 700; }
.dash-order-badge { font-style: normal; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.dash-menu { display: flex; gap: 14px; align-items: center; }
.dash-qr { width: 92px; height: 92px; border-radius: 12px; flex-shrink: 0; border: 1px solid #F0E5E6; object-fit: cover; background: #fff; }
.dash-qr-empty { display: flex; align-items: center; justify-content: center; font-size: 34px; color: #6B0F1A; background: #FAF6F6; }
.dash-menu-info { flex: 1; }
.dash-menu-info b { display: block; font-size: 13px; color: #6B0F1A; margin-bottom: 3px; }
.dash-menu-info span { display: block; font-size: 11px; color: #8A7F83; }
.dash-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10px; font-weight: 700; color: #6B0F1A; background: #F7ECEE; border-radius: 6px; padding: 3px 8px; direction: ltr; }
.dash-empty { text-align: center; padding: 18px 8px; color: #A2969A; font-size: 12px; font-weight: 600; }
.dash-empty i { display: block; font-size: 26px; margin-bottom: 6px; opacity: .55; }
.dash-card { border-radius: 16px !important; }
.dash-notifs { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.dash-notif { display: flex; gap: 10px; align-items: flex-start; background: #FCFAFA; border: 1px solid #F3EBEB; border-radius: 11px; padding: 9px 12px; }
.dash-notif-ico { width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid #F1E8E8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-recents { display: grid; gap: 6px; }
.dash-recent-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #FCFAFA;
    border: 1px solid #F3EBEB; border-radius: 9px; padding: 7px 10px; font-size: 11.5px; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.dash-recent-row:hover { background: #fff; border-color: #E9D6D9; }
.dash-recent-no { direction: ltr; font-weight: 700; color: #3A3236; font-size: 11px; }
.dash-qa {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: #FCFAFA; border: 1px solid #F3EBEB; border-radius: 13px; padding: 14px 8px;
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-align: center; height: 100%;
}
.dash-qa:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74, 8, 18, .10); border-color: #E9D6D9; background: #fff; }
.dash-qa-ico { font-size: 21px; }
.dash-qa-title { font-size: 11.5px; font-weight: 700; color: #3A3236; }
@media (max-width: 575px) {
    .dash-stat b { font-size: 16px; }
    .dash-chart { height: 74px; }
    .dash-tab { font-size: 11px; padding: 7px 2px; }
    .dash-menu { gap: 10px; }
    .dash-qr { width: 74px; height: 74px; }
}
.dash-qr canvas, .dash-qr img { width: 100% !important; height: 100% !important; border-radius: 12px; display: block; }