/* Novel IPO — Brand Theme (Step 8.3a)
   Single source of truth for CSS variables and reusable component classes.
   Loaded by login + dashboard; grow to other pages as they are redesigned. */

/* ── Custom properties ───────────────────────────────────────────────── */
:root {
  /* Core palette */
  --navy:   #1E2A78;
  --orange: #E8741E;
  --page:   #F7F8FB;
  --surface:#FFFFFF;
  --border: #E3E6EF;
  --text:   #2B2F3A;
  --muted:  #6B7080;

  /* Alert panel */
  --alert-bg:     #FCEBEB;
  --alert-border: #E24B4A;
  --alert-text:   #A32D2D;

  /* Dashboard card tints */
  --card-total-bg:   #E9ECF8;  --card-total-text:   #1E2A78;
  --card-filing-bg:  #FCEEE2;  --card-filing-text:  #8A4A12;
  --card-active-bg:  #E8F5EC;  --card-active-text:  #1B6B43;
  --card-deact-bg:   #EFF0F3;  --card-deact-text:   #4A4E5A;

  /* Sidebar dimensions */
  --sidebar-w:    248px;
  --sidebar-coll: 64px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.nipo-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width .2s ease;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}
.nipo-sidebar.collapsed { width: var(--sidebar-coll); }

.nipo-sidebar .sb-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem .9rem .85rem;
  border-bottom: 1px solid #1E2A78;
  background: #F0F4F8;
  flex-shrink: 0;
}
.nipo-sidebar .sb-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.nipo-sidebar .sb-wordmark {
  color: #1E2A78;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  transition: opacity .15s ease;
}
.nipo-sidebar .sb-wordmark span { color: var(--orange); }
.nipo-sidebar.collapsed .sb-wordmark { opacity: 0; width: 0; flex: 0; }
/* Collapse fix: hide logo so toggle button fits within --sidebar-coll width */
.nipo-sidebar.collapsed .sb-brand img { display: none; }
.nipo-sidebar.collapsed .sb-brand { justify-content: center; padding: .75rem 0; }

.sb-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  padding: .2rem .3rem;
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.sb-toggle:hover { color: #fff; }
.nipo-sidebar .sb-brand .sb-toggle       { color: #1E2A78; }
.nipo-sidebar .sb-brand .sb-toggle:hover { color: #1E2A78; }
button.sb-link { width: 100%; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; }

.nipo-sidebar nav {
  flex: 1;
  padding: .5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-link {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .55rem .9rem;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .875rem;
  transition: background .15s, color .15s;
}
.sb-link i { font-size: 1.05rem; flex-shrink: 0; }
.sb-link span { overflow: hidden; transition: opacity .15s ease; }
.nipo-sidebar.collapsed .sb-link span { opacity: 0; width: 0; }
.sb-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.sb-link.active { background: var(--orange); color: #fff; }

.sb-section-label {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
  padding: .85rem .9rem .2rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .15s ease;
}
.nipo-sidebar.collapsed .sb-section-label { opacity: 0; }

/* ── C10: Tabs accordion group ───────────────────────────────────────────── */
.sb-group-btn {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.sb-group-btn .sb-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.sb-submenu {
  display: none;
  overflow: hidden;
}
.sb-submenu.open { display: block; }
.sb-group-btn.open .sb-chevron { transform: rotate(180deg); }
.sb-sub-link {
  padding-left: 2.2rem;
  font-size: .82rem;
}
/* Collapsed sidebar: hide submenu and chevron text alongside other spans */
.nipo-sidebar.collapsed .sb-submenu { display: none !important; }
.nipo-sidebar.collapsed .sb-chevron { display: none; }

.sb-logout-area {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: .4rem 0;
  flex-shrink: 0;
}

/* ── Top header bar ───────────────────────────────────────────────────── */
.nipo-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .55rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 54px;
  flex-shrink: 0;
}
.nipo-topbar .tb-brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
}
.nipo-topbar .tb-brand img { width: 30px; height: 30px; object-fit: contain; }
.nipo-topbar .tb-brand-text {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .05em;
  white-space: nowrap;
}
.nipo-topbar .tb-spacer { flex: 1; }
.nipo-topbar .tb-user {
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
}
.nipo-topbar .tb-user a { color: var(--muted); text-decoration: none; }
.nipo-topbar .tb-user a:hover { color: var(--text); }
.nipo-topbar .tb-user strong { color: var(--text); }

/* ── Dashboard summary cards ─────────────────────────────────────────── */
.dash-card {
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  display: block;
  transition: box-shadow .15s ease;
  border: none;
  color: inherit;
}
.dash-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); text-decoration: none; }

.dash-card--total  { background: var(--card-total-bg);  color: var(--card-total-text); }
.dash-card--filing { background: var(--card-filing-bg); color: var(--card-filing-text); }
.dash-card--active { background: var(--card-active-bg); color: var(--card-active-text); }
.dash-card--deact  { background: var(--card-deact-bg);  color: var(--card-deact-text); }

.dash-card .dc-count { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.dash-card .dc-label { font-size: .83rem; font-weight: 600; margin-top: .35rem; opacity: .85; }
.dash-card .dc-sub   { font-size: .78rem; margin-top: .5rem; opacity: .72; }
.dash-card .dc-sub a { color: inherit; }

/* ── Alert panel (Step 8.13 item 4: bolder border + bold links) ─────── */
.nipo-alert-panel {
  background: var(--alert-bg);
  border: 2px solid var(--alert-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: var(--alert-text);
}
.nipo-alert-panel h2 { color: var(--alert-text); font-size: 1rem; font-weight: 700; margin-bottom: .65rem; }
.nipo-alert-panel a  { color: var(--alert-text); font-weight: 700; }
.nipo-alert-panel ul { padding-left: 0; list-style: none; margin: 0; }
.nipo-alert-panel li { padding: .15rem 0; font-weight: 700; color: var(--alert-text); }

/* ── Needs Attention panel ───────────────────────────────────────────────
   Amber, NOT red — this is work to do, not something broken. Its own border
   and background keep it visually separate from the (red) alerts box. The only
   red is an overdue date, so the eye lands there. */
.nipo-attention-panel {
  background: #FFFFFF;
  border: 2px solid #B45309;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: #23262E;
}
.nipo-attention-panel h2 {
  color: #B45309; font-size: 1rem; font-weight: 700;
  margin-bottom: .35rem; display: flex; align-items: baseline; gap: .45rem;
}
.nipo-attention-panel h2 .nap-count { font-size: 1.5rem; font-weight: 800; margin-left: auto; }
.nipo-attention-panel .nap-sub { font-size: .78rem; color: #6B7080; margin: 0 0 .75rem; }
.nipo-attention-panel .nap-tab { margin-bottom: .55rem; }
.nipo-attention-panel .nap-tab-label { font-size: .82rem; font-weight: 700; color: #23262E; }
/* An empty tab collapses to one line: label left, dash right-aligned to the
   same edge as the panel total — a dash where a count belongs reads as zero. */
.nipo-attention-panel .nap-tab--empty {
  display: flex; align-items: baseline; justify-content: space-between;
}
.nipo-attention-panel .nap-list { list-style: none; padding-left: 0; margin: .1rem 0 0; }
/* Row indents wrapped content: the app number starts flush (negative margin
   cancels the padding), so when the date/status wrap they sit indented beneath
   it as a continuation rather than at the panel edge. */
.nipo-attention-panel .nap-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  padding: .1rem 0 .1rem 1.25rem; font-size: .82rem;
}
.nipo-attention-panel a.nap-appno {
  color: #1E2A78; font-weight: 700; text-decoration: none;
  margin-left: -1.25rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.nipo-attention-panel a.nap-appno:hover { text-decoration: underline; }
.nipo-attention-panel .nap-date { color: #23262E; }
.nipo-attention-panel .nap-date.nap-overdue { color: #B3261E; font-weight: 600; }
/* Pending state as a coloured word — weight 600 so it reads as a label like the
   date, no box. Kept dark enough not to compete with the overdue red. */
.nipo-attention-panel .nap-team { font-weight: 600; white-space: nowrap; }
.nipo-attention-panel .nap-team--both  { color: #A03530; }
.nipo-attention-panel .nap-team--fer   { color: #1E2A78; }
.nipo-attention-panel .nap-team--admin { color: #8B1A5C; }
.nipo-attention-panel .nap-empty { color: #6B7080; }

/* ── Tab tiles ───────────────────────────────────────────────────────── */
.tab-tile {
  border-radius: 10px;
  padding: .9rem 1rem;
  text-decoration: none;
  display: block;
  transition: box-shadow .15s ease;
  border: none;
  height: 100%;
  color: inherit;
}
.tab-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); text-decoration: none; }
.tab-tile.tab-tile--placeholder { background: #f0f1f4; color: #888; cursor: default; }
.tab-tile .tt-count { font-size: 2rem; font-weight: 800; line-height: 1; }
.tab-tile .tt-label { font-size: .75rem; font-weight: 600; margin-top: .3rem; opacity: .85; }
.tab-tile .tt-badge { font-size: .65rem; margin-bottom: .3rem; }

/* Per-tab slug tints */
.tab-tile[data-tab-slug="publication-patents"] { background: #EAF2FB; color: #185FA5; }
.tab-tile[data-tab-slug="awaiting-rfe"]         { background: #FDEFE7; color: #C2611A; }
.tab-tile[data-tab-slug="awaiting-examination"] { background: #EAF6F0; color: #1B6B43; }
.tab-tile[data-tab-slug="fer-issued"]           { background: #FBEAEA; color: #A32D2D; }
.tab-tile[data-tab-slug="fer-reply-filed"]      { background: #F3EFFA; color: #534AB7; }
.tab-tile[data-tab-slug="ser"]                  { background: #FFF7E6; color: #854F0B; }
.tab-tile[data-tab-slug="hearing-issued"]       { background: #EAF4F6; color: #0F6E56; }
.tab-tile[data-tab-slug="hearing-adjournment"]  { background: #FEF0F5; color: #943057; }
.tab-tile[data-tab-slug="written-submission"]   { background: #F0F3E8; color: #3B6D11; }
.tab-tile[data-tab-slug="grant"]                { background: #E9F6EC; color: #27500A; }
.tab-tile[data-tab-slug="refused"]              { background: #FBECEC; color: #791F1F; }
.tab-tile[data-tab-slug="provisional-patents"]     { background: #FDFAE6; color: #7A6000; }
.tab-tile[data-tab-slug="publication-statuses-gp"] { background: #EEEEF8; color: #3A3C8F; }

/* ── Page-scoped box borders (dashboard + tab pages only) ────────────── */
.nipo-dashboard-page .dash-card { border: 1px solid rgba(0,0,0,.10); }
.nipo-dashboard-page .tab-tile  { border: 1px solid rgba(0,0,0,.12); }
.nipo-tab-page .card            { border: 1px solid rgba(0,0,0,.12); }

/* ── Filter icon toggle ──────────────────────────────────────────────── */
.col-filter-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0 2px; color: var(--muted); vertical-align: middle; font-size: .75rem; line-height: 1;
}
.col-filter-toggle:hover { color: var(--orange); }

/* ── Column filter wrap: drop below header, don't expand column width ── */
/* Bug 7: many columns made the header row very wide when filters were
   open; absolute positioning lets the filter float over the table body
   instead, keeping each <th> at its natural content width.             */
thead th { position: relative; }
.col-filter-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  padding: 5px 7px;
  min-width: 160px;
  white-space: nowrap;
}

/* Step 8.12 B-2 / 8.15 — overdue row highlight: solid so it covers the stripe */
.nipo-row-overdue td {
  background-color: #f5c2c7 !important;
}

/* Step 8.15 — confirmation word colors (Submitted=green, Pending=red) */
.nipo-conf-submitted   { color: #198754; font-weight: 600; }
.nipo-conf-pending     { color: #b02a37; font-weight: 600; }
.nipo-conf-adjournment { color: #0d6efd; font-weight: 600; }
.nipo-conf-hnc         { color: #e07b00; font-weight: 600; }
/* Closed = "no action needed" — settled, not done. Muted grey-green so it sits
   quietly, reading as neither an alert nor a success. */
.nipo-conf-closed      { color: #4A6B5A; font-weight: 600; }
/* FER reply extension filed — purple, distinct from the blue adjournment. */
.nipo-conf-extension   { color: #6f42c1; font-weight: 600; }

/* Step 8.13 item 1 — Tab "Total" card subtle tint (border-primary cards on tab pages) */
.nipo-tab-page .card.border-primary {
  background-color: #EEF1FB;
}