: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; }
.permission-entity-option[hidden], .permission-search-empty[hidden] { display: none !important; }
.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-link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; padding: 4px 2px; margin-top: 4px; }
.target-link-list .target-link-option { grid-template-columns: auto minmax(0,1fr); padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #24262b; cursor: pointer; transition: border-color .15s, background .15s; }
.target-link-list .target-link-option:hover { border-color: rgba(226,185,87,.45); background: #2b2d33; }
.target-link-list .target-link-option:has(input:checked) { border-color: var(--gold-bright, #e2b957); background: rgba(226,185,87,.12); }
.target-link-list .target-link-option input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--gold-bright, #e2b957); }
.target-link-list .target-link-option span { font-size: 13px; overflow-wrap: anywhere; }
.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}

/* Text entry remains legible throughout current and future forms. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]), textarea, select, [contenteditable="true"] {
  background-color:#fff !important;color:#000 !important;caret-color:#000 !important;
  -webkit-text-fill-color:#000 !important;color-scheme:light;
}
input::placeholder,textarea::placeholder {color:#555 !important;-webkit-text-fill-color:#555 !important;opacity:1;}
input:-webkit-autofill {box-shadow:0 0 0 1000px #fff inset !important;-webkit-text-fill-color:#000 !important;}
select option {background:#fff;color:#000;}

/* Checklist reports: fixed compact controls, one results viewport, full history. */
@media screen {
  .content:has(.checklist-report-page) { display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  .content:has(.checklist-report-page) > .topbar { flex-shrink:0; min-height:58px; padding:8px 16px; gap:8px; }
  .content:has(.checklist-report-page) .topbar .page-title { font-size:16px; }
  .content:has(.checklist-report-page) .topbar .top-actions { gap:6px; }
  .content:has(.checklist-report-page) .topbar .top-actions > button { width:76px; min-width:76px; max-width:76px; flex-basis:76px; height:34px; min-height:34px; padding:4px; font-size:11px; }
  .content:has(.checklist-report-page) .topbar > .mobile-menu { width:42px; min-width:42px; max-width:42px; height:34px; min-height:34px; flex-basis:42px; }
  .content:has(.checklist-report-page) #business-offline-status, .content:has(.checklist-report-page) #business-offline-status span { color:#111!important; }
  .content:has(.checklist-report-page) > #page-container { flex:1; min-height:0; display:flex; flex-direction:column; }
  #app .checklist-report-page { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; gap:8px; padding:12px 20px; overflow:hidden; }
  #app .checklist-report-page > :not(#checklist-report-scroll) { flex-shrink:0; }
  #app .checklist-report-page .page-heading { margin:0; gap:8px; flex-direction:row; align-items:center; }
  #app .checklist-report-page .page-heading > div:first-child { flex:1 1 auto; min-width:0; }
  #app .checklist-report-page .page-heading h2 { font-size:18px; margin:0; }
  #app .checklist-report-page [data-checklist-report-version] { display:block; font-size:10px; color:#f5d889; }
  #app .checklist-report-page .page-guide-trigger { min-height:30px; padding:4px 10px; font-size:12px; }
  #app .checklist-report-page > .screen-guide { margin:0; max-height:25vh; overflow:auto; }
  #app #checklist-report-filters { display:grid; grid-template-columns:145px repeat(3,minmax(100px,1fr)) minmax(140px,1.2fr) auto; align-items:end; gap:8px; padding:8px 10px; border-radius:10px; }
  #app #checklist-report-filters label { min-width:0; display:flex; flex-direction:column; gap:3px; font-size:12px; line-height:1.3; }
  #app #checklist-report-filters :is(input,select) { box-sizing:border-box; width:100%; min-width:0; min-height:34px; height:34px; padding:4px 8px; margin:0; border:1px solid #888; border-radius:6px; font-size:13px; background:#fff!important; color:#000!important; color-scheme:light; }
  #app #checklist-report-filters button { min-height:34px; }
  #app .checklist-report-backbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:5px 8px; border:1px solid #d4af37; border-radius:8px; background:#171717; color:#fff; font-size:13px; }
  #app .checklist-report-backbar button { background:#d4af37; color:#171717; padding:5px 10px; min-height:30px; }
  #app .checklist-report-daybar { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; font-size:12px; }
  #app .checklist-report-daybar small { margin-inline-start:auto; font-size:11px; }
  #app [data-report-day-state][data-closed="true"] { color:#c9ddff; }
  #app #checklist-report-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-color:#d7aa4f #171717; border:1px solid #a18341; border-radius:10px; background:#25262b; padding:8px; -webkit-overflow-scrolling:touch; }
  #app #checklist-report-scroll:focus-visible { outline:2px solid #f0c76e; outline-offset:-3px; }
  #app #checklist-report-results { min-width:0; }
  #app #checklist-report-results :is(.panel,.table-card) { overflow:visible!important; max-height:none; border-radius:8px; }
  #app #checklist-report-results .panel { margin-bottom:10px; }
  #app #checklist-report-results .panel-head { padding:8px 10px; gap:8px; }
  #app #checklist-report-results .panel-head h3 { font-size:14px; }
  #app #checklist-report-results .panel-head small { font-size:11px; line-height:1.5; }
  #app #checklist-report-results .data-table th { position:sticky; top:-8px; z-index:2; background:#393a41; color:#fff; box-shadow:0 1px #a18341; }
  #app #checklist-report-overview .checklist-overview-metrics { padding:7px; }
  #app #checklist-report-overview > small { display:block; padding:6px 10px; }
  @media (max-width:1000px) {
    #app #checklist-report-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width:600px) {
    .content:has(.checklist-report-page) .topbar .top-actions > button { width:56px; min-width:56px; max-width:56px; flex-basis:56px; font-size:10px; }
    .content:has(.checklist-report-page) #business-offline-status { order:2; flex:1 0 100%; margin:0!important; padding:4px 6px!important; font-size:10px!important; line-height:1.4!important; }
    #app .checklist-report-page { padding:8px; gap:6px; }
    #app #checklist-report-filters { gap:6px; padding:7px; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #app .checklist-report-daybar { font-size:11px; gap:3px 8px; }
    #app .checklist-report-daybar small { display:none; }
    #app .checklist-report-page .page-heading h2 { font-size:16px; }
    #app #checklist-report-overview .checklist-overview-metrics { grid-template-columns:repeat(3,minmax(0,1fr))!important; margin:0; }
    #app #checklist-report-overview [data-overview-metric] { min-width:0; min-height:66px; padding:4px!important; }
    #app #checklist-report-overview [data-overview-metric] strong { font-size:17px!important; padding:2px!important; }
    #app #checklist-report-scroll { padding:5px; }
    #app #checklist-report-results .data-table th { top:-5px; }
  }
  /* Short landscape windows can still reach every control and result. */
  @media (max-height:580px) {
    .content:has(.checklist-report-page) { min-height:580px; height:auto; overflow:visible; }
    #app #checklist-report-scroll { flex:none; height:55vh; min-height:190px; }
  }
}

/* The employee's full report reads like a white document, including boxed rows. */
#checklist-report-detail .checklist-report-document { background:#fff; color:#000; color-scheme:light; border:1px solid #d4af37; border-radius:14px; padding:20px; width:100%; max-width:1100px; max-height:88vh; max-height:88dvh; overflow:auto; overscroll-behavior:contain; }
#checklist-report-detail .checklist-report-document :is(h2,h3,p,small,strong,span,th,td,button) { color:#000!important; }
#checklist-report-detail .checklist-report-document :is(th,td,[data-clock-part],[data-checklist-follow-up]) { background:#fff!important; color:#000!important; border-color:#999!important; }
#checklist-report-detail .checklist-report-document [data-checklist-follow-up] { border-inline-start:5px solid #7c3aed!important; }
#checklist-report-detail .checklist-report-document button { background:#f1f1f1!important; border:1px solid #888; }
#checklist-report-detail .checklist-report-document .checklist-boxed-table :is(th,td) { border-bottom:1px solid #aaa!important; }
#checklist-report-detail .checklist-report-document .checklist-row-note { max-width:none; }
@media (max-width:600px) { #checklist-report-detail { padding:8px!important; } #checklist-report-detail .checklist-report-document { padding:12px; } }
@media print {
  #checklist-report-scroll { height:auto!important; max-height:none!important; overflow:visible!important; }
  .checklist-report-page { height:auto!important; overflow:visible!important; }
  #checklist-report-filters,.checklist-report-backbar { display:none!important; }
}

/* Shared default for new working screens: compact controls above a bounded body. */
@media screen {
  .content:has(.scroll-workspace) { display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  .content:has(.scroll-workspace) > .topbar { flex-shrink:0; }
  .content:has(.scroll-workspace) > #page-container { flex:1; min-height:0; display:flex; flex-direction:column; }
  #app .scroll-workspace { flex:1; min-height:0; min-width:0; display:flex; flex-direction:column; gap:5px; padding:6px 12px; overflow:hidden; }
  #app .scroll-workspace > :not(.scroll-workspace-results) { flex-shrink:0; }
  #app .scroll-workspace-toolbar { margin:0; }
  #app .scroll-workspace-results { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  #app .scroll-workspace > .screen-guide { display:none!important; }
  #app .scroll-workspace .table-scroll-hint { display:none; }
  #app .scroll-workspace .scroll-workspace-results :is(.panel,.table-card) { overflow:visible; }
  #app .scroll-workspace-results .data-table th { position:sticky; top:0; z-index:2; }
  #app #checklist-report-filters { grid-template-columns:140px repeat(3,minmax(100px,1fr)) minmax(140px,1.2fr) auto; padding:5px 7px; gap:7px; }
  #app #checklist-report-filters .report-filter-actions { display:flex; flex:none; gap:6px; align-items:end; }
  #app #checklist-report-filters .page-guide-trigger { white-space:nowrap; min-height:34px; padding:4px 8px; }
  #app .checklist-report-daybar { line-height:1.4; }
  #app .checklist-report-daybar [data-checklist-report-version]:not([hidden]) { display:block; font-size:11px; }
  #app [data-checklist-report-version][hidden] { display:none!important; }
  #app #checklist-report-results .panel-head { padding:5px 8px; }
  #app #checklist-report-results .panel-head h3 { font-size:12px; }
  #app #checklist-report-results .panel-head strong { font-size:12px; }
  #app #checklist-report-overview .checklist-overview-metrics { margin:0; padding:5px; }
  #app #checklist-report-overview [data-overview-metric] { min-height:60px; }
  #app #checklist-report-overview > small { font-size:11px; }
  #app #checklist-report-scroll { padding:5px; }
  #app #checklist-report-results .data-table th { top:-5px; }
  /* Keep the single screen title visible; do not repeat it over the filters. */
  .content:has(.checklist-report-page) .topbar > div:nth-child(2) { display:block; }
  .content:has(.checklist-report-page) .topbar .page-subtitle { display:none; }
  .content:has(.checklist-report-page) > .topbar { min-height:46px; padding:5px 12px; gap:5px; }
  @media(max-width:1050px) {
    #app #checklist-report-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
    #app #checklist-report-filters .report-filter-actions { flex-wrap:wrap; }
    #app #checklist-report-filters .report-filter-actions > button { flex:1; }
  }
  @media(max-width:600px) {
    #app .scroll-workspace { padding:5px; }
    #app #checklist-report-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:5px; gap:5px; }
    #app #checklist-report-filters .report-filter-actions { gap:4px; flex-wrap:nowrap; }
    #app #checklist-report-filters .report-filter-actions > button { min-width:0; font-size:11px; padding:4px; }
    #app #checklist-report-overview [data-overview-metric] { min-height:58px; }
    #app .checklist-report-daybar small:not([hidden]) { display:block; }
    .content:has(.checklist-report-page) .topbar .page-title { font-size:14px; }
  }
  @media(max-height:580px) {
    .content:has(.scroll-workspace) { min-height:580px; height:auto; overflow:visible; }
    #app .scroll-workspace-results { flex:none; height:55vh; min-height:190px; }
  }
}
.screen-guide-dialog { width:min(850px,94vw); max-height:88vh; max-height:88dvh; overflow:auto; padding:18px; background:#fff; color:#111; border:1px solid #c99b36; border-radius:12px; }
.screen-guide-dialog::backdrop { background:#000a; }
.screen-guide-dialog > header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.screen-guide-dialog h2 { margin:0; font-size:19px; }
.screen-guide-dialog header button { background:#eee; color:#111; border:1px solid #999; }
.screen-guide-dialog .screen-guide-body { display:block; padding:0; }
.screen-guide-dialog :is(p,li,aside,strong,small,h2) { color:#111!important; }
.screen-guide-dialog aside { background:#f4f4f4; padding:10px; border-radius:8px; }
.screen-guide-dialog .screen-guide-body aside strong { color:#111!important; }
.screen-guide-dialog .screen-guide-body .screen-guide-permissions span { background:#fff; color:#111!important; border-color:#777; }
@media print {
  .scroll-workspace,.scroll-workspace-results { height:auto!important; max-height:none!important; overflow:visible!important; }
  .scroll-workspace-toolbar { display:none!important; }
}

.training-workspace{min-height:0}.training-workspace input,.training-workspace select,.training-dialog input,.training-dialog textarea,.training-dialog select{background:#fff!important;color:#000!important;border:1px solid #9ca3af;border-radius:7px;padding:9px;font:inherit;color-scheme:light}.training-dialog label{display:grid;gap:6px;margin:12px 0}.training-dialog input[type=checkbox]{accent-color:#2467b2}.training-dialog{background:#fff;color:#111;border:1px solid #bbb;border-radius:14px;width:min(750px,94vw);max-height:90dvh;padding:0}.training-dialog::backdrop{background:#0009}.training-dialog>header{position:sticky;top:0;background:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;z-index:2}.training-dialog h3{margin:0}.training-dialog>header button{font-size:24px;background:white;color:black;border:0;cursor:pointer}.tr-dialog-body{padding:18px;overflow-wrap:anywhere}.tr-dialog-body form .btn{margin:8px 4px}.tr-check{display:flex!important;align-items:center}.tr-check input{width:auto}.tr-timer{font-size:26px;font-variant-numeric:tabular-nums}.tr-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px;padding:8px}.tr-person{display:grid;gap:5px;text-align:right;background:#fff;color:#111;border:1px solid #ccc;border-radius:10px;padding:12px;width:100%;margin-bottom:8px;cursor:pointer}.tr-person.selected{border:2px solid #2377bf;background:#eef6ff}.tr-person small{font-size:12px}.tr-detail{background:#fff;color:#111;padding:14px;border-radius:10px;min-width:0}.tr-detail h3{margin:0}.tr-detail h3 small{font-size:12px}.tr-quotas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.tr-quotas article{display:grid;gap:6px;border:1px solid #d3dce5;background:#f8fafc;padding:10px;border-radius:8px}.tr-quotas b{font-size:20px}.tr-table{overflow:auto}.tr-table table{width:100%;min-width:660px;color:#111}.tr-table th{position:sticky;top:0;background:#e9eef5;color:#111}.tr-table td{padding:9px;border-bottom:1px solid #ddd}.tr-table td small{display:block}.tr-state{font-size:12px;margin:0 8px}.tr-note{background:#edf5ff;color:#123d66;padding:8px;border-radius:7px;margin:5px}.tr-review{color:#773800;background:#fff0d7;padding:6px;border-radius:6px}.tr-detail details{margin-top:18px}.training-workspace .scroll-workspace-toolbar{gap:8px}.training-workspace .scroll-workspace-toolbar label{display:grid;font-size:12px}.training-workspace button:disabled{opacity:.55;cursor:not-allowed}.training-dialog .btn{color:#111}.tr-actions{display:flex;flex-wrap:wrap}@media(max-width:700px){.tr-layout{grid-template-columns:1fr}.tr-layout>aside{display:flex;overflow-x:auto;gap:6px}.tr-person{min-width:225px}.tr-quotas{grid-template-columns:1fr}.training-dialog{width:96vw}.tr-detail{padding:10px}}
.content #page-container .training-workspace input,.content #page-container .training-workspace select,body dialog.training-dialog input,body dialog.training-dialog textarea,body dialog.training-dialog select{background:#fff!important;color:#000!important;-webkit-text-fill-color:#000!important}
.content:has(.training-workspace)>.topbar{min-height:46px;padding:5px 12px;gap:5px}.content:has(.training-workspace) .topbar .page-subtitle{display:none}.content:has(.training-workspace) .topbar .page-title{font-size:16px}.content:has(.training-workspace) .topbar .top-actions{gap:5px}.content:has(.training-workspace) .topbar .top-actions>button{width:76px;min-width:76px;max-width:76px;flex-basis:76px;height:34px;min-height:34px;padding:4px;font-size:11px}.content:has(.training-workspace) .topbar>.mobile-menu{width:42px;min-width:42px;max-width:42px;height:34px;min-height:34px;flex-basis:42px}#app #training-filter{display:flex;flex-direction:row;flex-wrap:wrap;align-items:end;padding:5px;gap:5px}#app #training-filter [data-screen-guide-actions]{display:flex;gap:5px;flex-wrap:wrap}#app #training-filter button{font-size:12px;min-height:34px;padding:5px 8px}#app #training-filter input{height:34px;min-height:34px;width:220px;max-width:100%}@media(max-width:600px){.content:has(.training-workspace) .topbar .top-actions>button{width:56px;min-width:56px;max-width:56px;flex-basis:56px;font-size:10px}.content:has(.training-workspace) #business-offline-status{order:2;flex:1 0 100%;margin:0!important;padding:4px 6px!important;font-size:10px!important;line-height:1.4!important}.content:has(.training-workspace) .topbar .page-title{font-size:14px}#app #training-filter{gap:4px}#app #training-filter button{padding:4px 6px;font-size:11px}}
#app .training-workspace .tr-person,#app .training-workspace .tr-person :is(strong,span,small),#app .training-workspace .tr-detail,#app .training-workspace .tr-detail :is(h3,h4,p,small,strong,b,span,th,td,summary),body dialog.training-dialog :is(h3,p,small,strong,b,span,label,select,option,textarea,input){color:#000!important}#app #training-filter [data-screen-guide-actions]{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:5px;width:auto}#app #training-filter [data-screen-guide-actions]>button{width:auto!important;flex:0 1 auto!important;min-width:55px!important}#app .training-workspace .tr-note{color:#123d66!important}.content:has(.training-workspace) #business-offline-status,.content:has(.training-workspace) #business-offline-status span{color:#111!important}.content:has(.training-workspace) .topbar>div:nth-child(2){display:block!important}.content:has(.training-workspace) .topbar .page-subtitle{display:none!important}

/* Desktop window controls remain separate from session lock. */
.saher-window-controls{display:flex;align-items:center;gap:5px;flex-shrink:0}
.saher-window-controls .btn{min-height:32px;padding:4px 9px;background:#fff!important;color:#111!important;border:1px solid #a88c48;font-size:12px}
.saher-window-controls [data-window-close]{font-size:25px;line-height:1;min-width:34px}
.saher-window-controls [data-window-close]:hover{background:#ffe5e5!important;color:#9d1313!important}
.login-brand .saher-window-controls{position:fixed;top:12px;left:12px;z-index:50}
#window-control-message{position:fixed;bottom:20px;left:20px;right:20px;max-width:650px;margin:auto;padding:14px 18px;background:white;color:black;border:2px solid #b79a48;border-radius:10px;z-index:20000;text-align:center;font:15px Cairo,sans-serif;box-shadow:0 3px 20px #0005}
#window-control-message[hidden]{display:none}
@media(pointer:coarse) and (max-width:900px){.saher-window-controls{display:none}}

#open-device-request[hidden]{display:none!important}

/* One operational directory; canonical API forms retain their own scrolled work area. */
.master-index-page.scroll-workspace{height:calc(100dvh - 170px);min-height:300px;gap:6px}
.master-directory-results{padding:6px}.master-directory-results .master-summary,.master-directory-results .master-welcome{display:none}
.master-index-page .scroll-workspace-toolbar{gap:8px;align-items:center;padding:6px}
.master-index-page #master-directory-search{background:#fff!important;color:#000!important;max-width:360px;min-width:150px;padding:8px;border-radius:7px}
.master-index-page .master-card[hidden]{display:none!important}.master-index-page .master-card{min-height:86px;padding:12px}.master-index-page .master-card small{font-size:12px}.master-index-page .master-card-icon{width:40px;height:40px}
body dialog.catalog-dialog{padding:12px!important;overflow:hidden!important;width:min(1120px,96vw)!important;height:min(780px,92dvh)!important;max-height:92dvh!important}
body dialog.catalog-dialog[open]{display:flex;flex-direction:column;gap:8px}
body dialog.catalog-dialog .cw-dialog-heading{flex:none;padding:2px 4px;margin:0}
body dialog.catalog-dialog [data-content]{min-height:0;overflow:auto;flex:1}
body dialog.catalog-dialog .catalog-workspace{display:flex;flex-direction:column;gap:6px;overflow:hidden}
body dialog.catalog-dialog .catalog-workspace .catalog-table{flex:1;min-height:0;overflow:auto;max-height:none}
body dialog.catalog-dialog .catalog-search{flex-wrap:wrap;padding:4px;margin:0;gap:5px}
body dialog.catalog-dialog :is(input,textarea,select,option){background:#fff!important;color:#000!important;-webkit-text-fill-color:#000!important;color-scheme:light}
body dialog.catalog-dialog :is(th,td){background:#fff;color:#111;border:1px solid #bbb;padding:8px}
body dialog.catalog-dialog th{position:sticky;top:0;background:#f0f1f2;z-index:1}
body dialog.catalog-dialog .catalog-pager{flex:none;margin:0}.catalog-workspace [data-status]{margin:0;font-size:13px}
@media(max-width:650px){.master-index-page.scroll-workspace{height:calc(100dvh - 190px)}body dialog.catalog-dialog{padding:8px!important}.master-index-page .master-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}

.master-index-page .catalog-transfer-tools{margin:16px 0 4px;border-top:1px solid #806827;padding:10px}.master-index-page .catalog-transfer-tools>summary{cursor:pointer;font-weight:700;padding:6px}.master-index-page .catalog-transfer-tools[open]>div{padding-top:8px}

/* Scoped customer layout: fixed controls and independently scrolling records. */
#app .customer-list-toolbar,#app .customer-list-search,#app .customer-list-status,#app .customer-list-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;padding:3px 0}
#app .customer-list-toolbar{justify-content:flex-start;flex-direction:row;align-items:end}
#app .customer-list-toolbar>button{width:auto;flex:0 1 auto}
#app .customer-list-toolbar label,#app .customer-list-search label{display:grid;gap:3px;font-size:12px;min-width:0}
#app .customer-list-search{align-items:end}
#app .customer-list-search label{flex:1 1 220px}
#app .customer-list-toolbar :is(button,select),#app .customer-list-search :is(button,input),#app .customer-list-status button,#app .customer-list-pagination button{min-height:36px;padding:6px 12px;border-radius:8px;font-size:13px}
#app .customer-list-status{font-size:13px;border-block:1px solid #756028;padding:5px 0}
#app .customer-status-actions{display:flex;gap:5px}
#app .customer-status-actions [aria-pressed=true]{background:#dab135;color:#111;border-color:#f0d981}
#app .customer-list-status small{margin-inline-start:auto}
#app .customer-list-pagination{justify-content:center;font-size:13px}
#app .customer-list-results{border:1px solid #b39a56;border-radius:9px;background:white;color:#111}
#app .customer-list-results .customer-directory{padding:5px;gap:4px}
#app .customer-list-results .customer-directory-row{grid-template-columns:90px minmax(180px,1fr) minmax(120px,180px) 150px;border:1px solid #c9c9c9;border-radius:5px;background:#fff;color:#111;padding:8px;min-width:580px}
#app .customer-list-results .customer-directory-row:hover{background:#fff7df;border-color:#ab8621}
#app .customer-list-results .customer-directory-row>span{display:block}
#app .customer-list-results .customer-directory-row strong{font-size:15px}
#app .customer-list-results .customer-directory-row,#app .customer-list-results .customer-directory-row *{color:#111!important;-webkit-text-fill-color:#111!important}
#app .customer-list-results .attendance-employee-number{color:#111;background:#f3f3f3;border:1px solid #aaa;padding:5px;text-align:center}
#app .customer-list-results .customer-directory-row.customer-blocked-row,#app .customer-list-results .customer-directory-row.customer-blocked-row *{background:#761e28!important;color:white!important;-webkit-text-fill-color:white!important}
#app .customer-empty{margin:12px;color:#111;line-height:1.8}
#app .customer-profile-toolbar{margin:0;gap:8px;align-items:center;padding:4px 0;flex-direction:row}
#app .customer-profile-toolbar h2{font-size:16px;margin:0}
#app .customer-profile-toolbar p{margin:2px 0;font-size:12px}
#app .customer-profile-toolbar>div:first-child{flex:1;min-width:0}
#app .customer-profile-toolbar button{min-height:36px;padding:6px 12px;font-size:13px}
#app .customer-profile-results{padding:4px 8px}
#app .customer-types-page .master-categories{margin:0}
#app :is(.customer-list-page,.customer-profile-page,.customer-types-page) :is(input:not([type=checkbox]),select,textarea){background:#fff!important;color:#000!important;-webkit-text-fill-color:#000!important;color-scheme:light}
@media(max-width:650px){#app .customer-list-toolbar{gap:4px}#app .customer-list-toolbar :is(button,select){font-size:12px;padding:5px 8px}#app .customer-list-status{gap:4px}#app .customer-list-status small{margin-inline-start:0}#app .customer-types-page .master-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Complete customer file: one fixed toolbar and one continuous scroll surface. */
.customer-profile-page.scroll-workspace .customer-profile-toolbar{gap:8px;padding:6px 8px!important;margin:0!important;flex-wrap:wrap}
.customer-profile-page.scroll-workspace .customer-profile-toolbar h2{font-size:18px!important;margin:0}
.customer-profile-page.scroll-workspace .customer-profile-toolbar p{margin:2px 0!important;font-size:13px}
.customer-profile-toolbar>div:first-child{margin-inline-end:auto;min-width:150px}
.customer-profile-toolbar .cp-primary-actions,.customer-profile-toolbar .cw-actions{display:contents}
.customer-profile-page.scroll-workspace .customer-profile-toolbar button,.customer-profile-page .cp-section-nav button{min-height:36px!important;padding:6px 12px!important;font-size:13px!important;width:auto}
.customer-profile-page .cp-section-nav{display:flex;flex-wrap:wrap;gap:5px;padding:6px;margin:0;border-bottom:1px solid #ad8b43}
.customer-profile-page .cp-section-nav [aria-current=true]{background:#d7b556;color:#111}
.customer-profile-page .customer-profile-results{display:flex;flex-direction:column;gap:10px;padding:8px;scroll-padding-top:8px}
.customer-profile-results>#customer-master-form,.customer-profile-results>#customer-master-form>fieldset,.customer-profile-results>[data-customer-extras],.customer-profile-results>.customer-workspace,.customer-profile-results>.customer-workspace>.cw-photos{display:contents!important}
.customer-profile-results .panel{margin:0!important;padding:14px!important;flex-shrink:0;min-width:0}
.customer-profile-results>#customer-master-form>fieldset>.field{flex-shrink:0;max-width:360px;margin:0}
.customer-profile-results h3{font-size:16px;margin-bottom:10px!important}
.customer-profile-results .field label{margin-bottom:4px}
.customer-profile-results #cp-flags h3{flex-basis:100%}
.customer-profile-results .cw-photo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:auto!important;margin:0!important;padding:10px!important;flex-shrink:0}
.customer-profile-results .cw-photo:first-child{order:11}.customer-profile-results .cw-photo:last-child{order:21}
.customer-profile-results .cw-photo img{width:64px;height:70px;object-fit:contain}
.customer-profile-results .cw-photo-placeholder{height:auto!important;margin:0!important;padding:8px!important}
.customer-profile-results .cw-photo h3{margin:0!important}.customer-profile-results .cw-photo select{width:min(270px,100%)!important;margin:0!important}
.cp-section-heading{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.cp-section-heading h3{margin:0!important;margin-inline-end:auto!important}
.cp-table{overflow:auto}.cp-table table{border-collapse:collapse;width:100%;background:#fff;color:#111;min-width:480px;text-align:right}
.cp-table th,.cp-table td{padding:10px;border:1px solid #b5b5b5;color:#111!important;background:#fff}
.cp-file-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px}
.cp-file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;background:#111;border:1px solid #7d693c;border-radius:8px;padding:10px}
.cp-file-row strong,.cp-file-row small{display:block;overflow-wrap:anywhere}.cp-file-row button{flex-shrink:0}
.cp-history-entry{padding:10px;border-bottom:1px solid #7d693c}.cp-history-entry p{white-space:pre-wrap;margin:5px 0}
.cp-extra form{margin-top:12px}.cp-extra [data-cx-upload]{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.cp-extra [data-cx-upload] label{flex:1;min-width:180px}
.customer-profile-page input:not([type=checkbox]),.customer-profile-page select,.customer-profile-page textarea,.cw-dialog input,.cw-dialog select,.cw-dialog textarea{background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important}
.customer-profile-page input:disabled,.customer-profile-page select:disabled,.customer-profile-page textarea:disabled{background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;opacity:1!important}
.customer-profile-page .cp-cases-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:8px}.cp-cases-list .cw-case{margin:0;padding:10px}
@media(max-width:600px){#app .customer-profile-toolbar>div:first-child{flex:1 0 100%;min-width:0}#app .customer-profile-toolbar>div:first-child p{display:inline}.customer-profile-page.scroll-workspace .customer-profile-toolbar{gap:4px}.customer-profile-page .customer-profile-results{padding:4px}.customer-profile-page .cp-section-nav{gap:3px}.customer-profile-page .cp-section-nav button{padding:4px 7px!important;min-height:30px!important;font-size:12px!important}.customer-profile-page .customer-profile-toolbar h2{font-size:16px!important}}
@media print{.customer-profile-page .customer-profile-results{display:block;overflow:visible;height:auto}.customer-profile-results .panel,.customer-profile-results .cw-photo{margin-bottom:12px!important}.cp-section-nav,.cp-primary-actions{display:none!important}}

/* Keep empty customer results legible under the shared light work area. */
#app .customer-list-results .customer-empty{color:#111!important;-webkit-text-fill-color:#111!important;background:#fff;}

/* Cash customers show only the five sales-register fields. */
#app .cash-customer-table{width:100%;border-collapse:collapse;background:#fff;color:#111;table-layout:fixed}
#app .cash-customer-table :is(th,td){border:1px solid #adadad;padding:10px;text-align:right;vertical-align:top;color:#111!important;-webkit-text-fill-color:#111!important;overflow-wrap:anywhere}
#app .cash-customer-table th{position:sticky;top:0;background:#f5f0de;z-index:1}
#app .cash-customer-table th:nth-child(1){width:18%}#app .cash-customer-table th:nth-child(2){width:22%}#app .cash-customer-table th:nth-child(3){width:25%}#app .cash-customer-table th:nth-child(4){width:15%}#app .cash-customer-table th:nth-child(5){width:20%}
#app .cash-customer-open{background:#fff;color:#111;border:0;padding:0;text-decoration:underline;cursor:pointer;text-align:right;font:inherit;font-weight:bold;white-space:normal;max-width:100%}
#app .cash-customer-table .cash-note{white-space:pre-wrap}
#app .cash-profile-results #customer-master-form{display:block!important;width:100%}
#app .cash-profile-results fieldset,#app .cash-first-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;padding:12px;margin:0;background:#fff;color:#111}
#app .cash-profile-results .field label{color:#111!important}#app .cash-note-field{grid-column:1/-1}
#app .cash-first-fields output{display:block;border:1px solid #b6b6b6;padding:12px;border-radius:6px;color:#111;background:#fff}
#app .cash-customer-profile #customer-master-save[hidden]{display:none!important}
@media(max-width:650px){#app .cash-customer-table{min-width:660px}#app .cash-profile-results fieldset,#app .cash-first-fields{grid-template-columns:1fr}#app .cash-customer-table :is(td,th){font-size:13px;padding:8px}}

/* Wholesale shares the compact profile and the fixed, internally scrollable list. */
#app .wholesale-customer-table th:nth-child(1){width:9%}#app .wholesale-customer-table th:nth-child(2){width:20%}
#app .wholesale-customer-table th:nth-child(3),#app .wholesale-customer-table th:nth-child(4){width:14%}
#app .wholesale-customer-table th:nth-child(5){width:17%}#app .wholesale-customer-table th:nth-child(6){width:12%}#app .wholesale-customer-table th:nth-child(7){width:14%}
#app .cash-profile-results .cash-record-code{display:block;background:#fff;color:#111;border:1px solid #bbb;padding:12px;border-radius:6px}
@media(max-width:850px){#app .wholesale-customer-table{min-width:820px}}

/* Employee identity and durable save feedback remain inside the existing drawer. */
#employee-drawer .employee-identity-help{grid-column:1/-1}
#app #employee-drawer.employee-file-workspace > .drawer-footer{min-width:0;flex-wrap:nowrap}
#employee-drawer #employee-save-feedback:not([hidden]){display:block;flex:0 0 auto;width:100%;min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;margin:0 0 6px;padding:7px 10px;background:#fff3dd!important;color:#5e3000!important;border:1px solid #b98932;border-radius:6px;font-size:14px}
#employee-drawer .employee-identity-section input{background:#fff!important;color:#000!important}

/* ===== قاعدة ثابتة للشكل في كل الشاشات =====
   أي خانة بيتكتب فيها أو بتعرض قيمة: خلفية بيضا والكتابة سودا (مش رمادي ولا كتابة بيضا).
   الزراير والخانات بمقاس واحد ومرصوصة جنب بعض. */
#app output{display:block;background:#fff!important;color:#000!important;-webkit-text-fill-color:#000;border:1px solid var(--frame-gold);border-radius:8px;padding:8px 10px;min-height:40px;box-sizing:border-box;text-align:right}
/* الأرقام في خانات الكتابة والقيم متراصة في نفس الناحية (يمين) في كل الشاشات الجديدة. */
#app :is(.sale-page,.plan-page,.vp-page,.cpos-page,.warn-page,.kst-page) input[type=number]{text-align:right}
#app :is(.sale-page,.plan-page,.vp-page,.cpos-page,.warn-page,.kst-page) :is(input:not([type=checkbox]):not([type=radio]),select){min-height:40px;height:40px;box-sizing:border-box;padding:6px 10px;border-radius:8px}
#app :is(.sale-page,.plan-page,.vp-page,.cpos-page,.warn-page,.kst-page) textarea{min-height:80px;box-sizing:border-box;border-radius:8px}
#app :is(.sale-page,.plan-page,.vp-page,.cpos-page,.warn-page,.kst-page) :is(.btn,.sale-tabs button,.vp-kinds button,.cpos-kinds button){min-height:40px;padding:8px 16px;font-size:14px;border-radius:9px;white-space:nowrap}
#app :is(.sale-tabs button,.vp-kinds button,.cpos-kinds button){min-width:110px}
#app :is(.sale-page,.plan-page,.vp-page,.cpos-page,.warn-page,.kst-page) :is(.sale-buttons,.plan-buttons,.warn-buttons,.sale-head,.sale-entry,.vp-filters,.cpos-filters){gap:8px;align-items:end}

/* Online schedule editor: compact fixed toolbar, independently scrollable work. */
.checklist-settings-page.scroll-workspace{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.checklist-settings-page .scroll-workspace-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-shrink:0;padding:6px}
.checklist-settings-page .scroll-workspace-results{overflow:auto;min-height:0;flex:1}
.checklist-settings-page input,.checklist-settings-page select{background:#fff!important;color:#000!important}
.checklist-settings-page input[type=checkbox]{width:auto}
.checklist-settings-page #checklist-run-status{flex:1;min-width:160px}

.nav-group-label{color:var(--gold);font-size:12px;font-weight:800;padding:14px 12px 4px;border-bottom:1px solid var(--line);margin-bottom:2px;letter-spacing:.2px;}