/* ===== إعادة ترتيب صفحة الإعدادات + التخصيص العائم للألوان =====
   الهدف: تبويبات معنونة واضحة + رأس صفحة أنيق + لوحة تخصيص عائمة
   اختيارية تظهر في كل صفحات البرنامج عند تفعيل المستخدم لها من
   تبويب "عام" > "زر الألوان العائم". كل القيم من توكنز Meadows
   فتتكيف مع الوضع الليلي تلقائياً. */

/* ============================================================
   1) رأس صفحة الإعدادات (عنوان + وصف ديناميكي)
   ============================================================ */
.settings-page-head {
    margin: 4px 0 22px;
    padding: 0;
}

.settings-page-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-title);
    margin: 0;
    line-height: 1.2;
}

.settings-page-sub {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 6px 0 0;
    max-width: 640px;
    font-weight: 500;
}

/* ============================================================
   2) شريط التبويبات العلوي (sub-nav) — معنون بدل الأيقونات فقط
   يُلغى تأثير .stat-tab الافتراضي ضمن هذا النطاق فقط.
   ============================================================ */
/* نموذج settings-page-demo: بطاقة لاصقة ذات حبّات — الزرّ النشط يُغرَق
   بخلفية primary والبقية شفافة. البقاء لاصقاً تحت الترويسة كما كان. */
.settings-subnav {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 0 22px;
    padding: 4px;
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.settings-subnav-inner {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    /* الاستثناء المقصود: شريط تبويبات أفقي يُخفي شريطه عمداً */
}

.settings-subnav-inner::-webkit-scrollbar {
    display: none;
}

/* تجاوز مظهر .stat-tab داخل الـ sub-nav فقط (لا يمسّ صفحة الطلبات) */
.settings-subnav .stat-tab {
    flex: 1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    min-width: max-content;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
    position: relative;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.settings-subnav .stat-tab:hover {
    color: var(--text-title);
    background: color-mix(in srgb, var(--text-title) 6%, transparent);
    border-color: transparent;
}

.settings-subnav .stat-tab.active {
    background: var(--primary);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 32%, transparent);
}

.snt-ico {
    width: 17px;
    height: 17px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}

.settings-subnav .stat-tab.active .snt-ico {
    opacity: 1;
}

.snt-label {
    line-height: 1;
}

/* على الجوال (نموذج settings-page-demo ≤768px): الأيقونة وحدها — التسمية
   تُخفى بصرياً لا بـ display:none كي يبقى اسم التبويب متاحاً لقارئات الشاشة */
@media (max-width: 768px) {
    .settings-subnav {
        padding: 3px;
    }
    .settings-subnav .stat-tab {
        gap: 0;
        padding: 10px 14px;
    }
    .snt-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-subnav .stat-tab {
        transition: none;
    }
}

/* ============================================================
   3) التخصيص العائم — زر (FAB) + لوحة (panel)
   عناصر عامّة في الـ body (تُحقن مرة واحدة في _body.html).
   تُخفى افتراضياً عبر [hidden]، ويُفعّلها المستخدم من
   إعدادات "عام" > "زر الألوان العائم". الموضع: يسار-أسفل.
   ============================================================ */

/* --- الزر العائم --- */
.color-fab:not([hidden]) {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: var(--z-tool-fab);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 55%, var(--primary-hover) 100%);
    box-shadow:
        var(--shadow-primary),
        0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
    transition:
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.2s ease;
    animation: cpFabIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.color-fab:hover {
    transform: scale(1.07) rotate(-6deg);
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--primary) 45%, transparent),
        0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent);
}

.color-fab:active {
    transform: scale(0.95);
}

/* هالة عجلة ألوان تدور ببطء حول الزر — تقول «هذا الزر عن الألوان» بأهدأ
   من النبض الراداري السابق. ألوانها من توكنز الثيم نفسه فتتبع تخصيص
   كل مستأجر تلقائياً، والدوران transform فقط فلا يعيد الرسم. */
.color-fab-pulse {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary), var(--info), var(--success), var(--warning), var(--primary));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation:
        cpSpin 7s linear infinite,
        cpHaloBreathe 3.6s ease-in-out infinite;
    pointer-events: none;
}

.color-fab.is-open .color-fab-pulse {
    animation: none;
    opacity: 0;
}

@keyframes cpFabIn {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes cpSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes cpHaloBreathe {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.95;
    }
}

/* حركة مخفَّضة: الحلقة تبقى دلالةً على أداة الألوان لكن بلا دوران ولا تنفّس */
@media (prefers-reduced-motion: reduce) {
    .color-fab-pulse {
        animation: none;
        opacity: 0.8;
    }
}

/* --- اللوحة --- */
.color-panel {
    position: fixed;
    bottom: 88px;
    left: 24px;
    z-index: var(--z-tool-panel);
    width: 372px;
    max-width: calc(100vw - 32px);
    max-height: min(680px, calc(100vh - 120px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-solid);
    color: var(--text-main);
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
    box-shadow: var(--shadow-lg);
    font-family: inherit;
}

.color-panel.is-open:not([hidden]) {
    display: flex;
    animation: cpPanelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cpPanelIn {
    from {
        transform: translateY(14px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* رأس اللوحة (قابل للسحب) */
.cp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    cursor: grab;
    user-select: none;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--text-title) 5%, var(--surface-solid)) 0%,
        var(--surface-solid) 100%
    );
    border-bottom: 1px solid var(--border-main);
}

.cp-head:active {
    cursor: grabbing;
}

.cp-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cp-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--text-title);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--text-title) 35%, transparent);
}

.cp-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-title);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.cp-subtitle {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 3px;
    font-weight: 600;
}

.cp-actions {
    display: flex;
    gap: 4px;
    flex: none;
}

/* أزرار أيقونية 28×28 — 999px على مربّع = دائرة تامة، نفس لغة .close-btn
   و.add-circle-btn. كانت 8px فتشذّ عن حبّات .cp-btn أسفل اللوحة نفسها. */
.cp-action {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.cp-action:hover {
    background: color-mix(in srgb, var(--text-title) 10%, transparent);
    color: var(--text-title);
}
.cp-action.cp-danger:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

/* جسم اللوحة */
.cp-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
}

/* شريط التمرير: الطبقة الموحّدة في base.css (الأسطح الضيّقة). */

.cp-section {
    margin-bottom: 16px;
}
.cp-section:last-child {
    margin-bottom: 0;
}

.cp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-title);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.cp-section-title .num {
    width: 19px;
    height: 19px;
    flex: none;
    border-radius: 6px;
    background: var(--text-title);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- الثيمات الجاهزة --- */
.cp-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

.cp-preset {
    position: relative;
    border: 1.5px solid var(--border-main);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
    background: var(--surface-solid);
    padding: 0;
}

.cp-preset:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.cp-preset.is-active {
    border-color: var(--text-title);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-title) 12%, transparent);
}

.cp-preset-swatch {
    height: 36px;
    width: 100%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.cp-preset-name {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-title);
    text-align: center;
    padding: 5px 3px 6px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- حقل اللون (swatch + hex) --- */
.cp-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-main);
    border: 1px solid var(--border-main);
    border-radius: 9px;
    padding: 4px 8px 4px 4px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.cp-color-field:hover {
    border-color: color-mix(in srgb, var(--text-title) 25%, var(--border-main));
}

.cp-swatch {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}
.cp-swatch:hover {
    transform: scale(1.05);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.14);
}

.cp-swatch input[type='color'] {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
}

.cp-hex {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--text-title);
    font-family: var(--app-mono-family, ui-monospace, monospace);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    direction: ltr;
    text-align: left;
}

/* صف اللون الأساسي */
.cp-primary-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cp-primary-row .cp-color-field {
    flex: 1;
}
.cp-primary-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

/* --- حقل بحث الألوان --- */
.cp-search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.cp-search-ico {
    position: absolute;
    top: 50%;
    inset-inline-start: 10px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    pointer-events: none;
}
.cp-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px 10px 34px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: var(--surface-main);
    color: var(--text-title);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
[dir='rtl'] .cp-search-input {
    padding: 10px 34px 10px 12px;
}
.cp-search-input:focus {
    border-color: var(--text-title);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-title) 10%, transparent);
}
.cp-search-input::placeholder {
    color: var(--text-secondary);
}

/* --- مجموعات الألوان القابلة للطي --- */
.cp-all-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-group {
    border: 1px solid var(--border-main);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-main);
}

.cp-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-title);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    text-align: start;
    transition: background-color 0.15s ease;
}
.cp-group-head:hover {
    background: color-mix(in srgb, var(--text-title) 5%, transparent);
}

.cp-group-name {
    flex: 1;
    min-width: 0;
}

.cp-group-count {
    flex: none;
    min-width: 22px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-title) 8%, transparent);
    color: var(--text-title);
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cp-group-chev {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}
.cp-group:not(.is-collapsed) .cp-group-chev {
    transform: rotate(180deg);
}

.cp-group-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 9px 10px;
}
.cp-group.is-collapsed .cp-group-body {
    display: none;
}

/* --- صف لون واحد (تسمية + حقل) --- */
.cp-color-row {
    display: grid;
    grid-template-columns: 1fr 124px;
    gap: 10px;
    align-items: center;
    padding: 6px 4px;
    border-radius: 8px;
    transition: background-color 0.12s ease;
}
.cp-color-row:hover {
    background: color-mix(in srgb, var(--text-title) 4%, transparent);
}

.cp-color-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-color-row .cp-color-field {
    padding: 3px 6px 3px 3px;
}
.cp-color-row .cp-swatch {
    width: 28px;
    height: 28px;
}
.cp-color-row .cp-hex {
    font-size: 11px;
}

/* --- تذييل اللوحة --- */
.cp-foot {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-main);
    background: color-mix(in srgb, var(--text-title) 4%, var(--surface-main));
}

.cp-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-title);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.cp-btn:hover {
    background: color-mix(in srgb, var(--text-title) 8%, var(--surface-solid));
    border-color: var(--text-title);
    color: var(--text-title);
}
.cp-btn:active {
    transform: scale(0.97);
}

.cp-btn-primary {
    background: var(--text-title);
    color: #ffffff;
    border-color: var(--text-title);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--text-title) 25%, transparent);
}

.cp-btn-primary:hover {
    background: color-mix(in srgb, #000 25%, var(--text-title));
    border-color: transparent;
    color: #ffffff;
}

/* --- Toast صغير --- */
.cp-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--text-title);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}

.cp-toast.is-shown {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* --- الجوال: الزر واللوحة --- */
@media (max-width: 600px) {
    .color-fab {
        bottom: 18px;
        left: 18px;
        width: 50px;
        height: 50px;
    }
    .color-panel {
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        bottom: 80px;
    }
}

/* === كثافة صفحة الإعدادات على الجوال (≤768px) ===
   صفحة الإعدادات أكثر الصفحات طولاً (تبويبات + مجموعات + حقول ألوان)
   فأثر الـpadding يتراكم بسرعة. التقليص يركّز على:
   - .settings-page-head margin-bottom 22 → 14
   - .settings-page-title 22 → 18
   - .cp-section margin-bottom 16 → 12
   - .cp-group-body padding 4 9 10 → 3 8 8
   - .te-section-body padding 4 18 18 → 3 14 14
   - .theme-group-body padding 16 → 12 (مأخوذ من --card-padding الجديد أصلاً)
   الهدف: تحرير ~50px عمودياً + 8px أفقياً في كل قسم، أي ما يعادل
   رؤية 3-4 صفوف إضافية من المحتوى قبل الحاجة للتمرير. */
@media (max-width: 768px) {
    .settings-page-head {
        margin: 2px 0 14px;
    }
    .settings-page-title {
        font-size: 18px;
    }
    .settings-page-sub {
        font-size: 12px;
    }
    .cp-section {
        margin-bottom: 12px;
    }
    .cp-group-body {
        padding: 3px 8px 8px;
    }
    #settingsThemeTab .te-section-body {
        padding: 3px 14px 14px;
    }
    #settingsThemeTab .theme-group .te-section-body {
        padding: 0;
    }
}
@media (max-width: 420px) {
    .settings-page-head {
        margin: 0 0 10px;
    }
}

/* ============================================================
   4) محرّر الثيم (تبويب «الثيم والألوان») — أسلوب calm
   بطاقات أقسام مسطّحة برؤوس رمادية محايدة + صفوف ألوان بسيطة
   (نقطة ملوّنة + اسم + حقل hex) + بطاقات ثيم بمعاينة 6 ألوان.
   كل القيم من توكنز Meadows. مُحدَّدة بـ #settingsThemeTab.
   ============================================================ */

/* الحاوية العامة: نفس بنية تبويب «عام» — عمود واحد بعرض مقروء (720px)
   ومسافة 22px بين المجموعات. الشبكة ثنائية العمود السابقة كانت تُبعد صفوف
   الألوان عن إيقاع بقية التبويبات وتكسر محاذاة العناوين مع البطاقات. */
#settingsThemeTab.settings-tab-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 720px;
}

#settingsThemeTab .theme-color-pickers {
    overflow: visible;
    padding: 0;
    flex: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
}

/* بطاقة الثيمات الجاهزة ثابتة في الأعلى تحت شريط الأدوات — تماماً مثل المثال
   المرجعي — كي تبقى معاينة الثيمات في المتناول أثناء التمرير بين مجموعات
   الألوان. z-index أعلى من بطاقات الألوان كي تبقى فوقها.
   الإزاحة تجمع ارتفاعَين يقيسهما JS: ‎--settings-subnav-h‎ (شريط تبويبات
   الإعدادات لاصق عند 0 بـz-index أعلى، فبدون خصمه ينزلق شريط أدوات الثيم
   خلفه ويختفي) و‎--theme-toolbar-h‎ (الشريط نفسه، قد يلتفّ لسطرين). */
#settingsThemeTab #themePresetsSection {
    position: sticky;
    top: calc(var(--settings-subnav-h, 0px) + var(--theme-toolbar-h, 64px));
    z-index: 4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
}

/* --- شريط الأدوات (بحث + فتح/طي) --- */
#settingsThemeTab .theme-editor-toolbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
    box-shadow: var(--shadow-sm);
    /* ثابت في الأعلى أثناء التمرير داخل تبويب الثيم — يظل البحث وأزرار
       الفتح/طي في المتناول دائماً. z-index فوق البطاقات، و`top` تحت شريط
       تبويبات الإعدادات اللاصق (وإلّا اختفى خلفه — z-index الشريط أعلى). */
    position: sticky;
    top: var(--settings-subnav-h, 0px);
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
}

/* === الجوال والشاشات القصيرة: لا تثبيت في تبويب الثيم ===
   بطاقة الثيمات الأربع عشرة تقيس نحو 730px على شاشة 390px — أطول من منطقة
   العرض بعد خصم الشريطين. وعنصر ‎sticky‎ أطول من منطقة العرض لا ينزلق أبداً:
   يبقى مثبّتاً يغطّي كل ما تحته طوال التمرير، فمجموعات الألوان موجودة في
   التخطيط لكنّها محجوبة خلف البطاقة ولا تُبلغ. القياس بالارتفاع أيضاً لا
   بالعرض وحده لأن جوّالاً بالوضع الأفقي يعيد المشكلة على عرض «تابلت».
   الحلّ: ‎static‎ — تمرّ مكتبة الثيمات ثم تظهر مجموعات الألوان طبيعياً. */
@media (max-width: 900px), (max-height: 720px) {
    #settingsThemeTab #themePresetsSection,
    #settingsThemeTab .theme-editor-toolbar {
        position: static;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    #settingsThemeTab #themePresetsSection {
        background: var(--surface-solid);
    }
    #settingsThemeTab .theme-editor-toolbar {
        background: var(--surface-solid);
    }
}

/* البحث = **زرّ البحث القابل للطيّ** في شريط أدوات الطلبات نفسه
   (‎#ordersPage .ot-search‎، orders-cards.css §Dock): يبدأ دائرةً أيقونية 42px،
   وبالنقر يتمدّد لكبسولة بحث ثم يعود مطوياً عند فقدان التركيز بلا نصّ. نُعيد
   استخدام أصناف ‎.ot-search*‎ حرفياً (كما فعلت `#deliveryPage` و`#advertisingPage`)
   محصورةً بنطاق التبويب — الاسم نفسه يعني السلوك نفسه في كل الأسطح.
   الألوان في الحالتَين واحدة (بئر محايد + حدّ رفيع بلا حلقة تركيز)، فالزرّ
   المطوي والحقل الموسّع شيء واحد يتغيّر عرضه لا شكلان مختلفان. */
#settingsThemeTab .ot-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px 0 14px;
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border: 1px solid var(--border-main);
    border-radius: 999px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}
#settingsThemeTab .ot-search:hover,
#settingsThemeTab .ot-search:focus-within {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
}
#settingsThemeTab .ot-search-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
}

/* الحقل: شفّاف بلا حدّ ولا حلقة تركيز. القواعد تغلب نسخة `.theme-search-input`
   القديمة غير المحصورة في `dashboard.css` (بئر بحدّ 10px وحلقة primary) التي
   كانت ستطلّ من تحت الكبسولة. */
#settingsThemeTab .ot-search .theme-search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-title);
}
#settingsThemeTab .ot-search .theme-search-input::placeholder {
    color: var(--text-secondary);
}
#settingsThemeTab .ot-search .theme-search-input:focus {
    border: none;
    box-shadow: none;
}

/* --- الحالة المطوية: دائرة أيقونية 42px --- */
#settingsThemeTab .ot-search[data-collapsed='true'] {
    flex: 0 0 42px;
    min-width: 42px;
    width: 42px;
    padding: 0;
    gap: 0;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border-radius: 999px;
    transition:
        flex-basis 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        min-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.25s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#settingsThemeTab .ot-search[data-collapsed='true']:hover {
    background: color-mix(in srgb, var(--bg-main) 70%, var(--surface-solid));
    border-color: var(--border-main);
    color: var(--text-title);
}
#settingsThemeTab .ot-search[data-collapsed='true'] .theme-search-input {
    /* مخفيّ بصرياً ويبقى في شجرة الوصول */
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- الحالة الموسّعة: كبسولة بسقف 360px (سقف بئر الطلبات) --- */
#settingsThemeTab .ot-search[data-collapsed='false'] {
    flex: 0 0 300px;
    min-width: 260px;
    max-width: 360px;
    width: auto;
    padding: 0 16px 0 18px;
    justify-content: flex-start;
    cursor: text;
    border-radius: 999px;
    transition:
        flex-basis 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        min-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-radius 0.25s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
#settingsThemeTab .ot-search[data-collapsed='false'] .theme-search-input {
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease 0.1s;
}
#settingsThemeTab .ot-search[data-collapsed='false'] .ot-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
/* الجوال: الكبسولة الموسّعة تملأ سطر الشريط وتنكمش معه، ويهبط زرّا فتح/طي
   تحتها. مقاس الطلبات ‎flex: 0 0 300px‎ لا ينكمش (shrink صفر)، وشريط أدوات
   التبويب أضيق من عرض صفحة الطلبات بحشوتَي اللوحة والشريط — فيفيض أفقياً. */
@media (max-width: 600px) {
    #settingsThemeTab .ot-search[data-collapsed='false'] {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }
}

/* زرّ الأيقونة المُغلِّف: بلا تنسيق زرّ افتراضي؛ في الحالة الموسّعة يصير زخرفة */
#settingsThemeTab .ot-search .ot-search-trigger {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}
#settingsThemeTab .ot-search[data-collapsed='false'] .ot-search-trigger {
    pointer-events: none;
}

/* زرّ المسح (×) — في الحالة الموسّعة وعند وجود نصّ فقط */
#settingsThemeTab .ot-search .ot-search-clear {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    padding: 0;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}
#settingsThemeTab .ot-search .ot-search-clear svg {
    width: 14px;
    height: 14px;
}
#settingsThemeTab .ot-search .ot-search-clear:hover {
    background: color-mix(in srgb, var(--text-title) 8%, transparent);
    color: var(--text-title);
}
#settingsThemeTab .ot-search .ot-search-clear:active {
    transform: scale(0.92);
}
#settingsThemeTab .ot-search[data-collapsed='false'] .ot-search-clear.is-visible {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    #settingsThemeTab .ot-search,
    #settingsThemeTab .ot-search[data-collapsed='true'],
    #settingsThemeTab .ot-search[data-collapsed='false'],
    #settingsThemeTab .ot-search .ot-search-icon,
    #settingsThemeTab .ot-search .theme-search-input {
        transition: none !important;
    }
}

#settingsThemeTab .theme-editor-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* زرّا «فتح الكل»/«طي الكل» ثانويان بجانب حقل البحث — حبّة 999px (موحّدة مع
   ‎.btn‎) أصغر من الحقل كي يبقيا تابعَين له لا منافسَين. الارتفاع ≈28px، فوق
   حدّ WCAG 2.5.8. */
#settingsThemeTab .theme-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 700;
    /* «فتح الكل»/«طي الكل» سطر واحد دائماً — على الجوال يضيق الشريط فتنكسر
       الكلمتان على سطرين ويتشوّه ارتفاع الزرّ. */
    white-space: nowrap;
    border-radius: 999px;
    background: var(--surface-main);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}
#settingsThemeTab .theme-action-btn:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-main));
    color: var(--primary);
}

#settingsThemeTab .theme-action-btn svg {
    width: 12px;
    height: 12px;
}

/* --- مجموعة الألوان = صفّ قابل للطيّ داخل بطاقة sg-list واحدة --- */
#settingsThemeTab .theme-group {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
}

/* إزالة السهم ▾ القديم من dashboard.css — لدينا سهم خاص */
#settingsThemeTab .theme-group-title::after {
    content: none;
}

/* --- رأس المجموعة: صفّ بنفس إيقاع sg-item (اسم + قيمة + سهم) — النقر
   يطوّق/يفتح صفوف الألوان تحته مباشرة داخل البطاقة نفسها --- */
#settingsThemeTab .theme-colors-list .theme-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--border-light);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-title);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.16s ease;
}

#settingsThemeTab .theme-colors-list .theme-group-title:first-child {
    border-top: 0;
}

#settingsThemeTab .theme-colors-list .theme-group-title:hover {
    background: var(--nav-bg-hover);
}

.tg-name {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1.4;
}

.tg-spacer {
    flex: 1;
}

.tg-chev {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

/* مطويّ → السهم يُدار نحو جهة البداية؛ مفتوح → لأسفل */
#settingsThemeTab .theme-group.collapsed .tg-chev {
    transform: rotate(-90deg);
}

/* العدّاد — قيمة صفّ بنفس روح sg-item-value */
#settingsThemeTab .theme-colors-list .theme-group-count {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    font-size: 12.5px;
    font-weight: 600;
}

/* زر «حفظ الحالي» — محسّن الوضوح: خلفية primary ناعمة + حدّ primary
   رفيع، بدل الأبيض الذي كان يبدو معطلاً. حبّة 999px كبقية أزرار البرنامج. */
#settingsThemeTab .theme-save-btn {
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-main));
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-main));
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}
#settingsThemeTab .theme-save-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

/* --- جسم مجموعة الألوان: صفوف داخل بطاقة sg-list الأمّ — لا بطاقة مستقلة
   ولا حشو إضافي؛ صفوف الألوان تحمل حشوها (مثل صفوف sg-item). --- */
#settingsThemeTab .theme-group-body {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

/* أقسام بطاقات الثيمات (nofold) جسمها شبكة بطاقات داخل بطاقة sg-list
   من الـpartial — احتفظ بحشوها الخاص أسفلها. */
#settingsThemeTab .te-section-body {
    padding: 4px 18px 18px;
}

#settingsThemeTab .theme-group .te-section-body {
    padding: 0;
}

/* الطي: أولوية أعلى من قاعدة الشبكة كي يُخفى الجسم فعلاً عند الطي */
#settingsThemeTab .theme-group.collapsed .te-section-body {
    display: none;
}

/* أقسام غير قابلة للطي (بطاقات الثيمات الجاهزة + ثيماتي المحفوظة):
   الرأس ليس زراً — أزل المؤشر والتأثير عند التحويم وأخفِ السهم. */
#settingsThemeTab .te-section-nofold .te-section-head {
    cursor: default;
    pointer-events: none;
    margin-bottom: 10px;
}
#settingsThemeTab .te-section-nofold .te-section-head > .theme-save-btn {
    pointer-events: auto;
}
#settingsThemeTab .te-section-nofold .te-section-head:hover {
    color: var(--text-muted);
    background: transparent;
}
#settingsThemeTab .te-section-nofold .tg-chev {
    display: none;
}

/* ============================================================
   صفوف الألوان — نقطة + اسم + hex — بنفس إيقاع صفوف sg-item
   (حشو أفقي 16px، خط شعرة علوي لكل صف، بلا زوايا). الصفّ الأول أيضاً
   يحمل الخطّ: يفصل صفوف المجموعة عن رأسها داخل البطاقة نفسها.
   ============================================================ */
#settingsThemeTab .color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    transition: background-color 0.16s ease;
}

#settingsThemeTab .color-row:hover {
    background: var(--nav-bg-hover);
}

#settingsThemeTab .cr-dot {
    position: relative;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
}
#settingsThemeTab .cr-dot:hover {
    transform: scale(1.06);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.16);
}

#settingsThemeTab .cr-dot input[type='color'] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
}

#settingsThemeTab .cr-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* شارة عدد الألوان المدمجة في منتقي واحد (نفس الدرجة تُضبط معاً) */
#settingsThemeTab .cr-merge-badge {
    display: inline-block;
    vertical-align: middle;
    margin-inline-start: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

#settingsThemeTab .cr-hex {
    flex: none;
    width: 108px;
    border: 1px solid var(--border-main);
    outline: none;
    background: var(--surface-main);
    color: var(--text-title);
    font-family: var(--app-mono-family, ui-monospace, monospace);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 10px;
    border-radius: 7px;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

#settingsThemeTab .cr-hex:focus {
    background: var(--surface-solid);
    border-color: var(--text-title);
    color: var(--text-title);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-title) 8%, transparent);
}

/* ============================================================
   الثيمات الجاهزة/المحفوظة — شبكة بطاقات مضغوطة
   (كبسولة عيّنات فوق الاسم — 4 أعمدة فأقل، لا صفاً لكل ثيم)
   ============================================================ */
#settingsThemeTab .theme-presets-group .te-section-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px;
}

#settingsThemeTab .preset-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 10px;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-solid);
    cursor: pointer;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

#settingsThemeTab .preset-row:hover {
    border-color: color-mix(in srgb, var(--text-title) 30%, transparent);
    transform: translateY(-1px);
}

/* شريط العيّنات: 5 نقاط تلخّص هوية الثيم في لمحة داخل كبسولة هادئة */
#settingsThemeTab .preset-swatches {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 999px;
}

#settingsThemeTab .preset-swatches span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* سطر الاسم + الشارة: بعرض البطاقة ومتوسّط */
#settingsThemeTab .preset-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

#settingsThemeTab .preset-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* شارة "جديد" للثيمات المضافة حديثاً — حبّة متدرّجة بجانب الاسم */
#settingsThemeTab .preset-badge {
    flex: none;
    padding: 2px 7px 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(135deg, #7b5dd9 0%, #3dcfe0 100%);
    border-radius: 999px;
    text-transform: uppercase;
}

/* رقاقة الثيم النشط — علامة نقطة في زاوية البطاقة */
#settingsThemeTab .preset-active-chip {
    display: none;
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

#settingsThemeTab .preset-row.active .preset-active-chip {
    display: block;
}

#settingsThemeTab .preset-row.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-solid));
}

/* الثيمات المحفوظة: زرّ الحذف في الزاوية المقابلة */
#settingsThemeTab .preset-row-custom {
    padding-inline-start: 10px;
}

#settingsThemeTab .theme-preset-delete {
    position: absolute;
    top: 5px;
    inset-inline-start: 5px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

#settingsThemeTab .theme-preset-delete:hover {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

/* --- الجوال: عمودان --- */
@media (max-width: 600px) {
    #settingsThemeTab .theme-presets-group .te-section-body {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 8px;
        padding: 10px;
    }
    #settingsThemeTab .preset-swatches span {
        width: 12px;
        height: 12px;
    }
}

/* زرّ حذف الثيم المحفوظ باللمس: هدف لمس أكبر (WCAG 2.5.5) */
@media (pointer: coarse) {
    #settingsThemeTab .theme-preset-delete {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* ============================================================
   5) مفتاح تشغيل/إيقاف (toggle) لزر الألوان العائم
   ============================================================ */
.fcp-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font: inherit;
    color: var(--text-main);
}
.fcp-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fcp-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 28%, transparent);
    transition: background 0.2s ease;
    flex: none;
}
.fcp-thumb {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fcp-switch input:checked + .fcp-track {
    background: var(--primary);
}
/* الصفحة RTL: الإبهام مثبّت عند حافة البداية (يمين) بـ inset-inline-start،
   والتحريك بـ translateX موجب يدفعه خارج المسار يميناً. نستخدم القيمة السالبة
   لاتجاه RTL (نفس نمط sc-switch في sales-curve.css). */
html[dir='rtl'] .fcp-switch input:checked + .fcp-track .fcp-thumb {
    transform: translateX(-20px);
}
html:not([dir='rtl']) .fcp-switch input:checked + .fcp-track .fcp-thumb {
    transform: translateX(20px);
}
.fcp-switch input:focus-visible + .fcp-track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.fcp-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 44px;
    text-align: start;
}

/* ============================================================
   6) تبويب «عام» — قائمة إعدادات مضغوطة
   كل إعداد صفٌّ واحد: اسمه، قيمته المحفوظة، ثم سهم يفتح نافذة
   التحرير (views/modals/settings-*.html). ما يُبدَّل بنقرة واحدة
   (المظهر · زرّ الألوان) يبقى في الصفّ نفسه. لا أيقونة لكل صفّ
   عمداً: مربّعات ملوّنة متكرّرة تُضخّم القائمة ولا تضيف فوق التسمية
   العربية معنى. كل القيم توكنز Modernize فيتبع الداكن والثيم مجاناً.
   ============================================================ */

/* قائمة عمودية واحدة بعرض مقروء: الشبكة ثنائية العمود (dashboard.css)
   تُبعد القيمة عن اسمها بعرض شاشة كاملة فتنكسر قراءة الصفّ. */
#settingsGeneralTab.settings-tab-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 720px;
}

.sg-group {
    min-width: 0;
}
.sg-group[hidden] {
    display: none;
}

.sg-group-title {
    margin: 0 0 8px;
    padding-inline-start: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.sg-list {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* الصفّ: زرٌّ حقيقي متى فتح نافذة (فيرث Enter/Space والتركيز مجاناً)،
   و.sg-item-static للصفوف التي تحمل تحكّمها داخلها. */
.sg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.sg-item:first-child {
    border-top: 0;
}
.sg-item-static {
    cursor: default;
}

button.sg-item:hover {
    background: var(--nav-bg-hover);
}
button.sg-item:hover .sg-item-chev {
    color: var(--primary);
}
.sg-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.sg-item-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-title);
}

.sg-item-label small {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
}

.sg-item-label small b {
    font-weight: 700;
    color: var(--text-secondary);
}

/* القيمة الحالية: تُقصّ بنقاط بدل أن تدفع السهم خارج الصفّ */
.sg-item-value {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* مصغّرة الشعار داخل الصفّ — الشعار نفسه أو الحرف الأول من اسم المتجر */
.sg-item-thumb {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--light-primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.sg-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sg-item-chev {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--text-muted);
    transition: color 0.16s ease;
}

.sg-item-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* رابط التتبّع داخل صفّ: ‎.st-link‎ يمدّد نفسه بـ flex في سياقه الأصلي */
.sg-item a.st-link {
    flex: 0 1 auto;
    max-width: 46%;
}

/* ---------- مجموعة أزرار المظهر (segmented pills) ---------- */
.sg-pill-group {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    flex: none;
}

.sg-pill-group button {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.sg-pill-group button svg {
    width: 14px;
    height: 14px;
}
.sg-pill-group button:hover {
    color: var(--text-title);
}

.sg-pill-group button.active {
    background: var(--surface-solid);
    color: var(--text-title);
    box-shadow: var(--shadow-sm);
}

.sg-pill-group button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* ---------- رؤوس الأقسام (تبويب البيانات) ---------- */
.sg-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 2px 4px 0;
}

.sg-section-head h4 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--text-title);
    margin: 0;
    line-height: 1.3;
}

.sg-section-head .sg-count {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sg-section-head .sg-rule {
    flex: 1;
    height: 1px;
    background: var(--border-light);
    margin-inline-start: 4px;
}

/* ---------- نوافذ تحرير الإعدادات ---------- */
/* كروم واحد مع مودالات الإضافة: زاوية 24px وعتامة ‎.modal-content‎ بطبقتين */
.sg-modal {
    max-width: 460px;
    border-radius: 24px;
}

.sg-modal-wide {
    max-width: 640px;
}

.sg-modal .modal-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
}

/* حقل هوية الموقع (slug) في مودال عام — الإدخال مع لاحقة النطاق في صف واحد */
.sg-slug-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sg-slug-wrap .form-input {
    direction: ltr;
    flex: 1 1 auto;
    min-width: 0;
}
.sg-slug-suffix {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    direction: ltr;
}

.sg-modal-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.sg-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* قائمة انتقاء داخل نافذة (نغمات الإشعار): الاختيار يُسمَع فوراً،
   فلا زرّ «تجربة» ثانٍ بجانب كل خيار. */
.sg-choice-list {
    margin-top: 14px;
    max-height: min(52vh, 360px);
    overflow-y: auto;
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
}

.sg-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    font: inherit;
    color: var(--text-main);
    text-align: start;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.sg-choice:first-child {
    border-top: 0;
}
.sg-choice:hover {
    background: var(--nav-bg-hover);
}
.sg-choice:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.sg-choice-label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.sg-choice-mark {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--primary);
    opacity: 0;
}

.sg-choice.is-active {
    color: var(--primary);
    background: var(--light-primary);
}
.sg-choice.is-active .sg-choice-mark {
    opacity: 1;
}

/* ---------- نافذة الخط: عيّنة + شبكة + رفع ---------- */
.sg-font-sample {
    background: linear-gradient(180deg, var(--surface-hover) 0%, var(--bg-main) 100%);
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius);
    padding: 18px 20px;
}

.sg-font-display {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--text-title);
}

.sg-font-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--app-mono-family, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.sg-font-meta b {
    color: var(--primary);
    font-weight: 600;
}

/* شبكة معاينة الخطوط: كل بطاقة تعرض جملة العيّنة بالخط نفسه كي يرى
   المستخدم شكل الخط قبل الاختيار */
.sg-font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    margin-top: 14px;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px;
}

.sg-font-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: start;
    padding: 12px 14px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.sg-font-option:hover {
    border-color: var(--primary);
}

.sg-font-option.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.sg-font-option-sample {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-title);
    /* العائلة تُضبط inline من settings-font.js حسب كل خط */
}

.sg-font-option-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.sg-font-option.is-active .sg-font-option-name {
    color: var(--primary);
}

.sg-font-upload {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-main);
}

.sg-font-upload .form-input {
    width: 100%;
    min-width: 0;
}
/* 46px يطابق min-height غلاف ‎.ao-field-wrap‎ الدائري المجاور */
.sg-font-upload .btn {
    height: 46px;
}

/* ---------- الملاحظة السفلية ---------- */
.sg-foot-note {
    margin: 0;
    padding-inline-start: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- محتوى عريض داخل صفوف sg (واتساب · المستخدمون — نمط تبويب عام) ---------- */
/* رقاقات الحالات في صفّ كتلة (sg-item-block): تحت العنوان والسطر الفرعي
   بعرض الصفّ كاملاً — بجانبهما تزاحم النصّ وتكسر المحاذاة. */
.sg-item .wa-chip-grid {
    margin-top: 10px;
}
.sg-modal .wa-vars-code {
    margin: 10px 0 0;
}
/* صفّ كتلة: يحتضن ملخّص الأدوار بعرضه الكامل داخل القائمة */
.sg-item.sg-item-block {
    display: block;
}
.sg-item .st-roles-summary {
    margin: 0;
}
/* عنوان مجموعة الثيم: يحمل زرّ «حفظ الحالي» في طرفه (نمط تبويب عام) */
#settingsThemeTab .sg-theme-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
#settingsThemeTab .sg-theme-title .theme-save-btn {
    margin-inline-start: auto;
}

/* ---------- حركة مخفَّضة ---------- */
@media (prefers-reduced-motion: reduce) {
    .sg-item,
    .sg-choice,
    .sg-item-chev,
    .sg-pill-group button {
        transition: none;
    }
}

/* ---------- الجوال ---------- */
@media (max-width: 768px) {
    #settingsGeneralTab.settings-tab-content,
    #settingsThemeTab.settings-tab-content {
        gap: 18px;
    }
    .sg-font-display {
        font-size: 19px;
    }
}

@media (max-width: 560px) {
    .sg-item {
        padding: 10px 14px;
        gap: 10px;
    }
    #settingsThemeTab .theme-colors-list .theme-group-title {
        padding: 10px 14px;
        gap: 10px;
    }
    #settingsThemeTab .color-row {
        padding: 10px 14px;
        gap: 10px;
    }
    .sg-item-value,
    .sg-item a.st-link {
        max-width: 40%;
    }
    .sg-font-upload {
        grid-template-columns: 1fr;
    }
    .sg-font-upload .btn {
        width: 100%;
    }
    .sg-modal-actions .btn {
        flex: 1;
    }
    .sg-item .wa-chip-grid {
        gap: 4px;
    }
}

/* ============================================================
   7) لغة بطاقات النموذج المرجعي (settings-page-demo)
   بطاقات ذات رؤوس معنونة (أيقونة + عنوان + وصف + إجراء)، صفوف
   أقسام، بطاقات بيانات بأيقونات مربّعة، قوالب واتساب، رقاقات
   حالات، وجدول مستخدمين بأفاتار ورقاقات أدوار. كل القيم من
   توكنز Modernize فتتبع الثيم والوضع الليلي تلقائياً.
   ============================================================ */

/* عناصر التبويبات تمتد بعرض الشبكة كاملة (الشبكة ثنائية العمود من
   dashboard.css — النموذج المرجعي قائمة عمودية واحدة) */
.settings-tab-content > .st-card,
.settings-tab-content > .st-data-card,
.settings-tab-content > .sg-section-head {
    grid-column: 1 / -1;
}

/* ---------- البطاقة العامة ---------- */
.st-card {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
    min-width: 0;
}

.st-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-main);
    margin-bottom: 18px;
}

.st-card-head-text {
    min-width: 0;
    flex: 1;
}

.st-card-head-text h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-title);
}

.st-card-head-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-ico {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.st-ico svg {
    width: 17px;
    height: 17px;
}

.st-ico.st-wa {
    background: color-mix(in srgb, var(--ready-text, #0f8c5a) 14%, transparent);
    color: var(--ready-text, #0f8c5a);
}

/* ---------- شبكة الحقول داخل بطاقة ---------- */
.st-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.st-form-grid .form-group {
    min-width: 0;
}
/* حقول .ao-field داخل الشبكة: الفراغ يوزّعه gap الشبكة، فلا هامش سفلي
   (إيقاع .ao-field الافراضي 12px مخصص للأعمدة الواحدة في المودالات). */
.st-form-grid .ao-field {
    min-width: 0;
    margin-bottom: 0;
}

.st-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.st-field-hint {
    margin-inline-start: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.st-inline-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- بطاقة البلد والعملة (نموذج html/locale-card.html) ---------- */
/* العنوان الفرعي أعوى البطاقة: سطر صغير يسبق العنوان بشرطة بلون الأساسي */
.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.st-eyebrow::before {
    content: '';
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* شارة الحالة بجانب الترويسة: نقطة بلون التمييز تنبض خفيفاً */
.st-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-hover);
}
.st-live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* التسميات داخل هذه البطاقة فقط: أيقونة صغيرة + نص + تلميح كبسولة */
.st-locale .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-lbl-ico {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.st-lbl-ico svg {
    width: 12px;
    height: 12px;
}
.st-locale .st-field-hint {
    margin-inline-start: auto;
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: 2px 8px;
    border-radius: 999px;
}

/* قوائم البلد والعملة بغلاف .ao-field-wrap-select الدائري من order-add.css —
   السهم يرسمه الغلاف نفسه فلا تنسيق محلي. */

/* شريط المعاينة تحت كل منتقي: يُحدَّث من updateLocalePreviews عند التغيير */
.st-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.st-preview b {
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* الإجراءات: فاصل علوي + التلميح أيقونة ونص */
.st-locale .st-card-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-main);
}
.st-locale .st-inline-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------- قسم مقدمات النماذج (كل العالم / قائمة مختارة) ---------- */
.st-prefix-rules {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--border-main);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.st-prefix-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.st-prefix-rules-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-title);
}

.st-prefix-rules-title small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.st-pt-ico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.st-pt-ico svg {
    width: 14px;
    height: 14px;
}

/* لوحة المنتقي: خلفية هادئة تحصر البحث والقائمة والعد داخل إطار واحد */
.st-prefix-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface-hover);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 14px;
}

.st-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.st-search-box {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.st-search-box .form-input {
    height: 40px;
    padding-inline-start: 38px;
}
.st-search-ico {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    pointer-events: none;
}
.st-search-ico svg {
    width: 14px;
    height: 14px;
}

.st-prefix-count {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    padding: 8px 12px;
    white-space: nowrap;
}
.st-prefix-count b {
    color: var(--primary);
    font-weight: 800;
}

.st-prefix-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-solid);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-prefix-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-title);
}

.st-prefix-item:hover {
    background: var(--surface-hover);
}

.st-prefix-item input[type='checkbox'] {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    flex: none;
}

/* المقدمة الافتراضية للمتجر: مثبّتة (disabled) مع وسم مميّز */
.st-prefix-item.is-default {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    cursor: default;
}

.st-prefix-item.is-default:hover {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.st-prefix-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text-title);
}

.st-prefix-code {
    flex: none;
    direction: ltr;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.st-prefix-pin {
    flex: none;
    font-size: 10px;
    font-weight: 800;
    color: var(--primary);
    background: var(--surface-solid);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
}

.st-picker-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.6;
}
.st-picker-foot svg {
    width: 13px;
    height: 13px;
    flex: none;
}
.st-foot-code {
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.st-prefix-empty {
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

.st-field-note {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

.st-field-block {
    margin-top: 18px;
}

.st-field-block > .form-label {
    display: block;
    margin-bottom: 10px;
}

.st-hint-block {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}

.st-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-title);
    padding-top: 11px;
}

.st-check-label input {
    width: 18px;
    height: 18px;
    flex: none;
    cursor: pointer;
    accent-color: var(--primary);
}

/* ---------- الشعار (البيانات الأساسية) ---------- */
.st-brand-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    background: var(--bg-main);
    border: 1.5px dashed var(--border-main);
    border-radius: 14px;
    transition: border-color 0.15s ease;
}

.st-brand-row + .st-brand-row {
    margin-top: 12px;
}

.st-brand-row:hover {
    border-color: var(--primary);
}

/* معاينة الشعار: مربّع متدرّج بالأحرف الأولى، أو الصورة المرفوعة تُعرض
   كاملة (contain — الشعار غالباً مستطيل وcover يقصّ أطرافه) على خلفية
   محايدة لا تخطف ألوانه */
.st-brand-logo {
    width: 78px;
    height: 78px;
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #0ea5e9));
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.st-brand-logo:has(img) {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
}

.st-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.st-brand-info {
    flex: 1;
    min-width: 0;
}

.st-brand-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
}

.st-brand-desc {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-brand-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.st-brand-upload {
    cursor: pointer;
    margin: 0;
}

/* ---------- صفوف الأقسام (الأمان) ---------- */
.st-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.st-sec-row:last-child {
    border-bottom: none;
}

.st-sec-info {
    flex: 1;
    min-width: 200px;
}

.st-sec-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 3px;
}

.st-sec-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- بطاقات البيانات (أيقونة + معلومات + زرّ) ---------- */
.st-data-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    min-width: 0;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.st-data-card:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-main));
    box-shadow: var(--shadow-md);
}

.st-data-ico {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.st-data-ico svg {
    width: 20px;
    height: 20px;
}

.st-data-ico.st-warn {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
}

.st-data-card.st-danger {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border-main));
    background: color-mix(in srgb, var(--danger) 4%, var(--surface-solid));
}

.st-data-card.st-danger:hover {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border-main));
}

.st-data-card.st-danger .st-data-ico {
    background: color-mix(in srgb, var(--danger) 13%, transparent);
    color: var(--danger);
}

.st-data-info {
    flex: 1;
    min-width: 0;
}

.st-data-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-title);
    margin-bottom: 2px;
}

.st-data-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ---------- رابط التتبّع + زرّ نسخ مصغّر ---------- */
.st-link {
    flex: 1;
    min-width: 0;
    font-family: var(--app-mono-family, ui-monospace, monospace);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: left;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* الرابط قابل للنقر (يفتح صفحة التتبّع) — بلا تسطير مزعج، مع إشارة hover */
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.st-link:hover,
.st-link:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

/* زر أيقوني مربّع 32×32 — 999px يجعله دائرة، لا 8px التي كانت تشذّ
   عن ‎.close-btn‎ في الصفحة ذاتها. */
.st-mini-btn {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--surface-solid);
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.st-mini-btn svg {
    width: 14px;
    height: 14px;
}

.st-mini-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.st-mini-btn.is-copied {
    background: var(--ready-bg);
    border-color: var(--ready-text);
    color: var(--ready-text);
}

/* متغيرات أيقونية ملوّنة لصفوف أعضاء الفريق (تعديل · تعطيل/تفعيل · حذف) */
.st-mini-btn.primary {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

.st-mini-btn.power {
    color: var(--ready-text);
    border-color: color-mix(in srgb, var(--ready-text) 25%, transparent);
}

.st-mini-btn.power.is-off {
    color: var(--text-muted);
    border-color: var(--border-main);
}

.st-mini-btn.danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

.st-mini-btn.danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

/* ---------- واتساب: رقاقات الحالات ----------
   سطران منتظمان (٤ + ٣ رقاقات بالترتيب المرئي RTL). غير المفعّلة محايدة
   (بلا لون)، وعند التفعيل تأخذ الرقاقة لون حالتها (خلفية + نصّ + نقطة)
   من توكنز Status pills في base.css/dark.css. */
.wa-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.wa-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 6px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.wa-chip:hover {
    color: var(--wa-c-t);
}

/* المفعّلة وحدها الملونة: لون الحالة خلفيةً ونصّاً (بلا حدود) */
.wa-chip:has(input:checked) {
    background: var(--wa-c-bg);
    color: var(--wa-c-t);
    font-weight: 700;
}

.wa-chip {
    position: relative;
}

/* مربّع الاختيار مخفيّ بصرياً لا إبطالياً: تلوين الرقاقة هو مؤشّر
   التحديد، والعنصر يبقى قابلاً للتركيز والكيبورد */
.wa-chip input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wa-chip:has(input:focus-visible) {
    outline: 2px solid var(--wa-c-t);
    outline-offset: 2px;
}

/* النقطة بلون نصّ الرقاقة نفسه — تصغر داخل الرقاقات المضغوطة */
.wa-chip .wa-tpl-dot {
    background: currentColor;
    width: 7px;
    height: 7px;
}

/* لون كل حالة — مرآة توكنز Status pills (وهي معرّفة للوضعين في base/dark) */
.wa-chip.wa-new {
    --wa-c-bg: var(--new-bg);
    --wa-c-t: var(--new-text);
}
.wa-chip.wa-pending {
    --wa-c-bg: var(--pending-bg);
    --wa-c-t: var(--pending-text);
}
.wa-chip.wa-ready {
    --wa-c-bg: var(--ready-bg);
    --wa-c-t: var(--ready-text);
}
.wa-chip.wa-delivering {
    --wa-c-bg: var(--delivering-bg);
    --wa-c-t: var(--delivering-text);
}
.wa-chip.wa-completed {
    --wa-c-bg: var(--completed-bg);
    --wa-c-t: var(--completed-text);
}
.wa-chip.wa-review {
    --wa-c-bg: var(--review-bg);
    --wa-c-t: var(--review-text);
}
.wa-chip.wa-cancelled {
    --wa-c-bg: var(--cancelled-bg);
    --wa-c-t: var(--cancelled-text);
}

/* ---------- واتساب: قوالب الرسائل ---------- */
/* القوالب صفوف sg-item تُحرَّر في نافذة؛ بقيت هنا أصناف الاسم/النقطة
   (تُستعمل داخل صفوف القائمة وفي ترويسة النافذة) ومحرّر النافذة. */
.wa-tpl-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
}

.wa-tpl-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
}

.wa-tpl-dot.st-new {
    background: var(--new-text);
}
.wa-tpl-dot.st-ready {
    background: var(--ready-text);
}
.wa-tpl-dot.st-warn {
    background: var(--warning);
}
.wa-tpl-dot.st-danger {
    background: var(--danger);
}

.wa-tpl-input {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    direction: rtl;
}

.wa-vars-code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    font-family: var(--app-mono-family, ui-monospace, monospace);
    font-size: 10.5px;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* ---------- المستخدمون ---------- */
.st-users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.st-users-meta {
    flex: 1;
    min-width: 0;
}

.st-users-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-title);
    margin-bottom: 3px;
}

.st-users-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.st-roles-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-main);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin-bottom: 14px;
}

.st-roles-summary .st-role-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.st-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-main);
    border-radius: 12px;
}

.st-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.st-table th {
    text-align: start;
    padding: 12px 14px;
    background: var(--bg-main);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-main);
    white-space: nowrap;
}

.st-table th.center {
    text-align: center;
}

.st-table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.st-table tbody tr:last-child td {
    border-bottom: none;
}

.st-table tbody tr:hover td {
    background: color-mix(in srgb, var(--text-title) 3%, transparent);
}

.st-table td.center {
    text-align: center;
}

.st-table-empty {
    padding: 20px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

.st-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-user-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-soft));
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.st-user-avatar.av-1 {
    background: linear-gradient(135deg, #eba02e, #ec7d63);
}
.st-user-avatar.av-2 {
    background: linear-gradient(135deg, #1fcbb0, #54b6e6);
}

.st-user-meta {
    min-width: 0;
}

.st-user-meta .n {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1.3;
}

.st-user-meta .n small {
    color: var(--text-muted);
    font-weight: 500;
}

.st-user-meta .sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.st-user-email {
    direction: ltr;
    text-align: start;
    font-size: 12.5px;
}

/* صفّ عضو بنمط تبويب «عام» (sg-item): هوية العضو يميناً، الدور والحالة
   مكدّستان عمودياً لتقليل العرض المستهلك، والأزرار يساراً — وعند الضيق
   يلتفّ الصفّ فتنزل الحالة والأزرار لسطرٍ ثانٍ بدل التزاحم. */
.sg-user-row {
    gap: 14px;
    padding: 13px 16px;
    min-height: 64px;
    flex-wrap: wrap;
}

.sg-user-row .st-user-cell {
    flex: 1 1 160px;
    min-width: 0;
}

.sg-user-row .st-user-meta {
    display: flex;
    flex-direction: column;
}

.sg-user-row .st-user-meta .n {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-user-row .st-user-meta .sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-user-mail {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* الدور فوق الحالة عمودياً: نصف العرض، ومحاذاة طرفية موحّدة مع الأزرار */
.sg-user-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: none;
}

.sg-user-row .sg-item-acts {
    flex-wrap: wrap;
    gap: 5px;
}

/* شاشة ضيقة: الهوية سطراً كاملاً ثم الحالة والأزرار أسفلها موزَّعة */
@media (max-width: 700px) {
    .sg-user-row .st-user-cell {
        flex: 1 1 100%;
    }

    .sg-user-row .sg-user-value {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .sg-user-row .sg-item-acts {
        margin-inline-start: auto;
    }
}

.sg-user-empty {
    padding: 18px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

/* زرّ عين كلمة المرور في نموذج المستخدم: أيقونتان داخل الزر يقلبهما صنف
   is-shown (بلا استبدال HTML كي لا تنهار أبعاد الأيقونة المحقونة) */
.pw-eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    transition: color 0.15s ease;
}

.pw-eye-btn:hover {
    color: var(--primary);
}

.pw-eye-btn svg {
    width: 16px;
    height: 16px;
}

.pw-eye-btn .ico-off {
    display: none;
}

.pw-eye-btn.is-shown .ico-on {
    display: none;
}
.pw-eye-btn.is-shown .ico-off {
    display: block;
}

.st-role-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.st-role-pill.role-owner {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

.st-role-pill.role-admin {
    background: color-mix(in srgb, var(--new-text) 13%, transparent);
    color: var(--new-text);
    border-color: color-mix(in srgb, var(--new-text) 25%, transparent);
}

.st-role-pill.role-staff {
    background: color-mix(in srgb, var(--ready-text) 13%, transparent);
    color: var(--ready-text);
    border-color: color-mix(in srgb, var(--ready-text) 25%, transparent);
}

.st-role-pill.role-viewer {
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    color: var(--text-secondary);
    border-color: var(--border-main);
}

.st-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ready-text);
}

.st-status-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ready-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ready-text) 20%, transparent);
}

.st-status-dot.off {
    color: var(--text-muted);
}

.st-status-dot.off::before {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 18%, transparent);
}

.st-row-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.st-btn-mini {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.st-btn-mini.primary {
    background: var(--primary);
    color: #ffffff;
}
.st-btn-mini.primary:hover {
    background: var(--primary-hover);
}

.st-btn-mini.soft {
    background: var(--bg-main);
    color: var(--text-main);
    border-color: var(--border-main);
}

.st-btn-mini.soft:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.st-btn-mini.soft-danger {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

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

.st-btn-mini.soft-ready {
    background: color-mix(in srgb, var(--ready-text) 12%, transparent);
    color: var(--ready-text);
    border-color: color-mix(in srgb, var(--ready-text) 25%, transparent);
}

.st-btn-mini.soft-ready:hover {
    background: var(--ready-text);
    color: #ffffff;
}

.st-info-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--new-text) 6%, var(--bg-main));
    border: 1px solid color-mix(in srgb, var(--new-text) 18%, var(--border-main));
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.st-info-note svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--new-text);
    margin-top: 3px;
}

.st-info-note b {
    color: var(--text-title);
}

/* ---------- Toast ---------- */
.st-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--text-title);
    color: var(--surface-solid);
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(80px);
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}

.st-toast.is-shown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.st-toast .st-toast-ico {
    color: var(--ready-text);
}

/* ---------- استجابة + حركة مخفَّضة ---------- */
@media (max-width: 760px) {
    .st-form-grid {
        grid-template-columns: 1fr;
    }
    .st-card {
        padding: 18px;
    }
    .st-picker-row {
        flex-wrap: wrap;
    }
    .st-search-box {
        min-width: 100%;
    }
}

@media (max-width: 700px) {
    .st-data-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .st-data-card .btn {
        width: 100%;
        justify-content: center;
    }
    .st-brand-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .st-brand-actions {
        width: 100%;
    }
    .st-brand-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-data-card,
    .st-mini-btn,
    .st-btn-mini,
    .st-chip,
    .st-toast {
        transition: none;
    }
}