/* =====================================================================
   Shaheen2 design foundation
   One bright theme, locked. Navy is the ink and the primary action,
   gold is the accent, everything else is warm-neutral paper.
   Full rationale and rules: /opt/shaheen2/DESIGN.md
   ===================================================================== */

@font-face{font-family:'Outfit';src:url('/fonts/outfit-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Arabic';src:url('/fonts/plexar-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Arabic';src:url('/fonts/plexar-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Arabic';src:url('/fonts/plexar-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* ink */
  --navy:#17223b;
  --navy-2:#223154;
  --ink:#1b2233;
  --ink-2:#596478;
  --ink-3:#8b94a7;
  /* surfaces */
  --canvas:#f4f5f8;
  --paper:#ffffff;
  --paper-2:#f8f9fb;
  --line:#e5e8ee;
  --line-2:#cfd5e0;
  /* accent */
  --gold:#c9a24a;
  --gold-2:#b48c35;
  --gold-ink:#7f6220;
  --gold-wash:#fbf6ea;
  --gold-ring:rgba(201,162,74,.28);
  /* status */
  --ok:#1f7a4d;   --ok-wash:#e8f5ee;
  --danger:#b3261e; --danger-wash:#fbecea;
  --warn:#8a5a00; --warn-wash:#fff5db;
  /* shape */
  --r:12px; --r-sm:8px; --r-lg:18px; --r-pill:999px;
  /* depth */
  --shadow-1:0 1px 2px rgba(23,34,59,.05), 0 10px 28px -20px rgba(23,34,59,.28);
  --shadow-2:0 2px 6px rgba(23,34,59,.06), 0 30px 70px -30px rgba(23,34,59,.45);
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --fast:.16s; --med:.28s; --slow:.45s;
  /* legacy aliases so older markup keeps working */
  --surface:var(--canvas); --panel:var(--paper); --panel-alt:var(--paper-2);
  --line-strong:var(--line-2); --field:var(--paper);
  --accent:var(--gold-2); --accent-ink:#1a1206; --accent-hover:var(--gold-ink); --accent-wash:var(--gold-wash);
  --ink-soft:var(--ink-2); --ink-faint:var(--ink-3); --danger-bg:var(--danger-wash);
  --radius:var(--r); --radius-sm:var(--r-sm); --shadow:var(--shadow-1); --dark-panel:var(--navy);
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100dvh;background:var(--canvas);color:var(--ink);
  font-family:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html[dir="rtl"] body{font-family:'Plex Arabic','Outfit',ui-sans-serif,system-ui,sans-serif}
[hidden]{display:none !important}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;color:var(--navy)}
p{margin:0}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--gold-wash);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- icons ---------- */
.ic{width:1.15em;height:1.15em;flex:none;fill:currentColor;vertical-align:-.2em}
.ic-sm{width:1em;height:1em}
.ic-lg{width:1.5em;height:1.5em}
html[dir="rtl"] .ic-flip{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--paper);--fg:var(--navy);--bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  color:var(--fg);background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);
  padding:11px 16px;cursor:pointer;text-decoration:none;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.btn:hover:not(:disabled){--bd:var(--ink-3);box-shadow:var(--shadow-1)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{--bg:var(--navy);--fg:#fff;--bd:var(--navy)}
.btn-primary:hover:not(:disabled){--bg:var(--navy-2);--bd:var(--navy-2)}
.btn-gold{--bg:var(--gold);--fg:#1c1607;--bd:var(--gold)}
.btn-gold:hover:not(:disabled){--bg:var(--gold-2);--bd:var(--gold-2)}
.btn-ghost{--bg:transparent;--bd:transparent;--fg:var(--ink-2)}
.btn-ghost:hover:not(:disabled){--bg:var(--paper-2);--bd:transparent;--fg:var(--navy);box-shadow:none}
.btn-danger{--bg:transparent;--bd:transparent;--fg:var(--danger)}
.btn-danger:hover:not(:disabled){--bg:var(--danger-wash);--bd:transparent;box-shadow:none}
.btn-danger-solid{--bg:var(--danger);--fg:#fff;--bd:var(--danger)}
/* approval: a quiet green that reads as a state, not as the loudest thing on the row */
.btn-ok{--bg:var(--ok-wash);--bd:rgba(31,122,77,.24);--fg:var(--ok)}
.btn-ok:hover:not(:disabled){--bd:rgba(31,122,77,.45)}
.btn-ok.is-on{--bg:transparent;--bd:rgba(31,122,77,.35)}
.btn-ok.is-on:hover:not(:disabled){--bg:var(--ok-wash);--bd:rgba(31,122,77,.45)}
.btn-sm{font-size:13px;padding:8px 12px;border-radius:var(--r-sm)}
.btn-lg{font-size:15px;padding:14px 22px}
.btn-icon{padding:9px;border-radius:var(--r-sm)}
.btn-block{width:100%}
/* loading: the label fades, a ring spins in its place */
.btn.is-loading{color:transparent !important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;
}
.btn.is-loading:not(.btn-primary):not(.btn-gold):not(.btn-danger-solid)::after{border-color:rgba(23,34,59,.2);border-top-color:var(--navy)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- fields ---------- */
.field{margin-bottom:18px}
.field-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
label,.label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:7px}
.field-row label{margin:0}
.input,input.input,select.input,textarea.input{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 4px var(--gold-ring)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(179,38,30,.16)}
.input-lead{position:relative}
.input-lead .ic{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:13px;color:var(--ink-3);pointer-events:none}
.input-lead .input{padding-inline-start:40px}
.hint{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.err{font-size:12.5px;color:var(--danger);margin-top:6px;min-height:1px}
.link{font:inherit;font-size:13.5px;font-weight:500;color:var(--gold-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}

/* custom checkbox: no native square anywhere */
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer;user-select:none}
.check input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;
  border:1.5px solid var(--line-2);border-radius:5px;background:var(--paper);display:grid;place-items:center;
  transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.check input::before{
  content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) scale(0);transition:transform var(--fast) var(--ease);margin-top:-2px;
}
.check input:checked{background:var(--navy);border-color:var(--navy)}
.check input:checked::before{transform:rotate(-45deg) scale(1)}
.check input:active{transform:scale(.9)}

/* switch */
.switch{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.switch input{
  appearance:none;-webkit-appearance:none;width:38px;height:22px;margin:0;border-radius:var(--r-pill);
  background:var(--line-2);position:relative;transition:background-color var(--med) var(--ease);
}
.switch input::before{
  content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--med) var(--ease);
}
.switch input:checked{background:var(--navy)}
.switch input:checked::before{transform:translateX(16px)}
html[dir="rtl"] .switch input:checked::before{transform:translateX(-16px)}

/* ---------- tags & status ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  border-radius:var(--r-pill);padding:3px 10px;line-height:1.3;
  color:var(--gold-ink);background:var(--gold-wash);border:1px solid rgba(201,162,74,.35);
}
.tag-navy{color:#fff;background:var(--navy);border-color:var(--navy)}
.tag-ok{color:var(--ok);background:var(--ok-wash);border-color:rgba(31,122,77,.25)}
.tag-warn{color:var(--warn);background:var(--warn-wash);border-color:rgba(138,90,0,.25)}
.tag-danger{color:var(--danger);background:var(--danger-wash);border-color:rgba(179,38,30,.22)}
.tag-quiet{color:var(--ink-2);background:var(--paper-2);border-color:var(--line)}

/* ---------- surfaces ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.card-title{font-size:14px;font-weight:600;color:var(--navy)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ltr{direction:ltr;unicode-bidi:isolate}

.row{display:flex;align-items:center;gap:16px;padding:15px 20px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-main{min-width:0;flex:1}
.row-title{font-size:15px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sub{font-size:13px;color:var(--ink-2);margin-top:2px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.row-actions{display:flex;gap:4px;flex:none}
.row.is-new{animation:flash 1.6s var(--ease) both}

/*
 * On a phone the actions have to go under the text, not beside it. `.row-actions` is `flex:none`,
 * so on a narrow screen the buttons neither shrink nor wrap — they simply run over the name and
 * number to their left, which is what the clients list and the team list were doing. Same
 * treatment `.doc-row`, `.visit-row` and `.issue-row` already get.
 */
@media (max-width:640px){
  .row{flex-wrap:wrap;gap:10px;padding:14px 16px}
  .row-main{flex:1 1 100%}
  /* a name is worth two lines on a phone; an ellipsis in the middle of an Arabic name is not */
  .row-title{white-space:normal;overflow-wrap:anywhere}
  /* direct children only: `.row-actions` is reused inside .rem-row and .visit-row, which do
     their own wrapping, and a blanket rule here crushed those instead of helping them */
  .row > .row-actions{flex:1 1 100%;flex-wrap:wrap;gap:8px;justify-content:flex-start}
}

/*
 * 16px, and not a pixel less. iOS Safari zooms the whole page in whenever you focus an input whose
 * text is smaller than that, and the page is left scrolled sideways afterwards — which reads as
 * "the layout is broken" rather than "the keyboard opened". Fixing the size fixes the zoom at its
 * cause and leaves pinch-zoom alone, which suppressing user-scaling would not.
 */
@media (max-width:640px){
  .input,input.input,select.input,textarea.input{font-size:16px}
  /* the report's date range sets its own smaller size, which zooms just the same */
  .date-range .input{font-size:16px}
}

/*
 * Double-tap-to-zoom, gone. Safari waits ~300ms after every tap to see whether a second one is
 * coming, and on a dense list of buttons that reads as both lag and an accidental zoom. Declaring
 * `manipulation` tells it not to wait — taps land immediately and double-tap does nothing.
 *
 * Pinch-to-zoom is deliberately untouched: it is a different gesture and the browser keeps it.
 * That is why this is here rather than `user-scalable=no` on the viewport, which would have taken
 * pinch away too and is exactly what somebody reading small Arabic on a phone needs.
 */
html{touch-action:manipulation}
button,.btn,.chip,.stat,a,label,summary,[role="button"],[data-row]{touch-action:manipulation}
@keyframes flash{0%{background:var(--gold-wash)}100%{background:transparent}}

.empty{padding:48px 24px;text-align:center}
.empty-ic{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;background:var(--gold-wash);color:var(--gold-2);display:grid;place-items:center}
.empty h3{font-size:16px;margin-bottom:6px}
.empty p{color:var(--ink-2);font-size:14px;max-width:44ch;margin:0 auto 18px}

.skeleton{padding:15px 20px;border-top:1px solid var(--line)}
.skeleton:first-child{border-top:0}
.skeleton span{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,var(--paper-2) 50%,var(--line) 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skeleton span+span{margin-top:9px;width:38%}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- dialogs ---------- */
.modal-wrap{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;
  background:rgba(23,34,59,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fade var(--med) var(--ease) both;
}
.modal-wrap.is-closing{animation:fade-out var(--fast) var(--ease) both}
.modal{
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  width:100%;max-width:460px;max-height:92dvh;overflow:auto;
  animation:pop var(--med) var(--ease) both;
}
.modal-wrap.is-closing .modal{animation:pop-out var(--fast) var(--ease) both}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.modal-head h2{font-size:18px}
.modal-body{padding:16px 22px 6px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 22px}
.modal-foot .push{margin-inline-end:auto}
.x{font-size:0;color:var(--ink-3);background:none;border:0;cursor:pointer;padding:6px;border-radius:var(--r-sm);display:grid;place-items:center}
.x .ic{width:18px;height:18px}
.x:hover{color:var(--navy);background:var(--paper-2)}
.dialog-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px}
.dialog-ic.danger{background:var(--danger-wash);color:var(--danger)}
.dialog-ic.warn{background:var(--warn-wash);color:var(--warn)}
.dialog-ic.info{background:var(--gold-wash);color:var(--gold-2)}
.dialog-body{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* choice tiles, e.g. Work / Design */
.pick{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.pick{grid-template-columns:1fr}}
.pick button{
  font:inherit;text-align:start;cursor:pointer;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.pick button .ic{width:22px;height:22px;color:var(--gold-2)}
.pick button:hover{border-color:var(--gold);background:var(--gold-wash);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.pick button:active{transform:translateY(0)}
.pick b{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.pick span{font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* file drop zone */
.drop{
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:22px 16px;text-align:center;
  color:var(--ink-2);font-size:13.5px;background:var(--paper-2);
  transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease);
}
.drop.is-over{border-color:var(--gold);background:var(--gold-wash)}
.drop b{display:block;color:var(--navy);font-size:14.5px;font-weight:600;margin-bottom:4px}
.drop .ic{width:28px;height:28px;color:var(--gold-2);margin-bottom:8px}
.drop input{display:none}
.file-names{margin-top:10px;font-size:13px;color:var(--ink);word-break:break-all}

/* ---------- progress ---------- */
.progress{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;position:relative}
.progress > i{
  display:block;height:100%;width:0;border-radius:inherit;background:var(--navy);
  transition:width var(--med) var(--ease);
}
.progress.is-indeterminate > i{width:35%;animation:slide 1.2s var(--ease) infinite}
.progress.is-done > i{background:var(--ok)}
.progress.is-fail > i{background:var(--danger)}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
html[dir="rtl"] .progress.is-indeterminate > i{animation-name:slide-rtl}
@keyframes slide-rtl{0%{transform:translateX(120%)}100%{transform:translateX(-320%)}}
.progress-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin:12px 0 6px}

/* ---------- toasts ---------- */
.toasts{position:fixed;z-index:70;bottom:20px;inset-inline-end:20px;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 40px))}
.toast{
  display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:var(--r);
  background:var(--navy);color:#fff;box-shadow:var(--shadow-2);font-size:14px;line-height:1.45;
  animation:toast-in var(--slow) var(--ease) both;
}
.toast.is-leaving{animation:toast-out var(--med) var(--ease) both}
.toast .ic{width:20px;height:20px;margin-top:1px;color:var(--gold)}
.toast.ok .ic{color:#7ee0a8}
.toast.error{background:var(--danger)}
.toast.error .ic{color:#fff}
.toast b{display:block;font-weight:600}
.toast span{opacity:.85;font-size:13px}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.96)}}

/* ---------- motion vocabulary ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pop-out{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise var(--slow) var(--ease) both}
.stagger > *{animation:rise var(--slow) var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.is-leaving-row{overflow:hidden;transition:opacity var(--med) var(--ease),max-height var(--slow) var(--ease),padding var(--slow) var(--ease),margin var(--slow) var(--ease);opacity:0 !important;max-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;margin:0 !important}

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