/* ===========================================================================
   Automatorr Dashboards — shell (sign-in + dashboard selector).

   Tokens, fonts and the whole .auth-* block are lifted verbatim from the FIH
   dashboard's styles.css so /login and / look identical to the dashboards they
   lead into. Only the selector and manage-access blocks at the bottom are new.
   =========================================================================== */

@font-face{font-family:'Barlow';src:url('../vendor/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../vendor/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('../vendor/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('../vendor/fonts/barlowsc-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('../vendor/fonts/barlowsc-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ground:#eef2f8;
  --ground-2:#e7ecf4;
  --surface:#ffffff;
  --surface-2:#f5f8fc;
  --surface-3:#eef2f8;
  --line:#dbe2ed;
  --line-soft:#e8edf5;
  --text:#15223c;
  --muted:#65748d;
  --muted-2:#9aa6bb;
  --accent:#008a8e;
  --accent-deep:#0a6f73;
  --accent-ink:#08585b;
  --accent-glow:rgba(0,138,142,.12);
  --accent-light:#49c0b6;
  --navy:#0a2239;
  --yellow:#ffe600;
  --pos:#18a558;
  --crit:#d9534f;
  --navy-soft:rgba(10,34,57,.07);   /* Chatbot Analytics card chip */
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Menlo,Consolas,monospace;

  --display:'Barlow Semi Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --r-lg:16px; --r-md:11px; --r-sm:8px;
  --shadow:0 1px 2px rgba(20,34,60,.04), 0 10px 26px -14px rgba(20,34,60,.22);
  --shadow-sm:0 1px 2px rgba(20,34,60,.05);
  --ctl-h:40px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* Visually hidden but read by assistive tech (icon-only column headers). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--body);
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(0,138,142,.07), transparent 62%),
    var(--ground);
  color:var(--text);
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-glow)}
.tnum{font-variant-numeric:tabular-nums}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cfd8e6;border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#b9c4d6;background-clip:content-box}

.brand-logo{width:100%;max-width:172px;height:auto;object-fit:contain;display:block}
.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.4px;padding-left:2px}

.vendor-lockup{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-left:16px;margin-left:4px;border-left:1px solid var(--line);text-decoration:none;cursor:pointer;transition:opacity .15s,transform .15s}
.vendor-lockup:hover{opacity:.78;transform:translateY(-1px)}
.vendor-lockup:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow);border-radius:6px}
.vendor-lockup span{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.vendor-lockup img{width:158px;height:auto;display:block}

/* =========================== Auth / login page =========================== */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.auth-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;width:100%;max-width:440px}
.auth-card{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 30px 24px;box-shadow:var(--shadow);
}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:24px}
.auth-brand .brand-logo{width:auto;max-width:210px;height:auto}
.auth-brand .brand-sub{padding-left:0}
.auth-step h1{font-family:var(--display);font-weight:700;font-size:26px;margin:0 0 6px;letter-spacing:.2px}
.auth-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.auth-sub b{color:var(--text);word-break:break-all}
.auth-label{display:block;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}
.auth-input{
  width:100%;height:44px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;
  font:inherit;font-size:14.5px;transition:border-color .15s,box-shadow .15s;
}
.auth-input:hover{border-color:#c3cedd}
.auth-input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-code{
  font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:12px;
  text-align:center;padding:0 4px 0 16px;height:56px;
}
.auth-btn{
  width:100%;height:44px;margin-top:16px;
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;
  transition:background .15s,transform .12s;box-shadow:0 4px 14px -5px var(--accent);
}
.auth-btn:hover:not(:disabled){background:var(--accent-deep)}
.auth-btn:active:not(:disabled){transform:translateY(1px)}
.auth-btn:disabled{opacity:.6;cursor:default}
.auth-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12.5px;color:var(--muted)}
.auth-meta b{color:var(--text);font-variant-numeric:tabular-nums}
#expiry-note.expired{color:var(--crit)}
#expiry-note.expired b{color:var(--crit)}
.auth-link{
  background:none;border:none;color:var(--accent-ink);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;padding:2px 4px;border-radius:5px;
}
.auth-link:hover:not(:disabled){text-decoration:underline}
.auth-link:disabled{color:var(--muted-2);cursor:default}
.auth-back{display:block;margin:14px auto 0}
.auth-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted-2);text-align:center}
.auth-vendor{border-left:none;padding-left:0;margin-left:0;align-items:center}

/* =========================== Toasts =========================== */
/* Selectors must match frontend/shell/js/toast.js exactly (#toasts host,
   .t-close, .in/.out transition classes) — taken from the FIH stylesheet,
   which is the version this toast.js was written against. */
#toasts{
  position:fixed;top:18px;right:18px;z-index:1200;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  pointer-events:none;max-width:min(400px,calc(100vw - 36px));
}
.toast{
  pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  min-width:260px;max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 12px 12px 14px;box-shadow:0 14px 38px -12px rgba(20,34,60,.35);
  font-size:13.5px;line-height:1.45;color:var(--text);
  border-left:4px solid var(--accent);
  opacity:0;transform:translateX(14px);transition:opacity .22s ease,transform .22s ease;
}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(14px)}
.toast .t-ico{width:19px;height:19px;flex:0 0 19px;margin-top:1px}
.toast .t-ico svg{width:19px;height:19px;display:block}
.toast .t-msg{flex:1;font-weight:500;padding-right:2px}
.toast .t-close{
  background:none;border:none;color:var(--muted-2);font-size:18px;line-height:1;
  cursor:pointer;padding:0 2px;border-radius:5px;flex:0 0 auto;
}
.toast .t-close:hover{color:var(--text)}
.toast.success{border-left-color:var(--pos)}   .toast.success .t-ico{color:var(--pos)}
.toast.error{border-left-color:var(--crit)}    .toast.error .t-ico{color:var(--crit)}
.toast.warning{border-left-color:var(--yellow)}  .toast.warning .t-ico{color:#b9831a}
.toast.info{border-left-color:var(--accent)}   .toast.info .t-ico{color:var(--accent)}

/* ===========================================================================
   App bar — real white chrome, not a logo floating on the tinted page.
   (The Hockey Australia mark is a PNG with a white ground; on the tinted body
   it read as a stray white rectangle. Sitting it on a white surface, divided
   from the wordmark by a hairline rule, is how the FIH sidebar carries it too.)
   =========================================================================== */
.appbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,34,60,.02);
}
.appbar-in{
  max-width:1120px;margin:0 auto;padding:0 28px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.appbar-brand{display:flex;align-items:center;gap:15px;min-width:0}
.appbar-logo{height:34px;width:auto;display:block;flex:0 0 auto}
.appbar-rule{width:1px;height:26px;background:var(--line);flex:0 0 auto}
.appbar-name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.appbar-name strong{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.3px;
  text-transform:uppercase;color:var(--text);
}
.appbar-name span{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted-2);font-weight:600}

.appbar-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.appbar-right .vendor-lockup{padding-left:0;margin-left:0;border-left:none}
.appbar-right .vendor-lockup img{width:124px}

.user-chip{
  display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:22px;min-width:0;
}
.user-avatar{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink));
  color:#fff;font-family:var(--display);font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase;
}
.user-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.user-meta strong{font-size:12.5px;font-weight:600;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-meta span{font-size:9.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--accent-ink);font-weight:700}

/* Icon-only buttons always carry an aria-label; never ship a bare glyph. */
.icon-btn{
  width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s;
}
.icon-btn svg{width:17px;height:17px;display:block}
.icon-btn:hover{color:var(--crit);border-color:rgba(217,83,79,.35);background:rgba(217,83,79,.05)}
.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}

/* =========================== Page frame =========================== */
.shell-wrap{max-width:1120px;margin:0 auto;padding:38px 28px 64px;display:flex;flex-direction:column;gap:34px}

.eyebrow{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;
}
.section-title{font-family:var(--display);font-weight:700;font-size:29px;letter-spacing:.2px;margin:0 0 5px}
.section-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;max-width:62ch}

/* =========================== Dashboard cards =========================== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}

.dash-card{
  position:relative;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 24px 20px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* A colour spine rather than a coloured card: identity without shouting. */
.dash-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease;
}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c8d3e2}
.dash-card:hover::before{transform:scaleY(1)}
.dash-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow);border-color:var(--accent)}
.dash-card[data-key="chatbot"]::before{background:var(--navy)}
.dash-card[data-key="chatbot"]:focus-visible{border-color:var(--navy)}

.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px}
.dash-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-glow);color:var(--accent-ink);
}
.dash-card[data-key="chatbot"] .dash-icon{background:var(--navy-soft);color:var(--navy)}
.dash-icon svg{width:23px;height:23px;display:block}

.dash-card h2{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 6px;letter-spacing:.2px}
.dash-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

/* What the dashboard actually contains — its real page/tab names, so the card
   informs rather than decorates. */
.dash-chips{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.dash-chip{
  font-size:11px;font-weight:500;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:3px 8px;white-space:nowrap;
}
.dash-chip.more{color:var(--muted-2);background:transparent;border-style:dashed}

.dash-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.dash-open{font-size:12.5px;font-weight:600;color:var(--accent-ink);letter-spacing:.1px}
.dash-card[data-key="chatbot"] .dash-open{color:var(--navy)}

/* The open affordance: a drawn arrow in a real button-shaped target that fills
   on hover — replaces the plain text arrow glyph. */
.dash-arrow{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--muted);background:var(--surface);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.dash-arrow svg{width:17px;height:17px;display:block}
.dash-card:hover .dash-arrow{
  background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(3px);
}
.dash-card[data-key="chatbot"]:hover .dash-arrow{background:var(--navy);border-color:var(--navy)}

.role-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  padding:4px 9px 4px 7px;border-radius:20px;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
}
.role-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.role-pill.admin{border-color:rgba(0,138,142,.28);background:var(--accent-glow);color:var(--accent-ink)}

/* =========================== Empty state =========================== */
.empty-note{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:46px 30px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.6;
}
.empty-note svg{width:34px;height:34px;color:var(--muted-2)}
.empty-note strong{display:block;font-family:var(--display);font-size:18px;color:var(--text);font-weight:700}
.empty-note p{margin:0;max-width:46ch}

/* =========================== Manage access panel =========================== */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:20px 24px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
}
.panel-head h2{font-family:var(--display);font-weight:700;font-size:20px;margin:0;letter-spacing:.2px}
.panel-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.panel-head .eyebrow{margin-bottom:5px}
.panel-body{padding:22px 24px 24px}

/* Segmented control — one connected object, not two loose buttons. */
.segmented{display:inline-flex;background:var(--surface-3);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.segmented .tab{
  background:transparent;border:none;border-radius:6px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  height:30px;padding:0 14px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
}
.segmented .tab:hover{color:var(--text)}
.segmented .tab.active{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.segmented .tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}

.grant-form{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:16px;margin-bottom:22px;
}
.grant-form .field{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;min-width:210px}
.grant-form .field.role{flex:0 0 250px}
.grant-form label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.grant-form input,.grant-form select{
  height:var(--ctl-h);background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:13.5px;
  transition:border-color .15s,box-shadow .15s;
}
.grant-form input::placeholder{color:var(--muted-2)}
.grant-form input:hover,.grant-form select:hover{border-color:#c3cedd}
.grant-form input:focus-visible,.grant-form select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.grant-form .btn-add{
  display:inline-flex;align-items:center;gap:7px;
  height:var(--ctl-h);background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);
  font:inherit;font-weight:600;font-size:13.5px;padding:0 18px;cursor:pointer;flex:0 0 auto;
  box-shadow:0 4px 14px -6px var(--accent);transition:background .15s,transform .12s;
}
.grant-form .btn-add svg{width:15px;height:15px}
.grant-form .btn-add:hover:not(:disabled){background:var(--accent-deep)}
.grant-form .btn-add:active:not(:disabled){transform:translateY(1px)}
.grant-form .btn-add:disabled{opacity:.55;cursor:default;box-shadow:none}
.grant-form .btn-add:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}

.table-scroll{overflow-x:auto}
.access-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.access-table th{
  text-align:left;font-size:10px;font-weight:700;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:1px;padding:0 12px 9px;border-bottom:1px solid var(--line);
}
.access-table td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.access-table tbody tr:last-child td{border-bottom:none}
.access-table tbody tr:hover{background:var(--surface-2)}
.access-table .col-act{text-align:right;width:1%;white-space:nowrap}
.cell-email{font-family:var(--mono);font-size:12.5px;color:var(--text)}
.cell-by{color:var(--muted);font-size:12.5px}
.cell-when{color:var(--muted);font-size:12.5px;white-space:nowrap}
/* Revoke: a LABELLED button, visible at rest. An icon-only control here was
   effectively undiscoverable — dashboard admins could not find the one action
   they are specifically allowed to perform. */
.btn-revoke{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px 0 9px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;
  cursor:pointer;transition:color .15s,background .15s,border-color .15s;
}
.btn-revoke svg{width:15px;height:15px;flex:0 0 15px;display:block}
.btn-revoke:hover:not(:disabled){
  color:var(--crit);background:rgba(217,83,79,.06);border-color:rgba(217,83,79,.42);
}
.btn-revoke:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.btn-revoke:disabled{opacity:.55;cursor:default}
/* Armed = one click in, awaiting the second. Filled danger so the state change
   is unmistakable without a modal. */
.btn-revoke.armed,
.btn-revoke.armed:hover:not(:disabled){
  background:var(--crit);border-color:var(--crit);color:#fff;
}

/* Rows this user may not touch say WHY, rather than showing a bare dash. */
.locked{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--muted-2);font-size:11px;font-weight:500;white-space:nowrap;cursor:default;
}
.locked svg{width:13px;height:13px;flex:0 0 13px;display:block}

.access-empty{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:34px 12px;color:var(--muted-2);font-size:13px;text-align:center;
}
.access-empty svg{width:26px;height:26px}
.access-note{
  margin:18px 0 0;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--muted-2);line-height:1.7;
}
.access-note code{
  font-family:var(--mono);background:var(--surface-3);color:var(--muted);
  border-radius:4px;padding:1.5px 5px;font-size:10.5px;
}

@media (max-width:720px){
  .appbar-in{height:auto;padding:12px 18px;flex-wrap:wrap;gap:12px}
  .appbar-right .vendor-lockup{display:none}
  .user-meta strong{max-width:150px}
  .shell-wrap{padding:26px 18px 48px;gap:26px}
  .section-title{font-size:24px}
  .dash-grid{grid-template-columns:1fr}
  .panel-head{align-items:flex-start}
}