/* ============================================================
   Activation Manager — modern restyle
   Stage 1: design system + shared shell
   Loaded by ActivationManager.aspx. Kept deliberately override-
   heavy because the legacy markup still carries inline styles;
   as each view is migrated its inline styles are removed and the
   rules here take over cleanly.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#eef1f5;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --sidebar:#1e2b3c;
  --sidebar-2:#26374d;
  --sidebar-ink:#cdd7e5;
  --sidebar-ink-dim:#8fa1b8;
  --accent:#2a78d6;
  --accent-weak:#e7f0fc;
  --ink:#101828;
  --ink-2:#52596b;
  --ink-muted:#8a90a0;
  --line:#e3e8f0;
  --line-strong:#cfd6e2;
  --good:#0ca30c; --good-bg:#e6f6e6;
  --warning:#b47500; --warning-bg:#fdf3dc;
  --serious:#c1592f; --serious-bg:#fbeae1;
  --critical:#c62f2f; --critical-bg:#fbe5e5;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.05);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0d1017; --surface:#161b24; --surface-2:#1b212c;
    --sidebar:#10151d; --sidebar-2:#1a212c;
    --sidebar-ink:#c3ccda; --sidebar-ink-dim:#7b8798;
    --accent:#3987e5; --accent-weak:#16283f;
    --ink:#f2f4f8; --ink-2:#b8bfcd; --ink-muted:#7e8698;
    --line:#262d3a; --line-strong:#333c4c;
    --good:#3fbf3f; --good-bg:#122b16;
    --warning:#e0a52a; --warning-bg:#2e2611;
    --serious:#e0895f; --serious-bg:#2e1c12;
    --critical:#e05a5a; --critical-bg:#2e1414;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ---------- App shell (sidebar + main) ---------- */
.am-app{display:flex;min-height:100vh}
.am-sidebar{
  width:220px;flex:0 0 220px;background:var(--sidebar);color:var(--sidebar-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:10;
}
.am-brand{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.am-brand .logo{width:30px;height:30px;border-radius:8px;display:block;flex:0 0 30px}
.am-brand .t{font-weight:600;font-size:14px;color:#fff;line-height:1.15}
.am-brand .t small{display:block;font-weight:400;font-size:11px;color:var(--sidebar-ink-dim)}
.am-navwrap{padding:10px 8px;flex:1;overflow:auto}
.am-navgrp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sidebar-ink-dim);padding:14px 12px 6px}
.am-sidefoot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--sidebar-ink-dim)}
.am-sidefoot b{color:var(--sidebar-ink)}

.am-main{flex:1;min-width:0;display:flex;flex-direction:column}
.am-topbar{
  min-height:58px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:10px 22px;position:sticky;top:0;z-index:5;
}
.am-topbar h1{font-size:16px;margin:0;font-weight:600;color:var(--ink)}
.am-topbar .sub{color:var(--ink-muted);font-size:12.5px}
.am-spacer{flex:1}
.am-user{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.am-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;font-weight:600}
.am-content{padding:22px;max-width:1300px;width:100%;margin:0 auto}

/* ---------- Sidebar nav: restyle the ASP.NET Menu (RenderingMode="List") ---------- */
.am-nav{border:none !important;background:transparent !important}
.am-nav ul{list-style:none !important;margin:0 !important;padding:0 !important}
.am-nav li{margin:0 0 2px !important}
/* Dashboard is the last menu item in markup (keeps Items[] indices) but is shown FIRST.
   The Menu (RenderingMode="List") may put .am-nav on the <ul> itself or on a wrapping
   <div>; make both the list and any inner <ul> a flex column and pull the last item up. */
.am-nav, .am-nav ul{display:flex !important;flex-direction:column !important}
.am-nav > li:last-child, .am-nav ul > li:last-child{order:-1;margin-bottom:8px !important}
.am-nav a,
.am-nav a:link,
.am-nav a:visited{
  display:flex !important;align-items:center;gap:11px;
  padding:9px 12px !important;border-radius:8px;
  color:var(--sidebar-ink) !important;text-decoration:none !important;
  font-size:13.5px !important;font-weight:500 !important;white-space:nowrap;cursor:pointer;
  border:none !important;background:transparent !important;
}
.am-nav a:hover{background:var(--sidebar-2) !important;color:#fff !important}
.am-nav .am-nav-selected a,
.am-nav a.am-active{background:var(--accent) !important;color:#fff !important}

/* ---------- Message / info panels ---------- */
.am-msg{
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);
  padding:11px 14px;margin:0 0 14px;display:flex;align-items:center;gap:10px;font-size:13px;
}
.am-msg.am-err{border-color:var(--critical);background:var(--critical-bg);color:var(--critical)}
.am-msg.am-info{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
.am-msg .am-msgtext{flex:1;font-weight:600}
.am-msg .am-close{border:none;background:transparent;cursor:pointer;color:inherit;font-size:16px;opacity:.7}
.am-msg .am-close:hover{opacity:1}

/* ---------- Buttons (global for asp:Button / input[type=submit]) ---------- */
.am-content input[type="submit"],
.am-content input[type="button"],
.am-content button:not(.am-close){
  height:32px;border-radius:8px;padding:0 13px;font-size:13px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:var(--font);
}
.am-content input[type="submit"]:hover,
.am-content input[type="button"]:hover{border-color:var(--accent)}

/* ---------- Login screen ---------- */
.am-login-page{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.am-login-card{
  width:360px;max-width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 8px 30px rgba(16,24,40,.10);overflow:hidden;
}
.am-login-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.am-login-head .logo{width:36px;height:36px;border-radius:9px;display:block;flex:0 0 36px}
.am-login-head .t{font-weight:600;font-size:15px}
.am-login-head .t small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-muted)}
.am-login-body{padding:20px 22px}
.am-login-body table{width:100%;border-collapse:collapse}
.am-login-body td{padding:3px 0}
.am-login-body label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:8px 0 4px}
.am-login-body input[type="text"],
.am-login-body input[type="password"]{
  width:100%;height:38px;border:1px solid var(--line-strong);border-radius:9px;
  padding:0 12px;font-size:14px;font-family:var(--font);background:var(--surface);color:var(--ink);
}
.am-login-body input[type="text"]:focus,
.am-login-body input[type="password"]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.am-login-body input[type="submit"]{
  width:100%;height:40px;margin-top:6px;border:none;border-radius:9px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);
}
.am-login-body input[type="submit"]:hover{filter:brightness(1.05)}
.am-login-foot{padding:0 22px 20px;text-align:center;color:var(--ink-muted);font-size:12px}

/* ---------- Toolbar / filter bar (Accounts, etc.) ---------- */
.am-toolbar,.am-filterbar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px 12px;margin-bottom:14px;
}
.am-filterbar{background:var(--surface-2)}
.am-toolbar table,.am-filterbar table{width:auto;border-collapse:collapse}
.am-toolbar td,.am-filterbar td{padding:4px 5px;vertical-align:middle;white-space:nowrap}
.am-toolbar img[src*="separator"],.am-filterbar img[src*="separator"]{display:none}
.am-toolbar span,.am-filterbar span{color:var(--ink-2);font-size:12.5px;font-weight:600}
.am-toolbar input[type="text"],.am-toolbar select,
.am-filterbar input[type="text"],.am-filterbar select{
  height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;
  font-size:13px;background:var(--surface);color:var(--ink);font-family:var(--font);
}
.am-toolbar input[type="text"]:focus,.am-toolbar select:focus,
.am-filterbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* ---------- GridView, modernised ---------- */
.am-grid-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
.am-grid{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)}
.am-grid th,.am-grid td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;vertical-align:middle}
.am-grid-head th,.am-grid th{
  font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-muted);
  font-weight:600;background:var(--surface-2);
}
.am-grid-head a,.am-grid th a{color:var(--ink-muted) !important;text-decoration:none}
.am-grid-row td,.am-grid td{color:var(--ink);background:var(--surface)}
.am-grid tr:hover td{background:var(--surface-2)}
.am-grid-sel td{background:var(--accent-weak) !important}
.am-grid a{color:var(--accent);text-decoration:none}
.am-grid a:hover{text-decoration:underline}
.am-grid input[type="text"],.am-grid select{height:30px;border:1px solid var(--line-strong);border-radius:6px;padding:0 8px;font-size:12.5px;background:var(--surface);color:var(--ink);font-family:var(--font)}
.am-grid-pager{background:var(--surface-2)}
.am-grid-pager td,.am-grid-pager a,.am-grid-pager span{padding:5px 8px;color:var(--ink-2);text-decoration:none}
.am-grid-foot{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:10px}

/* hidden data columns (kept for inline-edit round-trip) */
.am-hide{display:none !important}

/* ---------- Legacy XP-chrome neutralizer ----------
   Restyles the old inline-styled bars/borders across every un-migrated view
   (header strips, count footers, outset borders) without touching their markup. */
.am-content [style*="bg1.png"],
.am-content [style*="bg2.png"],
.am-content [style*="bg3.png"],
.am-content [style*="bg4.png"]{background-image:none !important;background:var(--surface-2) !important;border:1px solid var(--line) !important;border-radius:var(--radius);color:var(--ink) !important}
.am-content [style*="#acbee2"],
.am-content [style*="#ACBEE2"]{background:var(--surface-2) !important;border:1px solid var(--line) !important;color:var(--ink-2) !important}
.am-content [style*="outset"]{border-style:solid !important;border-color:var(--line) !important}
.am-content [style*="#6badf6"]{background:var(--surface-2) !important;border-color:var(--line) !important}
/* Dark mode: rescue legacy dark inline text colours that vanish on the dark surface */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .am-content [style*="#333333"],
  :root:not([data-theme="light"]) .am-content [style*="#2C4C6C"],
  :root:not([data-theme="light"]) .am-content [style*="#2c4c6c"],
  :root:not([data-theme="light"]) .am-content [style*="LightSlateGray"],
  :root:not([data-theme="light"]) .am-content [style*="lightslategray"]{color:var(--ink) !important}
  :root:not([data-theme="light"]) .am-content [style*="#3E6AA0"],
  :root:not([data-theme="light"]) .am-content [style*="#3e6aa0"]{color:var(--accent) !important}
}
:root[data-theme="dark"] .am-content [style*="#333333"],
:root[data-theme="dark"] .am-content [style*="#2C4C6C"],
:root[data-theme="dark"] .am-content [style*="#2c4c6c"],
:root[data-theme="dark"] .am-content [style*="LightSlateGray"],
:root[data-theme="dark"] .am-content [style*="lightslategray"]{color:var(--ink) !important}
:root[data-theme="dark"] .am-content [style*="#3E6AA0"],
:root[data-theme="dark"] .am-content [style*="#3e6aa0"]{color:var(--accent) !important}

/* GridView: beat any leftover inline HeaderStyle/RowStyle colors on un-migrated grids */
.am-grid,.am-grid td,.am-grid th,.am-grid tr{background-color:transparent !important;border-color:var(--line) !important}
.am-grid{background:var(--surface) !important;border:1px solid var(--line) !important}
.am-grid th{background:var(--surface-2) !important;color:var(--ink-muted) !important}
.am-grid td{color:var(--ink) !important}
.am-grid a{color:var(--accent) !important}

/* DetailsView, modernised */
.am-details{width:100%;border-collapse:collapse;background:var(--surface) !important;border:1px solid var(--line) !important;border-radius:var(--radius);overflow:hidden;font-size:13px}
.am-details td,.am-details th{padding:8px 12px !important;border-bottom:1px solid var(--line) !important;background-color:transparent !important;color:var(--ink) !important;background-image:none !important}
.am-details td:first-child{color:var(--ink-2);font-weight:600;width:180px}
.am-details input[type="text"],.am-details select,.am-details textarea{height:32px;border:1px solid var(--line-strong);border-radius:7px;padding:0 9px;background:var(--surface);color:var(--ink);font-size:13px;font-family:var(--font)}

/* cell content: badges, key, customer, seats */
.am-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;line-height:1.5;white-space:nowrap}
.b-good{background:var(--good-bg);color:var(--good)}
.b-warn{background:var(--warning-bg);color:var(--warning)}
.b-crit{background:var(--critical-bg);color:var(--critical)}
.b-mut{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.b-new{background:var(--accent-weak);color:var(--accent)}
.am-key{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12px;color:var(--accent) !important;text-decoration:none}
.am-key:hover{text-decoration:underline}
.am-cust{font-weight:500;color:var(--ink)}
.am-cust-sub{color:var(--ink-muted);font-size:11.5px}
.am-seat{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--ink)}
.sub2{color:var(--ink-muted);font-size:11.5px}
.b-ext{background:#efe9fb;color:#6a4bc4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-ext{background:#241a3d;color:#a58ce8}}

/* ---------- Monitoring dashboard ---------- */
.am-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.am-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow)}
a.am-tile-link{display:block;text-decoration:none;cursor:pointer}
a.am-tile-link:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(42,120,214,.15)}
.link{color:var(--accent);text-decoration:none;font-size:12.5px;cursor:pointer}
.link:hover{text-decoration:underline}
.am-tile-lbl{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.am-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.am-tile-val{font-size:28px;font-weight:650;margin-top:6px;letter-spacing:-.5px;color:var(--ink)}
.am-tile-meta{font-size:12px;color:var(--ink-muted);margin-top:3px}
.am-dash-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.am-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.am-card-hd{display:flex;align-items:baseline;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.am-card-hd h2{font-size:14px;margin:0;font-weight:600;color:var(--ink)}
.am-card-sub{font-size:12px;color:var(--ink-muted)}
.am-empty{padding:26px 18px;text-align:center;color:var(--ink-muted);font-size:12.5px}

/* monthly bar chart */
.am-bars{display:flex;align-items:flex-end;gap:8px;height:160px}
.am-barwrap{flex:1;display:flex;justify-content:center;align-items:flex-end;height:100%}
.am-bar{width:100%;max-width:38px;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;position:relative;opacity:.92}
.am-bar:hover{opacity:1}
.am-bar-val{position:absolute;bottom:100%;left:0;right:0;text-align:center;font-size:11px;color:var(--ink-2);font-weight:600;margin-bottom:3px}
.am-axis{display:flex;gap:8px;margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.am-axis > span{flex:1;text-align:center;font-size:10.5px;color:var(--ink-muted)}
.am-log{max-height:420px;overflow:auto;font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
.am-logrow{display:flex;gap:10px;padding:7px 14px;border-bottom:1px solid var(--line);font-size:12px;align-items:baseline}
.am-logrow:last-child{border-bottom:none}
.am-logts{color:var(--ink-muted);white-space:nowrap;flex:0 0 auto}
.am-logmsg{color:var(--ink-2);word-break:break-word}
.am-logalert{background:var(--critical-bg)}
.am-logalert .am-logmsg{color:var(--critical);font-weight:600}

/* primary button (grid Edit, slide-over Save) */
.am-content input.am-btn-primary{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}
.am-content input.am-btn-primary:hover{filter:brightness(1.05)}

/* ---------- Edit / override slide-over ---------- */
.am-ovl{position:fixed;inset:0;background:rgba(16,24,40,.35);z-index:40}
.am-slideover{position:fixed;top:0;right:0;height:100vh;width:460px;max-width:94vw;background:var(--surface);
  box-shadow:-8px 0 30px rgba(16,24,40,.18);z-index:41;display:flex;flex-direction:column}
.am-slideover .so-hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.am-slideover .so-hd h2{margin:0;font-size:16px;color:var(--ink)}
.am-slideover .sub2{color:var(--ink-muted);font-size:11.5px;margin-top:4px}
.am-slideover .am-x{margin-left:auto;font-size:22px;line-height:1;color:var(--ink-muted);text-decoration:none;font-weight:600}
.am-slideover .am-x:hover{color:var(--ink)}
.am-slideover .so-bd{padding:4px 20px 20px;overflow:auto;flex:1}
.am-slideover .so-ft{padding:13px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2)}
.section-t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);font-weight:700;margin:20px 0 8px}
.am-slideover .frow{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);align-items:center}
.am-slideover .frow > label{color:var(--ink-2);font-size:12.5px}
.am-slideover .fi{width:100%;height:34px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;background:var(--surface);color:var(--ink);font-size:13px;font-family:var(--font)}
.am-slideover .fi:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.am-override{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px 14px 10px}
.am-flags{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.am-chk{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--surface);color:var(--ink-2);font-size:12.5px;cursor:pointer}
.am-chk label{cursor:pointer}
.am-linkbtn{border:none;background:transparent;color:var(--accent);cursor:pointer;font-size:12.5px;font-weight:600;padding:0}
.am-linkbtn:hover{text-decoration:underline}
.am-stepwrap{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.am-step{border:1px solid var(--line-strong);background:var(--surface);width:32px;height:34px;font-size:16px;cursor:pointer;color:var(--ink-2)}
.am-step:first-of-type{border-radius:8px 0 0 8px}
.am-step:hover{background:var(--accent-weak);color:var(--accent)}
.am-stepnum{width:52px;height:34px;text-align:center;border:1px solid var(--line-strong);border-left:none;border-right:none;
  background:var(--surface);color:var(--ink);font-weight:650;font-family:ui-monospace,Consolas,monospace}
.am-stepwrap .am-step:nth-of-type(2){border-radius:0 8px 8px 0}
.seatinfo{font-size:12px;color:var(--ink-2);margin-left:10px}
.am-warnline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--warning);margin-top:10px}

@media (max-width:820px){
  .am-sidebar{width:64px;flex:0 0 64px}
  .am-brand .t,.am-sidefoot,.am-navgrp{display:none}
  .am-nav a span.am-navtext{display:none}
  .am-content{padding:16px}
}