/* The SYRNOS Console: the supplier's overview. The SYRNOS colours, plain and roomy; every card has the same inner padding (12px) */
:root { --ink: #074F69; --ink2: #285A6E; --act: #0F9ED5; --act-dk: #0B7FAD; --line: #B4DCEC; --soft: #E3F0F7; color-scheme: light;
  --red: #C62828; --amber: #E39B12; --green: #2E7D32; --font: Calibri, Carlito, "Source Sans 3", "Segoe UI", Arial, sans-serif }
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.45 var(--font);
  background: radial-gradient(ellipse at 0% 0%, #94C6F9, rgba(148,198,249,0) 60%), radial-gradient(ellipse at 100% 100%, #88D6EE, rgba(136,214,238,0) 60%) #C2E0FC; background-attachment: fixed }
button, input, select, textarea { font: inherit; color: inherit }
h1, h2, h3 { margin: 0; line-height: 1.2 } h1 { font-size: 26px } h2 { font-size: 19px } h3 { font-size: 17px; margin: 4px 0 8px }
header.band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.65);
  border-bottom: 2px solid rgba(255,255,255,.9) }
header .logo { height: 30px; width: auto }
header .fam { font-weight: 700; font-size: 20px; letter-spacing: .5px }
header nav { display: flex; gap: 4px }
header nav button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 700 }
header nav button:hover { background: rgba(255,255,255,.8) }
header nav button[aria-current=page] { background: #fff; box-shadow: inset 0 -3px 0 var(--act) }
header .who { margin-left: auto; font-size: 15px; color: var(--ink2) }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px }
.panel { background: rgba(255,255,255,.92); border-radius: 14px; padding: 20px; box-shadow: 0 4px 14px rgba(31,133,200,.15); margin-bottom: 16px }
.panel.narrow { max-width: 480px; margin: 20px auto }
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px }
.head .btn.inline:last-child:not(.back) { margin-left: auto }
.card { background: rgba(255,255,255,.94); border-radius: 12px; box-shadow: 0 4px 14px rgba(31,133,200,.15); margin-bottom: 16px; overflow: hidden }
.card > .top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px; background: #DDF0FB }
.card > .in { padding: 12px }
.right { margin-left: auto }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--soft); padding-top: 10px; margin-top: 4px }
.foot .btn.inline { margin-left: auto }
.sys { margin-bottom: 12px }
.systop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid transparent }
.dot.red { background: var(--red) } .dot.amber { background: var(--amber) } .dot.green { background: var(--green) }
.dot.none, .dot.off { background: none; border-color: #8FA9B6 }
.pill { display: inline-block; border-radius: 999px; padding: 0 9px; font-size: 13px; font-weight: 700; background: #EAF4FA }
.flags { margin: 4px 0 8px; padding: 0; list-style: none }
.flags li { padding: 2px 0 2px 18px; position: relative; font-size: 15px }
.flags li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50% }
.flags li.red::before { background: var(--red) } .flags li.amber::before { background: var(--amber) }
.tw { overflow-x: auto }
table.t { width: 100%; border-collapse: collapse; font-size: 15px }
.t th { text-align: left; font-weight: 400; color: var(--ink2); font-size: 13px; padding: 4px 8px; border-bottom: 1px solid var(--soft); white-space: nowrap }
.t td { padding: 6px 8px; border-bottom: 1px solid var(--soft); vertical-align: middle }
.t tr.sub td { padding-top: 0; border-bottom: 1px solid var(--soft) }
.t td.empty { color: var(--ink2); text-align: center }
.muted { color: var(--ink2) } .small { font-size: 14px }
.status { margin: 0; color: var(--ink2) }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; margin: 0 }
.grid .wide { grid-column: 1 / -1 }
dl.grid div { padding: 6px 0 } dl.grid dt { font-size: 13px; color: var(--ink2) } dl.grid dd { margin: 0 }
.pre { white-space: pre-wrap; overflow-wrap: anywhere }
label.f { display: block; font-weight: 700; margin: 10px 0 0 }
label.f .hint { font-weight: 400; color: var(--ink2); font-size: 13px }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select, textarea { display: block; width: 100%; margin-top: 4px;
  padding: 9px 11px; font-size: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 400 }
textarea { min-height: 80px; resize: vertical }
input:disabled, select:disabled, textarea:disabled { background: #F4F9FC }
input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7CC7EA; outline-offset: 2px }
input.code { letter-spacing: 6px; text-align: center; font-size: 24px; font-variant-numeric: tabular-nums }
.btn { display: block; width: 100%; margin-top: 16px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--act); color: #fff; font-weight: 700; cursor: pointer }
.btn:hover { background: var(--act-dk) } .btn:disabled { opacity: .6; cursor: default }
.btn.inline { display: inline-block; width: auto; margin: 0; padding: 8px 14px; font-size: 15px }
.btn.light { background: #EAF4FA; color: var(--ink) } .btn.light:hover { background: #D6E9F4 }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.linkbtn { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--act-dk); text-decoration: underline; cursor: pointer; font-size: 15px }
.err { color: #9C0006; background: #FDECEC; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px }
.linkbox { background: #FFF8E6; border: 1px solid #F1D48A; border-radius: 10px; padding: 12px; margin-bottom: 14px }
.linkbox p { margin: 0 0 8px }
.linkbox textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; min-height: 0; word-break: break-all }
.sysadd { border-top: 1px solid var(--soft); padding-top: 10px; margin-top: 6px }
.qr { display: block; width: 200px; height: 200px; margin: 8px auto; image-rendering: pixelated }
code { background: #EAF4FA; padding: 1px 5px; border-radius: 5px; font-size: 14px }
#toastRoot { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; width: min(520px, calc(100% - 32px)) }
.toast { background: #074F69; color: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.2) }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr } header .who { margin-left: 0 } .right { margin-left: 0 } }
@media print { header nav, .btn, .linkbtn { display: none !important } }