/* Additions to the mockup's design system for the real app (links instead of buttons, sign-in). */
a.fi, a.mlink { text-decoration: none; }
a.fi { box-sizing: border-box; }
.menu a.mlink, .menu form button {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 16px;
  cursor: pointer; font-size: 13px; color: var(--text); box-sizing: border-box;
}
.menu a.mlink:hover, .menu form button:hover { background: var(--accent-soft); }
.menu form { margin: 0; }
.menu form button.cur { font-weight: 700; }
a.ico { color: var(--text); }
.crumbs a { color: inherit; }
.note.over { border-left-color: var(--red); }

/* Sign-in */
.signin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); }
.signin-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 4px; }
.signin-card h1 { font-size: 24px; margin: 8px 0 2px; }
.signin-card .sub { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.signin-logo { width: 220px; height: auto; margin: 4px 0 10px; }
.signin-card .fl { display: flex; flex-direction: column; gap: 6px; color: var(--text); font-weight: 600; font-size: 13px; }
.signin-card input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--field); font-size: 14px; }
.signin-card .btn { margin-top: 6px; padding: 10px 16px; }
.signin-card .err { margin-bottom: 8px; }
.fine-print { color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.signin .fine { margin-top: 18px; }

/* Logo variants on the sign-in page follow the theme */
.dark-only { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .light-only { display: none; } :root:not([data-theme="light"]) .dark-only { display: block; } }
:root[data-theme="dark"] .light-only { display: none; }
:root[data-theme="dark"] .dark-only { display: block; }

/* Vendor Segmentation */
.tierpill{display:inline-block;min-width:24px;text-align:center;font-size:12px;font-weight:700;padding:3px 9px;border-radius:12px;background:var(--tc);color:#fff;white-space:nowrap;line-height:1.4}
.tierpill.lg{font-size:13px;padding:4px 12px}
.pill.vs-onboarding{background:#dbeaf8;color:#0a5aa0}
.pill.vs-managed{background:#dcf2e4;color:#1b6a3b}
.pill.vs-offboarding{background:#fcefd2;color:#87590a}
.pill.vs-notmanaged{background:#e8ebef;color:#46525f}
:root[data-theme="dark"] .pill.vs-onboarding{background:#1b3550;color:#8cc4f2}
:root[data-theme="dark"] .pill.vs-managed{background:#1d4a30;color:#9fdcb7}
:root[data-theme="dark"] .pill.vs-offboarding{background:#4d3a12;color:#f0c674}
:root[data-theme="dark"] .pill.vs-notmanaged{background:#2f3d4d;color:#c3cdd8}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pill.vs-onboarding{background:#1b3550;color:#8cc4f2}
  :root:not([data-theme="light"]) .pill.vs-managed{background:#1d4a30;color:#9fdcb7}
  :root:not([data-theme="light"]) .pill.vs-offboarding{background:#4d3a12;color:#f0c674}
  :root:not([data-theme="light"]) .pill.vs-notmanaged{background:#2f3d4d;color:#c3cdd8}
}
.vtiers .tierkpi{font:inherit;color:inherit;text-align:left;cursor:pointer}
.vtiers .tierkpi[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:-2px}
.vtable .vname{color:inherit;font-weight:600;text-decoration:none}
.vtable .vname:hover{text-decoration:underline}
.vfoot{margin:10px 0 0}
fieldset.plain{border:0;margin:0;padding:0;min-width:0}
.panel .dgrid + .dgrid,.panel .dgrid + .fld{margin-top:14px}
.fld.full{margin-top:14px}
.fld .hint{font-weight:400;color:var(--muted)}
.vscore select{border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:2px;padding:6px 8px;max-width:100%}
.vscore .badge{margin-top:4px}
.vsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 24px;margin:16px 0;padding:14px 16px;background:var(--bg);border:1px solid var(--line)}
.vsum .dv{font-size:20px}
.formbar{display:flex;gap:10px;margin:0 0 24px}
.delform{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.note.over{background:#fbe4e5;border-left-color:var(--red);color:#a3262b}
[hidden]{display:none!important}
a.btn{display:inline-block;text-decoration:none}

/* Admin Console (ValueTrackAdmin 5) */
.admintag{margin:-2px 18px 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5599e0;font-weight:700}
.hb{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:13px}
.hb .n{width:200px;flex:none}
.hb .bt{flex:1;height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.hb .bt i{display:block;height:100%;background:var(--accent)}
.hb b{width:28px;text-align:right}
@media (max-width:640px){.hb .n{width:120px}}
.chip{display:inline-block;background:var(--accent-soft);color:var(--accent);border-radius:12px;padding:1px 10px;font-size:12px;margin:2px 4px 2px 0;font-weight:600}
.chip.msp{background:#efe6fa;color:#6a2fa8}
:root[data-theme="dark"] .chip.msp{background:#3a2a55;color:#cdb3f0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.msp{background:#3a2a55;color:#cdb3f0}}
.hrow{display:flex;align-items:center;gap:14px}
.lthumb{width:44px;height:44px;border-radius:8px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;background:var(--grey)}
.lthumb.lg{width:64px;height:64px;border-radius:12px;font-size:22px}
.phead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.phead h2{margin:0}
.phead .sub{margin:2px 0 0}
.panel.flush{padding:0}
.panel.flush>.phead{padding:18px 20px 8px;margin:0}
.panel.flush>.empty{margin:0 20px 20px}
.inline{display:inline}
.card a.cover{position:absolute;inset:0}
.card .cf{font-size:13px;line-height:1.6}
.orgbox{border:1px solid var(--line);padding:10px 14px;margin-bottom:10px}
.orgbox>label.top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--text)}
.orgbox .orgbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px;margin-top:8px}
.orgbox .orgbody label.c{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--text);padding:2px 0}
.orgbox .orgbody input[type=checkbox]{width:auto}
.pwrow{display:flex;gap:6px}
.pwrow input{flex:1;min-width:0}
#sres{margin:-6px 14px 14px;background:#0f2740;border:1px solid #23415f;border-radius:3px;max-height:280px;overflow-y:auto}
#sres:empty{display:none}
#sres a{display:block;color:var(--nav-text);padding:8px 10px;font-size:12px;border-bottom:1px solid #1b3652;text-decoration:none}
#sres a:hover{background:var(--nav-hover)}
#sres small{display:block;color:var(--nav-muted)}
#sres p{margin:0;padding:8px 10px;font-size:12px;color:var(--nav-muted)}
a.nb{text-decoration:none}
a.mspname{text-decoration:none;color:inherit}
a.mspname:hover{text-decoration:underline}
.orgbox .err{display:block;margin-top:6px}

/* ValueTrack business screens */
.tabs a{background:none;border:0;border-bottom:3px solid transparent;padding:10px 18px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.tabs a.overdue,.tabs a.overdue.on{color:var(--red)}
.tabs a.overdue.on{border-bottom-color:var(--red)}
.card a.title{color:inherit;text-decoration:none}
.card a.title::after{content:"";position:absolute;inset:0}
.card .cbtn{position:relative;z-index:1}
.card .cbtn .btn{text-decoration:none}
.struck{text-decoration:line-through;opacity:.7}
.task-status{border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:2px;padding:4px 6px}
.statebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vlist td,.vlist th{white-space:nowrap}
.vlist td:first-child{white-space:normal;min-width:220px}
details.crit{border:1px solid var(--line);padding:10px 14px;margin:10px 0}
details.crit summary{cursor:pointer}
details.crit[open] summary{margin-bottom:12px}
.cellin{border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:2px;padding:6px 8px;width:100%;min-width:120px}
.cellin.num{text-align:right;min-width:70px}
.note.warn{background:#fdecd9;border-left-color:#e8710a;color:#8a4300}
:root[data-theme="dark"] .note.warn{background:#4a2e12;color:#f5b887}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .note.warn{background:#4a2e12;color:#f5b887}}
.idlewarn{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:1000;max-width:calc(100% - 32px);
  background:var(--surface);border:1px solid var(--line);border-left:4px solid #e8710a;box-shadow:0 6px 24px rgba(10,30,51,.3);padding:12px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px}