/* =====================================================================
   AZ HR · PRO THEME  —  "Navy Command"
   طبقة تصميم احترافية تُحمَّل بعد الأنماط الأصلية وتعيد تشكيل الواجهة
   بالكامل بهوية عز الموارد: كحلي · أزرق ملكي · رصاصي · ذهبي · أبيض
   الاستخدام: <link rel="stylesheet" href="/az-hr-pro.css"> قبل </head>
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ---------------------------------------------------------------- TOKENS */
:root{
  --navy-950:#07101F; --navy-900:#0B1A33; --navy-800:#12264A; --navy-700:#1B3459;
  --navy-600:#24457A; --navy-500:#2F5A9A; --navy-400:#3C69AE; --navy-300:#6E95CF;
  --gold-500:#C9A04E; --gold-400:#DDB96A; --gold-300:#EFD49A;

  --ground:#EEF2F8; --panel:#FFFFFF; --panel-2:#F4F7FC; --line:#D6DEEA; --line-soft:#E6ECF4;
  --ink:#0E1B31; --ink-2:#3C4D69; --ink-3:#7686A0;
  --accent:#24457A; --accent-2:#3C69AE; --accent-soft:#E4ECF8; --accent-ink:#1B3459;
  --steel:#8A97AC; --gold:var(--gold-500);
  --good:#15805C; --good-soft:#DDF1E8; --warn:#B07A12; --warn-soft:#FBEFD6;
  --crit:#B63A31; --crit-soft:#FBE3E0; --info:#2A6396; --info-soft:#E0EBF6;

  --radius:16px; --radius-sm:11px; --rail:284px;
  --shadow:0 1px 1px rgba(14,27,49,.04), 0 2px 4px rgba(14,27,49,.04), 0 14px 32px -18px rgba(14,27,49,.28);
  --shadow-lg:0 2px 4px rgba(14,27,49,.06), 0 28px 60px -28px rgba(14,27,49,.45);
  --glow:0 0 0 1px rgba(60,105,174,.18), 0 18px 40px -20px rgba(36,69,122,.55);
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-ui:"Tajawal","Segoe UI",system-ui,sans-serif;
  --f-head:"Outfit","Tajawal",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --f-num:"Outfit","Tajawal",system-ui,sans-serif;
  --mesh:
    radial-gradient(900px 520px at 100% -10%, rgba(60,105,174,.13), transparent 60%),
    radial-gradient(700px 480px at -10% 30%, rgba(201,160,78,.07), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(36,69,122,.08), transparent 60%);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#070F1D; --panel:#0E1A2F; --panel-2:#12213A; --line:#233655; --line-soft:#1A2A45;
  --ink:#E9EFFA; --ink-2:#AFBED6; --ink-3:#7688A6;
  --accent:#6C97D8; --accent-2:#8FB2E6; --accent-soft:#15284A; --accent-ink:#B4CDF2;
  --good:#4FC093; --good-soft:#0D2C22; --warn:#E0AF4F; --warn-soft:#2F2511; --crit:#EE857C; --crit-soft:#35191A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -18px rgba(0,0,0,.9);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,.95);
  --glow:0 0 0 1px rgba(143,178,230,.22), 0 18px 44px -18px rgba(60,105,174,.6);
  --mesh:
    radial-gradient(900px 520px at 100% -10%, rgba(60,105,174,.22), transparent 60%),
    radial-gradient(700px 480px at -10% 30%, rgba(201,160,78,.08), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(36,69,122,.2), transparent 60%);
}}
:root[data-theme="dark"]{
  --ground:#070F1D; --panel:#0E1A2F; --panel-2:#12213A; --line:#233655; --line-soft:#1A2A45;
  --ink:#E9EFFA; --ink-2:#AFBED6; --ink-3:#7688A6;
  --accent:#6C97D8; --accent-2:#8FB2E6; --accent-soft:#15284A; --accent-ink:#B4CDF2;
  --good:#4FC093; --good-soft:#0D2C22; --warn:#E0AF4F; --warn-soft:#2F2511; --crit:#EE857C; --crit-soft:#35191A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -18px rgba(0,0,0,.9);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -26px rgba(0,0,0,.95);
  --glow:0 0 0 1px rgba(143,178,230,.22), 0 18px 44px -18px rgba(60,105,174,.6);
  --mesh:
    radial-gradient(900px 520px at 100% -10%, rgba(60,105,174,.22), transparent 60%),
    radial-gradient(700px 480px at -10% 30%, rgba(201,160,78,.08), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(36,69,122,.2), transparent 60%);
}

/* ---------------------------------------------------------------- BASE */
body{background:var(--ground); background-image:var(--mesh); background-attachment:fixed; font-size:14.5px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--accent-2) 30%,transparent)}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--steel) 45%,transparent); border-radius:99px; border:3px solid transparent; background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--steel)}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:8px}

/* ================================================================ LOGIN GATE */
.gate{
  background:
    radial-gradient(1200px 700px at 85% -20%, rgba(60,105,174,.55), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(201,160,78,.20), transparent 60%),
    linear-gradient(155deg, var(--navy-950) 0%, var(--navy-900) 40%, var(--navy-700) 100%);
}
.gate::before{opacity:.22; background-size:44px 44px; animation:gridDrift 40s linear infinite}
.gate::after{
  content:""; position:absolute; width:720px; height:720px; border-radius:50%; pointer-events:none;
  inset-inline-end:-220px; top:-260px; filter:blur(30px); opacity:.4;
  background:conic-gradient(from 0deg, rgba(60,105,174,.0), rgba(60,105,174,.55), rgba(201,160,78,.35), rgba(60,105,174,.0));
  animation:spin 26s linear infinite;
}
@keyframes gridDrift{to{background-position:44px 44px, 44px 44px}}
@keyframes spin{to{transform:rotate(360deg)}}
.gate-inner{
  width:min(1080px,100%); border-radius:28px; z-index:1;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  animation:gateIn .8s var(--ease);
}
.gate-brand{
  padding:56px 52px; gap:26px;
  background:
    radial-gradient(500px 300px at 0% 0%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.gate-brand .crest{width:96px; height:96px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.gate-brand h1{font-size:44px; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 30%, #BFD2F0); -webkit-background-clip:text; background-clip:text; color:transparent}
.gate-brand .en{font-family:var(--f-head); font-weight:700; font-size:18px; letter-spacing:.5em;
  background:linear-gradient(90deg, var(--gold-300), var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent}
.gate-brand .rule{border:0; width:100%; margin:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--gold-400), rgba(255,255,255,.25) 40%, transparent)}
.gate-brand p{font-size:15px; color:#C3D1E8; line-height:1.9}
.gate-brand ul{gap:12px; font-size:14.5px; color:#DCE6F6}
.gate-brand ul li{padding:8px 10px; border-radius:14px; transition:background .25s, transform .25s var(--ease)}
.gate-brand ul li:hover{background:rgba(255,255,255,.06); transform:translateX(-4px)}
.gate-brand ul li span{width:38px; height:38px; border-radius:12px; font-size:17px;
  background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(0,0,0,.6)}
.gate-brand ul li{animation:riseIn .6s var(--ease) backwards}
.gate-brand ul li:nth-child(2){animation-delay:.08s}.gate-brand ul li:nth-child(3){animation-delay:.16s}.gate-brand ul li:nth-child(4){animation-delay:.24s}
@keyframes riseIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.gate-form{padding:56px 52px; gap:18px; position:relative}
.gate-form::before{content:""; position:absolute; inset-inline:52px; top:0; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--navy-400), var(--gold-500))}
.gate-form h2{font-size:28px; font-weight:800; color:var(--ink)}
.gate-form .sub{font-size:14px}
.gate-form label{font-family:var(--f-ui); font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink-2); margin-bottom:7px}
.gate-form input[type=text],.gate-form input[type=password]{
  padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel-2); font-size:15px;
  transition:border-color .2s, box-shadow .25s, background .2s}
.gate-form input[type=text]:hover,.gate-form input[type=password]:hover{border-color:var(--navy-300)}
.gate-form input:focus{background:var(--panel); border-color:var(--accent-2); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-2) 16%,transparent)}
.gate-form .go{
  position:relative; overflow:hidden; padding:15px; border-radius:14px; font-size:16px; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(120deg, var(--navy-700), var(--navy-400) 60%, var(--navy-500));
  background-size:200% 100%; box-shadow:0 16px 30px -14px rgba(36,69,122,.9), inset 0 1px 0 rgba(255,255,255,.2);
  transition:background-position .6s var(--ease), transform .2s var(--ease), box-shadow .3s}
.gate-form .go::after{content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition:transform .8s var(--ease)}
.gate-form .go:hover{background-position:100% 0; transform:translateY(-2px); box-shadow:0 22px 36px -14px rgba(36,69,122,1)}
.gate-form .go:hover::after{transform:translateX(120%)}
.gate-form .seg{border-radius:12px}
.gate-row label{white-space:nowrap; margin:0 !important; font-weight:600; color:var(--ink-2)}

/* ================================================================ SHELL · RAIL */
.rail{
  background:
    radial-gradient(420px 320px at 100% 0%, rgba(60,105,174,.45), transparent 70%),
    radial-gradient(360px 300px at 0% 100%, rgba(201,160,78,.14), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border-inline-end:1px solid rgba(255,255,255,.06);
  box-shadow:6px 0 40px -18px rgba(7,16,31,.8);
}
.rail::before{opacity:.35; background-size:18px 18px}
.brand{padding:22px 20px 20px; background:transparent; border-bottom:1px solid rgba(255,255,255,.07)}
.brand .crest{width:44px; height:44px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.brand h1{font-size:18px; font-weight:800}
.brand .sub{font-family:var(--f-head); letter-spacing:.42em; font-size:10.5px;
  background:linear-gradient(90deg, var(--gold-300), var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav{padding:14px 12px 30px}
.nav-group{margin-top:10px}
.nav-group > .ttl{font-family:var(--f-ui); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:none;
  color:rgba(255,255,255,.38); padding:10px 10px 8px}
.nav-group > .ttl::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--gold-500); opacity:.7; flex:none}
.nav a{padding:9px 10px; border-radius:12px; font-size:14.5px; font-weight:500; color:rgba(226,234,248,.74);
  transition:background .2s, color .2s, transform .25s var(--ease)}
.nav a .ic{width:30px; height:30px; border-radius:10px; font-size:15px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06)}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff; transform:translateX(-3px)}
body[data-lang="en"] .nav a:hover{transform:translateX(3px)}
.nav a.on{
  color:#fff; font-weight:700;
  background:linear-gradient(100deg, rgba(60,105,174,.55), rgba(60,105,174,.18) 70%, transparent);
  box-shadow:inset 0 0 0 1px rgba(143,178,230,.22), 0 10px 24px -14px rgba(0,0,0,.8);
}
.nav a.on::before{inset-inline-start:-12px; width:4px; top:18%; bottom:18%; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500)); box-shadow:0 0 14px 2px rgba(221,185,106,.55)}
.nav a.on .ic{background:linear-gradient(145deg, var(--navy-400), var(--navy-600)); border-color:rgba(255,255,255,.18);
  box-shadow:0 6px 14px -6px rgba(60,105,174,.9)}
.nav a .cnt{font-family:var(--f-num); font-weight:600; background:rgba(255,255,255,.07); color:rgba(255,255,255,.6)}
.nav a.on .cnt{background:var(--gold-500); color:var(--navy-950)}

/* ================================================================ TOPBAR (glass) */
.topbar{
  margin:12px 16px 0; border-radius:18px; padding:10px 14px 10px 16px; gap:10px;
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow:var(--shadow);
  top:12px;
}
.topbar .crumb{font-family:var(--f-head); font-size:15px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink);
  display:flex; align-items:center; gap:10px; white-space:nowrap}
.topbar .crumb::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 20%,transparent); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--good) 0%,transparent)}}
.search{min-width:280px; border-radius:12px; padding:8px 12px; background:var(--panel-2); border:1px solid var(--line-soft);
  transition:box-shadow .25s, border-color .2s, min-width .35s var(--ease)}
.search:focus-within{min-width:340px; border-color:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 15%,transparent)}
.search input{color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search svg{color:var(--ink-3)}
.who{color:var(--ink-3); background:var(--panel-2); border:1px solid var(--line-soft); padding:5px 12px 5px 6px; border-radius:99px}
.who > span:first-child{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(145deg, var(--navy-400), var(--navy-700)); font-size:12px}
.who b{color:var(--ink)}
.topbar .btn{background:var(--panel-2); border-color:var(--line-soft); color:var(--ink-2); border-radius:11px; min-height:36px; min-width:36px; justify-content:center}
.topbar .btn:hover{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent); color:var(--accent-ink); transform:translateY(-1px)}
.topbar .btn.p{color:#fff; background:linear-gradient(120deg, var(--navy-600), var(--navy-400)); border-color:transparent; color:#fff; padding-inline:18px; font-weight:700;
  box-shadow:0 10px 20px -10px rgba(36,69,122,.9)}
.topbar .btn.p:hover{filter:brightness(1.08); color:#fff; background:linear-gradient(120deg, var(--navy-600), var(--navy-400))}
.topbar .btn.d{color:var(--crit); border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.topbar .seg{border-color:var(--line-soft); border-radius:11px; background:var(--panel-2); padding:3px; gap:2px}
.topbar .seg button{background:transparent; color:var(--ink-3); border-radius:8px; border:0 !important; padding:4px 11px; font-weight:700}
.topbar .seg button.on{background:var(--panel); color:var(--accent-ink); box-shadow:0 2px 6px -2px rgba(14,27,49,.25)}
.topbar .menu-btn{background:var(--panel-2); border-color:var(--line-soft); color:var(--ink)}
.notif-badge{border-color:var(--panel); background:var(--crit); animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ================================================================ VIEW / PAGE HEAD */
.view{padding:26px 28px 40px; animation:viewIn .5s var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.page-head{margin-bottom:22px; padding:22px 24px; border-radius:22px; position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(201,160,78,.30), transparent 70%),
    radial-gradient(520px 260px at 100% 120%, rgba(110,149,207,.45), transparent 70%),
    linear-gradient(120deg, var(--navy-900), var(--navy-600) 70%, var(--navy-400));
  box-shadow:var(--shadow-lg)}
.page-head::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size:16px 16px;
  mask-image:linear-gradient(90deg,#000,transparent 55%); -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%)}
.page-head > *{position:relative; z-index:1}
.page-head h2{font-size:26px; font-weight:800; color:#fff}
.page-head h2 span{width:46px; height:46px; border-radius:14px; font-size:21px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -10px rgba(0,0,0,.6)}
.page-head .lede{color:rgba(230,238,250,.82); font-size:14px}
.page-head .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; border-radius:11px}
.page-head .btn:hover{background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.4)}
.page-head .btn.p{background:#fff; color:var(--navy-700); border-color:#fff; font-weight:700}

/* ================================================================ HERO STAT BOXES (sb-*) */
.sb-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px}
@media (min-width:1760px){.sb-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:760px){.sb-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}}
.sb-box{
  border-radius:20px; isolation:isolate; min-height:148px;
  box-shadow:0 22px 40px -24px rgba(7,16,31,.75), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  animation:riseIn .6s var(--ease) backwards;
}
.sb-grid > :nth-child(2){animation-delay:.05s}.sb-grid > :nth-child(3){animation-delay:.1s}
.sb-grid > :nth-child(4){animation-delay:.15s}.sb-grid > :nth-child(5){animation-delay:.2s}.sb-grid > :nth-child(6){animation-delay:.25s}
.sb-box::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(260px 160px at var(--mx,85%) var(--my,0%), rgba(255,255,255,.28), transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px)}
.sb-box::after{content:""; position:absolute; width:180px; height:180px; border-radius:50%; inset-inline-start:-50px; bottom:-90px;
  border:26px solid rgba(255,255,255,.07); pointer-events:none; transition:transform .6s var(--ease)}
.sb-box:hover{transform:translateY(-5px) scale(1.01); box-shadow:0 34px 60px -26px rgba(7,16,31,.85), inset 0 1px 0 rgba(255,255,255,.25)}
.sb-box:hover::after{transform:scale(1.25)}
.sb-box .sb-inner{padding:20px 20px 12px; padding-inline-end:84px}
.sb-box h3{font-family:var(--f-num); font-weight:800; font-size:clamp(26px,2.5vw,38px); letter-spacing:-.03em; margin-bottom:8px; white-space:nowrap; text-shadow:0 4px 18px rgba(0,0,0,.2)}
.sb-box p{font-size:13.5px; font-weight:700; opacity:.95}
.sb-box .sb-ic{font-size:30px; opacity:1; top:16px; inset-inline-end:16px; width:54px; height:54px; display:grid; place-items:center;
  border-radius:16px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px -10px rgba(0,0,0,.5); backdrop-filter:blur(4px)}
.sb-box:hover .sb-ic{transform:rotate(-8deg) scale(1.1)}
.sb-box .sb-foot{margin:0 12px 12px; padding:7px 12px; border-radius:11px; background:rgba(7,16,31,.2); font-size:12px; font-weight:500;
  border:1px solid rgba(255,255,255,.1)}
.sb-navy{background:linear-gradient(135deg, var(--navy-400) 0%, var(--navy-600) 55%, var(--navy-800) 100%)}
.sb-gold{background:linear-gradient(135deg, #D6AE5E 0%, #B18A3C 50%, #7A5B1F 100%)}
.sb-good{background:linear-gradient(135deg, #34B585 0%, #15805C 60%, #0D5C42 100%)}
.sb-warn{background:linear-gradient(135deg, #E9B44F 0%, #B07A12 60%, #7F560A 100%)}
.sb-crit{background:linear-gradient(135deg, #E8736A 0%, #B63A31 60%, #83241E 100%)}
.sb-slate{background:linear-gradient(135deg, #5B6D8C 0%, #34445F 60%, #1D2A40 100%)}

/* ================================================================ INFO BOXES (ib-*) */
.ib-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:22px}
.ib-box{position:relative; overflow:hidden; gap:14px; padding:14px 16px; border-radius:16px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.ib-box::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(220px 120px at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--accent-2) 14%,transparent), transparent 70%)}
.ib-box:hover{transform:translateY(-3px); box-shadow:var(--glow); border-color:color-mix(in srgb,var(--accent-2) 35%,transparent)}
.ib-box:hover::before{opacity:1}
.ib-ic{width:48px; height:48px; border-radius:14px; font-size:21px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 18px -10px rgba(7,16,31,.7)}
.ib-num{font-family:var(--f-num); font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.ib-text{font-size:12px; font-weight:500; color:var(--ink-3)}
.ib-navy{background:linear-gradient(145deg, var(--navy-400), var(--navy-700))}
.ib-gold{background:linear-gradient(145deg, var(--gold-400), #96712A)}
.ib-good{background:linear-gradient(145deg, #34B585, #0F6A4B)}
.ib-warn{background:linear-gradient(145deg, #E9B44F, #946409)}
.ib-crit{background:linear-gradient(145deg, #E8736A, #93291F)}
.ib-slate{background:linear-gradient(145deg, #5B6D8C, #26344C)}

/* ================================================================ LEGACY TILES */
.tiles{gap:12px}
.tile{border-radius:16px; padding:15px 16px; background:linear-gradient(180deg,var(--panel),var(--panel-2)); transition:transform .3s var(--ease), box-shadow .3s}
.tile:hover{transform:translateY(-3px); box-shadow:var(--glow)}
.tile .k{font-family:var(--f-ui); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none}
.tile .v{font-family:var(--f-num); font-weight:800; font-size:28px}
.tile::after{inset-block:14px; width:4px; border-radius:4px}

/* ================================================================ CARDS */
.card{border-radius:var(--radius); border:1px solid var(--line-soft); box-shadow:var(--shadow); margin-bottom:18px;
  background:var(--panel); transition:box-shadow .3s}
.card:hover{box-shadow:var(--shadow-lg)}
.card > header{padding:14px 18px; background:transparent; border-top:0; border-bottom:1px solid var(--line-soft); position:relative; gap:12px}
.card > header::before{content:""; width:4px; height:20px; border-radius:4px; flex:none;
  background:linear-gradient(180deg, var(--navy-300), var(--navy-600))}
.card.alte-gold > header::before{background:linear-gradient(180deg, var(--gold-300), var(--gold-500))}
.card.alte-good > header::before{background:linear-gradient(180deg, #5FD3A6, var(--good))}
.card.alte-warn > header::before{background:linear-gradient(180deg, #F2C774, var(--warn))}
.card > header h3{font-size:15px; font-weight:800; color:var(--ink)}
.card > header .hint{font-size:12px; padding:3px 10px; border-radius:99px; background:var(--panel-2); border:1px solid var(--line-soft)}
.card .body{padding:18px}
.split{gap:18px}

/* ================================================================ TABLES */
table{font-size:13.5px; border-collapse:separate; border-spacing:0}
th{font-family:var(--f-ui); font-size:12px; font-weight:800; letter-spacing:.01em; text-transform:none;
  color:var(--ink-2); background:var(--panel-2); border-bottom:1px solid var(--line); padding:11px 14px}
td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:nth-child(odd), tbody tr:nth-child(even){background:transparent}
tbody tr{transition:background .15s}
tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 70%,transparent) !important}
tbody tr:hover td:first-child{box-shadow:inset -3px 0 0 var(--accent-2)}
body[data-lang="en"] tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent-2)}
tbody tr:last-child td{border-bottom:0}
td.n, th.n{font-family:var(--f-num); font-weight:500}
.rowact{opacity:.25; transition:opacity .2s}
.iconbtn{border-radius:8px; padding:4px 7px}

/* ================================================================ BUTTONS / PILLS / CHIPS */
.btn{border-radius:11px; padding:7px 14px; font-weight:600; transition:all .2s var(--ease); border-color:var(--line)}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 16px -10px rgba(14,27,49,.4)}
.btn.p{color:#fff; background:linear-gradient(120deg, var(--navy-600), var(--navy-400)); border-color:transparent; box-shadow:0 8px 18px -10px rgba(36,69,122,.9)}
.btn.p:hover{background:linear-gradient(120deg, var(--navy-700), var(--navy-500)); border-color:transparent}
.btn.sm{padding:4px 10px; border-radius:9px}
.seg{border-radius:11px}
.pill{border-radius:99px !important; font-weight:700; padding-inline:10px}
.chip{border-radius:99px !important; transition:all .2s}
.chip.on{background:linear-gradient(120deg, var(--navy-600), var(--navy-400)) !important; color:#fff !important; border-color:transparent !important}
.filters select,.filters input{border-radius:11px !important}

/* ================================================================ GAUGES / BARS */
.gauge-row{gap:14px !important; padding:18px !important}
.gauge-card{border-radius:16px !important; background:linear-gradient(180deg, var(--panel), var(--panel-2)) !important;
  border:1px solid var(--line-soft) !important; transition:transform .3s var(--ease), box-shadow .3s !important}
.gauge-card:hover{transform:translateY(-4px); box-shadow:var(--glow) !important}
.gauge-lbl b{font-family:var(--f-ui); font-weight:800}
.bar{border-radius:99px !important; overflow:hidden}
.bar > i{border-radius:99px !important; background:linear-gradient(90deg, var(--navy-300), var(--navy-600)) !important}
.bar > i.g{background:linear-gradient(90deg, #5FD3A6, var(--good)) !important}
.bar > i.w{background:linear-gradient(90deg, #F2C774, var(--warn)) !important}
.bar > i.c{background:linear-gradient(90deg, #F09A92, var(--crit)) !important}
.hbar-track{border-radius:99px !important}
.hbar-fill{border-radius:99px !important; background:linear-gradient(90deg, var(--navy-300), var(--navy-600)) !important}

/* ================================================================ FORMS / MODAL / TOAST */
.f label{font-family:var(--f-ui) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--ink-2) !important}
.f input,.f select,.f textarea{border-radius:12px !important; padding:10px 12px !important; border:1.5px solid var(--line) !important; background:var(--panel-2) !important; transition:all .2s}
.f input:focus,.f select:focus,.f textarea:focus{background:var(--panel) !important; border-color:var(--accent-2) !important; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 15%,transparent) !important}
.scrim{background:rgba(7,16,31,.55) !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.modal{border-radius:22px !important; overflow:hidden; box-shadow:0 60px 120px -40px rgba(0,0,0,.8) !important; border:1px solid var(--line-soft) !important;
  animation:modalIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0; transform:translateY(18px) scale(.97)}to{opacity:1; transform:none}}
.modal > header{background:linear-gradient(120deg, var(--navy-800), var(--navy-500)) !important; color:#fff !important; border:0 !important; padding:16px 20px !important}
.modal > header h3{color:#fff !important}
.modal > header .iconbtn{color:#fff}
.modal > footer{background:var(--panel-2) !important}
.toast{border-radius:14px !important; box-shadow:var(--shadow-lg) !important; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--navy-800) 92%, transparent) !important; color:#fff !important; border:1px solid rgba(255,255,255,.1) !important;
  animation:riseIn .4s var(--ease)}
.empty{border-radius:16px !important}

/* ================================================================ ORG CHART / 9-BOX / PROFILE */
.org-box{border-radius:14px !important; box-shadow:var(--shadow) !important; transition:transform .25s var(--ease), box-shadow .25s !important}
.org-box:hover{transform:translateY(-3px); box-shadow:var(--glow) !important}
.box9 .cell{border-radius:14px !important; transition:transform .25s var(--ease)}
.box9 .cell:hover{transform:scale(1.02)}
.prof-head{border-radius:20px !important; background:linear-gradient(120deg, var(--navy-900), var(--navy-500)) !important; color:#fff}
.prof-avatar{box-shadow:0 0 0 4px rgba(255,255,255,.2), 0 14px 28px -12px rgba(0,0,0,.6) !important}
.gradebar .track{border-radius:99px !important}

/* ================================================================ RESPONSIVE */
@media (max-width:900px){
  .topbar{margin:8px 8px 0; top:8px; border-radius:14px}
  .search{min-width:0; flex:1}
  .search:focus-within{min-width:0}
  .view{padding:18px 14px 30px}
  .page-head{padding:18px; border-radius:18px}
  .rail{box-shadow:0 0 80px rgba(0,0,0,.6)}
}
@media (max-width:640px){
  .sb-box h3{font-size:32px}
  .who{display:none}
  .gate-brand h1{font-size:34px}
  .gate-brand, .gate-form{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){
  .gate::before,.gate::after,.topbar .crumb::before{animation:none}
}
@media print{
  body{background:#fff !important}
  .page-head{background:none !important; color:#000; box-shadow:none}
  .page-head h2{color:#000}
}

/* =====================================================================
   v2 · MODERN REFINEMENTS
   ===================================================================== */
:root{
  --edge:linear-gradient(160deg, rgba(60,105,174,.38), rgba(60,105,174,0) 38%, rgba(201,160,78,0) 62%, rgba(201,160,78,.32));
  --lR:#3C69AE; --lA:#C9A04E; --lC:#1F9E78; --lI:#7D8BA3;
}
:root[data-theme="dark"]{ --edge:linear-gradient(160deg, rgba(143,178,230,.35), rgba(143,178,230,0) 38%, rgba(221,185,106,0) 62%, rgba(221,185,106,.28)); --lR:#6E95CF; --lA:#DDB96A; --lC:#4FC093; --lI:#98A6BE }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --edge:linear-gradient(160deg, rgba(143,178,230,.35), rgba(143,178,230,0) 38%, rgba(221,185,106,0) 62%, rgba(221,185,106,.28)); --lR:#6E95CF; --lA:#DDB96A; --lC:#4FC093; --lI:#98A6BE }}

/* gradient hairline edge on surfaces */
.card, .ib-box, .gauge-card, .az-role, .az-raci-hero{
  border:1px solid transparent !important;
  background:linear-gradient(var(--panel), var(--panel)) padding-box, var(--edge) border-box !important;
}
.ib-box{background:linear-gradient(180deg, var(--panel), var(--panel-2)) padding-box, var(--edge) border-box !important}
.split > :only-child{grid-column:1 / -1}

/* page head: slow aurora */
.page-head{background-size:160% 160% !important; animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* filters toolbar */
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; margin-bottom:16px; border-radius:16px;
  background:color-mix(in srgb, var(--panel) 80%, transparent); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.filters select,.filters input{padding:7px 12px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink)}
.chip{padding:6px 13px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); font-weight:600; cursor:pointer; font-size:12.5px}
.chip:hover{border-color:var(--accent-2); color:var(--accent-ink)}
.gr{display:inline-flex; align-items:center; font-family:var(--f-num); font-weight:800; font-size:11.5px; padding:2px 9px; border-radius:8px;
  color:#fff; background:linear-gradient(135deg, var(--navy-400), var(--navy-600))}
.sect-ttl{font-family:var(--f-ui) !important; font-weight:800 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--accent-ink) !important; font-size:13px !important;
  display:flex; align-items:center; gap:8px}
.sect-ttl::before{content:""; width:14px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--gold-500), var(--navy-400))}
.kv dt{color:var(--ink-3) !important}
.kv dd{font-weight:600}

/* shared ring */
.az-ring{position:relative; width:150px; height:150px; flex:none}
.az-ring.sm{width:76px; height:76px}
.az-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.az-ring .trk{fill:none; stroke:var(--line-soft); stroke-width:11}
.az-ring .val{fill:none; stroke:url(#azGood); stroke:var(--good); stroke-width:11; stroke-linecap:round; animation:ringIn 1.4s var(--ease) backwards}
.az-ring .val.warn{stroke:var(--warn)}
@keyframes ringIn{from{stroke-dashoffset:var(--c)}}
.az-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center}
.az-ring-c b{font-family:var(--f-num); font-size:26px; font-weight:800; color:var(--ink); line-height:1}
.az-ring.sm .az-ring-c b{font-size:16px}
.az-ring-c span{font-size:11.5px; color:var(--ink-3); font-weight:600}

/* flags */
.az-flag{display:inline-block; object-fit:cover; flex:none; vertical-align:middle; border-radius:4px; box-shadow:0 0 0 1px rgba(14,27,49,.12), 0 4px 10px -4px rgba(14,27,49,.35)}
.az-flag-x{display:inline-grid; place-items:center; background:var(--panel-2); box-shadow:none}
.az-flag.xs{width:18px; height:13px; border-radius:3px}
.az-flag.sm{width:24px; height:17px}
.az-flag.md{width:34px; height:24px; border-radius:5px}
.az-flag.lg{width:64px; height:44px; border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 14px 26px -12px rgba(7,16,31,.7)}
.az-flag.bg{width:100%; height:100%; border-radius:0; box-shadow:none}
.az-flag-x.xs,.az-flag-x.sm{font-size:12px}.az-flag-x.md{font-size:18px}.az-flag-x.lg{font-size:30px}

/* =====================================================================
   NATIONALITY BOARD
   ===================================================================== */
.az-nat-card .body{padding:20px !important}
.az-nat-hero{display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:6px 4px 20px; border-bottom:1px dashed var(--line); margin-bottom:18px}
.az-nat-hero .az-ring-c .az-flag{margin-bottom:4px}
.az-nat-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; flex:1; min-width:260px}
.az-nat-kpis div{padding:14px 16px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line-soft)}
.az-nat-kpis b{display:block; font-family:var(--f-num); font-size:28px; font-weight:800; color:var(--ink); line-height:1.1}
.az-nat-kpis span{font-size:12.5px; color:var(--ink-3); font-weight:600}
.az-nat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
.az-nat{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:14px; row-gap:6px;
  align-items:center; text-align:start; padding:16px; border-radius:18px; cursor:pointer; font:inherit; color:var(--ink);
  border:1px solid var(--line-soft); background:var(--panel); box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); animation:riseIn .6s var(--ease) backwards; animation-delay:var(--d)}
.az-nat:hover{transform:translateY(-5px); box-shadow:var(--glow)}
.az-nat-bg{position:absolute; inset:-20%; z-index:-2; opacity:.16; filter:blur(22px) saturate(1.4); transition:opacity .4s}
.az-nat:hover .az-nat-bg{opacity:.32}
.az-nat::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(240px 140px at var(--mx,80%) var(--my,0%), rgba(255,255,255,.35), transparent 70%); opacity:0; transition:opacity .3s}
.az-nat:hover::after{opacity:1}
.az-nat .az-flag.lg{grid-row:1 / span 2; transition:transform .45s var(--ease)}
.az-nat:hover .az-flag.lg{transform:rotate(-6deg) scale(1.08)}
.az-nat-rank{position:absolute; top:10px; inset-inline-end:12px; font-family:var(--f-num); font-weight:800; font-size:12px; color:var(--ink-3)}
.az-nat.top .az-nat-rank{color:var(--navy-950); background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; top:10px}
.az-nat-name{font-weight:800; font-size:15px; align-self:end}
.az-nat-num{display:flex; align-items:baseline; gap:8px; align-self:start}
.az-nat-num b{font-family:var(--f-num); font-weight:800; font-size:26px; line-height:1}
.az-nat-num small{font-family:var(--f-num); font-weight:700; font-size:12.5px; color:var(--accent-ink); background:var(--accent-soft); padding:1px 8px; border-radius:99px}
.az-nat-bar{grid-column:1 / -1; height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:6px}
.az-nat-bar i{display:block; height:100%; width:var(--p); border-radius:inherit; background:linear-gradient(90deg, var(--navy-300), var(--navy-600)); animation:barIn 1.2s var(--ease) backwards; animation-delay:calc(var(--d) + .2s)}
.az-nat.top .az-nat-bar i{background:linear-gradient(90deg, var(--gold-300), var(--gold-500))}
@keyframes barIn{from{width:0}}

/* =====================================================================
   EMPLOYEES
   ===================================================================== */
.az-emp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px}
.az-seg{display:inline-flex; padding:4px; gap:3px; border-radius:14px; background:var(--panel); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.az-seg button{border:0; background:transparent; color:var(--ink-3); font-weight:700; font-size:13px; padding:7px 14px; border-radius:10px; cursor:pointer; transition:all .2s}
.az-seg button.on{background:linear-gradient(120deg, var(--navy-600), var(--navy-400)); color:#fff; box-shadow:0 8px 16px -10px rgba(36,69,122,.9)}
.az-select{display:inline-flex; align-items:center; gap:8px; padding:4px 4px 4px 12px; border-radius:14px; background:var(--panel); border:1px solid var(--line-soft); box-shadow:var(--shadow); font-size:12.5px; font-weight:700; color:var(--ink-2)}
body:not([data-lang="en"]) .az-select{padding:4px 12px 4px 4px}
.az-select select{border:1px solid var(--line); background:var(--panel-2); color:var(--ink); border-radius:10px; padding:6px 10px; font:inherit; font-weight:600; max-width:260px}
.az-clear{border:1px solid color-mix(in srgb,var(--crit) 35%,transparent); background:var(--crit-soft); color:var(--crit); border-radius:12px; padding:7px 12px; font-weight:700; cursor:pointer; font-size:12.5px}
.az-natstrip{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin-bottom:6px; scrollbar-width:thin; -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); padding-inline:16px}
.az-fchip{flex:none; display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border-radius:99px; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--line-soft); box-shadow:var(--shadow); transition:all .25s var(--ease)}
body:not([data-lang="en"]) .az-fchip{padding:6px 12px 6px 8px}
.az-fchip b{font-family:var(--f-num); font-size:11.5px; padding:1px 8px; border-radius:99px; background:var(--panel-2); color:var(--ink-3)}
.az-fchip:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent-2) 45%,transparent)}
.az-fchip.on{background:linear-gradient(120deg, var(--navy-700), var(--navy-400)); color:#fff; border-color:transparent}
.az-fchip.on b{background:rgba(255,255,255,.2); color:#fff}
.az-emp-card .body{padding:18px !important; background:var(--panel-2)}
.az-emp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:16px}
.az-emp{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer;
  padding:0 16px 16px; border-radius:20px; background:var(--panel); border:1px solid var(--line-soft); box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; animation:riseIn .5s var(--ease) backwards}
.az-emp:nth-child(4n+2){animation-delay:.04s}.az-emp:nth-child(4n+3){animation-delay:.08s}.az-emp:nth-child(4n+4){animation-delay:.12s}
.az-emp:hover,.az-emp:focus-visible{transform:translateY(-6px); box-shadow:var(--glow); border-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}
.az-emp::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(260px 160px at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--accent-2) 12%,transparent), transparent 70%)}
.az-emp:hover::after{opacity:1}
.az-emp-top{position:relative; align-self:stretch; height:76px; margin:0 -16px; overflow:hidden;
  background:linear-gradient(120deg, var(--navy-900), var(--navy-500))}
.az-emp-flagbg{position:absolute; inset:-30%; opacity:.55; filter:blur(18px) saturate(1.3); mix-blend-mode:screen; transition:opacity .4s, transform .6s var(--ease)}
.az-emp:hover .az-emp-flagbg{opacity:.85; transform:scale(1.1)}
.az-emp-top::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(7,16,31,.35)); }
.az-emp-id{position:absolute; top:10px; inset-inline-start:12px; z-index:1; font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,.85); background:rgba(7,16,31,.35); padding:2px 8px; border-radius:99px; backdrop-filter:blur(6px)}
.az-emp-star{position:absolute; top:8px; inset-inline-end:10px; z-index:1; font-size:15px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(6px)}
.az-emp-av{position:relative; width:84px; height:84px; margin-top:-42px; border-radius:26px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg, var(--navy-400), var(--navy-700)); color:#fff; font-family:var(--f-head); font-weight:800; font-size:28px;
  box-shadow:0 0 0 5px var(--panel), 0 16px 30px -14px rgba(7,16,31,.7); transition:transform .4s var(--ease)}
.az-emp:hover .az-emp-av{transform:translateY(-3px) rotate(-3deg)}
.az-emp-av img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.az-emp-flag{position:absolute; bottom:-6px; inset-inline-end:-10px; display:block; line-height:0; border-radius:7px; box-shadow:0 0 0 3px var(--panel); transform:rotate(6deg); transition:transform .4s var(--ease)}
.az-emp:hover .az-emp-flag{transform:rotate(0) scale(1.12)}
.az-emp-name{margin:14px 0 2px; font-size:16px; font-weight:800; color:var(--ink); line-height:1.35}
.az-emp-job{font-size:13px; color:var(--accent-ink); font-weight:600; min-height:1.6em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.az-emp-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px 0; font-size:12px; color:var(--ink-2)}
.az-emp-meta span{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; background:var(--panel-2); border:1px solid var(--line-soft); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.az-emp-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding-top:12px; border-top:1px dashed var(--line); align-self:stretch}
.az-emp-open{margin-top:12px; font-size:12px; font-weight:800; color:var(--accent-2); opacity:0; transform:translateY(4px); transition:all .3s var(--ease)}
.az-emp:hover .az-emp-open,.az-emp:focus-visible .az-emp-open{opacity:1; transform:none}
.az-more{display:flex; justify-content:center; margin-top:18px}

/* =====================================================================
   EMPLOYEE PROFILE (modal)
   ===================================================================== */
.modal.az-profile{width:min(1120px,100%) !important}
.modal.az-profile .mbody{padding:0 !important; background:var(--panel-2)}
.az-profile .prof-head{position:relative; overflow:hidden; isolation:isolate; margin:0 !important; padding:30px 28px 26px !important; border:0 !important; border-radius:0 !important; gap:22px !important; align-items:center !important;
  background:radial-gradient(500px 240px at 0% 0%, rgba(201,160,78,.28), transparent 70%), linear-gradient(120deg, var(--navy-950), var(--navy-700) 55%, var(--navy-500)) !important; color:#fff}
.az-prof-bg{position:absolute; inset:-40% -10%; z-index:-1; opacity:.35; filter:blur(40px) saturate(1.4); pointer-events:none; mix-blend-mode:screen}
.az-profile .prof-head::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px); background-size:16px 16px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 60%); mask-image:linear-gradient(90deg,#000,transparent 60%)}
.az-profile .prof-avatar{width:112px !important; height:112px !important; border-radius:30px !important; font-size:38px !important;
  box-shadow:0 0 0 5px rgba(255,255,255,.14), 0 24px 40px -18px rgba(0,0,0,.8) !important; animation:crestIn .7s var(--ease)}
.az-profile .az-emp-flag{bottom:auto; top:84px; inset-inline-end:-8px; box-shadow:0 0 0 3px rgba(255,255,255,.3), 0 10px 20px -8px rgba(0,0,0,.7)}
.az-profile .prof-name{font-size:28px !important; font-weight:800 !important; color:#fff !important; letter-spacing:-.01em}
.az-profile .prof-sub{color:rgba(230,238,250,.8) !important; font-size:14px !important}
.az-profile .prof-pills{margin-top:12px !important}
.az-profile .prof-head .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff}
.az-prof-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px}
.az-prof-strip div{padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); min-width:0}
.az-prof-strip span{display:block; font-size:11.5px; color:rgba(230,238,250,.7); font-weight:600}
.az-prof-strip b{display:flex; align-items:center; gap:6px; font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.az-profile .prof-grid{padding:22px; gap:18px !important}
.az-profile .prof-sect{background:var(--panel) !important; border:1px solid var(--line-soft) !important; border-radius:18px !important; padding:18px 20px !important; box-shadow:var(--shadow)}
.az-profile .kv{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:8px 14px; margin:0}
.az-profile .kv dt{font-size:12.5px}
.az-profile .kv dd{margin:0; padding-bottom:8px; border-bottom:1px dashed var(--line-soft)}
.az-profile .doc-section{margin:0 22px 22px; padding:18px 20px; border-radius:18px; background:var(--panel); border:1px solid var(--line-soft)}
@media (max-width:760px){ .az-prof-strip{grid-template-columns:1fr 1fr} .az-profile .prof-head{padding:22px 18px !important} .az-profile .prof-name{font-size:22px !important} .az-profile .kv{grid-template-columns:1fr} }

/* =====================================================================
   RACI
   ===================================================================== */
.az-raci-hero{display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; padding:18px; border-radius:22px; margin-bottom:16px; box-shadow:var(--shadow)}
.az-rh-main{flex:2 1 360px; display:flex; align-items:center; gap:18px}
.az-rh-main h3{font-size:18px; font-weight:800; color:var(--ink)}
.az-rh-main p{margin:4px 0 10px; color:var(--ink-3); font-size:13px}
.az-issue{border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); background:var(--warn-soft); color:var(--warn); font-weight:800; font-size:12.5px; padding:6px 12px; border-radius:99px; cursor:pointer; transition:all .2s}
.az-issue.on{background:var(--warn); color:#fff}
.az-okay{display:inline-block; background:var(--good-soft); color:var(--good); font-weight:800; font-size:12.5px; padding:6px 12px; border-radius:99px}
.az-rh-kpi{flex:1 1 110px; display:flex; flex-direction:column; justify-content:center; padding:12px 18px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line-soft)}
.az-rh-kpi b{font-family:var(--f-num); font-size:30px; font-weight:800; color:var(--ink); line-height:1.1}
.az-rh-kpi span{font-size:12.5px; color:var(--ink-3); font-weight:600}
.az-roles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-bottom:16px}
.az-role{position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; padding:14px; border-radius:18px; cursor:pointer; font:inherit; text-align:start; color:var(--ink);
  box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s; animation:riseIn .5s var(--ease) backwards; animation-delay:calc(var(--i) * 50ms)}
.az-role:hover{transform:translateY(-3px); box-shadow:var(--glow)}
.az-role.on{background:linear-gradient(120deg, var(--navy-800), var(--navy-500)) padding-box, var(--edge) border-box !important; color:#fff}
.az-role.on small{color:rgba(255,255,255,.75)}
.az-role-av{display:grid; place-items:center; width:42px; height:42px; border-radius:14px; font-family:var(--f-head); font-weight:800; font-size:13px; letter-spacing:.04em; color:#fff;
  background:linear-gradient(145deg, var(--navy-400), var(--navy-700)); box-shadow:0 10px 18px -10px rgba(7,16,31,.8); grid-row:1 / span 2}
.az-role-av.sm{width:30px; height:30px; border-radius:10px; font-size:10.5px}
.az-role-t{display:flex; flex-direction:column; min-width:0}
.az-role-t b{font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.az-role-t small{font-size:11.5px; color:var(--ink-3); font-family:var(--f-num)}
.az-role-bar{display:flex; height:6px; border-radius:99px; overflow:hidden; gap:2px; grid-column:2; min-width:12px; animation:barIn 1s var(--ease) backwards}
.az-role-bar i{display:block; height:100%}
.az-role-bar .lR,.az-rt.lR{background:var(--lR)} .az-role-bar .lA,.az-rt.lA{background:var(--lA)} .az-role-bar .lC,.az-rt.lC{background:var(--lC)} .az-role-bar .lI,.az-rt.lI{background:var(--lI)}

.az-legend{display:flex; flex-wrap:wrap; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.az-lg{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:14px; cursor:pointer; font:inherit; text-align:start; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line-soft); transition:all .25s var(--ease)}
body:not([data-lang="en"]) .az-lg{padding:6px 8px 6px 14px}
.az-lg > span:last-child{display:flex; flex-direction:column; line-height:1.25}
.az-lg b{font-size:13px}
.az-lg small{font-size:11px; color:var(--ink-3)}
.az-lg:hover{transform:translateY(-2px)}
.az-lg.on{border-color:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 18%,transparent)}

.az-raci-wrap{max-height:none}
.az-raci-t{border-collapse:separate; border-spacing:0; font-size:13.5px}
.az-raci-t thead th{position:sticky; top:0; z-index:2; background:var(--panel) !important; color:var(--ink-2); border-bottom:1px solid var(--line); padding:12px 8px; vertical-align:bottom}
.az-raci-t th.az-rh{text-align:center; cursor:pointer; min-width:96px; transition:background .2s}
.az-raci-t th.az-rh .az-role-av{margin:0 auto 6px}
.az-rh-t{display:block; font-size:11.5px; font-weight:800; line-height:1.3; white-space:normal; max-width:110px; margin:0 auto}
.az-raci-t th.az-rh.on{background:var(--accent-soft) !important}
.az-raci-t .az-rq{position:sticky; inset-inline-start:0; z-index:1; background:var(--panel); min-width:260px; max-width:420px; border-inline-end:1px solid var(--line-soft)}
.az-raci-t thead .az-rq{z-index:3}
.az-raci-t td.az-rq{padding:10px 16px}
.az-ract-t{display:block; font-weight:600; color:var(--ink); line-height:1.45}
.az-raci-t td.az-rq small{display:block; color:var(--ink-3); font-size:11.5px}
.az-rg-h td{padding:0 !important; background:var(--panel-2) !important; border-bottom:1px solid var(--line-soft)}
.az-rg-h button{position:sticky; inset-inline-start:0; display:flex; align-items:center; gap:10px; width:auto; max-width:100vw; border:0; background:none; font:inherit; cursor:pointer; padding:11px 16px; color:var(--ink)}
.az-rg-h .chev{display:inline-block; transition:transform .3s var(--ease); color:var(--accent-2)}
.az-rg.closed .az-rg-h .chev{transform:rotate(90deg)}
body[data-lang="en"] .az-rg.closed .az-rg-h .chev{transform:rotate(-90deg)}
.az-rg.closed tr.az-rr{display:none}
.az-rg-h .mono{font-family:var(--f-mono); font-size:11.5px; color:var(--accent-ink); background:var(--accent-soft); padding:1px 8px; border-radius:6px}
.az-rg-h b{font-size:14px; font-weight:800}
.az-rg-n{font-size:12px; color:var(--ink-3)}
.az-rg-bad{font-size:11.5px; font-weight:800; color:var(--warn); background:var(--warn-soft); padding:1px 8px; border-radius:99px}
.az-raci-t td.az-rc{text-align:center; padding:8px; transition:background .15s, opacity .2s}
.az-rt{display:inline-flex; align-items:center; justify-content:center; gap:1px; min-width:38px; height:38px; padding:0 8px; border-radius:12px; color:#fff;
  font-family:var(--f-head); font-weight:800; font-size:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -10px rgba(7,16,31,.8);
  transition:transform .25s var(--ease), box-shadow .25s}
.az-rt.lA{color:var(--navy-950)}
.az-rt.dual{background:linear-gradient(135deg, var(--lA) 0 50%, var(--lR) 50% 100%) !important; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4)}
.az-rt.dual b + b::before{content:"/"; opacity:.7}
.az-rt.empty{min-width:8px; width:8px; height:8px; padding:0; border-radius:50%; background:var(--line); box-shadow:none}
.az-raci-t td.az-rc:hover .az-rt:not(.empty){transform:scale(1.15); box-shadow:0 12px 22px -10px rgba(7,16,31,.9)}
.az-raci-t tr.az-rr:hover td{background:color-mix(in srgb,var(--accent-soft) 60%,transparent) !important}
.az-raci-t tr.az-rr:hover td.az-rq{background:var(--accent-soft) !important}
.az-raci-t[data-hc="0"] .c0, .az-raci-t[data-hc="1"] .c1, .az-raci-t[data-hc="2"] .c2, .az-raci-t[data-hc="3"] .c3, .az-raci-t[data-hc="4"] .c4,
.az-raci-t[data-fc="0"] .c0, .az-raci-t[data-fc="1"] .c1, .az-raci-t[data-fc="2"] .c2, .az-raci-t[data-fc="3"] .c3, .az-raci-t[data-fc="4"] .c4{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.az-raci-t[data-letter] td.az-rc .az-rt{opacity:.14; transform:scale(.85)}
.az-raci-t[data-letter="R"] td.az-rc[data-l~="R"] .az-rt, .az-raci-t[data-letter="A"] td.az-rc[data-l~="A"] .az-rt,
.az-raci-t[data-letter="C"] td.az-rc[data-l~="C"] .az-rt, .az-raci-t[data-letter="I"] td.az-rc[data-l~="I"] .az-rt{opacity:1; transform:scale(1.08)}
.az-raci-t tr.az-rr.bad td.az-rq{box-shadow:inset -3px 0 0 var(--warn)}
body[data-lang="en"] .az-raci-t tr.az-rr.bad td.az-rq{box-shadow:inset 3px 0 0 var(--warn)}
.az-rst{text-align:center; width:64px}
.az-chk{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:800; font-size:13px}
.az-chk.ok{background:var(--good-soft); color:var(--good)}
.az-chk.no{background:var(--warn-soft); color:var(--warn); animation:pulseW 2s ease-in-out infinite}
@keyframes pulseW{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--warn) 0%,transparent)} 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 30%,transparent)}}
.az-ract{width:1%; white-space:nowrap}
@media (max-width:760px){ .az-raci-t .az-rq{min-width:190px} .az-raci-t th.az-rh{min-width:74px} .az-rh-t{font-size:10.5px} .az-rt{min-width:32px; height:32px; font-size:13px} }