/* Almutwakel Alhadeeth employee portal — V1.1 premium refinement (Login + Dashboard).
   Method: ui-ux-pro-max design workflow (enterprise / Minimalism-Swiss, navy structure,
   gold as a restrained accent) + animate skill rules (CSS only, transform/opacity,
   strong ease-out, hover gated to fine pointers, reduced-motion honoured).
   ALL visual values come from the tokens below — no hardcoded colours in components. */

/* ---- self-hosted fonts (no external CDN; works offline) ---- */
@font-face{font-family:"Cairo";font-weight:400;font-style:normal;font-display:swap;src:local("Cairo Regular"),local("Cairo-Regular"),url(/login/portal-assets/fonts/Cairo-Regular.ttf) format("truetype")}
@font-face{font-family:"Cairo";font-weight:600;font-style:normal;font-display:swap;src:local("Cairo SemiBold"),local("Cairo-SemiBold"),url(/login/portal-assets/fonts/Cairo-SemiBold.ttf) format("truetype")}
@font-face{font-family:"Cairo";font-weight:700;font-style:normal;font-display:swap;src:local("Cairo Bold"),local("Cairo-Bold"),url(/login/portal-assets/fonts/Cairo-Bold.ttf) format("truetype")}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(/login/portal-assets/fonts/Inter-Variable.ttf) format("truetype")}

:root{
  /* ---- colour: approved identity + derived shades ---- */
  --navy-950:#001A42; --navy-900:#00265E; --blue-700:#003A8F; --blue-600:#134B9E;
  --blue-500:#2D6FBE; --blue-200:#BCD0EA; --blue-100:#DCE8F7; --blue-50:#EEF4FC;
  --gold-500:#E6B233; --gold-400:#F3D27A;
  --ink-900:#0A1A33; --ink-700:#33445F; --ink-600:#4A5A75; --ink-500:#5B6B85;
  --white:#FFFFFF; --off-white:#F6F8FB; --tint:#EDF2F9; --line:#DCE3EE; --line-strong:#B4C1D6;
  --danger:#B42318; --danger-bg:#FEF3F2; --danger-line:#F4B6B0;
  /* ---- type ---- */
  --font-ar:"Cairo","Inter",-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --font-en:"Inter","Cairo",-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.5rem;
  /* ---- spacing (4px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  /* ---- shape ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --bw:1px; --bw-strong:1.5px;
  /* ---- elevation ---- */
  --sh-sm:0 1px 2px rgba(0,26,66,.06),0 1px 3px rgba(0,26,66,.08);
  --sh-md:0 4px 12px rgba(0,26,66,.08),0 2px 4px rgba(0,26,66,.05);
  --sh-lg:0 14px 32px rgba(0,26,66,.14),0 4px 10px rgba(0,26,66,.07);
  /* ---- focus ---- */
  --ring:0 0 0 2px var(--white),0 0 0 5px var(--blue-700);
  --ring-on-dark:0 0 0 2px var(--navy-900),0 0 0 5px var(--gold-500);
  /* ---- motion (animate skill: strong ease-out, UI < 300ms) ---- */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --t-fast:140ms; --t-base:200ms;
  --container:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font-ar);font-size:var(--fs-md);line-height:1.6;color:var(--ink-900);background:var(--off-white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}
.latin{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
svg.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;inset-inline-start:var(--s-3);top:-64px;background:var(--white);color:var(--navy-900);padding:10px var(--s-4);border-radius:var(--r-sm);z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:var(--s-3)}

/* ---- entrance: one short fade for the whole block (no stagger; content visible fast) ---- */
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.enter{animation:enter var(--t-base) var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.enter{animation:fade var(--t-base) ease both}}

/* =============================================================== LOGIN */
.split{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);direction:ltr}
.split>*{direction:rtl}

.brand{position:relative;overflow:hidden;color:var(--white);direction:ltr;display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--s-12) var(--s-16);
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(45,111,190,.40),transparent 55%),
    radial-gradient(90% 70% at 100% 100%,rgba(0,58,143,.60),transparent 62%),
    linear-gradient(160deg,var(--navy-900),var(--navy-950))}
.brand>.brand-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 25% 35%,#000 15%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 25% 35%,#000 15%,transparent 78%)}
.brand::before,.brand::after{content:"";position:absolute;pointer-events:none;border-radius:var(--r-lg);transform:rotate(45deg)}
.brand::before{width:520px;height:520px;right:-250px;bottom:-250px;border:var(--bw) solid rgba(230,178,51,.30)}
.brand::after{width:380px;height:380px;right:-180px;bottom:-180px;border:var(--bw) solid rgba(255,255,255,.10)}
.brand>*{position:relative;z-index:1}
.brand-logo{display:block;flex:none;width:112px;height:112px;border-radius:50%}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.brand-copy{max-width:30rem}
.eyebrow{margin:0 0 var(--s-4);font-size:var(--fs-xs);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400)}
.brand-name{margin:0;font-size:var(--fs-3xl);line-height:1.12;font-weight:800;letter-spacing:.01em;text-wrap:balance}
.rule{display:block;width:56px;height:3px;margin:var(--s-6) 0;background:var(--gold-500);border-radius:2px}
.brand-note{margin:0;max-width:26rem;text-wrap:balance;font-size:var(--fs-lg);line-height:1.55;font-weight:400;color:rgba(255,255,255,.82)}
.brand-foot{margin:0;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}

.panel{display:grid;place-items:center;padding:var(--s-12) var(--s-8);background:var(--white)}
.form-wrap{width:100%;max-width:400px}
.form-eyebrow{margin:0 0 var(--s-2);text-align:end;font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-700)}
.form-wrap h1{margin:0;font-size:var(--fs-2xl);line-height:1.25;font-weight:700;color:var(--navy-900)}
.form-wrap .bar{display:block;width:36px;height:3px;margin:var(--s-3) 0 var(--s-4);background:var(--gold-500);border-radius:2px}
.lead{margin:0;color:var(--ink-600);font-size:var(--fs-md)}
.lead-en{margin:var(--s-1) 0 0;text-align:end;color:var(--ink-500);font-size:var(--fs-sm)}
form{margin-top:var(--s-8)}
.field{margin-bottom:var(--s-5)}
.field label{display:block;margin-bottom:var(--s-2);font-weight:600;font-size:var(--fs-sm);color:var(--ink-900)}
.control{position:relative}
.control .lead-ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink-500);pointer-events:none;display:grid;place-items:center}
.control input{width:100%;height:52px;padding:0 var(--s-4);padding-inline-start:44px;border:var(--bw-strong) solid var(--line-strong);border-radius:var(--r-md);background:var(--white);
  font:inherit;font-family:var(--font-en);font-size:var(--fs-md);color:var(--ink-900);direction:ltr;text-align:start;
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.control input:hover{border-color:var(--blue-500)}
.control input:focus-visible{border-color:var(--blue-700);box-shadow:0 0 0 4px rgba(0,58,143,.18);border-radius:var(--r-md)}
.control input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
.control.has-toggle input{padding-inline-end:52px}
.control .toggle{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:var(--ink-500);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.control .toggle[aria-pressed="true"]{color:var(--blue-700)}
.btn-primary{width:100%;height:52px;margin-top:var(--s-2);border:0;border-radius:var(--r-md);background:var(--blue-700);color:var(--white);font:inherit;font-weight:700;font-size:var(--fs-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  box-shadow:var(--sh-md),inset 0 -2px 0 rgba(0,0,0,.14);
  transition:background-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.btn-primary .arrow{transition:transform var(--t-base) var(--ease-out)}
.btn-primary:active{transform:scale(.985)}
.btn-primary:focus-visible{box-shadow:var(--ring)}
.btn-primary[disabled]{background:var(--blue-600);opacity:.78;cursor:progress;box-shadow:none}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:var(--white);border-radius:50%;animation:spin .8s linear infinite;display:none}
.is-loading .spinner{display:inline-block}.is-loading .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{display:none;gap:var(--s-3);align-items:flex-start;background:var(--danger-bg);color:var(--danger);border:var(--bw) solid var(--danger-line);border-inline-start:4px solid var(--danger);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-top:var(--s-6);font-size:var(--fs-sm);font-weight:500}
.alert.show{display:flex;animation:fade var(--t-fast) ease both}
.alert:focus-visible{box-shadow:var(--ring)}
.form-foot{margin:var(--s-8) 0 0;text-align:center;font-size:var(--fs-sm)}
.form-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue-700);font-weight:600;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .control .toggle:hover{color:var(--blue-700);background:var(--blue-50)}
  .btn-primary:hover{background:var(--navy-900);box-shadow:var(--sh-lg),inset 0 -2px 0 rgba(0,0,0,.18)}
  .btn-primary:hover .arrow{transform:translateX(-3px)}
  .form-foot a:hover{color:var(--navy-900)}
}

/* login — tablet / mobile: the brand panel becomes a compact premium header */
@media (max-width:959px){
  .split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .brand{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--s-4);padding:var(--s-6) var(--s-6) var(--s-12);border-bottom:3px solid var(--gold-500)}
  .brand::before,.brand::after{display:none}
  .brand-logo,.brand-logo img{width:64px;height:64px}
  .brand-copy{max-width:none}
  .eyebrow{margin:0 0 var(--s-1);font-size:.6875rem;letter-spacing:.18em}
  .brand-name{font-size:var(--fs-lg);line-height:1.2;letter-spacing:.04em}
  .rule,.brand-note,.brand-foot{display:none}
  .panel{display:block;align-self:start;padding:0 var(--s-4) var(--s-8);background:transparent;margin-top:calc(var(--s-8) * -1)}
  .form-wrap{max-width:480px;margin:0 auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:var(--s-8) var(--s-6)}
  .form-wrap h1{font-size:var(--fs-xl)}
  form{margin-top:var(--s-6)}
  .field{margin-bottom:var(--s-4)}
}
@media (max-width:379px){.brand{padding-inline:var(--s-4)}.form-wrap{padding:var(--s-6) var(--s-4)}.brand-name{font-size:var(--fs-md)}}

/* ============================================================ DASHBOARD */
.topbar{position:relative;overflow:hidden;color:var(--white);background:linear-gradient(180deg,var(--navy-900),var(--navy-950));border-bottom:3px solid var(--gold-500)}
.topbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
.topbar-in{position:relative;max-width:var(--container);margin:0 auto;padding:var(--s-4) var(--s-6);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.id{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.id img{width:56px;height:56px;object-fit:contain;flex:none}
.id .sep{width:1px;align-self:stretch;margin-block:var(--s-1);background:rgba(255,255,255,.22)}
.id .t{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.id .company{font-weight:700;font-size:var(--fs-xl);line-height:1.2;letter-spacing:.02em;overflow-wrap:anywhere}
.id .line{font-weight:500;font-size:var(--fs-xs);letter-spacing:.2em;color:var(--gold-400);text-transform:uppercase}
.who{display:flex;align-items:center;gap:var(--s-3)}
.chip{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-4) 0 var(--s-3);background:rgba(255,255,255,.08);border:var(--bw) solid rgba(255,255,255,.22);border-radius:var(--r-pill);font-size:var(--fs-sm);max-width:260px}
.chip .av{width:28px;height:28px;border-radius:50%;background:var(--blue-700);border:var(--bw) solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none}
.chip .av svg{width:16px;height:16px}
.chip span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-ghost{height:44px;padding:0 var(--s-4);display:inline-flex;align-items:center;gap:var(--s-2);background:transparent;color:var(--white);border:var(--bw) solid rgba(255,255,255,.45);border-radius:var(--r-pill);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.btn-ghost:active{transform:scale(.97)}
.topbar :focus-visible{box-shadow:var(--ring-on-dark)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white)}}

main.wrap{max-width:var(--container);margin:0 auto;padding:var(--s-12) var(--s-6) var(--s-16)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-8)}
.head h1{margin:0;font-size:var(--fs-2xl);line-height:1.25;font-weight:700;color:var(--navy-900)}
.head .bar{display:block;width:40px;height:3px;margin-top:var(--s-3);background:var(--gold-500);border-radius:2px}
.head .meta{margin:0;font-size:var(--fs-sm);color:var(--ink-600);display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.head .meta b{color:var(--navy-900);font-weight:700}
.head .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.grid>li{display:flex}
.card{position:relative;flex:1;display:flex;flex-direction:column;gap:var(--s-4);min-height:208px;padding:var(--s-6);border-radius:var(--r-lg);text-decoration:none;color:inherit}
.card .top{display:flex;align-items:center;justify-content:space-between}
.card .ic{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center}
.card .ic svg{width:26px;height:26px}
.card .no{font-family:var(--font-en);font-weight:600;font-size:var(--fs-sm);letter-spacing:.12em}
.card .body{flex:1}
.card .nm{font-size:var(--fs-lg);font-weight:700;line-height:1.3}
.card .ds{margin-top:var(--s-1);font-size:var(--fs-sm);line-height:1.5}
.card .st{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:40px}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600}
.pill svg{width:16px;height:16px}

/* active — PIM */
.card.active{background:var(--white);border:var(--bw) solid var(--blue-200);box-shadow:var(--sh-sm);cursor:pointer;overflow:hidden;
  transition:box-shadow var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.card.active::before{content:"";position:absolute;top:-1px;inset-inline-start:var(--s-6);width:44px;height:4px;background:var(--gold-500);border-radius:0 0 4px 4px}
.card.active .ic{background:linear-gradient(145deg,var(--blue-600),var(--blue-700));color:var(--white);box-shadow:var(--sh-md),inset 0 1px 0 rgba(255,255,255,.2)}
.card.active .no{color:var(--blue-700)}
.card.active .nm{font-family:var(--font-en);font-size:var(--fs-2xl);font-weight:800;letter-spacing:.04em;color:var(--navy-900);line-height:1.15}
.card.active .ds{color:var(--ink-600)}
.card.active .pill{background:var(--blue-50);color:var(--blue-700);border:var(--bw) solid var(--blue-100)}
.card.active .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-700);transition:background-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.card.active:active{transform:scale(.99);transition-duration:var(--t-fast)}
.card.active:focus-visible{box-shadow:var(--ring);border-radius:var(--r-lg)}
@media (hover:hover) and (pointer:fine){
  .card.active:hover{transform:translateY(-2px);border-color:var(--blue-700);box-shadow:var(--sh-lg)}
  .card.active:hover .go{background:var(--gold-500);color:var(--navy-900);transform:translateX(-3px)}
}

/* locked — intentional, quiet, not broken */
.card.locked{background:linear-gradient(180deg,var(--off-white),var(--tint));border:var(--bw) solid var(--line);color:var(--ink-500);cursor:not-allowed;user-select:none}
.card.locked .ic{background:var(--white);border:var(--bw) solid var(--line);color:var(--ink-500)}
.card.locked .no{color:var(--ink-500)}
.card.locked .nm{color:var(--ink-600);font-weight:600}
.card.locked .ds{color:var(--ink-500)}
.card.locked .pill{background:var(--white);color:var(--ink-600);border:var(--bw) solid var(--line-strong)}

.foot{max-width:var(--container);margin:0 auto;padding:0 var(--s-6) var(--s-8);color:var(--ink-500);font-size:var(--fs-xs);letter-spacing:.1em}

/* dashboard — tablet */
@media (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* dashboard — mobile: compact horizontal cards, same 9 / 1 / 8 structure */
@media (max-width:639px){
  .topbar-in{padding:var(--s-4)}
  .id img{width:48px;height:48px}
  .id .company{font-size:var(--fs-lg);letter-spacing:.01em}
  .id .line{letter-spacing:.14em}
  .who{width:100%;justify-content:space-between}
  main.wrap{padding:var(--s-8) var(--s-4) var(--s-12)}
  .head{margin-bottom:var(--s-6)}
  .head h1{font-size:var(--fs-xl)}
  .grid{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .card{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s-4);padding:var(--s-4)}
  .card .top{display:contents}
  .card .no{display:none}
  .card .body{flex:none}
  .card.active .nm{font-size:var(--fs-xl)}
  .card .st{gap:var(--s-2);min-height:0}
  .card.active .go{display:none}
  .card.active::before{inset-inline-start:var(--s-4)}
  .foot{padding-inline:var(--s-4)}
}
@media (max-width:359px){.chip{max-width:150px}}