/* ==========================================================================
   Ability360 — brand theme
   Loaded after app.css. Retokenises the app to the logo palette, swaps the
   A36 tile for the real logo, and adds a polish layer.
   ========================================================================== */

/* ---------- tokens: sampled from the Ability360 mark ---------------------- */
:root{
  color-scheme: light;

  --brand-900:#0E3A46; --brand-800:#12525F; --brand-700:#177C87;
  --brand-600:#1E9BA8; --brand-500:#28B2BE; --brand-400:#6FD0D8;

  --accent-600:#6B3ACB; --accent-500:#7645D6; --accent-100:#EDE8FB;

  --coral-600:#E2603F; --coral-100:#FCEBE6;
  --amber-600:#C0850A; --amber-100:#FBF1DA;

  --ok-600:#1E8A5F;   --ok-100:#DDF3E9;
  --warn-600:#A8730B; --warn-100:#FBF1DA;
  --bad-600:#CE4433;  --bad-100:#FBE7E3;
  --info-600:#177C87; --info-100:#DFF1F3;

  --ink-900:#1B2338; --ink-700:#44506B; --ink-500:#6E7A93; --ink-400:#94A0B5;
  --line:#E1E6EC; --line-strong:#C6CEDA;
  --bg:#F5F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC;

  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(27,35,56,.05), 0 1px 3px rgba(27,35,56,.04);
  --shadow-md:0 8px 24px -10px rgba(27,35,56,.20);
  --shadow-lg:0 24px 56px -28px rgba(27,35,56,.34);
}

/* the app is deliberately light — hold the palette even on dark-set devices */
@media (prefers-color-scheme: dark){
  :root{
    --ink-900:#1B2338; --ink-700:#44506B; --ink-500:#6E7A93; --ink-400:#94A0B5;
    --line:#E1E6EC; --line-strong:#C6CEDA;
    --bg:#F5F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC;
    --accent-100:#EDE8FB; --ok-100:#DDF3E9; --warn-100:#FBF1DA;
    --bad-100:#FBE7E3; --info-100:#DFF1F3;
    --shadow-sm:0 1px 2px rgba(27,35,56,.05), 0 1px 3px rgba(27,35,56,.04);
    --shadow-md:0 8px 24px -10px rgba(27,35,56,.20);
  }
  body{background:var(--bg);color:var(--ink-900)}
  .badge{background:var(--surface-2);color:var(--ink-700);border-color:var(--line)}
  .badge.ok{background:var(--ok-100);color:var(--ok-600);border-color:transparent}
  .badge.warn{background:var(--warn-100);color:var(--warn-600);border-color:transparent}
  .badge.bad{background:var(--bad-100);color:var(--bad-600);border-color:transparent}
  .badge.info{background:var(--info-100);color:var(--info-600);border-color:transparent}
  .badge.brand{background:#E3F2F4;color:var(--brand-700);border-color:transparent}
  .badge.muted{background:var(--surface-2);color:var(--ink-500);border-color:var(--line)}
  .btn{background:var(--surface);color:var(--ink-900);border-color:var(--line-strong)}
  .btn.danger{background:var(--bad-600);color:#fff;border-color:transparent}
  select,input,textarea{background:var(--surface);color:var(--ink-900);border-color:var(--line-strong)}
  .print-doc{background:#fff;color:#111}
}

/* ---------- the logo replaces the A36 tile ------------------------------- */
.brand{
  display:block !important;
  box-sizing:border-box;
  height:46px; width:100%;
  padding:0 16px;
  background:url('/assets/ability360-logo-small.png') no-repeat 16px center;
  background-size:auto 30px;
  font-size:0 !important; line-height:0; color:transparent;
  text-decoration:none;
}
.brand > *{display:none !important}
.sidebar .brand{
  background-image:url('/assets/ability360-logo-light.png');
  background-size:auto 30px;
  background-position:16px center;
  height:52px;
  margin:6px 0 14px;
}

/* ---------- shell -------------------------------------------------------- */
body{background:var(--bg);color:var(--ink-900)}

.sidebar{
  background-image:linear-gradient(168deg, #0E3A46 0%, #12525F 52%, #1B4A6B 100%) !important;
  border-right:0;
  box-shadow:1px 0 0 rgba(27,35,56,.06);
}
.sidebar .nav-group{
  color:rgba(255,255,255,.46);
  text-transform:uppercase; letter-spacing:.11em; font-size:10.5px; font-weight:600;
  margin:18px 0 6px;
}
.sidebar .nav-item{
  border-radius:10px; padding:9px 11px; margin:1px 0;
  color:rgba(226,242,246,.82); font-weight:500;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar .nav-item:hover{background:rgba(255,255,255,.09); color:#fff; transform:translateX(2px)}
.sidebar .nav-item.active,
.sidebar .nav-item[aria-current]{
  background:linear-gradient(100deg, rgba(40,178,190,.30), rgba(118,69,214,.26));
  color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.sidebar .ico{opacity:.85; width:18px; display:inline-block; text-align:center}

/* ---------- surfaces ----------------------------------------------------- */
.card, .panel, .box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.card:hover{box-shadow:var(--shadow-md)}

table th{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-500); font-weight:600;
}
table tbody tr{transition:background .12s}
table tbody tr:hover{background:var(--surface-2)}

/* ---------- controls ----------------------------------------------------- */
.btn{
  border-radius:10px; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary, .btn-primary, button[type=submit]:not(.btn.danger){
  background:linear-gradient(135deg, var(--brand-600), var(--brand-700));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 16px -8px rgba(30,155,168,.75);
}
.btn.primary:hover, .btn-primary:hover, button[type=submit]:not(.btn.danger):hover{
  background:linear-gradient(135deg, var(--brand-500), var(--brand-600));
}
input, select, textarea{
  border-radius:10px; border:1px solid var(--line-strong);
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgba(30,155,168,.16);
}

.badge{border-radius:999px; font-weight:600; letter-spacing:.01em}

/* roster chips pick up the brand hues */
.shift-chip{border-radius:8px}
.shift-chip.unassigned{background:var(--bad-100); color:var(--bad-600); border:1px dashed var(--bad-600)}

/* ---------- auth pages (blank layout) ------------------------------------ */
body:not(:has(.sidebar)){
  background:
    radial-gradient(900px 520px at 12% 4%,  rgba(30,155,168,.20), transparent 60%),
    radial-gradient(820px 560px at 88% 10%, rgba(118,69,214,.18), transparent 58%),
    radial-gradient(700px 460px at 60% 100%, rgba(226,96,63,.14), transparent 62%),
    var(--bg);
  min-height:100vh;
}
body:not(:has(.sidebar)) form,
body:not(:has(.sidebar)) .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  padding:32px;
}
body:not(:has(.sidebar)) .brand{
  background-position:center; height:52px; background-size:auto 34px; margin-bottom:20px;
}
body:not(:has(.sidebar)) a{color:var(--brand-700)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important}
}