/* =====================================================================================================
   DOC design system (24 Oct 2026): the engineering palette, Inter type scale, 8 px spacing, 6/8/12 px radii,
   borders instead of shadows, and the two-row top navigation (row 1: DOC, search, bell, you; row 2: the
   module switcher - DaaS / DAK / Management - and the open module's own items). Loaded after ui.css;
   rolling back = dropping its <link>.
   ===================================================================================================== */
:root{
  --bg:#F4F6F8; --surface:#FFFFFF; --surface-2:#EAF0F4; --ink:#18232E; --ink-2:#647484; --ink-3:#8593A1;
  --line:#DCE3E9; --line-2:#E8EDF1; --track:#E4EBF0; --hover-line:#BFCBD5;
  --navy:#173A55; --navy-2:#214D6D; --navy-3:#3984BB; --accent:#3984BB; --accent-ink:#FFFFFF;
  --good:#16835D; --good-soft:#E7F4EE; --warn:#B7791F; --warn-soft:#FBF3E4; --bad:#C43D40; --bad-soft:#FAEAEA;
  --info:#397FB2; --info-soft:#E8F1F8; --focus:#3984BB;
  --shadow:0 18px 40px -16px rgba(16,32,48,.28); --shadow-2:none; --radius:8px;
  --on-primary:#FFFFFF;
}
:root[data-theme="dark"]{
  --bg:#111820; --surface:#1B2632; --surface-2:#222F3C; --ink:#E9EFF5; --ink-2:#A4B2C0; --ink-3:#7D8B99;
  --line:#344150; --line-2:#2A3644; --track:#2A3644; --hover-line:#4A5868;
  --navy:#7CB9E8; --navy-2:#93C6EE; --navy-3:#7CB9E8; --accent:#7CB9E8; --accent-ink:#0F1C27;
  --good:#4CC495; --good-soft:#173329; --warn:#E3A84B; --warn-soft:#352A17; --bad:#EE7F81; --bad-soft:#3A1F22;
  --info:#7CB9E8; --info-soft:#1C3142; --focus:#7CB9E8;
  --shadow:0 18px 40px -16px rgba(0,0,0,.65); --shadow-2:none; --on-primary:#0F1C27; color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111820; --surface:#1B2632; --surface-2:#222F3C; --ink:#E9EFF5; --ink-2:#A4B2C0; --ink-3:#7D8B99;
    --line:#344150; --line-2:#2A3644; --track:#2A3644; --hover-line:#4A5868;
    --navy:#7CB9E8; --navy-2:#93C6EE; --navy-3:#7CB9E8; --accent:#7CB9E8; --accent-ink:#0F1C27;
    --good:#4CC495; --good-soft:#173329; --warn:#E3A84B; --warn-soft:#352A17; --bad:#EE7F81; --bad-soft:#3A1F22;
    --info:#7CB9E8; --info-soft:#1C3142; --focus:#7CB9E8;
    --shadow:0 18px 40px -16px rgba(0,0,0,.65); --shadow-2:none; --on-primary:#0F1C27; color-scheme:dark;
  }
}
body{background:var(--bg);color:var(--ink);font-size:14px}

/* ---- controls: 6 px corners, 36-40 px tall, flat ---- */
.btn{border-radius:6px;min-height:36px;box-shadow:none;font-weight:500}
.btn.sm{min-height:30px;border-radius:6px}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--on-primary)}
.btn.primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.field input,.field select,.field textarea,.input{border-radius:6px;box-shadow:none;min-height:40px}
.field textarea{min-height:0}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.check{border-radius:6px}

/* ---- surfaces: 8 px cards, borders, no shadows ---- */
.card,.pcard,.kpi .k,.tools .tile,.track,.wing,.hero,.empty{border-radius:8px;box-shadow:none}
.pcard:hover{box-shadow:none;transform:none;border-color:var(--hover-line)}
.drawer,.dialog .box{border-radius:12px}
.pill{border-radius:999px}

/* ---- type scale ---- */
.topbar h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.topbar .crumb{font-size:13px;color:var(--ink-2)}
.card-head h2,.sec-head h2{font-size:16px;font-weight:600}
.kpi .kv{font-size:28px}
.kpi .kl{font-size:12.5px}
.tbl th{font-size:12px}
.tbl td{font-size:13.5px}

/* ---- row 1: DOC, search, notifications, you ---- */
.gnav{background:var(--surface);border-bottom:1px solid var(--line)}
.gnav-row{height:52px;gap:16px;padding:0 24px}
.doc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.doc-brand:hover{text-decoration:none}
.doc-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--navy);color:var(--on-primary)}
.doc-mark svg{width:18px;height:18px}
.doc-brand .doc-name{font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink)}
.doc-brand .doc-sub{font-size:12px;color:var(--ink-3);border-left:1px solid var(--line);padding-left:10px}
.gnav .mark{display:none}
.gnav-right{gap:8px}
.tb-search{min-width:300px;border-radius:6px;background:var(--surface-2);border-color:transparent;height:36px}
.tb-search:hover{border-color:var(--line);background:var(--surface)}
.gnav .icon-btn{border-radius:6px}

/* ---- row 2: the module switcher and the open module's items ---- */
.modrow{display:flex;align-items:center;gap:14px;height:46px;padding:0 24px;border-top:1px solid var(--line-2);background:var(--surface);overflow-x:auto;scrollbar-width:none}
.modrow::-webkit-scrollbar{display:none}
.gmenu{display:flex;align-items:center;gap:2px;padding:3px;border-radius:8px;background:var(--surface-2);align-self:center;flex:none}
.gmenu a{height:32px;padding:0 12px;border-radius:6px;border:0;margin:0;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.gmenu a svg{width:16px;height:16px}
.gmenu a .app-ic{display:none}
.gmenu a:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.gmenu a.on{background:var(--navy);color:var(--on-primary)}
.modsep{width:1px;height:22px;background:var(--line);flex:none}
.subnav{flex:1;display:flex;align-items:center;gap:2px;height:100%;padding:0;border:0;background:transparent;overflow:visible}
.subnav a{height:100%;padding:0 12px;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin:0}
.subnav a svg{width:16px;height:16px;flex:none}
.subnav a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--navy-3)}
.subnav a .tool-logo{display:none}

/* ---- page header and content width ---- */
.topbar{padding:24px 24px 8px!important}
.page{padding-left:24px;padding-right:24px}

/* ---- DaaS tools page ---- */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.toolcard{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px}
.toolcard .ti{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--info-soft);color:var(--navy-3)}
.toolcard .ti svg{width:20px;height:20px}
.toolcard h3{font-size:16px;margin:0}
.toolcard p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5;flex:1}
.toolcard .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.toolcard.off .ti{background:var(--track);color:var(--ink-3)}

@media (max-width:900px){
  .gnav-row{padding:0 12px;gap:8px}
  .doc-brand .doc-sub{display:none}
  .tb-search{min-width:0!important;width:36px;padding:0;justify-content:center;background:transparent}
  .modrow{padding:0 12px;gap:10px}
  .gmenu a{padding:0 10px}
  .gmenu a svg{display:none}
  .subnav{overflow:visible}
  .topbar{padding:16px 12px 4px!important}
  .page{padding-left:12px;padding-right:12px}
  .btn,.gmenu a,.subnav a{min-height:40px}
}
@media (max-width:640px){
  .drawer{top:0!important;left:0!important;width:100%!important;max-height:none;height:100%;border-radius:0;transform:none!important}
}
@media (min-width:901px){.gnav .tb-search{flex:0 1 360px}.gnav .tb-search .tbs-t,.gnav .tb-search kbd{display:inline-block!important}}

/* ---- the Dashboard: only the three module cards (icon and name, one line, three figures) ---- */
.wings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.wing{display:flex;flex-direction:column;gap:16px;min-height:0;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none;transform:none!important;text-decoration:none;color:inherit;transition:border-color .12s}
.wing:hover{border-color:var(--navy-3);box-shadow:inset 0 0 0 1px var(--navy-3);text-decoration:none}
.wing::after{display:none!important}
.wing .wh{display:flex;flex-direction:row;align-items:flex-start;gap:14px}
.wing .wi{flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;margin:0}
.wing .wi svg{width:22px;height:22px}
.wing .wi.daas{background:#EAF1FB;color:#2F5FB3}.wing .wi.academy{background:#F1EEFB;color:#5B3CC4}.wing .wi.mgmt{background:#E7F4EE;color:#16835D}
:root[data-theme="dark"] .wing .wi.daas{background:#1C2B45;color:#8FB4F2}:root[data-theme="dark"] .wing .wi.academy{background:#2A2346;color:#BDB0F5}:root[data-theme="dark"] .wing .wi.mgmt{background:#173329;color:#4CC495}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wing .wi.daas{background:#1C2B45;color:#8FB4F2}:root:not([data-theme="light"]) .wing .wi.academy{background:#2A2346;color:#BDB0F5}:root:not([data-theme="light"]) .wing .wi.mgmt{background:#173329;color:#4CC495}}
.wing .wt{min-width:0;display:flex;flex-direction:column;gap:3px}
.wing .wn{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.wing .wd{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.wing .wfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--line-2);padding-top:14px;margin-top:auto}
.wing .wf{display:flex;flex-direction:column;min-width:0}
.wing .wf b{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.wing .wf span{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.wings{grid-template-columns:minmax(0,1fr)}}

/* ---- header: the Drone Operation Console wordmark at the left; footer: one credit line ---- */
.gnav .doc-brand{display:none}
.gnav .mark{display:flex!important;align-items:center;flex:none;padding:0;margin:0}
.gnav .mark img{height:14px;width:auto}
footer{display:flex;justify-content:center;padding:14px 24px;border-top:1px solid var(--line);background:var(--surface)}
footer .fline{font-size:12.5px;color:var(--ink-2);text-align:center}
@media (max-width:900px){.gnav .mark img{height:10px}}

/* ---- type scale (24 Oct 2026): 14 px body and tables, 12.5 px the smallest text, 22 px page titles ---- */
:root{--violet:#5B3CC4;--violet-soft:#F1EEFB}
:root[data-theme="dark"]{--violet:#BDB0F5;--violet-soft:#2A2346}
body{font-size:14px;line-height:1.55}
.topbar h1{font-size:22px}
.topbar .crumb{font-size:13px}
.gmenu a,.subnav a{font-size:14px}
.btn{font-size:14px}
.btn.sm{font-size:13px}
.tbl td{font-size:14px}
.tbl th{font-size:12px;letter-spacing:.04em}
.muted,.small,.muted.small,.sub,.kpi .ks,.pcard .lo,.pcard .ft,.wing .wf span,.notif .x{font-size:12.5px}
.field{font-size:13px}
.field input,.field select,.field textarea,.input{font-size:14px}
.help{font-size:12.5px}
.card-head h2,.sec-head h2{font-size:16px}
.kpi .kl{font-size:13px;color:var(--ink-2)}
.kpi .kv{font-size:26px}
.pcard .nm{font-size:15px}
.pill{font-size:12px;font-weight:500}

/* ---- one set of tints from the theme tokens (works in light, dark and Auto) ---- */
.kpi .ki.blue{background:var(--info-soft);color:var(--info)}
.kpi .ki.green{background:var(--good-soft);color:var(--good)}
.kpi .ki.amber{background:var(--warn-soft);color:var(--warn)}
.kpi .ki.violet{background:var(--violet-soft);color:var(--violet)}
.kpi .ki svg{width:20px;height:20px}
.tools .ic,.tools .ic.acad{background:var(--info-soft);color:var(--info)}
.wing .wi.daas{background:var(--info-soft);color:var(--info)}
.wing .wi.academy{background:var(--violet-soft);color:var(--violet)}
.wing .wi.mgmt{background:var(--good-soft);color:var(--good)}
.gnav .icon-btn svg{width:19px;height:19px}
.subnav a svg,.gmenu a svg{width:17px;height:17px}