:root {
  --black: #080808;
  --black-2: #11110f;
  --panel: #151513;
  --panel-2: #1b1a17;
  --line: rgba(221, 178, 87, 0.18);
  --line-strong: rgba(221, 178, 87, 0.42);
  --gold: #d7aa4f;
  --gold-bright: #f0c76e;
  --gold-dark: #8f681e;
  --cream: #f8f3e8;
  --muted: #9b978f;
  --green: #24975c;
  --red: #d44e4e;
  --blue: #2d75c8;
  --gray: #62646a;
  --input-bg: #4b4d54;
  --input-bg-focus: #575a63;
  --input-border: #777a84;
  --surface-base: #2c2d33;
  --surface-card: #393a41;
  --surface-raised: #45474f;
  --surface-row: #3f4148;
  --surface-row-alt: #484a52;
  --frame-black: #040404;
  --frame-gold: #e2b957;
  --frame-gold-soft: rgba(226, 185, 87, .62);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  font-family: "Cairo", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--black); color: var(--cream); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  background:
    radial-gradient(circle at 14% 15%, rgba(215,170,79,.13), transparent 32%),
    linear-gradient(135deg, #090909, #14130f 55%, #080808);
}

.login-brand {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  border-left: 1px solid var(--line);
}

.login-brand::after {
  content: "ا";
  position: absolute;
  left: -5vw;
  bottom: -20vw;
  font-size: min(70vw, 900px);
  line-height: 1;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(215,170,79,.08);
  pointer-events: none;
}

.brand-mark { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.mark-box {
  width: 54px; height: 54px; border: 1px solid var(--gold);
  display: grid; place-items: center; color: var(--gold-bright);
  font-size: 24px; font-weight: 800; transform: rotate(45deg); border-radius: 12px;
  box-shadow: 0 0 30px rgba(215,170,79,.12);
}
.mark-box span { transform: rotate(-45deg); }
.brand-copy strong { display: block; color: var(--gold-bright); font-size: 25px; letter-spacing: .04em; }
.brand-copy small { color: var(--muted); }
.brand-message { position: relative; z-index: 1; max-width: 660px; }
.eyebrow { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.brand-message h1 { font-size: clamp(42px, 5vw, 76px); line-height: 1.15; margin: 14px 0 18px; }
.brand-message h1 span { color: var(--gold-bright); }
.brand-message p { color: #bbb6ab; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.9; max-width: 590px; }
.brand-foot { color: #77746d; font-size: 12px; position: relative; z-index: 1; }

.login-side { display: grid; place-items: center; padding: 30px; }
.login-card { width: min(430px, 100%); }
.login-card h2 { font-size: 32px; margin: 0 0 8px; }
.login-card > p { color: var(--muted); margin: 0 0 34px; }
.field { display: grid; gap: 9px; margin-bottom: 18px; }
.field label { font-size: 13px; color: #d6d0c5; font-weight: 600; }
.input-wrap { position: relative; }
.input-wrap .field-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--gold); }
.input-wrap input, .field input, .field select, .field textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: white;
  border-radius: 12px; padding: 14px 16px; outline: none; transition: .2s;
}
.input-wrap input::placeholder, .field input::placeholder, .field textarea::placeholder, .search input::placeholder, .add-screen input::placeholder { color: #b1b2b6; opacity: .85; }
.input-wrap input { padding-right: 46px; }
.input-wrap input:focus, .field input:focus, .field select:focus, .field textarea:focus { background: var(--input-bg-focus); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(215,170,79,.09); }
.password-toggle { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--gold-bright); font-size: 11px; font-weight: 700; }
.login-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(215,170,79,.045); }
.login-photo { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 17px; overflow: hidden; border: 1px solid var(--line-strong); background: #0d0d0c; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.login-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-profile strong { display: block; color: var(--gold-bright); font-size: 15px; }
.login-profile small { color: var(--muted); font-size: 10px; }
.remember-row { display: flex; align-items: center; justify-content: space-between; margin: -3px 0 18px; }
.remember-check { display: inline-flex; align-items: center; gap: 8px; color: #bbb6ad; font-size: 11px; cursor: pointer; user-select: none; }
.remember-check input { appearance: none; width: 17px; height: 17px; border: 1px solid #4a4740; border-radius: 5px; background: #11110f; display: grid; place-items: center; margin: 0; }
.remember-check input:checked { background: var(--gold); border-color: var(--gold-bright); }
.remember-check input:checked::after { content: "✓"; color: #130f07; font-size: 12px; font-weight: 800; }
.private-note { color: #716d65; font-size: 10px; }
.login-submit { width: 100%; margin-top: 8px; padding: 14px; border-radius: 12px; border: 1px solid #f2cb78; background: linear-gradient(135deg, #b7842c, #e2b95c); color: #130f07; font-weight: 800; }
.login-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.demo-credentials { margin-top: 24px; border: 1px dashed var(--line-strong); background: rgba(215,170,79,.055); border-radius: 12px; padding: 14px 16px; font-size: 12px; color: #aaa59a; }
.demo-credentials strong { color: var(--gold-bright); }
.login-error { min-height: 24px; color: #ff8686; font-size: 13px; margin-top: 10px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; background: var(--surface-base); }
.sidebar { position: fixed; inset: 0 0 0 auto; width: 270px; height: 100vh; height: 100dvh; overflow: hidden; background: linear-gradient(180deg, #41434a, #34353b); border-left: 1px solid var(--line); padding: 24px 18px; display: flex; flex-direction: column; z-index: 30; }
.sidebar .brand-mark { padding: 3px 8px 25px; border-bottom: 1px solid var(--line); }
.sidebar .mark-box { width: 42px; height: 42px; font-size: 18px; border-radius: 10px; }
.sidebar .brand-copy strong { font-size: 20px; }
.nav-label { color: #67635c; font-size: 11px; font-weight: 700; padding: 24px 12px 8px; }
.nav-list { min-height: 0; flex: 1 1 auto; display: grid; align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; padding-left: 4px; padding-bottom: 12px; }
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.035); background: rgba(255,255,255,.025); color: #c2c0bb; padding: 12px 14px; border-radius: 11px; text-align: right; transition: .2s; }
.nav-item:hover { color: white; background: #50525a; }
.nav-item.active { color: var(--gold-bright); border-color: var(--line); background: linear-gradient(90deg, rgba(215,170,79,.11), rgba(215,170,79,.035)); }
.nav-icon { width: 22px; display: grid; place-items: center; font-size: 18px; }
.nav-item .badge { margin-right: auto; background: rgba(215,170,79,.13); color: var(--gold-bright); border-radius: 99px; padding: 2px 7px; font-size: 10px; }
.sidebar-user { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 18px 8px 0; display: flex; align-items: center; gap: 11px; }
.sidebar-user .user-info { min-width: 0; flex: 1; }
.sidebar-user strong, .sidebar-user small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user strong { font-size: 13px; }
.sidebar-user small { color: var(--muted); font-size: 10px; }
.logout { border: 0; background: transparent; color: #8d8982; font-size: 18px; }

.content { grid-column: 2; min-width: 0; }
.topbar { height: 78px; border-bottom: 1px solid rgba(255,255,255,.11); background: rgba(61,63,70,.96); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 0 34px; gap: 16px; }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--gold); font-size: 22px; }
.page-title { margin: 0; font-size: 21px; }
.page-subtitle { color: var(--muted); font-size: 11px; margin-top: 2px; }
.top-actions { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border: 1px solid #45464c; border-radius: 10px; background: var(--surface-raised); color: #d1cec7; position: relative; }
.icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.page { padding: 30px 34px 50px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-heading h2 { margin: 0 0 5px; font-size: 26px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.btn { position: relative; overflow: hidden; border: 0; border-radius: 9px; padding: 10px 15px; color: white; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 48%, transparent 76%); transform: translateX(120%); transition: transform .42s ease; }
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.btn:hover::after { transform: translateX(-120%); }
.btn:active { transform: translateY(0) scale(.96); box-shadow: none; }
.btn-add { background: var(--green); }
.btn-save { background: var(--green); }
.btn-delete { background: var(--red); }
.btn-edit { background: #d4a62f; }
.btn-archive { background: #8f6b22; border: 1px solid #d5ae54; }
.btn-gold { background: linear-gradient(135deg, #a87725, var(--gold)); color: #151007; }
.btn-cancel { background: #a83d3d; }
.btn-ghost { background: transparent; border: 1px solid #32312d; color: #c4c0b6; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric { background: linear-gradient(145deg, #4a4c54, #3c3e45); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px; position: relative; overflow: hidden; }
.metric::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid rgba(215,170,79,.08); border-radius: 50%; left: -42px; top: -52px; }
.metric-head { color: #ffffff; font-size: 13px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.metric-icon { color: var(--gold); font-size: 20px; }
.metric-value { font-size: 30px; font-weight: 800; margin: 10px 0 2px; }
.metric-note { font-size: 10px; color: #74716b; }
.metric-note.good { color: #58bd86; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr); gap: 18px; }
.panel { background: var(--surface-card); border: 1px solid rgba(255,255,255,.085); border-radius: 16px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.055); }
.panel-head h3 { margin: 0; font-size: 15px; }
.panel-head small { color: var(--muted); }
.bar-chart { height: 260px; padding: 30px 22px 20px; display: flex; align-items: flex-end; gap: 14px; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 100% 52px; }
.bar-col { flex: 1; min-width: 0; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bar { width: min(32px, 65%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--gold-bright), #8e651d); box-shadow: 0 -10px 28px rgba(215,170,79,.1); }
.bar-col span { color: #77746c; font-size: 10px; }
.activity { padding: 8px 20px 18px; }
.activity-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; padding: 13px 10px; border-bottom: 1px solid rgba(255,255,255,.045); border-radius: 8px; }
.activity-row:nth-child(odd) { background: rgba(255,255,255,.025); }
.activity-row:last-child { border-bottom: 0; }
.activity-dot { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(215,170,79,.09); color: var(--gold); }
.activity-row strong { display: block; font-size: 11px; }
.activity-row small { color: var(--muted); font-size: 9px; }
.activity-time { color: #65625c; font-size: 9px; }

.toolbar { display: flex; gap: 12px; margin-bottom: 16px; }
.search { flex: 1; min-width: 160px; position: relative; }
.search span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #777; }
.search input, .toolbar select { width: 100%; height: 43px; border: 1px solid var(--input-border); background: var(--input-bg); border-radius: 10px; color: white; padding: 0 42px 0 13px; outline: none; transition: .2s; }
.search input:focus, .toolbar select:focus, .add-screen input:focus { background: var(--input-bg-focus); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(215,170,79,.09); }
.toolbar select { width: 180px; padding: 0 12px; }
.table-card { border: 1px solid rgba(255,255,255,.085); border-radius: 15px; overflow: hidden; background: var(--surface-card); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #565861; color: #e1ded7; font-size: 10px; padding: 13px 16px; text-align: right; font-weight: 700; }
.data-table td { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.065); font-size: 12px; }
.data-table tr { transition: .15s; }
.data-table tbody tr:nth-child(odd) { background: var(--surface-row); }
.data-table tbody tr:nth-child(even) { background: var(--surface-row-alt); }
.data-table tbody tr:hover { background: #5a5b64; }
.employee-cell { display: flex; align-items: center; gap: 11px; }
.employee-cell strong { display: block; font-size: 12px; }
.employee-cell small { color: var(--muted); font-size: 9px; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #28241b, #111); border: 1px solid rgba(215,170,79,.28); display: grid; place-items: center; color: var(--gold); font-weight: 800; font-size: 10px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.large { width: 96px; height: 96px; flex-basis: 96px; border-radius: 20px; font-size: 19px; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 9px; font-size: 9px; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.status.active { background: rgba(36,151,92,.12); color: #67d59a; }
.status.active::before { background: #48bb7d; }
.status.vacation { background: rgba(215,170,79,.12); color: #e9be66; }
.status.vacation::before { background: var(--gold); }
.status.stopped { background: rgba(212,78,78,.12); color: #ef8585; }
.status.stopped::before { background: var(--red); }
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.small-action { border: 1px solid #737680; background: #50525a; color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 10px; font-weight: 800; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.small-action:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.small-action:active { transform: scale(.95); }
.action-view { background: var(--blue); border-color: #5595d9; }
.action-send { background: #9a7022; border-color: #e2b957; }
.action-edit { background: #c99b24; border-color: #e2bc57; }
.action-archive { background: #8f6b22; border-color: #d5ae54; }
.action-restore { background: var(--green); border-color: #5fd394; }
.action-delete, .delete-action { background: var(--red); border-color: #eb7777; }
.empty-state { padding: 55px; text-align: center; color: var(--muted); }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.64); backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: min(620px, 96vw); background: #393a41; border-right: 1px solid var(--line-strong); box-shadow: var(--shadow); transform: translateX(-105%); transition: .3s ease; overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-head { position: sticky; top: 0; z-index: 3; background: rgba(75,77,85,.98); backdrop-filter: blur(16px); padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.drawer-head h3 { margin: 0; font-size: 18px; }
.drawer-head-tools, .branch-editor-tools, .season-editor-tools { display: flex; align-items: center; gap: 10px; }
.drawer-close { border: 0; background: #505159; color: white; border-radius: 9px; width: 36px; height: 36px; }
.employee-hero { padding: 24px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.05); }
.employee-hero h4 { margin: 0 0 5px; font-size: 20px; }
.employee-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.photo-actions { display: flex; gap: 7px; margin-top: 11px; }
.photo-actions button, .photo-actions label { border: 1px solid #676971; background: #44454b; color: #f0ede7; border-radius: 8px; padding: 6px 10px; font-size: 9px; cursor: pointer; }
.employee-form { padding: 18px 20px; }
.form-section { margin-bottom: 24px; }
.form-section h5 { margin: 0 0 15px; color: var(--gold-bright); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .field { margin: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.fingerprint-device-settings-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.fingerprint-device-settings-grid .form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.drawer-footer { position: sticky; bottom: 0; z-index: 5; background: rgba(71,73,81,.98); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 9px; }
.employee-file-actions-title { width: 100%; color: var(--gold-bright); font-size: 11px; }

.employee-job-cell strong, .employee-job-cell small { display: block; }
.employee-job-cell small { margin-top: 4px; font-size: 11px; opacity: .84; }
.permission-mode-tabs { width: fit-content; margin-bottom: 16px; padding: 5px; display: flex; gap: 5px; border: 1px solid var(--frame-gold-soft); border-radius: 12px; background: #080808; }
.permission-mode-tabs button { min-width: 170px; padding: 10px 16px; border: 1px solid rgba(226,185,87,.24); border-radius: 8px; background: #4b4d54; font-weight: 900; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.permission-mode-tabs button:hover { transform: translateY(-1px); background: #5a5c64; }
.permission-mode-tabs button.active { border-color: var(--frame-gold); background: linear-gradient(135deg, #8f681e, #c99b3e); box-shadow: 0 5px 16px rgba(0,0,0,.24); }
.permissions-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.permissions-grid > .table-card { min-width: 0; overflow-x: auto; }
.role-list { padding: 10px; }
.role-option { width: 100%; border: 1px solid rgba(255,255,255,.08); background: #484a52; color: #e1ded7; border-radius: 10px; padding: 12px; text-align: right; display: flex; align-items: center; gap: 10px; }
.role-option:hover { background: #575961; }
.role-option.active { border-color: #73e3a2; background: linear-gradient(135deg, #146e40, #278f53); color: #fff; box-shadow: 0 0 0 2px rgba(94, 218, 142, .16); }
.role-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #5b5d65; }
.role-option small { display: block; font-size: 9px; color: #75716a; }
.registry-banner { margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(90deg, rgba(215,170,79,.09), rgba(215,170,79,.025)); display: flex; align-items: center; gap: 12px; }
.registry-banner .pulse { width: 9px; height: 9px; border-radius: 50%; background: #49bb7c; box-shadow: 0 0 0 6px rgba(73,187,124,.1); }
.registry-banner strong { font-size: 12px; }
.registry-banner small { display: block; color: var(--muted); font-size: 9px; }
.registry-banner .count { margin-right: auto; color: var(--gold-bright); font-size: 11px; }
.document-navigation-rule { margin: -2px 0 16px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--frame-gold-soft); border-radius: 12px; background: #4b4d54; }
.document-navigation-rule > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 10px; background: #090909; color: var(--gold-bright) !important; font-size: 21px; font-weight: 900; }
.document-navigation-rule strong, .document-navigation-rule small { display: block; }
.document-navigation-rule strong { font-size: 14px; }
.document-navigation-rule small { margin-top: 3px; font-size: 12px; line-height: 1.7; }
.permissions-table th:not(:first-child), .permissions-table td:not(:first-child) { text-align: center; }
.permissions-table { min-width: 660px; table-layout: fixed; }
.permissions-table th, .permissions-table td { padding-right: 9px; padding-left: 9px; }
.permissions-table th:first-child, .permissions-table td:first-child { width: 28%; }
.permissions-table th:not(:first-child), .permissions-table td:not(:first-child) { width: 18%; }
.permission-name strong { display: block; }
.permission-name small { color: var(--muted); font-size: 9px; }
.permission-toggle-state { display: grid; justify-items: center; gap: 6px; }
.switch { position: relative; width: 38px; height: 21px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; border-radius: 99px; background: #35342f; transition: .2s; }
.slider::before { content: ""; position: absolute; height: 15px; width: 15px; right: 3px; top: 3px; border-radius: 50%; background: #8c8981; transition: .2s; }
.switch input:checked + .slider { background: #168349; }
.switch input:checked + .slider::before { transform: translateX(-17px); background: #57cf8b; }
.permission-state-label { min-width: 68px; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 10px !important; font-weight: 900; white-space: nowrap; }
.permission-state-label.enabled { border-color: #80eab0; background: #168349; }
.permission-state-label.disabled { border-color: #eb7777; background: rgba(212,78,78,.45); }
.permission-note { padding: 14px 18px; color: #858178; font-size: 10px; border-top: 1px solid rgba(255,255,255,.05); }
.permission-table-title { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
.permission-table-title strong, .permission-table-title small { display: block; }
.permission-table-title strong { font-size: 16px; }
.permission-table-title small { margin-top: 3px; font-size: 11px; opacity: .82; }
.employee-permission-picker { min-height: 84px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
.employee-permission-picker strong, .employee-permission-picker small { display: block; }
.employee-permission-picker strong { font-size: 16px; }
.employee-permission-picker small { margin-top: 4px; font-size: 11px; opacity: .82; }
.employee-permission-picker select { width: min(360px, 48%); min-height: 42px; padding: 8px 12px; border-radius: 9px; font-weight: 800; }
.selected-employee-permission { margin: 14px 16px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--frame-gold-soft); border-radius: 11px; background: #4a4c53; }
.selected-employee-permission > div:nth-child(2) { min-width: 0; }
.selected-employee-permission strong, .selected-employee-permission small { display: block; }
.selected-employee-permission small { margin-top: 3px; font-size: 11px; opacity: .84; }
.selected-employee-permission > span:last-child { margin-right: auto; padding: 5px 9px; border: 1px solid var(--frame-gold); border-radius: 999px; background: #191710; font-size: 11px; font-weight: 900; }
.employee-permission-legend { margin: 0 16px 14px; padding: 11px 13px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid var(--frame-gold-soft); border-radius: 10px; background: #50525a; }
.employee-permission-legend strong { margin-left: 3px; font-size: 12px; }
.employee-permission-legend span { padding: 4px 7px; border-radius: 7px; background: #3f4148; font-size: 11px; }
.employee-permission-legend b { color: var(--gold-bright) !important; }
.employee-permission-card { overflow-x: auto; }
.employee-permissions-table { min-width: 700px; }
.employee-permission-control { min-width: 120px; display: grid; justify-items: center; gap: 6px; }
.employee-permission-control select { width: 128px; min-height: 36px; padding: 5px 7px; border-radius: 8px; font-size: 11px !important; font-weight: 800; }
.effective-badge { min-width: 92px; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 10px !important; font-weight: 900; }
.effective-badge.allow { border-color: #80eab0; background: #168349; }
.effective-badge.deny { border-color: #eb7777; background: rgba(212,78,78,.58); }
.permission-employee-empty { min-height: 330px; padding: 35px; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; }
.permission-employee-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 15px; background: #565860; font-size: 25px; }
.permission-employee-empty strong { margin-top: 5px; font-size: 16px; }
.permission-employee-empty small { font-size: 12px; opacity: .82; }
.add-screen { display: flex; gap: 10px; align-items: center; }
.add-screen input { width: 210px; height: 39px; border: 1px solid var(--input-border); border-radius: 9px; background: var(--input-bg); color: white; padding: 0 12px; outline: none; transition: .2s; }
.add-screen select { width: 145px; height: 39px; padding: 0 9px; border: 1px solid var(--frame-gold); border-radius: 9px; }
.permission-audience-tabs { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.permission-audience-card { min-height: 82px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--frame-gold-soft); border-radius: 14px; background: #4a4c54; text-align: right; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.permission-audience-card:hover { transform: translateY(-2px); background: #585b64; }
.permission-audience-card.active { border-color: var(--frame-gold); background: linear-gradient(135deg, #17150f, #5d4920); box-shadow: 0 9px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(226,185,87,.22); }
.permission-audience-card > span { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 12px; background: #0a0a09; color: var(--gold-bright) !important; font-size: 23px; }
.permission-audience-card > div { min-width: 0; }
.permission-audience-card strong, .permission-audience-card small { display: block; }
.permission-audience-card strong { font-size: 16px; }
.permission-audience-card small { margin-top: 3px; font-size: 12px; opacity: .86; }
.permission-audience-card > b { margin-right: auto; color: var(--gold-bright) !important; font-size: 20px; }
.permissions-grid { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.permission-profile-panel, .permission-entity-panel { position: sticky; top: 96px; border-color: var(--frame-gold-soft); }
.role-option { margin-bottom: 8px; }
.role-option small { color: #fff; opacity: .8; font-size: 12px; }
.permission-workspace { min-width: 0; border: 1px solid var(--frame-gold-soft); border-radius: 16px; background: #393a41; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.permission-profile-title { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
.permission-profile-title span, .permission-profile-title strong, .permission-profile-title small { display: block; }
.permission-profile-title span { color: var(--gold-bright) !important; font-size: 12px; font-weight: 900; }
.permission-profile-title strong { margin: 2px 0; font-size: 20px; }
.permission-profile-title small { font-size: 13px; opacity: .86; }
.permission-profile-title > b { padding: 6px 10px; border: 1px solid var(--frame-gold); border-radius: 999px; background: #4d4f57; white-space: nowrap; font-size: 12px; }
.permission-modules { padding: 14px; display: grid; gap: 14px; }
.permission-module { border: 1px solid rgba(226,185,87,.45); border-radius: 13px; background: #44464e; overflow: hidden; }
.permission-module-head { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(226,185,87,.35); background: #10100e; }
.permission-module-head > div { display: flex; align-items: center; gap: 9px; }
.permission-module-head > div > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 8px; color: var(--gold-bright) !important; }
.permission-module-head strong { font-size: 16px; }
.permission-module-head small { font-size: 12px; opacity: .82; }
.permission-screen-list { padding: 11px; display: grid; gap: 10px; }
.permission-screen-card { border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: #50525a; overflow: hidden; }
.permission-screen-head { min-height: 61px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1); background: #3f4148; }
.permission-screen-head strong, .permission-screen-head small { display: block; }
.permission-screen-head strong { font-size: 15px; }
.permission-screen-head small { margin-top: 3px; font-size: 12px; opacity: .84; }
.permission-screen-head .unassigned { padding: 4px 8px; border: 1px solid #eb7777; border-radius: 999px; background: rgba(212,78,78,.45); white-space: nowrap; }
.permission-actions-grid { padding: 10px; display: grid; grid-template-columns: repeat(4, minmax(125px, 1fr)); gap: 8px; }
.permission-action-cell { min-width: 0; min-height: 76px; padding: 9px 8px; display: grid; align-content: center; justify-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #44464e; text-align: center; }
.permission-action-cell > span { min-height: 20px; font-size: 12px; font-weight: 900; }
.permission-toggle-state { display: flex; align-items: center; gap: 8px; }
.individual-permission-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 16px; align-items: start; }
.permission-entity-panel { max-height: calc(100vh - 120px); }
.permission-entity-panel .panel-head h3, .permission-entity-panel .panel-head small { display: block; }
.permission-search { position: relative; margin: 12px; display: block; }
.permission-search > span { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); color: #111 !important; font-size: 18px; }
.permission-search input { width: 100%; height: 43px; padding: 0 39px 0 10px; border: 1px solid var(--frame-gold); border-radius: 9px; }
.permission-entity-list { max-height: calc(100vh - 270px); padding: 0 10px 11px; overflow-y: auto; }
.permission-entity-option { width: 100%; margin-bottom: 8px; padding: 11px 12px; display: block; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #4a4c54; text-align: right; }
.permission-entity-option:hover { background: #595b64; }
.permission-entity-option.active { border-color: #73e3a2; background: linear-gradient(135deg, #146e40, #278f53); box-shadow: 0 0 0 2px rgba(94, 218, 142, .16); }
.permission-entity-option strong, .permission-entity-option small, .permission-entity-option span { display: block; }
.permission-entity-option strong { font-size: 14px; }
.permission-entity-option small { margin-top: 2px; color: var(--gold-bright) !important; font-size: 12px; }
.permission-entity-option span { margin-top: 2px; font-size: 11px; opacity: .84; }
.permission-search-empty { padding: 20px 12px; text-align: center; font-size: 13px; opacity: .8; }
.selected-individual-permission { padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
.selected-individual-icon > span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 11px; background: #4d4f57; font-size: 22px; }
.selected-individual-permission > div:nth-child(2) { min-width: 0; }
.selected-individual-permission small, .selected-individual-permission strong, .selected-individual-permission span { display: block; }
.selected-individual-permission small { color: var(--gold-bright) !important; font-size: 11px; font-weight: 900; }
.selected-individual-permission strong { font-size: 18px; }
.selected-individual-permission span { font-size: 12px; opacity: .86; }
.selected-individual-permission > b { margin-right: auto; padding: 6px 10px; border: 1px solid var(--frame-gold); border-radius: 999px; background: #4d4f57; white-space: nowrap; font-size: 11px; }
.individual-permission-layout .employee-permission-legend { margin-top: 14px; }
.individual-action-cell { min-height: 110px; }
.individual-action-cell select { width: 100%; min-height: 37px; padding: 5px 7px; border-radius: 8px; font-weight: 800; }
.individual-action-cell select.permission-selection.allow { border: 2px solid #80eab0; background: #168349; }
.individual-action-cell select.permission-selection.deny { border: 2px solid #ff9090; background: #984949; }
#app select.pending-choice,
#app input.pending-choice:not([type="checkbox"]):not([type="radio"]),
#app textarea.pending-choice { border: 2px solid #80eab0; background: #168349; color: #fff; box-shadow: 0 0 0 2px rgba(94,218,142,.14); }
#app input.pending-choice::placeholder, #app textarea.pending-choice::placeholder { color: rgba(255,255,255,.72); }
#app .pending-choice-container { border-color: #80eab0; background: #168349; box-shadow: 0 0 0 2px rgba(94,218,142,.14); }
#app input.pending-choice[type="checkbox"], #app input.pending-choice[type="radio"] { accent-color: #168349; }
.checklist-item-row.pending-row { border-color: #80eab0; background: rgba(22,131,73,.28); box-shadow: 0 0 0 2px rgba(94,218,142,.12); }
.permission-save-bar { position: sticky; top: 78px; z-index: 15; margin: 0 0 17px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #76dca3; border-radius: 10px; background: #1c3026; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.permission-save-bar span { font-size: 13px; font-weight: 800; }
.permission-save-bar .btn { min-width: 160px; }
.permission-save-bar .btn:disabled { opacity: .55; cursor: default; }
.permission-profile-panel, .permission-entity-panel { top: 156px; }
.effective-badge { text-align: center; }
.new-tag { color: #e8bd64; background: rgba(215,170,79,.1); border: 1px solid rgba(215,170,79,.2); border-radius: 99px; padding: 2px 7px; font-size: 8px; margin-right: 6px; }
.unassigned { color: #ec8d8d; font-size: 9px; }

.toast { position: fixed; left: 24px; bottom: 24px; z-index: 200; min-width: 270px; background: #20201c; border: 1px solid var(--line-strong); color: white; padding: 13px 16px; border-radius: 11px; box-shadow: var(--shadow); transform: translateY(130%); opacity: 0; transition: .25s; font-size: 12px; }
.toast.show { transform: translateY(0); opacity: 1; }

.master-detail-page { min-height: calc(100vh - 78px); padding-top: 18px; }
.master-detail-heading { min-height: 74px; margin-bottom: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--frame-gold); border-radius: 14px; background: linear-gradient(90deg, #050505, #24231f); box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.master-detail-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.master-detail-identity > div { min-width: 0; }
.master-detail-identity h2, .master-detail-identity p, .master-detail-identity small { display: block; margin: 0; }
.master-detail-identity h2 { margin: 2px 0; color: #fff; font-size: 22px; font-weight: 900; }
.master-detail-identity p { color: #fff; font-size: 13px; line-height: 1.55; opacity: .86; }
.master-detail-identity small { color: var(--frame-gold); font-size: 12px; font-weight: 900; }
.btn-back-master { min-height: 44px; flex: 0 0 auto; padding: 8px 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #f1c85a; border-radius: 10px; background: linear-gradient(180deg, #f5cf65, #d7a62d); color: #111; box-shadow: 0 7px 18px rgba(215,166,45,.28); font-size: 14px; font-weight: 900; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn-back-master:hover { background: linear-gradient(180deg, #ffdc78, #e4b43d); box-shadow: 0 9px 22px rgba(215,166,45,.36); transform: translateY(-1px); }
.btn-back-master:focus-visible { outline: 3px solid rgba(245,207,101,.34); outline-offset: 2px; }
.btn-back-master span { color: #111; font-size: 23px; line-height: 1; }
.master-detail-page .master-table-card { min-height: calc(100vh - 190px); }
.master-summary { display: grid; grid-template-columns: 150px 150px 1fr; align-items: center; gap: 14px; margin-bottom: 18px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(90deg, rgba(215,170,79,.12), rgba(215,170,79,.035)); }
.master-summary > div { display: flex; align-items: baseline; gap: 9px; }
.master-summary strong { color: #fff; font-size: 25px; }
.master-summary span, .master-summary p { color: #fff; font-size: 10px; margin: 0; }
.master-summary p { border-right: 1px solid var(--line); padding-right: 20px; }
.master-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.master-card { position: relative; min-height: 112px; border: 1px solid rgba(255,255,255,.09); background: var(--surface-card); color: #fff; border-radius: 14px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; text-align: right; transition: .2s; }
.master-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-raised); }
.master-card.active { border-color: var(--gold); background: linear-gradient(145deg, rgba(215,170,79,.18), var(--surface-card)); box-shadow: 0 0 0 2px rgba(215,170,79,.07); }
.master-card-icon { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 9px; background: #46474d; color: #fff; font-size: 18px; }
.master-card strong { display: block; color: #fff; font-size: 12px; margin-bottom: 4px; }
.master-card small { display: block; color: #fff; opacity: .82; font-size: 8px; line-height: 1.6; }
.master-card b { position: absolute; left: 10px; top: 10px; min-width: 23px; height: 23px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: rgba(215,170,79,.18); color: #fff; font-size: 9px; }
.master-editor { display: grid; grid-template-columns: minmax(155px, .9fr) 148px minmax(220px, 1.4fr) 145px auto auto; gap: 9px; align-items: end; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-card); }
.master-editor > div:first-child { align-self: center; }
.master-editor > div:first-child strong, .master-editor > div:first-child small { display: block; color: #fff; }
.master-editor > div:first-child small { font-size: 9px; opacity: .8; }
.master-editor .field { margin: 0; }
.master-table-card .panel-head { background: var(--surface-raised); }
.master-panel-actions { display: flex; align-items: center; gap: 9px; }
.master-panel-actions .btn { padding: 7px 11px; }
.master-count { color: #fff; font-size: 10px; border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; }
.master-code { color: #fff; letter-spacing: .04em; }
.delete-action:hover { border-color: var(--red); color: #fff; }
.master-welcome { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 30px; border: 1px dashed var(--input-border); border-radius: 15px; background: var(--surface-card); text-align: right; }
.master-welcome > span { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-raised); font-size: 26px; }
.master-welcome strong { display: block; font-size: 16px; }
.master-welcome p { margin: 5px 0 0; font-size: 11px; opacity: .82; }
.table-scroll { overflow-x: auto; }
.branches-table { min-width: 930px; }
.branch-filter-bar { padding: 14px 16px; display: grid; grid-template-columns: minmax(240px, 1fr) 220px auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--frame-gold-soft); background: #4c4e56; }
.branch-filter-bar .search input, .branch-filter-bar select { width: 100%; height: 43px; border: 1px solid var(--frame-gold); border-radius: 10px; background: #fff; color: #111; outline: none; }
.branch-filter-bar select { padding: 0 12px; }
.branch-results-count { min-width: 76px; padding: 8px 11px; border: 1px solid var(--frame-gold-soft); border-radius: 99px; background: #5a5c64; text-align: center; font-size: 10px; font-weight: 800; }
.branch-filter-empty[hidden], .department-filter-empty[hidden], .product-group-filter-empty[hidden], .season-filter-empty[hidden], .supplier-filter-empty[hidden], .branches-table tr[hidden], .departments-table tr[hidden], .product-groups-table tr[hidden], .seasons-table tr[hidden], .suppliers-table tr[hidden] { display: none !important; }
.departments-table, .product-groups-table { min-width: 760px; }
.seasons-table { min-width: 980px; }
.department-editor, .product-group-editor { grid-template-columns: minmax(170px, 1fr) 150px minmax(220px, 1.5fr) 145px auto auto; }
.auto-code-badge { min-width: 142px; min-height: 48px; padding: 6px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--frame-gold); border-radius: 10px; background: #11110f; box-shadow: inset 0 0 0 1px rgba(226,185,87,.1); user-select: none; cursor: not-allowed; }
.auto-code-badge > span { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 7px; background: #34342f; font-size: 13px; }
.auto-code-badge > div { min-width: 0; }
.auto-code-badge small, .auto-code-badge strong { display: block; line-height: 1.15; white-space: nowrap; }
.auto-code-badge small { font-size: 10px; opacity: .78; }
.auto-code-badge strong { margin-top: 3px; font-size: 13px; letter-spacing: .04em; }
.auto-code-badge b { margin-right: auto; padding: 3px 5px; border-radius: 6px; background: rgba(195,145,43,.3); font-size: 9px; }
.auto-code-badge.identity-code-badge { min-width: 205px; min-height: 58px; padding: 8px 10px; border-width: 2px; }
.auto-code-badge.identity-code-badge > span { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }
.auto-code-badge.identity-code-badge strong { font-size: 17px; letter-spacing: .08em; }
.group-purpose { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--frame-gold-soft); background: rgba(215,170,79,.08); }
.group-purpose > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 9px; background: #5a5c64; }
.group-purpose p { margin: 0; line-height: 1.7; }
.season-purpose img { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
.season-type, .linked-suppliers, .unlinked-suppliers { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.season-type.summer { border: 1px solid #f1bd3c; background: rgba(212,142,23,.38); }
.season-type.winter { border: 1px solid #74c9ff; background: rgba(36,133,190,.38); }
.linked-suppliers { border: 1px solid #61d89a; background: rgba(36,151,92,.34); }
.unlinked-suppliers { border: 1px solid rgba(255,255,255,.2); background: #5a5c64; }
.season-period { display: block; margin-top: 4px; font-size: 12px; opacity: .84; direction: ltr; text-align: right; }
.season-editor { margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-card); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.17); }
.season-editor-head { min-height: 76px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(215,170,79,.16), var(--surface-raised)); }
.season-editor-head span, .season-editor-head h3, .season-editor-head p { display: block; margin: 0; }
.season-editor-head span { font-size: 13px; font-weight: 900; color: var(--gold-bright); }
.season-editor-head h3 { margin: 4px 0; font-size: 20px; }
.season-editor-head p { font-size: 13px; opacity: .84; }
.season-editor-head img { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.season-form-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.season-form-grid .field { margin: 0; }
.season-name { grid-column: span 2; }
.season-form-actions { padding: 10px 14px; display: flex; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.suppliers-table { min-width: 1420px; }
.supplier-name-cell { min-width: 240px; display: flex; align-items: center; gap: 11px; }
.supplier-name-cell strong, .supplier-name-cell small, .supplier-phone, .suppliers-table td > small { display: block; }
.supplier-name-cell small, .suppliers-table td > small { margin-top: 4px; opacity: .82; }
.supplier-row-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 10px; background: #24252a; color: var(--frame-gold); font-size: 19px; }
.supplier-type, .supplier-settlement { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; padding: 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 900; line-height: 1.4; }
.supplier-type.goods { border: 1px solid #61d89a; background: rgba(36,151,92,.34); }
.supplier-type.services { border: 1px solid #79b9ef; background: rgba(42,115,174,.38); }
.supplier-settlement { min-width: 125px; border: 1px solid var(--frame-gold-soft); background: #565861; }
.earned-discount-rate { display: inline-flex; min-width: 70px; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid #61d89a; border-radius: 999px; background: rgba(36,151,92,.34); font-size: 15px; }
.supplier-legal { display: grid; gap: 5px; min-width: 132px; }
.supplier-legal span { padding: 4px 7px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.supplier-legal .ready { border: 1px solid rgba(97,216,154,.6); background: rgba(36,151,92,.26); }
.supplier-legal .missing { border: 1px solid rgba(255,255,255,.16); background: #565861; opacity: .78; }
.supplier-editor { margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-card); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.17); }
.supplier-editor-head { min-height: 76px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(215,170,79,.15), var(--surface-raised)); }
.supplier-editor-head > div:first-child span, .supplier-editor-head h3, .supplier-editor-head p { display: block; margin: 0; }
.supplier-editor-head > div:first-child span { color: var(--gold-bright); font-size: 13px; font-weight: 900; }
.supplier-editor-head h3 { margin: 4px 0; font-size: 20px; }
.supplier-editor-head p { font-size: 13px; line-height: 1.6; opacity: .84; }
.supplier-form-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.supplier-form-grid .field { margin: 0; }
.supplier-name, .supplier-address { grid-column: span 2; }
.supplier-address textarea { min-height: 70px; resize: vertical; }
.earned-discount-field input { font-weight: 900; }
.supplier-account-field[hidden] { display: none; }
.portal-access-card { margin: 0 14px 14px; overflow: hidden; border: 1px solid var(--frame-gold); border-radius: 13px; background: #4d4f57; }
.portal-access-head, .portal-access-foot { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #070707; }
.portal-access-head { border-bottom: 1px solid var(--frame-gold-soft); }
.portal-access-head strong, .portal-access-head small { display: block; }
.portal-access-head strong { font-size: 16px; }
.portal-access-head small { margin-top: 3px; opacity: .84; }
.credential-status { min-width: 92px; padding: 6px 10px; border: 1px solid var(--frame-gold-soft); border-radius: 999px; text-align: center; font-size: 12px; font-weight: 900; }
.credential-status.sent { border-color: #61d89a; background: rgba(36,151,92,.34); }
.credential-status.scheduled { background: rgba(215,170,79,.25); }
.credential-status.new { background: #565861; }
.portal-access-grid { padding: 13px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; align-items: end; }
.portal-access-grid .field { margin: 0; }
.portal-access-grid input[readonly] { font-weight: 900; letter-spacing: .05em; cursor: not-allowed; }
.first-login-rule { min-height: 70px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--frame-gold-soft); border-radius: 11px; background: #5a5c64; }
.first-login-rule > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: #202125; }
.first-login-rule strong, .first-login-rule small { display: block; }
.first-login-rule small { margin-top: 2px; opacity: .84; }
.portal-access-foot { border-top: 1px solid var(--frame-gold-soft); }
.portal-access-foot small { line-height: 1.6; }
.btn-send-credentials { background: linear-gradient(135deg, #96691d, #d7aa4f); white-space: nowrap; }
.btn-send-credentials:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.employee-form .portal-access-card { margin: 0; }
.supplier-documents { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.supplier-document-card { min-height: 116px; padding: 10px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--frame-gold-soft); border-radius: 12px; background: #51535b; }
.supplier-document-preview { width: 92px; height: 92px; flex: 0 0 92px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: #1a1a1d; }
.supplier-document-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.supplier-document-copy { min-width: 0; flex: 1; }
.supplier-document-copy strong, .supplier-document-copy small { display: block; }
.supplier-document-copy strong { font-size: 15px; }
.supplier-document-copy small { margin: 4px 0 9px; font-size: 12px; line-height: 1.5; opacity: .82; }
.supplier-document-copy > div { display: flex; flex-wrap: wrap; gap: 7px; }
.supplier-document-copy label, .supplier-document-copy button { min-height: 34px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--input-border); border-radius: 8px; background: #fff; color: #111; font-size: 12px; font-weight: 900; cursor: pointer; }
.supplier-document-copy button { border-color: #e37171; background: #8e3434; color: #fff; }
.supplier-form-actions { padding: 10px 14px; display: flex; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.branch-name-cell { min-width: 220px; display: flex; align-items: center; gap: 11px; }
.branch-name-cell strong, .branch-name-cell small { display: block; }
.branch-name-cell small { margin-top: 3px; font-size: 8px; opacity: .82; }
.branch-mini-logo { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #1a1a1d; }
.branch-mini-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-editor { margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-card); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.17); }
.branch-editor-head { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: var(--surface-raised); }
.branch-editor-head h3 { margin: 3px 0; font-size: 20px; }
.branch-editor-head p { margin: 0; font-size: 10px; opacity: .82; }
.branch-form-kicker { font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.branch-logo-editor { display: flex; align-items: center; gap: 10px; }
.branch-logo-frame { width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #1a1a1d; }
.branch-logo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-logo-editor > div:last-child { display: grid; gap: 6px; }
.branch-logo-button, .branch-logo-editor button { border: 1px solid var(--input-border); background: var(--input-bg); border-radius: 7px; padding: 6px 9px; font-size: 8px; text-align: center; cursor: pointer; }
.branch-form-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.branch-form-grid .field { margin: 0; }
.branch-address { grid-column: span 2; }
.branch-notes { grid-column: span 2; }
.branch-form-actions { padding: 10px 14px; display: flex; gap: 8px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }

/* قاعدة القراءة المعتمدة: كل محتوى النظام وأيقوناته أبيض صريح */
.brand-copy small,
.brand-message p,
.brand-foot,
.login-card > p,
.field label,
.remember-check,
.private-note,
.demo-credentials,
.nav-label,
.nav-item,
.nav-item.active,
.sidebar-user small,
.page-subtitle,
.page-heading p,
.metric-head,
.metric-note,
.metric-note.good,
.panel-head h3,
.panel-head small,
.bar-col span,
.activity-row strong,
.activity-row small,
.activity-time,
.data-table th,
.employee-cell strong,
.employee-cell small,
.empty-state,
.employee-hero p,
.role-option,
.role-option.active,
.role-option small,
.registry-banner strong,
.registry-banner small,
.registry-banner .count,
.permission-name strong,
.permission-name small,
.permission-note,
.unassigned,
.new-tag,
.status.active,
.status.vacation,
.status.stopped {
  color: #ffffff !important;
}

.nav-icon,
.metric-icon,
.field-icon,
.icon-btn,
.activity-dot,
.role-icon,
.logout,
.password-toggle {
  color: #ffffff !important;
}

.btn,
.btn-gold,
.login-submit {
  color: #ffffff;
}

.input-wrap input::placeholder,
.field input::placeholder,
.search input::placeholder,
.add-screen input::placeholder {
  color: #ffffff;
  opacity: .82;
}

/* أي عنصر نصي أو أيقونة يُضاف لاحقًا يرث الأبيض تلقائيًا */
#app :where(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, label, th, td, button, input, select, textarea, option) {
  color: #ffffff !important;
}

/* الإطار المعتمد: أسود بلاك وحدود ذهبية، والمحتوى الداخلي رصاصي */
.shell,
.content {
  background: var(--frame-black);
}

.sidebar {
  background: linear-gradient(180deg, #050505, #0c0b08);
  border-left: 2px solid var(--frame-gold);
  box-shadow: -8px 0 28px rgba(0,0,0,.34);
}

.sidebar .brand-mark,
.sidebar-user {
  border-color: var(--frame-gold-soft);
}

.topbar {
  background: rgba(4,4,4,.97);
  border-bottom: 2px solid var(--frame-gold);
  box-shadow: 0 7px 22px rgba(0,0,0,.28);
}

.panel-head,
.master-table-card .panel-head,
.data-table th,
.branch-editor-head,
.drawer-head,
.drawer-footer {
  background: #070707;
  border-color: var(--frame-gold-soft);
}

.panel,
.table-card,
.metric,
.master-card,
.master-summary,
.master-welcome,
.branch-editor,
.registry-banner,
.login-profile {
  border-color: var(--frame-gold-soft);
}

.panel,
.table-card,
.master-card,
.master-welcome,
.branch-editor,
.drawer {
  box-shadow: 0 12px 30px rgba(0,0,0,.2), 0 0 0 1px rgba(226,185,87,.06);
}

.input-wrap input,
.field input,
.field select,
.field textarea,
.search input,
.toolbar select,
.add-screen input {
  border-color: rgba(226,185,87,.72);
}

.nav-item {
  border-color: rgba(226,185,87,.2);
}

.nav-item.active,
.master-card.active {
  border-color: var(--frame-gold);
  box-shadow: 0 0 0 2px rgba(226,185,87,.12);
}

.master-card-icon,
.role-icon,
.activity-dot,
.icon-btn,
.branch-logo-button,
.branch-logo-editor button {
  background: #5a5c64;
  border-color: rgba(226,185,87,.55);
}

/* قاعدة الإدخال: أي خانة كتابة أو اختيار بيضاء والبيانات بالأسود */
#app input:not([type="checkbox"]):not([type="file"]),
#app select,
#app textarea {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: var(--frame-gold) !important;
  caret-color: #111111;
}

#app input:not([type="checkbox"]):not([type="file"])::placeholder,
#app textarea::placeholder {
  color: #5d5d5d !important;
  opacity: 1;
}

#app select option {
  background: #ffffff;
  color: #111111 !important;
}

.input-wrap .field-icon,
.search > span,
.input-wrap .password-toggle {
  color: #111111 !important;
  z-index: 2;
}

.secure-modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: .22s; }
.secure-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.secure-modal { width: min(430px, 100%); padding: 26px; border: 2px solid var(--frame-gold); border-radius: 17px; background: var(--frame-black); box-shadow: 0 24px 70px rgba(0,0,0,.52); transform: translateY(12px) scale(.97); transition: .22s; }
.secure-modal-backdrop.open .secure-modal { transform: translateY(0) scale(1); }
.secure-modal-icon { width: 48px; height: 48px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 13px; background: var(--red); color: #fff; font-size: 24px; font-weight: 800; }
.secure-modal-icon.archive-mode { background: #8f6b22; border: 1px solid #d5ae54; }
.secure-modal h3 { margin: 0 0 6px; font-size: 20px; }
.secure-modal > p { margin: 0 0 20px; font-size: 11px; line-height: 1.8; }
.secure-modal .field { margin-bottom: 8px; }
.secure-modal-error { min-height: 25px; padding-top: 4px; color: #fff; font-size: 10px; font-weight: 700; }
.secure-modal-actions { display: flex; gap: 9px; margin-top: 7px; }
.password-change-backdrop { position: fixed; inset: 0; z-index: 420; display: none; place-items: center; padding: 20px; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); }
.password-change-backdrop.open { display: grid; }
.password-change-modal { max-height: calc(100vh - 32px); overflow: auto; }
.password-change-modal .secure-modal-icon { background: #8f6b22; border: 1px solid var(--frame-gold); }
.password-change-modal form { display: grid; gap: 5px; }
.password-change-modal .btn-save { width: 100%; justify-content: center; margin-top: 4px; }
.account-password-button { background: var(--surface-raised); color: #fff; border: 1px solid var(--frame-gold); border-radius: 10px; padding: 10px 14px; cursor: pointer; white-space: nowrap; font: inherit; }
.account-password-button:hover { background: #7a621f; }
.security-settings-panel { max-width: 640px; padding: 24px; }
.security-settings-panel .field small, .password-change-modal .field small { color: var(--muted); font-size: 12px; }
.security-settings-panel .btn-cancel { margin-top: 18px; }
.session-stop { min-width: 86px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid #ff8d8d; border-radius: 10px; background: linear-gradient(135deg, #8f2020, #d34646); color: #fff; font-family: inherit; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .8px; cursor: pointer; box-shadow: 0 8px 20px rgba(180,38,38,.24); }
.session-stop span { color: #fff; font-size: 10px; }
.session-stop:hover { background: linear-gradient(135deg, #aa2929, #ed5656); transform: translateY(-1px); }

/* كل اختيار تم تغييره يظل أخضر وواضحًا حتى الضغط على حفظ. */
#app select.pending-choice,
#app input.pending-choice:not([type="checkbox"]):not([type="radio"]),
#app textarea.pending-choice { border: 2px solid #80eab0 !important; background: #168349 !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(94,218,142,.16) !important; }
#app .pending-choice-container,
#app .permission-action-cell.pending-permission { border-color: #80eab0 !important; background: rgba(22,131,73,.48) !important; box-shadow: inset 0 0 0 1px rgba(128,234,176,.35), 0 0 0 2px rgba(94,218,142,.10); }
#app .permission-action-cell.pending-permission > span,
#app .permission-action-cell.pending-permission .permission-state-label { color: #fff !important; }
#app .permission-action-cell.pending-permission .slider { outline: 2px solid #80eab0; outline-offset: 2px; }

.nav-item.sub-nav { width: calc(100% - 16px); margin-right: 16px; border-right: 2px solid var(--frame-gold-soft); }
.archive-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.archive-summary > div { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--frame-gold-soft); border-radius: 13px; background: var(--surface-card); }
.archive-summary span { font-size: 11px; font-weight: 800; }
.archive-summary strong { font-size: 24px; color: var(--gold-bright) !important; }
.archive-toolbar { align-items: center; justify-content: space-between; padding: 14px 17px; border: 1px solid var(--frame-gold-soft); border-radius: 12px; background: var(--surface-raised); }
.archive-toolbar strong, .archive-toolbar small { display: block; }
.archive-toolbar small { margin-top: 3px; font-size: 9px; opacity: .82; }
.archive-table { min-width: 780px; }
.archive-record { display: flex; align-items: center; gap: 10px; }
.archive-record > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 9px; background: #5a5c64; }
.archive-record strong, .archive-record small, .archive-type { display: block; }
.archive-record small, .archive-type { margin-top: 3px; font-size: 9px; opacity: .82; }
.archive-empty { display: grid; justify-items: center; gap: 6px; }
.archive-empty > span { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 14px; background: #5a5c64; font-size: 27px; }
.archive-empty strong { margin-top: 5px; font-size: 14px; }
.archive-empty small { font-size: 10px; opacity: .82; }

@media (max-width: 1000px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .permissions-grid { grid-template-columns: 1fr; }
  .master-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-editor { grid-template-columns: 1fr 1fr; }
  .branch-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .season-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-login-rule { grid-column: 1 / -1; }
  .branch-editor-tools, .season-editor-tools { flex-wrap: wrap; justify-content: flex-end; }
  .role-list { display: flex; overflow-x: auto; }
  .role-option { min-width: 180px; }
}

@media (max-width: 1250px) {
  .permissions-grid { grid-template-columns: 1fr; }
  .permission-profile-panel, .permission-entity-panel { position: static; }
  .individual-permission-layout { grid-template-columns: 1fr; }
  .permission-entity-panel { position: static; max-height: none; }
  .permission-entity-list { max-height: 280px; }
  .permission-actions-grid { grid-template-columns: repeat(3, minmax(125px, 1fr)); }
  .permissions-grid .role-list { display: flex; overflow-x: auto; }
  .permissions-grid .role-option { min-width: 180px; }
  .permissions-grid > .table-card { overflow: hidden; }
  .permissions-table, .permissions-table tbody { display: block; width: 100%; min-width: 0; }
  .permissions-table thead { display: none; }
  .permissions-table tbody { padding: 12px; }
  .permissions-table tr { margin-bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--frame-gold-soft); border-radius: 12px; overflow: hidden; }
  .permissions-table tr:last-child { margin-bottom: 0; }
  .permissions-table td { width: auto !important; min-width: 0; padding: 11px 8px; display: grid !important; align-content: start; justify-items: center; border-top: 0; border-left: 1px solid rgba(226,185,87,.22); }
  .permissions-table td:first-child { grid-column: 1 / -1; width: auto !important; justify-items: stretch; border-left: 0; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
  .permissions-table td:not(:first-child)::before { content: attr(data-permission-label); min-height: 38px; margin-bottom: 8px; display: grid; place-items: center; color: #fff; font-size: 12px; line-height: 1.35; font-weight: 900; text-align: center; }
  .employee-permissions-table { min-width: 0; }
  .employee-permission-control { min-width: 0; width: 100%; }
  .employee-permission-control select { width: min(138px, 100%); }
}

@media (max-width: 800px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-side { min-height: 100vh; }
  .shell { grid-template-columns: 1fr; }
  .content { grid-column: 1; }
  .sidebar { transform: translateX(110%); transition: .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: block; }
  .topbar { padding: 0 18px; }
  .page { padding: 22px 18px 40px; }
  .data-table th:nth-child(4), .data-table td:nth-child(4), .data-table th:nth-child(5), .data-table td:nth-child(5) { display: none; }
  .branches-table th:nth-child(5), .branches-table td:nth-child(5), .departments-table th:nth-child(5), .departments-table td:nth-child(5), .product-groups-table th:nth-child(5), .product-groups-table td:nth-child(5), .suppliers-table th:nth-child(7), .suppliers-table td:nth-child(7), .checklists-table th:nth-child(4), .checklists-table td:nth-child(4), .checklists-table th:nth-child(5), .checklists-table td:nth-child(5) { display: table-cell; }
  .archive-table th:nth-child(5), .archive-table td:nth-child(5) { display: table-cell; }
  .archive-table th:nth-child(3), .archive-table td:nth-child(3), .archive-table th:nth-child(4), .archive-table td:nth-child(4) { display: none; }
  .page-heading { align-items: flex-start; }
  .permission-audience-tabs { grid-template-columns: 1fr; }
  .permission-actions-grid { grid-template-columns: repeat(2, minmax(118px, 1fr)); }
  .selected-individual-permission { align-items: flex-start; flex-wrap: wrap; }
  .selected-individual-permission > b { margin-right: 57px; }
  .permission-mode-tabs { width: 100%; }
  .permission-mode-tabs button { min-width: 0; flex: 1; }
  .employee-permission-picker { align-items: stretch; flex-direction: column; }
  .employee-permission-picker select { width: 100%; }
  .toolbar { flex-wrap: wrap; }
  .toolbar select { width: 100%; }
  .branch-filter-bar { grid-template-columns: 1fr 1fr; }
  .branch-filter-bar .search { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .permissions-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .metric-grid { grid-template-columns: 1fr; }
  .archive-summary { grid-template-columns: 1fr; }
  .page-heading { flex-direction: column; }
  .page-heading .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: 1; }
  .data-table th:nth-child(3), .data-table td:nth-child(3) { display: none; }
  .checklists-table th:nth-child(3), .checklists-table td:nth-child(3) { display: table-cell; }
  .data-table th, .data-table td { padding: 11px 9px; }
  .add-screen { flex-direction: column; align-items: stretch; }
  .add-screen select { width: 100%; }
  .permission-actions-grid { grid-template-columns: 1fr 1fr; }
  .permission-profile-title { align-items: flex-start; flex-direction: column; }
  .permission-profile-title > b { align-self: flex-start; }
  .selected-individual-permission > b { width: 100%; margin-right: 0; text-align: center; white-space: normal; }
  .branch-filter-bar { grid-template-columns: 1fr; }
  .branch-filter-bar .search { grid-column: auto; }
  .add-screen input { width: 100%; }
  .permissions-table th:nth-child(3), .permissions-table td:nth-child(3) { display: none; }
  .master-summary { grid-template-columns: 1fr 1fr; }
  .master-summary p { grid-column: 1 / -1; border-right: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
  .master-categories { grid-template-columns: 1fr; }
  .master-detail-heading { align-items: stretch; flex-direction: column; }
  .master-detail-identity { order: -1; }
  .btn-back-master { width: 100%; justify-content: center; }
  .master-editor { grid-template-columns: 1fr; }
  .drawer-head, .branch-editor-head, .season-editor-head, .supplier-editor-head { align-items: flex-start; flex-direction: column; }
  .drawer-head-tools, .branch-editor-tools, .season-editor-tools { width: 100%; justify-content: space-between; }
  .branch-form-grid { grid-template-columns: 1fr; }
  .branch-address, .branch-notes { grid-column: auto; }
  .season-form-grid { grid-template-columns: 1fr; }
  .season-name { grid-column: auto; }
  .supplier-form-grid, .supplier-documents { grid-template-columns: 1fr; }
  .portal-access-grid { grid-template-columns: 1fr; }
  .first-login-rule { grid-column: auto; }
  .portal-access-head, .portal-access-foot { align-items: stretch; flex-direction: column; }
  .btn-send-credentials { width: 100%; white-space: normal; }
  .supplier-name, .supplier-address { grid-column: auto; }
  .supplier-document-card { align-items: flex-start; }
  .master-table-card .panel-head { align-items: flex-start; gap: 12px; }
  .master-panel-actions { flex-direction: column; align-items: stretch; }
  .compact-master-editor .auto-code-badge { width: 100%; }
}

/* قاعدة الخط المقروء: تكبير وتقوية النصوص في جميع شاشات النظام */
#app { font-size: 16px; }
#app small { font-size: 12px; line-height: 1.6; }
.nav-item { font-size: 15px; font-weight: 800; }
.nav-label, .page-subtitle, .sidebar-user small { font-size: 13px; }
.sidebar-user strong { font-size: 15px; }
.page-heading p, .field label, .remember-check { font-size: 14px; }
.btn { font-size: 14px; }
.small-action { font-size: 12px; }
.metric-head { font-size: 15px; }
.metric-note, .panel-head small, .activity-row small, .activity-time { font-size: 12px; }
.panel-head h3 { font-size: 17px; }
.activity-row strong { font-size: 14px; }
.data-table th { font-size: 13px; }
.data-table td { font-size: 14px; }
.employee-cell strong { font-size: 14px; }
.employee-cell small, .status { font-size: 12px; }
.photo-actions button, .photo-actions label, .form-section h5 { font-size: 13px; }
.role-option { font-size: 14px; }
.role-option small, .registry-banner small, .permission-name small, .unassigned { font-size: 12px; }
.password-toggle, .private-note, .brand-foot, .demo-credentials { font-size: 13px; }
.new-tag { font-size: 11px; }
.registry-banner strong, .registry-banner .count, .permission-note, .toast { font-size: 13px; }
.master-summary span, .master-summary p { font-size: 13px; }
.master-card { min-height: 132px; padding: 17px; }
.master-card strong { font-size: 16px; font-weight: 900; }
.master-card small { font-size: 12px; line-height: 1.7; }
.master-card b, .master-editor > div:first-child small, .master-count, .branch-results-count { font-size: 12px; }
.master-welcome p, .branch-name-cell small, .branch-editor-head p, .branch-form-kicker, .branch-logo-button, .branch-logo-editor button { font-size: 13px; }
.secure-modal > p, .secure-modal-error, .archive-toolbar small, .archive-record small, .archive-type, .archive-empty small { font-size: 13px; }
#app input:not([type="checkbox"]):not([type="file"]), #app select, #app textarea { font-size: 14px; }
#app input:not([type="checkbox"]):not([type="file"]),
#app select,
#app textarea {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45;
}

/* صور حية وملونة لبطاقات البيانات الأساسية بحجم مضغوط */
.master-card { min-height: 126px; align-items: center; gap: 12px; overflow: hidden; }
.master-card-copy { min-width: 0; position: relative; z-index: 1; }
.master-card-icon.master-icon-art {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid var(--frame-gold);
  border-radius: 15px;
  background-color: #191a1d;
  background-image: url("./assets/master-data-icons-v1.png");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  box-shadow: 0 8px 18px rgba(0,0,0,.32), 0 0 0 2px rgba(226,185,87,.08);
  filter: saturate(1.08) contrast(1.03);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.master-card:hover .master-icon-art,
.master-card.active .master-icon-art {
  transform: scale(1.045);
  filter: saturate(1.18) contrast(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.4), 0 0 0 2px rgba(226,185,87,.18);
}
.master-icon-branches { background-position: 0% 0%; }
.master-icon-safes { background-position: 33.333% 0%; }
.master-icon-banks { background-position: 66.667% 0%; }
.master-icon-departments { background-position: 100% 0%; }
.master-icon-product_groups { background-position: 0% 100%; }
.master-icon-jobs { background-position: 33.333% 100%; }
.master-icon-payment_methods { background-position: 66.667% 100%; }
.master-icon-suppliers { background-position: 100% 100%; }
.master-card-icon.master-icon-seasons { padding: 6px; background-image: none; background-color: #191a1d; }
.master-icon-seasons img { width: 100%; height: 100%; display: block; object-fit: contain; }
.master-card-icon.checklist-icon-art { position: relative; width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--frame-gold); border-radius: 15px; background: linear-gradient(145deg, #147248, #35b87c); box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 0 0 2px rgba(255,255,255,.12); }
.checklist-icon-art i { position: relative; z-index: 2; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: #147248 !important; font-size: 20px; font-style: normal; font-weight: 900; }
.checklist-icon-art b { position: absolute; left: 4px; bottom: -2px; color: rgba(255,255,255,.35) !important; font-size: 24px; transform: rotate(-8deg); }

/* نماذج الـChecklists التنفيذية والتقييمية */
.checklist-filter-bar select { width: 245px; }
.checklist-purpose-grid { margin: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checklist-purpose-grid article { min-height: 88px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(226,185,87,.45); border-radius: 12px; background: #4a4c54; }
.checklist-purpose-grid article > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 10px; background: #10100e; color: var(--gold-bright) !important; font-size: 19px; font-weight: 900; }
.checklist-purpose-grid strong, .checklist-purpose-grid p { display: block; margin: 0; }
.checklist-purpose-grid strong { font-size: 15px; }
.checklist-purpose-grid p { margin-top: 3px; font-size: 12px; line-height: 1.7; opacity: .88; }
.checklist-purpose-grid .checklist-branch-rule { grid-column: 1 / -1; min-height: 72px; background: linear-gradient(90deg, #4a4c54, #3f403f); }
.checklists-table { min-width: 1180px; }
.checklist-name-cell { min-width: 190px; display: flex; align-items: center; gap: 10px; }
.checklist-name-cell > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 9px; background: #10100e; color: var(--gold-bright) !important; font-size: 18px; }
.checklist-name-cell strong, .checklist-name-cell small, .checklists-table td strong, .checklists-table td small { display: block; }
.checklist-name-cell small, .checklists-table td small { margin-top: 3px; font-size: 11px; opacity: .84; }
.checklist-type { display: inline-flex; padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 900; }
.checklist-type.executive { border-color: #5fd394; background: rgba(36,151,92,.48); }
.checklist-type.evaluation { border-color: var(--frame-gold); background: rgba(143,104,30,.58); }
.checklist-branch-scope { display: block; min-width: 150px; max-width: 220px; font-size: 12px; line-height: 1.6; }
.checklist-editor { margin-bottom: 18px; border: 1px solid var(--frame-gold); border-radius: 16px; background: #393a41; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.checklist-editor-head { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--frame-gold-soft); background: #070707; }
.checklist-editor-head > div > span, .checklist-editor-head h3, .checklist-editor-head p { display: block; margin: 0; }
.checklist-editor-head > div > span { color: var(--gold-bright) !important; font-size: 12px; font-weight: 900; }
.checklist-editor-head h3 { margin-top: 2px; font-size: 20px; }
.checklist-editor-head p { margin-top: 3px; font-size: 13px; opacity: .86; }
.checklist-form-grid { padding: 16px 18px 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.checklist-form-grid .field { margin: 0; }
.checklist-form-grid .checklist-name { grid-column: span 2; }
.checklist-branch-picker, .checklist-rating-scale, .checklist-items-editor { margin: 12px 18px; padding: 14px; border: 1px solid rgba(226,185,87,.45); border-radius: 13px; background: #484a52; }
.checklist-branch-picker > div:first-child strong, .checklist-branch-picker > div:first-child small, .checklist-rating-scale > div:first-child strong, .checklist-rating-scale > div:first-child small, .checklist-items-head strong, .checklist-items-head small { display: block; }
.checklist-branch-picker > div:first-child strong, .checklist-rating-scale > div:first-child strong, .checklist-items-head strong { font-size: 15px; }
.checklist-branch-picker > div:first-child small, .checklist-rating-scale > div:first-child small, .checklist-items-head small { margin-top: 2px; font-size: 12px; opacity: .84; }
.checklist-branch-options { margin-top: 11px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.checklist-branch-options label { min-height: 59px; padding: 9px 10px; display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: #55575f; cursor: pointer; }
.checklist-branch-options input { grid-row: span 2; width: 18px; height: 18px; accent-color: var(--green); }
.checklist-branch-options span { font-size: 13px; font-weight: 900; }
.checklist-branch-options small { font-size: 11px; opacity: .82; }
.checklist-rating-scale > div:last-child { margin-top: 11px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.checklist-rating-scale > div:last-child > span { min-height: 62px; padding: 8px; display: grid; place-items: center; gap: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: #55575f; text-align: center; }
.checklist-rating-scale b { font-size: 12px; }
.checklist-rating-scale strong { color: var(--gold-bright) !important; font-size: 16px; }
.checklist-rating-scale .rating-excellent { border-color: #5fd394; background: rgba(36,151,92,.42); }
.checklist-rating-scale .rating-not_done { border-color: #eb7777; background: rgba(212,78,78,.42); }
.checklist-items-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.checklist-items-head > span { padding: 5px 9px; border: 1px solid var(--frame-gold); border-radius: 999px; background: #15140f; color: var(--gold-bright) !important; font-size: 12px; font-weight: 900; }
#checklist-items-list { display: grid; gap: 8px; }
.checklist-item-row { padding: 10px; display: grid; grid-template-columns: 34px minmax(220px, 1fr) 90px auto auto auto; align-items: end; gap: 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: #55575f; }
.checklist-item-row .field { margin: 0; }
.checklist-item-number { width: 32px; height: 38px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 9px; background: #10100e; color: var(--gold-bright) !important; font-weight: 900; }
.checklist-item-option { min-height: 42px; padding: 7px 9px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: #44464e; white-space: nowrap; cursor: pointer; }
.checklist-item-option input { width: 17px; height: 17px; accent-color: var(--green); }
.checklist-item-option span { font-size: 12px; font-weight: 800; }
.checklist-remove-item { min-height: 42px; }
.checklist-add-item { margin-top: 10px; }
.checklist-runtime-rule { margin: 12px 18px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--frame-gold); border-radius: 12px; background: linear-gradient(90deg, #15140f, #49462f); }
.checklist-runtime-rule > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 9px; background: #070707; color: var(--gold-bright) !important; }
.checklist-runtime-rule strong, .checklist-runtime-rule p { display: block; margin: 0; }
.checklist-runtime-rule strong { font-size: 14px; }
.checklist-runtime-rule p { margin-top: 2px; font-size: 12px; line-height: 1.7; }
.checklist-form-actions { padding: 14px 18px; display: flex; gap: 9px; border-top: 1px solid var(--frame-gold-soft); background: #070707; }

@media (max-width: 1100px) {
  .checklist-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist-item-row { grid-template-columns: 34px minmax(180px, 1fr) 86px; }
  .checklist-item-option, .checklist-remove-item { grid-column: auto; }
}

@media (max-width: 700px) {
  .checklist-purpose-grid, .checklist-form-grid, .checklist-branch-options, .checklist-rating-scale > div:last-child { grid-template-columns: 1fr; }
  .checklist-purpose-grid .checklist-branch-rule, .checklist-form-grid .checklist-name { grid-column: auto; }
  .checklist-editor-head { align-items: flex-start; flex-direction: column; }
  .checklist-item-row { grid-template-columns: 34px 1fr; align-items: stretch; }
  .checklist-item-row .field, .checklist-item-option, .checklist-remove-item { grid-column: 1 / -1; }
  .checklist-item-row .checklist-weight { grid-column: 2; grid-row: 2; }
  .checklist-form-actions { flex-direction: column; }
}

@media (max-width: 560px) {
  .master-card-icon.master-icon-art, .master-card-icon.checklist-icon-art { width: 56px; height: 56px; flex-basis: 56px; }
}

/* حالة الاتصال والمساعد الصوتي الجانبي */
.connection-status { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--frame-gold-soft); border-radius: 999px; background: #24252a; font-size: 12px; font-weight: 800; white-space: nowrap; }
.connection-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(36,151,92,.15); }
.connection-status.offline i { background: #df9f2d; box-shadow: 0 0 0 4px rgba(223,159,45,.16); }
.voice-fab { position: fixed; left: 22px; bottom: 22px; z-index: 230; min-width: 72px; height: 72px; display: grid; place-items: center; gap: 0; padding: 8px; border: 2px solid var(--frame-gold); border-radius: 22px; background: linear-gradient(145deg, #171717, #050505); box-shadow: 0 15px 38px rgba(0,0,0,.48), 0 0 0 5px rgba(226,185,87,.09); transition: transform .2s ease, box-shadow .2s ease; }
.voice-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,.55), 0 0 0 7px rgba(226,185,87,.13); }
.voice-fab svg { width: 27px; height: 27px; fill: none; stroke: var(--frame-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-fab > span { color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
.voice-panel { position: fixed; left: 22px; bottom: 108px; z-index: 225; width: min(380px, calc(100vw - 44px)); padding: 18px; border: 2px solid var(--frame-gold); border-radius: 18px; background: linear-gradient(155deg, #34363d, #1f2025); box-shadow: 0 22px 60px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: bottom left; transition: .2s ease; }
.voice-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.voice-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--frame-gold-soft); }
.voice-panel-head strong, .voice-panel-head small { display: block; }
.voice-panel-head strong { font-size: 18px; }
.voice-panel-head small { margin-top: 2px; font-size: 12px; }
.voice-panel-head > button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: #565860; font-size: 22px; line-height: 1; }
.voice-listening { min-height: 78px; display: flex; align-items: center; gap: 14px; }
.voice-listening > strong { font-size: 14px; line-height: 1.7; }
.voice-wave { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--frame-gold-soft); border-radius: 50%; background: #151515; }
.voice-wave i { width: 3px; height: 13px; border-radius: 4px; background: var(--frame-gold); }
.voice-wave i:nth-child(2), .voice-wave i:nth-child(4) { height: 21px; }
.voice-listening.active .voice-wave { box-shadow: 0 0 0 7px rgba(226,185,87,.1); }
.voice-listening.active .voice-wave i { animation: voice-wave .7s ease-in-out infinite alternate; }
.voice-listening.active .voice-wave i:nth-child(2) { animation-delay: .15s; }
.voice-listening.active .voice-wave i:nth-child(3) { animation-delay: .3s; }
.voice-listening.active .voice-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes voice-wave { from { transform: scaleY(.45); } to { transform: scaleY(1.2); } }
.voice-command-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.voice-command-form input { width: 100%; min-width: 0; height: 44px; padding: 0 13px; border: 1px solid var(--frame-gold); border-radius: 10px; }
.voice-command-form button { min-width: 72px; border: 0; border-radius: 10px; background: var(--green); font-size: 13px; font-weight: 900; }
.voice-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.voice-examples > span { font-size: 12px; font-weight: 800; }
.voice-examples button { border: 1px solid rgba(226,185,87,.35); border-radius: 999px; background: #55575f; padding: 5px 9px; font-size: 11px; }
.toast { left: 108px; }

@media (max-width: 700px) {
  .connection-status { padding: 0 9px; }
  .connection-status span { display: none; }
  .voice-fab { left: 16px; bottom: 16px; width: 66px; min-width: 66px; height: 66px; border-radius: 19px; }
  .voice-panel { left: 16px; bottom: 94px; width: calc(100vw - 32px); }
  .toast { left: 16px; right: 16px; bottom: 94px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-fab, .voice-panel, .voice-wave i { animation: none !important; transition: none !important; }
}

/* اعتماد أجهزة التشغيل وإدارتها */
.login-stack { position: relative; width: min(430px, 100%); }
.login-stack .login-card { width: 100%; }
.device-request-link { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(226,185,87,.55); border-radius: 10px; background: #3d3f46; font-size: 13px; font-weight: 800; }
.device-request-card { position: absolute; inset: 0; z-index: 5; max-height: calc(100vh - 60px); overflow-y: auto; padding: 20px; border: 2px solid var(--frame-gold); border-radius: 17px; background: linear-gradient(155deg, #3d3f47, #292a30); box-shadow: 0 24px 70px rgba(0,0,0,.62); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transition: .2s ease; }
.device-request-card.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.device-request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--frame-gold-soft); }
.device-request-head strong, .device-request-head small { display: block; }
.device-request-head strong { font-size: 18px; }
.device-request-head small { margin-top: 4px; font-size: 12px; line-height: 1.7; }
.device-request-head > button { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: #5a5c64; font-size: 22px; }
.device-request-card .field { margin-bottom: 13px; }
.device-request-result { display: grid; gap: 3px; min-height: 24px; margin-top: 12px; padding: 0 2px; }
.device-request-result strong { color: #76dda6 !important; font-size: 13px; }
.device-request-result small { font-size: 12px; }
.manager-device-approval { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--frame-gold-soft); }
.manager-device-approval-head { display: grid; gap: 4px; margin-bottom: 13px; }
.manager-device-approval-head strong { color: var(--gold-light); font-size: 15px; }
.manager-device-approval-head small { font-size: 12px; line-height: 1.7; }
.manager-remember { margin: 3px 0 13px; }
.manager-approval-button { width: 100%; border: 1px solid #e6c75f; color: #16140c; background: linear-gradient(135deg, #d6ae2c, #f2dc68); font-weight: 900; }
.device-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 15px; }
.device-summary article { position: relative; min-height: 112px; padding: 18px; overflow: hidden; border: 1px solid var(--frame-gold-soft); border-radius: 15px; background: linear-gradient(145deg, #464850, #34353b); }
.device-summary article > span { display: block; padding-left: 25px; font-size: 14px; font-weight: 800; }
.device-summary article > strong { display: block; margin-top: 10px; font-size: 29px; }
.device-summary article > i { position: absolute; left: 18px; top: 20px; width: 11px; height: 11px; border-radius: 50%; }
.device-summary i.pending { background: #e2a52e; box-shadow: 0 0 0 5px rgba(226,165,46,.13); }
.device-summary i.active { background: #42bd7d; box-shadow: 0 0 0 5px rgba(66,189,125,.13); }
.device-summary i.stopped { background: #df5b5b; box-shadow: 0 0 0 5px rgba(223,91,91,.13); }
.device-policy-note { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid rgba(226,185,87,.45); border-radius: 12px; background: rgba(226,185,87,.09); }
.device-policy-note strong { flex: 0 0 auto; font-size: 13px; color: var(--gold-bright) !important; }
.device-policy-note span { font-size: 12px; line-height: 1.7; }
.device-requests-card { margin-bottom: 18px; }
.device-empty { display: grid; place-items: center; gap: 5px; padding: 30px; }
.device-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 13px; background: #55575f; font-size: 22px; }
.device-empty strong { font-size: 14px; }
.device-empty small { font-size: 12px; }
.device-name-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.device-name-cell strong, .device-name-cell small { display: block; }
.device-name-cell strong { font-size: 13px; }
.device-name-cell small { margin-top: 2px; font-size: 11px; }
.device-computer-icon { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border: 1px solid var(--frame-gold-soft); border-radius: 10px; background: #5a5c64; color: var(--gold-bright) !important; font-size: 19px; }
.device-toolbar { align-items: center; }
.device-results-count { flex: 0 0 auto; min-width: 92px; text-align: center; font-size: 12px; font-weight: 800; }
.device-manual-refresh { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.device-manual-refresh > span { max-width: 310px; font-size: 11px; line-height: 1.55; opacity: .84; }
.device-manual-refresh .btn { min-width: 140px; }
.device-manual-refresh .btn.has-updates { border-color: #80eab0; background: #168349; box-shadow: 0 0 0 3px rgba(94,218,142,.13); }
.action-approve, .action-device-restore { background: var(--green); border-color: #5fd394; }
.action-reject, .action-device-off { background: var(--red); border-color: #eb7777; }
.status.out_of_service { background: rgba(212,78,78,.15); color: #fff; }
.status.out_of_service::before { background: var(--red); }
.device-search-empty { padding: 30px; }
.icon-btn .approval-count { position: absolute; right: -6px; top: -7px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #040404; border-radius: 999px; background: var(--red); font-size: 10px; }

.checklist-assignment-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.checklist-assignment-items { display: grid; gap: 10px; }
.checklist-assignment-item { min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 290px); align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgba(226,185,87,.24); border-radius: 12px; background: #202126; cursor: pointer; }
.checklist-assignment-item strong, .checklist-assignment-item small { display: block; }
.checklist-assignment-item small { margin-top: 4px; opacity: .72; }
.checklist-assignment-item.selected { border-color: #58d18a; background: rgba(43,164,98,.2); }
.employee-settings-panel { margin-top: 18px; }
.employee-settings-grid, .target-level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.employee-settings-grid .btn { align-self: end; }
.target-links-box, .branch-target-section { margin-top: 16px; padding: 16px; border: 1px solid rgba(226,185,87,.25); border-radius: 14px; background: rgba(255,255,255,.025); }
.target-links-box > strong { display: block; margin-bottom: 12px; color: var(--gold-bright); }
.scope-reference-field { position: relative; padding-bottom: 23px; }
.scope-reference-field::after { content: "حقل مرجعي للسجل فقط؛ النطاق الفعلي يشمل الجميع"; position: absolute; right: 0; bottom: 1px; font-size: 10px; color: var(--gold-bright); opacity: .92; }
.employee-documents-box { margin: 0 20px 24px; padding: 17px; border: 1px solid var(--frame-gold-soft); border-radius: 14px; background: #41434a; }
.employee-documents-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.employee-documents-head h5, .employee-documents-head p { margin: 0; }
.employee-documents-head h5 { color: var(--gold-bright); font-size: 15px; }
.employee-documents-head p { margin-top: 4px; font-size: 12px; opacity: .82; }
.employee-documents-head > b { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--frame-gold-soft); border-radius: 999px; background: #565861; font-size: 11px; }
.employee-document-uploader { padding: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #50525a; }
.employee-document-uploader .field { margin: 0; }
.employee-document-drop { grid-column: 1 / -1; min-height: 130px; padding: 18px; display: grid; place-items: center; align-content: center; gap: 6px; border: 2px dashed var(--frame-gold); border-radius: 12px; background: #202126; text-align: center; cursor: pointer; transition: .2s; }
.employee-document-drop.dragging, .employee-document-drop:focus-visible { outline: none; border-color: #79e6aa; background: #173827; box-shadow: 0 0 0 3px rgba(94,218,142,.15); }
.employee-document-drop strong { font-size: 17px; }
.employee-document-drop small { font-size: 12px; opacity: .82; }
.employee-document-drop > div { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.employee-document-drop label { min-height: 37px; padding: 7px 12px; display: inline-flex; align-items: center; border: 1px solid var(--frame-gold); border-radius: 9px; background: #ba872c; font-size: 12px; font-weight: 900; cursor: pointer; }
.employee-document-status { grid-column: 1 / -1; min-height: 19px; font-size: 12px; color: var(--gold-bright); }
.employee-document-list { margin-top: 13px; display: grid; gap: 9px; }
.employee-document-card { min-width: 0; padding: 11px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: #50525a; }
.employee-document-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 10px; background: #161719; color: var(--gold-bright); font-size: 13px; font-weight: 900; }
.employee-document-copy { min-width: 0; }
.employee-document-copy strong, .employee-document-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-document-copy strong { font-size: 14px; }
.employee-document-copy small { margin-top: 4px; font-size: 11px; opacity: .82; }
.employee-document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.employee-document-actions button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--frame-gold-soft); border-radius: 8px; background: #696b73; font-size: 11px; font-weight: 900; cursor: pointer; }
.employee-document-actions button.danger { border-color: #ed8080; background: #923f3f; }
.employee-documents-empty { min-height: 82px; padding: 18px; display: grid; place-items: center; border: 1px dashed var(--frame-gold-soft); border-radius: 11px; background: #50525a; text-align: center; font-size: 13px; }
.employee-documents-empty.error { border-color: #ed8080; background: #6a3737; }
.target-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.target-link-option { display: grid; grid-template-columns: auto minmax(0,1fr) 76px auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #24262b; }
.target-link-option strong, .target-link-option small { display: block; }
.target-link-option small { margin-top: 2px; font-size: 10px; opacity: .7; }
.target-share { min-width: 0 !important; padding: 8px !important; }
.payroll-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.payroll-preview > div { padding: 12px; border-radius: 11px; background: #17181c; border: 1px solid rgba(226,185,87,.2); }
.payroll-preview span, .payroll-preview strong { display: block; }
.payroll-preview span { font-size: 11px; opacity: .75; }
.payroll-preview strong { margin-top: 6px; color: var(--gold-bright); }
.account-status-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.branch-department-targets { display: grid; gap: 10px; }
.branch-department-target { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: #202126; }
.branch-department-config { display: grid; gap: 10px; }
.branch-department-levels { display: grid; grid-template-columns: repeat(4, minmax(80px, 1fr)); gap: 8px; }
.branch-department-head { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 9px; }
.branch-department-head span { color: var(--gold-bright); font-size: 11px; }
.employee-department-label { display: block; margin-top: 4px; color: var(--gold-bright); font-size: 10px; }
.profitability-form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; align-items: end; gap: 12px; margin-bottom: 18px; }

.mobile-ready-badge { align-self: center; padding: 8px 12px; border: 1px solid rgba(94,218,142,.5); border-radius: 999px; background: rgba(43,164,98,.16); color: #8ff0b7; font-size: 11px; font-weight: 900; }
.checklist-run-filters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 14px; padding: 16px; margin-bottom: 14px; }
.checklist-run-filters .field { margin: 0; }
.checklist-run-employee-summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--frame-gold-soft); border-radius: 14px; background: #111; }
.checklist-run-employee-summary strong, .checklist-run-employee-summary span { display: block; }
.checklist-run-employee-summary span { margin-top: 4px; font-size: 11px; opacity: .76; }
.checklist-run-employee-summary > b { padding: 7px 10px; border-radius: 999px; background: rgba(226,185,87,.14); color: var(--gold-bright); font-size: 10px; }
.checklist-points { min-width: 88px; padding: 8px 11px; border-radius: 10px; background: #202126; text-align: center; }
.checklist-points small, .checklist-points strong { display: block; }
.checklist-points strong { margin-top: 3px; color: #8ff0b7; }
.checklist-run-items { display: grid; gap: 12px; }
.checklist-run-card { display: grid; grid-template-columns: minmax(260px,1fr) minmax(190px,260px); gap: 12px; padding: 14px; border: 1px solid rgba(226,185,87,.22); border-radius: 14px; background: #17181c; transition: border-color .2s ease, background .2s ease; }
.checklist-run-card.pending-choice-container { border-color: #58d18a; background: rgba(43,164,98,.13); }
.checklist-run-item-title { display: flex; align-items: center; gap: 12px; }
.checklist-run-item-title > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: rgba(226,185,87,.16); color: var(--gold-bright); font-weight: 900; }
.checklist-run-item-title strong, .checklist-run-item-title small { display: block; }
.checklist-run-item-title small { margin-top: 5px; opacity: .7; }
.checklist-run-card .field { margin: 0; }
.checklist-run-note { grid-column: 1 / -1; }
.checklist-run-save-bar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 13px 16px; border: 1px solid rgba(226,185,87,.35); border-radius: 12px; background: rgba(5,5,5,.96); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
.checklist-run-history { margin-top: 18px; overflow: hidden; }
.checklist-history-list { display: grid; gap: 1px; background: rgba(255,255,255,.08); }
.checklist-history-list > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 5px 12px; padding: 12px 14px; background: #17181c; }
.checklist-history-list span { grid-row: 1 / 3; display: grid; place-items: center; border-radius: 8px; background: rgba(226,185,87,.12); color: var(--gold-bright); font-weight: 900; }
.checklist-history-list small { opacity: .7; }

@media (max-width: 900px) {
  .checklist-assignment-layout { grid-template-columns: 1fr; }
  .employee-settings-grid, .target-level-grid, .payroll-preview, .profitability-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .target-link-grid { grid-template-columns: 1fr; }
  .branch-department-target { grid-template-columns: 1fr; }
  .checklist-run-filters { grid-template-columns: 1fr; }
  .checklist-run-employee-summary { grid-template-columns: auto minmax(0,1fr); }
  .checklist-run-employee-summary > b, .checklist-points { grid-column: 1 / -1; }
  .device-summary { grid-template-columns: 1fr; }
  .device-summary article { min-height: 92px; }
  .device-policy-note { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 700px) {
  .employee-settings-grid, .target-level-grid, .payroll-preview, .profitability-form { grid-template-columns: 1fr; }
  .checklist-assignment-item { grid-template-columns: 1fr; }
  .branch-department-levels, .branch-department-head { grid-template-columns: 1fr; }
  .checklist-run-page { padding-inline: 10px; }
  .checklist-run-card { grid-template-columns: 1fr; padding: 12px; }
  .checklist-run-note { grid-column: auto; }
  .checklist-run-card select, .checklist-run-card input { min-height: 48px; font-size: 16px; }
  .checklist-run-save-bar { align-items: stretch; flex-direction: column; }
  .checklist-run-save-bar .btn { width: 100%; min-height: 48px; }
  .checklist-history-list > div { grid-template-columns: 76px minmax(0,1fr); }
  .employee-file-actions .btn { flex: 1 1 145px; min-height: 44px; }
  .employee-documents-box { margin-right: 12px; margin-left: 12px; padding: 12px; }
  .employee-documents-head { align-items: flex-start; }
  .employee-document-uploader { grid-template-columns: 1fr; padding: 10px; }
  .employee-document-drop, .employee-document-status { grid-column: 1; }
  .employee-document-card { grid-template-columns: 46px minmax(0, 1fr); }
  .employee-document-icon { width: 46px; height: 46px; }
  .employee-document-actions { grid-column: 1 / -1; justify-content: stretch; }
  .employee-document-actions button { flex: 1; }
  .device-manual-refresh { width: 100%; align-items: stretch; flex-direction: column; }
  .device-manual-refresh > span { max-width: none; }
  .device-toolbar { align-items: stretch; flex-direction: column; }
  .device-toolbar select { width: 100%; }
  .device-results-count { text-align: right; }
  .device-request-card { position: fixed; inset: 16px; max-height: calc(100vh - 32px); }
}

/* v35.10 — notifications, employee mobile portal, schedules and branch audio */
.notification-bell { position: relative; color: var(--gold-bright); }
.notification-count { position: absolute; inset: -7px -7px auto auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #c83f43; color: #fff; font-size: 10px; box-shadow: 0 0 0 2px #080808; }
.notification-heading-actions, .announcement-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notification-total, .announcement-branch-badge { padding: 8px 12px; border: 1px solid var(--frame-gold-soft); border-radius: 999px; background: rgba(226,185,87,.1); color: var(--gold-bright); font-size: 11px; font-weight: 900; }
.notification-compose { margin-bottom: 16px; overflow: hidden; }
.notification-compose > summary { padding: 16px; color: var(--gold-bright); cursor: pointer; font-weight: 900; }
.notification-compose-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 0 16px 16px; }
.notification-compose-grid .field { margin: 0; }
.notification-wide { grid-column: 1 / -1; }
.notification-toolbar { margin-bottom: 14px; }
.notification-list { display: grid; gap: 10px; }
.notification-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(226,185,87,.18); border-radius: 14px; background: #17181c; }
.notification-card.unread { border-color: rgba(88,209,138,.58); background: linear-gradient(90deg, rgba(43,164,98,.14), #17181c 34%); }
.notification-symbol { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(226,185,87,.12); color: var(--gold-bright); font-weight: 900; }
.notification-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notification-copy > div span { color: var(--gold-bright); font-size: 10px; font-weight: 900; }
.notification-copy > div small, .notification-copy footer { opacity: .62; font-size: 10px; }
.notification-copy strong { display: block; margin: 5px 0; font-size: 14px; }
.notification-copy p { margin: 0 0 7px; color: #dedede; line-height: 1.7; }
.notification-actions { display: grid; gap: 7px; min-width: 90px; }
.notification-actions button, .portal-notifications .panel-head button, .portal-task button { border: 1px solid rgba(226,185,87,.3); border-radius: 8px; background: #101010; color: #fff; padding: 7px 9px; cursor: pointer; }
.notification-actions span { color: #8ff0b7; font-size: 10px; text-align: center; }

.portal-preview-selector { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 13px; margin-bottom: 14px; }
.portal-preview-selector .field { min-width: 320px; margin: 0; }
.portal-profile-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 18px; border: 1px solid var(--frame-gold-soft); border-radius: 18px; background: linear-gradient(135deg, rgba(226,185,87,.14), #101010 42%); }
.portal-profile-card h3 { margin: 4px 0; font-size: 21px; }
.portal-profile-card p, .portal-profile-card span { margin: 0; color: #ccc; }
.portal-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 12px 0; }
.portal-metrics article { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid rgba(226,185,87,.2); border-radius: 14px; background: #17181c; }
.portal-metrics small, .portal-metrics strong { display: block; }
.portal-metrics small { opacity: .7; }
.portal-metrics strong { margin-top: 7px; color: var(--gold-bright); font-size: 18px; }
.portal-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.portal-tasks, .portal-notifications, .portal-requests { padding: 0; overflow: hidden; }
.portal-tasks .panel-head, .portal-notifications .panel-head, .portal-requests .panel-head { padding: 15px; }
.portal-task { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 12px 15px; border-top: 1px solid rgba(255,255,255,.07); }
.portal-task strong, .portal-task small { display: block; }
.portal-task small { margin-top: 4px; opacity: .65; }
.portal-task > span { padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; background: rgba(226,185,87,.12); color: var(--gold-bright); }
.portal-task.late > span { background: rgba(207,58,62,.18); color: #ff999c; }
.portal-task.completed > span { background: rgba(43,164,98,.18); color: #8ff0b7; }
.portal-notifications > article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; padding: 12px 15px; border-top: 1px solid rgba(255,255,255,.07); }
.portal-notifications > article > span { color: var(--gold-bright); font-size: 9px; }
.portal-notifications strong, .portal-notifications small { display: block; }
.portal-notifications small { margin-top: 4px; opacity: .65; }
.portal-requests { margin-top: 12px; }
.employee-request-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; padding: 15px; border-top: 1px solid var(--frame-gold-soft); background: #111; }
.employee-request-form .field { margin: 0; }
.request-subject { grid-column: span 2; }
.request-details { grid-column: 1 / -1; }
.portal-request-list { display: grid; gap: 1px; background: rgba(255,255,255,.07); }
.portal-request-list > article { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.8fr) auto; gap: 12px; align-items: center; padding: 14px; background: #17181c; }
.portal-request-list strong, .portal-request-list small { display: block; }
.portal-request-list span { color: var(--gold-bright); font-size: 10px; }
.portal-request-list p { margin: 0; color: #ddd; }
.portal-request-list footer { grid-column: 1 / -1; display: flex; gap: 8px; }
.request-status { padding: 6px 9px; border-radius: 999px; background: rgba(226,185,87,.12); color: var(--gold-bright); font-size: 10px; font-weight: 900; text-align: center; }
.request-status.approved { background: rgba(43,164,98,.18); color: #8ff0b7; }
.request-status.rejected { background: rgba(207,58,62,.18); color: #ff999c; }

.checklist-schedule-form, .announcement-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 16px; margin-bottom: 16px; }
.checklist-schedule-form .field, .announcement-form .field { margin: 0; }
.schedule-name, .announcement-name { grid-column: span 2; }
.schedule-days, .schedule-requirements { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid rgba(226,185,87,.2); border-radius: 12px; }
.schedule-days legend, .schedule-requirements legend { color: var(--gold-bright); font-weight: 900; padding: 0 7px; }
.schedule-days label, .schedule-requirements label { display: flex; align-items: center; gap: 6px; }
.checklist-schedule-list, .announcement-list { display: grid; gap: 10px; }
.checklist-schedule-card { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px; }
.checklist-schedule-card.disabled, .announcement-card.disabled { opacity: .55; }
.checklist-schedule-time { padding: 12px; border-radius: 12px; background: rgba(226,185,87,.12); text-align: center; }
.checklist-schedule-time strong, .checklist-schedule-time small { display: block; }
.checklist-schedule-time strong { color: var(--gold-bright); font-size: 20px; }
.schedule-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.schedule-flags span { padding: 4px 7px; border-radius: 999px; background: rgba(43,164,98,.16); color: #8ff0b7; font-size: 9px; }
.checklist-evidence { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; margin-top: 12px; }
.checklist-evidence strong, .checklist-evidence small { display: block; }
.checklist-evidence small { margin-top: 4px; opacity: .7; }

.announcement-message, .announcement-audio, .announcement-form-actions { grid-column: 1 / -1; }
.announcement-audio span { display: block; margin-top: 6px; color: #8ff0b7; font-size: 10px; }
.announcement-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px; }
.announcement-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(226,185,87,.14); color: var(--gold-bright); font-size: 22px; }
.announcement-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-title-row h3, .announcement-card p { margin: 0; }
.announcement-title-row span { color: var(--gold-bright); font-weight: 900; }
.announcement-card p { margin: 5px 0; color: #ddd; }
.announcement-card small { opacity: .65; }
.employee-code-table { min-width: 1350px; }
.employee-code-value, .employee-username { color: var(--gold-bright); white-space: nowrap; font-family: ui-monospace, Consolas, monospace; direction: ltr; display: inline-block; }

@media (max-width: 1000px) {
  .portal-metrics, .checklist-schedule-form, .announcement-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-grid { grid-template-columns: 1fr; }
  .schedule-name, .announcement-name { grid-column: auto; }
  .announcement-message, .announcement-audio, .announcement-form-actions, .schedule-days, .schedule-requirements { grid-column: 1 / -1; }
  .notification-compose-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .mobile-page-heading { align-items: flex-start; flex-direction: column; }
  .portal-preview-selector { align-items: stretch; flex-direction: column; }
  .portal-preview-selector .field { min-width: 0; }
  .portal-profile-card { grid-template-columns: auto minmax(0,1fr); padding: 13px; }
  .portal-profile-card > .status { grid-column: 1 / -1; }
  .portal-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-metrics article { min-height: 76px; padding: 11px; }
  .portal-metrics strong { font-size: 15px; }
  .portal-task { grid-template-columns: minmax(0,1fr) auto; }
  .portal-task button { grid-column: 1 / -1; min-height: 44px; }
  .employee-request-form, .checklist-schedule-form, .announcement-form, .notification-compose-grid { grid-template-columns: 1fr; }
  .request-subject, .request-details, .announcement-message, .announcement-audio, .announcement-form-actions, .schedule-days, .schedule-requirements, .notification-wide { grid-column: auto; }
  .portal-request-list > article { grid-template-columns: 1fr; }
  .checklist-schedule-card, .announcement-card, .notification-card { grid-template-columns: 1fr; }
  .notification-symbol, .announcement-icon { width: 40px; height: 40px; }
  .notification-actions { display: flex; flex-wrap: wrap; }
  .checklist-evidence { align-items: stretch; flex-direction: column; }
  .checklist-evidence .btn { text-align: center; }
}

/* v35.11 — شرح كل شاشة، جداول قابلة للسحب، وواجهة موبايل أكثر كثافة */
.screen-guide { margin: -7px 0 20px; border: 1px solid rgba(226,185,87,.55); border-radius: 14px; background: linear-gradient(135deg, #181711, #25262b); box-shadow: 0 10px 26px rgba(0,0,0,.18); overflow: hidden; }
.screen-guide > summary { min-height: 72px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; user-select: none; }
.screen-guide > summary::-webkit-details-marker { display: none; }
.screen-guide > summary::after { content: "⌄"; margin-right: 3px; color: var(--gold-bright); font-size: 18px; transition: transform .2s ease; }
.screen-guide[open] > summary::after { transform: rotate(180deg); }
.screen-guide-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 10px; background: #070707; color: var(--gold-bright) !important; font-size: 18px; font-weight: 900; }
.screen-guide > summary > div { min-width: 0; flex: 1; }
.screen-guide > summary strong, .screen-guide > summary small { display: block; }
.screen-guide > summary strong { font-size: 15px; }
.screen-guide > summary small { margin-top: 3px; color: #dfddd7 !important; font-size: 12px; line-height: 1.65; }
.screen-guide > summary > b { color: var(--gold-bright) !important; font-size: 11px; white-space: nowrap; }
.screen-guide-body { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.8fr); gap: 14px; padding: 0 16px 16px; border-top: 1px solid rgba(226,185,87,.2); }
.screen-guide-body ol { margin: 14px 0 0; padding: 0 23px 0 0; display: grid; gap: 8px; counter-reset: guide-step; }
.screen-guide-body li { padding-right: 4px; color: #fff; font-size: 13px; line-height: 1.7; }
.screen-guide-body li::marker { color: var(--gold-bright); font-weight: 900; }
.screen-guide-body aside { margin-top: 14px; padding: 12px 13px; border: 1px solid rgba(88,209,138,.34); border-radius: 11px; background: rgba(43,164,98,.1); }
.screen-guide-body aside > strong { color: #8ff0b7 !important; font-size: 12px; }
.screen-guide-body aside > p { margin: 4px 0 9px; font-size: 11px; line-height: 1.7; }
.screen-guide-permissions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.screen-guide-permissions > b { margin-left: 3px; font-size: 10px; }
.screen-guide-permissions > span { padding: 3px 7px; border: 1px solid rgba(226,185,87,.32); border-radius: 999px; background: #151515; font-size: 9px; }

.table-scroll-hint { margin: -5px 0 7px; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 11px; }
.table-scroll-hint > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--frame-gold); border-radius: 7px; background: #111; color: var(--gold-bright) !important; font-size: 15px; }
.table-scroll-hint > strong { font-size: 11px; }
.table-card.table-scroll-region { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: auto; scrollbar-color: var(--gold) #171717; -webkit-overflow-scrolling: touch; }
.table-card.table-scroll-region::-webkit-scrollbar { height: 13px; }
.table-card.table-scroll-region::-webkit-scrollbar-track { background: #171717; border-top: 1px solid rgba(226,185,87,.2); }
.table-card.table-scroll-region::-webkit-scrollbar-thumb { min-width: 70px; border: 3px solid #171717; border-radius: 999px; background: var(--gold); }
.table-scroll-region table.data-table:not(.permissions-table):not(.employee-permissions-table) { min-width: 760px; }
.employee-code-table th:first-child, .employee-code-table td:first-child { position: sticky; right: 0; z-index: 2; box-shadow: -8px 0 14px rgba(0,0,0,.2); }
.employee-code-table th:first-child { z-index: 3; background: #070707; }
.employee-code-table tbody tr:nth-child(odd) td:first-child { background: var(--surface-row); }
.employee-code-table tbody tr:nth-child(even) td:first-child { background: var(--surface-row-alt); }

@media (max-width: 800px) {
  .table-scroll-region .data-table th, .table-scroll-region .data-table td { display: table-cell; }
}

@media (max-width: 700px) {
  #app { font-size: 14px; }
  .sidebar { width: min(82vw, 260px); padding: 14px 10px; }
  .sidebar .brand-mark { padding: 2px 7px 13px; }
  .sidebar .mark-box { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
  .sidebar .brand-copy strong { font-size: 16px; }
  .sidebar .brand-copy small { font-size: 9px; }
  .nav-label { padding: 12px 10px 6px; font-size: 10px; }
  .nav-list { gap: 4px; }
  .nav-item { gap: 8px; padding: 9px 10px; border-radius: 9px; font-size: 12px; }
  .nav-icon { width: 18px; font-size: 15px; }
  .sidebar-user { padding: 11px 6px 0; }
  .sidebar-user .avatar { width: 34px; height: 34px; flex-basis: 34px; }
  .sidebar-user strong { font-size: 12px; }
  .sidebar-user small { font-size: 9px; }

  .topbar { height: 60px; padding: 0 8px; gap: 6px; }
  .topbar > div:nth-child(2) { min-width: 0; flex: 1; }
  .page-title { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
  .page-subtitle { display: none; }
  .mobile-menu { width: 34px; height: 34px; padding: 0; font-size: 18px; }
  .top-actions { gap: 4px; }
  .icon-btn { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; }
  .top-actions > .icon-btn[title="المساعدة"] { display: none; }
  .connection-status { width: 34px; min-height: 34px; justify-content: center; padding: 0; }
  .connection-status i { width: 7px; height: 7px; }
  .session-stop { min-width: 58px; height: 34px; gap: 5px; padding: 0 8px; border-radius: 8px; font-size: 10px; }
  .account-password-button { height: 34px; max-width: 66px; padding: 0 7px; overflow: hidden; border-radius: 8px; font-size: 9px; white-space: nowrap; }
  .notification-count { inset: -5px -5px auto auto; min-width: 17px; height: 17px; font-size: 8px; }

  .page { padding: 14px 10px 82px; }
  .page-heading { gap: 10px; margin-bottom: 14px; }
  .page-heading h2 { margin-bottom: 3px; font-size: 20px; line-height: 1.35; }
  .page-heading p { font-size: 11px; line-height: 1.65; }
  .btn { min-height: 40px; padding: 8px 11px; font-size: 12px; }
  .toolbar { gap: 7px; margin-bottom: 11px; }
  .search input, .toolbar select { height: 40px; }

  .screen-guide { margin: 0 0 14px; border-radius: 11px; }
  .screen-guide > summary { min-height: 58px; padding: 10px; gap: 9px; }
  .screen-guide-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; font-size: 15px; }
  .screen-guide > summary strong { font-size: 13px; }
  .screen-guide > summary small { font-size: 10px; line-height: 1.55; }
  .screen-guide > summary > b { display: none; }
  .screen-guide > summary::after { font-size: 15px; }
  .screen-guide-body { grid-template-columns: 1fr; gap: 0; padding: 0 10px 10px; }
  .screen-guide-body ol { margin-top: 10px; gap: 5px; padding-right: 20px; }
  .screen-guide-body li { font-size: 11px; line-height: 1.6; }
  .screen-guide-body aside { margin-top: 9px; padding: 9px 10px; }
  .screen-guide-body aside > p { font-size: 10px; }

  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  .metric { min-height: 82px; padding: 11px; border-radius: 11px; }
  .metric-head { font-size: 11px; }
  .metric-icon { font-size: 15px; }
  .metric-value { margin: 6px 0 1px; font-size: 21px; }
  .metric-note { font-size: 9px; }

  .master-categories { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .master-card { min-height: 82px; padding: 9px; gap: 8px; border-radius: 11px; }
  .master-card-icon.master-icon-art, .master-card-icon.checklist-icon-art { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
  .checklist-icon-art i { width: 22px; height: 22px; font-size: 16px; }
  .master-card strong { margin: 0; font-size: 12px; line-height: 1.5; }
  .master-card small { display: none; }
  .master-card b { left: 6px; top: 6px; min-width: 20px; height: 20px; font-size: 9px; }
  .master-summary { gap: 8px; padding: 10px; }

  .portal-profile-card { gap: 9px; padding: 10px; border-radius: 13px; }
  .portal-profile-card .avatar.large, .employee-hero .avatar.large { width: 58px; height: 58px; flex-basis: 58px; border-radius: 14px; }
  .portal-profile-card h3 { font-size: 16px; }
  .portal-metrics { gap: 7px; }
  .portal-metrics article { min-height: 66px; padding: 9px; border-radius: 10px; }
  .portal-metrics strong { margin-top: 4px; font-size: 14px; }
  .notification-symbol, .announcement-icon { width: 34px; height: 34px; font-size: 15px; }
  .permission-audience-card { min-height: 66px; padding: 9px; }
  .permission-audience-card > span { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }

  .table-scroll-hint { margin: -2px 0 6px; font-size: 10px; }
  .table-scroll-hint > span { width: 22px; height: 22px; font-size: 13px; }
  .table-scroll-hint > strong { font-size: 10px; }
  .table-card.table-scroll-region::-webkit-scrollbar { height: 14px; }
  .data-table th, .data-table td { padding: 10px 9px; font-size: 12px; white-space: nowrap; }
  .employee-code-table { min-width: 1120px; }

  .voice-fab { left: 12px; bottom: 12px; width: 50px; min-width: 50px; height: 50px; padding: 5px; border-radius: 15px; }
  .voice-fab svg { width: 20px; height: 20px; }
  .voice-fab > span { font-size: 8px; }
  .voice-panel { left: 10px; bottom: 72px; width: calc(100vw - 20px); padding: 13px; }
  .drawer { width: 100vw; }
  .employee-hero { padding: 14px; gap: 11px; }
  .employee-form { padding: 14px 12px; }
  .drawer-footer { padding: 11px 12px; }
}

@media (max-width: 390px) {
  .topbar > div:nth-child(2) { display: none; }
  .top-actions { margin-right: auto; }
  .account-password-button { max-width: 58px; }
}

/* Employee portraits and the supplied company identity. */
.avatar, .avatar.large, .portal-profile-card .avatar.large, .employee-hero .avatar.large { border-radius: 50%; }
.login-employee-portrait { width: 100px; height: 100px; margin: 0 auto 18px; border: 2px solid var(--gold); border-radius: 50%; overflow: hidden; box-shadow: 0 6px 24px rgba(215,170,79,.2); }
.login-employee-portrait[hidden] { display: none; }
.login-employee-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand-mark .mark-box { transform: none; border: 0; background: #000; width: 64px; height: 80px; overflow: hidden; }
.mark-box img, .login-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar .mark-box { width: 48px; height: 64px; }
.login-photo { height: 86px; border-radius: 12px; }
.topbar-employee { display: flex; align-items: center; gap: 9px; margin-inline-start: auto; }
.topbar-employee .avatar { width: 46px; height: 46px; flex-basis: 46px; border: 2px solid var(--gold); }
.company-print-header { display: none; }
.company-logo-settings { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 20px; }
.company-logo-settings img { width: 72px; height: 96px; object-fit: contain; background: #000; }
@media (max-width: 700px) { .topbar-employee strong { display: none; } .topbar-employee .avatar { width: 36px; height: 36px; flex-basis: 36px; } }
@media print {
  .sidebar, .topbar, .voice-fab, .toast, .modal-backdrop { display: none !important; }
  .shell, .content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .company-print-header { display: flex !important; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #b99642; }
  .company-print-header img { width: 54px; height: 72px; object-fit: contain; }
  .company-print-header strong { color: #111; font-size: 20px; }
}

.device-screen-row {display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #786434;} .device-screen-row span {flex:1;}

.device-screen-row {display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #786434;} .device-screen-row span {flex:1;}

.device-screen-row {display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #786434;} .device-screen-row span {flex:1;}

.device-screen-row {display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid #786434;} .device-screen-row span {flex:1;}

.workspace-back {background:linear-gradient(135deg,#b68729,#e4bd5a);color:#17130b;border:1px solid #edca75;border-radius:10px;min-height:42px;padding:8px 15px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}.workspace-back:hover{filter:brightness(1.1)}.workspace-back:focus-visible{outline:3px solid #f9dc93;outline-offset:3px}@media print{.workspace-back{display:none}}
/* All screen sizes share the same collapsible navigation. */
.shell { grid-template-columns: minmax(0,1fr); }
.content { grid-column: 1; width: 100%; }
.shell > .sidebar { width: min(300px,86vw); transform: translateX(110%); visibility: hidden; pointer-events: none; transition: transform .2s,visibility .2s; z-index: 110; }
.shell > .sidebar.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.mobile-menu { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--gold); border-radius: 9px; cursor: pointer; }
.navigation-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.48); border: 0; cursor: pointer; }
.navigation-backdrop[hidden] { display: none; }
.close-navigation { align-self: flex-end; background: transparent; color: var(--gold); border: 1px solid var(--gold); border-radius: 8px; padding: 7px 13px; font: inherit; cursor: pointer; }
.settings-hub-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(230px,100%),1fr)); gap: 18px; }
.settings-hub-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-height: 175px; padding: 22px; border: 1px solid var(--gold); border-radius: 17px; background: var(--surface-base,#30343c); color: #fff; font: inherit; text-align: center; cursor: pointer; }
.settings-hub-card > span { font-size: 35px; color: var(--gold); }
.settings-hub-card small { opacity: .8; line-height: 1.7; }
.settings-hub-card:hover { border-color: #ffe0a0; background: #45413a; }
.settings-hub-card:focus-visible,.mobile-menu:focus-visible { outline: 3px solid #edca75; outline-offset: 3px; }
.employee-settings-panel { scroll-margin-top: 90px; }
@media print { .navigation-backdrop,.close-navigation { display: none !important; } }
@media(prefers-reduced-motion:reduce) { .shell > .sidebar { transition: none; } }

.workspace-updates{border:1px solid #d2ab50;border-radius:9px;background:#393325;color:#f4d689;font:inherit;padding:8px;cursor:pointer}.workspace-updates[hidden]{display:none!important}@media print{.workspace-updates{display:none!important}}
.notification-tray {position:fixed;inset:auto auto 22px 22px;width:min(360px,calc(100vw - 32px));max-height:65dvh;overflow:auto;z-index:80;background:linear-gradient(145deg,#34363d,#201d16);color:#fff;border:1px solid #d5ae50;border-radius:17px;box-shadow:0 12px 35px #0009;padding:20px;direction:rtl;animation:notification-slide-in .45s ease-out;}
.notification-tray h3 {color:#f1ca73;font-size:19px;margin:10px 0;overflow-wrap:anywhere;}
.notification-tray p {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;margin:10px 0 16px;}
.notification-tray small {color:#dbd2bd;}.notification-tray .btn{width:100%;margin-top:12px;}.notification-tray-error{color:#ffbdac;line-height:1.6;}
@keyframes notification-slide-in {from{transform:translateX(-110%);opacity:0}to{transform:translateX(0);opacity:1}}
@media(max-width:600px){.notification-tray{left:16px;bottom:82px;max-height:55dvh;}}
@media(prefers-reduced-motion:reduce){.notification-tray{animation:none}}
@media print{.notification-tray{display:none!important}}
.topbar {height:auto;min-height:78px;flex-wrap:wrap;padding:12px 22px;gap:12px;}
.topbar > div:not(.top-actions):not(.topbar-employee){min-width:0;flex:1 1 150px;}
.top-actions {display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-right:auto;}
.topbar .top-actions > button,.topbar > .mobile-menu {box-sizing:border-box;width:100px;min-width:100px;max-width:100px;height:44px;min-height:44px;padding:6px 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;line-height:1.25;white-space:normal;flex:0 0 100px;}
.topbar .top-actions > button[hidden]{display:none!important;}
.topbar .page-title{line-height:1.4;}.topbar .page-subtitle{line-height:1.5;}
.screen-guide:not([open]){display:table;max-width:100%;margin:0 0 16px;box-shadow:none;}
.screen-guide > summary{min-height:44px;padding:7px 14px;gap:8px;justify-content:flex-start;}
.screen-guide > summary .screen-guide-icon{width:24px;height:24px;flex-basis:24px;font-size:15px;border:0;}
.screen-guide[open] {margin:0 0 16px;}
.screen-guide-purpose {grid-column:1 / -1;line-height:1.8;margin:12px 0 0;}
@media(max-width:900px){.top-actions{flex:1 0 100%;margin:0;justify-content:flex-start;}.topbar{padding:10px 16px;}.topbar-employee{margin-inline-start:auto;}}
@media print{.topbar{display:none!important;}}

.page-heading{align-items:center;flex-wrap:wrap;gap:12px}.page-heading>div:first-child{flex:1 1 180px}.page-guide-trigger{flex:0 0 auto;min-height:40px;padding:8px 14px;border:1px solid #caa345;border-radius:10px;background:#24221c;color:#f1d48a;font:inherit;font-size:14px;cursor:pointer}.screen-guide.heading-controlled-guide:not([open]){display:none!important}.screen-guide.heading-controlled-guide>summary{display:none}.screen-guide.heading-controlled-guide[open]{margin-top:-10px}.page-guide-trigger:focus-visible{outline:3px solid #f1d48a;outline-offset:2px}@media print{.page-guide-trigger{display:none!important}}

html.workspace-menu-open,html.workspace-menu-open body{overflow:hidden!important;overscroll-behavior:none;}html.workspace-menu-open .navigation-backdrop{touch-action:none;}html.workspace-menu-open .nav-list{touch-action:pan-y;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch;}@media(pointer:coarse){.shell>.sidebar{height:100svh;max-height:100svh;}.shell>.sidebar.open{transition:none;}}

.attendance-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.attendance-form{padding-bottom:16px}.attendance-form .employee-settings-grid{padding:0 16px}.attendance-page .page-heading{align-items:end}.attendance-page .page-heading>.field{min-width:190px}.attendance-page .data-table td{white-space:nowrap}.attendance-page .table-card{overflow:auto}@media(max-width:900px){.attendance-layout{grid-template-columns:1fr}.attendance-page .page-heading{align-items:stretch}.attendance-page .page-heading>.field{min-width:0}}
.attendance-employee-cards{display:flex;flex-direction:column;gap:8px;padding:0 16px 18px}.attendance-employee-card{display:grid;grid-template-columns:64px minmax(170px,1.5fr) repeat(4,minmax(90px,.65fr)) 130px;gap:8px;align-items:center;width:100%;text-align:right;border:1px solid #756339;border-radius:11px;background:#24221d;color:#f7f1e4;padding:9px 11px;font-family:inherit;font-style:normal;cursor:pointer;box-shadow:0 3px 10px #0002;transition:.18s ease}.attendance-employee-card:hover,.attendance-employee-card.is-selected{border-color:#f0cc73;background:#2d2920;box-shadow:0 5px 15px #0005}.attendance-employee-number{display:grid;place-items:center;width:52px;height:42px;border:1px solid #d4ad51;border-radius:8px;background:#171713;color:#f5d887;font-size:14px;font-weight:900;text-align:center;overflow-wrap:anywhere}.attendance-employee-name{font-size:16px;font-weight:900;line-height:1.4}.attendance-card-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:5px 7px;border:1px solid #76643b;border-radius:8px;background:#171713;font-style:normal}.attendance-card-stat small{color:#cfc6b3;font-size:11px}.attendance-card-stat b{color:#f5d887;font-size:16px}.attendance-card-open{text-align:center;background:#b78c31;color:#111;padding:7px;border-radius:8px;font-weight:900}.attendance-month-card{scroll-margin-top:90px}.attendance-month-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 16px 16px}.attendance-month-summary span{display:flex;flex-direction:column;gap:5px;text-align:center;border:1px solid #8c743c;border-radius:11px;background:#ffffff0a;padding:10px;font-style:normal}.attendance-month-summary b{font-size:17px;color:#f2cf77}.attendance-month-days{display:grid;gap:7px;padding:0 16px 18px;overflow-x:auto}.attendance-day-row{display:grid;grid-template-columns:82px repeat(6,minmax(82px,1fr)) minmax(180px,2fr);gap:7px;align-items:stretch;min-width:900px;border:1px solid #625739;border-radius:9px;background:#201f1b;padding:7px;font-style:normal}.attendance-day-date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;background:#d2aa4c;color:#15130f;min-height:54px}.attendance-day-date strong{font-size:20px}.attendance-day-date small{font-size:11px}.attendance-day-cell{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px;border-inline-start:1px solid #ffffff12;min-width:0}.attendance-day-cell span{font-size:11px;color:#c8bfae}.attendance-day-cell b{font-size:14px;color:#fff;overflow-wrap:anywhere}.attendance-day-issues b{color:#f4cf76}.attendance-day-row.is-empty{grid-template-columns:82px 1fr;min-width:0;opacity:.68}.attendance-day-empty{display:flex;align-items:center;padding-inline:14px;color:#bbb;font-weight:700}@media(max-width:1050px){.attendance-employee-card{grid-template-columns:60px minmax(140px,1fr) repeat(4,minmax(75px,.6fr)) 110px}.attendance-month-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.attendance-employee-card{grid-template-columns:52px 1fr 90px}.attendance-employee-number{grid-row:span 2}.attendance-card-stat{display:none}.attendance-card-open{grid-column:3;grid-row:1/3;font-size:12px}.attendance-month-summary{grid-template-columns:1fr 1fr}.attendance-day-cell b{font-size:13px}}
.attendance-movement-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:0 16px 18px}.attendance-movement-card{display:flex;flex-direction:column;gap:11px;border:1px solid #6f603d;border-radius:15px;background:linear-gradient(145deg,#292720,#1b1a17);padding:13px;box-shadow:0 5px 16px #0003;font-style:normal}.attendance-movement-head{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center}.attendance-movement-head .attendance-employee-number{grid-row:auto}.attendance-movement-head h4{margin:0 0 4px;color:#fff;font-size:17px}.attendance-movement-head small{color:#c8bfae}.attendance-status-badge{border:1px solid #c49a3f;border-radius:999px;padding:6px 9px;color:#f2d17d;font-size:12px;font-weight:800}.attendance-movement-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.attendance-movement-grid span{display:flex;flex-direction:column;gap:5px;text-align:center;background:#ffffff0a;border-radius:9px;padding:8px}.attendance-movement-grid small{color:#c8bfae}.attendance-movement-grid b{color:#fff;font-size:15px}.attendance-movement-result{border-radius:9px;background:#d2aa4c18;color:#f3d47e;padding:9px;line-height:1.6;font-weight:800}.attendance-movement-card .action-delete{align-self:flex-end}.attendance-empty-state{grid-column:1/-1;padding:28px;text-align:center;color:#bbb}@media(max-width:620px){.attendance-movement-cards{grid-template-columns:1fr}.attendance-movement-head{grid-template-columns:52px 1fr}.attendance-movement-head .attendance-status-badge{grid-column:2}.attendance-movement-grid{grid-template-columns:1fr 1fr}}
.installment-demo-badge{border:1px solid #c79e42;border-radius:999px;padding:8px 12px;color:#f3d37f;background:#c79e4215;font-weight:800}.installment-toolbar{display:flex;align-items:end;gap:12px;padding:14px 16px;margin-bottom:14px}.installment-toolbar .field{flex:1}.installment-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.installment-kpis article{display:flex;flex-direction:column;gap:7px;border:1px solid #78653a;border-radius:13px;background:linear-gradient(145deg,#292720,#1b1a17);padding:15px;text-align:center}.installment-kpis small{color:#c9c0af}.installment-kpis b{color:#f3d278;font-size:21px}.installment-customer-card{margin-bottom:14px}.installment-customer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 16px 17px}.installment-customer-grid span{display:flex;flex-direction:column;gap:6px;border:1px solid #655839;border-radius:9px;padding:10px;background:#ffffff08}.installment-customer-grid small{color:#c8bfae}.installment-customer-grid b{color:#fff}.installment-number{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #d1aa50;border-radius:8px;background:#171713;color:#f2d078;font-weight:900}.installment-status{display:inline-block;border-radius:999px;padding:5px 9px;font-weight:800;font-size:12px}.status-paid{color:#8ee1a6;background:#2a9d4b22;border:1px solid #2a9d4b}.status-partial{color:#f5d27b;background:#c9952422;border:1px solid #c99524}.status-next{color:#b8c9ff;background:#5476dc22;border:1px solid #5476dc}.installment-note{margin-top:14px;padding:15px 16px}.installment-note strong{color:#f2cf77}.installment-note p{margin:7px 0 0;color:#d4ccbd;line-height:1.7}@media(max-width:760px){.installment-kpis,.installment-customer-grid{grid-template-columns:1fr 1fr}.installment-toolbar{align-items:stretch;flex-direction:column}.installment-demo-badge{font-size:11px}.installment-page .page-heading{align-items:stretch}}
.customer-directory{display:flex;flex-direction:column;gap:7px;padding:0 16px 18px}.customer-directory-row{display:grid;grid-template-columns:70px minmax(180px,1fr) 160px 100px 120px;gap:10px;align-items:center;width:100%;padding:10px;border:1px solid #655839;border-radius:10px;background:#211f1a;color:#fff;text-align:right;font-family:inherit;cursor:pointer}.customer-directory-row:hover{border-color:#d0aa51;background:#29251d}.customer-directory-row strong{font-size:16px}.customer-profile{margin-top:14px}@media(max-width:720px){.customer-directory-row{grid-template-columns:60px 1fr 90px}.customer-directory-row>span:nth-child(3),.customer-directory-row>span:nth-child(5){display:none}}
.inventory-opening-dialog .catalog-pager{display:none!important}
.inventory-opening-dialog .opening-table-wrap{overflow-y:auto!important;overscroll-behavior:contain;scroll-behavior:smooth}