/* =====================================================================
   iSchool — ملف التنسيقات الموحّد
   ---------------------------------------------------------------------
   وُلِّد بدمج كل مصادر CSS التي كانت متفرّقة:
     • assets/css/legacy.css
     • assets/css/style.css
     • ثلاث كتل <style> كانت مضمّنة داخل جسم كل صفحة

   قواعد البناء:
     • قاعدة واحدة لكل محدّد — لا طبقة تغطّي أخرى
     • بلا حيل رفع تخصيص (html body / :not(.unstyled))
     • !important محصور في مواضعه المشروعة فقط: صنف ‎.hidden‎،
       وكتل @media print، وتفضيل تقليل الحركة
     • كل سطح محصور بصنفه: html.page-warehouse و html.page-login
   ===================================================================== */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(5px)} to { opacity: 1; transform: translateY(0)}
}
@keyframes slideDownRow {

            from { opacity: 0; transform: translateY(-8px)}
            to   { opacity: 1; transform: translateY(0)}
}
@keyframes periodMenuPopV43 {
 from{ opacity:0; transform: translateY(-10px) scale(.96)} to{ opacity:1; transform: translateY(0) scale(1)}
}
@keyframes commSeenIn {
from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}
}
@keyframes schoolWelcomeIn {
from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===================== التهيئة الأساسية =====================
   تعادل ما كانت توفّره Tailwind Preflight، مكتوبة محلياً بعد إزالة
   الاعتماد على CDN وقت التشغيل. */

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}
::before, ::after { --tw-content: ''; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body { margin: 0; line-height: inherit; }

hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1em;
}
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }

input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }

/* ======================= أدوات التخطيط =======================
   مولّدة محلياً لتغطية أصناف الوسم المستخدمة فعلياً. */
.block {
    display:block;
}
.inline {
    display:inline;
}
.flex {
    display:flex;
}
.grid {
    display:grid;
}
.hidden {
    display:none;
}
.relative {
    position:relative;
}
.absolute {
    position:absolute;
}
.flex-1 {
    flex:1 1 0%;
}
.flex-col {
    flex-direction:column;
}
.flex-wrap {
    flex-wrap:wrap;
}
.shrink-0 {
    flex-shrink:0;
}
.items-center {
    align-items:center;
}
.items-start {
    align-items:flex-start;
}
.items-end {
    align-items:flex-end;
}
.self-center {
    align-self:center;
}
.justify-between {
    justify-content:space-between;
}
.justify-center {
    justify-content:center;
}
.overflow-hidden {
    overflow:hidden;
}
.overflow-x-auto {
    overflow-x:auto;
}
.overflow-y-auto {
    overflow-y:auto;
}
.cursor-pointer {
    cursor:pointer;
}
.select-none {
    user-select:none;
}
.outline-none {
    outline:2px solid transparent;
    outline-offset:2px;
}
.whitespace-nowrap {
    white-space:nowrap;
}
.whitespace-pre-wrap {
    white-space:pre-wrap;
}
.truncate {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.transition-all {
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s;
}
.z-50 {
    z-index:50;
}
.left-0 {
    left:0px;
}
.right-2\.5 {
    right:0.625rem;
}
.top-1\/2 {
    top:50%;
}
.top-full {
    top:100%;
}
.h-screen {
    height:100vh;
}
.h-fit {
    height:fit-content;
}
.h-9 {
    height:2.25rem;
}
.w-9 {
    width:2.25rem;
}
.w-60 {
    width:15rem;
}
.w-full {
    width:100%;
}
.min-h-0 {
    min-height:0px;
}
.min-w-\[135px\] {
    min-width:135px;
}
.max-h-48 {
    max-height:12rem;
}
.max-h-64 {
    max-height:16rem;
}
.max-h-96 {
    max-height:24rem;
}
.max-h-\[480px\] {
    max-height:480px;
}
.max-h-\[85vh\] {
    max-height:85vh;
}
.max-w-xl {
    max-width:36rem;
}
.max-w-2xl {
    max-width:42rem;
}
.max-w-3xl {
    max-width:48rem;
}
.mx-4 {
    margin-left:1rem;
    margin-right:1rem;
}
.p-1 {
    padding:0.25rem;
}
.p-2 {
    padding:0.5rem;
}
.p-2\.5 {
    padding:0.625rem;
}
.p-3 {
    padding:0.75rem;
}
.p-4 {
    padding:1rem;
}
.p-5 {
    padding:1.25rem;
}
.p-6 {
    padding:1.5rem;
}
.px-2 {
    padding-left:0.5rem;
    padding-right:0.5rem;
}
.px-3 {
    padding-left:0.75rem;
    padding-right:0.75rem;
}
.py-1 {
    padding-top:0.25rem;
    padding-bottom:0.25rem;
}
.py-2 {
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}
.py-3 {
    padding-top:0.75rem;
    padding-bottom:0.75rem;
}
.py-4 {
    padding-top:1rem;
    padding-bottom:1rem;
}
.py-8 {
    padding-top:2rem;
    padding-bottom:2rem;
}
.pb-1 {
    padding-bottom:0.25rem;
}
.pb-2 {
    padding-bottom:0.5rem;
}
.pb-3 {
    padding-bottom:0.75rem;
}
.pr-1 {
    padding-right:0.25rem;
}
.pr-7 {
    padding-right:1.75rem;
}
.mb-0 {
    margin-bottom:0px;
}
.mb-1 {
    margin-bottom:0.25rem;
}
.mb-2 {
    margin-bottom:0.5rem;
}
.mb-3 {
    margin-bottom:0.75rem;
}
.mb-4 {
    margin-bottom:1rem;
}
.mb-5 {
    margin-bottom:1.25rem;
}
.mb-6 {
    margin-bottom:1.5rem;
}
.mb-7 {
    margin-bottom:1.75rem;
}
.mt-0\.5 {
    margin-top:0.125rem;
}
.mt-1 {
    margin-top:0.25rem;
}
.mt-2 {
    margin-top:0.5rem;
}
.mt-3 {
    margin-top:0.75rem;
}
.mt-4 {
    margin-top:1rem;
}
.mt-5 {
    margin-top:1.25rem;
}
.gap-1 {
    gap:0.25rem;
}
.gap-1\.5 {
    gap:0.375rem;
}
.gap-2 {
    gap:0.5rem;
}
.gap-2\.5 {
    gap:0.625rem;
}
.gap-3 {
    gap:0.75rem;
}
.gap-4 {
    gap:1rem;
}
.gap-5 {
    gap:1.25rem;
}
.gap-6 {
    gap:1.5rem;
}
.grid-cols-1 {
    grid-template-columns:repeat(1,minmax(0,1fr));
}
.grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-cols-5 {
    grid-template-columns:repeat(5,minmax(0,1fr));
}
.text-\[9px\] {
    font-size:9px;
}
.text-\[10px\] {
    font-size:10px;
}
.text-\[11px\] {
    font-size:11px;
}
.text-xs {
    font-size:0.75rem;
    line-height:1rem;
}
.text-sm {
    font-size:0.875rem;
    line-height:1.25rem;
}
.text-base {
    font-size:1rem;
    line-height:1.5rem;
}
.text-lg {
    font-size:1.125rem;
    line-height:1.75rem;
}
.text-xl {
    font-size:1.25rem;
    line-height:1.75rem;
}
.text-2xl {
    font-size:1.5rem;
    line-height:2rem;
}
.text-3xl {
    font-size:1.875rem;
    line-height:2.25rem;
}
.leading-6 {
    line-height:1.5rem;
}
.leading-none {
    line-height:1;
}
.leading-tight {
    line-height:1.25;
}
.font-medium {
    font-weight:500;
}
.font-semibold {
    font-weight:600;
}
.font-bold {
    font-weight:700;
}
.font-mono {
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.text-right {
    text-align:right;
}
.text-left {
    text-align:left;
}
.text-center {
    text-align:center;
}
.rounded-lg {
    border-radius:0.5rem;
}
.rounded-xl {
    border-radius:0.75rem;
}
.rounded-2xl {
    border-radius:1rem;
}
.rounded-full {
    border-radius:9999px;
}
.shadow-md {
    box-shadow:0 4px 6px -1px rgba(16,35,65,.1),0 2px 4px -2px rgba(16,35,65,.1);
}
.shadow-xl {
    box-shadow:0 20px 25px -5px rgba(16,35,65,.1),0 8px 10px -6px rgba(16,35,65,.1);
}
.border {
    border-width:1px;
}
.border-b {
    border-bottom-width:1px;
}
.border-t {
    border-top-width:1px;
}
.border-l {
    border-left-width:1px;
}

/* تباعد الأبناء */
.space-y-1 > * + * {
    margin-top: 0.25rem;
}
.space-y-1\.5 > * + * {
    margin-top: 0.375rem;
}
.space-y-2 > * + * {
    margin-top: 0.5rem;
}
.space-y-3 > * + * {
    margin-top: 0.75rem;
}
.space-y-4 > * + * {
    margin-top: 1rem;
}
.space-y-5 > * + * {
    margin-top: 1.25rem;
}
.divide-y > * + * {
    border-top-width: 1px;
}

/* المتغيّرات الاستجابية */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:items-end { align-items: flex-end; }
    .md\:justify-between { justify-content: space-between; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
    .xl\:col-span-3 { grid-column: span 3 / span 3; }
}

/* ========================= القواعد العامة ========================= */

body {
    font-family: "Tajawal", "Segoe UI", system-ui, -apple-system, sans-serif;
    max-width: 100%;
    overflow-x: hidden;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
    background: var(--bg);
    color: var(--text);
}
.neon-border {
    border-width: 1px;
    border-style: solid;
    box-shadow: var(--shadow-1);
    max-width: 100%;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.tab-content {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}
.tab-content.active {
    display: block;
    animation: none;
}
.name-field input {
    width: 100%;
    padding: 4px 5px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 13.5px;
    outline: none;
    text-align: center;
    font-weight: 650;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.name-field label {
    display: block;
    font-size: 12px;
    margin-bottom: 2px;
    text-align: center;
    font-weight: 750;
}
.btn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 800;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(63,77,99,0.4);
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--primary-soft);
    color: var(--primary);
    border-color: #bcd2fb;
}
.btn-edit:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}
.btn-disable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 800;
    border-width: 0;
    border-style: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(100,116,139,0.4);
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-line);
}
.btn-disable:hover {
    transform: translateY(-1px);
    background: var(--warning);
    color: #ffffff;
    border: 1px solid var(--warning);
}
.btn-enable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 800;
    border-width: 0;
    border-style: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(100,116,139,0.4);
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-line);
}
.btn-enable:hover {
    transform: translateY(-1px);
    background: var(--success);
    color: #ffffff;
    border: 1px solid var(--success);
}
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 800;
    border-width: 0;
    border-style: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(63,77,99,0.4);
    transition: all 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-line);
}
.btn-delete:hover {
    transform: translateY(-1px);
    background: var(--danger);
    color: #ffffff;
    border: 1px solid var(--danger);
}
.family-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(13, 27, 51, .55);
    backdrop-filter: blur(3px);
}
.family-modal.open {
    display: flex;
}
.family-card {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 10px 12px;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.inp {
    width: 100%;
    padding: 7px 11px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 13px;
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    font-weight: 650;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    min-height: 36px;
}
.lbl {
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-2);
}
.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border-width: 0;
    border-style: none;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease);
    white-space: nowrap;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 34px;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-1);
}
.mini-btn:hover {
    transform: none;
    background: var(--surface-2);
    border-width: 1px;
    border-style: solid;
    border-color: #a9b8cd;
    color: var(--text);
    box-shadow: var(--shadow-2);
    filter: none;
}
.account-card {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 12px;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.grade-input {
    width: 64px;
    padding: 3px 4px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 12px;
    text-align: center;
    outline: none;
    font-weight: 700;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    min-height: 30px;
}
.grade-pair {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}
.print-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial,sans-serif;
    font-size: var(--readable-font-table);
    line-height: 1.45;
}
.print-table th {
    border-width: 1px;
    border-style: solid;
    padding: 9px 10px;
    text-align: right;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    background: #f6f8fb;
    color: #000000;
    border-color: #94a3b8;
    white-space: nowrap;
}
.print-table td {
    border-width: 1px;
    border-style: solid;
    padding: 8px 10px;
    text-align: right;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    background: transparent;
    color: var(--text-2);
    border-color: #94a3b8;
}
#reportFieldsPanel.open {
    max-height: 400px;
    opacity: 1;
}
.report-field-row {
    display: flex;
    align-items: center;
    gap: 5px;
    animation: slideDownRow 0.3s ease both;
    flex-direction: row;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-sm);
    padding: 5px 8px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.report-field-row label {
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}
.report-field-row input[type=checkbox] {
    accent-color: #3f4d63;
    cursor: pointer;
}
.critical-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.critical-table th {
    padding: 9px 10px;
    text-align: right;
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--border);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.critical-table td {
    padding: 5px 8px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}
.stat-bar-wrap {
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    background: var(--surface-3);
    border-color: var(--chart-border);
    border: 1px solid var(--border);
}
.stat-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .35s;
    background: linear-gradient(180deg, #4f86e8, var(--primary));
    box-shadow: 0 0 14px rgba(148,163,184,.20);
}
.active-user-card {
    min-width: 145px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease);
}
.active-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.certificate-field-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.certificate-field-grid label {
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.cred-badge {
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-color: #bcd2fb;
    border-radius: 999px;
    padding: 3px 6px;
    font-size: var(--readable-font-small);
    margin-top: 3px;
    direction: ltr;
    line-height: 1.5;
    font-weight: 700;
    background: var(--primary-soft);
    color: var(--primary);
}
.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: var(--readable-font-small);
    line-height: 1.5;
    font-weight: 700;
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
}
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    gap: 8px;
}
.comm-message, .salary-box, .salary-ledger-card {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease);
}
.report-fields-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.report-fields-toolbar .mini-btn {
    padding: 5px 12px;
}
#reportFieldsCheckboxes, .v44-period-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.grade-split-box {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.grade-split-box .grade-input {
    width: 52px;
}
.grade-mini-label {
    display: block;
    font-size: 11.5px;
    margin-bottom: 2px;
    text-align: center;
    line-height: 1.5;
    font-weight: 800;
}
.grade-readonly {
    width: 52px;
    padding: 5px 4px;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    font-size: 13px;
    text-align: center;
    min-height: 28px;
    font-weight: 800;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.grade-total-readonly {
    font-weight: 800;
    background: var(--primary-soft);
    color: var(--primary);
    border-color: #bcd2fb;
}
.exempt-general, .exempt-individual {
    font-weight: 800;
    color: var(--info);
}
.vertical-chart {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-height: 190px;
    padding: 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.vbar-item {
    min-width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 18px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-color: 0;
    border: 1px solid var(--border);
}
.vbar-track {
    height: 126px;
    width: 38px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--surface-3);
    box-shadow: inset 0 2px 9px rgba(22,35,58,.18);
    border: 1px solid var(--border);
}
.vbar-fill {
    width: 100%;
    border-radius: 999px;
    transition: height .35s;
    background: linear-gradient(180deg, #4f86e8, var(--primary));
    box-shadow: 0 0 16px color-mix(in srgb, var(--chart-fill-1), transparent 45%);
}
.vbar-label {
    font-size: var(--readable-font-small);
    text-align: center;
    line-height: 1.5;
    color: var(--muted);
    font-weight: 650;
}
.vbar-pct {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    padding: 1px 8px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    background: var(--primary-soft);
    border-color: #bcd2fb;
}
.advance-meter {
    height: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-3);
    border-color: var(--chart-border);
    border: 1px solid var(--border);
}
.advance-meter-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .25s;
    background: linear-gradient(180deg, #4f86e8, var(--primary));
    box-shadow: 0 0 14px rgba(148,163,184,.20);
}
.account-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.grade-excel-table th {
    border-width: 1px;
    border-style: solid;
    padding: 7px 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
}
.grade-excel-table td {
    border-width: 1px;
    border-style: solid;
    padding: 4px 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
    background: transparent;
    color: var(--text-2);
    border-color: var(--border);
}
.grade-excel-table .student-name-cell {
    min-width: 190px;
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.grade-excel-table .class-cell {
    min-width: 95px;
    font-size: 13px;
    font-weight: 750;
}
.grade-excel-input {
    width: 48px;
    height: 30px;
    padding: 3px 4px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 12px;
    text-align: center;
    outline: none;
    font-weight: 700;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    min-height: 30px;
}
.grade-excel-input:focus {
    box-shadow: 0 0 0 3px var(--primary-ring);
    border-color: var(--primary);
    outline: none;
}
.grade-excel-readonly {
    min-width: 48px;
    height: 30px;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.grade-excel-avg {
    min-width: 54px;
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info-line);
}
.period-dropdown-bar {
    margin-top: 10px;
    margin-bottom: 12px;
}
.period-dropdown-bar details {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 10px 12px;
    box-shadow: var(--shadow-3);
    background: var(--surface);
    border: 1px solid var(--border);
}
.period-dropdown-bar summary {
    cursor: pointer;
    font-weight: 850;
    font-size: 13.5px;
    list-style: none;
    user-select: none;
}
.period-dropdown-bar summary::-webkit-details-marker, .period-dropdown-bar.motion-period-picker summary::-webkit-details-marker, #printArea, #tab-users #usersTableBody tr.user-filter-hidden, #usersTableBody tr[data-role="staff"] .btn-edit, #usersTableBody tr[data-role="staff"] .btn-disable, #usersTableBody tr[data-role="staff"] .btn-enable, #usersTableBody tr[data-role="staff"] .btn-delete, #usersTableBody .btn-edit, #usersTableBody .btn-disable, #usersTableBody .btn-enable, #usersTableBody .btn-delete, #tab-users #usersTableBody .btn-edit, #tab-users #usersTableBody .btn-disable, #tab-users #usersTableBody .btn-enable, #tab-users #usersTableBody .btn-delete, #tab-users #usersTableBody button, #tab-users table th:nth-child(7), #tab-users table td:nth-child(7), .staff-permissions-dropdown-v64 summary::-webkit-details-marker, #tab-staff .staff-permissions-dropdown-v64, #tab-staff .staff-permissions-menu-v64, #tab-staff .staff-permissions-dropdown-v64 input, #tab-staff .staff-permissions-save-v64, [data-v71-parent-hidden="1"], #tab-settings #parentPortalStatsV69, #tab-settings #parentPortalListV69, #tab-settings #usersTableBody, #tab-settings .users-filter-panel, #tab-settings [id*="parentPortal"], #tab-settings [id*="users"]:not(#yearsList), #tab-settings #tab-users, .v31-period-menu summary::-webkit-details-marker {
    display: none;
}
.period-dropdown-bar summary:before {
    content: '▾';
    margin-left: 8px;
}
.period-dropdown-bar details:not([open]) summary:before, .v31-period-menu:not([open]) summary:before {
    content: '◀';
}
.period-dropdown-options, .v31-period-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.period-dropdown-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-width: 1px;
    border-style: solid;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.period-dropdown-options input, .v31-period-options input {
    accent-color: #3f4d63;
}
.period-dropdown-bar.motion-period-picker {
    position: relative;
    margin-top: 10px;
    margin-bottom: 14px;
    z-index: 20;
}
.period-dropdown-bar.motion-period-picker details {
    display: inline-block;
    min-width: 265px;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border-color: 0;
    box-shadow: none;
}
.period-dropdown-bar.motion-period-picker summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: var(--r-sm);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 13.5px;
    font-weight: 700;
    background: var(--primary);
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 1px 2px rgba(29, 78, 216, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    color: #ffffff;
    border: 1px solid var(--primary);
}
.period-dropdown-bar.motion-period-picker summary:hover {
    transform: none;
    filter: none;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .3);
    background: var(--primary-600);
    border-color: var(--primary-600);
}
.period-dropdown-bar.motion-period-picker summary:before {
    content: '☰';
    margin: 0 0 0 3px;
    font-size: 14px;
    color: #ffffff;
}
.period-dropdown-bar.motion-period-picker details[open] summary:before {
    content: '✕';
}
.period-dropdown-bar.motion-period-picker .period-dropdown-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    max-width: min(540px, 92vw);
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 9px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    transform-origin: top right;
    animation: periodMenuPopV43 .22s cubic-bezier(.2,.9,.25,1.15) both;
    background: var(--surface);
    border: 1px solid var(--border);
}
.period-dropdown-bar.motion-period-picker .period-dropdown-options label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    font-size: 12.5px;
    font-weight: 800;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.period-dropdown-bar.motion-period-picker .period-dropdown-options label:hover {
    transform: translateX(-2px);
}
.period-dropdown-bar.motion-period-picker .period-dropdown-options input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3f4d63;
}
:root {
    --ui-motion: cubic-bezier(.2,.85,.25,1);
    --chart-bg: #ffffff;
    --chart-border: #dde4ee;
    --chart-text: #16233a;
    --chart-muted: #5e6c81;
    --chart-track: #e9eef6;
    /* تدرّج أزرق للأعمدة: النغمات تتناوب بين الأعمدة لتمييزها */
    --chart-fill-1: #1d4ed8;
    --chart-fill-2: #4f86e8;
    --chart-fill-3: #0e7490;
    --ui-radius-sm: 10px;
    --ui-radius: 16px;
    --ui-radius-lg: 24px;
    --ui-shadow-soft: 0 14px 34px rgba(22,35,58,.28), inset 0 1px 0 rgba(255,255,255,.06);
    --ui-shadow-float: 0 22px 55px rgba(22,35,58,.34), inset 0 1px 0 rgba(255,255,255,.08);
    --readable-font-main: 15px;
    --readable-font-small: 12.5px;
    --readable-font-label: 13px;
    --readable-font-control: 14px;
    --readable-font-table: 13.5px;
    --readable-font-title: 24px;
    --readable-font-section: 19px;
    color-scheme: light;
    --bg: #eef2f7;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --surface-3: #e9eef6;
    --border: #dde4ee;
    --border-strong: #c3cede;
    --text: #16233a;
    --text-2: #3f4d63;
    --muted: #5e6c81;
    --primary: #1d4ed8;
    --primary-600: #1a3fae;
    --primary-700: #16336b;
    --primary-soft: #e9f0ff;
    --primary-ring: rgba(29, 78, 216, .18);
    --nav-bg-top: #14294d;
    --nav-bg-bottom: #0d1b33;
    --nav-text: #b9c7dd;
    --nav-text-soft: #8ba0bf;
    --nav-hover: rgba(255, 255, 255, .07);
    --nav-line: rgba(255, 255, 255, .09);
    --success: #0f7a53;
    --success-soft: #e4f6ee;
    --success-line: #a7ddc6;
    --danger: #c62f2f;
    --danger-soft: #fdeaea;
    --danger-line: #f2b5b5;
    --warning: #955d0d;
    --warning-soft: #fdf3e2;
    --warning-line: #eccf9b;
    --info: #0e7490;
    --info-soft: #e4f5fa;
    --info-line: #a6d9e6;
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --shadow-1: 0 1px 2px rgba(16, 35, 65, .06), 0 1px 3px rgba(16, 35, 65, .05);
    --shadow-2: 0 4px 12px rgba(16, 35, 65, .07), 0 2px 4px rgba(16, 35, 65, .04);
    --shadow-3: 0 12px 28px rgba(16, 35, 65, .12), 0 4px 8px rgba(16, 35, 65, .05);
    --shadow-nav: 0 18px 45px rgba(10, 22, 42, .35);
    --ease: cubic-bezier(.2, .8, .3, 1);
}
.vbar-item:nth-child(2n) .vbar-fill {
    background: linear-gradient(180deg, var(--chart-fill-2), var(--chart-fill-1));
}
.vbar-item:nth-child(3n) .vbar-fill {
    background: linear-gradient(180deg, var(--chart-fill-3), var(--chart-fill-1));
}
html {
    max-width: 100%;
    font-family: "Cairo", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: var(--readable-font-main);
    line-height: 1.58;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
main {
    max-width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
    background: var(--bg);
}
.bg-white {
    max-width: 100%;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    background: var(--surface);
}
.overflow-x-auto {
    max-width: 100%;
}
table {
    max-width: 100%;
    letter-spacing: 0;
    font-size: 13px;
    line-height: 1.45;
    background: var(--surface);
    color: var(--text);
    border-collapse: collapse;
}
#tab-staff .bg-white, #tab-staff .neon-border, #tab-staff, #tab-staff tbody, #tab-staff tr, #tab-staff td {
    overflow: visible;
}
#tab-staff table {
    width: 1095px;
    border-collapse: separate;
    border-spacing: 0 7px;
    table-layout: fixed;
    min-width: 1095px;
    overflow: visible;
    max-width: none;
}
#tab-staff thead tr, aside::-webkit-scrollbar-track {
    background: transparent;
}
#tab-staff thead th {
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
    background: var(--surface-3);
    color: var(--text);
}
#tab-staff tbody tr {
    border-radius: 14px;
    overflow: visible;
    box-shadow: 0 6px 16px rgba(22,35,58,0.14);
    background: transparent;
}
#tab-staff tbody td {
    padding: 9px 7px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.45;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    word-break: normal;
    white-space: nowrap;
    overflow-wrap: normal;
    overflow: visible;
    color: var(--text-2);
    border-top: 1px solid var(--border);
}
#tab-staff tbody td:first-child {
    border-right-width: 1px;
    border-right-style: solid;
    border-radius: 0 14px 14px 0;
}
#tab-staff tbody td:last-child {
    border-left-width: 1px;
    border-left-style: solid;
    border-radius: 14px 0 0 14px;
}
#tab-staff .staff-name-with-avatar {
    display: flex;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
#tab-staff .staff-table-avatar, #tab-staff .active-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9999px;
    font-size: 14px;
    flex: 0 0 36px;
    overflow: hidden;
}
#tab-staff .staff-name-with-avatar > div:last-child {
    min-width: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 46px);
}
#tab-staff .font-mono {
    direction: ltr;
    text-align: center;
    font-size: 12px;
}
#tab-staff td:last-child > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-direction: row;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
#tab-staff .staff-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
#tab-staff [style*="justify-content:center"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
#tab-staff .mini-btn, #tab-staff .btn-edit, #tab-staff .btn-enable, #tab-staff .btn-disable, #tab-staff .btn-delete {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 11.5px;
    border-radius: 9px;
    white-space: nowrap;
    line-height: 1.2;
}
#tab-staff .role-chip {
    margin: 2px 3px;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    font-size: 10.5px;
    vertical-align: middle;
}
.staff-profile-page {
    overflow: hidden;
}
.staff-profile-page .grid {
    align-items: start;
}
.staff-profile-card {
    min-height: 245px;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.staff-profile-avatar {
    width: 118px;
    height: 118px;
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    color: #ffffff;
    border: 1px solid var(--border);
}
#tab-staff .overflow-x-auto {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 10px;
    overflow: visible;
    max-width: 100%;
}
#tab-staff table th:nth-child(1), #tab-staff table td:nth-child(1) {
    width: 245px;
}
#tab-staff table th:nth-child(2), #tab-staff table td:nth-child(2) {
    width: 90px;
    text-align: center;
}
#tab-staff table th:nth-child(3), #tab-staff table td:nth-child(3) {
    width: 105px;
    text-align: center;
}
#tab-staff table th:nth-child(4), #tab-staff table td:nth-child(4), #tab-staff table th:nth-child(5), #tab-staff table td:nth-child(5) {
    width: 125px;
    text-align: center;
}
#tab-staff table th:nth-child(6), #tab-staff table td:nth-child(6) {
    width: 175px;
    text-align: center;
    overflow: visible;
}
#tab-staff table th:nth-child(7), #tab-staff table td:nth-child(7) {
    width: 230px;
    text-align: center;
    overflow: hidden;
    min-width: 230px;
    max-width: 230px;
}
#tab-staff .staff-name-with-avatar [class*="text-[9px]"], #tab-staff .staff-name-with-avatar .text-\[9px\] {
    display: inline;
    margin: 0;
    font-size: 10px;
    white-space: nowrap;
}
#tab-staff .staff-name-with-avatar [class*="text-[9px]"]::before, #tab-staff .staff-name-with-avatar .text-\[9px\]::before {
    content: " - ";
}
#tab-staff .staff-name-with-avatar span {
    display: inline;
    white-space: nowrap;
}
#tab-staff td:nth-child(6) {
    white-space: nowrap;
    overflow: hidden;
}
#tab-staff td:last-child {
    white-space: normal;
    overflow: hidden;
}
#tab-staff td:last-child .staff-actions, #tab-staff td:last-child [style*="display:flex"], #tab-staff td:last-child [style*="justify-content:center"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
#tab-staff td:last-child button, #tab-staff td:last-child .mini-btn, #tab-staff td:last-child .btn-edit, #tab-staff td:last-child .btn-enable, #tab-staff td:last-child .btn-disable, #tab-staff td:last-child .btn-delete {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: auto;
    width: auto;
    min-height: 27px;
    height: 27px;
    padding: 4px 7px;
    font-size: 9.5px;
    line-height: 1;
    white-space: nowrap;
    max-height: 27px;
    border-radius: 8px;
}
#tab-staff .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}
#tab-staff .overflow-x-auto::-webkit-scrollbar-track, #tab-staff .overflow-x-auto::-webkit-scrollbar-thumb {
    border-radius: 999px;
}
.comm-seen-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    color: var(--muted);
}
.comm-seen-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    border-width: 1px;
    border-style: solid;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.comm-view-panel {
    margin-top: 10px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r);
    padding: 10px;
    display: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.comm-view-panel.open {
    display: block;
    animation: commSeenIn .2s ease both;
}
.comm-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
    gap: 8px;
    margin-top: 8px;
}
.comm-view-user {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r);
    padding: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.comm-view-user b {
    font-size: 12px;
    color: var(--text);
}
.comm-view-user small {
    display: block;
    font-size: 9.5px;
    margin-top: 2px;
    color: var(--muted);
}
.comm-view-status {
    font-size: 10px;
    font-weight: 900;
    border-radius: 999px;
    padding: 4px 7px;
    white-space: nowrap;
}
.comm-view-status.seen {
    border-width: 1px;
    border-style: solid;
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}
.comm-view-status.unseen {
    border-width: 1px;
    border-style: solid;
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-line);
}
.users-filter-panel {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(130px,1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.user-print-card {
    width: 8.55cm;
    height: 5.4cm;
    border-width: 1px;
    border-style: dashed;
    border-radius: 10px;
    padding: 7px 9px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    break-inside: avoid;
    page-break-inside: avoid;
    font-family: Arial, sans-serif;
    background: #ffffff;
    border-color: #94a3b8;
    color: #000000;
}
.user-print-card .school-name {
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom-color: #dde4ee;
}
.user-print-card .student-name {
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    margin: 2px 0 3px;
}
.user-print-card .meta {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.user-print-card .cred-line {
    direction: ltr;
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    padding: 4px 6px;
    margin-top: 3px;
    background: #f6f8fb;
    border-color: #dde4ee;
    color: #000000;
}
.user-print-card .note {
    font-size: 8px;
    text-align: center;
    margin-top: 2px;
    color: #16233a;
}
.permission-denied-box {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r);
    padding: 18px;
    text-align: center;
    font-weight: 900;
    background: var(--warning-soft);
    border: 1px dashed var(--warning-line);
    color: var(--warning);
}
body.printing-login-cards #printArea, #staffPermPopupV67.open {
    display: block;
}
#tab-staff .staff-name-v64 {
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1.35;
}
.staff-permissions-dropdown-v64 {
    position: static;
    display: inline-block;
    min-width: 220px;
    max-width: 260px;
    z-index: 99999;
    overflow: visible;
}
.staff-permissions-dropdown-v64 summary {
    list-style: none;
    cursor: pointer;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
}
.staff-permissions-dropdown-v64 summary:before {
    content: "▾";
    margin-left: 6px;
}
.staff-permissions-dropdown-v64[open] summary:before {
    content: "×";
}
.staff-permissions-menu-v64 {
    position: fixed;
    top: 100%;
    right: 0;
    z-index: 999999;
    width: 270px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;
    border-radius: var(--r-lg);
    border-width: 1px;
    border-style: solid;
    box-shadow: var(--shadow-3);
    min-width: 320px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
}
.staff-permissions-menu-v64 label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text-2);
}
.staff-permissions-menu-v64 input, .v69-perm-matrix input {
    width: 15px;
    height: 15px;
    accent-color: #3f4d63;
}
.staff-permissions-save-v64 {
    width: 100%;
    margin-top: 8px;
    min-height: 30px;
    border-color: 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}
.staff-permissions-dropdown-v64[open] {
    z-index: 100000;
    position: static;
    overflow: visible;
}
#tab-staff .staff-table-avatar img, #tab-staff .staff-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
#tab-staff .staff-profile-avatar {
    overflow: hidden;
    border-radius: 9999px;
}
.staff-permissions-dropdown-v64 details {
    position: static;
    overflow: visible;
}
#tab-staff details, #tab-staff .dropdown, #tab-staff .menu, #tab-staff [role="menu"] {
    position: relative;
    z-index: 999999;
}
#tab-staff details[open] > *:last-child, #tab-staff .dropdown-menu {
    z-index: 999999;
}
#tab-staff .active-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
#tab-staff .staff-name-cell-v67 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
#tab-staff .staff-avatar-v67 {
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#3f4d63,#94a3b8);
    font-weight: 900;
    border-width: 1px;
    border-style: solid;
}
#tab-staff .staff-avatar-v67 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#tab-staff .staff-info-v67 {
    min-width: 0;
    overflow: hidden;
}
#tab-staff .staff-name-v67 {
    font-size: 14px;
    font-weight: 900;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#tab-staff .staff-sub-v67 {
    font-size: 9.5px;
    max-width: 175px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.staff-perm-view-btn-v67 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    max-width: 155px;
    padding: 6px 9px;
    border-radius: var(--r-sm);
    border-width: 1px;
    border-style: solid;
    font-size: 10.5px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-2);
}
#staffPermPopupV67 {
    position: fixed;
    z-index: 2147483647;
    min-width: 220px;
    max-width: 320px;
    max-height: 320px;
    overflow: auto;
    padding: 10px;
    border-radius: var(--r-lg);
    border-width: 1px;
    border-style: solid;
    box-shadow: var(--shadow-3);
    display: none;
    direction: rtl;
    background: var(--surface);
    border: 1px solid var(--border);
}
#staffPermPopupV67 .perm-title-v67 {
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 8px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 7px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
#staffPermPopupV67 .perm-chip-v67 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    margin: 5px 0;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
}
#staffPermPopupV67 .perm-chip-v67::before {
    content: "✓";
    font-weight: 900;
}
#staffPermPopupV67 .perm-empty-v67 {
    font-size: 11px;
    padding: 8px;
    text-align: center;
    color: var(--muted);
}
#tab-staff td:last-child .mini-btn.secondary, #tab-staff td:last-child button[onclick*="openStaffProfileV52"] {
    max-width: 92px;
    min-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v69-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
    gap: 12px;
}
.v69-card {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-1);
    background: var(--surface);
    border: 1px solid var(--border);
}
.v69-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    font-size: 10.5px;
    font-weight: 800;
    margin: 2px;
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
}
.v69-muted {
    font-size: 11px;
    color: var(--muted);
}
.v69-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 7px;
    font-size: 11.5px;
}
.v69-table th {
    font-size: 11px;
    font-weight: 900;
    padding: 8px;
    text-align: right;
    background: var(--surface-3);
    color: var(--text);
}
.v69-table td {
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 8px;
    vertical-align: middle;
    background: transparent;
    color: var(--text-2);
    border-top: 1px solid var(--border);
}
.v69-table td:first-child {
    border-right-width: 1px;
    border-right-style: solid;
    border-radius: 0 12px 12px 0;
}
.v69-table td:last-child {
    border-left-width: 1px;
    border-left-style: solid;
    border-radius: 12px 0 0 12px;
}
.v69-stat {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--r-lg);
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.v69-stat b {
    font-size: 19px;
    color: var(--primary);
}
.v69-notify-unread {
    box-shadow: 0 0 0 1px rgba(148,163,184,.2),0 10px 24px rgba(148,163,184,.08);
    border-inline-start: 3px solid var(--primary);
    background: var(--primary-soft);
}
.v69-id-card {
    width: 8.6cm;
    height: 5.4cm;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    align-items: center;
    break-inside: avoid;
    page-break-inside: avoid;
    font-family: Arial,sans-serif;
    direction: rtl;
    overflow: hidden;
    background: #ffffff;
    color: #16233a;
    border: 1px solid var(--border);
}
.v69-id-photo {
    width: 2.15cm;
    height: 2.15cm;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden;
    flex: 0 0 2.15cm;
    background: var(--surface-3);
    border: 2px solid var(--border-strong);
}
.v69-id-photo img, .staff-avatar-v52 img, .staff-avatar-small-v52 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v69-id-info {
    flex: 1;
    min-width: 0;
}
.v69-id-school {
    font-size: 10px;
    font-weight: 900;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 3px;
    margin-bottom: 4px;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
}
.v69-id-name {
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v69-id-line {
    font-size: 10px;
    margin-top: 3px;
}
.v69-id-badge {
    margin-top: 5px;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    padding: 4px;
    font-size: 9px;
    text-align: center;
    font-weight: 800;
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
}
.v69-perm-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 8px;
}
.v69-perm-matrix label {
    display: flex;
    align-items: center;
    gap: 7px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    padding: 8px;
    font-size: 11px;
    font-weight: 800;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.v70-perm-section {
    grid-column: 1/-1;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--r-lg);
    border-width: 1px;
    border-style: solid;
    font-size: 12px;
    font-weight: 900;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.v70-perm-note {
    grid-column: 1/-1;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--muted);
}
.search-only-empty-v76 {
    padding: 14px;
    border-width: 1px;
    border-style: dashed;
    border-radius: var(--r);
    text-align: center;
    font-size: 12px;
    background: var(--warning-soft);
    border: 1px dashed var(--warning-line);
    color: var(--warning);
}
.receipt-cut-gap {
    height: 18mm;
    background: transparent;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.grade-excel-input.grade-invalid, .grade-excel-input.grade-invalid:focus {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 0 3px rgba(198, 47, 47, .16);
}
.link-limit-hint {
    font-size: 9px;
    color: #16233a;
    margin-top: 3px;
}
.v31-inline-period-wrapper {
    min-width: 260px;
    max-width: 100%;
}
.v31-period-menu {
    background: var(--surface);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(63,77,99,.75);
    border-radius: var(--r-lg);
    padding: 8px 10px;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--border);
}
.v31-period-menu summary {
    cursor: pointer;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    list-style: none;
    white-space: nowrap;
}
.v31-period-menu summary:before {
    content: '▾';
    margin-left: 7px;
    color: #94a3b8;
}
.v31-period-menu summary span {
    color: #94a3b8;
    font-weight: 600;
}
.v31-period-options label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    border-width: 1px;
    border-style: solid;
    border-color: #dde4ee;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.v31-period-note {
    background: var(--info-soft);
    border-width: 1px;
    border-style: solid;
    border-color: #dde4ee;
    border-radius: 12px;
    padding: 8px 10px;
    color: var(--info);
    font-size: 11px;
    border: 1px solid var(--info-line);
}
.v44-period-button-wrapper {
    margin-top: 8px;
    margin-bottom: 10px;
    position: relative;
    z-index: 30;
}
.v44-period-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.v44-period-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    min-height: 36px;
    border-color: 0;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(29, 78, 216, .28);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
    border: 1px solid var(--primary);
}
.v44-period-toggle-btn:hover {
    background: var(--primary-600);
    transform: none;
    border-color: var(--primary-600);
    box-shadow: 0 4px 12px rgba(29, 78, 216, .3);
    filter: none;
}
.v44-period-toggle-btn span {
    opacity: .9;
    font-size: 11px;
}
.v44-period-arrow {
    display: inline-block;
    transition: transform .2s ease;
}
.v44-period-panel.open + .v44-period-arrow {
    transform: rotate(180deg);
}
.v44-period-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .45s cubic-bezier(0.4,0,0.2,1), opacity .28s ease, margin-top .28s ease, transform .28s ease;
    transform: translateY(-8px);
}
.v44-period-panel.open {
    max-height: 420px;
    opacity: 1;
    margin-top: 10px;
    transform: translateY(0);
}
.v44-period-options label {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-2);
    border-width: 1px;
    border-style: solid;
    border-color: #dde4ee;
    border-radius: 8px;
    padding: 7px 10px;
    white-space: nowrap;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    animation: slideDownRow .3s ease both;
    cursor: pointer;
    border: 1px solid var(--border);
}
.v44-period-options label:hover {
    border-color: #bcd2fb;
    background: var(--primary-soft);
    color: var(--primary);
}
.v44-period-options input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: #3f4d63;
    cursor: pointer;
}
nav button {
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
input {
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    letter-spacing: 0;
    font-size: var(--readable-font-control);
    font-weight: 650;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: none;
}
select, textarea {
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: none;
    min-height: 36px;
    padding: 7px 11px;
}
nav button:hover {
    transform: translateY(-1px);
}
aside {
    letter-spacing: 0;
    background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
    color: var(--nav-text);
    border-color: transparent;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-nav);
}
section, div, span {
    letter-spacing: 0;
}
p {
    letter-spacing: 0;
    font-size: var(--readable-font-small);
    line-height: 1.5;
    font-weight: 650;
}
label {
    letter-spacing: 0;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text-2);
}
button {
    letter-spacing: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease);
}
th {
    letter-spacing: 0;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.35;
}
td {
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}
h1 {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--text);
}
.text-2xl {
    font-size: var(--readable-font-title);
    line-height: 1.35;
    font-weight: 850;
}
h2 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    color: var(--text);
}
.text-xl {
    font-size: 21px;
    line-height: 1.4;
    font-weight: 850;
}
h3 {
    font-size: 16px;
    line-height: 1.45;
    font-weight: 800;
    color: var(--text);
}
.text-lg, .text-base {
    font-size: var(--readable-font-section);
    line-height: 1.45;
    font-weight: 800;
}
h4 {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--text);
}
h5 {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
    color: var(--text);
}
.text-sm {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
}
.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\], .text-xs, small {
    font-size: var(--readable-font-small);
    line-height: 1.5;
    font-weight: 650;
}
input::placeholder, textarea::placeholder {
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
    color: #94a3b8;
}
.hover\:bg-white {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
}
aside nav button {
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.35;
}
#sidebarNav button {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--r);
    background: transparent;
    color: var(--nav-text);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-shadow: none;
    text-align: right;
    transition: background .16s var(--ease), color .16s var(--ease),
                border-color .16s var(--ease);
}
aside nav button span, #sidebarNav button span {
    font-size: 18px;
}
aside h2 {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 850;
    color: #f2f6fc;
}
aside .text-\[10px\] {
    font-size: 12px;
    font-weight: 700;
}
aside p, aside small {
    font-size: 12px;
    font-weight: 700;
    color: var(--nav-text-soft);
}
.grade-excel-table {
    font-size: var(--readable-font-table);
    line-height: 1.45;
}
#gradePeriodToggleLabel, #kashfToggleLabel {
    font-size: 13.5px;
    font-weight: 850;
}
.period-field-row {
    font-size: 13px;
    font-weight: 750;
}
.family-modal .bg-white, .modal, [role="dialog"] {
    font-size: 14.5px;
}
.family-modal h3, .modal h3, [role="dialog"] h3 {
    font-size: 20px;
    font-weight: 850;
}
table th {
    overflow-wrap: normal;
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
    text-align: right;
    white-space: nowrap;
}
table td {
    overflow-wrap: normal;
    background: transparent;
    color: var(--text-2);
    border-color: var(--border);
    font-size: 13px;
    padding: 8px 10px;
}
#tab-settings #newAcademicYear, #tab-settings #activeAcademicYear {
    width: 260px;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    display: block;
}
#tab-settings button[onclick="createAcademicYear()"], #tab-settings button[onclick="deleteSelectedAcademicYear()"] {
    width: 260px;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    justify-content: center;
}
#tab-settings #yearsList {
    width: 260px;
    max-width: 100%;
}
.staff-profile-box-v52 {
    margin-top: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.staff-profile-card-v52 {
    background: var(--surface);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(148,163,184,.22);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.staff-avatar-v52 {
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    color: #ffffff;
    font-weight: 900;
    flex: 0 0 auto;
    box-shadow: 0 10px 24px rgba(63,77,99,.18);
    width: 128px;
    height: 128px;
    font-size: 42px;
    border: 1px solid var(--border);
}
.staff-avatar-small-v52 {
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    color: #ffffff;
    font-weight: 900;
    flex: 0 0 auto;
    box-shadow: 0 10px 24px rgba(63,77,99,.18);
    width: 34px;
    height: 34px;
    font-size: 13px;
    border: 1px solid var(--border);
}
.staff-name-cell-v52 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.staff-profile-upload-v52 {
    cursor: pointer;
}
.platform-owner-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    display: none;
    overflow: auto;
    font-family: system-ui,sans-serif;
}
.platform-owner-shell {
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px;
}
.platform-owner-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.platform-owner-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}
.platform-owner-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 26px;
    border: 1px solid var(--border);
}
.platform-owner-title h1 {
    font-size: 24px;
    font-weight: 900;
    margin: 0;
}
.platform-owner-title p {
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0 0;
}
.platform-owner-grid {
    display: block;
    grid-template-columns: 1.4fr .9fr;
    gap: 16px;
}
.platform-card {
    background: var(--surface);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(148,163,184,.22);
    border-radius: var(--r-lg);
    padding: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    color: var(--text);
}
.platform-card h2 {
    font-size: 16px;
    margin: 0 0 12px;
    font-weight: 900;
}
.platform-owner-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    color: var(--text);
}
.platform-owner-table th {
    text-align: right;
    color: #94a3b8;
    font-weight: 700;
    padding: 0 10px;
}
.platform-owner-table td {
    background: #f6f8fb;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(148,163,184,.16);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(148,163,184,.16);
    padding: 10px;
}
.platform-owner-table td:first-child {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgba(148,163,184,.16);
    border-radius: 0 8px 8px 0;
}
.platform-owner-table td:last-child {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgba(148,163,184,.16);
    border-radius: 8px 0 0 8px;
}
.platform-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
    background: var(--primary-soft);
    color: var(--primary);
    border-width: 1px;
    border-style: solid;
    border-color: #bcd2fb;
}
.platform-status.active, .platform-status.archived {
    background: rgba(221,228,238,.14);
    color: #16233a;
}
.platform-status.off {
    background: rgba(221,228,238,.14);
    color: #c3cede;
}
.platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.platform-btn {
    border-color: 0;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
}
.platform-btn.primary, .platform-btn.green, .platform-btn.red, .platform-btn.amber {
    background: #f6f8fb;
    color: white;
}
.platform-btn.ghost {
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(148,163,184,.26);
}
.platform-form {
    display: grid;
    gap: 10px;
}
.platform-form label {
    font-size: 11px;
    color: #16233a;
    font-weight: 800;
}
.platform-form input, .platform-form textarea {
    width: 100%;
    background: #f6f8fb;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(148,163,184,.28);
    border-radius: 8px;
    color: white;
    padding: 10px;
    font-size: 13px;
}
.platform-logo-preview {
    width: 88px;
    height: 88px;
    border-radius: 8px;
    background: var(--surface-2);
    border-width: 1px;
    border-style: dashed;
    border-color: rgba(148,163,184,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #5e6c81;
    font-weight: 900;
    border: 1px solid var(--border);
}
.platform-logo-preview img, .school-welcome-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.platform-muted {
    color: var(--muted);
    font-size: 11px;
}
.school-welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: #f6f8fb;
    display: none;
    align-items: center;
    justify-content: center;
    direction: rtl;
    color: #16233a;
    font-family: system-ui,sans-serif;
}
.school-welcome-card {
    text-align: center;
    padding: 28px;
    width: min(520px,92vw);
    animation: schoolWelcomeIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.school-welcome-logo {
    width: 170px;
    height: 170px;
    margin: 0 auto 18px;
    border-radius: 28px;
    background: rgba(221,228,238,.84);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(221,228,238,.38);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 80px rgba(100,116,139,.22);
    overflow: hidden;
    font-size: 76px;
    font-weight: 900;
}
.school-welcome-card h1 {
    font-size: 30px;
    margin: 0 0 8px;
    font-weight: 900;
}
.school-welcome-card p {
    color: #16233a;
    margin: 0 0 22px;
    font-size: 14px;
}
.school-welcome-card button {
    background: #f6f8fb;
    color: #16233a;
    border-color: 0;
    border-radius: 8px;
    padding: 13px 28px;
    font-weight: 900;
    cursor: pointer;
    font-size: 15px;
}
.platform-owner-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.platform-school-form-panel {
    transition: max-height .25s ease,opacity .2s ease,margin .2s ease;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    color: var(--text);
}
.platform-school-form-panel.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}
.platform-form-horizontal {
    display: grid;
    grid-template-columns: 1.1fr .9fr .75fr 1fr 1fr .8fr;
    gap: 10px;
    align-items: end;
}
.platform-form-horizontal .wide {
    grid-column: span 2;
}
.platform-form-horizontal .logo-row {
    grid-column: span 2;
    display: flex;
    gap: 12px;
    align-items: center;
}
.platform-form-actions {
    grid-column: 1/-1;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.platform-schools-open-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--text);
}
#tab-definitions .definitions-nav-active {
    background: linear-gradient(135deg,#3f4d63,#3f4d63);
    color: #16233a;
    border-width: 2px;
    border-style: solid;
    border-color: #dde4ee;
    box-shadow: 0 0 0 3px rgba(100,116,139,.18),0 8px 20px rgba(63,77,99,.28);
    transform: translateY(-1px);
}
[class*="text-gray-"] {
    color: var(--text-2);
}
.text-gray-800, .text-gray-900, b, strong, .platform-owner-title, .staff-name-v67, .staff-name-v64 {
    color: var(--text);
}
.text-gray-7000, .text-gray-500, .text-gray-400, .staff-sub-v67, .staff-info-v67 {
    color: var(--muted);
}
.bg-gray-50 {
    background: var(--surface-2);
}
.bg-gray-100, ::-webkit-scrollbar-track {
    background: var(--surface-3);
}
.bg-gray-200 {
    background: #dde4ee;
}
[class*="border-gray-"] {
    border-color: var(--border);
}
aside[class*="bg-"] {
    background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
    color: var(--nav-text);
    border-color: transparent;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-nav);
}
aside span, aside [class*="text-gray-"] {
    color: var(--nav-text-soft);
}
aside h3, aside h4, aside b, aside strong, aside h2[class], aside h3[class], aside h4[class], aside .text-gray-800, aside .text-gray-900 {
    color: #f2f6fc;
}
aside #sidebarSchoolLogo {
    background: rgba(255, 255, 255, .09);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, .16);
    color: #ffffff;
}
#sidebarNav a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--r);
    background: transparent;
    color: var(--nav-text);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    transition: background .16s var(--ease), color .16s var(--ease),
                border-color .16s var(--ease);
}
#sidebarNav button:hover, #sidebarNav a:hover, #sidebarNav button:focus-visible {
    background: var(--nav-hover);
    color: #ffffff;
    outline: none;
}
#sidebarNav button.active, #sidebarNav a.active, #sidebarNav button[aria-current="page"], #sidebarNav a[aria-current="page"] {
    position: relative;
    background: rgba(59, 130, 246, .16);
    color: #ffffff;
    border-color: rgba(96, 165, 250, .34);
    font-weight: 800;
}
#sidebarNav button.active::before, #sidebarNav a.active::before, #sidebarNav button[aria-current="page"]::before, #sidebarNav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 3px;
    background: #60a5fa;
}
aside #notifBellBtn {
    background: rgba(255, 255, 255, .04);
    border-width: 1px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .18);
    color: var(--nav-text);
    border-radius: var(--r);
}
aside #notifBellBtn:hover {
    background: var(--nav-hover);
    color: #ffffff;
}
aside #notifBadge {
    background: var(--danger);
    color: #ffffff;
}
aside > div:last-child {
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid var(--nav-line);
}
aside > div:last-child .bg-white {
    background: linear-gradient(135deg, #2f6bd8, #1d4ed8);
    color: #ffffff;
}
aside > div:last-child h4 {
    color: #eef4ff;
}
aside > div:last-child button {
    background: transparent;
    color: #cbd9ee;
    border-color: transparent;
    box-shadow: none;
    min-height: 0;
    padding: 0;
    font-weight: 700;
}
aside > div:last-child button:hover {
    color: #ffffff;
    background: transparent;
}
.neon-border:hover, .account-card:hover, .family-card:hover, .salary-box:hover, .salary-ledger-card:hover, .comm-message:hover, .active-user-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
    transform: none;
}
input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 13px;
}
input:hover, select:hover, textarea:hover, .inp:hover {
    border-color: #a9b8cd;
}
input:focus, select:focus, textarea:focus, .inp:focus, .grade-input:focus, .name-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
    outline: none;
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-3);
    color: var(--muted);
    cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--primary);
    min-height: 0;
    width: 16px;
    height: 16px;
    padding: 0;
}
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-1);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease);
}
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    box-shadow: 0 1px 2px rgba(29, 78, 216, .28);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease);
}
button:hover, input[type="button"]:hover {
    background: var(--surface-2);
    border-width: 1px;
    border-style: solid;
    border-color: #a9b8cd;
    color: var(--text);
    box-shadow: var(--shadow-2);
    transform: none;
    filter: none;
}
input[type="submit"]:hover {
    background: var(--primary-600);
    border-width: 1px;
    border-style: solid;
    border-color: #a9b8cd;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .3);
    transform: none;
    filter: none;
    border: 1px solid var(--primary-600);
}
.mini-btn:active, button:active {
    background: var(--surface-3);
    box-shadow: none;
    transform: none;
}
button:focus-visible, .mini-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
button:disabled, .mini-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
button[type="submit"], .mini-btn.primary {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);
    box-shadow: 0 1px 2px rgba(29, 78, 216, .28);
}
button[type="submit"]:hover, .mini-btn.primary:hover {
    background: var(--primary-600);
    border: 1px solid var(--primary-600);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(29, 78, 216, .3);
}
.mini-btn.green {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-line);
}
.mini-btn.green:hover {
    background: var(--success);
    color: #ffffff;
    border: 1px solid var(--success);
}
.mini-btn.red {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-line);
}
.mini-btn.red:hover {
    background: var(--danger);
    color: #ffffff;
    border: 1px solid var(--danger);
}
.mini-btn.secondary {
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--border-strong);
}
.mini-btn.secondary:hover {
    background: var(--surface-3);
    color: var(--text);
}
td .mini-btn, td .btn-edit, td .btn-enable, td .btn-disable, td .btn-delete {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 11.5px;
    box-shadow: none;
}
thead th {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
    text-align: right;
    white-space: nowrap;
}
tbody td, tbody th {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border);
    font-size: 13px;
    padding: 8px 10px;
}
tbody tr:nth-child(even) td, #tab-staff tbody tr:nth-child(even) td {
    background: #fafbfd;
}
tbody tr:hover td, .log-row:hover td {
    background: var(--primary-soft);
    transform: none;
}
.critical-table tr:hover td {
    background: var(--danger-soft);
    transform: none;
}
tbody tr {
    transition: background-color .12s var(--ease);
}
.certificate-field-grid label:hover, .period-dropdown-options label:hover, .report-field-row:hover {
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
    transform: none;
}
.grade-excel-total {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: #bcd2fb;
}
.grade-excel-input.extra, .grade-extra {
    color: var(--warning);
    border-color: var(--warning-line);
}
.period-dropdown-bar.motion-period-picker summary span {
    color: #ffffff;
}
.v31-period-options label:hover, .v69-perm-matrix label:hover {
    background: var(--primary-soft);
    border-color: #bcd2fb;
    color: var(--primary);
}
.modal-card, .permission-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background: #b4c1d4;
    border-radius: 999px;
    border: 2px solid var(--surface-3);
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
aside::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-color: transparent;
}
.platform-btn:hover, .staff-permissions-save-v64:hover {
    background: var(--primary-600);
    border: 1px solid var(--primary-600);
}
.staff-permissions-dropdown-v64 summary:hover, .staff-perm-view-btn-v67:hover {
    background: var(--primary-soft);
    border-width: 1px;
    border-style: solid;
    border-color: #bcd2fb;
    color: var(--primary);
}
.staff-permissions-menu-v64 label:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
.staff-avatar-v67, .staff-table-avatar {
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    color: #ffffff;
    border: 1px solid var(--border);
}
#tab-staff tbody tr:hover td {
    background: var(--primary-soft);
}
.comm-seen-chip.seen {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-line);
}
.comm-seen-chip.unseen {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning-line);
}

/* ====================== الاستعلامات الشرطية ====================== */

@media print {
    *, body.printing-staff-ids *, body.printing-general * {
        visibility: hidden;
    }
    #printArea {
        visibility: visible;
        position: absolute;
        inset: 0;
        background: #ffffff;
        color: #373737;
        padding: 8mm;
        direction: rtl;
        display: block;
    }
    #printArea *, body.printing-staff-ids #printArea * {
        visibility: visible;
    }
    .print-login-cards-page {
        display: grid;
        grid-template-columns: repeat(2, 8.55cm);
        gap: 5mm;
        justify-content: center;
        align-content: start;
    }
    body.printing-login-cards #printArea {
        display: block;
        visibility: visible;
        position: absolute;
        inset: 0;
        background: #ffffff;
        color: #373737;
        padding: 6mm;
        direction: rtl;
        left: 0;
        top: 0;
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        box-sizing: border-box;
        overflow: visible;
    }
    body.printing-login-cards #printArea * {
        display: revert;
        visibility: visible;
    }
    body.printing-login-cards .print-login-cards-page {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5mm;
        justify-content: center;
        align-content: start;
        width: 100%;
        column-gap: 4mm;
        row-gap: 2mm;
        justify-items: stretch;
        align-items: start;
    }
    body.printing-login-cards .user-print-card {
        width: 100%;
        height: 4.8cm;
        box-sizing: border-box;
        break-inside: avoid;
        page-break-inside: avoid;
        min-height: 4.8cm;
        max-height: 4.8cm;
        padding: 5px 7px;
    }
    .user-print-card .school-name {
        font-size: 10px;
    }
    .user-print-card .student-name {
        font-size: 12px;
    }
    .user-print-card .meta {
        font-size: 9px;
    }
    .user-print-card .cred-line {
        font-size: 10px;
        padding: 3px 5px;
    }
    .user-print-card .note {
        font-size: 7px;
    }
    body.printing-login-cards #printArea .print-login-cards-page {
        width: 192mm;
        max-width: 192mm;
        min-height: 285mm;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 93mm 93mm;
        grid-auto-rows: 54mm;
        column-gap: 6mm;
        row-gap: 3mm;
        align-items: start;
        justify-items: start;
        align-content: start;
        justify-content: center;
    }
    body.printing-login-cards #printArea .user-print-card {
        width: 93mm;
        min-width: 93mm;
        max-width: 93mm;
        height: 54mm;
        min-height: 54mm;
        max-height: 54mm;
        margin: 0;
        padding: 4mm;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        break-inside: avoid;
        page-break-inside: avoid;
        border-width: 1px;
        border-style: dashed;
        border-color: #d0d0d0;
        border-radius: 3mm;
        background: #ffffff;
        color: #373737;
    }
    body.printing-login-cards #printArea .user-print-card:nth-child(10n) {
        break-after: page;
        page-break-after: always;
    }
    body.printing-login-cards #printArea .user-print-card .school-name {
        font-size: 9.5pt;
        line-height: 1.2;
        padding-bottom: 2mm;
        margin-bottom: 1mm;
    }
    body.printing-login-cards #printArea .user-print-card .student-name {
        font-size: 10.5pt;
        line-height: 1.25;
        margin: 1mm 0;
        white-space: normal;
    }
    body.printing-login-cards #printArea .user-print-card .meta {
        font-size: 8.2pt;
        line-height: 1.25;
    }
    body.printing-login-cards #printArea .user-print-card .cred-line {
        font-size: 9.5pt;
        line-height: 1.15;
        padding: 1.5mm 2mm;
        margin-top: 1mm;
    }
    body.printing-login-cards #printArea .user-print-card .note {
        font-size: 6.5pt;
        line-height: 1.1;
        margin-top: 1mm;
    }
    body.printing-staff-ids #printArea {
        visibility: visible;
        display: block;
        position: absolute;
        inset: 0;
        background: #ffffff;
        color: #373737;
        padding: 8mm;
        direction: rtl;
    }
    body.printing-staff-ids .staff-id-print-page {
        display: grid;
        grid-template-columns: repeat(2,8.6cm);
        gap: 5mm;
        justify-content: center;
        align-content: start;
    }
    body.printing-general #printArea {
        visibility: visible;
        display: block;
        position: absolute;
        inset: 0;
        width: auto;
        min-height: 100vh;
        background: #ffffff;
        color: #373737;
        padding: 18mm;
        direction: rtl;
        z-index: 999999;
    }
    body.printing-general #printArea * {
        visibility: visible;
        display: revert;
    }
    body.printing-general #printArea table {
        width: 100%;
        border-collapse: collapse;
        color: #373737;
        background: #ffffff;
    }
    body.printing-general #printArea th, body.printing-general #printArea td {
        border-width: 1px;
        border-style: solid;
        border-color: #d0d0d0;
        padding: 7px;
        color: #373737;
        background: #ffffff;
    }
    .receipt-card {
        background: transparent;
        box-shadow: none;
    }
    .receipt-cut-gap {
        height: 12mm;
        page-break-inside: avoid;
    }
    body.printing-receipt, body.printing-receipt * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.printing-receipt #printArea {
        width: 210mm;
        min-height: 297mm;
        padding: 7mm 8mm;
        margin: 0;
        box-sizing: border-box;
        background: #ffffff;
        overflow: hidden;
    }
    body.printing-receipt .receipt-a4-page-v84, body.printing-receipt .receipt-page-v84, body.printing-receipt .receipt-print-page, body.printing-receipt .receipt-copies-page {
        width: 194mm;
        max-width: 194mm;
        height: 283mm;
        min-height: 283mm;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8mm;
        box-sizing: border-box;
        overflow: hidden;
        background: #ffffff;
        page-break-after: auto;
        break-after: auto;
    }
    body.printing-receipt .receipt-copy-v84, body.printing-receipt .receipt-card-v84, body.printing-receipt .receipt-print-card, body.printing-receipt .receipt-box {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 137.5mm;
        min-height: 137.5mm;
        max-height: 137.5mm;
        padding: 6mm 7mm 5mm;
        box-sizing: border-box;
        overflow: hidden;
        border-width: 1.4px;
        border-style: solid;
        border-color: #d0d0d0;
        border-radius: 5mm;
        background: linear-gradient(135deg, rgba(248,248,248,.80), rgba(255,255,255,.58));
        box-shadow: inset 0 0 0 1.1mm rgba(174,174,174,.18);
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: auto;
        page-break-after: auto;
    }
    body.printing-receipt .receipt-copy-v84 + .receipt-copy-v84, body.printing-receipt .receipt-card-v84 + .receipt-card-v84, body.printing-receipt .receipt-print-card + .receipt-print-card, body.printing-receipt .receipt-box + .receipt-box {
        margin-top: 0;
    }
    body.printing-receipt .receipt-copy-v84::before, body.printing-receipt .receipt-card-v84::before, body.printing-receipt .receipt-print-card::before, body.printing-receipt .receipt-box::before {
        content: "";
        position: absolute;
        inset: 3.5mm;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(174,174,174,.60);
        border-radius: 4mm;
        pointer-events: none;
        z-index: 1;
    }
    body.printing-receipt .receipt-copy-v84::after, body.printing-receipt .receipt-card-v84::after, body.printing-receipt .receipt-print-card::after, body.printing-receipt .receipt-box::after {
        content: "✂  خط القص  ✂";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6.2mm;
        height: 1px;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: rgba(55,55,55,.55);
        text-align: center;
        color: rgba(55,55,55,.65);
        font: 700 8pt Arial;
        line-height: 0;
        z-index: 10;
    }
    body.printing-receipt .receipt-copy-v84:last-child::after, body.printing-receipt .receipt-card-v84:last-child::after, body.printing-receipt .receipt-print-card:last-child::after, body.printing-receipt .receipt-box:last-child::after {
        content: "";
        border-color: 0;
    }
    body.printing-receipt .receipt-watermark-v84, body.printing-receipt .watermark, body.printing-receipt .receipt-watermark {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%,-50%);
        width: 92mm;
        height: 92mm;
        max-width: 92mm;
        max-height: 92mm;
        opacity: .24;
        z-index: 0;
        object-fit: contain;
        pointer-events: none;
        filter: grayscale(8%) contrast(1.12);
    }
    body.printing-receipt .receipt-header-v84, body.printing-receipt .receipt-header, body.printing-receipt .print-header {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 24mm 1fr 30mm;
        align-items: center;
        gap: 4mm;
        margin: 0 0 4mm 0;
        padding: 2.5mm 4mm;
        border-radius: 3.5mm;
        background: linear-gradient(90deg, rgba(55,55,55,.96), rgba(76,76,76,.88), rgba(174,174,174,.66));
        color: #444444;
        min-height: 22mm;
        max-height: 22mm;
        box-sizing: border-box;
    }
    body.printing-receipt .receipt-header-v84 img, body.printing-receipt .receipt-header img, body.printing-receipt .print-header img {
        width: 16mm;
        height: 16mm;
        object-fit: contain;
        background: #ffffff;
        border-radius: 50%;
        padding: 1.2mm;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(174,174,174,.85);
    }
    body.printing-receipt .receipt-header-v84 h1, body.printing-receipt .receipt-header h1, body.printing-receipt .print-header h1, body.printing-receipt .school-name-v84 {
        color: #444444;
        font-size: 14pt;
        line-height: 1.2;
        margin: 0;
        font-weight: 900;
        letter-spacing: -.2px;
        text-align: center;
    }
    body.printing-receipt .receipt-header-v84 small, body.printing-receipt .receipt-header small, body.printing-receipt .print-header small, body.printing-receipt .receipt-subtitle-v84 {
        color: #444444;
        font-size: 7.5pt;
        line-height: 1.2;
        display: block;
        margin-top: 1mm;
        text-align: center;
        font-weight: 700;
    }
    body.printing-receipt .receipt-type-v84, body.printing-receipt .copy-label, body.printing-receipt .receipt-copy-label {
        justify-self: end;
        min-width: 24mm;
        text-align: center;
        color: #373737;
        background: #f7f7f7;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(174,174,174,.75);
        border-radius: 999px;
        padding: 1.5mm 2mm;
        font-weight: 900;
        font-size: 8pt;
    }
    body.printing-receipt .receipt-title-v84, body.printing-receipt .receipt-title, body.printing-receipt h2 {
        position: relative;
        z-index: 3;
        width: 46mm;
        margin: 1.5mm auto 3mm;
        padding: 1.8mm 4mm;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(174,174,174,.75);
        border-radius: 999px;
        text-align: center;
        color: #373737;
        background: rgba(247,247,247,.68);
        font-weight: 900;
        font-size: 13pt;
        line-height: 1.1;
    }
    body.printing-receipt .receipt-grid-v84, body.printing-receipt .receipt-details, body.printing-receipt .fields-grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.2mm 3mm;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    body.printing-receipt .rp-field, body.printing-receipt .receipt-field, body.printing-receipt .field-row, body.printing-receipt .field {
        position: relative;
        z-index: 3;
        box-sizing: border-box;
        min-height: 9.5mm;
        max-height: 11mm;
        padding: 1.2mm 2.2mm;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(55,55,55,.40);
        border-radius: 2.7mm;
        background: rgba(255,255,255,.30);
        box-shadow: none;
        overflow: hidden;
        color: #373737;
        font-size: 8.2pt;
        line-height: 1.2;
    }
    body.printing-receipt .rp-field b, body.printing-receipt .rp-field strong, body.printing-receipt .receipt-field b, body.printing-receipt .receipt-field strong, body.printing-receipt .field b, body.printing-receipt .field strong {
        color: #373737;
        font-size: 7.2pt;
        font-weight: 900;
    }
    body.printing-receipt .rp-field span, body.printing-receipt .receipt-field span, body.printing-receipt .field span {
        color: #373737;
        font-size: 8pt;
        font-weight: 800;
    }
    body.printing-receipt .money-grid-v84, body.printing-receipt .amount-grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.5mm;
        margin-top: 3mm;
    }
    body.printing-receipt .money-grid-v84 div, body.printing-receipt .amount-grid div, body.printing-receipt .amount-box {
        min-height: 10mm;
        padding: 1.5mm 2.2mm;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(174,174,174,.65);
        border-radius: 2.6mm;
        background: rgba(247,247,247,.38);
        color: #373737;
        box-shadow: none;
        font-size: 8.2pt;
        font-weight: 900;
        box-sizing: border-box;
    }
    body.printing-receipt .notes-v84, body.printing-receipt .receipt-notes, body.printing-receipt .notes {
        position: relative;
        z-index: 3;
        min-height: 9mm;
        max-height: 11mm;
        margin-top: 2.5mm;
        padding: 1.4mm 2.2mm;
        border-width: 1px;
        border-style: dashed;
        border-color: rgba(55,55,55,.48);
        border-radius: 2.6mm;
        background: rgba(255,255,255,.22);
        color: #373737;
        font-size: 7.6pt;
        box-sizing: border-box;
    }
    body.printing-receipt .receipt-footer-v84, body.printing-receipt .receipt-footer, body.printing-receipt .signature-row {
        position: relative;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 8mm;
        margin-top: 3mm;
        color: #373737;
        font-weight: 900;
        font-size: 8pt;
    }
    body.printing-receipt .receipt-footer-v84 > *, body.printing-receipt .receipt-footer > *, body.printing-receipt .signature-row > * {
        min-width: 38mm;
        padding-top: 3mm;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(55,55,55,.45);
        text-align: center;
    }
    body.printing-receipt #printArea * {
        page-break-before: auto;
        page-break-after: auto;
    }
    body, main {
        background: #ffffff;
        color: #000000;
    }
    aside {
        display: none;
    }
    table th {
        background: #eeeeee;
        color: #000000;
        border-color: #999999;
    }
    table td {
        border-color: #999999;
        color: #000000;
    }
    tbody tr:nth-child(even) td {
        background: transparent;
    }
    .neon-border, .account-card {
        box-shadow: none;
        border-color: #999999;
    }
    @page {
        size: A4 portrait;
        margin: 8mm;
    }
    @page {size:A4 portrait;margin:0;}
    @page {
        size: A4 portrait;
        margin: 6mm;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tab-content.active {
        animation: uiPageEnterSafe .32s var(--ui-motion) both;
    }
    .neon-border, .account-card, .family-card, .salary-box, .salary-ledger-card, .comm-message, .active-user-card, .report-field-row, .certificate-field-grid label {
        transition: transform .22s var(--ui-motion), box-shadow .22s var(--ui-motion), border-color .22s var(--ui-motion), background-color .22s var(--ui-motion);
    }
    .neon-border:hover, .account-card:hover, .family-card:hover, .salary-box:hover, .salary-ledger-card:hover, .comm-message:hover, .active-user-card:hover {
        transform: none;
        box-shadow: 0 16px 34px rgba(22,35,58,.18), 0 0 18px rgba(148,163,184,.10);
    }
    nav button, .mini-btn, .btn-edit, .btn-enable, .btn-disable, .btn-delete {
        transition: transform .18s var(--ui-motion), box-shadow .18s var(--ui-motion), filter .18s ease;
    }
    nav button:hover, .mini-btn:hover, .btn-edit:hover, .btn-enable:hover, .btn-disable:hover, .btn-delete:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }
    input, select, textarea, .inp, .grade-input, .grade-excel-input {
        transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    table tbody tr {
        transition: background-color .18s ease, transform .18s ease;
    }
    table tbody tr:hover, .report-field-row:hover, .period-dropdown-options label:hover {
        transform: none;
    }
    .vbar-item {
        animation: chartCardSafeIn .42s var(--ui-motion) both;
    }
    .vbar-item:nth-child(2) {
        animation-delay: .04s;
    }
    .vbar-item:nth-child(3) {
        animation-delay: .08s;
    }
    .vbar-item:nth-child(4) {
        animation-delay: .12s;
    }
    .vbar-item:nth-child(5) {
        animation-delay: .16s;
    }
    .vbar-item:nth-child(6) {
        animation-delay: .20s;
    }
    .vbar-fill {
        animation: barGlowSafe 2.8s ease-in-out infinite;
    }
    .vbar-item:hover {
        transform: translateY(-3px);
        border-color: var(--chart-border);
        box-shadow: 0 14px 26px rgba(22,35,58,.16);
    }
    @keyframes uiPageEnterSafe {
        from{opacity:0; transform:translateY(8px)}
        to{opacity:1; transform:translateY(0)}
    }
    @keyframes chartCardSafeIn {
        from{opacity:0; transform:translateY(10px)}
        to{opacity:1; transform:translateY(0)}
    }
    @keyframes barGlowSafe {
        0%,100%{ filter: brightness(1)}
        50%{ filter: brightness(1.16)}
    }
}

@media (max-width: 900px) {
    #tab-staff table {
        table-layout: auto;
        min-width: 780px;
    }
    #tab-staff .overflow-x-auto {
        overflow-x: auto;
    }
    h1, .text-2xl {
        font-size: 22px;
    }
    h2, .text-xl {
        font-size: 19px;
    }
    h3, .text-lg, .text-base {
        font-size: 17px;
    }
    aside nav button, #sidebarNav button, input, select, textarea, .inp {
        font-size: 13.5px;
    }
}

@media(max-width: 900px) {
    .users-filter-panel {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen {
    #printArea, #printArea * {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }
}

@media(max-width:860px) {
    .platform-owner-grid {
        grid-template-columns: 1fr;
    }
    .platform-owner-top {
        align-items: flex-start;
        flex-direction: column;
    }
    .platform-actions {
        min-width: 210px;
    }
    .platform-owner-table {
        font-size: 11px;
    }
    .platform-owner-table td, .platform-owner-table th {
        padding: 8px 6px;
    }
    .school-welcome-logo {
        width: 136px;
        height: 136px;
    }
    .school-welcome-card h1 {
        font-size: 24px;
    }
}

@media(max-width:1100px) {
    .platform-form-horizontal {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .platform-form-horizontal .wide, .platform-form-horizontal .logo-row {
        grid-column: span 2;
    }
}

@media(max-width:640px) {
    .platform-form-horizontal {
        grid-template-columns: 1fr;
    }
    .platform-form-horizontal .wide, .platform-form-horizontal .logo-row {
        grid-column: span 1;
    }
    .platform-school-form-panel.collapsed {
        display: none;
    }
}

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





/* =====================================================================
   سطح المستودع — محصور تحت html.page-warehouse
   ===================================================================== */

/* هذان السطحان لم يكونا يحمّلان تهيئة أساسية قبل التوحيد، فتُستعاد
   هوامش عناصر النص الافتراضية حتى لا تتغيّر مسافاتهما */
html.page-warehouse h1 { margin: 0.67em 0; }
html.page-warehouse h2 { margin: 0.83em 0; }
html.page-warehouse h3 { margin: 1em 0; }
html.page-warehouse p  { margin: 1em 0; }

html.page-warehouse {
    color-scheme: light;

    --bg:            #eef2f7;
    --panel:         #ffffff;
    --panel2:        #f6f8fb;
    --panel3:        #e9eef6;
    --line:          #dde4ee;
    --line-strong:   #c3cede;

    --text:          #16233a;
    --text2:         #3f4d63;
    --muted:         #64748b;

    --primary:       #1d4ed8;
    --primary2:      #1a3fae;
    --primary-soft:  #e9f0ff;
    --primary-line:  #bcd2fb;
    --primary-ring:  rgba(29, 78, 216, .18);

    --nav-bg-top:    #14294d;
    --nav-bg-bottom: #0d1b33;
    --nav-text:      #b9c7dd;
    --nav-hover:     rgba(255, 255, 255, .07);

    --success:       #0f7a53;
    --success-soft:  #e4f6ee;
    --success-line:  #a7ddc6;

    --danger:        #c62f2f;
    --danger-soft:   #fdeaea;
    --danger-line:   #f2b5b5;

    --warning:       #955d0d;
    --warning-soft:  #fdf3e2;
    --warning-line:  #eccf9b;

    --info:          #0e7490;
    --info-soft:     #e4f5fa;
    --info-line:     #a6d9e6;

    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --shadow-1: 0 1px 2px rgba(16, 35, 65, .06), 0 1px 3px rgba(16, 35, 65, .05);
    --shadow-2: 0 4px 12px rgba(16, 35, 65, .07), 0 2px 4px rgba(16, 35, 65, .04);
    --shadow-3: 0 12px 28px rgba(16, 35, 65, .12), 0 4px 8px rgba(16, 35, 65, .05);
    --shadow: var(--shadow-1);

    --ease: cubic-bezier(.2, .8, .3, 1);
}
html.page-warehouse * { box-sizing: border-box }
html.page-warehouse, html.page-warehouse body {
    margin: 0;
    min-height: 100%;
    font-family: Tajawal, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
html.page-warehouse button, html.page-warehouse input, html.page-warehouse select, html.page-warehouse textarea { font: inherit }
html.page-warehouse button { cursor: pointer }
html.page-warehouse .hidden { display: none !important }
html.page-warehouse .muted { color: var(--muted) }
html.page-warehouse .app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}
html.page-warehouse .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg, var(--nav-bg-top), var(--nav-bg-bottom));
    border-left: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 18px 45px rgba(10, 22, 42, .35);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    z-index: 20;
}
html.page-warehouse .brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px }
html.page-warehouse .brand-mark {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    display: grid; place-items: center;
    font-size: 25px;
    box-shadow: 0 8px 20px rgba(29, 78, 216, .4);
}
html.page-warehouse .brand strong { display: block; font-size: 19px; color: #f2f6fc }
html.page-warehouse .brand span { display: block; color: var(--nav-text); font-size: 12px }
html.page-warehouse .school-chip {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r);
    padding: 12px;
    margin-bottom: 16px;
}
html.page-warehouse .school-chip span, html.page-warehouse .school-chip small { display: block; color: var(--nav-text); font-size: 10px }
html.page-warehouse .school-chip b { display: block; margin: 4px 0; font-size: 13px; color: #f2f6fc }
html.page-warehouse .main-nav {
    display: flex; flex-direction: column; gap: 4px;
    overflow: auto; padding-left: 2px;
}
html.page-warehouse .main-nav button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--nav-text);
    text-align: right;
    padding: 9px 11px;
    border-radius: var(--r);
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: 13px;
    transition: background .16s var(--ease), color .16s var(--ease),
                border-color .16s var(--ease);
}
html.page-warehouse .main-nav button span { width: 22px; text-align: center; color: #8ba0bf }
html.page-warehouse .main-nav button:hover { background: var(--nav-hover); color: #ffffff }
html.page-warehouse .main-nav button:hover span { color: #cbd9ee }
html.page-warehouse .main-nav button.active {
    position: relative;
    background: rgba(59, 130, 246, .16);
    border-color: rgba(96, 165, 250, .34);
    color: #ffffff;
    font-weight: 800;
    box-shadow: none;
}
html.page-warehouse .main-nav button.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px;
    background: #60a5fa;
}
html.page-warehouse .main-nav button.active span { color: #93c5fd }
html.page-warehouse .badge {
    margin-right: auto;
    background: var(--primary);
    color: #ffffff;
    border-radius: 20px;
    padding: 1px 7px;
    font-style: normal; font-size: 10px; font-weight: 800;
}
html.page-warehouse .sidebar-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 14px;
    display: grid; gap: 7px;
}
html.page-warehouse .back-link, html.page-warehouse .logout-btn {
    display: block; text-align: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-sm);
    padding: 9px;
    color: var(--nav-text);
    text-decoration: none;
    background: rgba(255, 255, 255, .04);
    transition: background .15s var(--ease), color .15s var(--ease);
}
html.page-warehouse .back-link:hover { background: var(--nav-hover); color: #ffffff }
html.page-warehouse .logout-btn { width: 100%; color: #fca5a5 }
html.page-warehouse .logout-btn:hover { background: rgba(198, 47, 47, .22); border-color: rgba(248, 113, 113, .4); color: #fecaca }
html.page-warehouse .main-content { min-width: 0; padding: 26px 28px 50px }
html.page-warehouse .topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-bottom: 22px;
}
html.page-warehouse .topbar h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--text) }
html.page-warehouse .topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px }
html.page-warehouse .topbar-actions { display: flex; align-items: center; gap: 12px }
html.page-warehouse .user-box {
    display: flex; align-items: center; gap: 9px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
    padding: 7px 10px;
}
html.page-warehouse .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #2f6bd8, var(--primary));
    color: #ffffff; font-weight: 900;
}
html.page-warehouse .user-box b, html.page-warehouse .user-box span { display: block; font-size: 11px }
html.page-warehouse .user-box b { color: var(--text) }
html.page-warehouse .user-box span { color: var(--muted); margin-top: 2px }
html.page-warehouse .view { display: none }
html.page-warehouse .view.active { display: block; animation: fade .18s ease }
@keyframes fade { from { opacity: .45; transform: translateY(4px) } to { opacity: 1; transform: none } }
html.page-warehouse .panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 17px;
}
html.page-warehouse .panel-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; margin-bottom: 14px;
}
html.page-warehouse .panel-head h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--text) }
html.page-warehouse .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px }
html.page-warehouse .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px; margin-bottom: 14px;
}
html.page-warehouse .stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 16px;
    position: relative; overflow: hidden;
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
html.page-warehouse .stat-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong) }
html.page-warehouse .stat-card:before {
    content: ""; position: absolute; inset-inline: 0; top: 0;
    height: 3px; background: linear-gradient(90deg, var(--primary), #4f86e8);
}
html.page-warehouse .stat-card:after {
    content: ""; position: absolute;
    width: 70px; height: 70px; border-radius: 50%;
    background: var(--primary-soft);
    left: -18px; bottom: -24px;
}
html.page-warehouse .stat-card span { display: block; color: var(--muted); font-size: 12px; position: relative; z-index: 1 }
html.page-warehouse .stat-card b { display: block; font-size: 25px; margin-top: 7px; color: var(--text); position: relative; z-index: 1 }
html.page-warehouse .stat-card small { color: var(--muted); position: relative; z-index: 1 }
html.page-warehouse .dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px }
html.page-warehouse .span-2 { grid-column: span 2 }
html.page-warehouse .span-3 { grid-column: span 3 }
html.page-warehouse .dashboard-grid .span-2 { grid-column: auto }
html.page-warehouse .table-wrap { overflow: auto; border-radius: var(--r-sm) }
html.page-warehouse table { width: 100%; border-collapse: collapse; min-width: 720px }
html.page-warehouse th, html.page-warehouse td {
    padding: 9px;
    border-bottom: 1px solid var(--line);
    font-size: 12px; text-align: right; vertical-align: middle;
}
html.page-warehouse th {
    color: var(--text);
    background: var(--panel3);
    font-weight: 800;
    position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
}
html.page-warehouse td { color: var(--text2) }
html.page-warehouse tbody tr:nth-child(even) td { background: #fafbfd }
html.page-warehouse tbody tr:hover td { background: var(--primary-soft) }
html.page-warehouse tbody tr { transition: background-color .12s var(--ease) }
html.page-warehouse .qty-low { color: var(--danger); font-weight: 900 }
html.page-warehouse .qty-ok { color: var(--success); font-weight: 800 }
html.page-warehouse .status {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 20px;
    font-weight: 800; font-size: 10px;
    border: 1px solid transparent;
}
html.page-warehouse .status.ok { background: var(--success-soft); color: var(--success); border-color: var(--success-line) }
html.page-warehouse .status.warn { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line) }
html.page-warehouse .status.bad { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line) }
html.page-warehouse .status.info { background: var(--info-soft);    color: var(--info);    border-color: var(--info-line) }
html.page-warehouse .btn {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    min-height: 34px;
    font-weight: 700; font-size: 12.5px;
    color: var(--text2);
    background: var(--panel);
    box-shadow: var(--shadow-1);
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), color .15s var(--ease);
}
html.page-warehouse .btn:hover { background: var(--panel2); border-color: #a9b8cd; color: var(--text); box-shadow: var(--shadow-2) }
html.page-warehouse .btn:active { background: var(--panel3); box-shadow: none }
html.page-warehouse .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
html.page-warehouse .btn.small { padding: 5px 10px; min-height: 28px; font-size: 11px; box-shadow: none }
html.page-warehouse .btn.primary { background: var(--primary); border-color: var(--primary); color: #ffffff; box-shadow: 0 1px 2px rgba(29,78,216,.28) }
html.page-warehouse .btn.primary:hover { background: var(--primary2); border-color: var(--primary2); color: #ffffff; box-shadow: 0 4px 12px rgba(29,78,216,.3) }
html.page-warehouse .btn.success { background: var(--success-soft); color: var(--success); border-color: var(--success-line) }
html.page-warehouse .btn.success:hover { background: var(--success); color: #ffffff; border-color: var(--success) }
html.page-warehouse .btn.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line) }
html.page-warehouse .btn.danger:hover { background: var(--danger); color: #ffffff; border-color: var(--danger) }
html.page-warehouse .btn.warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line) }
html.page-warehouse .btn.warning:hover { background: var(--warning); color: #ffffff; border-color: var(--warning) }
html.page-warehouse .btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--text2) }
html.page-warehouse .btn.ghost:hover { background: var(--panel2) }
html.page-warehouse .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none }
html.page-warehouse .text-btn { border: 0; background: none; color: var(--primary); padding: 0; font-weight: 700 }
html.page-warehouse .text-btn:hover { color: var(--primary2); text-decoration: underline }
html.page-warehouse .icon-btn {
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--text2);
    border-radius: var(--r-sm);
    padding: 5px 8px; font-size: 11px;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
html.page-warehouse .icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line) }
html.page-warehouse .toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap }
html.page-warehouse .toolbar-spacer { flex: 1 }
html.page-warehouse .search-box { min-width: 260px; flex: 1 }
html.page-warehouse .toolbar input, html.page-warehouse .toolbar select, html.page-warehouse .full-search {
    width: 100%;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    min-height: 36px;
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
html.page-warehouse .toolbar select { width: auto; min-width: 150px }
html.page-warehouse .toolbar input::placeholder, html.page-warehouse .full-search::placeholder { color: #94a3b8 }
html.page-warehouse .toolbar input:hover, html.page-warehouse .toolbar select:hover, html.page-warehouse .full-search:hover { border-color: #a9b8cd }
html.page-warehouse .toolbar input:focus, html.page-warehouse .toolbar select:focus, html.page-warehouse .full-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
html.page-warehouse .toggle { display: flex; align-items: center; gap: 6px; color: var(--text2); font-size: 12px }
html.page-warehouse .toggle input { accent-color: var(--primary) }
html.page-warehouse .action-group { display: flex; gap: 5px; flex-wrap: wrap }
html.page-warehouse .document-number {
    direction: ltr;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: 11px; font-weight: 700;
}
html.page-warehouse .split-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .7fr); gap: 14px }
html.page-warehouse .form-grid { display: grid; gap: 11px }
html.page-warehouse .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
html.page-warehouse .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
html.page-warehouse .form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
html.page-warehouse .form-grid label { font-size: 12px; color: var(--text2); font-weight: 700 }
html.page-warehouse .form-grid input, html.page-warehouse .form-grid select, html.page-warehouse .form-grid textarea {
    display: block; width: 100%; margin-top: 5px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 11px; min-height: 36px;
    outline: none;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
html.page-warehouse .form-grid input::placeholder, html.page-warehouse .form-grid textarea::placeholder { color: #94a3b8 }
html.page-warehouse .form-grid input:hover, html.page-warehouse .form-grid select:hover, html.page-warehouse .form-grid textarea:hover { border-color: #a9b8cd }
html.page-warehouse .form-grid input:focus, html.page-warehouse .form-grid select:focus, html.page-warehouse .form-grid textarea:focus, html.page-warehouse .barcode-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
html.page-warehouse .form-grid input:disabled, html.page-warehouse .form-grid select:disabled {
    background: var(--panel3); color: var(--muted); cursor: not-allowed;
}
html.page-warehouse .file-label input { padding: 6px }
html.page-warehouse .file-label span { display: block; color: var(--muted); margin-top: 4px; font-weight: 400 }
html.page-warehouse .line-builder { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px }
html.page-warehouse .line-builder h3 { font-size: 14px; margin: 0 0 8px; color: var(--text) }
html.page-warehouse .scan-row { display: flex; gap: 7px; margin-bottom: 10px }
html.page-warehouse .barcode-input {
    flex: 1;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 9px; min-height: 36px;
    direction: ltr; text-align: left;
    font-family: ui-monospace, monospace;
    outline: none;
}
html.page-warehouse .lines-table { min-height: 70px }
html.page-warehouse .empty-state {
    padding: 25px; text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--panel2);
    font-size: 12px;
}
html.page-warehouse .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px }
html.page-warehouse .form-actions.inline { align-items: end; margin: 0 }
html.page-warehouse .compact-form { align-items: end }
html.page-warehouse .history-panel { max-height: calc(100vh - 140px); overflow: auto }
html.page-warehouse .mt { margin-top: 14px }
html.page-warehouse .store-list { display: grid; gap: 8px }
html.page-warehouse .store-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 11px;
    background: var(--panel2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
html.page-warehouse .store-row small { color: var(--muted) }
html.page-warehouse .notification-list { display: grid; gap: 7px; max-height: 280px; overflow: auto }
html.page-warehouse .notification {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px;
    background: var(--panel2);
}
html.page-warehouse .notification.unread {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    border-inline-start: 3px solid var(--primary);
}
html.page-warehouse .notification p { margin: 0; font-size: 12px; color: var(--text2) }
html.page-warehouse .notification small { color: var(--muted) }
html.page-warehouse .count-area { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px }
html.page-warehouse .count-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 10px }
html.page-warehouse .count-actions span { margin-left: auto; color: var(--muted) }
html.page-warehouse .report-controls { position: sticky; top: 10px; z-index: 5 }
html.page-warehouse .report-title { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 10px }
html.page-warehouse .report-title h2 { margin: 0; color: var(--text) }
html.page-warehouse .report-title p { margin: 5px 0 0; color: var(--muted) }
html.page-warehouse .report-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px }
html.page-warehouse .summary-pill {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--panel2);
    color: var(--text2);
    font-size: 12px; font-weight: 700;
}
html.page-warehouse .modal {
    position: fixed; inset: 0;
    background: rgba(13, 27, 51, .55);
    z-index: 1000;
    display: grid; place-items: center;
    padding: 18px;
    backdrop-filter: blur(4px);
}
html.page-warehouse .modal-card {
    width: min(720px, 96vw); max-height: 94vh; overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow-3);
}
html.page-warehouse .modal-card.large { width: min(960px, 97vw) }
html.page-warehouse .modal-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 14px }
html.page-warehouse .modal-head h2 { margin: 0; color: var(--text) }
html.page-warehouse .modal-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px }
html.page-warehouse .modal-close {
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--text2);
    font-size: 20px; line-height: 1;
    transition: background .15s var(--ease), color .15s var(--ease);
}
html.page-warehouse .modal-close:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line) }
html.page-warehouse .picker-list { display: grid; gap: 7px; margin-top: 10px; max-height: 55vh; overflow: auto }
html.page-warehouse .picker-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border: 1px solid var(--line);
    background: var(--panel2);
    padding: 10px;
    border-radius: var(--r-sm);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
html.page-warehouse .picker-item:hover { background: var(--primary-soft); border-color: var(--primary-line) }
html.page-warehouse .picker-item p { margin: 0; color: var(--text) }
html.page-warehouse .picker-item small { color: var(--muted) }
html.page-warehouse #barcodeVideo { width: 100%; max-height: 55vh; background: #0d1b33; border-radius: var(--r) }
html.page-warehouse .camera-status { text-align: center; color: var(--muted) }
html.page-warehouse .toast-container { position: fixed; left: 18px; bottom: 18px; z-index: 2000; display: grid; gap: 8px }
html.page-warehouse .toast {
    min-width: 260px; max-width: 400px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--muted);
    background: var(--panel);
    box-shadow: var(--shadow-3);
    color: var(--text);
    font-size: 12px; font-weight: 600;
}
html.page-warehouse .toast.ok { border-inline-start-color: var(--success); background: var(--success-soft); color: var(--success) }
html.page-warehouse .toast.err { border-inline-start-color: var(--danger);  background: var(--danger-soft);  color: var(--danger) }
html.page-warehouse .toast.warn { border-inline-start-color: var(--warning); background: var(--warning-soft); color: var(--warning) }
html.page-warehouse .permission-denied { min-height: 100vh; display: grid; place-items: center; padding: 25px }
html.page-warehouse .permission-card {
    text-align: center; max-width: 500px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 35px;
    box-shadow: var(--shadow-3);
}
html.page-warehouse .permission-icon { font-size: 44px }
html.page-warehouse .permission-card h1 { font-size: 22px; color: var(--text) }
html.page-warehouse .permission-card p { color: var(--muted) }
html.page-warehouse .barcode-print-area { display: none }
html.page-warehouse .item-image {
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--panel3);
    border: 1px solid var(--line);
}
html.page-warehouse .stock-chips { display: flex; gap: 4px; flex-wrap: wrap }
html.page-warehouse .stock-chip {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 3px 6px; font-size: 9px;
    background: var(--panel2);
    color: var(--text2);
}
html.page-warehouse .approval-card { display: grid; gap: 4px }
html.page-warehouse .approval-card code { direction: ltr; color: var(--primary); font-weight: 700 }
html.page-warehouse .asset-number { direction: ltr; font-family: ui-monospace, monospace; color: var(--primary); font-weight: 800 }
html.page-warehouse ::-webkit-scrollbar { width: 10px; height: 10px }
html.page-warehouse ::-webkit-scrollbar-track { background: var(--panel3) }
html.page-warehouse ::-webkit-scrollbar-thumb { background: #b4c1d4; border-radius: 999px; border: 2px solid var(--panel3) }
html.page-warehouse ::-webkit-scrollbar-thumb:hover { background: #94a3b8 }
html.page-warehouse .sidebar ::-webkit-scrollbar-track { background: transparent }
html.page-warehouse .sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-color: transparent }
@media (max-width: 1150px) {
    html.page-warehouse .stats-grid { grid-template-columns: repeat(2, 1fr) }
    html.page-warehouse .split-layout { grid-template-columns: 1fr }
    html.page-warehouse .history-panel { max-height: none }
    html.page-warehouse .dashboard-grid { grid-template-columns: 1fr }
    html.page-warehouse .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 820px) {
    html.page-warehouse .app-shell { grid-template-columns: 1fr }
    html.page-warehouse .sidebar { position: relative; height: auto; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.09) }
    html.page-warehouse .main-nav { display: grid; grid-template-columns: repeat(2, 1fr); max-height: none }
    html.page-warehouse .sidebar-footer { grid-template-columns: 1fr 1fr }
    html.page-warehouse .main-content { padding: 18px 12px 40px }
    html.page-warehouse .topbar { align-items: flex-start }
    html.page-warehouse .topbar-actions { flex-direction: column; align-items: flex-end }
    html.page-warehouse .form-grid.cols-2, html.page-warehouse .form-grid.cols-3, html.page-warehouse .form-grid.cols-4 { grid-template-columns: 1fr }
    html.page-warehouse .span-2, html.page-warehouse .span-3 { grid-column: auto }
    html.page-warehouse .scan-row { flex-wrap: wrap }
    html.page-warehouse .scan-row .barcode-input { flex-basis: 100% }
    html.page-warehouse .stats-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
    html.page-warehouse .stats-grid { grid-template-columns: 1fr }
    html.page-warehouse .main-nav { grid-template-columns: 1fr }
    html.page-warehouse .topbar { display: block }
    html.page-warehouse .topbar-actions { margin-top: 10px; align-items: stretch }
    html.page-warehouse .user-box { width: 100% }
    html.page-warehouse .toolbar > * { width: 100% !important }
    html.page-warehouse .toolbar-spacer { display: none }
}
@media (prefers-reduced-motion: reduce) {
    html.page-warehouse *, html.page-warehouse *::before, html.page-warehouse *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
@media print {
    html.page-warehouse body { background: #ffffff; color: #000000 }
    html.page-warehouse .sidebar, html.page-warehouse .topbar, html.page-warehouse .report-controls, html.page-warehouse .toast-container, html.page-warehouse .modal, html.page-warehouse .permission-denied { display: none !important }
    html.page-warehouse .main-content { padding: 0 }
    html.page-warehouse .view { display: none !important }
    html.page-warehouse #view-reports.active { display: block !important }
    html.page-warehouse #view-reports > .panel.mt { border: 0; box-shadow: none; padding: 0 }
    html.page-warehouse .table-wrap { overflow: visible }
    html.page-warehouse table { min-width: 0 }
    html.page-warehouse th, html.page-warehouse td { color: #000000; border-color: #999999; font-size: 9px; background: transparent !important }
    html.page-warehouse tbody tr:nth-child(even) td { background: transparent !important }
    html.page-warehouse .report-title p, html.page-warehouse .muted { color: #333333 }
    html.page-warehouse .app-shell { display: block }
    html.page-warehouse .barcode-print-mode .app-shell, html.page-warehouse .barcode-print-mode .permission-denied { display: none !important }
    html.page-warehouse .barcode-print-mode .barcode-print-area { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; width: 100% }
    html.page-warehouse .barcode-label {
        height: 10mm; border: .2mm dashed #999999;
        display: flex; align-items: center; justify-content: center;
        gap: 3mm; padding: 0 2mm; overflow: hidden; break-inside: avoid;
    }
    html.page-warehouse .barcode-label svg { width: 70%; height: 8mm }
    html.page-warehouse .barcode-label .label-id { direction: ltr; font: 700 9pt monospace; white-space: nowrap }
    @page { size: A4 portrait; margin: 5mm }
}


/* =====================================================================
   سطح تسجيل الدخول — محصور تحت html.page-login
   ===================================================================== */

/* يمنع تسرّب ألوان نصوص الواجهة الفاتحة إلى بطاقة الدخول الداكنة */
html.page-login h1, html.page-login h2, html.page-login h3, html.page-login h4,
html.page-login h5, html.page-login h6, html.page-login p, html.page-login span,
html.page-login div, html.page-login small, html.page-login label,
html.page-login b, html.page-login strong, html.page-login a {
    color: inherit;
}

html.page-login *, html.page-login *::before, html.page-login *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.page-login {
      --void:     #0a1526;
      --surface:  #0d1b33;
      --panel:    #14294d;
      --violet:   #1d4ed8;
      --violet-l: #60a5fa;
      --cyan:     #22d3ee;
      --amber:    #fbbf24;
      --white:    #eef4fc;
      --muted:    #8ba0bf;
      --border:   rgba(96,165,250,0.22);
      --glow-v:   rgba(29,78,216,0.5);
      --glow-c:   rgba(34,211,238,0.4);
    }
html.page-login, html.page-login body {
      height: 100%;
      background: var(--void);
      font-family: 'Tajawal', sans-serif;
      color: var(--white);
      overflow-x: hidden;
      overflow-y: auto;
    }
html.page-login #universe {
      position: fixed; inset: 0; z-index: 0;
    }
html.page-login .stage {
      position: relative; z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      gap: 20px;
      padding: 24px;
    }
html.page-login .brand-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }
html.page-login .brand-panel::before { display: none; }
html.page-login .orbit-wrap { display: none; }
html.page-login .orbit-ring {
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(96,165,250,0.15);
      animation: spinRing linear infinite;
    }
html.page-login .orbit-ring:nth-child(1) { animation-duration: 28s; }
html.page-login .orbit-ring:nth-child(2) {
      inset: 12%;
      border-color: rgba(34,211,238,0.12);
      animation-duration: 20s;
      animation-direction: reverse;
    }
html.page-login .orbit-ring:nth-child(3) {
      inset: 24%;
      border-color: rgba(167,139,250,0.10);
      animation-duration: 35s;
    }
html.page-login .orbit-dot {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 50%;
      top: -4px; left: calc(50% - 4px);
      filter: blur(1px);
    }
html.page-login .orbit-ring:nth-child(1) .orbit-dot { background: var(--violet-l); box-shadow: 0 0 12px var(--violet-l); }
html.page-login .orbit-ring:nth-child(2) .orbit-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); top: auto; bottom: -4px; }
html.page-login .orbit-ring:nth-child(3) .orbit-dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); left: -4px; top: calc(50% - 4px); }
html.page-login .emblem {
      position: relative; z-index: 2;
      width: 60px; height: 60px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(29,78,216,0.35), rgba(34,211,238,0.22));
      border: 1px solid rgba(96,165,250,0.45);
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
      box-shadow: 0 0 40px rgba(29,78,216,0.35), 0 0 80px rgba(34,211,238,0.15);
      opacity: 0;
      animation: emblemIn 0.8s 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
      flex-shrink: 0;
    }
html.page-login .brand-name {
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 900;
      letter-spacing: -1px;
      line-height: 1.15;
      opacity: 0;
      animation: slideRight 0.9s 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    }
html.page-login .brand-name span {
      background: linear-gradient(120deg, #60a5fa, #22d3ee 55%, #a78bfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
html.page-login .brand-sub {
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 400;
      color: var(--muted);
      margin-top: 8px;
      letter-spacing: 0.5px;
      opacity: 0;
      animation: slideRight 0.9s 1s cubic-bezier(0.16,1,0.3,1) forwards;
    }
html.page-login .brand-badges {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
      opacity: 0;
      animation: slideRight 0.9s 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
    }
html.page-login .badge {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 10.5px;
      font-weight: 500;
      border: 1px solid;
      letter-spacing: 0.3px;
    }
html.page-login .badge-v { border-color: rgba(96,165,250,0.4); color: #93c5fd; background: rgba(29,78,216,0.12); }
html.page-login .badge-c { border-color: rgba(34,211,238,0.35); color: #67e8f9; background: rgba(34,211,238,0.10); }
html.page-login .badge-a { border-color: rgba(251,191,36,0.35); color: #fcd34d; background: rgba(251,191,36,0.10); }
html.page-login .brand-content { position: relative; z-index: 2; }
html.page-login .divider { display: none; }
html.page-login .login-panel {
      width: min(400px, 92vw);
      display: flex;
      align-items: center;
      justify-content: center;
    }
html.page-login .card {
      width: 100%;
      background: rgba(10,18,32,0.85);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 30px 30px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 24px 80px rgba(0,0,0,0.5),
        0 0 60px rgba(29,78,216,0.12);
      opacity: 0;
      transform: translateY(32px) scale(0.97);
      animation: cardIn 1s 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
    }
html.page-login .card-logo {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(29,78,216,0.35), rgba(34,211,238,0.2));
      border: 1px solid rgba(96,165,250,0.4);
      display: flex; align-items: center; justify-content: center;
      font-size: 19px;
      margin-bottom: 18px;
      box-shadow: 0 0 24px rgba(29,78,216,0.3);
    }
html.page-login .card-title {
      font-size: 20px; font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 4px;
    }
html.page-login .card-title span { color: var(--violet-l); }
html.page-login .card-desc {
      font-size: 12.5px; color: var(--muted);
      margin-bottom: 22px;
      font-weight: 400;
    }
html.page-login .field { margin-bottom: 14px; }
html.page-login .field label {
      display: block;
      font-size: 11.5px; font-weight: 500;
      color: #9fb3d0;
      margin-bottom: 8px;
      letter-spacing: 0.3px;
    }
html.page-login .input-wrap {
      position: relative;
    }
html.page-login .input-wrap .icon {
      position: absolute;
      left: 14px; top: 50%; transform: translateY(-50%);
      width: 16px; height: 16px;
      color: var(--muted);
      transition: color 0.3s;
      pointer-events: none;
    }
html.page-login .inp-login {
      width: 100%;
      padding: 12px 14px 12px 42px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      color: var(--white);
      font-family: 'Space Grotesk', monospace;
      font-size: 14px;
      outline: none;
      transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
      direction: ltr;
      text-align: left;
    }
html.page-login .inp-login::placeholder { color: rgba(91,91,91,0.7); font-size: 13px; }
html.page-login .inp-login:focus {
      border-color: rgba(96,165,250,0.6);
      background: rgba(255,255,255,0.07);
      box-shadow: 0 0 0 3px rgba(29,78,216,0.18), 0 0 20px rgba(34,211,238,0.10);
    }
html.page-login .inp-login:focus + .icon, html.page-login .input-wrap:focus-within .icon { color: var(--violet-l); }
html.page-login .eye-btn {
      position: absolute;
      right: 13px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer;
      color: var(--muted); padding: 2px;
      transition: color 0.2s;
    }
html.page-login .eye-btn:hover { color: var(--violet-l); }
html.page-login .err-msg {
      display: none;
      padding: 10px 14px;
      border-radius: 10px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(104,104,104,0.25);
      color: #b7b7b7;
      font-size: 12px;
      margin-bottom: 18px;
      animation: shake 0.4s ease;
    }
html.page-login .err-msg.show { display: flex; align-items: center; gap: 8px; }
@keyframes shake {
      0%,100%{ transform: translateX(0) }
      20%{ transform: translateX(-6px) }
      40%{ transform: translateX(6px) }
      60%{ transform: translateX(-4px) }
      80%{ transform: translateX(4px) }
    }
html.page-login .btn-login {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #1d4ed8, #2f6bd8);
      color: #ffffff;
      font-family: 'Tajawal', sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.3s;
      box-shadow: 0 6px 24px rgba(29,78,216,0.42);
      letter-spacing: 0.3px;
    }
html.page-login .btn-login::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #2f6bd8, #22d3ee);
      opacity: 0;
      transition: opacity 0.3s;
    }
html.page-login .btn-login:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(29,78,216,0.55); }
html.page-login .btn-login:hover::before { opacity: 1; }
html.page-login .btn-login:active { transform: translateY(1px); }
html.page-login .btn-login span { position: relative; z-index: 1; }
html.page-login .btn-login.loading span { opacity: 0; }
html.page-login .btn-login .loader {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
    }
html.page-login .btn-login.loading .loader { opacity: 1; }
html.page-login .btn-loader-ring {
      width: 20px; height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
html.page-login .btn-login.success {
      background: linear-gradient(135deg, #0f7a53, #16a34a);
      box-shadow: 0 4px 32px rgba(15,122,83,0.45);
      transform: scale(1.02);
    }
html.page-login .card-footer {
      margin-top: 16px;
      text-align: center;
      font-size: 10.5px;
      color: #8ba0bf;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 14px;
      line-height: 1.5;
    }
@keyframes loginFadeIn { from{opacity:0}   to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translate(-50%,-50%) scale(0.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes emblemIn { from{opacity:0;transform:scale(0.7) rotate(-12deg)} to{opacity:1;transform:scale(1) rotate(0deg)} }
@keyframes cardIn { from{opacity:0;transform:translateY(32px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes spinRing { to{transform:rotate(360deg)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes pulse { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@media (max-width: 768px) {
    html.page-login body { overflow-y: auto; }
    html.page-login .stage { height: auto; min-height: 100vh; padding: 32px 16px; }
    html.page-login .login-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html.page-login *, html.page-login *::before, html.page-login *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}