/* THUNDER Portal — shared design tokens, calibrated pixel-for-pixel from the
   approved "THUNDER — Department Portal / Naval Aviation Group" reference
   mockup (warm beige ground, deep navy ink, muted gold accent rule). Dark
   mode has been removed from the app entirely per explicit request — light
   mode only, no toggle, no data-theme="dark" block. */
:root {
  --bg: #f2ebe0;
  --surface: #ede4d8;
  --surface-2: #e6dccc;
  --text: #0d2b40;
  --text-muted: #7a6a58;
  --border: #d9cdba;
  --primary: #0d2b40;
  --primary-hover: #163d59;
  --accent: #9c8257;
  --success: #1a7f37;
  --success-bg: #e6f6ea;
  --warning: #9a6700;
  --warning-bg: #fff6dc;
  --danger: #b03a2e;
  --danger-bg: #fdeceb;
  --info: #0969da;
  --info-bg: #e7f1ff;
  --shadow: 0 1px 3px rgba(13, 43, 64, 0.10), 0 1px 2px rgba(13,43,64,0.08);
  --radius: 10px;
  --sidebar-w: 250px;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 14px;
}
html[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, 'Noto Kufi Arabic', 'Noto Sans Arabic', Arial, sans-serif; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }
.brand-font { font-family: Arial, 'Segoe UI', 'Noto Kufi Arabic', sans-serif; font-weight: 800; letter-spacing: .1em; }

#app-shell { display: flex; min-height: 100vh; }
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface);
  border-inline-end: 1px solid var(--border); display: flex; flex-direction: column;
  padding: 16px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; cursor: pointer; --emblem-gap: var(--surface); }
.brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.brand .emblem { height: 20px; width: auto; color: var(--primary); }
/* Shared aircraft photo (client/img/aircraft.png) used for the sidebar brand
   icon shown on every department page's top-left — replaces the old
   currentColor wing-emblem SVG. Sized to the same 20px row-height the emblem
   used, with object-fit: contain so the photo's real proportions are kept
   (never stretched to a foreign box), and width: auto so it is not cropped
   like the circular .brand img avatar rule above. */
.brand img.aircraft-icon { height: 20px; width: auto; max-width: 46px; border-radius: 0; object-fit: contain; }
.brand .name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.brand .name small { display:block; font-weight: 400; color: var(--text-muted); font-size: 11px; }

.nav-group { margin-bottom: 10px; }
.nav-group-label { font-size: 11px; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px 4px; letter-spacing: .04em; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text);
  cursor: pointer; font-size: 13.5px; margin: 1px 4px;
}
.nav-link:hover { background: var(--surface-2); }
.nav-link.active { background: var(--primary); color: var(--bg); }
.nav-link .badge { margin-inline-start: auto; }

#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
#topbar .spacer { flex: 1; }
#page-title { font-size: 17px; font-weight: 700; }
#content { padding: 20px; flex: 1; }

.icon-btn { background: none; border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text); position: relative; }
.icon-btn:hover { background: var(--surface-2); }

/* Topbar "text-link" controls (department switch, admin, language, logout).
   These render as bare <button> elements in app.js with no other class, so
   without a rule here they fall back to the browser's default button chrome
   (light gray/white face + inset border) — visibly off-palette against the
   beige topbar. Styled here to match the .btn/.btn-primary treatment used
   everywhere else, so they read as part of the same navy/beige/gold system
   instead of a generic OS control. #topbar is the shared department-shell
   header (see app.js's renderShell/navLinks), so this fix applies to every
   department page automatically, not just one screen. */
.link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 14px; color: var(--text); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap;
}
.link:hover { background: var(--surface-2); }
.link.primary { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.link.primary:hover { background: var(--primary-hover); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13.5px; font-weight: 600; }
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.card + .card { margin-top: 14px; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }

.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-card .value { font-size: 26px; font-weight: 800; }
.stat-card .label { color: var(--text-muted); font-size: 12.5px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.table-wrap { overflow-x: auto; }

.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }

/* Training task-card qualification progress bar (client/modules/training/pages/qualifications.js) */
.progress-bar { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-inline-end: 6px; }
.progress-bar > div { height: 100%; background: var(--success); border-radius: 999px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 600; font-size: 13px; }
.tab.active { color: var(--primary); border-color: var(--primary); }

.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.form-row textarea { min-height: 70px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.form-inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.hint { color: var(--text-muted); font-size: 11.5px; margin-top: 4px; }
.error-text { color: var(--danger); font-size: 12px; margin-top: 6px; }

/* ---- Generic dynamic-schema-form primitives (introduced by the Maintenance
   department's form renderer, but generic/undecorated enough for any future
   department that needs to render a structured, data-driven paper form). ---- */
.ltr-field { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.mt-form-group { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; grid-column: 1 / -1; }
.mt-form-group legend { font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding: 0 6px; }
.mt-form-field { margin-bottom: 10px; }
.mt-form-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-muted); }
.mt-form-field input, .mt-form-field select { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
.mt-form-field-full { grid-column: 1 / -1; margin-bottom: 10px; }
.mt-form-field-full textarea { width: 100%; min-height: 60px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; }
.mt-radio-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.mt-radio-row label { display: flex; align-items: center; gap: 4px; font-weight: 400; }
table.mt-grid { font-size: 12.5px; }
table.mt-grid input { width: 90px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(30,20,10,0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal.modal-lg { max-width: 920px; }
.modal-header { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 18px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface); }
.close-btn { margin-inline-start: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }

.toast-wrap { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 10px 14px; font-size: 13px; min-width: 220px; }
.toast.success { border-inline-start: 4px solid var(--success); }
.toast.error { border-inline-start: 4px solid var(--danger); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.section-title { font-size: 14px; font-weight: 700; margin: 18px 0 10px; }
.small { font-size: 12px; color: var(--text-muted); }
.flex { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 14px; }
.notif-dot { position: absolute; top: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---- Login screen ---- */
#login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 30px; box-shadow: var(--shadow); }
.login-card .brand { justify-content: center; padding-bottom: 24px; cursor: default; }
.login-card .brand img { width: 64px; height: 64px; }
.login-card .brand .name { font-size: 19px; text-align: center; }

/* ============================================================================
   Portal home — verbatim from the user-supplied Thunder-Design-Preview
   package (index.html / ar.html / styles.css / app.js / arabic.js), reused
   as literally as possible. Every rule below is scoped under #home-wrap so
   its generic selectors (header, nav, main, footer, .card, .active, .dot,
   svg, dialog, a, button…) cannot collide with the shared component styles
   above, which the rest of the app (sidebar, department pages) still use.
   Only the :root custom properties and the hidden .svg-library are left
   global, since neither name collides with anything else in this file.
   The design's own `body{...}` rule is applied to #home-wrap instead (it
   fills the viewport whenever it's the visible screen). Do not "improve" or
   re-derive any of this from the reference image again — this file is the
   binding source now. ============================================================================ */
:root {
  --paper: #eee6db; --card: #eee7de; --ink: #0d3043; --gold: #ae925b;
  --line: #b7aca0; --muted: #8d8980;
  --serif: Georgia, 'Times New Roman', serif; --sans: 'Arial Narrow', Arial, sans-serif;
}
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }

#home-wrap { background: var(--paper); color: var(--ink); font-family: var(--serif); min-height: 100vh;
  background-image: radial-gradient(ellipse at 8% 30%, #fff5 0, transparent 48%), linear-gradient(140deg, transparent 40%, #d9cdbc33 60%, transparent 82%); }
#home-wrap button, #home-wrap a { -webkit-tap-highlight-color: transparent; }
#home-wrap button { font: inherit; color: inherit; cursor: pointer; }
#home-wrap a { color: inherit; text-decoration: none; }
#home-wrap button:focus-visible, #home-wrap a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
#home-wrap svg { fill: currentColor; }
#home-wrap header { min-height: 80px; border-bottom: 2px solid var(--gold); display: flex; align-items: center; gap: 28px; padding: 14px 3%; font-family: var(--sans); }
#home-wrap .brand { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
#home-wrap .wordmark { font-family: Impact, 'Arial Black', Arial, sans-serif; font-weight: 900; letter-spacing: .17em; position: relative; }
#home-wrap .wordmark:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(143deg, transparent 26%, var(--paper) 26.3%, var(--paper) 28%, transparent 28.3%, transparent 54%, var(--paper) 54.3%, var(--paper) 55.5%, transparent 55.8%); opacity: .95; }
#home-wrap .brand .wordmark { font-size: 36px; }
#home-wrap nav { display: flex; align-items: center; gap: 36px; margin-left: auto; font-weight: bold; letter-spacing: 1.4px; font-size: 14px; }
#home-wrap nav button { background: none; border: 0; padding: 10px 0; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
#home-wrap nav a { padding: 10px 0; }
#home-wrap .active { border-bottom: 2px solid var(--gold); }
#home-wrap .sign-in { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line) !important; padding-left: 30px !important; white-space: nowrap; }
#home-wrap .sign-in svg { width: 17px; height: 23px; }
#home-wrap .system { display: flex; gap: 10px; align-items: flex-start; border-left: 1px solid #c9bfb3; padding-left: 25px; font-size: 11px; font-weight: bold; letter-spacing: 1px; white-space: nowrap; }
#home-wrap .system small { display: block; margin-top: 6px; letter-spacing: .6px; }
#home-wrap .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-top: 2px; }
#home-wrap main { max-width: 1580px; margin: auto; padding: 0 3.1% 23px; }
#home-wrap .hero { height: 336px; position: relative; text-align: center; padding-top: 27px; overflow: hidden; }
#home-wrap .hero-aircraft { display: block; width: 62%; max-width: 840px; height: 112px; margin: 0 auto; }
#home-wrap .hero h1 { font-size: 88px; line-height: 1; margin: 3px 0 10px; letter-spacing: .18em; }
#home-wrap .subtitle { display: flex; justify-content: center; align-items: center; gap: 20px; }
#home-wrap .subtitle i { display: block; width: 115px; height: 3px; background: var(--gold); }
#home-wrap .subtitle h2 { font-size: 28px; letter-spacing: 4px; margin: 0; white-space: nowrap; }
#home-wrap .group { font-size: 14px; font-weight: bold; letter-spacing: 6px; margin: 8px 0; }
#home-wrap .group span { color: var(--muted); margin: 0 14px; }
#home-wrap .annotation { position: absolute; font: 11px/1.8 var(--sans); color: var(--muted); letter-spacing: 1.6px; text-align: left; top: 31px; }
#home-wrap .annotation.left { left: 20%; }
#home-wrap .annotation.right { right: 3%; }
#home-wrap .blueprint { position: absolute; left: 1%; top: 13px; width: 21%; height: 310px; opacity: .09; background: repeating-linear-gradient(0deg, transparent, transparent 29px, #8a8074 30px), repeating-linear-gradient(90deg, transparent, transparent 29px, #8a8074 30px); }
#home-wrap .blueprint svg { height: 100%; width: 100%; fill: none; stroke: var(--ink); stroke-width: .3; }
#home-wrap .top-row { display: grid; grid-template-columns: 1fr 1.42fr 1fr; gap: 16px; }
#home-wrap .bottom-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 17px; }
#home-wrap .card { position: relative; display: block; min-height: 201px; padding: 20px 24px; border: 1px solid var(--line); background: linear-gradient(135deg, #fff2, transparent), var(--card); transition: transform .18s, box-shadow .18s; }
#home-wrap .card:hover { transform: translateY(-3px); box-shadow: 0 5px 14px #0d304315; border-color: var(--gold); }
#home-wrap .number { font-size: 16px; color: #777266; display: block; line-height: 1; }
#home-wrap .number:after { content: ''; display: block; width: 51px; height: 1px; background: #cdbd95; margin-top: 5px; }
#home-wrap .card-icon { width: 43px; height: 46px; display: block; margin: 12px 0 6px; object-fit: contain; }
#home-wrap .card h3 { font-size: 27px; line-height: 1.1; margin: 0 0 8px; font-stretch: condensed; letter-spacing: -.7px; }
#home-wrap .card p { font-size: 17px; margin: 0; line-height: 1.35; color: #38434a; padding-right: 18px; }
#home-wrap .arrow { position: absolute; right: 25px; bottom: 22px; width: 37px; height: 37px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 50%; font: 25px Arial; }
#home-wrap .ghost { position: absolute; right: 14px; top: 30px; width: 90px; height: 100px; opacity: .025; object-fit: contain; }
#home-wrap .featured { border: 3px solid var(--ink); padding: 18px 27px; }
#home-wrap .featured:before { content: ''; position: absolute; right: 0; top: 0; width: 66px; height: 14px; background: linear-gradient(45deg, transparent 22%, var(--gold) 23%, var(--gold) 33%, var(--paper) 34%, var(--paper) 38%, var(--gold) 39%, var(--gold) 51%, var(--ink) 52%); }
#home-wrap .featured .card-icon { width: 72px; height: 88px; float: left; margin: 9px 24px 0 0; }
#home-wrap .featured h3 { font-family: Impact, 'Arial Black', Arial, sans-serif; font-size: 34px; letter-spacing: 2px; margin-top: 32px; white-space: normal; }
#home-wrap .featured p { font-size: 19px; }
#home-wrap .metrics { display: grid; grid-template-columns: 1.45fr repeat(4, 1fr); border: 1px solid var(--line); margin-top: 23px; min-height: 90px; align-items: center; background: #d8cfc34d; padding: 14px 12px; }
#home-wrap .metrics-heading { display: flex; align-items: center; gap: 10px; }
#home-wrap .metrics h2 { font: 700 13px var(--sans); letter-spacing: 2px; margin: 0 0 7px; }
#home-wrap .metrics p { font-size: 14px; margin: 0; }
#home-wrap .demo { font: 10px var(--sans); color: #756443; }
#home-wrap .metric { display: flex; gap: 26px; justify-content: center; align-items: center; border-left: 1px solid #c1b9af; }
#home-wrap .metric svg, #home-wrap .metric img { width: 40px; height: 44px; object-fit: contain; }
#home-wrap .metric span { display: block; font: 10px var(--sans); letter-spacing: 1.2px; color: #797972; }
#home-wrap .metric strong { font-size: 29px; display: block; margin-top: 4px; }
#home-wrap footer { position: relative; min-height: 115px; background: var(--ink); color: #eee6db; display: flex; align-items: center; justify-content: space-between; padding: 18px 3.2%; font: 12px var(--sans); border-bottom: 3px solid var(--gold); }
#home-wrap footer b { font-weight: normal; color: #b9bcb6; margin: 0 15px; }
#home-wrap .footer-brand { display: flex; align-items: center; flex-direction: column; gap: 5px; }
#home-wrap .footer-brand .wordmark { font-size: 20px; letter-spacing: 7px; }
#home-wrap .footer-brand .wordmark:after { display: none; }
#home-wrap .footer-brand small { font-size: 10px; letter-spacing: 3px; }
#home-wrap dialog { border: 1px solid var(--gold); background: var(--paper); color: var(--ink); max-width: 480px; padding: 35px; box-shadow: 0 15px 60px #0004; }
#home-wrap dialog::backdrop { background: #0d304380; }
#home-wrap dialog h2 { margin-top: 0; }
#home-wrap dialog p { font: 16px/1.7 var(--sans); white-space: pre-line; }
#home-wrap .close { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 26px; }
#home-wrap .dismiss { padding: 10px 20px; background: var(--ink); color: white; border: 0; font: 12px var(--sans); letter-spacing: 2px; }

@media (min-width: 1450px) { #home-wrap .hero { height: 340px; } #home-wrap .card { min-height: 205px; } }
@media (max-width: 1200px) { #home-wrap header { gap: 15px; } #home-wrap .brand .wordmark { font-size: 27px; } #home-wrap nav { gap: 20px; } #home-wrap .system { display: none; } #home-wrap .hero h1 { font-size: 72px; } #home-wrap .annotation.left { left: 16%; } #home-wrap .card { padding: 18px; } #home-wrap .card h3 { font-size: 22px; } #home-wrap .card p { font-size: 15px; } #home-wrap .featured h3 { font-size: 26px; letter-spacing: 0; } #home-wrap .featured .card-icon { margin-right: 15px; } #home-wrap .metric { gap: 13px; } #home-wrap .group { letter-spacing: 4px; } #home-wrap .arrow { right: 16px; } }
@media (max-width: 850px) { #home-wrap header { flex-wrap: wrap; justify-content: center; } #home-wrap nav { margin: 0; gap: 24px; } #home-wrap .hero { height: 300px; } #home-wrap .hero-aircraft { width: 83%; height: 100px; } #home-wrap .hero h1 { font-size: 60px; } #home-wrap .annotation { display: none; } #home-wrap .subtitle h2 { font-size: 20px; letter-spacing: 2px; } #home-wrap .subtitle i { width: 50px; } #home-wrap .group { font-size: 10px; letter-spacing: 2px; } #home-wrap .top-row { grid-template-columns: 1fr 1fr; } #home-wrap .featured { grid-column: 1/-1; grid-row: 1; } #home-wrap .bottom-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #home-wrap .metrics { grid-template-columns: repeat(2, 1fr); gap: 20px; } #home-wrap .metrics-heading { grid-column: 1/-1; justify-content: center; } #home-wrap .metric { border: 0; } #home-wrap footer { gap: 25px; flex-wrap: wrap; justify-content: center; text-align: center; } #home-wrap .footer-brand { order: -1; flex-basis: 100%; } }
@media (max-width: 450px) { #home-wrap .brand .wordmark { font-size: 26px; } #home-wrap nav { gap: 18px; font-size: 11px; } #home-wrap .sign-in { padding-left: 16px !important; } #home-wrap .hero h1 { font-size: 42px; } #home-wrap .hero { height: 245px; } #home-wrap .hero-aircraft { height: 86px; } #home-wrap .subtitle h2 { font-size: 15px; } #home-wrap .subtitle i { width: 22px; } #home-wrap .group { font-size: 8px; letter-spacing: 1px; } #home-wrap .group span { margin: 0 3px; } #home-wrap .card { min-height: 210px; padding: 14px; } #home-wrap .card h3 { font-size: 20px; } #home-wrap .card p { font-size: 14px; padding-right: 0; } #home-wrap .featured { min-height: 170px; } #home-wrap .featured h3 { font-size: 23px; } #home-wrap .featured .card-icon { width: 43px; } #home-wrap .arrow { bottom: 12px; width: 30px; height: 30px; } #home-wrap .metrics { padding: 18px 8px; } #home-wrap .metric strong { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { #home-wrap .card { transition: none; } }

/* Keep long department names inside their cards; the reference font at full
   size overruns some translated strings, so the two overrides below (present
   in the supplied package itself) clamp size instead of changing the font. */
#home-wrap .bottom-row .card h3 { font-size: clamp(17px, 1.72vw, 27px); letter-spacing: -.5px; }
#home-wrap .wordmark, #home-wrap .featured h3 { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; }
#home-wrap .hero h1 { transform: scaleX(1.07); }
#home-wrap .featured h3 { font-size: clamp(20px, 2.25vw, 34px); letter-spacing: .5px; }

/* Display the original artwork directly from the supplied reference image.
   CSS framing preserves the exact letterforms and aircraft — no substitute
   font, no re-traced logo; the source is raster artwork reused as-is. */
#home-wrap .reference-aircraft { display: block; background-image: url('/img/reference.jpg'); background-repeat: no-repeat; background-size: 176.4634% 988.1818%; background-position: 50.3987% 11.25896%; aspect-ratio: 820/110; mix-blend-mode: darken; clip-path: polygon(0 93%, 22% 50%, 24% 37%, 26% 50%, 40% 25%, 45% 37%, 50% 0, 56% 38%, 60% 25%, 74% 50%, 77% 37%, 79% 54%, 100% 93%, 61% 63%, 50% 100%, 39% 63%); }
#home-wrap .reference-wordmark { display: block; background-image: url('/img/reference.jpg'); background-repeat: no-repeat; background-size: 222.6154% 1468.9189%; background-position: 50.43915% 22.70484%; aspect-ratio: 650/74; font-size: 0 !important; line-height: 0; color: transparent; mix-blend-mode: darken; }
#home-wrap .reference-wordmark:after { display: none !important; }
#home-wrap .hero .hero-aircraft { width: 62%; max-width: 840px; height: auto; margin: 0 auto 10px; }
#home-wrap .hero h1.reference-wordmark { width: 48%; max-width: 650px; height: auto; margin: 0 auto 15px; transform: none; }
#home-wrap .brand .reference-aircraft { width: 145px; flex-shrink: 0; }
#home-wrap .brand .reference-wordmark { width: 260px; border-left: 1px solid var(--line); }
#home-wrap .metrics-heading .reference-aircraft { width: 110px; flex-shrink: 0; }
#home-wrap .footer-brand .reference-aircraft { width: 65px; mix-blend-mode: screen; filter: invert(1); }
#home-wrap .footer-brand .reference-wordmark { width: 170px; mix-blend-mode: screen; filter: invert(1); }
@media (max-width: 1200px) { #home-wrap .brand .reference-aircraft { width: 95px; } #home-wrap .brand .reference-wordmark { width: 210px; } #home-wrap .metrics-heading .reference-aircraft { width: 65px; } }
@media (max-width: 850px) { #home-wrap .hero .hero-aircraft { width: 85%; margin-bottom: 16px; } #home-wrap .hero h1.reference-wordmark { width: 67%; margin-bottom: 16px; } }
@media (max-width: 450px) { #home-wrap .brand .reference-wordmark { width: 200px; } #home-wrap .hero .hero-aircraft { margin-top: 12px; } #home-wrap .hero h1.reference-wordmark { width: 75%; } }

/* Language link + full RTL layout (from ar.html / arabic.js) */
#home-wrap .language-switch { border: 1px solid var(--gold); padding: 8px 12px; font: 700 14px Arial, sans-serif; white-space: nowrap; }
html[dir=rtl] #home-wrap { font-family: Tahoma, Arial, sans-serif; }
html[dir=rtl] #home-wrap nav { margin-left: 0; margin-right: auto; letter-spacing: 0; gap: 22px; }
html[dir=rtl] #home-wrap .brand { direction: ltr; }
html[dir=rtl] #home-wrap .system { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: 20px; letter-spacing: 0; }
html[dir=rtl] #home-wrap .sign-in { border-left: 0 !important; border-right: 1px solid var(--line); padding-left: 0 !important; padding-right: 22px; }
html[dir=rtl] #home-wrap .subtitle h2 { font-family: Tahoma, Arial, sans-serif; letter-spacing: 0; font-size: 30px; }
html[dir=rtl] #home-wrap .group { letter-spacing: 0; font-family: Tahoma, Arial, sans-serif; font-size: 16px; }
html[dir=rtl] #home-wrap .annotation { letter-spacing: 0; text-align: right; line-height: 1.9; }
html[dir=rtl] #home-wrap .card h3, html[dir=rtl] #home-wrap .featured h3 { font-family: Tahoma, Arial, sans-serif; letter-spacing: 0; font-size: 25px; line-height: 1.45; }
html[dir=rtl] #home-wrap .featured h3 { font-size: 32px; }
html[dir=rtl] #home-wrap .card p { font-family: Tahoma, Arial, sans-serif; padding-right: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; }
html[dir=rtl] #home-wrap .number { direction: ltr; text-align: right; }
html[dir=rtl] #home-wrap .number:after { margin-left: 0; margin-right: auto; }
html[dir=rtl] #home-wrap .featured .card-icon { float: right; margin-left: 24px; margin-right: 0; }
html[dir=rtl] #home-wrap .arrow { right: auto; left: 20px; }
html[dir=rtl] #home-wrap .ghost { right: auto; left: 14px; }
html[dir=rtl] #home-wrap .metric { border-left: 0; border-right: 1px solid #c1b9af; }
html[dir=rtl] #home-wrap .metric strong { direction: ltr; }
html[dir=rtl] #home-wrap .metric span, html[dir=rtl] #home-wrap .metrics h2, html[dir=rtl] #home-wrap .footer-brand small { letter-spacing: 0; font-family: Tahoma, Arial, sans-serif; }
html[dir=rtl] #home-wrap footer, html[dir=rtl] #home-wrap dialog p { font-family: Tahoma, Arial, sans-serif; }
html[dir=rtl] #home-wrap .close { right: auto; left: 10px; }
@media (max-width: 1300px) { #home-wrap nav { gap: 17px; } #home-wrap .system { display: none; } html[dir=rtl] #home-wrap nav { gap: 17px; } }
@media (max-width: 850px) { html[dir=rtl] #home-wrap nav { margin: 0; flex-wrap: wrap; justify-content: center; } html[dir=rtl] #home-wrap .metric { border: 0; } #home-wrap nav { flex-wrap: wrap; justify-content: center; } html[dir=rtl] #home-wrap .subtitle h2 { font-size: 24px; } html[dir=rtl] #home-wrap .group { font-size: 13px; } }
@media (max-width: 450px) { html[dir=rtl] #home-wrap .card h3 { font-size: 21px; } html[dir=rtl] #home-wrap .card p { font-size: 13px; } html[dir=rtl] #home-wrap .featured h3 { font-size: 26px; } html[dir=rtl] #home-wrap .featured .card-icon { margin-left: 12px; } html[dir=rtl] #home-wrap .subtitle h2 { font-size: 21px; } html[dir=rtl] #home-wrap .group { font-size: 11px; } }

/* ---- Additions the supplied package does not cover: real per-user
   department access. Not present in the design (its demo cards all link
   somewhere); a locked card keeps the exact same visual treatment and just
   dims, matching how the design itself already de-emphasizes secondary
   elements (.ghost, faint watermarks) rather than inventing a new style. ---- */
#home-wrap .card.disabled { opacity: .5; }
#home-wrap .card.disabled .arrow { background: var(--muted); }

/* ---- Phase 11: shared employee-picker widget (client/js/employeePicker.js) ---- */
.emp-picker { position: relative; }
.emp-picker-results {
  position: absolute; z-index: 30; left: 0; right: 0; margin-top: 4px; max-height: 220px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.emp-picker-item { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.emp-picker-item:hover { background: var(--bg); }
.emp-picker-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-muted); }
.emp-picker-create { margin-top: 6px; }

/* ---- Attendance: per-row daily status select. Sized and colored to match
   the status badge palette (client/modules/attendance/lib/status.js) instead
   of the browser's tiny default <select>, per explicit user request — the
   background/color are set inline per-row from that same palette so the
   closed control itself previews the selected status, not just its options. ---- */
.att-status-select {
  min-width: 168px; padding: 8px 30px 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23666' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 8px center; background-size: 16px;
}
html[dir=rtl] .att-status-select { padding: 8px 12px 8px 30px; background-position: right 8px center; }
.att-status-select:disabled { cursor: not-allowed; opacity: .7; }
.att-status-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.att-daily-filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 4px; }
.att-daily-filters .form-row { min-width: 160px; flex: 1; }

/* ---- Phase 11: home dashboard metric tiles as clickable links + department
   status badges. The design package's .metric divs become <a> tags here —
   same visual treatment, just interactive. ---- */
#home-wrap .metric[href] { cursor: pointer; text-decoration: none; color: inherit; }
#home-wrap .card .dept-status { margin-top: 4px; font-size: 11px; }
#home-wrap .card .dept-status.status-warning { color: var(--warning); }
#home-wrap .card .dept-status.status-critical { color: var(--danger); }
#home-wrap .card .dept-status.status-ok { color: var(--success); }

@media print {
  #sidebar, #topbar, .no-print { display: none !important; }
  #main { width: 100%; }
  #content { padding: 0; }
  body { background: #fff; }
}
/* Scoped personal and department attendance controls. */
#da-admin label, #da-links label { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
#da-admin input, #da-admin select, #da-links select, #da-dept, #da-date, #my-from, #my-to,
#da-sheet select, #da-inbox textarea { font:inherit; color:var(--text); background:transparent; border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-height:44px; max-width:100%; }
#da-sheet select { min-width:150px; }
#da-inbox textarea { display:block; width:100%; min-height:90px; margin:12px 0; box-sizing:border-box; }
#da-sheet details, #da-inbox details { margin:12px 0; padding:12px; border:1px solid var(--border); border-radius:10px; }
#da-sheet summary, #da-inbox summary { cursor:pointer; font-weight:600; }
#rd-body td input, #rd-body td select { box-sizing:border-box; width:100%; min-width:95px; border:1px solid var(--border); border-radius:8px; padding:8px 10px; background:rgba(255,255,255,.45); color:var(--text); font:inherit; }

/* Shared operations controls: schedule and signature forms. */
.operations-form input:not([type=checkbox]):not([type=radio]), .operations-form select, .operations-form textarea { width:100%; min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface, #fff); color:var(--text); font:inherit; box-sizing:border-box; }
.operations-form input:focus, .operations-form select:focus, .operations-form textarea:focus { outline:2px solid var(--primary, #263b51); outline-offset:1px; }
.operations-form table input:not([type=checkbox]):not([type=radio]) { min-width:110px; }
.operations-form #sc-rows input[data-key=mission], .operations-form #sc-rows input[data-key=remarks], .operations-form #sc-rows input[data-key=brief] { min-width:190px; }
#inspection-items input[data-name] { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; color:var(--text); background:var(--bg); }
.operations-form #st-mount .grid { align-items:center; gap:16px; }
.operations-form input:disabled { opacity:.65; }

#home-wrap .blueprint { width:44%; height:100%; top:0; left:0; background:none; opacity:.65; pointer-events:none; }
#home-wrap .blueprint img { width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; }

.mt-fleet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}.mt-aircraft-card{background:var(--surface);border:1px solid var(--border);border-top:4px solid #a5966b;border-radius:12px;padding:18px;color:var(--text);text-decoration:none;display:block}.mt-aircraft-card img{width:130px;max-width:80%;height:35px;object-fit:contain}.mt-aircraft-card h3{font-size:24px;margin:14px 0 4px}.mt-aircraft-card dl{display:grid;grid-template-columns:1fr auto;gap:8px}.mt-aircraft-card dd{margin:0;font-weight:700}.mt-aircraft-card:hover{box-shadow:0 3px 14px #182c3e22}
.workflow-field { display: block; color: var(--text-muted); font-weight: 600; font-size: 13px; } .workflow-field input, .workflow-field select { display: block; margin-top: 6px; }

/* Dashboard composition: the complete reference aircraft stays behind the title. */
#home-wrap .hero { height:auto; min-height:360px; padding:50px 24px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; overflow:hidden; }
#home-wrap .blueprint { inset:0; width:100%; height:100%; opacity:.75; z-index:-1; mix-blend-mode:multiply; }
#home-wrap .blueprint img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
#home-wrap .hero .hero-brand { width:min(460px,55%); margin:0 0 26px; transform:none; line-height:1; }
#home-wrap .hero-brand img { display:block; width:100%; height:auto; max-height:110px; object-fit:contain; }
#home-wrap .hero .annotation { top:20px; font-size:10px; }
#home-wrap .hero .annotation.left { left:3%; }
#home-wrap .hero .subtitle h2 { white-space:normal; text-align:center; }
@media(max-width:600px){#home-wrap .hero { min-height:270px; padding:28px 16px; } #home-wrap .hero .hero-brand { width:70%; } #home-wrap .hero .group { letter-spacing:0; font-size:12px; } #home-wrap .blueprint { opacity:.55; }}
#home-wrap .hero h1.reference-wordmark.hero-brand { width:min(420px,65%); max-width:420px; margin:0 0 28px; aspect-ratio:650/74; }

/* Complete, transparent aircraft at its original physical left-hand position. */
#home-wrap .hero { align-items:flex-end; padding-left:44%; padding-right:5%; min-height:340px; }
#home-wrap .hero .blueprint { inset:auto; left:2%; top:0; bottom:0; width:40%; height:100%; opacity:.23; z-index:-1; mix-blend-mode:normal; }
#home-wrap .blueprint img { object-fit:contain; mix-blend-mode:normal; }
#home-wrap .hero .hero-brand,#home-wrap .hero .subtitle,#home-wrap .hero .group { align-self:center; }
#home-wrap .hero .annotation.left { left:3%; top:14px; }
#home-wrap .hero .annotation.right { display:none; }
.mobile-menu-toggle,#mobile-nav-backdrop { display:none; }
.grid > *, .flex > *, .flex-between > *, .card { min-width:0; }
.table-wrap { max-width:100%; overscroll-behavior-x:contain; }
.tabs { overflow-x:auto; max-width:100%; flex-wrap:nowrap; }
.tab { flex-shrink:0; }
.modal-header { z-index:2; }.modal-footer { z-index:2; flex-wrap:wrap; }
@media(max-width:1000px){
 #topbar { gap:8px; padding:10px 12px; flex-wrap:wrap; } #topbar nav { gap:8px!important; flex-wrap:wrap; }
 #content { padding:14px; } .flex-between,.form-inline { flex-wrap:wrap; }
}
@media(max-width:768px){
 #sidebar { display:none; position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw,300px); z-index:60; height:100dvh; }
 .mobile-menu-toggle { display:inline-flex; flex-shrink:0; width:44px; height:44px; }
 #app-shell.mobile-menu-open #sidebar { display:flex; }
 #app-shell.mobile-menu-open #mobile-nav-backdrop { display:block; position:fixed; inset:0; background:#0d2b4066; border:0; z-index:55; }
 #app-shell { width:100%; } #main { width:100%; } #topbar { position:relative; }
 #topbar .spacer { display:none; } #topbar nav { flex:1; }
 #content { padding:12px; } .grid-2,.grid-3,.grid-4 { grid-template-columns:minmax(0,1fr); }
 .btn,.nav-link,#topbar button,#topbar a { min-height:44px; } input,select,textarea { max-width:100%; }
 .form-row input,.form-row select,.form-row textarea { font-size:16px; min-height:44px; }
 .form-inline > .form-row { flex:1 1 180px; }
 .modal-backdrop { padding:8px; } .modal { width:100%; max-height:calc(100dvh - 16px); }.modal-body{padding:12px;}.modal-header{padding:12px;}.modal-footer{padding:10px;}
 .table-wrap table { min-width:580px; }.table-wrap { touch-action:pan-x pan-y; }
 .toast-wrap { inset-inline:12px; bottom:12px; }.toast{min-width:0;overflow-wrap:anywhere;}
 #home-wrap .hero { padding:30px 4% 30px 42%; min-height:270px; }
 #home-wrap .hero .blueprint { left:1%; width:40%; opacity:.25; }
 #home-wrap .hero h1.reference-wordmark.hero-brand { width:100%; margin-bottom:20px; }
 #home-wrap .hero .subtitle { gap:6px; } #home-wrap .hero .subtitle i { width:15px; }
 #home-wrap .hero .subtitle h2,html[dir=rtl] #home-wrap .hero .subtitle h2 { font-size:19px;letter-spacing:0; }
 #home-wrap .hero .group { font-size:11px;line-height:1.8;letter-spacing:0;text-align:center; }
 #home-wrap header { padding:16px 12px; } #home-wrap .brand .reference-wordmark { max-width:52vw; } #home-wrap nav { gap:10px!important; }
}
@media(max-width:420px){#home-wrap .top-row,#home-wrap .bottom-row,#home-wrap .metrics{grid-template-columns:minmax(0,1fr);}#home-wrap .card{min-height:170px;}#home-wrap .hero .subtitle h2,html[dir=rtl] #home-wrap .hero .subtitle h2{font-size:17px;}}
@media print{.mobile-menu-toggle,#mobile-nav-backdrop{display:none!important;}}

@media(max-width:768px){.table-wrap:has(table)::before{content:'Swipe horizontally to view all columns';display:block;font-size:11px;color:var(--text-muted);padding:6px 0;position:sticky;left:0;right:0;}html[dir=rtl] .table-wrap:has(table)::before{content:'اسحب الجدول أفقيًا لعرض بقية الأعمدة';}}

/* Unified dropdowns retain native keyboard and mobile interaction. */
body select, body .form-row select, body .mt-form-field select, body .operations-form select,
body #da-admin select, body #da-dept, body #da-sheet select, body #rd-body td select {
 box-sizing:border-box; min-height:44px; max-width:100%; border:1px solid var(--border); border-radius:10px;
 padding:10px 12px; padding-inline-end:36px; font:inherit; font-size:14px; color:var(--text);
 background-color:var(--bg); appearance:none; cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E");
 background-repeat:no-repeat; background-size:16px; background-position:var(--select-arrow-position,right 10px center);
}
html[dir=rtl] {--select-arrow-position:left 10px center;}
html[dir=rtl] body select {padding:10px 12px 10px 36px; background-position:left 10px center;}
body select:focus {outline:2px solid var(--primary);outline-offset:1px;}
body select:disabled {opacity:.65;cursor:not-allowed;}
body select option {font:inherit;background:var(--bg);color:var(--text);}
body select[multiple] {background-image:none;min-height:120px;padding:10px 12px;}
#admin-account-links select {display:block;width:100%;margin-top:6px;}
@media(max-width:768px){body select,body .form-row select,body .mt-form-field select,body .operations-form select {font-size:16px;}}

/* Restore the centered THUNDER lockup and its original aircraft emblem. */
#home-wrap .hero { align-items:center; padding:30px 24px 36px; min-height:340px; }
#home-wrap .hero .hero-aircraft { flex-shrink:0; width:62%; max-width:840px; height:auto; margin:0 auto 12px; }
#home-wrap .hero h1.reference-wordmark.hero-brand { width:48%; max-width:650px; margin:0 auto 20px; }
@media(max-width:768px){
 #home-wrap .hero { padding:28px 16px; min-height:270px; }
 #home-wrap .hero .hero-aircraft { width:85%; margin:0 auto 14px; }
 #home-wrap .hero h1.reference-wordmark.hero-brand { width:75%; margin:0 auto 20px; }
}