/* AFA Strategic Spares Exchange Hub — styles (round 1) */
:root{
  --blue:#0e4d6e;        /* digital platform (from swimlane diagram) */
  --blue-d:#0a3a53;
  --blue-l:#e8f1f6;
  --green:#2e9e5b;       /* physical movement / fast-track */
  --green-l:#e7f5ec;
  --red:#d9342b;         /* emergency */
  --red-l:#fdeceb;
  --amber:#c77700;
  --amber-l:#fdf3e3;
  --ink:#1c2b33;
  --muted:#5f7682;
  --line:#dde6ea;
  --bg:#f4f7f9;
  --card:#ffffff;
  --radius:10px;
  --shadow:0 1px 3px rgba(16,40,55,.08), 0 1px 2px rgba(16,40,55,.06);
  --shadow-lg:0 10px 30px rgba(16,40,55,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45;
}
button{font-family:inherit}
a{color:var(--blue)}

/* Layout */
.app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px 1fr;min-height:100vh}
.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:0 20px;
  background:var(--blue);color:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}
.brand .logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#1d7fb0,#2e9e5b);
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:15px}
.brand small{display:block;font-weight:500;opacity:.8;font-size:11px;letter-spacing:.3px}
.topbar .spacer{flex:1}
.topbar .who{display:flex;align-items:center;gap:8px;font-size:13px}
.topbar select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:7px 10px;border-radius:8px;font-size:13px}
.topbar select option{color:#1c2b33}
.badge-emer{background:var(--red);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-weight:600;cursor:pointer}
.badge-emer:hover{filter:brightness(1.08)}

/* Sidebar */
.sidebar{background:#fff;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;color:var(--ink);
  cursor:pointer;border:none;background:none;width:100%;text-align:left;font-size:14px}
.nav-item .ic{width:20px;text-align:center;opacity:.8}
.nav-item:hover{background:var(--blue-l)}
.nav-item.active{background:var(--blue);color:#fff;font-weight:600}
.nav-item.active .ic{opacity:1}
.nav-item .pill{margin-left:auto;background:var(--red);color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;font-weight:700}
.nav-item.active .pill{background:#fff;color:var(--blue)}
.sidebar .sep{height:1px;background:var(--line);margin:8px 6px}
.sidebar .note{margin-top:auto;font-size:11px;color:var(--muted);padding:10px;background:var(--amber-l);
  border:1px solid #f0dcb8;border-radius:8px;line-height:1.4}

/* Main */
.main{padding:22px 26px;overflow:auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:22px}
.page-head p{margin:4px 0 0;color:var(--muted)}

/* Buttons */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 14px;border-radius:8px;
  cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:#f3f6f8}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-d)}
.btn.green{background:var(--green);color:#fff;border-color:var(--green)}
.btn.green:hover{filter:brightness(1.06)}
.btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn.ghost{background:none;border:none}
.btn.sm{padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Cards / KPI */
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.kpi .v{font-size:26px;font-weight:800;color:var(--blue)}
.kpi .l{color:var(--muted);font-size:12px;margin-top:2px}
.kpi.green .v{color:var(--green)} .kpi.red .v{color:var(--red)} .kpi.amber .v{color:var(--amber)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .card-h{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;display:flex;align-items:center;justify-content:space-between}
.card .card-b{padding:16px}
.two-col{grid-template-columns:1.4fr 1fr}
@media(max-width:1000px){.two-col{grid-template-columns:1fr}}

/* Filters bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search{flex:1;min-width:240px;position:relative}
.search input{width:100%;padding:11px 12px 11px 36px;border:1px solid var(--line);border-radius:9px;font-size:14px;background:#fff}
.search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
select.f,input.f{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px}

/* Listing cards */
.listings{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.lcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,transform .15s}
.lcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.lcard .top{padding:14px 14px 10px}
.lcard .cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.lcard h3{margin:6px 0 4px;font-size:15px;line-height:1.3}
.lcard .pn{font-family:"Consolas",monospace;font-size:12px;color:var(--muted)}
.lcard .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lcard .foot{margin-top:auto;padding:10px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.lcard .owner{font-size:12px;color:var(--muted)}
.lcard .owner b{color:var(--ink)}

/* Tags / badges */
.tag{font-size:11px;padding:3px 8px;border-radius:20px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.tag.blue{background:var(--blue-l);color:var(--blue);border-color:#cfe2ec}
.tag.green{background:var(--green-l);color:#1d6e3f;border-color:#bfe6cc}
.tag.red{background:var(--red-l);color:var(--red);border-color:#f5c9c6}
.tag.amber{background:var(--amber-l);color:var(--amber);border-color:#f0dcb8}
.tag.gray{background:#eef2f4;color:var(--muted);border-color:#dde6ea}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot.av{background:var(--green)} .dot.re{background:var(--amber)} .dot.un{background:#b7c2c8}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
tr:hover td{background:#fafcfd}
.spec-table td{padding:6px 10px;border-bottom:1px solid #eef2f4}
.spec-table td:first-child{color:var(--muted);width:42%}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1 / -1}
.field label{font-size:12px;font-weight:600;color:var(--ink)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
.field textarea{resize:vertical;min-height:70px}
.field .hint{font-size:11px;color:var(--muted)}
.field.extracted input,.field.extracted select,.field.extracted textarea{background:var(--green-l);border-color:#bfe6cc}
.checks{display:flex;gap:18px;flex-wrap:wrap}
.checks label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500}

/* Mode tabs */
.modetabs{display:inline-flex;background:#eef2f4;border-radius:9px;padding:4px;gap:4px;margin-bottom:18px}
.modetabs button{border:none;background:none;padding:8px 16px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.modetabs button.active{background:#fff;color:var(--blue);box-shadow:var(--shadow)}

/* Validation report */
.vreport{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.vrow{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);align-items:flex-start}
.vrow:last-child{border-bottom:none}
.vrow .ico{font-weight:800;width:18px}
.vrow.pass .ico{color:var(--green)} .vrow.warn .ico{color:var(--amber)} .vrow.fail .ico{color:var(--red)}
.vrow.warn{background:var(--amber-l)} .vrow.fail{background:var(--red-l)}
.score-ring{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.score-num{font-size:30px;font-weight:800}
.score-num.ok{color:var(--green)} .score-num.mid{color:var(--amber)} .score-num.bad{color:var(--red)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(16,40,55,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:14px;max-width:760px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden}
.modal .m-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between}
.modal .m-h h2{margin:0;font-size:19px}
.modal .m-b{padding:22px}
.modal .m-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#fafcfd}
.x{border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}

/* Steps / workflow */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.step{flex:1;min-width:90px;text-align:center;font-size:11px;padding:8px 4px;border-radius:7px;background:#eef2f4;color:var(--muted);font-weight:600}
.step.done{background:var(--green-l);color:#1d6e3f}
.step.curr{background:var(--blue);color:#fff}
.step.rej{background:var(--red-l);color:var(--red)}

/* Empty / toast */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty .big{font-size:40px;opacity:.4}
#toast{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:8px;z-index:80}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:9px;box-shadow:var(--shadow-lg);font-size:13px;max-width:340px;animation:slidein .2s}
.toast.ok{background:#1d6e3f}.toast.err{background:var(--red)}.toast.info{background:var(--blue)}
@keyframes slidein{from{transform:translateX(20px);opacity:0}}
.muted{color:var(--muted)} .right{text-align:right} .mono{font-family:Consolas,monospace}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.inline-note{font-size:12px;color:var(--muted);background:var(--blue-l);border:1px solid #cfe2ec;border-radius:8px;padding:10px 12px}

/* ---- Auth screens ---- */
#authRoot:empty{display:none}
.authwrap{position:fixed;inset:0;background:linear-gradient(135deg,#0e4d6e,#0a3a53 60%,#114b3a);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;overflow:auto}
.authcard{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:460px;padding:30px 32px}
.authbrand{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.authbrand h2{font-size:18px}
.authsec{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);line-height:1.5}
.authmsg{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:14px}
.authmsg.err{background:var(--red-l);color:var(--red);border:1px solid #f5c9c6}
.authmsg.ok{background:var(--green-l);color:#1d6e3f;border:1px solid #bfe6cc}
.authmsg.info{background:var(--blue-l);color:var(--blue);border:1px solid #cfe2ec}
.demobox{margin-top:18px;padding:14px;background:#f4f7f9;border:1px dashed var(--line);border-radius:10px}
.demochips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;font-weight:600;color:var(--blue)}
.chip:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pwbar{height:6px;background:#eef2f4;border-radius:6px;overflow:hidden;margin:4px 0;flex:1}
.pwbar>div{height:100%;transition:width .2s,background .2s}
.pwmeter{display:flex;align-items:center;gap:8px}

/* ---- User menu (topbar) ---- */
.usermenu{position:relative}
.userchip{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;padding:5px 10px 5px 6px;border-radius:30px;cursor:pointer}
.userchip:hover{background:rgba(255,255,255,.18)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.userchip .uinfo{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.userchip .uinfo small{opacity:.8;font-size:10.5px}
.udropdown{position:absolute;right:0;top:46px;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg);min-width:230px;padding:6px;z-index:40}
.uhead{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:13px}
.udropitem{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink)}
.udropitem:hover{background:var(--blue-l)}
.udropitem.danger{color:var(--red)} .udropitem.danger:hover{background:var(--red-l)}
.authcard{position:relative}

/* ---- Topbar icons / lang / notifications ---- */
.topicon{position:relative;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:16px}
.topicon:hover{background:rgba(255,255,255,.2)}
.langtoggle{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;min-width:38px;height:38px;
  border-radius:9px;cursor:pointer;font-weight:700;font-size:14px}
.langtoggle:hover{background:rgba(255,255,255,.2)}
.notifdot{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--amber);color:#fff;border-radius:20px;
  font-size:10px;font-weight:800;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
.notifdot.urg{background:var(--red)}

/* ---- Executive impact band ---- */
.impact-band{margin-top:16px;background:linear-gradient(120deg,#0e4d6e,#136b78 55%,#1d7a52);color:#fff;
  border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow)}
.impact-title{font-weight:700;opacity:.9;margin-bottom:12px}
.impact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.impact-stats .iv{font-size:30px;font-weight:800;line-height:1}
.impact-stats .il{opacity:.85;font-size:12px;margin-top:4px}
.impact-note{margin-top:12px;font-size:11px;opacity:.7}

/* ---- Gate pass ---- */
.gatepass-print{border:1px solid var(--line);border-radius:10px;padding:20px;background:#fff}
.gp-head{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--blue);padding-bottom:12px;margin-bottom:14px}
.gp-logo{width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,#1d7fb0,#2e9e5b);display:grid;place-items:center;color:#fff;font-weight:800}
.gp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.gp-l{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.gp-v{font-weight:700;font-size:15px}
.gp-barcode{width:100%;height:40px;margin:16px 0 8px}
.gp-foot{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;line-height:1.5}

/* ---- Guided tour ---- */
#tourOverlay{position:fixed;inset:0;z-index:90}
#tourHi{border:2px solid var(--green);border-radius:8px;box-shadow:0 0 0 9999px rgba(10,40,55,.66);transition:all .2s;pointer-events:none}
#tourTip{background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);padding:14px 16px;z-index:91}
#tourTip .tt-h{font-weight:700;margin-bottom:6px}
#tourTip .tt-b{font-size:13px;color:var(--ink);margin-bottom:12px;line-height:1.5}
#tourTip .tt-f{display:flex;gap:8px;align-items:center}

/* ---- RTL adjustments ---- */
[dir=rtl] body{direction:rtl}
[dir=rtl] .sidebar{border-right:none;border-left:1px solid var(--line)}
[dir=rtl] .field label,[dir=rtl] th,[dir=rtl] td{text-align:right}
[dir=rtl] .nav-item,[dir=rtl] .udropitem{text-align:right}
[dir=rtl] .page-head,[dir=rtl] .filters,[dir=rtl] .lcard .foot{direction:rtl}
[dir=rtl] .mono,[dir=rtl] .pn,[dir=rtl] input,[dir=rtl] .gp-barcode{direction:ltr}
[dir=rtl] .search input{padding:11px 36px 11px 12px}
[dir=rtl] .search .mag{left:auto;right:11px}

/* ---- Print: only the gate pass ---- */
@media print{
  body.printing-gp .app,body.printing-gp #toast,body.printing-gp .modal .m-h,body.printing-gp .modal .m-f{display:none!important}
  body.printing-gp .modal-bg{position:static;background:none;padding:0;display:block}
  body.printing-gp .modal{box-shadow:none;max-width:100%}
  body.printing-gp .gatepass-print{border:none}
}

/* ---- Brand logo + mobile nav toggle ---- */
.brand{min-width:0}
.brand-logo{height:36px;width:auto;display:block;flex:none}
#brandTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navtoggle{display:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:38px;height:38px;border-radius:9px;font-size:18px;cursor:pointer;line-height:1}
.nav-backdrop{display:none}

/* ---- Responsive / mobile ---- */
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .topbar{gap:10px;padding:0 12px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center}
  .brand small{display:none}
  .sidebar{position:fixed;top:60px;bottom:0;left:0;width:264px;z-index:46;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .app.nav-open .sidebar{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:60px 0 0 0;background:rgba(16,40,55,.45);
    z-index:45;opacity:0;pointer-events:none;transition:opacity .25s}
  .app.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .main{padding:16px 14px}
  .badge-emer{font-size:0;padding:9px 11px}
  .badge-emer::after{content:"⚠";font-size:15px}
  #tourBtn{display:none}
  .userchip .uinfo{display:none}
  .userchip{padding:5px}
  .impact-stats{grid-template-columns:1fr;gap:10px}
  .two-col{grid-template-columns:1fr}
  .card-b{overflow-x:auto}
  .card-b > table{min-width:540px}
  .modetabs{flex-wrap:wrap}
  [dir=rtl] .sidebar{left:auto;right:0;transform:translateX(100%)}
  [dir=rtl] .app.nav-open .sidebar{transform:none}
}
@media (max-width:520px){
  #brandTitle{display:none}
  .search{min-width:100%}
  .filters{gap:8px}
  .modal-bg{padding:10px}
  .authcard{padding:24px 18px}
  .impact-stats .iv{font-size:24px}
  .page-head h1{font-size:19px}
}

/* ---- Ratings / reliability stars ---- */
.stars{display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.stars .star{color:#d9d9d9;font-size:13px}
.stars .star.on{color:#f4b400}
.stars.sm .star{font-size:11px}
.stars .rscore{font-weight:700;margin:0 4px 0 4px;font-size:12px;color:var(--ink)}
.ratepick{display:flex;gap:6px;justify-content:center}
.ratepick .star.big{font-size:34px;color:#d9d9d9;cursor:pointer;transition:color .1s}
.ratepick .star.big.on{color:#f4b400}
.ratepick .star.big:hover{color:#f4b400}