@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/ibm-plex/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/ibm-plex/IBMPlexSansArabic-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/ibm-plex/IBMPlexSansArabic-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/ibm-plex/IBMPlexSansArabic-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* OpSync UI Foundation v1.0
   Arabic-first, RTL-first, premium SaaS design system. */

:root {
    color-scheme: light;

    --opsync-brand-900: #0D5C57;
    --opsync-brand-700: #117A70;
    --opsync-brand-500: #19A38C;
    --opsync-brand-mint-300: #6EDBCB;
    --opsync-brand-ink: #102A3A;
    --opsync-brand-text: #0F172A;
    --opsync-brand-muted: #5E6B75;
    --opsync-brand-surface: #F3F8F7;
    --opsync-brand-border: #DCEBE8;
    --opsync-brand-gradient: linear-gradient(135deg, #0D5C57 0%, #117A70 55%, #19A38C 100%);

    --ops-color-primary-900: #0b2251;
    --ops-color-primary-800: #12336f;
    --ops-color-primary-700: #17458f;
    --ops-color-primary-600: #2258c8;
    --ops-color-primary-500: #2f68dc;
    --ops-color-primary-100: #eaf0ff;

    --ops-color-secondary-700: var(--opsync-brand-900);
    --ops-color-secondary-600: var(--opsync-brand-700);
    --ops-color-secondary-100: var(--opsync-brand-surface);
    --ops-color-accent-600: #b7791f;
    --ops-color-accent-100: #fff7e8;

    --ops-color-success-700: #087443;
    --ops-color-success-100: #ecfdf3;
    --ops-color-warning-700: #b54708;
    --ops-color-warning-100: #fffaeb;
    --ops-color-danger-700: #b42318;
    --ops-color-danger-100: #fef3f2;
    --ops-color-info-700: #175cd3;
    --ops-color-info-100: #eff8ff;

    --ops-bg-page: #f5f7fb;
    --ops-bg-shell: #eef3f8;
    --ops-surface: #ffffff;
    --ops-surface-soft: #f8fafc;
    --ops-surface-muted: #f2f4f7;
    --ops-surface-secondary: #f7f9fc;
    --ops-surface-inset: #eef2f7;
    --ops-border: #e5e7eb;
    --ops-border-strong: #d0d5dd;

    --ops-text: #101828;
    --ops-text-strong: #0b1220;
    --ops-text-muted: #667085;
    --ops-text-soft: #98a2b3;
    --ops-text-inverse: #ffffff;

    --ops-radius-xs: 6px;
    --ops-radius-sm: 10px;
    --ops-radius-md: 14px;
    --ops-radius-lg: 18px;
    --ops-radius-xl: 22px;
    --ops-radius-pill: 999px;

    --ops-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --ops-shadow-sm: 0 8px 20px rgba(16, 24, 40, .06);
    --ops-shadow-md: 0 18px 46px rgba(16, 24, 40, .08);
    --ops-shadow-lg: 0 28px 80px rgba(16, 24, 40, .12);

    --ops-font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
    --ops-font-size-xs: .75rem;
    --ops-font-size-sm: .875rem;
    --ops-font-size-base: 1rem;
    --ops-font-size-md: 1.0625rem;
    --ops-font-size-lg: 1.25rem;
    --ops-font-size-xl: 1.5rem;
    --ops-font-size-2xl: clamp(1.9rem, 3vw, 2.8rem);
    --ops-font-weight-medium: 500;
    --ops-font-weight-bold: 700;
    --ops-font-weight-heavy: 800;
    --ops-line-height-tight: 1.25;
    --ops-line-height-body: 1.75;

    --ops-space-1: .25rem;
    --ops-space-2: .5rem;
    --ops-space-3: .75rem;
    --ops-space-4: 1rem;
    --ops-space-5: 1.25rem;
    --ops-space-6: 1.5rem;
    --ops-space-7: 1.75rem;
    --ops-space-8: 2rem;
    --ops-space-10: 2.5rem;
    --ops-space-12: 3rem;

    --ops-sidebar-width: 292px;
    --ops-topbar-height: 72px;
    --ops-content-max-width: 1440px;
    --ops-content-narrow-width: 960px;
    --ops-control-height: 44px;
    --ops-control-height-sm: 38px;
    --ops-focus-ring: 0 0 0 3px rgba(17, 122, 112, .24);
    --ops-motion-fast: 120ms;
    --ops-motion-normal: 180ms;
    --ops-z-sticky: 30;
    --ops-z-dropdown: 100;
    --ops-z-overlay: 900;
    --ops-z-dialog: 1000;
    --ops-z-toast: 1100;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; direction: rtl; }
html { background: var(--ops-bg-page); }
body {
    font-family: var(--ops-font-family);
    color: var(--ops-text);
    background: var(--ops-bg-page);
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
p { margin: 0; line-height: 1.85; color: var(--ops-text-muted); }
h1, h2, h3 { color: var(--ops-text-strong); margin: 0; line-height: 1.25; }
h1 { font-size: var(--ops-font-size-2xl); letter-spacing: 0; }
h1:focus { outline: none; }
h2 { font-size: var(--ops-font-size-xl); }
h3 { font-size: var(--ops-font-size-lg); }
small { color: var(--ops-text-muted); }
code { direction: ltr; unicode-bidi: plaintext; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--opsync-brand-700);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto;
        transition-duration: .01ms;
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }
}

/* Centralized utility patterns */
.topbar-user { display: flex; align-items: center; gap: var(--ops-space-3); }
.input-inline { width: auto; }
.input-narrow { width: 80px; }
.top-gap-sm { margin-top: var(--ops-space-4); }
.scroll-panel-md { max-height: 24rem; overflow-y: auto; }
.scroll-panel-lg { max-height: 28rem; overflow-y: auto; }
.check-line-bottom { margin-top: auto; }
.text-muted { color: var(--ops-text-muted); }
.section-description { margin-bottom: var(--ops-space-4); color: var(--ops-text-muted); }
.subsection-heading { margin-top: var(--ops-space-6); }
.section-title { margin-top: var(--ops-space-4); font-size: var(--ops-font-size-base); }
.state-page { min-height: 360px; }
.state-page-large { min-height: 400px; }
.state-icon-md { width: 64px; height: 64px; font-size: 1.6rem; }
.state-icon-lg { width: 72px; height: 72px; font-size: 2rem; }
.state-title-md { font-size: 1.4rem; }
.state-title-lg { font-size: 1.6rem; }
.error-state-icon { background: var(--ops-color-danger-100); color: var(--ops-color-danger-700); }

/* Layout */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--ops-sidebar-width) minmax(0, 1fr);
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: var(--ops-space-6);
    background:
        radial-gradient(circle at 24% 0%, rgba(47, 104, 220, .28), transparent 18rem),
        linear-gradient(180deg, #081226, #0b1933 54%, #09111f);
    color: var(--ops-text-inverse);
    border-left: 1px solid rgba(255, 255, 255, .08);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    padding: var(--ops-space-2);
    margin-bottom: var(--ops-space-6);
    border-radius: var(--ops-radius-lg);
}
.brand-mark,
.brand-orb,
.product-lockup span,
.auth-panel-brand span {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--ops-color-primary-500), var(--ops-color-secondary-600));
    box-shadow: 0 14px 34px rgba(47, 104, 220, .28);
    flex: 0 0 auto;
}
.brand strong { display: block; font-size: 1.08rem; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.62); }
.nav-stack { display: grid; gap: 4px; }
.nav-caption {
    display: block;
    margin: var(--ops-space-6) var(--ops-space-3) var(--ops-space-2);
    color: rgba(255,255,255,.44);
    font-size: var(--ops-font-size-xs);
    font-weight: 800;
}
.nav-stack a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .72rem .88rem;
    border-radius: 14px;
    color: rgba(255,255,255,.74);
    font-weight: 700;
    transition: background-color .16s ease, color .16s ease;
}
.nav-stack a:hover,
.nav-stack a.active {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.nav-stack a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ops-color-secondary-600);
}
.main-area {
    width: min(100%, var(--ops-content-max-width));
    margin-inline: auto;
    padding: var(--ops-space-6) clamp(1rem, 2.4vw, 2.4rem) var(--ops-space-12);
}
.topbar {
    min-height: var(--ops-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-4);
    margin-bottom: var(--ops-space-5);
}
.topbar span { display: block; color: var(--ops-text-muted); font-size: var(--ops-font-size-sm); }
.topbar strong { display: block; color: var(--ops-text-strong); font-size: 1.12rem; margin-top: 2px; }
.topbar-link { color: var(--ops-color-primary-600); font-weight: 900; }
.user-chip {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius-pill);
    padding: .46rem .52rem .46rem .9rem;
    box-shadow: var(--ops-shadow-xs);
}
.user-chip button {
    border: 0;
    color: var(--ops-text-strong);
    background: var(--ops-surface-muted);
    border-radius: var(--ops-radius-pill);
    padding: .48rem .9rem;
    font-weight: 800;
}

/* Shared page patterns */
.ops-page-header,
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ops-space-6);
    margin-bottom: var(--ops-space-6);
}
.ops-page-header__content,
.page-head > div:first-child { max-width: 820px; }
.ops-page-header__actions,
.page-head > .actions {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    flex-wrap: wrap;
}
.eyebrow {
    margin: 0 0 var(--ops-space-2);
    color: var(--ops-color-primary-600);
    font-size: var(--ops-font-size-xs);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ops-page-header p:not(.eyebrow),
.page-head p:not(.eyebrow) { margin-top: var(--ops-space-3); max-width: 740px; }

.ops-card,
.card,
.metric-card,
.ops-stat-card,
.auth-required-card {
    background: var(--ops-surface);
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius-xl);
    box-shadow: var(--ops-shadow-sm);
}
.ops-card,
.card { padding: var(--ops-space-6); }
.ops-card__header,
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ops-space-4);
    margin-bottom: var(--ops-space-5);
}
.ops-card__header p { margin-top: var(--ops-space-2); }
.ops-card__actions { display: flex; gap: var(--ops-space-3); flex-wrap: wrap; }
.ops-card__body > :first-child { margin-top: 0; }
.hero-card {
    padding: clamp(1.6rem, 4vw, 3.2rem);
    border-radius: var(--ops-radius-xl);
    color: #fff;
    background:
        radial-gradient(circle at 18% 14%, rgba(15, 139, 130, .30), transparent 18rem),
        linear-gradient(135deg, var(--ops-color-primary-900), var(--ops-color-primary-700) 55%, var(--ops-color-primary-500));
    box-shadow: var(--ops-shadow-lg);
}
.hero-card h1 { color: #fff; }
.hero-card p { color: rgba(255,255,255,.78); max-width: 820px; }

.metrics,
.ops-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ops-space-4); }
.metric-card,
.ops-stat-card { padding: var(--ops-space-5); min-height: 132px; }
.metric-card span,
.ops-stat-card__label { color: var(--ops-text-muted); font-weight: 800; font-size: var(--ops-font-size-sm); }
.metric-card strong,
.ops-stat-card strong { display: block; margin: .55rem 0 .25rem; font-size: 2rem; color: var(--ops-text-strong); letter-spacing: -.03em; }
.metric-card small,
.ops-stat-card small { display: block; color: var(--ops-text-muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ops-space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ops-space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ops-space-4); }
.ops-grid-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops-grid-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.top-gap { margin-top: var(--ops-space-5); }
.muted { color: var(--ops-text-muted); }
.actions { display: flex; gap: var(--ops-space-3); flex-wrap: wrap; align-items: center; }

/* Controls */
.btn,
.ops-button,
.ops-small-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: 15px;
    min-height: 42px;
    padding: .68rem 1rem;
    font-weight: 900;
    line-height: 1;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover,
.ops-button:hover,
.ops-small-button:hover { transform: translateY(-1px); }
.btn.primary,
.ops-button {
    color: #fff;
    background: linear-gradient(135deg, var(--ops-color-primary-600), var(--ops-color-primary-500));
    box-shadow: 0 10px 22px rgba(47, 104, 220, .22);
}
.btn.primary:hover,
.ops-button:hover { box-shadow: 0 14px 28px rgba(47, 104, 220, .26); }
.btn.ghost {
    color: var(--ops-text-strong);
    background: var(--ops-surface);
    border-color: var(--ops-border);
}
.btn.soft {
    color: #fff;
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.24);
}
.btn.wide { width: 100%; }
.ops-small-button {
    min-height: 36px;
    padding: .5rem .8rem;
    border-radius: 12px;
    color: var(--ops-text-strong);
    background: var(--ops-surface-muted);
    border-color: transparent;
    box-shadow: none;
}
button:disabled,
.btn:disabled,
.ops-button:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.link { color: var(--ops-color-primary-600); font-weight: 900; }

label { display: grid; gap: .44rem; color: #344054; font-weight: 800; }
.input,
select.input,
textarea.input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ops-border);
    border-radius: 14px;
    background: #fff;
    color: var(--ops-text);
    padding: .72rem .88rem;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
textarea.input { min-height: 112px; resize: vertical; }
.input::placeholder { color: #98a2b3; }
.input:focus {
    border-color: var(--ops-color-primary-500);
    box-shadow: 0 0 0 4px rgba(47, 104, 220, .12);
}
.form-stack { display: grid; gap: var(--ops-space-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ops-space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ops-space-4); }
.form-grid .span-2,
.span-2 { grid-column: 1 / -1; }
.check-line {
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    color: var(--ops-text-muted);
    font-weight: 800;
}
.check-line input { width: 18px; height: 18px; accent-color: var(--ops-color-primary-600); }
.ltr { direction: ltr; text-align: left; unicode-bidi: plaintext; }

/* Tables and states */
.table-wrap { overflow-x: auto; border-radius: var(--ops-radius-lg); border: 1px solid var(--ops-border); }
.table { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--ops-surface); }
.table th {
    text-align: right;
    padding: .92rem 1rem;
    color: var(--ops-text-muted);
    background: #f9fafb;
    border-bottom: 1px solid var(--ops-border);
    font-size: var(--ops-font-size-sm);
    font-weight: 900;
    white-space: nowrap;
}
.table td {
    padding: 1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fbfdff; }
.table code { display: inline-flex; background: var(--ops-surface-muted); border: 1px solid var(--ops-border); border-radius: 10px; padding: .2rem .5rem; color: #344054; }
.table-actions { display: flex; gap: var(--ops-space-2); flex-wrap: wrap; }

.badge,
.ops-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 26px;
    padding: .22rem .64rem;
    border-radius: var(--ops-radius-pill);
    font-size: var(--ops-font-size-xs);
    font-weight: 900;
    color: #344054;
    background: var(--ops-surface-muted);
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge.success,
.ops-badge.success { color: var(--ops-color-success-700); background: var(--ops-color-success-100); }
.badge.warning,
.ops-badge.warning { color: var(--ops-color-warning-700); background: var(--ops-color-warning-100); }
.badge.danger,
.ops-badge.danger { color: var(--ops-color-danger-700); background: var(--ops-color-danger-100); }
.badge.info,
.ops-badge.info { color: var(--ops-color-info-700); background: var(--ops-color-info-100); }
.alert {
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius-md);
    padding: .85rem 1rem;
    margin-bottom: var(--ops-space-4);
    color: var(--ops-text);
    background: var(--ops-surface-soft);
    line-height: 1.75;
}
.alert.success { color: var(--ops-color-success-700); background: var(--ops-color-success-100); border-color: #abefc6; }
.alert.info { color: var(--ops-color-info-700); background: var(--ops-color-info-100); border-color: #b2ddff; }
.alert.warning { color: var(--ops-color-warning-700); background: var(--ops-color-warning-100); border-color: #fedf89; }
.alert.danger { color: var(--ops-color-danger-700); background: var(--ops-color-danger-100); border-color: #fecdca; }
.empty,
.ops-empty-state {
    display: grid;
    place-items: center;
    gap: var(--ops-space-2);
    text-align: center;
    min-height: 176px;
    padding: var(--ops-space-7);
    color: var(--ops-text-muted);
    background: linear-gradient(180deg, #fbfdff, #f8fafc);
    border: 1px dashed #cbd5e1;
    border-radius: var(--ops-radius-lg);
}
.ops-empty-state__icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--ops-color-primary-600);
    background: var(--ops-color-primary-100);
    font-weight: 900;
}
.ops-empty-state strong { color: var(--ops-text-strong); }
.ops-empty-state p { max-width: 440px; }
.ops-empty-state__action { margin-top: var(--ops-space-2); }
.ops-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ops-space-3);
    min-height: 160px;
    color: var(--ops-text-muted);
    font-weight: 800;
}
.ops-loading-state span:first-child {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #d9e2f2;
    border-top-color: var(--ops-color-primary-600);
    animation: ops-spin .8s linear infinite;
}
@keyframes ops-spin { to { transform: rotate(360deg); } }

/* Auth */
.auth-experience {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 500px);
    background:
        radial-gradient(circle at top right, rgba(47, 104, 220, .14), transparent 26rem),
        var(--ops-bg-page);
}
.auth-showcase {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ops-space-8);
    padding: clamp(2rem, 4vw, 4rem);
    color: #fff;
    background:
        radial-gradient(circle at 14% 12%, rgba(15, 139, 130, .28), transparent 18rem),
        linear-gradient(135deg, #081226, var(--ops-color-primary-900) 58%, var(--ops-color-primary-700));
}
.auth-showcase::after {
    content: "";
    position: absolute;
    inset: auto -8rem -10rem auto;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.product-lockup,
.auth-panel-brand { display: flex; align-items: center; gap: var(--ops-space-3); position: relative; z-index: 1; }
.product-lockup strong,
.auth-panel-brand strong { display: block; font-size: 1.08rem; }
.product-lockup small { display: block; margin-top: 2px; color: rgba(255,255,255,.68); }
.auth-panel-brand small { display: block; margin-top: 2px; color: var(--ops-text-muted); }
.auth-copy { max-width: 760px; position: relative; z-index: 1; }
.auth-copy .eyebrow { color: #adc2ff; }
.auth-copy h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.16; }
.auth-copy p { color: rgba(255,255,255,.76); margin-top: var(--ops-space-4); font-size: 1.08rem; }
.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3.2vw, 2.8rem);
    background: rgba(255,255,255,.96);
    box-shadow: -24px 0 70px rgba(16,24,40,.10);
}
.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding: .3rem;
    margin: var(--ops-space-6) 0;
    background: var(--ops-surface-muted);
    border-radius: 16px;
}
.auth-tabs a {
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--ops-text-muted);
    font-weight: 900;
}
.auth-tabs a.active {
    color: var(--ops-color-primary-600);
    background: #fff;
    box-shadow: var(--ops-shadow-xs);
}
.activation-callout {
    margin-top: var(--ops-space-5);
    padding: var(--ops-space-5);
    border-radius: var(--ops-radius-lg);
    background: var(--ops-surface-soft);
    border: 1px solid var(--ops-border);
    display: grid;
    gap: .25rem;
}
.activation-callout strong { color: var(--ops-text-strong); }
.activation-callout a { color: var(--ops-color-primary-600); font-weight: 900; }
.ops-visual {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--ops-space-4);
}
.ops-visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ops-space-3); }
.ops-visual-card {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--ops-radius-lg);
    padding: var(--ops-space-5);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
}
.ops-visual-card strong { display: block; color: #fff; margin-bottom: .35rem; }
.ops-visual-card span { color: rgba(255,255,255,.68); line-height: 1.7; }
.activation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ops-space-3); position: relative; z-index: 1; }
.activation-steps div {
    min-height: 94px;
    padding: var(--ops-space-4);
    border-radius: var(--ops-radius-lg);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
}
.activation-steps strong { display: block; color: #fff; font-size: 1.4rem; }
.activation-steps span { display: block; color: rgba(255,255,255,.70); margin-top: .35rem; }

/* Legacy visual classes retained for compatibility */
.visual-window,
.visual-device-card,
.visual-store-card { display: none; }
.visual-dashboard,
.visual-table { display: grid; }
.pipeline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ops-space-2);
}
.pipeline div {
    padding: .55rem .8rem;
    border-radius: var(--ops-radius-pill);
    background: var(--ops-surface-muted);
    color: var(--ops-text-strong);
    font-weight: 900;
}
.pipeline span { color: var(--ops-text-soft); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ops-space-4); }
.module-card { padding: var(--ops-space-5); border-radius: var(--ops-radius-lg); border: 1px solid var(--ops-border); background: #fff; }
.module-icon { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: var(--ops-color-primary-100); color: var(--ops-color-primary-600); font-weight: 900; margin-bottom: var(--ops-space-3); }

@media (max-width: 1180px) {
    .metrics,
    .ops-stats-grid,
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid,
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-experience { grid-template-columns: minmax(0, 1fr); }
    .auth-showcase { min-height: auto; }
    .auth-panel { box-shadow: none; }
}

@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .brand { margin-bottom: var(--ops-space-4); }
    .main-area { padding: var(--ops-space-4) var(--ops-space-4) var(--ops-space-8); }
    .topbar,
    .ops-page-header,
    .page-head,
    .ops-card__header,
    .table-header { align-items: stretch; flex-direction: column; }
    .grid-2,
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ops-grid-columns-3,
    .ops-grid-columns-4 { grid-template-columns: 1fr; }
    .metrics,
    .ops-stats-grid,
    .grid,
    .grid-4,
    .module-grid,
    .form-grid,
    .ops-visual-grid,
    .activation-steps { grid-template-columns: 1fr; }
    .auth-showcase { padding: var(--ops-space-6); }
    .auth-panel { padding: var(--ops-space-5); }
    .user-chip { width: 100%; justify-content: space-between; }
    .table { min-width: 680px; }
    h1 { font-size: 2rem; }
}

/* ─── SearchFilterBar ─── */
.ops-search-bar {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--ops-space-5);
}
.ops-search-bar .search-input {
    flex: 1;
    min-width: 200px;
}
.ops-search-bar .filter-chips {
    display: flex;
    gap: var(--ops-space-2);
    flex-wrap: wrap;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .35rem .72rem;
    border-radius: var(--ops-radius-pill);
    border: 1px solid var(--ops-border);
    background: var(--ops-surface);
    color: var(--ops-text-muted);
    font-weight: 800;
    font-size: var(--ops-font-size-sm);
    cursor: pointer;
    transition: all .14s ease;
}
.filter-chip:hover,
.filter-chip.active {
    background: var(--ops-color-primary-100);
    color: var(--ops-color-primary-600);
    border-color: var(--ops-color-primary-500);
}

/* ─── FormSection ─── */
.ops-form-section {
    margin-bottom: var(--ops-space-6);
}
.ops-form-section__title {
    font-size: var(--ops-font-size-lg);
    color: var(--ops-text-strong);
    margin-bottom: var(--ops-space-2);
}
.ops-form-section__desc {
    color: var(--ops-text-muted);
    font-size: var(--ops-font-size-sm);
    margin-bottom: var(--ops-space-4);
}

/* ─── ErrorState ─── */
.ops-error-state {
    display: grid;
    place-items: center;
    gap: var(--ops-space-3);
    text-align: center;
    min-height: 176px;
    padding: var(--ops-space-7);
    color: var(--ops-color-danger-700);
    background: var(--ops-color-danger-100);
    border: 1px solid #fecdca;
    border-radius: var(--ops-radius-lg);
}
.ops-error-state strong { color: var(--ops-color-danger-700); }
.ops-error-state p { color: var(--ops-text-muted); max-width: 440px; }

/* ─── Modal / Dialog ─── */
.ops-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .48);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: var(--ops-space-6);
}
.ops-modal {
    background: var(--ops-surface);
    border-radius: var(--ops-radius-xl);
    box-shadow: var(--ops-shadow-lg);
    width: min(100%, 560px);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--ops-space-6);
}
.ops-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ops-space-4);
    margin-bottom: var(--ops-space-5);
}
.ops-modal__header h3 { margin: 0; }
.ops-modal__body { margin-bottom: var(--ops-space-5); }
.ops-modal__footer {
    display: flex;
    justify-content: flex-start;
    gap: var(--ops-space-3);
}

/* ─── Breadcrumbs ─── */
.ops-breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    margin-bottom: var(--ops-space-4);
    font-size: var(--ops-font-size-sm);
    color: var(--ops-text-muted);
}
.ops-breadcrumbs a { color: var(--ops-color-primary-600); font-weight: 800; }
.ops-breadcrumbs span { color: var(--ops-text-soft); }

/* ─── Danger button variant ─── */
.btn.danger {
    color: #fff;
    background: linear-gradient(135deg, var(--ops-color-danger-700), #d92b20);
    box-shadow: 0 8px 18px rgba(180, 35, 24, .18);
}
.btn.danger:hover { box-shadow: 0 12px 24px rgba(180, 35, 24, .22); }

/* ─── Responsive sidebar toggle ─── */
.sidebar-toggle {
    display: none;
    min-height: 40px;
    min-width: 40px;
    padding: .5rem;
    border: 1px solid var(--ops-border);
    border-radius: var(--ops-radius-sm);
    background: var(--ops-surface);
    color: var(--ops-text-strong);
    font-weight: 900;
}
@media (max-width: 900px) {
    .sidebar-toggle { display: inline-flex; }
    .sidebar.sidebar-hidden { display: none; }
}

/* ─── StatusBadge additional variants ─── */
.badge.trial { color: #93370d; background: #fffaeb; border-color: #fedf89; }
.badge.pending { color: var(--ops-color-warning-700); background: var(--ops-color-warning-100); }
.badge.expired { color: var(--ops-color-danger-700); background: var(--ops-color-danger-100); }
.badge.neutral { color: var(--ops-text-muted); background: var(--ops-surface-muted); }

/* ─── DataTable improvements ─── */
.table .status-cell { white-space: nowrap; }
.table .action-cell { white-space: nowrap; }

/* ─── Step indicator (activation wizard) ─── */
.step-indicator {
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    margin-bottom: var(--ops-space-6);
}
.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: var(--ops-font-size-sm);
    border: 2px solid var(--ops-border);
    color: var(--ops-text-muted);
    background: var(--ops-surface);
}
.step-dot.active {
    background: var(--ops-color-primary-600);
    color: #fff;
    border-color: var(--ops-color-primary-600);
}
.step-dot.completed {
    background: var(--ops-color-success-700);
    color: #fff;
    border-color: var(--ops-color-success-700);
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--ops-border);
}
.step-line.completed {
    background: var(--ops-color-success-700);
}

/* ======================================================================
   OpSync Command Center UI — Phase A
   Centralized premium RTL dashboard foundation
   ====================================================================== */
:root {
    --ops-color-primary-900: #071a3b;
    --ops-color-primary-800: #0b2855;
    --ops-color-primary-700: #123d78;
    --ops-color-primary-600: #1856a7;
    --ops-color-primary-500: #2d72d9;
    --ops-color-primary-100: #eaf2ff;
    --ops-color-secondary-700: var(--opsync-brand-900);
    --ops-color-secondary-600: var(--opsync-brand-700);
    --ops-color-secondary-100: var(--opsync-brand-surface);
    --ops-bg-page: #f3f6fa;
    --ops-bg-shell: #eef3f8;
    --ops-surface-soft: #f7f9fc;
    --ops-border: #e1e7ef;
    --ops-border-strong: #ccd6e3;
    --ops-text: #26364d;
    --ops-text-strong: #10233f;
    --ops-text-muted: #6a7a90;
    --ops-text-soft: #9aa8ba;
    --ops-radius-sm: 10px;
    --ops-radius-md: 14px;
    --ops-radius-lg: 18px;
    --ops-radius-xl: 24px;
    --ops-shadow-sm: 0 8px 24px rgba(16,35,63,.055);
    --ops-shadow-md: 0 18px 46px rgba(16,35,63,.075);
    --ops-sidebar-width: 278px;
    --ops-topbar-height: 84px;
    --ops-content-max-width: 1680px;
}

body {
    background: var(--ops-bg-page);
    font-weight: var(--ops-font-weight-medium);
}
.app-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }

/* Shell */
.app-shell {
    display: grid;
    grid-template-columns: var(--ops-sidebar-width) minmax(0, 1fr);
    background: var(--ops-bg-page);
}
.sidebar {
    grid-column: 1;
    grid-row: 1;
    padding: 22px 16px 18px;
    background:
        radial-gradient(circle at 15% 0%, rgba(33,111,188,.18), transparent 20rem),
        linear-gradient(180deg, #07172f 0%, #091b36 50%, #06152b 100%);
    border-left: 0;
    border-right: 0;
    box-shadow: 14px 0 40px rgba(7,26,59,.08);
    z-index: 50;
}
.brand {
    min-height: 68px;
    padding: 8px 10px 18px;
    margin: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
}
.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: none;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-logo { display: block; width: 44px; height: 44px; border-radius: 0; object-fit: contain; background: transparent; box-shadow: none; }
.brand strong { font-size: 1.12rem; letter-spacing: -.02em; }
.brand small { font-size: .72rem; color: rgba(255,255,255,.52); }
.nav-stack { gap: 3px; }
.nav-caption {
    margin: 22px 12px 7px;
    color: rgba(255,255,255,.34);
    font-size: .69rem;
    letter-spacing: .035em;
}
.nav-stack a.nav-item {
    gap: 12px;
    min-height: 42px;
    padding: 9px 11px;
    color: rgba(232,241,255,.66);
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .88rem;
    font-weight: 700;
}
.nav-stack a.nav-item .app-icon { width: 18px; height: 18px; color: rgba(142,180,225,.72); }
.nav-stack a.nav-item:hover {
    background: rgba(255,255,255,.055);
    color: #fff;
}
.nav-stack a.nav-item.active {
    color: #fff;
    background: linear-gradient(270deg, rgba(32,119,186,.20), rgba(25,163,140,.14));
    border-color: rgba(110,219,203,.18);
    box-shadow: inset 3px 0 0 var(--opsync-brand-500);
}
.nav-stack a.nav-item.active .app-icon { color: var(--opsync-brand-mint-300); }
.nav-stack a.active::before { display: none; }
.sidebar-status {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 24px 6px 0;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}
.sidebar-status .status-pulse { width: 9px; height: 9px; border-radius: 50%; background: #36c5a9; box-shadow: 0 0 0 5px rgba(54,197,169,.11); }
.sidebar-status strong,.sidebar-status small { display: block; }
.sidebar-status strong { color: rgba(255,255,255,.84); font-size: .78rem; }
.sidebar-status small { color: rgba(255,255,255,.38); font-size: .68rem; margin-top: 2px; }
.sidebar-backdrop { display: none; }

/* التنقل المركزي لمساحات المدرسة والمعلم */
.workspace-navigation { display: grid; gap: 7px; }
.workspace-nav-group { display: grid; gap: 3px; }
.workspace-nav-group__toggle {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(232,241,255,.72);
    background: transparent;
    text-align: start;
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}
.workspace-nav-group__toggle:hover,
.workspace-nav-group__toggle:focus-visible,
.workspace-nav-group.is-active > .workspace-nav-group__toggle {
    color: #fff;
    background: rgba(255,255,255,.065);
    border-color: rgba(90,173,217,.13);
}
.workspace-nav-group__toggle .app-icon { width: 18px; height: 18px; color: #63d9cf; }
.workspace-nav-group__chevron { transition: transform .16s ease; text-align: center; }
.workspace-nav-group__toggle[aria-expanded="true"] .workspace-nav-group__chevron { transform: rotate(180deg); }
.workspace-nav-group__items { display: grid; gap: 3px; padding-inline-start: 10px; }
.workspace-nav-group__items[hidden] { display: none; }
.workspace-nav-subcaption {
    display: block;
    margin: 12px 11px 4px;
    color: rgba(255,255,255,.42);
    font-size: .67rem;
    font-weight: 800;
}
.workspace-nav-group .ops-badge { margin-inline-start: auto; }
.workspace-nav-group .nav-item.is-advanced { margin-inline-start:10px; width:calc(100% - 10px); font-size:.82rem; opacity:.9; }

.main-area {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0 34px 48px;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: var(--ops-topbar-height);
    margin: 0 -34px 28px;
    padding: 14px 34px;
    border-bottom: 1px solid rgba(218,226,236,.85);
    background: rgba(247,249,252,.9);
    backdrop-filter: blur(18px);
}
.topbar-context { display: flex; align-items: center; gap: 13px; min-width: 180px; }
.topbar-context > div > span { color: var(--ops-text-soft); font-size: .7rem; font-weight: 800; }
.topbar-context > div > strong { display: block; color: var(--ops-text-strong); font-size: .98rem; margin-top: 2px; }
.topbar-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; }
.global-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(360px, 31vw);
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--ops-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16,35,63,.025);
}
.global-search .app-icon { width: 17px; color: var(--ops-text-soft); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ops-text); }
.global-search input::placeholder { color: #a4afbd; }
.global-search kbd { direction: ltr; padding: 2px 6px; border: 1px solid var(--ops-border); border-radius: 6px; color: var(--ops-text-soft); background: var(--ops-surface-soft); font: 600 .65rem/1.5 var(--ops-font-family); }
.date-context {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ops-border);
    border-radius: 11px;
    color: var(--ops-text-muted) !important;
    background: rgba(255,255,255,.65);
    white-space: nowrap;
}
.date-context .app-icon { width: 16px; }
.icon-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ops-border);
    border-radius: 11px;
    background: #fff;
    color: var(--ops-text-muted);
}
.notification-button > span { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #ef6a61; border: 2px solid #fff; }
.user-chip {
    gap: 9px;
    padding: 4px 5px 4px 10px;
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
}
.user-avatar { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff !important; background: linear-gradient(145deg,#1d5ca8,#0c948a); font-weight: 900; }
.user-meta { min-width: 88px; }
.user-meta strong,.user-meta small { display: block; line-height: 1.3; }
.user-meta strong { max-width: 115px; overflow: hidden; text-overflow: ellipsis; color: var(--ops-text-strong); font-size: .77rem; white-space: nowrap; }
.user-meta small { color: var(--ops-text-soft); font-size: .65rem; }
.user-chip button { padding: 6px 8px; background: var(--ops-surface-soft); color: var(--ops-text-muted); font-size: .72rem; }
.page-content { width: min(100%, var(--ops-content-max-width)); margin: 0 auto; }

/* Core components */
.ops-page-header { align-items: flex-end; margin-bottom: 24px; padding: 0 2px; }
.ops-page-header__content { max-width: 790px; }
.eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ops-color-secondary-700);
    font-size: .72rem;
    letter-spacing: .025em;
}
.eyebrow > span { width: 18px; height: 2px; border-radius: 4px; background: currentColor; }
.eyebrow.light { color: #7fe0d6; }
.ops-page-header h1 { margin-top: 8px; font-size: clamp(1.75rem,2.4vw,2.45rem); letter-spacing: -.035em; }
.ops-page-header p:not(.eyebrow) { max-width: 690px; margin-top: 10px; font-size: .94rem; line-height: 1.8; }
.ops-page-header__actions { justify-content: flex-end; }
.ops-page-header__actions--structured { align-items:center; flex-wrap:wrap; overflow:visible; }
.ops-page-header__primary,
.ops-page-header__secondary { display:flex; align-items:center; }
.ops-page-header__more { position:relative; z-index:12; }
.ops-page-header__more-toggle { min-height:44px; }
.ops-page-header__more-menu {
    position:absolute;
    inset-block-start:calc(100% + 8px);
    inset-inline-end:0;
    display:grid;
    gap:6px;
    width:max-content;
    min-width:210px;
    max-width:min(88vw, 320px);
    padding:9px;
    border:1px solid var(--ops-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 42px rgba(7,26,59,.18);
}
.ops-page-header__more-menu[hidden] { display:none; }
.ops-page-header__more-menu :where(.btn, a, button) { width:100%; justify-content:flex-start; text-align:start; }
.ops-page-header__more-menu :where(.btn, button):focus-visible,
.workspace-nav-group__toggle:focus-visible,
.sidebar-mobile-close:focus-visible { outline:3px solid #67ddd2; outline-offset:2px; }
.btn { gap: 8px; min-height: var(--ops-control-height); padding: .68rem 1rem; border-radius: var(--ops-radius-sm); font-size: .82rem; box-shadow: none; }
.btn .app-icon { width: 17px; height: 17px; }
.btn.primary { background: var(--opsync-brand-700); box-shadow: 0 6px 14px rgba(13,92,87,.18); }
.btn.ghost { border-color: var(--ops-border-strong); background: var(--ops-surface); color: var(--ops-text-strong); }
.btn.light { color: #103156; background: #fff; }
.btn.glass { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
.text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ops-color-primary-600); font-size: .78rem; font-weight: 900; }
.text-link .app-icon { width: 15px; transform: scaleX(-1); }

.ops-stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.ops-stat-card {
    position: relative;
    min-height: 154px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--ops-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ops-shadow-xs);
}
.ops-stat-card::after { content:""; position:absolute; width:90px; height:90px; left:-35px; bottom:-45px; border-radius:50%; background: currentColor; opacity:.035; }
.ops-stat-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.ops-stat-card__icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; color: var(--ops-color-primary-600); background: var(--ops-color-primary-100); }
.ops-stat-card__icon .app-icon { width: 18px; height: 18px; }
.ops-stat-card__kicker { color: var(--ops-text-soft); font-size: .68rem; }
.ops-stat-card__label { font-size: .75rem; font-weight: 800; }
.ops-stat-card strong { margin: 5px 0 8px; font-size: 1.9rem; line-height: 1; }
.ops-stat-card footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 18px; }
.ops-stat-card footer small { font-size: .69rem; }
.ops-stat-card__trend { padding: 2px 7px; border-radius: 8px; color: var(--ops-color-primary-600); background: var(--ops-color-primary-100); font-size: .66rem; font-weight: 900; }
.ops-stat-card.tone-teal .ops-stat-card__icon { color:#087b74;background:#e5f8f5; }
.ops-stat-card.tone-violet .ops-stat-card__icon { color:#6750a4;background:#f0ecff; }
.ops-stat-card.tone-success .ops-stat-card__icon { color:#087443;background:#e9f9f0; }
.ops-stat-card.tone-warning .ops-stat-card__icon { color:#b54708;background:#fff3df; }
.ops-stat-card.tone-danger .ops-stat-card__icon { color:#b42318;background:#fff0ef; }
.ops-stat-card.tone-info .ops-stat-card__icon { color:#175cd3;background:#edf4ff; }

.ops-card { border: 1px solid var(--ops-border); border-radius: var(--ops-radius-md); background: var(--ops-surface); box-shadow: var(--ops-shadow-xs); }
.ops-card,.card { padding: 20px; }
.ops-card__header { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #edf1f5; }
.ops-card__header h2 { font-size: 1rem; letter-spacing: -.015em; }
.ops-card__header p { font-size: .74rem; line-height: 1.65; }
.ops-card__actions { align-items: center; }
.section-count { padding: 4px 8px; border-radius: 8px; color: var(--ops-text-muted); background: var(--ops-surface-soft); font-size:.68rem; font-weight:800; }

.input,.field-with-icon input {
    min-height: var(--ops-control-height);
    border-color: var(--ops-border-strong);
    border-radius: 11px;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(16,35,63,.02);
}
.input:focus,.field-with-icon:focus-within { border-color:var(--ops-color-primary-600); box-shadow:var(--ops-focus-ring); }
label { color: var(--ops-text-strong); font-size:.78rem; }
.ops-search-bar { padding: 12px; margin-bottom: 16px; border:1px solid var(--ops-border); border-radius:14px; background:var(--ops-surface-soft); }
.ops-search-bar .input { background:#fff; }
.filter-chip { min-height:33px; padding:.28rem .68rem; font-size:.7rem; background:#fff; }
.filter-chip.active { color:#fff; border-color:#1559a9; background:#1559a9; }
.table-wrap { border-radius:14px; border-color:var(--ops-border); }
.table { min-width:820px; }
.table th { padding:12px 14px; color:#7b8899; background:#f7f9fb; font-size:.68rem; letter-spacing:.01em; }
.table td { padding:14px; border-color:#edf1f5; font-size:.78rem; }
.table tr:hover td { background:#f9fbfd; }
.table-number { color:var(--ops-text-strong); font-size:.92rem; }
.identity-cell { display:flex; align-items:center; gap:10px; min-width:185px; }
.identity-cell > span:last-child b,.identity-cell > span:last-child small { display:block; }
.identity-cell small { margin-top:2px; font-size:.68rem; }
.entity-avatar { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:10px; color:#1b64b0; background:#eaf2ff; }
.entity-avatar .app-icon { width:18px; }
.entity-avatar.student { color:#087b74;background:#e5f8f5; }
.entity-avatar.teacher { color:#6750a4;background:#f0ecff; }
.entity-avatar.device { color:#b54708;background:#fff3df; }
.attention-text { color:#b54708; font-weight:800; }
.ops-badge { padding:.27rem .58rem; font-size:.67rem; }
.data-workspace { margin-top:18px; }
.form-workspace { border-top:3px solid var(--ops-color-secondary-600); }

/* Command dashboard */
.command-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px;
    align-items: center;
    gap: 35px;
    min-height: 275px;
    padding: 34px 38px;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 13% 15%, rgba(38,180,168,.24), transparent 19rem),
        linear-gradient(118deg,#071a3b 0%,#0c3265 58%,#0a5e68 120%);
    box-shadow: 0 22px 55px rgba(7,26,59,.16);
}
.command-hero::before { content:""; position:absolute; inset:auto -80px -140px auto; width:330px; height:330px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.command-hero__content,.command-hero__signal { position:relative;z-index:1; }
.command-hero h1 { margin-top:10px; color:#fff; font-size:clamp(2rem,3.3vw,3.4rem); letter-spacing:-.055em; }
.command-hero__content > p:not(.eyebrow) { max-width:690px; margin-top:13px; color:rgba(234,244,255,.72); font-size:.94rem; }
.command-hero__actions { display:flex; gap:10px; margin-top:23px; }
.command-hero__signal { padding:22px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(255,255,255,.07); }
.signal-label,.command-hero__signal small { display:block;color:rgba(255,255,255,.58);font-size:.7rem; }
.command-hero__signal strong { display:block;margin:8px 0;font-size:2.65rem;color:#fff;line-height:1; }
.signal-track { height:6px;margin:14px 0 10px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.11); }
.signal-track span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#44d3c5,#88e8c7); }
.signal-track span.high { width:88%; }.signal-track span.medium { width:62%; }.signal-track span.low { width:34%; background:#f3ad62; }
.dashboard-kpis { margin-top:16px; }
.dashboard-grid { display:grid;gap:16px;margin-top:16px; }
.dashboard-grid--primary { grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); }
.dashboard-grid--operations { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.dashboard-grid--recent { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-grid .ops-card { min-width:0; }
.insight-empty { display:flex;align-items:center;gap:13px;min-height:180px;padding:22px;border:1px dashed var(--ops-border-strong);border-radius:14px;background:var(--ops-surface-soft); }
.insight-empty.compact { min-height:120px; }
.insight-empty > span { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--ops-color-primary-600);background:var(--ops-color-primary-100); }
.insight-empty strong,.insight-empty p { display:block; }.insight-empty p{font-size:.74rem;}
.attendance-chart { display:grid;gap:11px;min-height:190px;align-content:center; }
.attendance-day { display:grid;grid-template-columns:65px minmax(0,1fr) 30px;align-items:center;gap:10px; }
.attendance-day > span { color:var(--ops-text-muted);font-size:.7rem; }
.attendance-day > strong { color:var(--ops-text-strong);font-size:.72rem;text-align:left; }
.attendance-day__bars { display:grid;grid-template-columns:1fr;gap:3px; }
progress { appearance:none;-webkit-appearance:none;border:0;overflow:hidden; }
.chart-progress { width:100%;height:4px;border-radius:6px;background:#edf1f5; }
progress::-webkit-progress-bar { background:#edf1f5;border-radius:6px; }
progress.present::-webkit-progress-value { background:#1aa077;border-radius:6px; }
progress.late::-webkit-progress-value { background:#eea13d;border-radius:6px; }
progress.absent::-webkit-progress-value { background:#df675e;border-radius:6px; }
progress.present::-moz-progress-bar { background:#1aa077; } progress.late::-moz-progress-bar { background:#eea13d; } progress.absent::-moz-progress-bar { background:#df675e; }
.chart-legend { display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid #edf1f5; }
.chart-legend span,.distribution-list span { display:flex;align-items:center;gap:6px;color:var(--ops-text-muted);font-size:.68rem; }
.chart-legend i,.distribution-list i { width:7px;height:7px;border-radius:50%; }.present{background:#1aa077}.late{background:#eea13d}.absent{background:#df675e}
.status-overview__total { padding:15px 17px;margin-bottom:16px;border-radius:13px;background:linear-gradient(135deg,#edf4ff,#e9f9f6); }
.status-overview__total span,.status-overview__total small,.status-overview__total strong { display:block; }
.status-overview__total span { color:var(--ops-text-muted);font-size:.7rem; }.status-overview__total strong { margin:5px 0;font-size:2rem;color:var(--ops-text-strong); }.status-overview__total small{color:var(--ops-text-soft);font-size:.66rem;}
.distribution-list { display:grid;gap:13px; }
.distribution-list > div { display:grid;grid-template-columns:1fr 32px;align-items:center;gap:4px; }
.distribution-list strong { color:var(--ops-text-strong);font-size:.75rem;text-align:left; }
.distribution-progress { grid-column:1/-1;width:100%;height:5px;border-radius:6px; }
.workflow-list { display:grid;gap:8px; }
.workflow-item { display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:11px;border:1px solid #edf1f5;border-radius:12px;transition:.16s ease;background:#fff; }
.workflow-item:hover { transform:translateX(-2px);border-color:var(--ops-border-strong);box-shadow:var(--ops-shadow-sm); }
.workflow-item__icon { display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#b54708;background:#fff3df; }
.workflow-item.severity-danger .workflow-item__icon { color:#b42318;background:#fff0ef; }.workflow-item.severity-success .workflow-item__icon{color:#087443;background:#e9f9f0}.workflow-item.severity-info .workflow-item__icon{color:#175cd3;background:#edf4ff}
.workflow-item__icon .app-icon { width:17px; }
.workflow-item strong,.workflow-item small { display:block; }.workflow-item strong{color:var(--ops-text-strong);font-size:.76rem}.workflow-item small{margin-top:2px;color:var(--ops-text-muted);font-size:.66rem;line-height:1.5}
.workflow-arrow { width:14px;color:var(--ops-text-soft);transform:scaleX(-1); }
.quick-actions-grid,.ops-quick-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }
.quick-actions-grid a,.ops-quick-grid a { min-height:115px;padding:13px;border:1px solid var(--ops-border);border-radius:13px;background:var(--ops-surface-soft);transition:.16s ease; }
.quick-actions-grid a:hover,.ops-quick-grid a:hover { transform:translateY(-2px);border-color:#bad0e8;background:#fff;box-shadow:var(--ops-shadow-sm); }
.quick-actions-grid a > span,.ops-quick-grid a > span { display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border-radius:9px;color:var(--ops-color-primary-600);background:#fff;box-shadow:0 3px 9px rgba(16,35,63,.06); }
.quick-actions-grid a strong,.quick-actions-grid a small,.ops-quick-grid a strong,.ops-quick-grid a small { display:block; }
.quick-actions-grid a strong,.ops-quick-grid a strong{font-size:.72rem;color:var(--ops-text-strong)}
.quick-actions-grid a small,.ops-quick-grid a small{margin-top:3px;color:var(--ops-text-muted);font-size:.63rem}
.entity-list { display:grid; }
.entity-list > a { display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #edf1f5; }
.entity-list > a:last-child { border-bottom:0; }.entity-list strong,.entity-list small{display:block}.entity-list strong{color:var(--ops-text-strong);font-size:.75rem}.entity-list small{margin-top:3px;color:var(--ops-text-muted);font-size:.65rem}
.activity-feed { display:grid;gap:3px; }
.activity-feed > div { display:grid;grid-template-columns:18px 1fr;gap:8px;position:relative;padding:8px 3px; }
.activity-feed > div:not(:last-child)::after { content:"";position:absolute;right:8px;top:29px;bottom:-8px;width:1px;background:var(--ops-border); }
.activity-dot { position:relative;z-index:1;width:9px;height:9px;margin:5px 4px 0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #dce8f5;background:#2d72d9; }.activity-dot.import{background:#0b9288;box-shadow:0 0 0 3px #dff5f2}
.activity-feed p strong,.activity-feed p small{display:block}.activity-feed p strong{color:var(--ops-text-strong);font-size:.74rem}.activity-feed p small{margin-top:2px;color:var(--ops-text-muted);font-size:.64rem}

/* Shared role dashboards and operational detail views */
.ops-role-header { margin-bottom:16px; }
.ops-role-header .ops-page-header { margin-bottom:10px; }
.ops-role-header__meta { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--ops-border);border-radius:12px;background:var(--ops-surface-soft); }
.ops-role-header__meta span { display:flex;align-items:center;gap:6px;color:var(--ops-text-muted);font-size:.68rem;font-weight:800; }
.ops-role-header__meta .app-icon { width:14px;color:var(--ops-color-primary-600); }

.ops-pulse-track { display:grid;gap:9px; }
.ops-pulse-track > div { display:grid;grid-template-columns:76px minmax(0,1fr) 34px;align-items:center;gap:10px; }
.ops-pulse-track span { color:var(--ops-text-muted);font-size:.69rem;font-weight:800; }
.ops-pulse-track strong { color:var(--ops-text-strong);font-size:.72rem;text-align:left; }
.ops-pulse-progress { width:100%;height:6px;border-radius:10px;background:#edf1f5; }
.ops-pulse-progress.excused::-webkit-progress-value { background:#4b8acb;border-radius:10px; }
.ops-pulse-progress.none::-webkit-progress-value { background:#a9b3bf;border-radius:10px; }
.ops-pulse-progress.excused::-moz-progress-bar { background:#4b8acb; }
.ops-pulse-progress.none::-moz-progress-bar { background:#a9b3bf; }
.ops-pulse-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px; }
.ops-pulse-item { padding:11px;border:1px solid var(--ops-border);border-radius:11px;background:var(--ops-surface-soft); }
.ops-pulse-item span,.ops-pulse-item strong { display:block; }
.ops-pulse-item span { color:var(--ops-text-muted);font-size:.64rem;font-weight:800; }
.ops-pulse-item strong { margin-top:5px;color:var(--ops-text-strong);font-size:1.25rem; }
.ops-pulse-item.tone-success { border-color:#ccebd9;background:#f0faf4; }
.ops-pulse-item.tone-warning { border-color:#f4dfb8;background:#fff9ed; }
.ops-pulse-item.tone-danger { border-color:#f2d0cd;background:#fff5f4; }
.ops-pulse-item.tone-info { border-color:#d7e5f7;background:#f3f7fd; }

.ops-readiness-row,.ops-device-health__row { display:grid;gap:9px; }
.ops-readiness-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ops-device-health__row { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ops-readiness-row > div,.ops-device-health__row > div { padding:13px;border:1px solid var(--ops-border);border-radius:12px;background:var(--ops-surface-soft); }
.ops-readiness-row span,.ops-readiness-row strong,.ops-device-health__row span,.ops-device-health__row strong { display:block; }
.ops-readiness-row span,.ops-device-health__row span { color:var(--ops-text-muted);font-size:.66rem;font-weight:800; }
.ops-readiness-row strong,.ops-device-health__row strong { margin-top:6px;color:var(--ops-text-strong);font-size:1.45rem; }
.ops-readiness-row .success,.ops-device-health__row .success { border-color:#ccebd9;background:#f0faf4; }
.ops-readiness-row .danger,.ops-device-health__row .danger { border-color:#f2d0cd;background:#fff5f4; }
.ops-device-health__row .warning { border-color:#f4dfb8;background:#fff9ed; }
.ops-late-teachers,.ops-device-list { display:grid;margin-top:13px;border-top:1px solid var(--ops-border); }
.ops-late-teachers > div,.ops-device-list > div { display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);gap:10px;padding:10px 3px;border-bottom:1px solid #edf1f5; }
.ops-late-teachers > div:last-child,.ops-device-list > div:last-child { border-bottom:0; }
.ops-late-teachers span:first-child { color:var(--ops-text-strong);font-size:.72rem;font-weight:900; }
.ops-late-teachers span:last-child { color:var(--ops-text-muted);font-size:.67rem; }
.ops-device-list > div { grid-template-columns:minmax(0,1fr) auto auto;align-items:center; }
.ops-device-list b,.ops-device-list small { display:block; }.ops-device-list b{font-size:.72rem}.ops-device-list small{color:var(--ops-text-muted);font-size:.64rem}

.ops-metric-tile { position:relative;text-align:right; }
button.ops-metric-tile { width:100%;font:inherit; }
.ops-metric-tile.clickable:hover { transform:translateY(-2px);border-color:#bad0e8;box-shadow:var(--ops-shadow-md); }
.ops-metric-tile__action { display:block;margin-top:9px;color:var(--ops-color-primary-600);font-size:.67rem;font-weight:900; }
.ops-stat-card__icon.status-warning { color:#b54708;background:#fff3df; }
.ops-stat-card__icon.status-danger { color:#b42318;background:#fff0ef; }
.ops-stat-card__icon.status-info { color:#175cd3;background:#edf4ff; }

.ops-alert-list { display:grid;gap:8px; }
.ops-alert-row { display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--ops-border);border-radius:12px;background:var(--ops-surface-soft); }
.ops-alert-row__icon { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#175cd3;background:#edf4ff; }
.ops-alert-row.severity-warning .ops-alert-row__icon { color:#b54708;background:#fff3df; }
.ops-alert-row.severity-danger .ops-alert-row__icon { color:#b42318;background:#fff0ef; }
.ops-alert-row.severity-success .ops-alert-row__icon { color:#087443;background:#e9f9f0; }
.ops-alert-row__body strong,.ops-alert-row__body small { display:block; }
.ops-alert-row__body strong { color:var(--ops-text-strong);font-size:.73rem; }
.ops-alert-row__body small { margin-top:3px;color:var(--ops-text-muted);font-size:.65rem; }

.ops-detail-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.ops-detail-group { min-width:0;padding:16px;border:1px solid var(--ops-border);border-radius:14px;background:var(--ops-surface-soft); }
.ops-detail-group h3 { margin-bottom:12px;color:var(--ops-text-strong);font-size:.84rem; }
.ops-detail-items { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.ops-detail-items > div { min-width:0;padding:10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #edf1f5; }
.ops-detail-items span,.ops-detail-items strong { display:block; }
.ops-detail-items span { color:var(--ops-text-muted);font-size:.64rem;font-weight:800; }
.ops-detail-items strong { margin-top:5px;overflow-wrap:anywhere;color:var(--ops-text-strong);font-size:.75rem; }

/* Reference management screens */
.management-overview { grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr); }
.creation-card { border-top:3px solid #2d72d9; }
.readiness-card { background:linear-gradient(145deg,#fff,#f6fafc); }
.readiness-flow { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.readiness-flow > div { padding:13px 9px;border:1px solid var(--ops-border);border-radius:12px;background:#fff;text-align:center; }
.readiness-flow span { display:grid;place-items:center;width:32px;height:32px;margin:0 auto 8px;border-radius:9px;color:#0b7e76;background:#e5f8f5; }
.readiness-flow strong,.readiness-flow small{display:block}.readiness-flow strong{font-size:.71rem;color:var(--ops-text-strong)}.readiness-flow small{margin-top:3px;color:var(--ops-text-soft);font-size:.6rem}
.readiness-note { display:flex;align-items:center;gap:10px;margin-top:12px;padding:11px;border-radius:11px;color:#087443;background:#ebf9f2; }
.readiness-note > .app-icon { width:18px; }.readiness-note strong,.readiness-note small{display:block}.readiness-note strong{font-size:.72rem}.readiness-note small{margin-top:2px;color:#4f7d68;font-size:.63rem}
.processing-flow { display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;align-items:center;min-height:180px; }
.processing-flow > div { text-align:center; }.processing-flow > div span { display:grid;place-items:center;width:39px;height:39px;margin:0 auto 9px;border-radius:12px;color:#1559a9;background:#eaf2ff;font-size:.7rem;font-weight:900; }
.processing-flow strong,.processing-flow small{display:block}.processing-flow strong{font-size:.74rem;color:var(--ops-text-strong)}.processing-flow small{margin-top:3px;color:var(--ops-text-soft);font-size:.62rem}.processing-flow i{height:1px;background:linear-gradient(90deg,transparent,#b9c7d8,transparent)}

/* Premium authentication */
.auth-shell-v2 { min-height:100vh;display:grid;grid-template-columns:minmax(440px,.84fr) minmax(0,1.16fr);background:#f5f7fb; }
.auth-visual-v2 { position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:38px clamp(34px,4.4vw,74px);overflow:hidden;color:#fff;background:radial-gradient(circle at 15% 15%,rgba(17,178,165,.2),transparent 20rem),linear-gradient(145deg,#06162f,#0a2b56 65%,#0b5e68 130%); }
.auth-visual-v2::before { content:"";position:absolute;left:-160px;bottom:-240px;width:520px;height:520px;border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 0 75px rgba(255,255,255,.02),0 0 0 150px rgba(255,255,255,.014); }
.auth-brand-v2,.auth-mobile-brand { display:flex;align-items:center;gap:11px;position:relative;z-index:1; }
.auth-brand-v2 strong,.auth-brand-v2 small,.auth-mobile-brand strong,.auth-mobile-brand small{display:block}.auth-brand-v2 strong,.auth-mobile-brand strong{font-size:1rem}.auth-brand-v2 small{color:rgba(255,255,255,.52);font-size:.68rem}.auth-mobile-brand small{color:var(--ops-text-muted);font-size:.68rem}
.auth-story { position:relative;z-index:1;max-width:660px;margin-top:55px; }
.auth-story h1 { margin-top:12px;color:#fff;font-size:clamp(2.5rem,4.5vw,4.8rem);line-height:1.15;letter-spacing:-.06em; }
.auth-story > p:not(.eyebrow) { max-width:620px;margin-top:18px;color:rgba(234,244,255,.68);font-size:1rem;line-height:1.9; }
.auth-dashboard-preview { position:relative;z-index:1;width:min(100%,620px);min-height:210px;margin:40px 0 24px;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055);box-shadow:0 25px 70px rgba(0,0,0,.18);backdrop-filter:blur(8px);transform:perspective(900px) rotateY(-3deg) rotateX(2deg); }
.preview-topline{display:flex;gap:6px}.preview-topline span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}.preview-heading{display:flex;justify-content:space-between;margin-top:19px}.preview-heading span{width:120px;height:12px;border-radius:10px;background:rgba(255,255,255,.15)}.preview-heading i{width:74px;height:24px;border-radius:8px;background:rgba(57,205,191,.2)}
.preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}.preview-stats span{height:55px;border-radius:10px;background:rgba(255,255,255,.075)}.preview-stats span:nth-child(2){background:rgba(57,205,191,.13)}
.preview-lower{display:grid;grid-template-columns:1.7fr .8fr;gap:9px;margin-top:10px}.preview-lower>div,.preview-lower>span{height:72px;padding:12px;border-radius:10px;background:rgba(255,255,255,.06)}.preview-lower>div{display:flex;align-items:flex-end;gap:8px}.preview-lower i{width:12%;border-radius:4px 4px 0 0;background:rgba(74,171,224,.32)}.preview-lower i:nth-child(1){height:35%}.preview-lower i:nth-child(2){height:68%}.preview-lower i:nth-child(3){height:48%}.preview-lower i:nth-child(4){height:82%}.preview-lower i:nth-child(5){height:60%}
.auth-capabilities{position:relative;z-index:1;display:flex;gap:24px;flex-wrap:wrap}.auth-capabilities span{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.65);font-size:.69rem}.auth-capabilities .app-icon{width:15px;color:#5fd6ca}
.auth-access-v2 { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:34px clamp(24px,5vw,78px); }
.auth-mobile-brand { display:none;align-self:flex-start;margin-bottom:25px;color:var(--ops-text-strong); }
.auth-card-v2 { width:min(100%,510px);padding:30px;border:1px solid var(--ops-border);border-radius:22px;background:#fff;box-shadow:0 22px 65px rgba(16,35,63,.09); }
.auth-card-heading{display:flex;align-items:center;gap:13px}.auth-heading-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;color:#1559a9;background:#eaf2ff}.auth-card-heading p{color:#0b8a81;font-size:.68rem;font-weight:900}.auth-card-heading h2{margin-top:3px;font-size:1.42rem}.auth-card-heading small{display:block;margin-top:4px;color:var(--ops-text-muted);font-size:.7rem}
.auth-tabs-v2{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:24px 0;padding:5px;border-radius:12px;background:#f1f4f8}.auth-tabs-v2 a{padding:9px;border-radius:9px;color:var(--ops-text-muted);font-size:.75rem;font-weight:900;text-align:center}.auth-tabs-v2 a.active{color:#1559a9;background:#fff;box-shadow:0 3px 10px rgba(16,35,63,.06)}
.auth-form-v2{display:grid;gap:16px}.auth-form-v2 label>span{display:block;margin-bottom:7px;font-size:.76rem;font-weight:800}.field-with-icon{display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--ops-border-strong);border-radius:11px;background:#fff}.field-with-icon .app-icon{width:17px;color:#8a99ab}.field-with-icon input{flex:1;min-width:0;border:0;outline:0;box-shadow:none}.auth-form-options{display:flex;justify-content:space-between;align-items:center;gap:8px}.auth-form-options>span{color:#8390a1;font-size:.65rem}.auth-submit{justify-content:center;width:100%;min-height:48px;margin-top:2px}.auth-submit .app-icon{transform:scaleX(-1)}
.auth-card-footer{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;margin-top:23px;padding:14px;border:1px solid #dbe8f4;border-radius:13px;background:#f4f9fd}.auth-card-footer>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#0b887f;background:#e3f7f4}.auth-card-footer strong{display:block;color:var(--ops-text-strong);font-size:.7rem}.auth-card-footer p{margin-top:2px;font-size:.62rem;line-height:1.5}.auth-card-footer a{color:#1559a9;font-size:.68rem;font-weight:900;white-space:nowrap}.auth-legal{margin-top:22px;color:#99a5b4;font-size:.64rem}

/* Activation onboarding */
.onboarding-shell { min-height:100vh;padding-bottom:50px;background:linear-gradient(180deg,#f7f9fc,#f1f5f9); }
.onboarding-header { display:flex;justify-content:space-between;align-items:center;min-height:78px;padding:13px max(28px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--ops-border);background:rgba(255,255,255,.86);backdrop-filter:blur(14px); }
.onboarding-header .auth-brand-v2{color:var(--ops-text-strong)}.onboarding-header .auth-brand-v2 small{color:var(--ops-text-muted)}.onboarding-header__actions{display:flex;align-items:center;gap:10px;color:var(--ops-text-muted);font-size:.72rem}
.onboarding-intro { width:min(calc(100% - 40px),1180px);margin:38px auto 26px;text-align:center; }.onboarding-intro .eyebrow{justify-content:center}.onboarding-intro h1{margin-top:8px;font-size:clamp(2rem,3.5vw,3.2rem);letter-spacing:-.05em}.onboarding-intro>p:not(.eyebrow){max-width:670px;margin:10px auto 0;font-size:.84rem}
.onboarding-progress { display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;width:min(calc(100% - 40px),900px);margin:0 auto 25px;padding:18px 22px;border:1px solid var(--ops-border);border-radius:16px;background:#fff;box-shadow:var(--ops-shadow-sm); }
.onboarding-progress>div{display:grid;grid-template-columns:33px 1fr;column-gap:8px;align-items:center}.onboarding-progress>div>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ops-border-strong);border-radius:10px;color:var(--ops-text-muted);font-size:.7rem;font-weight:900;background:#fff}.onboarding-progress>div.active>span{color:#fff;border-color:#0b8d84;background:#0b8d84}.onboarding-progress strong,.onboarding-progress small{display:block;white-space:nowrap}.onboarding-progress strong{font-size:.68rem}.onboarding-progress small{color:var(--ops-text-soft);font-size:.58rem}.onboarding-progress>i{height:1px;margin:0 12px;background:var(--ops-border)}
.onboarding-alert,.onboarding-form{width:min(calc(100% - 40px),980px);margin-inline:auto}.onboarding-alert{margin-bottom:14px}
.onboarding-form{display:grid;gap:14px}.onboarding-section{display:grid;grid-template-columns:235px minmax(0,1fr);gap:24px;padding:24px;border:1px solid var(--ops-border);border-radius:18px;background:#fff;box-shadow:var(--ops-shadow-sm)}.onboarding-section__heading{display:flex;gap:11px}.onboarding-section__heading>span{display:grid;place-items:center;flex:0 0 auto;width:39px;height:39px;border-radius:11px;color:#1559a9;background:#eaf2ff}.onboarding-section__heading strong{display:block;color:var(--ops-text-strong);font-size:.86rem}.onboarding-section__heading p{margin-top:5px;font-size:.67rem;line-height:1.6}.onboarding-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.onboarding-fields label>span{display:block;margin-bottom:6px;font-size:.72rem;font-weight:800}.onboarding-fields label b{color:#d24e45}.field-span-2{grid-column:1/-1}.onboarding-fields textarea{resize:vertical;padding-top:11px}
.onboarding-submit{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 24px;border-radius:17px;color:#fff;background:linear-gradient(120deg,#08244a,#0b716f);box-shadow:0 14px 35px rgba(8,36,74,.14)}.onboarding-submit>div{display:flex;align-items:center;gap:11px}.onboarding-submit>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#62d5c9;background:rgba(255,255,255,.1)}.onboarding-submit strong,.onboarding-submit small{display:block}.onboarding-submit strong{font-size:.78rem}.onboarding-submit small{margin-top:3px;color:rgba(255,255,255,.58);font-size:.65rem}

/* Public school-member activation */
.member-activation-form { max-width: 780px; }
.member-activation-progress { display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;width:min(calc(100% - 40px),760px);margin:0 auto 25px;padding:17px 20px;border:1px solid var(--ops-border);border-radius:16px;background:#fff;box-shadow:var(--ops-shadow-sm); }
.member-activation-progress>div{display:grid;grid-template-columns:33px 1fr;column-gap:8px;align-items:center}.member-activation-progress>div>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ops-border-strong);border-radius:10px;color:var(--ops-text-muted);font-size:.7rem;font-weight:900;background:#fff}.member-activation-progress>div.active>span{color:#fff;border-color:#1559a9;background:#1559a9}.member-activation-progress>div.completed>span{color:#fff;border-color:#0b8d84;background:#0b8d84}.member-activation-progress strong,.member-activation-progress small{display:block;white-space:nowrap}.member-activation-progress strong{font-size:.68rem}.member-activation-progress small{color:var(--ops-text-soft);font-size:.58rem}.member-activation-progress>i{height:1px;margin:0 12px;background:var(--ops-border)}
.activation-code-input { text-align:center; direction:ltr; font-size:1.15rem!important; font-weight:900; letter-spacing:.48em; padding-inline-start:calc(.8rem + .48em); font-variant-numeric:tabular-nums; }
.activation-code-input::placeholder { letter-spacing:.18em; color:#aab5c3; }
.activation-helper { margin:0; color:var(--ops-text-muted); font-size:.69rem; line-height:1.7; }
.activation-restart,.activation-success,.activation-account-card { width:min(calc(100% - 40px),680px);margin:0 auto;padding:30px;border:1px solid var(--ops-border);border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(16,35,63,.09); }
.activation-restart,.activation-success,.activation-safe { text-align:center; }
.activation-restart h2,.activation-success h1,.activation-account-card h1 { color:var(--ops-text-strong);font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.35; }
.activation-restart p,.activation-success>p:not(.eyebrow),.activation-account-card>p:not(.eyebrow) { max-width:570px;margin:10px auto 22px;color:var(--ops-text-muted);font-size:.82rem;line-height:1.8; }
.activation-success-shell { padding-bottom:0; }
.activation-success { margin-top:clamp(48px,10vh,110px); }
.activation-success__icon { display:grid;place-items:center;width:72px;height:72px;margin:0 auto 20px;border-radius:24px;color:#fff;background:linear-gradient(135deg,#0b8d84,#34b9a9);box-shadow:0 15px 32px rgba(11,141,132,.25);font-size:2rem;font-weight:900; }
.activation-success .eyebrow,.activation-account-card .eyebrow { justify-content:center;margin-bottom:10px; }
.activation-success .btn,.activation-restart .btn,.activation-safe .btn { min-width:180px;justify-content:center; }
.activation-standalone { min-height:100vh;padding-bottom:50px;overflow-x:clip;background:linear-gradient(180deg,#f7f9fc,#f1f5f9);color:var(--ops-text); }
.activation-standalone__content { padding-top:36px; }
.activation-account-card { text-align:right; }
.activation-account-card .eyebrow { justify-content:flex-start; }
.activation-account-card>p:not(.eyebrow) { margin-inline:0; }
.activation-account-form { display:grid;gap:16px; }
.activation-account-form>label { display:grid;gap:7px;color:var(--ops-text-strong);font-size:.74rem;font-weight:800; }
.activation-account-form input[readonly] { color:#536176;background:#f3f6f9; }
.password-field { display:flex;align-items:center;gap:8px;min-width:0; }
.password-field .input { min-width:0;flex:1; }
.activation-account-submit { width:100%;justify-content:center;margin-top:4px; }
.activation-form-note { margin:0;color:var(--ops-text-muted);font-size:.68rem;line-height:1.7; }
.activation-password-guidance { margin:0;padding:12px 14px;border:1px solid #d9e7f3;border-radius:11px;color:#29445f;background:#f2f8fd;font-size:.7rem;line-height:1.75; }
.activation-mfa { display:grid;gap:12px;margin:2px 0;padding:16px;border:1px solid #d9e4ef;border-radius:13px;background:#f8fbfe; }
.activation-mfa legend { padding-inline:7px;color:#1559a9;font-size:.74rem;font-weight:900; }
.activation-mfa>p { margin:0;color:var(--ops-text-muted);font-size:.67rem;line-height:1.7; }
.activation-mfa>label:not(.activation-check) { display:grid;gap:7px;color:var(--ops-text-strong);font-size:.72rem;font-weight:800; }
.activation-check { display:flex;align-items:center;gap:8px;color:var(--ops-text-muted);font-size:.72rem;font-weight:700; }
.activation-check input { width:18px;height:18px;accent-color:#0b8d84; }
.onboarding-shell { overflow-x:clip; }

/* Responsive */
@media (max-width: 1180px) {
    .date-context,.user-meta{display:none!important}
    .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .quick-actions-grid,.ops-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .auth-shell-v2{grid-template-columns:minmax(400px,.9fr) 1.1fr}
}
@media (max-width: 900px) {
    .app-shell{display:block}
    .sidebar{position:fixed;right:0;top:0;bottom:0;width:min(88vw,var(--ops-sidebar-width));transform:translateX(105%);transition:transform .22s ease}
    .nav-open .sidebar{transform:translateX(0)}
    .sidebar-backdrop{position:fixed;inset:0;z-index:45;border:0;background:rgba(5,17,36,.46)}
    .nav-open .sidebar-backdrop{display:block}
    .main-area{padding:0 20px 38px}
    .topbar{margin:0 -20px 22px;padding:12px 20px}
    .sidebar-toggle{display:grid;gap:4px;place-content:center;width:39px;height:39px;padding:0}
    .sidebar-toggle span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor}
    .global-search{width:min(310px,38vw)}
    .dashboard-grid--primary,.dashboard-grid--operations,.dashboard-grid--recent,.dashboard-grid--teacher,.management-overview{grid-template-columns:1fr}
    .ops-detail-grid{grid-template-columns:1fr}
    .auth-shell-v2{display:block}.auth-visual-v2{display:none}.auth-access-v2{min-height:100vh}.auth-mobile-brand{display:flex}
    .onboarding-section{grid-template-columns:1fr}.onboarding-progress{grid-template-columns:repeat(4,1fr);gap:6px}.onboarding-progress>i{display:none}.onboarding-progress>div{display:block;text-align:center}.onboarding-progress>div>span{margin:0 auto 5px}.onboarding-progress small{display:none}
    .member-activation-progress{grid-template-columns:repeat(3,1fr);gap:6px}.member-activation-progress>i{display:none}.member-activation-progress>div{display:block;text-align:center}.member-activation-progress>div>span{margin:0 auto 5px}.member-activation-progress small{display:none}
}
@media (max-width: 640px) {
    .main-area{padding:0 14px 30px}.topbar{margin:0 -14px 18px;padding:10px 14px}.topbar-context>div{display:none}.global-search{display:none}.topbar-tools{gap:7px}.user-chip{padding-left:5px}
    .ops-page-header{display:grid;gap:16px;align-items:start}.ops-page-header__actions{justify-content:flex-start}.ops-page-header h1{font-size:1.8rem}
    .ops-page-header__actions--structured { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .ops-page-header__primary { grid-column:1 / -1; }
    .ops-page-header__actions--structured > :only-child { grid-column:1 / -1; }
    .ops-page-header__actions--structured :where(.btn, a, button) { width:100%; justify-content:center; }
    .ops-page-header__more-menu { position:fixed; inset-inline:14px; inset-block-start:auto; inset-block-end:14px; width:auto; max-width:none; max-height:70dvh; overflow-y:auto; }
    .ops-stats-grid,.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ops-stat-card{min-height:140px;padding:14px}.ops-stat-card strong{font-size:1.55rem}
    .command-hero{grid-template-columns:1fr;padding:27px 23px}.command-hero__signal{display:none}.command-hero h1{font-size:2.15rem}.command-hero__actions{flex-direction:column;align-items:stretch}.command-hero__actions .btn{justify-content:center}
    .ops-card{padding:15px}.quick-actions-grid,.ops-quick-grid{grid-template-columns:repeat(2,1fr)}.readiness-flow{grid-template-columns:repeat(2,1fr)}.processing-flow{grid-template-columns:repeat(2,1fr);gap:8px}.processing-flow>i{display:none}
    .ops-pulse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-device-health__row{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-detail-items{grid-template-columns:1fr}.ops-alert-row{grid-template-columns:34px minmax(0,1fr)}.ops-alert-row__action{grid-column:2}
    .teacher-current-period,.teacher-lesson-card,.entity-list__row{grid-template-columns:1fr}.teacher-lesson-card__meta{justify-items:stretch}.status-button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .auth-access-v2{padding:24px 14px}.auth-card-v2{padding:20px 16px}.auth-form-options{align-items:flex-start;flex-direction:column}.auth-card-footer{grid-template-columns:34px 1fr}.auth-card-footer a{grid-column:2}.auth-card-heading h2{font-size:1.2rem}
    .onboarding-header{padding:12px 15px}.onboarding-header__actions>span{display:none}.onboarding-intro{width:calc(100% - 28px);margin-top:27px}.onboarding-progress,.onboarding-alert,.onboarding-form{width:calc(100% - 28px)}.onboarding-progress{padding:13px 8px}.onboarding-progress strong{font-size:.58rem}.onboarding-section{padding:18px 15px}.onboarding-fields{grid-template-columns:1fr}.field-span-2{grid-column:auto}.onboarding-submit{align-items:stretch;flex-direction:column}.onboarding-submit .btn{justify-content:center}
    .member-activation-progress{width:calc(100% - 28px);padding:13px 8px}.member-activation-progress strong{font-size:.6rem}.activation-restart,.activation-success,.activation-account-card{width:calc(100% - 28px);padding:22px 16px}.activation-standalone__content{padding-top:27px}.activation-code-input{letter-spacing:.34em;padding-inline-start:calc(.8rem + .34em)}.password-field{align-items:stretch}.password-toggle{min-width:52px}
}
.attendance-date-panel__navigation { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; }
.module-link {
    color: inherit;
    text-decoration: none;
}

.module-link:hover {
    border-color: var(--ops-teal, #20b8aa);
    transform: translateY(-2px);
}

.cell-note {
    display: block;
    margin-top: .3rem;
    color: var(--ops-muted, #667085);
}

.validation-list {
    margin: 1rem 0 0;
    padding-inline-start: 1.25rem;
    color: var(--ops-muted, #667085);
}

.validation-list li + li {
    margin-top: .4rem;
}

/* ── معالج إعداد المدرسة: بطاقات طرق الجدول وقائمة التدفق ── */
.setup-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ops-space-4);
}

.setup-method-card {
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-2);
    padding: var(--ops-space-5);
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-lg);
    background: var(--ops-surface-soft);
    text-decoration: none;
    color: var(--ops-text-strong);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.setup-method-card:hover {
    border-color: var(--ops-color-primary-500);
    box-shadow: var(--ops-shadow-sm);
    transform: translateY(-2px);
}

.setup-method-card strong { font-size: var(--ops-font-size-base); }
.setup-method-card small { color: var(--ops-text-muted); }

.setup-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ops-radius-md);
    background: var(--ops-color-primary-100);
    color: var(--ops-color-primary-700);
}

.setup-flow-list {
    margin: 0 0 var(--ops-space-5);
    padding-inline-start: 1.25rem;
    color: var(--ops-text-soft);
    line-height: 1.9;
}

.setup-flow-list li + li { margin-top: .3rem; }

/* ── الجدول الدراسي: عرض الشبكة (أيام أعمدة، حصص صفوف) ── */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-pill);
    overflow: hidden;
}

.view-toggle__btn {
    border: 0;
    background: transparent;
    padding: .4rem 1rem;
    font: inherit;
    color: var(--ops-text-soft);
    cursor: pointer;
}

.view-toggle__btn.active {
    background: var(--ops-color-primary-600);
    color: var(--ops-text-inverse);
}

.timetable-board {
    margin-top: var(--ops-space-5);
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-lg);
    padding: var(--ops-space-4);
    background: var(--ops-surface-soft);
}

.timetable-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-3);
    margin-bottom: var(--ops-space-3);
}

.timetable-board__head strong { display: block; font-size: var(--ops-font-size-lg); }
.timetable-board__head small { color: var(--ops-text-muted); }

.timetable-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.timetable-grid th,
.timetable-grid td {
    border: 1px solid var(--ops-border-strong);
    padding: var(--ops-space-2);
    text-align: center;
    vertical-align: middle;
}

.timetable-grid thead th {
    background: var(--ops-color-primary-100);
    color: var(--ops-color-primary-900);
    font-size: var(--ops-font-size-sm);
}

.timetable-grid .tt-corner { width: 7rem; }

.timetable-grid .tt-period {
    background: var(--ops-surface-muted);
    font-size: var(--ops-font-size-sm);
}

.timetable-grid .tt-period span { display: block; font-weight: 700; }
.timetable-grid .tt-period small { color: var(--ops-text-muted); font-weight: 400; }

.timetable-grid td { height: 3.75rem; }
.timetable-grid td.tt-empty { background: var(--ops-surface-muted); }

.tt-subject { display: block; font-weight: 700; color: var(--ops-text-strong); font-size: var(--ops-font-size-sm); }
.tt-teacher { display: block; color: var(--ops-text-soft); font-size: var(--ops-font-size-xs); }
.tt-room { display: block; color: var(--ops-text-muted); font-size: var(--ops-font-size-xs); }
.tt-inactive { display: inline-block; margin-top: .15rem; color: var(--ops-color-danger-700); font-size: var(--ops-font-size-xs); }
.tt-dash { color: var(--ops-text-muted); }

/* ── الطباعة / حفظ كـ PDF: يظهر جدول الفصل المحدد فقط ── */
@media print {
    body.printing * { visibility: hidden !important; }
    body.printing .print-area,
    body.printing .print-area * { visibility: visible !important; }
    body.printing .print-area {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 12px;
        border: 0;
        background: #fff;
    }
    body.printing .print-area .no-print { display: none !important; }
    body.printing .timetable-grid thead th { background: #e8eefc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── إدارة نسخ الجدول ── */
.row-selected { background: var(--ops-color-primary-100); }

.swap-tool {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ops-space-2);
    padding: var(--ops-space-3);
    border: 1px dashed var(--ops-border-strong);
    border-radius: var(--ops-radius-md);
    background: var(--ops-surface-muted);
}

.swap-tool > span { font-weight: 600; color: var(--ops-text-soft); }

/* ── مساحة المعلم ── */
.dashboard-grid--teacher { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.teacher-current-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ops-space-3);
}

.teacher-current-period > div,
.teacher-lesson-card,
.teacher-week-day,
.teacher-action-list > div {
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-md);
    background: var(--ops-surface-soft);
}

.teacher-current-period > div { padding: var(--ops-space-3); }
.teacher-current-period span,
.teacher-lesson-card span,
.teacher-action-list small {
    display: block;
    color: var(--ops-text-muted);
    font-size: var(--ops-font-size-xs);
}
.teacher-current-period strong { display: block; margin-top: .25rem; color: var(--ops-text-strong); }

.teacher-week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--ops-space-4);
}

.teacher-week-day { padding: var(--ops-space-3); }
.teacher-week-day h3 { margin: 0 0 var(--ops-space-3); font-size: var(--ops-font-size-base); }
.teacher-week-day__lessons { display: grid; gap: var(--ops-space-2); }

.teacher-lesson-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--ops-space-3);
    padding: var(--ops-space-3);
}

.teacher-lesson-card.compact { grid-template-columns: minmax(0, 1fr); }
.teacher-lesson-card.current { border-color: var(--ops-color-primary-500); box-shadow: var(--ops-shadow-sm); }
.teacher-lesson-card strong { display: block; margin-top: .2rem; color: var(--ops-text-strong); }
.teacher-lesson-card small { display: block; margin-top: .2rem; color: var(--ops-text-soft); }
.teacher-lesson-card__meta { display: grid; gap: .35rem; justify-items: start; }

.status-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.status-button {
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-pill);
    background: var(--ops-surface);
    color: var(--ops-text-soft);
    padding: .35rem .65rem;
    font: inherit;
    font-size: var(--ops-font-size-xs);
    cursor: pointer;
}

.status-button.active {
    border-color: var(--ops-color-primary-600);
    background: var(--ops-color-primary-100);
    color: var(--ops-color-primary-900);
    font-weight: 700;
}

.entity-list__row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #edf1f5;
}
.entity-list__row:last-child { border-bottom: 0; }

.teacher-action-list {
    display: grid;
    gap: var(--ops-space-2);
    margin-top: var(--ops-space-2);
}

.teacher-action-list > div { padding: var(--ops-space-2); }
.teacher-action-list b { display: block; color: var(--ops-text-strong); font-size: var(--ops-font-size-sm); }
.teacher-action-list span { display: block; margin-top: .25rem; color: var(--ops-text-soft); font-size: var(--ops-font-size-sm); }

/* ══════════════════════════════════════════════════════════════════
   OpSync Login — focused institutional authentication experience.
   Self-contained .lx namespace; does not affect other auth pages.
   ══════════════════════════════════════════════════════════════════ */
.lx {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vh, 30px) 20px;
    overflow-x: clip;
    color: #eaf2ff;
    background: linear-gradient(145deg, #07152b 0%, #0b2340 60%, #0b3043 100%);
}
.lx__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lx__orb { position: absolute; display: block; border-radius: 50%; filter: blur(2px); opacity: .55; }
.lx__orb--a { inset: 8% auto auto 7%; width: min(38vw, 34rem); aspect-ratio: 1; background: radial-gradient(circle, rgba(25,163,140,.18), transparent 68%); }
.lx__orb--b { inset: auto 2% -18% auto; width: min(42vw, 38rem); aspect-ratio: 1; background: radial-gradient(circle, rgba(110,219,203,.10), transparent 70%); }
.lx__orb--c { inset: 32% 45% auto auto; width: 12rem; aspect-ratio: 1; background: radial-gradient(circle, rgba(47,104,220,.11), transparent 72%); }
.lx__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 52% 42%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 52% 42%, #000, transparent 76%);
}
.lx__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
    grid-template-areas: "card hero" "legal legal";
    align-items: center;
    gap: clamp(24px, 5vw, 76px);
    width: min(1160px, calc(100vw - 40px));
}
.lx-card__brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px; color: var(--opsync-brand-ink); }
.lx__logo {
    display: block; width: 46px; height: 46px; object-fit: contain;
}
.lx-card__brand strong, .lx-card__brand small { display: block; }
.lx-card__brand strong { font-size: 1rem; }
.lx-card__brand small { margin-top: 2px; color: var(--opsync-brand-muted); font-size: .7rem; }

.lx__hero { grid-area: hero; max-width: 590px; padding: clamp(18px, 4vw, 54px); text-align: start; }
.lx__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--opsync-brand-mint-300); font-size: .76rem; font-weight: 800; letter-spacing: 0; }
.lx__eyebrow > span { width: 22px; height: 2px; border-radius: 4px; background: currentColor; }
.lx__hero h1 { margin-top: 16px; color: #fff; font-size: clamp(2.25rem, 4.4vw, 4rem); line-height: 1.28; letter-spacing: 0; }
.lx__description { max-width: 540px; margin-top: 18px; color: rgba(231,241,250,.74); font-size: 1rem; line-height: 1.85; }
.lx__endorsement { margin-top: 22px; color: rgba(217,231,243,.58); font-size: .78rem; font-weight: 700; }

.lx-card {
    position: relative;
    grid-area: card;
    width: 100%;
    padding: 24px 26px;
    overflow: hidden;
    text-align: right;
    border-radius: 22px;
    border: 1px solid var(--opsync-brand-border);
    background: #fff;
    box-shadow: 0 28px 72px rgba(3,12,30,.34);
}
.lx-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--opsync-brand-gradient);
}

.lx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lx-card__head p { color: var(--opsync-brand-700); font-size: .73rem; font-weight: 800; }
.lx-card__head h2 { margin-top: 3px; color: var(--opsync-brand-ink); font-size: 1.35rem; letter-spacing: 0; }
.lx-card__ic {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
    color: var(--opsync-brand-700); background: var(--opsync-brand-surface);
    box-shadow: inset 0 0 0 1px var(--opsync-brand-border);
}
.lx-card__ic .app-icon { width: 22px; height: 22px; }

.lx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #eef2f7; }
.lx-tabs a { padding: 10px; border-radius: 11px; text-align: center; color: var(--ops-text-muted); font-weight: 800; font-size: .82rem; transition: .16s ease; }
.lx-tabs a.active { color: #0d2140; background: #fff; box-shadow: 0 6px 16px rgba(16,35,63,.1); }

.lx-form { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 14px; }
.lx-field, .lx-row { min-width: 0; }
.lx-field > span { display: block; margin-bottom: 7px; color: #26364d; font-size: .78rem; font-weight: 800; }
.lx-input {
    display: flex; align-items: center; gap: 10px; padding: 0 13px; min-height: 48px;
    border: 1px solid var(--ops-border-strong); border-radius: 13px; background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lx-input .app-icon { width: 18px; color: #8a99ab; flex: 0 0 auto; }
.lx-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .92rem; color: var(--ops-text); }
.lx-input input::placeholder { color: #aab4c2; }
.lx-input:focus-within { border-color: var(--opsync-brand-700); box-shadow: var(--ops-focus-ring); }

.lx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.lx-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ops-text-muted); font-size: .78rem; font-weight: 600; }
.lx-check input { width: 18px; height: 18px; accent-color: var(--opsync-brand-700); }
.lx-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--opsync-brand-700); font-size: .7rem; font-weight: 800; }
.lx-secure .app-icon { width: 14px; }

.lx-cta {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 50px; margin-top: 4px;
    border: 0; border-radius: 14px; color: #fff; font: 800 .92rem var(--ops-font-family);
    background: var(--opsync-brand-700);
    box-shadow: 0 10px 22px rgba(13,92,87,.20);
    transition: background-color var(--ops-motion-fast) ease, box-shadow var(--ops-motion-fast) ease;
}
.lx-cta .app-icon { width: 18px; transform: scaleX(-1); }
.lx-cta:hover { background: var(--opsync-brand-900); box-shadow: 0 12px 26px rgba(13,92,87,.24); }

.lx-secondary { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--opsync-brand-border); }
.lx-secondary > h3 { margin-bottom: 12px; color: #0d2140; font-size: .88rem; }
.lx-secondary__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.lx-option { display: grid; grid-template-columns: 36px minmax(0,1fr); align-content: start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--opsync-brand-border); border-radius: 14px; background: var(--opsync-brand-surface); }
.lx-option__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--opsync-brand-700); background: #e5f5f2; }
.lx-option__ic .app-icon { width: 18px; }
.lx-option strong { display: block; color: var(--opsync-brand-ink); font-size: .76rem; line-height: 1.5; }
.lx-option p { margin-top: 4px; color: var(--ops-text-muted); font-size: .64rem; line-height: 1.65; }
.lx-option a { grid-column: 1/-1; display: flex; justify-content: center; min-height: 38px; padding: 9px 12px; border: 1px solid #c7ded9; border-radius: 10px; color: var(--opsync-brand-900); font-weight: 800; font-size: .72rem; background: #fff; }
.lx-option a:hover { border-color: var(--opsync-brand-700); background: #edf7f5; }
.lx-renewal { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 10px; border-radius: 11px; color: #41526a; background: #f2f5f8; font-size: .68rem; line-height: 1.6; }
.lx-renewal .app-icon { flex: 0 0 auto; width: 15px; color: var(--opsync-brand-700); }

.password-toggle { flex: 0 0 auto; min-width: 48px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 8px; color: var(--opsync-brand-900); background: #edf7f5; font: 800 .68rem var(--ops-font-family); cursor: pointer; }
.password-toggle:hover { background: #dff1ed; }
.password-toggle:focus-visible { outline: 3px solid var(--opsync-brand-700); outline-offset: 2px; }

.lx-caps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lx-caps span {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
    color: #d7e6f7; font-size: .76rem; font-weight: 700;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
}
.lx-caps .app-icon { width: 16px; color: var(--opsync-brand-mint-300); }
.lx-legal { grid-area: legal; color: rgba(198,216,240,.46); font-size: .68rem; text-align: center; }

@media (max-width: 760px) {
    .lx { place-items: start center; padding: 10px; }
    .lx__inner { grid-template-columns: 1fr; grid-template-areas: "card" "hero" "legal"; gap: 12px; width: min(100%, 560px); }
    .lx-card { padding: 20px; border-radius: 19px; }
    .lx-card__brand { margin-bottom: 14px; }
    .lx__hero { max-width: none; padding: 18px 10px 6px; }
    .lx__hero h1 { margin-top: 10px; font-size: 1.55rem; line-height: 1.35; }
    .lx__description { margin-top: 10px; font-size: .8rem; line-height: 1.75; }
    .lx__endorsement { margin-top: 12px; }
    .lx-caps { display: none; }
    .lx-legal { padding-block: 6px 10px; }
}

@media (max-width: 560px) {
    .lx-secondary__grid { grid-template-columns: 1fr; }
    .lx-renewal { align-items: flex-start; text-align: right; }
    .lx-row { align-items: flex-start; }
}

@media (max-height: 800px) and (min-width: 700px) {
    .lx { place-items: start center; padding-block: 12px; }
    .lx__inner { gap: 24px; }
    .lx-card { padding: 18px 22px; }
    .lx-card__brand { margin-bottom: 12px; }
    .lx-card__head { margin-bottom: 10px; }
    .lx-form { gap: 10px; }
    .lx-secondary { margin-top: 12px; padding-top: 10px; }
    .lx__hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
    .lx-caps { margin-top: 18px; }
}

/* ── منطقة الخطر لمالك المنصة ── */
.danger-card { border-top: 3px solid var(--ops-color-danger-700); }
.danger-card .actions .btn.danger { background: linear-gradient(135deg,#c0362b,#e0574b); color:#fff; }

/* ── شاشة إيقاف وصول المدرسة ── */
.school-blocked {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(50vmax 40vmax at 80% -10%, rgba(180,35,24,.14), transparent 60%),
        linear-gradient(160deg, #0a1526, #10233f);
}
.school-blocked__card {
    width: min(460px, 92vw);
    padding: 34px;
    text-align: center;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.94);
    box-shadow: 0 40px 90px rgba(3,12,30,.5);
}
.school-blocked__icon {
    display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px;
    border-radius: 18px; color: var(--ops-color-danger-700); background: var(--ops-color-danger-100);
}
.school-blocked__icon .app-icon { width: 30px; height: 30px; }
.school-blocked h1 { font-size: 1.5rem; margin-bottom: 8px; }
.school-blocked p { margin-bottom: 18px; color: var(--ops-text-muted); }

/* Platform commercial stabilization */
.activation-complete-box,
.subscription-actions {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr);
    gap: .5rem;
    min-width: 16rem;
}

.subscription-actions details {
    padding: .5rem;
    border: 1px solid var(--ops-border);
    border-radius: 12px;
    background: rgba(255,255,255,.72);
}

.subscription-actions summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--ops-color-primary-700);
}

.subscription-actions details > * + * {
    margin-top: .5rem;
}

.ops-json-preview {
    direction: ltr;
    max-width: 28rem;
    max-height: 16rem;
    overflow: auto;
    margin: .5rem 0 0;
    padding: .75rem;
    border-radius: 10px;
    background: #0b1220;
    color: #e5edf7;
    font-size: .78rem;
    white-space: pre-wrap;
}

.platform-subscriptions-table td {
    vertical-align: top;
}

/* Restricted (expired subscription) content lock */
.restricted-lock{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid var(--ops-border-strong);border-radius:var(--ops-radius-lg);background:var(--ops-surface-soft);box-shadow:var(--ops-shadow-sm)}
.restricted-lock__icon{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:14px;color:var(--ops-color-warning-700);background:var(--ops-color-warning-100)}
.restricted-lock strong{display:block;font-size:1.05rem;color:var(--ops-text-strong)}
.restricted-lock p{margin:6px 0 12px}

/* ── تذاكر الدعم ── */
.support-thread { display: flex; flex-direction: column; gap: .6rem; }
.support-msg { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: .7rem .9rem; max-width: 80%; }
.support-msg__meta { font-size: .75rem; color: var(--muted, #6b7280); margin-bottom: .3rem; }
.support-msg__body { white-space: pre-wrap; line-height: 1.7; }
.support-msg.school { align-self: flex-start; background: var(--surface-2, #f8fafc); }
.support-msg.platform { align-self: flex-end; background: color-mix(in srgb, var(--primary, #2563eb) 10%, transparent); border-color: color-mix(in srgb, var(--primary, #2563eb) 30%, transparent); }
.support-msg.internal { align-self: flex-end; background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }

/* ── شريط وضع الدعم ── */
.support-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#b91c1c; color:#fff; padding:8px 16px; font-weight:600; font-size:.9rem; position:sticky; top:0; z-index:50; }
.support-banner.expired { background:#92400e; }
.support-banner form { margin:0; }
.support-banner button { background:#fff; color:#b91c1c; border:none; border-radius:8px; padding:5px 14px; font-weight:700; cursor:pointer; }
.support-banner.expired button { color:#92400e; }

/* ── تجربة إدارة برامج ربط الحضور ── */
.attendance-agents-page { display:flex; flex-direction:column; gap:18px; max-width:1440px; margin-inline:auto; padding-bottom:32px; }
.agent-page-message { margin:0; box-shadow:var(--ops-shadow-sm); }
.agent-onboarding { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:28px; overflow:hidden; padding:30px; border:1px solid #c8d9f4; border-radius:22px; background:linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%); box-shadow:var(--ops-shadow-sm); }
.agent-onboarding::before { content:""; position:absolute; z-index:-1; inset-block:-140px auto; inset-inline-start:-80px; width:300px; height:300px; border-radius:50%; background:rgba(45,108,223,.08); }
.agent-onboarding.is-ready { border-color:#a6e2c1; background:linear-gradient(135deg,#f7fffa,#edf9f3); }
.agent-onboarding.needs-review { border-color:#fedf89; background:linear-gradient(135deg,#fffdf5,#fff8e7); }
.agent-onboarding h2 { margin:10px 0 8px; color:var(--ops-text-strong); font-size:clamp(1.35rem,2vw,1.85rem); }
.agent-onboarding p { margin:0; max-width:760px; color:var(--ops-text-muted); line-height:1.8; }
.agent-onboarding__state { display:inline-flex; align-items:center; gap:8px; width:max-content; padding:6px 11px; border-radius:999px; color:#175cd3; background:#eaf2ff; font-size:.8rem; font-weight:800; }
.agent-onboarding.is-ready .agent-onboarding__state { color:#067647; background:#dcfae6; }
.agent-onboarding.needs-review .agent-onboarding__state { color:#93370d; background:#fef0c7; }
.agent-state-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px currentColor; opacity:.75; }
.agent-onboarding__action { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:20px; border:1px solid rgba(23,92,211,.14); border-radius:16px; background:var(--ops-surface); box-shadow:var(--ops-shadow-xs); }
.agent-onboarding__action-label { color:#175cd3; font-size:.75rem; font-weight:800; }
.agent-onboarding__action > strong { color:var(--ops-text-strong); font-size:1.05rem; }
.agent-onboarding__action p { font-size:.84rem; line-height:1.6; }
.agent-onboarding__action > small { color:var(--ops-text-muted); line-height:1.55; text-align:center; }
.agent-create-token { justify-content:center; gap:8px; margin-top:5px; }
.agent-create-token .app-icon { width:18px; height:18px; }
.agent-step-label { display:inline-flex; width:max-content; padding:5px 10px; border-radius:999px; color:#175cd3; background:#eaf2ff; font-size:.78rem; font-weight:800; }
.agent-step-label.danger { color:#b42318; background:#fef3f2; }
.agent-setup-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.agent-setup-steps li { position:relative; display:flex; gap:10px; align-items:flex-start; min-height:72px; padding:13px; border:1px solid var(--ops-border); border-radius:13px; background:var(--ops-surface); color:var(--ops-text-muted); }
.agent-setup-steps li b { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:50%; color:#175cd3; background:#eaf2ff; }
.agent-setup-steps li span { display:flex; flex-direction:column; gap:3px; }
.agent-setup-steps li strong { color:var(--ops-text-strong); font-size:.86rem; }
.agent-setup-steps li small { color:var(--ops-text-muted); font-size:.75rem; line-height:1.5; }
.agent-setup-steps li.done { border-color:#a6e2c1; background:#f0fbf5; color:#087443; }
.agent-setup-steps li.done b { color:#fff; background:#087443; }
.pairing-code-panel { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(260px,.55fr); gap:16px; align-items:center; padding:20px; border:1px solid #f2bd64; border-radius:18px; background:#fffbeb; box-shadow:0 8px 24px rgba(181,71,8,.08); }
.pairing-code-panel__icon { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; color:#b54708; background:#fef0c7; }
.pairing-code-panel__icon .app-icon { width:25px; height:25px; }
.pairing-code-panel__content { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pairing-code-panel__value { display:flex; gap:10px; align-items:center; }
.pairing-code-panel strong { min-width:0; font-size:1.25rem; color:#7a2e0e; word-break:break-all; }
.pairing-code-panel__notice { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; color:#7a2e0e; background:rgba(254,240,199,.72); font-size:.82rem; line-height:1.6; }
.agent-stats-grid { margin:0; gap:12px; }
.agent-stats-grid .ops-stat-card { min-height:148px; }
.agent-service-note { display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid #b2ddff; border-radius:13px; color:#175cd3; background:#eff8ff; }
.agent-service-note > span { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:10px; color:#175cd3; background:#d1e9ff; }
.agent-service-note .app-icon { width:20px; height:20px; }
.agent-service-note div { display:flex; flex-direction:column; gap:2px; }
.agent-service-note small { color:#344054; line-height:1.6; }
.agent-next-phase { display:flex; align-items:center; gap:14px; padding:18px 20px; border:1px solid #a6e2c1; border-radius:16px; background:#ecfdf3; box-shadow:var(--ops-shadow-sm); }
.agent-next-phase__check { display:grid; flex:0 0 auto; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:#079455; font-size:1.1rem; font-weight:900; }
.agent-next-phase > div { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.agent-next-phase b { color:#05603a; }
.agent-next-phase small { color:#30745a; line-height:1.6; }
.agent-section-card { margin:0 !important; }
.agent-registry-card .ops-card__body { background:#f8fafc; }
.pairing-attempt-list { display:flex; flex-direction:column; gap:10px; }
.agent-card-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr)); gap:14px; }
.pairing-attempt { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--ops-border); border-radius:12px; background:var(--ops-surface-soft); }
.pairing-attempt > div { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pairing-attempt small { width:100%; color:var(--ops-text-muted); }
.agent-card { align-self:start; overflow:hidden; border:1px solid var(--ops-border); border-block-start:4px solid #f79009; border-radius:15px; background:#fff; box-shadow:0 8px 22px rgba(16,24,40,.06); }
.agent-card.is-online { border-block-start-color:#079455; }
.agent-card > header,.agent-card > footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 20px; }
.agent-card > header { border-bottom:1px solid var(--ops-border); }
.agent-card > footer { flex-wrap:wrap; align-items:flex-start; border-top:1px solid var(--ops-border); background:#fafbfc; }
.agent-card__title { display:flex; align-items:center; gap:10px; }
.agent-card__title h3 { margin:0; }
.agent-card__version { padding:6px 10px; border-radius:9px; color:var(--ops-text-muted); background:var(--ops-surface-soft); }
.agent-card__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--ops-border); }
.agent-card__metrics > div { display:flex; flex-direction:column; gap:6px; padding:16px 20px; background:#fff; }
.agent-card__metrics span { color:var(--ops-text-muted); font-size:.82rem; }
.agent-card__health { display:flex; flex-wrap:wrap; gap:8px 14px; padding:14px 20px; }
.agent-card__health.success { color:#087443; background:#ecfdf3; }
.agent-card__health.warning { color:#93370d; background:#fffaeb; }
.agent-card__health.danger { color:#b42318; background:#fef3f2; }
.agent-card__health small { width:100%; }
.agent-card__primary-actions,.agent-card__management-actions { display:flex; flex-wrap:wrap; gap:8px; }
.agent-card__primary-actions { flex:1 1 330px; }
.agent-card__advanced { position:relative; flex:0 0 auto; }
.agent-card__advanced summary { cursor:pointer; list-style:none; padding:7px 11px; border:1px solid var(--ops-border); border-radius:9px; color:var(--ops-text-muted); background:#fff; font-size:.82rem; font-weight:700; }
.agent-card__advanced summary::-webkit-details-marker { display:none; }
.agent-card__advanced[open] { flex:1 0 100%; padding-top:10px; border-top:1px dashed var(--ops-border); }
.agent-card__advanced[open] summary { width:max-content; margin-inline-start:auto; margin-bottom:10px; }
.agent-card__management-actions { justify-content:flex-end; }
.agent-removal-summary { line-height:1.9; }
.agent-removal-summary .danger { color:#b42318; font-weight:700; }
.confirmation-check { display:flex; gap:9px; align-items:flex-start; padding:12px; border-radius:10px; background:#fef3f2; color:#7a271a; font-weight:700; }
@media (max-width:900px) {
  .agent-onboarding,.pairing-code-panel { grid-template-columns:1fr; }
  .pairing-code-panel__icon { display:none; }
  .agent-setup-steps,.agent-card__metrics { grid-template-columns:1fr 1fr; }
  .agent-onboarding__action { min-width:0; }
}
@media (max-width:560px) {
  .agent-onboarding { padding:20px; border-radius:16px; }
  .agent-next-phase { align-items:stretch; flex-direction:column; }
  .agent-next-phase .btn { width:100%; }
  .agent-setup-steps,.agent-card__metrics { grid-template-columns:1fr; }
  .agent-card > header { align-items:flex-start; flex-direction:column; }
  .pairing-code-panel__value,.pairing-attempt { align-items:stretch; flex-direction:column; }
  .agent-card__primary-actions,.agent-card__management-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .agent-card__primary-actions .ops-small-button,.agent-card__management-actions .ops-small-button { width:100%; }
}

/* School attendance experience — shared responsive primitives */
.source-choice{display:flex;flex-direction:column;gap:.45rem;text-align:right;padding:1.1rem;border:1px solid var(--border-color,#ddd);border-radius:14px;background:var(--surface,#fff);cursor:pointer;text-decoration:none;color:inherit}
.source-choice:hover,.source-choice.recommended{border-color:var(--primary,#2563eb);box-shadow:0 8px 22px rgba(16,24,40,.06)}
.source-choice:disabled{opacity:.6;cursor:not-allowed}
.source-choice span,.source-choice small,.muted{color:var(--text-muted,#667085)}
.setup-steps{line-height:2}.setup-steps .done{color:var(--success,#15803d)}
.source-registry-toolbar{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.source-filter-tabs{display:flex;flex-wrap:wrap;gap:8px}
.source-filter-tabs button{display:flex;gap:7px;align-items:center;border:1px solid var(--ops-border,#d0d5dd);border-radius:10px;background:#fff;color:var(--ops-text-muted,#667085);padding:9px 12px;font-weight:700;cursor:pointer}
.source-filter-tabs button span{display:grid;place-items:center;min-width:24px;height:22px;border-radius:999px;background:var(--ops-surface-soft,#f2f4f7);font-size:.75rem}
.source-filter-tabs button.active{border-color:#2563eb;color:#175cd3;background:#eff8ff}
.source-search{min-width:min(100%,240px);font-size:.8rem;color:var(--ops-text-muted,#667085)}
.source-search span{display:block;margin-bottom:5px}
.attendance-source-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:16px}
.attendance-source-card{align-self:start;overflow:hidden;border:1px solid var(--ops-border,#eaecf0);border-block-start:4px solid #f79009;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.06)}
.attendance-source-card.success{border-block-start-color:#079455}.attendance-source-card.danger{border-block-start-color:#d92d20}.attendance-source-card.is-archived{border-block-start-color:#98a2b3;opacity:.9}
.attendance-source-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--ops-border,#eaecf0)}
.attendance-source-card__identity{display:flex;align-items:center;gap:12px;min-width:0}
.attendance-source-card__icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:#eff8ff;color:#175cd3}
.attendance-source-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.attendance-source-card__title h3{margin:0;font-size:1.08rem}
.attendance-source-card__identity small,.source-code{color:var(--ops-text-muted,#667085)}
.attendance-source-card__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ops-border,#eaecf0)}
.attendance-source-card__facts>div{display:flex;flex-direction:column;gap:5px;padding:14px 18px;background:#fff}
.attendance-source-card__facts span{font-size:.78rem;color:var(--ops-text-muted,#667085)}.attendance-source-card__facts b{font-size:.9rem}
.attendance-source-card__readiness{display:flex;flex-direction:column;gap:8px;padding:14px 20px;background:#fffaeb;color:#93370d}
.attendance-source-card__readiness.success{background:#ecfdf3;color:#087443}.attendance-source-card__readiness.danger{background:#fef3f2;color:#b42318}
.attendance-source-card__readiness div{display:flex;justify-content:space-between;gap:12px}.attendance-source-card__readiness span,.attendance-source-card__readiness small{font-size:.82rem}
.local-source-states{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px!important}.local-source-states>span{display:flex;flex-direction:column;gap:3px;padding:9px;border-radius:8px;background:var(--ops-surface)}.local-source-states small{opacity:.8}.advanced-local-setting{padding:12px;border:1px solid var(--ops-border,#d0d5dd);border-radius:10px}.advanced-local-setting summary{cursor:pointer;font-weight:700}.advanced-local-setting label{display:block;margin-top:10px}.advanced-local-setting small{display:block;margin-top:5px;color:var(--text-muted,#667085)}
.attendance-source-card__notice{padding:10px 20px;background:#fff4ed;color:#9c2a10;font-size:.82rem;font-weight:700}
.attendance-source-card__footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:16px 20px;background:#fafbfc;border-top:1px solid var(--ops-border,#eaecf0)}
.attendance-source-card__primary-actions{display:flex;flex-wrap:wrap;gap:8px}
.attendance-source-card__more{position:relative}.attendance-source-card__more summary{cursor:pointer;color:#475467;font-weight:700}
.attendance-source-card__more[open]{flex:1 0 100%;padding-top:12px;border-top:1px dashed var(--ops-border,#d0d5dd)}
.attendance-source-card__more[open] summary{margin-bottom:10px}.attendance-source-card__more>div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.source-filter-empty{padding:32px;text-align:center;border:1px dashed var(--ops-border,#d0d5dd);border-radius:14px;color:var(--ops-text-muted,#667085)}
.source-delete-modal{max-width:620px}.source-delete-modal label{display:block;font-size:.9rem}.source-delete-modal .input{margin-top:7px}
.source-quota-banner {
  display:flex; align-items:center; gap:12px; margin:12px 0 4px; padding:12px 16px;
  border:1px solid rgba(27,96,196,.16); border-radius:14px;
  background:linear-gradient(135deg,rgba(238,246,255,.95),rgba(237,252,248,.9));
}
.source-quota-banner span { color:var(--ops-text-muted); font-size:.82rem; font-weight:800; }
.source-quota-banner strong { color:var(--ops-color-primary-700); font-size:1.05rem; }
.source-quota-banner small { margin-inline-start:auto; color:var(--ops-text-muted); }
.processor-health-panel { overflow:hidden; border:1px solid var(--ops-border); border-radius:16px; background:var(--ops-surface); box-shadow:var(--ops-shadow-xs); }
.processor-health-panel > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 18px; cursor:pointer; }
.processor-health-panel > summary > span { display:flex; flex-direction:column; gap:3px; }
.processor-health-panel > summary small { color:var(--ops-text-muted); font-weight:500; }
.processor-health-panel > div { padding:0 18px 18px; border-top:1px solid var(--ops-border); }
.source-choice__label { width:max-content; padding:4px 8px; border-radius:999px; color:#175cd3!important; background:#eff8ff; font-weight:900; }
.source-choice em { color:var(--ops-text-muted); font-size:.76rem; font-style:normal; line-height:1.7; }
.source-choice > strong { margin-top:auto; color:var(--ops-color-primary-700); font-size:.78rem; }
.agent-download-panel {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:22px;
  margin-top:18px; padding:20px; border:1px solid rgba(15,146,136,.22); border-radius:16px;
  background:linear-gradient(135deg,#f1fbfa,#eef5ff);
}
.agent-download-panel h3 { margin:4px 0 6px; }
.agent-download-panel p { margin:0 0 6px; color:var(--ops-text-muted); }
.agent-download-panel span,.agent-download-panel small { color:#0b7e76; font-size:.76rem; font-weight:700; }
.agent-download-panel--agents { margin-bottom:18px; }
.source-technical-details { width:100%; padding-top:8px; border-top:1px dashed currentColor; }
.source-technical-details summary { cursor:pointer; font-weight:800; font-size:.78rem; }
.source-technical-details .local-source-payload { display:block!important; margin-top:7px; font-size:.75rem; line-height:1.8; }

.attendance-date-panel {
  display:grid; grid-template-columns:minmax(180px,1.3fr) repeat(4,minmax(120px,1fr)); gap:10px;
  margin-top:12px; padding:14px; border:1px solid var(--ops-border); border-radius:16px;
  background:var(--ops-surface); box-shadow:var(--ops-shadow-xs);
}
.attendance-date-panel > div,.attendance-date-panel > label { display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; padding:9px 12px; border-radius:11px; background:var(--ops-surface-soft); }
.attendance-date-panel small,.attendance-date-panel label > span { color:var(--ops-text-muted); font-size:.72rem; font-weight:800; }
.attendance-date-panel strong { font-size:.9rem; }
.attendance-processing-warning { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.attendance-processing-warning > div { display:flex; flex-direction:column; gap:3px; }
.attendance-stat-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.attendance-stat-filter { display:block; padding:0; border:0; border-radius:18px; background:none; text-align:inherit; cursor:pointer; }
.attendance-stat-filter .ops-stat-card { height:100%; }
.attendance-stat-filter.active { outline:3px solid rgba(27,96,196,.2); outline-offset:2px; }
.attendance-filters-card .ops-search-bar { align-items:flex-end; }
.input.compact { width:auto; min-width:145px; min-height:40px; padding-block:7px; }
.attendance-table thead { position:sticky; top:0; z-index:2; }
.responsive-desktop-table { display:block; width:100%; }
.responsive-desktop-table > table { width:100%; }
.attendance-mobile-list,.people-mobile-list { display:none; }
.row-action-menu { position:relative; display:inline-block; }
.row-action-menu > summary { list-style:none; cursor:pointer; }
.row-action-menu > summary::-webkit-details-marker { display:none; }
.row-action-menu > div {
  position:absolute; z-index:20; inset-inline-end:0; top:calc(100% + 6px);
  display:grid; min-width:170px; gap:6px; padding:8px;
  border:1px solid var(--ops-border); border-radius:12px; background:#fff;
  box-shadow:0 16px 36px rgba(16,24,40,.16);
}
.row-action-menu > div .ops-small-button { justify-content:flex-start; width:100%; }
.attendance-person-card,.people-mobile-card { padding:14px; border:1px solid var(--ops-border); border-radius:14px; background:#fff; box-shadow:var(--ops-shadow-sm); }
.attendance-person-card > header,.people-mobile-card > header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.attendance-person-card header div,.people-mobile-card header div { display:flex; flex-direction:column; gap:4px; }
.attendance-person-card header small,.people-mobile-card header small { color:var(--ops-text-muted); }
.attendance-person-card dl,.people-mobile-card dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.attendance-person-card dl div,.people-mobile-card dl div { padding:9px; border-radius:9px; background:var(--ops-surface-soft); }
.attendance-person-card dt,.people-mobile-card dt { color:var(--ops-text-muted); font-size:.7rem; }
.attendance-person-card dd,.people-mobile-card dd { margin:3px 0 0; font-size:.82rem; font-weight:800; }
.attendance-person-card footer,.people-mobile-card footer { display:flex; flex-wrap:wrap; gap:7px; }
.ops-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding:11px 2px; color:var(--ops-text-muted); font-size:.8rem; }
.ops-pagination__actions { display:flex; align-items:center; gap:9px; }
.ops-skeleton { display:grid; gap:9px; }
.ops-skeleton__row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; padding:15px; border-radius:11px; background:#fff; }
.ops-skeleton__row span { height:13px; border-radius:999px; background:linear-gradient(90deg,#edf1f6 25%,#f7f9fb 50%,#edf1f6 75%); background-size:200% 100%; animation:ops-skeleton 1.2s infinite; }
@keyframes ops-skeleton { to { background-position:-200% 0; } }
.ops-dialog-backdrop { position:fixed; inset:0; z-index:var(--ops-z-dialog); display:grid; place-items:center; padding:18px; background:rgba(6,20,40,.58); }
.ops-dialog { width:min(620px,100%); max-height:90vh; overflow:auto; padding:22px; border:1px solid rgba(255,255,255,.7); border-radius:20px; background:#fff; box-shadow:0 35px 90px rgba(3,12,30,.38); }
.ops-dialog > header,.ops-drawer > header { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:16px; }
.ops-dialog > label { display:block; margin-top:13px; font-weight:800; font-size:.82rem; }
.ops-dialog > label .input { margin-top:6px; }
.ops-dialog > footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ops-drawer { position:fixed; top:0; bottom:0; left:0; width:min(620px,100%); overflow:auto; padding:24px; background:#fff; box-shadow:25px 0 80px rgba(3,12,30,.3); }
.ops-drawer h3 { margin:20px 0 10px; }
.attendance-movement-list { display:grid; gap:9px; }
.attendance-movement-list article { padding:12px; border:1px solid var(--ops-border); border-radius:11px; background:var(--ops-surface-soft); }
.attendance-movement-list article header { display:flex; justify-content:space-between; gap:9px; }
.attendance-movement-list article p { margin:5px 0; color:var(--ops-text-muted); font-size:.78rem; }
.export-summary { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; padding:13px; border-radius:11px; background:var(--ops-surface-soft); }
.export-summary span { color:var(--ops-text-muted); }

@media (max-width:1050px) {
  .attendance-date-panel { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .attendance-stat-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agent-download-panel { grid-template-columns:1fr; }
}
@media (max-width:767.98px) {
  .source-registry-toolbar{align-items:stretch;flex-direction:column}
  .source-search{width:100%}
  .attendance-source-card__facts,.local-source-states{grid-template-columns:1fr 1fr!important}
  .attendance-source-card__header,.attendance-source-card__readiness div{flex-direction:column}
  .attendance-source-card__primary-actions,.attendance-source-card__primary-actions .btn,.attendance-source-card__footer>.btn{width:100%}
  .attendance-date-panel { grid-template-columns:1fr 1fr; }
  .attendance-processing-warning,.ops-pagination { align-items:stretch; flex-direction:column; }
  .responsive-desktop-table { display:none; }
  .attendance-mobile-list,.people-mobile-list { display:grid; gap:10px; }
  .attendance-stat-filters { grid-template-columns:1fr 1fr; }
  .ops-pagination__actions { justify-content:space-between; }
  .ops-drawer { padding:18px; }
}
@media (max-width:900px) {
  /* عقد الاستجابة الوحيد للقائمة: Drawer ثابت وقائمة رأسية لكل الأدوار. */
  html, body { max-width:100%; overflow-x:hidden; }
  body.nav-drawer-open { overflow:hidden; touch-action:none; }
  .app-shell { display:block; min-width:0; }
  .sidebar {
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    width:min(88vw, var(--ops-sidebar-width));
    max-width:320px;
    height:100dvh;
    padding:18px 14px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(105%);
    transition:transform .22s ease;
    z-index:50;
  }
  .nav-open .sidebar { transform:translateX(0); }
  .sidebar-mobile-close {
    display:inline-grid;
    place-items:center;
    position:sticky;
    inset-block-start:0;
    margin-inline-start:auto;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.08);
    font-size:1.55rem;
    z-index:3;
  }
  .sidebar-backdrop { position:fixed; inset:0; z-index:45; border:0; background:rgba(5,17,36,.52); }
  .nav-open .sidebar-backdrop { display:block; }
  .nav-stack,
  .workspace-navigation { display:grid; grid-template-columns:1fr; width:100%; min-width:0; overflow:visible; }
  .nav-caption,
  .workspace-nav-group__toggle { display:grid; }
  .nav-stack a,
  .nav-stack a.nav-item,
  .workspace-nav-group__items { width:100%; min-width:0; white-space:normal; }
  .nav-stack a,
  .nav-stack a.nav-item { min-height:44px; flex:initial; }
  .workspace-nav-group__items { padding-inline-start:8px; }
  .brand { margin-top:-44px; padding-inline-end:48px; }
  .main-area { width:100%; min-width:0; }
}
@media (max-width:430px) {
  .attendance-date-panel,.attendance-stat-filters { grid-template-columns:1fr; }
  .attendance-person-card dl,.people-mobile-card dl { grid-template-columns:1fr; }
  .source-quota-banner { align-items:flex-start; flex-direction:column; }
  .source-quota-banner small { margin:0; }
}

/* Messaging command center */
.messaging-page-intro { margin-bottom:14px; }
.messaging-page-intro .ops-page-header {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:center;
  min-height:170px;
  margin:0;
  padding:28px 30px;
  border:1px solid #d9e6f2;
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 15%,rgba(49,181,169,.13),transparent 19rem),
    linear-gradient(125deg,#ffffff 0%,#f5f9fd 66%,#edf7f6 120%);
  box-shadow:0 16px 42px rgba(18,55,91,.07);
}
.messaging-page-intro .ops-page-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto auto -130px -70px;
  width:300px;
  height:300px;
  border:1px solid rgba(20,111,150,.08);
  border-radius:50%;
  box-shadow:0 0 0 48px rgba(20,111,150,.025),0 0 0 96px rgba(20,111,150,.018);
  pointer-events:none;
}
.messaging-page-intro .ops-page-header__content { max-width:900px; }
.messaging-page-intro .ops-page-header .eyebrow {
  width:max-content;
  padding:7px 11px;
  border:1px solid #b9dedb;
  border-radius:999px;
  color:#087e77;
  background:#e8f7f5;
  letter-spacing:.04em;
}
.messaging-page-intro .ops-page-header h1 {
  margin-top:13px;
  padding-bottom:12px;
  font-size:clamp(2rem,2.6vw,2.9rem);
  line-height:1.2;
}
.messaging-page-intro .ops-page-header p:not(.eyebrow) { max-width:780px; }
.messaging-page-intro .ops-page-header__actions { position:relative; z-index:1; flex:0 0 auto; }
.messaging-connect-button { min-height:50px; padding-inline:19px; border-radius:14px; }
.messaging-connect-button .app-icon { width:19px; }

.messaging-command-center {
  display:grid;
  grid-template-columns:minmax(0,1fr) 285px;
  gap:12px;
  margin-bottom:12px;
}
.messaging-command-center__workspace,
.messaging-command-center__operations {
  min-width:0;
  padding:16px;
  border:1px solid #e0e8f0;
  border-radius:18px;
  background:var(--ops-surface);
  box-shadow:0 7px 24px rgba(16,35,63,.045);
}
.messaging-command-center__heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}
.messaging-command-center__heading > span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--ops-text-strong);
  font-size:.75rem;
  font-weight:900;
}
.messaging-command-center__heading .app-icon { width:16px; color:#0b8b83; }
.messaging-command-center__heading small { color:var(--ops-text-soft); font-size:.64rem; }
.messaging-main-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.messaging-nav-card {
  display:flex;
  align-items:center;
  min-width:0;
  min-height:66px;
  gap:10px;
  padding:10px 11px;
  border:1px solid #e3eaf2;
  border-radius:13px;
  color:var(--ops-text-strong);
  background:#f8fafc;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.messaging-nav-card:hover {
  transform:translateY(-1px);
  border-color:#b9cfdf;
  background:#fff;
  box-shadow:0 8px 18px rgba(16,55,92,.07);
}
.messaging-nav-card.active {
  border-color:#7ec9c2;
  color:#fff;
  background:linear-gradient(135deg,#185eb2,#0a9187);
  box-shadow:0 10px 22px rgba(16,103,143,.17);
}
.messaging-nav-card__icon {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#1767ad;
  background:#e8f1fb;
}
.messaging-nav-card.active .messaging-nav-card__icon { color:#fff; background:rgba(255,255,255,.15); }
.messaging-nav-card__icon .app-icon { width:17px; }
.messaging-nav-card > span:last-child { min-width:0; }
.messaging-nav-card strong,
.messaging-nav-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messaging-nav-card strong { font-size:.72rem; }
.messaging-nav-card small { margin-top:4px; color:var(--ops-text-soft); font-size:.59rem; }
.messaging-nav-card.active small { color:rgba(255,255,255,.72); }

.messaging-operation-buttons { display:grid; gap:8px; }
.messaging-operation-button {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:100%;
  min-height:55px;
  padding:9px 10px;
  border:1px solid #e2e9f0;
  border-radius:12px;
  text-align:start;
  color:var(--ops-text-strong);
  background:#f8fafc;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.messaging-operation-button:hover:not(:disabled) { transform:translateY(-1px); border-color:#a8c8d6; background:#f2fbfa; }
.messaging-operation-button:disabled { cursor:not-allowed; opacity:.55; }
.messaging-operation-button > .app-icon {
  width:34px;
  height:34px;
  padding:8px;
  box-sizing:border-box;
  border-radius:9px;
  color:#087f77;
  background:#e5f6f4;
}
.messaging-operation-button strong,.messaging-operation-button small { display:block; }
.messaging-operation-button strong { font-size:.7rem; }
.messaging-operation-button small { margin-top:3px; color:var(--ops-text-soft); font-size:.59rem; }

.messaging-view-nav {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:18px;
  padding:7px;
  overflow-x:auto;
  border:1px solid #dee7ef;
  border-radius:15px;
  background:#eef3f8;
  scrollbar-width:thin;
}
.messaging-view-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 0 auto;
  min-height:40px;
  gap:7px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:10px;
  color:#65758a;
  font-size:.69rem;
  font-weight:900;
  white-space:nowrap;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease;
}
.messaging-view-link .app-icon { width:15px; }
.messaging-view-link:hover { color:#164f8a; background:rgba(255,255,255,.68); }
.messaging-view-link.active {
  border-color:#d9e4ee;
  color:#0d6f77;
  background:#fff;
  box-shadow:0 5px 14px rgba(16,35,63,.07);
}

@media (max-width:1280px) {
  .messaging-command-center { grid-template-columns:1fr; }
  .messaging-main-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .messaging-operation-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .messaging-page-intro .ops-page-header { display:grid; min-height:0; gap:18px; padding:22px; }
  .messaging-page-intro .ops-page-header__actions,.messaging-connect-button { width:100%; }
  .messaging-page-intro .ops-page-header__actions { justify-content:stretch; }
  .messaging-main-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .messaging-command-center__heading { align-items:flex-start; flex-direction:column; gap:4px; }
}
@media (max-width:480px) {
  .messaging-page-intro .ops-page-header { padding:19px; border-radius:18px; }
  .messaging-page-intro .ops-page-header h1 { font-size:1.75rem; }
  .messaging-command-center__workspace,.messaging-command-center__operations { padding:12px; }
  .messaging-main-nav,.messaging-operation-buttons { grid-template-columns:1fr; }
  .messaging-view-link { flex:0 0 auto; }
}
/* Messaging Center rebuild: scoped RTL operational workspace */
/* التنقل بين أقسام مركز التواصل يقع حصريًا في الشريط الجانبي الرئيسي؛ منطقة المحتوى بعرض كامل بلا rail داخلي. */
.messaging-center{direction:rtl;display:block;width:100%;max-width:100%;min-width:0}
.messaging-center__main{min-width:0;max-width:100%;width:100%}
.messaging-center__header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.1rem 1.2rem;margin-bottom:1rem;border:1px solid rgba(68,96,135,.11);border-radius:1.25rem;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(237,245,255,.92));box-shadow:0 12px 35px rgba(31,68,120,.07)}
.messaging-center__header h1{margin:.2rem 0 .35rem;color:#10213f;font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1.25}.messaging-center__header p{max-width:52rem;margin:0;color:#65758d;line-height:1.85}
.messaging-center__heading{min-width:0}
.messaging-center__eyebrow{color:#168f87;font-size:.78rem;font-weight:850}.messaging-center__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem;flex:0 0 auto}
.messaging-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;min-width:0}.messaging-kpis.compact{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:1rem}
.messaging-next-action{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1rem 0;padding:1.15rem 1.25rem;border:1px solid rgba(32,156,146,.25);border-radius:1.15rem;background:linear-gradient(110deg,#eaf8f7,#edf4ff)}
.messaging-next-action span{color:#168f87;font-size:.76rem;font-weight:850}.messaging-next-action h2{margin:.2rem 0;color:#10213f;font-size:1.16rem}.messaging-next-action p{margin:0;color:#62728a}
.messaging-overview-grid,.messaging-setup-grid,.messaging-readiness-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-width:0}.messaging-readiness-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.messaging-panel{min-width:0;padding:1.1rem;border:1px solid rgba(68,96,135,.13);border-radius:1.1rem;background:#fff;box-shadow:0 10px 28px rgba(24,55,98,.06)}
.messaging-panel h2{margin:0 0 .45rem;color:#142746;font-size:1.02rem}.messaging-panel p{color:#697991;line-height:1.75}.messaging-panel a:not(.btn){color:#167eaf;font-weight:750}.messaging-panel__heading{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;margin-bottom:.8rem}
.messaging-code{display:block;max-width:100%;overflow:auto;margin:.7rem 0;padding:.8rem;border-radius:.7rem;background:#0f203d;color:#d7f8f3;direction:ltr;text-align:left}
.messaging-setup-item p{min-height:3rem;margin:.3rem 0 .75rem}.messaging-env-name{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .65rem;border-radius:.65rem;background:#f0f5fb;direction:ltr}.messaging-env-name button{border:0;background:transparent;color:#167eaf;cursor:pointer;font-weight:750}
.messaging-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;min-width:0}.messaging-channel-card{min-width:0;padding:1.05rem;border:1px solid rgba(68,96,135,.14);border-radius:1.15rem;background:#fff;box-shadow:0 12px 32px rgba(29,61,102,.07)}
.messaging-channel-card>header{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}.messaging-channel-card h2{margin:.2rem 0;color:#10213f;font-size:1.08rem}.messaging-channel-card header p{margin:0;color:#63738a}
.messaging-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1rem 0}.messaging-facts>div{min-width:0;padding:.6rem;border-radius:.7rem;background:#f5f8fc}.messaging-facts dt{color:#77869a;font-size:.72rem}.messaging-facts dd{margin:.2rem 0 0;color:#1b2c47;font-weight:750;overflow-wrap:anywhere}
.messaging-card-actions{display:flex;flex-wrap:wrap;gap:.42rem}.messaging-card-actions button,.messaging-card-actions a,.messaging-legacy button{padding:.48rem .65rem;border:1px solid #d6e0ec;border-radius:.58rem;background:#fff;color:#1d426c;text-decoration:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:750}.messaging-card-actions .danger{color:#a62937;border-color:#efc4c9}
.messaging-technical{margin-top:.75rem;padding-top:.7rem;border-top:1px solid #e9eef5}.messaging-technical summary{cursor:pointer;color:#62758e;font-size:.8rem}.messaging-technical dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem;margin-bottom:0}.messaging-technical dd{margin:0;overflow-wrap:anywhere}
.messaging-legacy{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.7rem;padding:.65rem;border-radius:.7rem;background:#fff7df;color:#7a5813}
.messaging-editor{margin-bottom:1rem}.form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.field-span{grid-column:1/-1}.button-row,.messaging-wizard-actions{display:flex;gap:.55rem;margin-top:1rem}
.messaging-variable-editor{display:grid;gap:.65rem;margin-bottom:1rem}.messaging-inline-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.messaging-inline-actions .input{flex:1;min-width:12rem}.messaging-mapping-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;padding:.85rem;margin:.65rem 0;border:1px solid #dfe8f3;border-radius:12px;background:#f9fbfe}.messaging-mapping-card small{display:block;color:#697991;margin-top:.25rem}.messaging-usage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1rem 0}.messaging-usage-grid>div{padding:.85rem;border:1px solid #dfe8f3;border-radius:12px;background:#fff}.messaging-usage-grid strong,.messaging-usage-grid small{display:block}.messaging-usage-grid small{color:#697991;margin-top:.25rem}.messaging-pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem}@media(max-width:850px){.messaging-mapping-card{grid-template-columns:1fr}.messaging-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.messaging-wizard-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.35rem;padding:0;margin:0 0 1rem;list-style:none}.messaging-wizard-steps li{min-width:0;text-align:center;color:#8895a8}.messaging-wizard-steps li span{display:grid;place-items:center;width:2rem;height:2rem;margin:0 auto .35rem;border-radius:50%;background:#e8eef6;font-weight:850}.messaging-wizard-steps li small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messaging-wizard-steps li.is-active{color:#118e86}.messaging-wizard-steps li.is-active span,.messaging-wizard-steps li.is-done span{background:#168f87;color:#fff}
.messaging-wizard{min-height:25rem}.messaging-choice-grid,.messaging-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.messaging-choice{display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:start;padding:1rem;border:1px solid #dce5ef;border-radius:.9rem;cursor:pointer}.messaging-choice span{grid-column:2;color:#6b7b91;line-height:1.65}.switch-row{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;border:1px solid #e0e7f0;border-radius:.75rem}.switch-row strong,.switch-row small{display:block}.switch-row small{margin-top:.15rem;color:#75849a}.messaging-summary-line{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border-radius:.9rem;background:#eef8f7}.messaging-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.messaging-review>div{padding:.65rem;border-radius:.7rem;background:#f5f8fc}.messaging-review dt{color:#76869a;font-size:.75rem}.messaging-review dd{margin:.2rem 0 0;font-weight:800}
.messaging-required-templates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin:1rem 0}.messaging-required-templates article{display:flex;flex-direction:column;gap:.42rem;min-width:0;padding:.8rem;border:1px solid #dfe7f0;border-radius:.85rem;background:#fff}.messaging-required-templates code{overflow:hidden;text-overflow:ellipsis;direction:ltr}.messaging-required-templates span{color:#65758c;font-size:.8rem}
.messaging-filter-bar,.messaging-readiness-toolbar{display:flex;align-items:end;gap:.65rem;margin-bottom:1rem;padding:.75rem;border-radius:.9rem;background:#f3f7fb}.messaging-filter-bar .input{max-width:22rem}.messaging-readiness-toolbar .field{min-width:min(100%,22rem);margin:0}.messaging-tech-toggle{display:flex;align-items:center;gap:.4rem;padding:.65rem}
.messaging-routing-list{display:grid;gap:1rem}.readiness-card>header{display:flex;justify-content:space-between;gap:.7rem}.readiness-card header p{margin:.2rem 0}.readiness-checks{display:grid;gap:.55rem;padding:0;margin:1rem 0 0;list-style:none}.readiness-checks li{display:flex;gap:.55rem;padding:.65rem;border-radius:.7rem;background:#f5f8fc}.readiness-checks li.is-blocked{background:#fff2f2}.readiness-check-icon{display:grid;place-items:center;flex:0 0 1.45rem;height:1.45rem;border-radius:50%;background:#d8f1ed;color:#087c72;font-weight:900}.readiness-checks .is-blocked .readiness-check-icon{background:#f8d8dc;color:#a62838}.readiness-checks strong,.readiness-checks p,.readiness-checks code,.readiness-checks small{display:block}.readiness-checks p{margin:.15rem 0;font-size:.82rem}.readiness-checks code,.readiness-checks small{margin-top:.25rem;color:#7c8999;font-size:.68rem}.readiness-empty-channel{font-size:1rem;color:#a42d3b!important}.tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0}.tag-list code{padding:.35rem .55rem;border-radius:.45rem;background:#eff3f8}
.messaging-responsive-table{width:100%;min-width:0!important}.messaging-responsive-table th,.messaging-responsive-table td{overflow-wrap:anywhere}.compact{padding:.55rem!important}

@media (max-width:1250px){.messaging-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.messaging-readiness-grid{grid-template-columns:1fr}.messaging-required-templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.messaging-channel-grid{grid-template-columns:1fr}}
@media (max-width:720px){.messaging-center__header{display:block;padding:1rem}.messaging-center__actions{justify-content:flex-start;margin-top:.75rem}.messaging-kpis,.messaging-kpis.compact,.messaging-overview-grid,.messaging-setup-grid,.messaging-choice-grid,.messaging-feature-grid,.messaging-required-templates,.form-grid.two,.messaging-review{grid-template-columns:1fr}.messaging-next-action{display:block}.messaging-next-action .btn{margin-top:.75rem;width:100%}.messaging-wizard-steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:.65rem}.messaging-facts{grid-template-columns:1fr}.messaging-filter-bar,.messaging-readiness-toolbar{align-items:stretch;flex-direction:column}.messaging-filter-bar .input{max-width:none}.field-span{grid-column:auto}.messaging-summary-line{display:block}.messaging-responsive-table thead{display:none}.messaging-responsive-table,.messaging-responsive-table tbody,.messaging-responsive-table tr,.messaging-responsive-table td{display:block;width:100%}.messaging-responsive-table tr{margin-bottom:.75rem;padding:.5rem;border:1px solid #dfe7f0;border-radius:.85rem;background:#fff}.messaging-responsive-table td{display:grid;grid-template-columns:minmax(6.5rem,38%) minmax(0,1fr);gap:.55rem;padding:.5rem!important;border:0!important;text-align:start!important}.messaging-responsive-table td::before{content:attr(data-label);color:#738298;font-size:.74rem;font-weight:800}.table-wrap{overflow:visible}.messaging-wizard{min-height:0}}

/* Owner portal information architecture */
.platform-section-nav {
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 1rem;
  padding:.45rem;
  overflow-x:auto;
  border:1px solid #dfe7f0;
  border-radius:1rem;
  background:#f2f6fa;
  direction:rtl;
  scrollbar-width:thin;
}
.platform-section-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 0 auto;
  min-height:2.7rem;
  gap:.45rem;
  padding:.6rem .8rem;
  border:1px solid transparent;
  border-radius:.72rem;
  color:#5f7088;
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
}
.platform-section-link .app-icon { width:1rem; height:1rem; }
.platform-section-link small {
  padding:.12rem .35rem;
  border-radius:99rem;
  color:#795b18;
  background:#fff2c9;
  font-size:.6rem;
}
.platform-section-link:hover { color:#155f8e; background:rgba(255,255,255,.75); }
.platform-section-link.active {
  border-color:#d8e3ed;
  color:#0c766f;
  background:#fff;
  box-shadow:0 5px 14px rgba(20,48,84,.07);
}
.platform-hub-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
  margin-top:1rem;
}
.platform-hub-card {
  display:grid;
  grid-template-columns:2.75rem minmax(0,1fr) auto;
  align-items:center;
  min-width:0;
  min-height:7rem;
  gap:.75rem;
  padding:1rem;
  border:1px solid #dfe7ef;
  border-radius:1rem;
  color:#172a47;
  background:#fff;
  box-shadow:0 9px 25px rgba(25,55,92,.055);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.platform-hub-card:hover {
  transform:translateY(-2px);
  border-color:#9fcac5;
  box-shadow:0 14px 30px rgba(25,75,100,.09);
}
.platform-hub-card__icon {
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:.8rem;
  color:#0d827a;
  background:#e7f6f4;
}
.platform-hub-card__icon .app-icon { width:1.25rem; height:1.25rem; }
.platform-hub-card strong,.platform-hub-card small { display:block; }
.platform-hub-card strong { font-size:.9rem; }
.platform-hub-card small { margin-top:.35rem; color:#6c7b90; font-size:.72rem; line-height:1.65; }
.platform-hub-card__arrow { width:1rem; color:#93a2b5; }
.platform-advanced-panel {
  margin-top:1rem;
  padding:1rem;
  border:1px dashed #cbd8e5;
  border-radius:1rem;
  background:#f8fafc;
}
.platform-advanced-panel summary { cursor:pointer; color:#52667f; font-weight:850; }
.platform-advanced-panel p { color:#718096; line-height:1.8; }
.messaging-primary-tabs { margin-top:-.2rem; }
.messaging-secondary-tabs { margin-top:-.55rem; background:#f7f9fc; }

@media (max-width:1050px) {
  .platform-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .platform-hub-grid { grid-template-columns:1fr; }
  .platform-section-link { flex:0 0 auto; }
  .platform-hub-card { min-height:6.25rem; }
}