/* design.css — الهوية البصرية الموحدة لكل صفحات البرنامج
 *
 * يُحمَّل بعد تنسيق كل صفحة فيتغلب عليه. كل شيء داخل @media screen
 * حتى لا يتأثر شكل الفواتير والتقارير عند الطباعة.
 * لتغيير الألوان عدّل المتغيرات في أول الملف فقط.
 */

/* ===== الألوان: الوضع الفاتح ===== */
:root {
    --bg: #f6f6f7;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --surface-3: #eaecef;
    --border: #e7e8eb;
    --border-strong: #d5d8dd;
    --text: #0e1116;
    --text-2: #3a404a;
    --muted: #6b7280;
    --faint: #9aa0aa;

    --primary: #111318;
    --primary-hover: #262a31;
    --primary-text: #ffffff;

    --accent: #0c8a63;
    --accent-soft: #e6f4ee;
    --accent-text: #0a6d4f;
    --danger: #d4342a;
    --danger-soft: #fdecea;
    --danger-text: #b42318;
    --warn: #b7700a;
    --warn-soft: #fdf3e1;
    --warn-text: #93570a;
    --info: #2f5fd0;
    --info-soft: #ebf0fd;
    --info-text: #2449a8;

    --hero-bg: #111318;
    --hero-text: #ffffff;
    --hero-muted: rgba(255, 255, 255, .62);

    --ring: rgba(12, 138, 99, .22);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -12px rgba(16, 24, 40, .12);
    --shadow-lg: 0 24px 60px -16px rgba(16, 24, 40, .28);

    --radius: 14px;
    --radius-sm: 10px;
    --sidebar: 256px;
    --gutter: 36px;
    --font-ui: "IBM Plex Sans Arabic", -apple-system, "SF Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

    /* الحركة: كل المدد ومنحنيات التسارع من هنا */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 280ms;
    --dur-4: 560ms;
}

/* ===== الألوان: الوضع الداكن ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0c0e;
    --surface: #131518;
    --surface-2: #1a1d21;
    --surface-3: #23272c;
    --border: #23262b;
    --border-strong: #31353c;
    --text: #eef0f2;
    --text-2: #c6cad1;
    --muted: #8b919b;
    --faint: #626872;

    --primary: #f1f2f4;
    --primary-hover: #ffffff;
    --primary-text: #0b0c0e;

    --accent: #3ccf98;
    --accent-soft: rgba(60, 207, 152, .12);
    --accent-text: #5fe0ae;
    --danger: #f2706a;
    --danger-soft: rgba(242, 112, 106, .13);
    --danger-text: #f79a95;
    --warn: #f0b44c;
    --warn-soft: rgba(240, 180, 76, .13);
    --warn-text: #f5c879;
    --info: #7ea3ff;
    --info-soft: rgba(126, 163, 255, .13);
    --info-text: #a5bfff;

    --hero-bg: linear-gradient(160deg, #1d2a24 0%, #15191b 70%);
    --hero-text: #f1f2f4;
    --hero-muted: rgba(241, 242, 244, .6);

    --ring: rgba(60, 207, 152, .25);
    --shadow-sm: none;
    --shadow-md: 0 1px 0 rgba(255, 255, 255, .02) inset;
    --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);
}

@media screen {
    /* متغيرات الصفحات القديمة تتبع الهوية الجديدة */
    :root,
    html[data-theme="dark"] {
        --page: var(--bg);
        --panel: var(--surface);
        --olive: var(--primary);
        --olive-dark: var(--text);
        --ink: var(--text);
        --line: var(--border);
        --red: var(--danger);
        --green: var(--accent);
        --font: var(--font-ui);
    }

    /* ===== الأساس ===== */
    html,
    body {
        background: var(--bg) !important;
    }

    body {
        color: var(--text);
        font-family: var(--font-ui) !important;
        font-size: 15px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body,
    button,
    input,
    select,
    textarea {
        font-family: var(--font-ui) !important;
    }

    ::selection {
        background: var(--accent-soft);
        color: var(--text);
    }

    a {
        color: inherit;
    }

    a[data-href] {
        cursor: pointer;
    }

    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* ===== القائمة الجانبية ===== */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        left: auto;
        width: var(--sidebar) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 20px 14px 16px !important;
        border-radius: 0 !important;
        background: var(--surface) !important;
        border-inline-end: 1px solid var(--border);
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px;
        overflow-y: auto;
        z-index: 50;
    }

    html[dir="rtl"] .sidebar {
        right: 0 !important;
        left: auto !important;
    }

    html[dir="ltr"] .sidebar {
        left: 0 !important;
        right: auto !important;
    }

    .side-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 8px 20px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
        text-decoration: none;
    }

    .side-brand .logo {
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--primary);
        color: var(--primary-text);
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 17px;
        overflow: hidden;
    }

    .side-brand .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .side-brand .name {
        display: grid;
        min-width: 0;
        font-weight: 700;
        font-size: 15px;
        color: var(--text);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .side-brand .sub {
        display: block;
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
    }

    .sidebar nav,
    .sidebar nav.bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }

    .sidebar nav.bottom {
        margin-top: auto !important;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .sidebar nav a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 9px 12px !important;
        border-radius: var(--radius-sm) !important;
        color: var(--text-2) !important;
        background: transparent !important;
        font-size: 14.5px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        text-decoration: none;
        transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
    }

    .sidebar nav a svg {
        flex: none;
        width: 19px;
        height: 19px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        color: var(--muted);
        transition: color var(--dur-2) var(--ease);
    }

    .sidebar nav a:hover {
        background: var(--surface-2) !important;
        color: var(--text) !important;
    }

    .sidebar nav a.active {
        background: var(--surface-2) !important;
        color: var(--text) !important;
        font-weight: 600 !important;
    }

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

    /* صندوق المستخدم أسفل القائمة */
    #userBox {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px !important;
        padding: 10px !important;
        border-radius: 12px !important;
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        box-shadow: none !important;
        color: var(--text) !important;
    }

    /* الضغط على الاسم يفتح "حسابي" في الإعدادات */
    #userBox .who-link {
        display: flex !important;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        margin: -4px;
        padding: 4px !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
        transition: background var(--dur-2) var(--ease);
    }

    #userBox .who-link:hover {
        background: var(--surface-3) !important;
    }

    #userBox .avatar {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--accent-soft);
        color: var(--accent-text);
        font-weight: 700;
        font-size: 14px;
    }

    #userBox .avatar.has-logo {
        background: var(--surface);
        border: 1px solid var(--border);
        overflow: hidden;
    }

    #userBox .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #userBox .who {
        flex: 1;
        min-width: 0;
        line-height: 1.3;
    }

    #userBox .who b {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #userBox .who small {
        font-size: 12px;
        color: var(--muted);
    }

    #logoutBtn {
        flex: none;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: var(--muted) !important;
        cursor: pointer;
        padding: 0 !important;
        transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
    }

    #logoutBtn:hover {
        background: var(--danger-soft) !important;
        color: var(--danger) !important;
    }

    #logoutBtn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html[dir="rtl"] #logoutBtn svg {
        transform: scaleX(-1);
    }

    /* ===== الشريط العلوي وعنوان الصفحة ===== */
    body:not(.standalone) > header,
    .topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        margin-inline-start: var(--sidebar) !important;
        padding: 30px var(--gutter) 6px !important;
        background: transparent !important;
    }

    body:not(.standalone) > header h1,
    .topbar h1 {
        margin: 0 !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        letter-spacing: -.01em;
        line-height: 1.3 !important;
        color: var(--text) !important;
    }

    /* اسم المتجر صار في أعلى القائمة الجانبية */
    body > header .brand,
    .topbar .brand {
        display: none !important;
    }

    /* زر إخفاء القائمة */
    .nav-toggle {
        top: 30px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        background: var(--surface) !important;
        color: var(--text-2) !important;
        border: 1px solid var(--border) !important;
        box-shadow: var(--shadow-sm) !important;
        font-size: 17px !important;
        inset-inline-end: var(--gutter);
        left: auto;
        right: auto;
    }

    html[dir="rtl"] .nav-toggle {
        left: var(--gutter) !important;
        right: auto !important;
    }

    html[dir="ltr"] .nav-toggle {
        right: var(--gutter) !important;
        left: auto !important;
    }

    /* ===== المحتوى ===== */
    body:not(.standalone) > main {
        margin: 18px var(--gutter) 48px !important;
        margin-inline-start: calc(var(--sidebar) + var(--gutter)) !important;
        padding: 0 !important;
        max-width: none !important;
    }

    h2 {
        letter-spacing: -.005em;
    }

    /* ===== البطاقات ===== */
    .card,
    .table-card,
    .form-card,
    .report,
    .logo-box {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .card,
    .report,
    .form-card {
        padding: 22px !important;
    }

    .card h2,
    .report h2,
    .cart h2 {
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
    }

    .card-title {
        background: transparent !important;
        color: var(--text) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        padding: 0 0 16px !important;
        margin: 0 0 18px !important;
        border-bottom: 1px solid var(--border);
        border-radius: 0 !important;
        text-align: start !important;
    }

    .card-head,
    .report-head {
        margin-bottom: 14px !important;
    }

    .card-head a {
        color: var(--muted) !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
    }

    .card-head a:hover {
        color: var(--text) !important;
        text-decoration: none !important;
    }

    /* ===== بطاقات الأرقام ===== */
    .summary,
    .stats {
        gap: 16px !important;
    }

    .summary-card,
    .stat {
        position: relative;
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        min-height: 118px !important;
        padding: 18px 20px !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: var(--shadow-sm) !important;
        overflow: hidden;
    }

    .summary-card .label,
    .stat .label {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--muted) !important;
        opacity: 1 !important;
    }

    .summary-card .value,
    .stat .value {
        font-size: clamp(20px, 1.75vw, 26px) !important;
        font-weight: 700 !important;
        letter-spacing: -.02em;
        white-space: nowrap;
        line-height: 1.2 !important;
        color: var(--text) !important;
        font-variant-numeric: tabular-nums;
    }

    .summary-card .sub,
    .stat .note {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: var(--muted) !important;
        opacity: 1 !important;
    }

    .summary-card.main,
    .stat.hero {
        background: var(--hero-bg) !important;
        border-color: transparent !important;
        color: var(--hero-text) !important;
    }

    .summary-card.main .label,
    .summary-card.main .sub,
    .stat.hero .label,
    .stat.hero .note {
        color: var(--hero-muted) !important;
    }

    .summary-card.main .value,
    .stat.hero .value {
        color: var(--hero-text) !important;
    }

    .summary-card.warn .value {
        color: var(--danger) !important;
    }

    .summary-card.warn::before {
        content: "";
        position: absolute;
        inset-block-start: 20px;
        inset-inline-end: 20px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--danger);
        box-shadow: 0 0 0 4px var(--danger-soft);
    }

    /* ===== شريط الأدوات ===== */
    .toolbar {
        gap: 10px !important;
        align-items: center !important;
    }

    /* ===== الحقول ===== */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
    select,
    textarea,
    .input,
    .search,
    .select,
    .date-input {
        background: var(--surface) !important;
        color: var(--text) !important;
        -webkit-text-fill-color: var(--text);
        border: 1px solid var(--border-strong) !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: none !important;
        font-size: 14.5px !important;
        transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
    select,
    .search,
    .select,
    .date-input {
        min-height: 42px;
        padding-inline: 12px !important;
    }

    textarea {
        padding: 10px 12px !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--faint) !important;
        -webkit-text-fill-color: var(--faint);
        opacity: 1;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
    select:hover,
    textarea:hover {
        border-color: var(--faint) !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
    select:focus,
    textarea:focus {
        outline: none !important;
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 4px var(--ring) !important;
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
        background: var(--surface-2) !important;
        color: var(--muted) !important;
        cursor: not-allowed;
    }

    input[type="checkbox"],
    input[type="radio"] {
        accent-color: var(--accent);
    }

    label {
        color: var(--text-2);
    }

    /* ===== الأزرار ===== */
    .btn,
    .button,
    .add-button,
    .add-row,
    .export-btn,
    .mini-btn,
    .link-sales,
    .view-link,
    .danger-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 16px !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid transparent !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        text-decoration: none !important;
        cursor: pointer;
        box-shadow: none !important;
        transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
    }

    .btn:active,
    .button:active,
    .add-button:active,
    .chip:active,
    .qbtn:active {
        transform: scale(.97);
    }

    .btn[hidden],
    .button[hidden] {
        display: none !important;
    }

    /* رئيسي */
    .btn,
    .btn.red,
    .btn.pay,
    .btn.start,
    .btn.olive,
    .button,
    .add-button,
    .export-btn,
    .link-sales {
        background: var(--primary) !important;
        color: var(--primary-text) !important;
    }

    .btn:hover,
    .btn.red:hover,
    .btn.pay:hover,
    .btn.start:hover,
    .btn.olive:hover,
    .button:hover,
    .add-button:hover,
    .export-btn:hover,
    .link-sales:hover {
        background: var(--primary-hover) !important;
    }

    /* ثانوي */
    .btn.secondary,
    .btn.view,
    .btn.ok,
    .btn.more,
    .btn.small,
    .btn.remove,
    .button.more,
    .button.cancel,
    .button.print,
    .add-row,
    .mini-btn,
    .view-link {
        background: var(--surface) !important;
        color: var(--text) !important;
        border-color: var(--border-strong) !important;
    }

    .btn.secondary:hover,
    .btn.view:hover,
    .btn.ok:hover,
    .btn.more:hover,
    .btn.small:hover,
    .btn.remove:hover,
    .button.more:hover,
    .button.cancel:hover,
    .button.print:hover,
    .add-row:hover,
    .mini-btn:hover,
    .view-link:hover {
        background: var(--surface-2) !important;
        color: var(--text) !important;
    }

    /* خطر */
    .btn.danger,
    .btn.cancel,
    .button.delete,
    .danger-link {
        background: var(--danger-soft) !important;
        color: var(--danger-text) !important;
        border-color: transparent !important;
    }

    .btn.danger:hover,
    .btn.cancel:hover,
    .button.delete:hover,
    .danger-link:hover {
        background: var(--danger) !important;
        color: #fff !important;
    }

    .btn:disabled,
    .button:disabled {
        opacity: .45 !important;
        cursor: not-allowed !important;
        transform: none !important;
    }

    /* أزرار صغيرة داخل الجداول */
    td .btn,
    td .view-link,
    td .danger-link,
    .actions .btn {
        min-height: 32px;
        padding: 0 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .mini-btn {
        min-height: 30px;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        border-radius: 8px !important;
    }

    .remove-row,
    .rm {
        background: transparent !important;
        color: var(--muted) !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        cursor: pointer;
        box-shadow: none !important;
        transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
    }

    .remove-row:hover,
    .rm:hover {
        background: var(--danger-soft) !important;
        color: var(--danger) !important;
    }

    /* ===== أزرار الفلترة ===== */
    .chips {
        gap: 6px !important;
    }

    .chip {
        min-height: 34px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: var(--surface) !important;
        color: var(--text-2) !important;
        border: 1px solid var(--border) !important;
        box-shadow: none !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        cursor: pointer;
        transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    }

    .chip:hover {
        border-color: var(--border-strong) !important;
        color: var(--text) !important;
    }

    .chip[aria-pressed="true"] {
        background: var(--primary) !important;
        color: var(--primary-text) !important;
        border-color: var(--primary) !important;
    }

    /* ===== الجداول ===== */
    .table-wrap,
    .items-wrap {
        border-radius: 0 !important;
        background: transparent !important;
    }

    table {
        background: transparent !important;
        border-collapse: collapse !important;
        font-variant-numeric: tabular-nums;
    }

    thead th,
    table th {
        background: var(--surface) !important;
        color: var(--muted) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        padding: 11px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
        text-align: start !important;
        vertical-align: bottom;
    }

    tbody td,
    table td {
        color: var(--text) !important;
        font-size: 14px !important;
        padding: 12px 8px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        background: transparent;
        text-align: start !important;
        vertical-align: middle;
    }

    tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    tbody tr {
        transition: background var(--dur-1) var(--ease);
    }

    tbody tr:hover {
        background: var(--surface-2) !important;
    }

    td.empty,
    .empty,
    .empty-note {
        color: var(--muted) !important;
        font-weight: 500 !important;
    }

    .table-meta,
    .meta-line {
        color: var(--muted) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* ===== الشارات (الحالة ونوع الدفع) ===== */
    .pay:not(.btn),
    .status,
    .type,
    .badge,
    .role {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        background: var(--surface-2) !important;
        color: var(--text-2) !important;
        border: 0 !important;
        white-space: nowrap;
    }

    .pay:not(.btn)::before,
    .status::before,
    .type::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: .9;
    }

    .pay.cash:not(.btn),
    .status.closed,
    .type,
    .badge.sale,
    .role.admin {
        background: var(--accent-soft) !important;
        color: var(--accent-text) !important;
    }

    .pay.debt:not(.btn),
    .status.out,
    .status.unpaid,
    .type.out,
    .badge.delete {
        background: var(--danger-soft) !important;
        color: var(--danger-text) !important;
    }

    .status.low,
    .status.partial,
    .badge.stock {
        background: var(--warn-soft) !important;
        color: var(--warn-text) !important;
    }

    .pay.card:not(.btn),
    .type.manual,
    .badge.settings {
        background: var(--info-soft) !important;
        color: var(--info-text) !important;
    }

    /* ===== النوافذ المنبثقة ===== */
    dialog {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: 18px !important;
        box-shadow: var(--shadow-lg) !important;
        padding: 26px !important;
    }

    dialog::backdrop {
        background: rgba(10, 12, 16, .45) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    dialog h2 {
        margin-top: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--text) !important;
    }

    /* نافذة الكاميرا */
    dialog#baOverlay {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .ba-box {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border);
    }

    .ba-close,
    .ba-cam-btn {
        background: var(--primary) !important;
        color: var(--primary-text) !important;
        font-family: var(--font-ui) !important;
        border-radius: var(--radius-sm) !important;
    }

    .ba-cam-btn {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border-strong) !important;
        min-height: 42px !important;
    }

    /* ===== الرسائل ===== */
    .error,
    #notice.error,
    .notice.err,
    .msg.err,
    .flash.err {
        color: var(--danger-text) !important;
    }

    .hint,
    .stock-hint {
        color: var(--muted) !important;
    }

    .flash,
    #notice,
    .notice,
    .status-bar,
    .msg {
        border-radius: var(--radius-sm) !important;
    }

    .flash.ok,
    .msg.ok {
        background: var(--accent-soft) !important;
        color: var(--accent-text) !important;
    }

    .flash.err,
    .msg.err {
        background: var(--danger-soft) !important;
    }

    /* ===== تنبيهات الصفحة الرئيسية ===== */
    .alert {
        background: var(--surface-2) !important;
        color: var(--text) !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        font-weight: 500 !important;
        transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
    }

    a.alert:hover {
        background: var(--surface) !important;
        border-color: var(--border-strong) !important;
    }

    .alert .count {
        background: var(--danger-soft) !important;
        color: var(--danger-text) !important;
    }

    /* مستوى التنبيه: خط جانبي ولون العدد */
    .alert.lv-danger { border-inline-start: 4px solid var(--danger) !important; }
    .alert.lv-warn { border-inline-start: 4px solid var(--warn) !important; }
    .alert.lv-info { border-inline-start: 4px solid var(--accent) !important; }
    .alert.lv-warn .count {
        background: var(--warn-soft) !important;
        color: var(--warn-text) !important;
    }
    .alert.lv-info .count {
        background: var(--accent-soft) !important;
        color: var(--accent-text) !important;
    }
    .alert .txt small { color: var(--muted) !important; }

    .alert.ok {
        background: var(--accent-soft) !important;
        color: var(--accent-text) !important;
    }

    /* ===== إضافات للصفحات ===== */
    .table-wrap,
    .items-wrap {
        overflow-x: auto;
    }

    .actions {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }

    /* عناوين الحقول في النماذج */
    .field,
    .grid-form label,
    .dlg-form label,
    .pay-form label,
    main form > label,
    .card label {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        color: var(--text-2) !important;
        gap: 7px !important;
    }

    .items-section h2,
    .items-toolbar h2,
    .items-head h3,
    .history h3 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
    }

    .totals {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--text-2) !important;
    }

    .totals .grand,
    div.total {
        background: var(--surface-2) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-sm) !important;
        padding: 8px 16px !important;
        font-weight: 700 !important;
    }

    /* الكاشير */
    .prod {
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: none !important;
        color: var(--text) !important;
        transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease) !important;
    }

    .prod:hover {
        border-color: var(--border-strong) !important;
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-1px);
    }

    .prod .price {
        color: var(--text) !important;
    }

    .prod-img {
        background: var(--surface-2) !important;
        border-radius: var(--radius-sm) !important;
    }

    .cat-title {
        color: var(--text) !important;
        border-color: var(--border) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .cat-title span,
    .meta,
    .line .cat {
        color: var(--muted) !important;
    }

    .line {
        background: var(--surface-2) !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    .qbtn {
        background: var(--surface) !important;
        color: var(--text) !important;
        border: 1px solid var(--border-strong) !important;
        border-radius: 8px !important;
        cursor: pointer;
    }

    .status-bar,
    .notice,
    .idle-box {
        background: var(--surface-2) !important;
        color: var(--text-2) !important;
        border: 0 !important;
    }

    .inv-head {
        border-color: var(--border) !important;
    }

    /* سطر واحد للأرقام والتواريخ في الجداول */
    td.amount,
    td.total,
    td.value,
    td.qty,
    td.barcode,
    td.num,
    td.remaining,
    td.in,
    td.out,
    td.price {
        white-space: nowrap;
        font-weight: 600 !important;
    }

    td.barcode {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--muted) !important;
        letter-spacing: .02em;
    }

    td.in {
        color: var(--accent-text) !important;
    }

    td.out,
    td.neg,
    td.qty.out {
        color: var(--danger-text) !important;
    }

    td.qty.low {
        color: var(--warn-text) !important;
    }

    .name-cell {
        white-space: normal !important;
        min-width: 140px;
    }

    .actions .btn {
        padding: 0 9px !important;
        font-size: 12.5px !important;
    }

    .thumb {
        border-radius: 10px !important;
        border: 1px solid var(--border) !important;
        background: var(--surface-2) !important;
        box-shadow: none !important;
    }

    .table-wrap > table {
        min-width: 0 !important;
    }

    /* أشرطة التقارير */
    .bar-row .bar {
        height: 8px !important;
        background: var(--surface-3) !important;
        border-radius: 999px !important;
    }

    .bar-row .bar > span {
        background: var(--accent) !important;
        border-radius: 999px !important;
    }

    .bar-row {
        font-weight: 500 !important;
        color: var(--text-2);
    }

    /* اختيار ملف */
    input[type="file"] {
        font-size: 13.5px;
        color: var(--muted);
    }

    input[type="file"]::file-selector-button {
        margin-inline-end: 12px;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text);
        font: 600 13.5px var(--font-ui);
        cursor: pointer;
    }

    input[type="file"]::file-selector-button:hover {
        background: var(--surface-2);
    }

    .divider {
        border-color: var(--border) !important;
        background: var(--border) !important;
    }

    /* الكاشير: صف البحث لا ينضغط */
    /* النماذج داخل النوافذ لا تتجاوز عرضها */
    dialog {
        box-sizing: border-box;
        max-width: calc(100vw - 32px) !important;
    }

    .dlg-form > *,
    .grid-form > *,
    .pay-form > *,
    .dlg-form label > *,
    .grid-form label > * {
        min-width: 0;
    }

    .img-buttons,
    .img-tools,
    .dlg-actions,
    .btn-row,
    .pay-actions,
    .form-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ===== الهاتف والشاشات الصغيرة ===== */
    @media (max-width: 1100px) {
        :root {
            --gutter: 24px;
        }
    }

    @media (max-width: 650px) {
        :root {
            --gutter: 16px;
        }

        /* شبكة أمان: لا يتسع أي عنصر أعرض من الشاشة فيصغّر الهاتف الصفحة كلها */
        html,
        body {
            overflow-x: clip;
        }

        img,
        video,
        canvas {
            max-width: 100%;
        }

        /* جداول العرض: كل سطر بطاقة (layout.js يضع عنوان العمود لكل خانة) */
        table.stacked {
            min-width: 0 !important;
            width: 100% !important;
            border: 0 !important;
            background: transparent !important;
        }

        table.stacked thead {
            display: none !important;
        }

        table.stacked,
        table.stacked tbody {
            display: block !important;
        }

        table.stacked tr {
            display: block !important;
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 14px !important;
            padding: 8px 12px !important;
            margin: 0 0 10px !important;
            box-shadow: none !important;
        }

        table.stacked td {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            flex-wrap: wrap;
            gap: 4px 12px !important;
            width: auto !important;
            min-width: 0 !important;
            padding: 6px 0 !important;
            border: 0 !important;
            text-align: end !important;
            white-space: normal !important;
            overflow-wrap: anywhere;
            background: transparent !important;
        }

        table.stacked td + td {
            border-top: 1px dashed var(--border) !important;
        }

        table.stacked td::before {
            content: attr(data-label);
            flex: 0 1 auto;
            max-width: 42%;
            color: var(--muted);
            font-size: 13px;
            font-weight: 500;
            font-family: var(--font, inherit);
            letter-spacing: normal;
            text-align: start;
        }

        table.stacked td.blank {
            display: none !important;
        }

        table.stacked td + td.blank + td,
        table.stacked tr > td:not(.blank):first-of-type {
            border-top: 0 !important;
        }

        table.stacked td[data-label=""]::before,
        table.stacked td.wide::before {
            display: none;
        }

        table.stacked td.wide,
        table.stacked td[data-label=""] {
            justify-content: center !important;
            text-align: center !important;
        }

        /* جدول إدخال: الخانة تأخذ باقي عرض السطر */
        table.stacked td > input,
        table.stacked td > select,
        table.stacked td > textarea,
        table.stacked td > .ba-inline {
            flex: 1 1 0 !important;
            min-width: 0 !important;
            width: auto !important;
            max-width: none !important;
        }

        table.stack-form td {
            padding: 5px 0 !important;
        }

                /* أزرار الإجراءات تلتف داخل البطاقة */
        table.stacked td .actions,
        table.stacked td .dev-actions,
        table.stacked td .row-actions {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-end !important;
            gap: 6px !important;
        }

        /* جدول داخل حاوية تمرير أفقي: لم يعد يحتاجها */
        .table-wrap:has(> table.stacked),
        .items-wrap:has(> table.stacked) {
            overflow: visible !important;
            max-height: none !important;
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
        }

        body:not(.standalone) > header,
        .topbar {
            margin-inline-start: 0 !important;
            padding: 20px var(--gutter) 4px !important;
            padding-inline-end: 64px !important;
        }

        html[dir="ltr"] body:not(.standalone) > header,
        html[dir="ltr"] .topbar {
            padding-inline-end: 64px !important;
        }

        body:not(.standalone) > header h1,
        .topbar h1 {
            font-size: 22px !important;
        }

        body:not(.standalone) > main {
            margin: 12px var(--gutter) 32px !important;
        }

        .nav-toggle {
            top: 18px !important;
        }

        .sidebar {
            width: min(84vw, 300px) !important;
            box-shadow: var(--shadow-lg) !important;
            border-radius: 0 !important;
        }

        html[dir="rtl"] .sidebar {
            transform: translateX(105%);
        }

        html[dir="ltr"] .sidebar {
            transform: translateX(-105%);
        }

        body.nav-open .sidebar {
            transform: none !important;
        }

        /* صندوق المستخدم وزر الخروج يبقيان ظاهرين أسفل القائمة دائمًا، حتى لو كانت القائمة أطول من الشاشة */
        .sidebar {
            height: 100dvh !important;
            padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        }

        #userBox {
            position: sticky;
            bottom: 0;
            z-index: 2;
            flex: none;
            margin-top: auto !important;
            box-shadow: 0 -10px 18px var(--surface) !important;
        }

        .summary-card,
        .stat {
            min-height: 0 !important;
            padding: 14px 16px !important;
        }

        .summary-card .value,
        .stat .value {
            font-size: 20px !important;
        }

        .card,
        .report,
        .form-card {
            padding: 16px !important;
        }
    }
}

/* ===================================================================
 * الحركة والتأثيرات
 * ناعمة وقصيرة؛ تتوقف تمامًا إذا أوقفها المستخدم من الإعدادات
 * أو إذا طلب الجهاز تقليل الحركة
 * =================================================================== */

/* الانتقال بين الصفحات */
@view-transition {
    navigation: auto;
}

@keyframes vt-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes drop-in {
    from {
        opacity: 0;
        transform: translate(-50%, -10px) scale(.98);
    }
}

@media screen {
    /* القائمة الجانبية وزرها ثابتان أثناء التنقل؛ المحتوى وحده يتبدل */
    .sidebar {
        view-transition-name: sidebar;
    }

    .nav-toggle {
        view-transition-name: nav-toggle;
    }

    ::view-transition-group(*) {
        animation-duration: var(--dur-3);
        animation-timing-function: var(--ease-out);
    }

    ::view-transition-old(root) {
        animation: vt-fade-out var(--dur-2) var(--ease-in) both;
    }

    ::view-transition-new(root) {
        animation: vt-fade-in var(--dur-3) var(--ease-out) both;
    }

    /* ظهور المحتوى عند فتح الصفحة: البطاقات تصعد بالتتابع (يضيف layout.js الصنف enter) */
    html.is-entering .enter {
        animation: rise var(--dur-4) var(--ease-out) both;
        animation-delay: var(--enter-delay, 0ms);
    }

    /* صفحات الدخول والشروط والماسح */
    body.standalone > main {
        animation: rise var(--dur-4) var(--ease-out) both;
    }

    /* النوافذ المنبثقة: تظهر وتختفي بتلاشٍ وتكبير خفيف */
    dialog {
        transition:
            opacity var(--dur-2) var(--ease),
            transform var(--dur-3) var(--ease-out),
            overlay var(--dur-3) allow-discrete,
            display var(--dur-3) allow-discrete;
    }

    dialog:not([open]) {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    @starting-style {
        dialog[open] {
            opacity: 0;
            transform: translateY(10px) scale(.98);
        }
    }

    dialog::backdrop {
        transition:
            opacity var(--dur-3) var(--ease),
            overlay var(--dur-3) allow-discrete,
            display var(--dur-3) allow-discrete;
    }

    dialog:not([open])::backdrop {
        opacity: 0;
    }

    @starting-style {
        dialog[open]::backdrop {
            opacity: 0;
        }
    }

    /* رسالة الحفظ: تطفو أعلى الشاشة */
    .flash {
        position: fixed !important;
        top: 20px;
        left: 50%;
        z-index: 90;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
        width: max-content;
        max-width: calc(100vw - 32px);
        margin: 0 !important;
        padding: 12px 18px !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        box-shadow: var(--shadow-lg) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .flash[hidden] {
        display: none !important;
    }

    .flash:not([hidden]) {
        animation: drop-in var(--dur-3) var(--ease-out);
    }

    .flash::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
    }

    .flash.err::before {
        background: var(--danger);
        box-shadow: 0 0 0 4px var(--danger-soft);
    }

    .flash.ok,
    .flash.err {
        background: var(--surface) !important;
        color: var(--text) !important;
    }

    /* مفتاح تشغيل/إيقاف */
    input[type="checkbox"].switch {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        flex: none;
        width: 42px;
        height: 24px;
        margin: 0;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: var(--surface-3);
        cursor: pointer;
        transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    }

    input[type="checkbox"].switch::after {
        content: "";
        position: absolute;
        top: 2px;
        inset-inline-start: 2px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .3);
        transition: transform var(--dur-3) var(--ease-out);
    }

    input[type="checkbox"].switch:checked {
        background: var(--accent);
        border-color: var(--accent);
    }

    html[dir="rtl"] input[type="checkbox"].switch:checked::after {
        transform: translateX(-18px);
    }

    html[dir="ltr"] input[type="checkbox"].switch:checked::after {
        transform: translateX(18px);
    }

    input[type="checkbox"].switch:disabled {
        opacity: .5;
        cursor: not-allowed;
    }
}

/* تنبيه الاشتراك أعلى الصفحة */
@media screen {
    /* شريط النسخة التجريبية */
    .demo-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 18px;
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        background: var(--info-soft);
        color: var(--info-text);
        font-size: 14px;
    }

    .demo-banner b {
        font-weight: 700;
    }

    .demo-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .demo-cta,
    .demo-exit {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 14px;
        border-radius: 999px;
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .demo-cta {
        background: #1fa855;
        color: #fff !important;
        border: 0;
    }

    .demo-exit {
        background: transparent;
        color: inherit;
        border: 1px solid currentColor;
    }

    .sub-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        background: var(--warn-soft);
        color: var(--warn-text);
        font-size: 14px;
        font-weight: 500;
    }

    .sub-banner::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .sub-banner.urgent {
        background: var(--danger-soft);
        color: var(--danger-text);
    }
}

/* سلوك القائمة الجانبية (يتحكم به layout.js) */
@media screen {
    .nav-toggle {
        position: fixed;
        z-index: 70;
        display: grid;
        place-items: center;
        cursor: pointer;
        padding: 0;
    }

    .nav-toggle svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    body.nav-ready .sidebar {
        transition: transform var(--dur-3) var(--ease-out);
    }

    body.nav-ready > header,
    body.nav-ready .topbar,
    body.nav-ready > main {
        transition: margin var(--dur-3) var(--ease-out);
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(10, 12, 16, .45);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3);
    }

    /* الكمبيوتر: إخفاء القائمة بالانزلاق للخارج */
    @media (min-width: 651px) {
        html[dir="rtl"].nav-collapsed .sidebar {
            transform: translateX(101%);
        }

        html[dir="ltr"].nav-collapsed .sidebar {
            transform: translateX(-101%);
        }

        html.nav-collapsed body > header,
        html.nav-collapsed .topbar {
            margin-inline-start: 0 !important;
        }

        html.nav-collapsed body > main {
            margin-inline-start: var(--gutter) !important;
        }

        .nav-backdrop {
            display: none;
        }
    }

    /* الهاتف: القائمة طبقة تنزلق فوق الصفحة */
    @media (max-width: 650px) {
        body.nav-open .nav-backdrop {
            opacity: 1;
            visibility: visible;
        }
    }
}

/* إيقاف الحركة: من الإعدادات */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after,
html[data-motion="off"] ::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* إيقاف الحركة: إذا طلب نظام الجهاز تقليلها */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    *,
    *::before,
    *::after,
    ::backdrop {
        animation-duration: 1ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* مؤشر الاتصال: بدون إنترنت / تغييرات تنتظر الرفع (يتحكم به pwa.js) */
@media screen {
    /* شريط "يتوفر تحديث جديد" أعلى الصفحة (pwa.js) */
    .update-bar {
        position: fixed;
        z-index: 95;
        top: 12px;
        inset-inline-start: 50%;
        translate: 50% 0;
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: calc(100vw - 32px);
        padding: 8px;
        padding-inline-start: 16px;
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        font-size: 14px;
        font-weight: 600;
    }

    [dir="ltr"] .update-bar {
        translate: -50% 0;
    }

    .update-bar button {
        flex: none;
        height: 34px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    .update-bar button:disabled {
        opacity: .7;
        cursor: default;
    }

    .net-pill {
        position: fixed;
        z-index: 90;
        bottom: 16px;
        inset-inline-start: 50%;
        translate: 50% 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: calc(100vw - 32px);
        padding: 10px 16px;
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
    }

    [dir="ltr"] .net-pill {
        translate: -50% 12px;
    }

    .net-pill.show {
        opacity: 1;
        translate: 50% 0;
    }

    [dir="ltr"] .net-pill.show {
        translate: -50% 0;
    }

    .net-pill i {
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--warn);
    }

    .net-pill[data-mode="offline"] i {
        background: var(--danger);
    }

    .net-pill[data-mode="ok"] i {
        background: var(--accent);
    }

    .net-pill[data-mode="pending"] i {
        animation: net-blink 1s var(--ease) infinite alternate;
    }

    @keyframes net-blink {
        to { opacity: .3; }
    }
}

@media print {
    .net-pill {
        display: none !important;
    }
}


/* ===== تغيير المظهر: المظهر الجديد ينتشر بدائرة من نقطة الضغط (theme.js) ===== */
@media screen {
    html.vt-circle .sidebar,
    html.vt-circle .nav-toggle,
    html.vt-circle #themeBtn,
    html.vt-circle .tabbar {
        view-transition-name: none;
    }

    html.vt-circle::view-transition-old(root) {
        animation: none;
    }

    html.vt-circle::view-transition-new(root) {
        animation: vt-circle 620ms cubic-bezier(.4, 0, .2, 1) both;
    }

    @keyframes vt-circle {
        from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
        to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
    }
}

/* ===== زر الفاتح/الداكن: دائرة أعلى الصفحة بجانب زر القائمة (layout.js) ===== */
@media screen {
    #themeBtn {
        position: fixed;
        z-index: 70;
        top: 30px;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 50%;
        background: var(--surface);
        color: var(--text-2);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        view-transition-name: theme-btn;
        transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
    }

    #themeBtn:hover {
        background: var(--surface-3);
        color: var(--text);
    }

    #themeBtn:active {
        transform: scale(.92);
    }

    #themeBtn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html[dir="rtl"] #themeBtn { left: calc(var(--gutter) + 48px); }
    html[dir="ltr"] #themeBtn { right: calc(var(--gutter) + 48px); }

    html[data-glass="on"] #themeBtn {
        background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%), rgba(255, 255, 255, .1);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
        border-color: rgba(255, 255, 255, .24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(0, 0, 0, .35);
        color: #fff;
    }

    /* الشريط العلوي لا يمتد تحت الزرين */
    body:has(#themeBtn) > header,
    body:has(#themeBtn) .topbar {
        padding-inline-end: calc(var(--gutter) + 100px) !important;
    }

    @media (max-width: 650px) {
        #themeBtn { top: 18px; }
        /* على الهاتف زر القائمة صار «المزيد» في الشريط السفلي، فيأخذ الزر مكانه */
        html[dir="rtl"] body.has-tabbar #themeBtn { left: var(--gutter); }
        html[dir="ltr"] body.has-tabbar #themeBtn { right: var(--gutter); }

        body:has(#themeBtn) > header,
        body:has(#themeBtn) .topbar {
            padding-inline-end: 64px !important;
        }
    }
}

/* ===== ظهور الصفحة: إطارات البطاقات أولًا، ثم محتواها يتلاشى إلى الداخل ===== */
@media screen {
    html.is-entering .enter > * {
        animation: content-in 420ms var(--ease-out) both;
        animation-delay: calc(var(--enter-delay, 0ms) + 200ms);
    }

    /* شفافية فقط: الضبابية على كل عنصر ثقيلة على الهواتف */
    @keyframes content-in {
        from {
            opacity: 0;
        }
    }

    html[data-motion="off"] .enter > * {
        animation: none !important;
    }
}

/* ===== إضاءة تتبع المؤشر فوق البطاقات (layout.js يضيف .spot ويحدّث --mx و --my) =====
 * لكل بطاقة لون؛ التوهج يتبع المؤشر، وحافة البطاقة كلها تضيء وأقواها قرب المؤشر */
@media screen and (hover: hover) and (pointer: fine) {
    .stat,
    .summary-card,
    .card,
    .panel,
    .sum-card {
        --spot: 90, 170, 215;
    }

    :is(.stat, .summary-card, .sum-card):nth-child(5n+2) { --spot: 214, 178, 60; }
    :is(.stat, .summary-card, .sum-card):nth-child(5n+3) { --spot: 167, 139, 250; }
    :is(.stat, .summary-card, .sum-card):nth-child(5n+4) { --spot: 74, 222, 128; }
    :is(.stat, .summary-card, .sum-card):nth-child(5n+5) { --spot: 244, 114, 182; }

    html[data-aurora="on"] .stat,
    html[data-aurora="on"] .summary-card {
        --spot: var(--glow);
    }

    .stat:has(> .spot),
    .summary-card:has(> .spot),
    .card:has(> .spot),
    .panel:has(> .spot),
    .sum-card:has(> .spot) {
        position: relative;
        isolation: isolate;
    }

    .spot {
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 600ms var(--ease-out);
    }

    .spot::before,
    .spot::after {
        content: "";
        position: absolute;
        border-radius: inherit;
    }

    .spot::before {
        inset: 0;
        background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--spot), .3), rgba(var(--spot), .08) 45%, transparent 75%);
    }

    .spot::after {
        inset: -1px;
        padding: 1px;
        background:
            radial-gradient(240px circle at calc(var(--mx, 50%) + 1px) calc(var(--my, 50%) + 1px), rgba(var(--spot), 1), transparent 70%),
            rgba(var(--spot), .45);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    :is(.stat, .summary-card, .card, .panel, .sum-card):hover > .spot {
        opacity: 1;
        transition-duration: 250ms;
    }

    html[data-theme="light"] .spot::before {
        background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--spot), .2), rgba(var(--spot), .05) 45%, transparent 75%);
    }

    html[data-motion="off"] .spot {
        display: none;
    }
}

/* ===== شريط التبويب للهاتف: شريط داكن، وفقاعة ملوّنة تنزلق بين التبويبات (layout.js يرسم الشكل) ===== */
.tabbar {
    display: none;
}

@media screen and (max-width: 650px) {
    .tabbar {
        --active: #c6f432;
        display: flex;
        position: fixed;
        z-index: 60;
        inset-inline: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        height: 66px;
        /* مثل المقطع: التبويبات متقاربة في الوسط، وفراغ عند الطرفين */
        padding: 0 11%;
        transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
    }

    /* يختفي عند فتح القائمة، حتى لا يغطي زر الخروج أسفلها */
    body.nav-open .tabbar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(140%);
    }

    .tabbar .tab-bg,
    .tabbar .tab-edge {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .tabbar .tab-bg {
        background: linear-gradient(180deg, rgba(30, 27, 42, .96) 0%, rgba(17, 15, 25, .97) 100%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .tabbar .tab-edge {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .tabbar .tab-edge path {
        fill: none;
        stroke: rgba(255, 255, 255, .24);
        stroke-width: 1.2;
    }

    /* توهج ملوّن تحت الشريط بلون التبويب الحالي */
    .tabbar .tab-glow {
        position: absolute;
        left: -110px;
        bottom: -26px;
        width: 220px;
        height: 60px;
        border-radius: 50%;
        background: var(--active);
        opacity: .3;
        filter: blur(30px);
        pointer-events: none;
    }

    .tabbar a,
    .tabbar button {
        position: relative;
        z-index: 1;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #8e89a3;
        font: inherit;
        font-size: 11.5px;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tabbar svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* التبويب الحالي: أيقونته في الفقاعة، واسمه أسفل الشريط بلونه */
    .tabbar :is(a, button) span {
        position: absolute;
        bottom: 9px;
        inset-inline: 0;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        color: var(--tab);
        transform: translateY(4px);
        transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
    }

    .tabbar [aria-current="page"] svg {
        opacity: 0;
    }

    .tabbar:not(.moving) [aria-current="page"] span {
        opacity: 1;
        transform: none;
        transition-delay: 60ms;
    }

    .tabbar .tab-bubble {
        position: absolute;
        z-index: 2;
        top: -23px;
        left: -24px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background:
            radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%),
            radial-gradient(circle at 50% 120%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 60%),
            var(--active);
        color: #17151f;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 6px 18px color-mix(in srgb, var(--active) 45%, transparent), 0 0 26px color-mix(in srgb, var(--active) 30%, transparent);
        pointer-events: none;
    }

    .tabbar .tab-bubble svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
        animation: bubble-icon 260ms var(--ease-out);
    }

    @keyframes bubble-icon {
        from {
            opacity: 0;
            transform: scale(.6);
        }
    }

    /* المحتوى لا يختفي تحت الشريط */
    body.has-tabbar > main {
        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
    }

    /* زر القائمة العلوي يُستبدل بـ «المزيد» في الشريط */
    body.has-tabbar .nav-toggle {
        display: none !important;
    }

    body.has-tabbar .net-pill {
        bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    }

    html[data-motion="off"] .tabbar,
    html[data-motion="off"] .tabbar * {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .tabbar,
    #themeBtn {
        display: none !important;
    }
}

/* ===== زر «عرض المزيد» تحت القوائم الطويلة (layout.js: StorePager) ===== */
@media screen {
    .show-more {
        display: block;
        width: min(100%, 360px);
        margin: 14px auto 4px;
        padding: 12px 20px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-size: 14.5px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--dur-2) var(--ease);
    }

    .show-more:hover {
        background: var(--surface-3);
    }

    .show-more[hidden] {
        display: none;
    }
}

@media print {
    .show-more {
        display: none !important;
    }
}