/* ============================================================
   GRC Design System — Bootstrap 5 custom sidebar layout
   Matches reference: dark sidebar (#1a1f36), primary #4e73df
   ============================================================ */

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  background: #f8f9fc;
  color: #1a1f36;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

/* --- Layout Shell --- */
:root {
  --grc-sidebar-width: 250px;
  --grc-topbar-height: 57px;
  --grc-sidebar-bg: #1a1f36;
  --grc-primary: #4e73df;
  --grc-primary-dark: #2e59d9;
  --grc-content-bg: #f8f9fc;
  --grc-border: #e3e6f0;
  --grc-muted: #6c757d;

  /* Risk severity tokens — shared by the Risk Assessment (A4) matrix/table/badge
     styling (setup/risks.css) and the matrix-size preview on Organisation
     Profile (setup/client-profile.css). Defined globally so both pages can use
     them without one <link>-ing the other's stylesheet. */
  --grc-risk-low: #1cc88a;
  --grc-risk-low-bg: #d9f7ec;
  --grc-risk-medium: #f6c23e;
  --grc-risk-medium-bg: #fdf0cf;
  --grc-risk-high: #fd7e14;
  --grc-risk-high-bg: #fde3cc;
  --grc-risk-critical: #e74a3b;
  --grc-risk-critical-bg: #fadbd8;
}

.grc-body {
  display: flex;
  min-height: 100vh;
  background: var(--grc-content-bg);
  margin: 0;
}

/* --- Sidebar --- */
.grc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--grc-sidebar-width);
  height: 100vh;
  background: var(--grc-sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  transition: transform 0.25s ease;
}

.grc-sidebar::-webkit-scrollbar { width: 4px; }
.grc-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Brand */
.grc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.grc-brand:hover { color: #fff; text-decoration: none; }

.grc-brand-logo {
  height: 30px;
  width: auto;
  max-width: 100%;
}

/* User Panel */
.grc-user-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.grc-user-icon {
  font-size: 2rem;
  color: #adb5bd;
  flex-shrink: 0;
}

.grc-user-info { min-width: 0; }

.grc-user-name {
  color: #c2c7d0;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.grc-user-name:hover { color: #fff; text-decoration: none; }

/* Nav */
.grc-nav { flex: 1; padding: 8px 0 16px; }

.grc-nav-header {
  padding: 10px 16px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6c757d;
  text-transform: uppercase;
}

.grc-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #c2c7d0;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.grc-nav-link i { width: 20px; text-align: start; font-size: 1rem; line-height: 1; flex-shrink: 0; }

.grc-nav-link:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
  text-decoration: none;
}

.grc-nav-link.active {
  background: var(--grc-primary);
  color: #fff;
  border-left-color: rgba(255,255,255,0.5);
}

.grc-nav-locked {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Setup substep not yet reachable — greyed and non-clickable. */
.grc-nav-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Collapsible nav group */
.grc-nav-collapsible {
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

.grc-nav-chevron {
  transition: transform 0.2s ease;
  font-size: 0.75rem !important;
  opacity: 0.7;
}

.grc-nav-collapsible[aria-expanded="true"] .grc-nav-chevron {
  transform: rotate(180deg);
}

.grc-nav-submenu {
  border-left: 2px solid rgba(255,255,255,0.12);
  margin: 2px 10px 4px 18px;
  border-radius: 0 0 4px 4px;
}

.grc-nav-sub {
  padding-left: 12px;
  font-size: 0.85rem;
}

.grc-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Main area --- */
.grc-main {
  margin-left: var(--grc-sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - var(--grc-sidebar-width));
  transition: margin-left 0.25s ease, width 0.25s ease;
}

/* --- Topbar --- */
.grc-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--grc-topbar-height);
  background: var(--grc-sidebar-bg);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  flex-shrink: 0;
}

.grc-sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.grc-sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); }

.grc-topbar-title {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Topbar nav items (language switcher, login) */
.grc-topbar .dropdown-toggle {
  color: rgba(255,255,255,0.8);
  background: none;
  border: none;
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.grc-topbar .dropdown-toggle:hover,
.grc-topbar .dropdown-toggle:focus {
  color: #fff;
  background: rgba(255,255,255,0.1);
  box-shadow: none;
}

.grc-topbar .dropdown-toggle::after { margin-left: 5px; }

.grc-topbar .nav-link {
  color: rgba(255,255,255,0.8);
  font-size: 0.88rem;
  padding: 6px 10px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.grc-topbar .nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }

.grc-topbar .btn-link {
  color: rgba(255,255,255,0.8);
  font-size: 0.88rem;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.grc-topbar .btn-link:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* --- Page Header --- */
.grc-page-header {
  background: #fff;
  border-bottom: 1px solid var(--grc-border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.grc-page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0;
}

.grc-page-title-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  border: 1px solid var(--grc-border);
  border-radius: 50%;
  background: #fff;
  color: var(--grc-muted);
  font-size: .68rem;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.grc-page-title-help:hover,
.grc-page-title-help:focus-visible {
  color: var(--grc-primary);
  border-color: var(--grc-primary);
  outline: none;
}

.grc-page-subtitle {
  font-size: 0.85rem;
  color: var(--grc-muted);
  margin: 2px 0 0;
}

.grc-breadcrumb {
  font-size: 0.82rem;
  background: none;
  padding: 0;
}

/* Holy-grail centering: title and the right-side (actions+breadcrumb) group
   share equal flex-basis so the nav in between sits at the row's true visual
   center, regardless of how wide either side's content happens to be —
   plain justify-content:center on the nav alone only centers it within
   whatever space remains after the other two sides, which skews off-center
   whenever the title text differs in length from the breadcrumb/actions. */
.grc-page-header-title {
  flex: 1 1 0;
  min-width: 0;
}

.grc-page-header-nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.grc-page-header-right {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  flex-wrap: wrap;
}

/* The equal-share side columns need real room to breathe once a wide nav
   (e.g. a 3-step substep indicator) sits between them — below this, their
   allotted half-share goes narrower than the title/breadcrumb's natural
   width, forcing an in-place text wrap that collides with the nav next to
   it. Stacking avoids that fight for horizontal space entirely. The 250px
   fixed sidebar eats into content width well before the viewport itself
   feels "narrow", so this needs a generous cutover — Bootstrap's xl
   breakpoint, not a typical mobile one. */
@media (max-width: 1199.98px) {
  .grc-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .grc-page-header-title,
  .grc-page-header-nav,
  .grc-page-header-right {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .grc-page-header-right {
    justify-content: flex-start;
  }
}

.grc-breadcrumb a { color: var(--grc-primary); text-decoration: none; }
.grc-breadcrumb a:hover { text-decoration: underline; }

/* --- Content --- */
.grc-content {
  flex: 1;
  padding: 24px;
}

/* --- Footer --- */
.grc-footer {
  background: #fff;
  border-top: 1px solid var(--grc-border);
  padding: 12px 24px;
  font-size: 0.82rem;
  color: var(--grc-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.grc-footer a { color: var(--grc-primary); text-decoration: none; }
.grc-footer a:hover { text-decoration: underline; }

.grc-fw-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e9ecef;
  color: var(--grc-muted);
  font-weight: 600;
}

/* --- Sidebar toggle (collapsed state) --- */
body.sidebar-collapsed .grc-sidebar { transform: translateX(calc(-1 * var(--grc-sidebar-width))); }
body.sidebar-collapsed .grc-main { margin-left: 0; width: 100%; }

/* --- Cards --- */
.card-grc {
  border: 1px solid var(--grc-border);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.card-grc-accent { border-top: 3px solid var(--grc-primary); }

.gate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}
.gate-locked { background: #fff8f8; border: 1px solid #f5c6cb; }
.gate-partial { background: #fffbf0; border: 1px solid #ffc107; }
.gate-clear   { background: #f0fff4; border: 1px solid #c3e6cb; }

/* --- Status Pills --- */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 600;
}

.pill-unassigned { background: #f1f1f1;  color: #6c757d; }
.pill-assigned   { background: #fff3cd;  color: #856404; }
.pill-accepted   { background: #d4edda;  color: #155724; }
.pill-signed     { background: #cce5ff;  color: #004085; }
.pill-verified   { background: #d1ecf1;  color: #0c5460; }

/* --- Table --- */
/* Any actions cell holding a group of icon buttons stays on one line —
   letting it wrap to a second row looks broken and is harder to click. */
.table-grc td:has(.btn) {
  white-space: nowrap;
}

.table-grc thead th {
  background: #f8f9fc;
  border-bottom: 2px solid var(--grc-border);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grc-muted);
  font-weight: 700;
}

/* Per-column filter row injected by ColumnFilters (wwwroot/js/datatables.js) */
.table-grc thead tr.grc-col-filter-row th {
  border-bottom: 2px solid var(--grc-border);
  padding: 4px 8px;
  text-transform: none;
  letter-spacing: normal;
}
.grc-col-filter {
  font-size: 0.78rem;
  font-weight: 400;
  min-width: 60px;
}

/* --- Buttons --- */
.btn-primary {
  background: var(--grc-primary);
  border-color: var(--grc-primary);
  color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--grc-primary-dark);
  border-color: var(--grc-primary-dark);
  color: #fff;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.form-control:focus { border-color: var(--grc-primary); }

/* --- Links --- */
a { color: var(--grc-primary); }
a:hover { color: var(--grc-primary-dark); }

/* --- Language Switcher --- */
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.lang-btn:hover,
.lang-btn:focus {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  box-shadow: none;
  outline: none;
}

.lang-btn::after {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 2px;
}

.lang-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.lang-code { font-size: 0.78rem; }

.lang-menu {
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--grc-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,31,54,0.14), 0 2px 6px rgba(0,0,0,0.06);
  margin-top: 6px !important;
}

.lang-menu-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grc-muted);
  padding: 4px 10px 6px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #1a1f36;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.lang-option:hover { background: #f1f4ff; }

.lang-option-active {
  background: #eef2ff;
  color: var(--grc-primary);
  font-weight: 600;
}

.lang-option-active:hover { background: #e4eaff; }

.lang-option-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

.lang-option-code {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--grc-muted);
  letter-spacing: 0.04em;
}

.lang-option-active .lang-option-code { color: var(--grc-primary); }

.lang-option-check {
  font-size: 0.75rem;
  color: var(--grc-primary);
  margin-left: auto;
  flex-shrink: 0;
}

/* --- Auth Buttons (guest state) --- */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-btn-register {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.auth-btn-register:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.auth-btn-login {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--grc-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}

.auth-btn-login:hover {
  background: var(--grc-primary-dark);
  color: #fff;
  text-decoration: none;
}

/* --- User Menu (signed-in state) --- */
.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  padding: 4px 10px 4px 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 0.85rem;
}

.user-btn:hover,
.user-btn:focus {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  box-shadow: none;
  outline: none;
}

.user-btn::after {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 2px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grc-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.user-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.user-btn-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown {
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--grc-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,31,54,0.14), 0 2px 6px rgba(0,0,0,0.06);
  margin-top: 6px !important;
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}

.user-dropdown-info { min-width: 0; }

.user-dropdown-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-role {
  font-size: 0.75rem;
  color: var(--grc-muted);
  margin-top: 1px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  color: #1a1f36;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s;
}

.user-dropdown-item i { width: 16px; text-align: center; color: var(--grc-muted); flex-shrink: 0; }
.user-dropdown-item:hover { background: #f1f4ff; color: #1a1f36; text-decoration: none; }

.user-dropdown-logout { color: #dc3545; }
.user-dropdown-logout i { color: #dc3545; }
.user-dropdown-logout:hover { background: #fff5f5; color: #b02a37; }

/* --- Responsive: mobile sidebar overlay --- */
@media (max-width: 767.98px) {
  .grc-sidebar {
    transform: translateX(calc(-1 * var(--grc-sidebar-width)));
  }

  .grc-main {
    margin-left: 0;
    width: 100%;
  }

  body.sidebar-open .grc-sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1025;
  }
}

/* ============================================================
   Auth Pages (_AuthLayout + Login + Register)
   ============================================================ */

.auth-body {
  height: auto;
  min-height: 100vh;
  background: #1a1f36;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Language bar */
.auth-lang-bar {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 100;
}

/* Main centered area */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px 32px;
}

.auth-card-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Brand row */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
}

.auth-brand-logo {
  height: 84px;
  width: auto;
  max-width: 100%;
}

.auth-brand-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

/* Card */
.auth-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.2);
}

.auth-card-header { margin-bottom: 24px; }

.auth-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0 0 4px;
}

.auth-card-subtitle {
  font-size: 0.88rem;
  color: var(--grc-muted);
  margin: 0;
}

/* Validation alert */
.auth-alert {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc3545;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #b91c1c;
  margin-bottom: 20px;
}

.auth-alert:empty { display: none; }

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

.auth-field { display: flex; flex-direction: column; gap: 5px; }

.auth-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: #374151;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 0.95rem;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #1a1f36;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.auth-input:focus {
  border-color: var(--grc-primary);
  box-shadow: 0 0 0 3px rgba(78,115,223,0.15);
}

.auth-input::placeholder { color: #c0c8d8; }

.auth-input-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.auth-input-eye:hover { color: #6b7280; }

.auth-field-error {
  font-size: 0.78rem;
  color: #dc3545;
}

.auth-field-error:empty { display: none; }

/* Remember me */
.auth-remember { display: flex; align-items: center; }

.auth-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
}

.auth-check {
  width: 16px;
  height: 16px;
  accent-color: var(--grc-primary);
  cursor: pointer;
}

/* Plan picker */
.auth-plan-list { display: flex; flex-direction: column; gap: 8px; }

.auth-plan-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-plan-option:has(.auth-plan-radio:checked) {
  border-color: var(--grc-primary);
  box-shadow: 0 0 0 3px rgba(78,115,223,0.15);
}

.auth-plan-radio { accent-color: var(--grc-primary); cursor: pointer; flex-shrink: 0; }

.auth-plan-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.auth-plan-name { font-size: 0.88rem; font-weight: 600; color: #1a1f36; }

.auth-plan-desc { font-size: 0.78rem; color: var(--grc-muted); }

.auth-plan-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1f36;
  white-space: nowrap;
}

.auth-plan-price small { font-weight: 500; color: var(--grc-muted); }

/* Register: wide two-column layout (details left, plan cards right) */
.auth-card-wrap--wide { max-width: 980px; }

.auth-register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.auth-register-col-heading {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grc-muted);
  margin: 0 0 14px;
}

@media (max-width: 860px) {
  .auth-card-wrap--wide { max-width: 480px; }
  .auth-register-grid { grid-template-columns: 1fr; gap: 28px; }
  .auth-register-plans-col { margin-top: 4px; }
}

/* Rich plan cards */
.auth-plan-cards { display: flex; flex-direction: column; gap: 14px; }

.auth-plan-card {
  position: relative;
  display: block;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  padding: 18px 40px 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-plan-card:hover { border-color: #b6c1d9; }

.auth-plan-card:has(.auth-plan-card-radio:checked) {
  border-color: var(--grc-primary);
  box-shadow: 0 0 0 3px rgba(78,115,223,0.15);
  background: rgba(78,115,223,0.03);
}

.auth-plan-card-radio {
  position: absolute;
  top: 18px;
  right: 18px;
  cursor: pointer;
}

.auth-plan-card-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--grc-primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.auth-plan-card-name { font-size: 1rem; font-weight: 700; color: #1a1f36; }

.auth-plan-card-price { display: flex; align-items: baseline; gap: 5px; margin: 6px 0 8px; }

.auth-plan-card-price-amount { font-size: 1.55rem; font-weight: 800; color: #1a1f36; line-height: 1; }

.auth-plan-card-price-interval { font-size: 0.8rem; color: var(--grc-muted); }

.auth-plan-card-desc { font-size: 0.82rem; color: var(--grc-muted); margin-bottom: 10px; }

.auth-plan-card-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

.auth-plan-card-features li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #374151; }

.auth-plan-card-features i { color: var(--grc-primary); font-size: 0.82rem; flex-shrink: 0; }

/* Submit */
.auth-submit {
  width: 100%;
  padding: 11px;
  background: var(--grc-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}

.auth-submit:hover { background: var(--grc-primary-dark); }
.auth-submit:active { transform: scale(0.99); }

/* External (OAuth) sign-in */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--grc-muted);
  font-size: 0.8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--grc-border);
}

.auth-oauth-list { display: flex; flex-direction: column; gap: 10px; }

.auth-oauth-btn {
  width: 100%;
  padding: 10px;
  background: #fff;
  color: #1a1f36;
  border: 1px solid var(--grc-border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.auth-oauth-btn:hover { background: var(--grc-content-bg); border-color: #c7cede; }
.auth-oauth-btn i { font-size: 1rem; }

/* Links */
.auth-link {
  color: var(--grc-primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; color: var(--grc-primary-dark); }

.auth-link-small {
  font-size: 0.8rem;
  color: var(--grc-primary);
  text-decoration: none;
}
.auth-link-small:hover { text-decoration: underline; }

/* Card footer */
.auth-card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grc-muted);
}

/* Footer */
.auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}

.auth-footer-frameworks {
  display: flex;
  gap: 12px;
}

/* --- TomSelect global overrides --- */

/* Remove Bootstrap's bg-image chevron (it can't be rotated via transform) */
.ts-wrapper,
.ts-wrapper.form-select {
  padding: 0;
  background-image: none !important;
  position: relative;
}

.ts-control {
  border: 1px solid var(--grc-border) !important;
  border-radius: 0.375rem !important;
  box-shadow: none !important;
  font-size: .875rem;
  min-height: 38px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* TomSelect's own `.ts-control:not(.rtl)` rule reserves this space via a
   calc()/max() expression that can silently resolve to 0 (mixing a unitless
   custom-property zero with a rem length breaks the calc in some browsers),
   which also outranks the plain `.ts-control` padding override above by
   specificity. Match its selector exactly so our fixed value always wins —
   long selected values (e.g. a long username) were rendering underneath the
   chevron instead of stopping short of it. */
.ts-control:not(.rtl) { padding-right: 2.25rem !important; }

/* Long selected values truncate with an ellipsis instead of wrapping onto
   the chevron on their first line. Scoped to single-select: `.item` needs to
   stay flex in multi-select mode so its remove-button icon stays inline. */
.ts-wrapper.single .ts-control .item {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

/* Hide TomSelect's own tiny triangle — we use our own pseudo-element below */
.ts-wrapper.single .ts-control::after { display: none !important; }

/* Custom chevron via ::after on the wrapper — can be rotated */
.ts-wrapper.single::after,
.ts-wrapper.multi::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  transition: transform .2s ease;
  z-index: 2;
}

/* Flip chevron when dropdown is open */
.ts-wrapper.single.dropdown-active::after,
.ts-wrapper.multi.dropdown-active::after {
  transform: translateY(-50%) rotate(180deg);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
  border-color: var(--grc-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.2) !important;
}

/* Dropdown — smooth fade + slide */
.ts-dropdown {
  border: 1px solid var(--grc-border);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-size: .875rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.ts-wrapper.dropdown-active .ts-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ts-dropdown-content { max-height: 200px; }

/* Option states */
.ts-dropdown .option {
  transition: background .1s, color .1s;
}
/* Hide the empty placeholder option (value="") so it never renders as a
   highlighted blue bar when a dropdown first opens with no selection.
   Clearing is done via the clear_button (X), not by picking this row. */
.ts-dropdown .option[data-value=""] { display: none; }
.ts-dropdown .option.selected { background-color: rgba(78,115,223,.08); color: var(--grc-primary); }
.ts-dropdown .option:hover    { background-color: rgba(78,115,223,.08); color: var(--grc-primary); }
.ts-dropdown .option.active   { background-color: var(--grc-primary);   color: #fff; }

.ts-dropdown .option.active small,
.ts-dropdown .option.active .text-muted {
  color: rgba(255,255,255,.75) !important;
}

/* Search inside dropdown (dropdown_input plugin) */
.ts-dropdown .dropdown-input-wrap {
  padding: 6px 8px;
  border-bottom: 1px solid var(--grc-border);
}
.ts-dropdown input.dropdown-input {
  width: 100%;
  border: 1px solid var(--grc-border);
  border-radius: 0.3rem;
  font-size: .875rem;
  padding: 0.3rem 0.6rem;
  outline: none;
  background: #f8f9fc;
}
.ts-dropdown input.dropdown-input:focus {
  background: #fff;
  border-color: var(--grc-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Auth page helpers ────────────────────────────────────── */
.auth-logo {
  width: 52px; height: 52px;
  background: var(--grc-primary);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 auto 20px;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0 0 6px;
  text-align: center;
}

.auth-subtitle {
  font-size: 0.88rem;
  color: var(--grc-muted);
  margin: 0 0 24px;
  text-align: center;
}

.auth-footer-links {
  text-align: center;
  font-size: 0.83rem;
}

.auth-footer-links a {
  color: var(--grc-primary);
  text-decoration: none;
}

.auth-footer-links a:hover { text-decoration: underline; }

/* ── 2FA ──────────────────────────────────────────────────── */
.auth-card--wide { max-width: 520px; }

.twofa-steps { display: flex; flex-direction: column; gap: 1.1rem; }
.twofa-step  { display: flex; gap: 1rem; align-items: flex-start; }
.twofa-step__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grc-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.twofa-step__text { margin: 0; font-size: 0.88rem; color: #374151; line-height: 1.55; }
.twofa-qr__img   { width: 160px; height: 160px; border-radius: 8px; border: 1px solid var(--grc-border); padding: 6px; }
.twofa-key {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f4ff;
  border: 1px solid #d0d9f5;
  border-radius: 4px;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--grc-primary);
  word-break: break-all;
}

.recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.recovery-code {
  display: block;
  padding: 6px 10px;
  background: #f0f4ff;
  border: 1px solid #d0d9f5;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: monospace;
  text-align: center;
  letter-spacing: 1px;
  color: var(--grc-primary);
}

/* ── Dropdown admin category list ──────────────────────────────────────────── */
.dd-cat-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background .12s ease;
}
.dd-cat-item:last-child { border-bottom: none; }
.dd-cat-item:hover { background: rgba(78,115,223,.06); }
.dd-cat-item--active {
  background: rgba(78,115,223,.1);
  border-left: 3px solid var(--grc-primary);
}
.dd-cat-actions { opacity: 0; transition: opacity .15s; }
.dd-cat-item:hover .dd-cat-actions,
.dd-cat-item--active .dd-cat-actions { opacity: 1; }

/* ── Field config inline table ──────────────────────────────────────────── */
.fc-row-disabled td { opacity: .45; }
.fc-row-saved { transition: background .3s ease; background: rgba(28, 200, 138, .15) !important; }
.fc-row-error { transition: background .3s ease; background: rgba(231, 74, 59, .12) !important; }

/* ── TomSelect hint sub-label ───────────────────────────────────────────── */
.ts-opt { display: flex; flex-direction: column; padding: .15rem 0; }
.ts-opt-label { line-height: 1.3; }
.ts-opt-hint  { font-size: .75rem; color: var(--bs-secondary-color, #6c757d); line-height: 1.3; white-space: normal; }
/* ── A1 substep indicator (shared across setup pages) ───────────────────── */
.fs-substep-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid var(--grc-border);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
    color: var(--grc-muted);
    transition: all .3s;
}
.fs-substep-dot.active {
    border-color: var(--grc-primary);
    background: rgba(78,115,223,.1);
    color: var(--grc-primary);
}
.fs-substep-dot.done {
    border-color: #28a745;
    background: #28a745;
    color: #fff;
}
.fs-substep-line {
    width: 60px; height: 2px;
    background: var(--grc-border);
    transition: background .3s;
    margin-bottom: 18px;
}
.fs-substep-line.done { background: #28a745; }
.fs-substep-link:hover .fs-substep-dot { border-color: var(--grc-primary); color: var(--grc-primary); }
.fs-substep-link:hover small { color: var(--grc-primary) !important; }

/* ── Admin Test Panel ───────────────────────────────────────────────────── */
.admin-test-panel {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.78rem;
}
.admin-test-label {
    color: #ffc107;
    font-size: 0.85rem;
}
.admin-test-select {
    background-color: transparent;
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    padding: 2px 24px 2px 6px;
    max-width: 160px;
}
.admin-test-select option {
    background: #1a1f36;
    color: #fff;
}
.admin-test-roles-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    padding: 2px 8px;
}
.admin-test-roles-btn:hover,
.admin-test-roles-btn:focus {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
/* --- Flatpickr clear button --- */
.fp-wrapper {
    position: relative;
    display: block;
}
.fp-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    color: #aaa;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.fp-wrapper:hover .fp-clear.fp-clear-visible,
.fp-clear.fp-clear-visible:focus {
    opacity: 1;
    pointer-events: auto;
}
.fp-clear:hover { color: #666; }

.admin-test-reset-btn {
    background: transparent;
    border-color: rgba(255, 99, 99, 0.4);
    color: rgba(255, 120, 120, 0.85);
    font-size: 0.78rem;
    padding: 2px 7px;
    line-height: 1.4;
}
.admin-test-reset-btn:hover,
.admin-test-reset-btn:focus {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(255, 99, 99, 0.7);
    color: #ff8080;
}
.admin-test-reset-all-btn {
    background: rgba(220, 53, 69, 0.85);
    border-color: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 0.78rem;
    padding: 2px 7px;
    line-height: 1.4;
}
.admin-test-reset-all-btn:hover,
.admin-test-reset-all-btn:focus {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.admin-test-roles-menu {
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
}
.atp-reset-all-modal-content {
    border-top: 4px solid #dc3545;
}

/* ── Test-mode billing (admin-only simulated payment) ──────────────────────── */
.card-grc-testmode {
    border-left: 4px solid #ffc107;
}
.sim-checkout-badge {
    background: rgba(255, 193, 7, 0.18);
    color: #a56800;
    font-weight: 600;
    letter-spacing: .03em;
}
.sim-plan-card {
    display: block;
    border: 1px solid var(--grc-border);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color .15s, background .15s;
}
.sim-plan-card:hover {
    border-color: #ffc107;
}

/* ── Confirm modal ─────────────────────────────────────────────────────────── */
.confirm-modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
#confirm-modal .modal-footer .btn-link {
    color: #6b7280;
}
#confirm-modal .modal-footer .btn-link:hover {
    color: #374151;
}

/* ── Info boxes (asset stats) ──────────────────────────────────────────────── */
.info-box {
    display: flex;
    min-height: 72px;
    background: #fff;
    border: 1px solid var(--grc-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.info-box.flat {
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    flex-shrink: 0;
    font-size: 1.75rem;
    color: #fff;
}
.info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 16px;
    flex: 1;
    min-width: 0;
}
.info-box-text {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--grc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-box-number {
    font-size: 1.65rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.15;
}
.elevation-0 { box-shadow: none !important; }

/* ── Yes/No toggle group (shared) ──────────────────────────────────────── */
.yn-group {
    display: inline-flex;
    gap: 8px;
    margin-top: 4px;
}
.yn-btn {
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 18px;
    border-radius: 20px;
    border: 2px solid var(--grc-border);
    background: #fff;
    color: var(--grc-muted);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.yn-btn:hover { border-color: var(--grc-primary); color: var(--grc-primary); }
.yn-btn.yn-yes.active { background: #d4edda; border-color: #28a745; color: #155724; }
.yn-btn.yn-no.active  { background: #f8d7da; border-color: #dc3545; color: #721c24; }
.yn-group.is-invalid .yn-btn { border-color: #dc3545; }

/* --- Toasts (GRC.toast) --- */
.grc-toast-container {
  position: fixed;
  top: calc(var(--grc-topbar-height) + 12px);
  right: 16px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.grc-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  min-width: 220px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: #fff;
  background: #1a1f36;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.grc-toast.show { opacity: 1; transform: translateX(0); }
.grc-toast-success { background: #1e7e44; }
.grc-toast-error   { background: #c0392b; }
.grc-toast-info    { background: #2e59d9; }
.grc-toast-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.grc-toast-link:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .grc-toast { transition: opacity .15s ease; transform: none; }
  .grc-toast.show { transform: none; }
}

/* ── App-wide notification bar (errors / warnings) ───────────────────────── */
.grc-notices {
  position: sticky;
  top: var(--grc-topbar-height);
  z-index: 1019;
  flex-shrink: 0;
  font-size: .9rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.14);
  /* Never let the panel grow taller than the space below the topbar, otherwise
     the sticky element scrolls its top (summary bar + controls) out of view. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--grc-topbar-height));
}

/* The summary bar always stays visible; only the list scrolls. */
.grc-notices-bar {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  background: #fff;
  flex-shrink: 0;
}
.grc-notices[data-top="error"]   .grc-notices-bar { background: #dc3545; }
.grc-notices[data-top="warning"] .grc-notices-bar { background: #ffc107; }
.grc-notices[data-top="info"]    .grc-notices-bar { background: var(--grc-primary); }
.grc-notices[data-top="success"] .grc-notices-bar { background: #198754; }

/* Each segment is a solid colour block, so a warning chip stays yellow even
   on a red (error-dominant) bar. */
.grc-notices-seg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  padding: 8px 20px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .12s;
}
.grc-notices-seg i { font-size: 1.05rem; }
.grc-notices-seg:hover { filter: brightness(.94); }

.grc-notices-seg-error   { background: #dc3545; color: #fff; }
.grc-notices-seg-warning { background: #ffc107; color: #5c4600; }
.grc-notices-seg-info    { background: var(--grc-primary); color: #fff; }
.grc-notices-seg-success { background: #198754; color: #fff; }

.grc-notices-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}
.grc-notices-seg-error   .grc-notices-count { background: rgba(255,255,255,.28); color: #fff; }
.grc-notices-seg-warning .grc-notices-count { background: rgba(0,0,0,.16);     color: #4a3800; }
.grc-notices-seg-info    .grc-notices-count { background: rgba(255,255,255,.28); color: #fff; }
.grc-notices-seg-success .grc-notices-count { background: rgba(255,255,255,.28); color: #fff; }

.grc-notices-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 10px;
}

.grc-notices-toggle,
.grc-notices-dismiss {
  border: none;
  background: transparent;
  color: rgba(0,0,0,.45);
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background .12s, color .12s, transform .15s;
}
.grc-notices-toggle:hover,
.grc-notices-dismiss:hover { background: rgba(0,0,0,.12); }
/* Contrast the action icons against whichever severity colour fills the bar. */
.grc-notices[data-top="error"]   .grc-notices-toggle,
.grc-notices[data-top="error"]   .grc-notices-dismiss { color: rgba(255,255,255,.9); }
.grc-notices[data-top="error"]   .grc-notices-toggle:hover,
.grc-notices[data-top="error"]   .grc-notices-dismiss:hover { background: rgba(255,255,255,.2); }
.grc-notices[data-top="warning"] .grc-notices-toggle,
.grc-notices[data-top="warning"] .grc-notices-dismiss { color: #5c4600; }
.grc-notices[data-top="warning"] .grc-notices-toggle:hover,
.grc-notices[data-top="warning"] .grc-notices-dismiss:hover { background: rgba(0,0,0,.12); }
.grc-notices[data-top="info"]    .grc-notices-toggle,
.grc-notices[data-top="info"]    .grc-notices-dismiss { color: rgba(255,255,255,.9); }
.grc-notices[data-top="info"]    .grc-notices-toggle:hover,
.grc-notices[data-top="info"]    .grc-notices-dismiss:hover { background: rgba(255,255,255,.2); }
.grc-notices[data-top="success"] .grc-notices-toggle,
.grc-notices[data-top="success"] .grc-notices-dismiss { color: rgba(255,255,255,.9); }
.grc-notices[data-top="success"] .grc-notices-toggle:hover,
.grc-notices[data-top="success"] .grc-notices-dismiss:hover { background: rgba(255,255,255,.2); }

.grc-notices[data-open="true"] .grc-notices-toggle i { transform: rotate(180deg); }
.grc-notices-toggle i { transition: transform .15s; display: inline-block; }

.grc-notices-list {
  background: #fff;
  max-height: 0;
  min-height: 0;
  overflow-y: auto;
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease;
}
.grc-notices[data-open="true"] .grc-notices-list {
  opacity: 1;
  border-bottom: 1px solid var(--grc-border);
}
@media (prefers-reduced-motion: reduce) {
  .grc-notices-list { transition: none; }
}

.grc-notice-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 16px;
  border-top: 1px solid #f0f1f4;
  border-left: 4px solid transparent;
  line-height: 1.4;
}
.grc-notice-item:first-child { border-top: none; }
.grc-notice-item .grc-notice-ico { margin-top: 1px; flex-shrink: 0; }
.grc-notice-item.is-error   { background: #fce9ea; border-left-color: #dc3545; }
.grc-notice-item.is-error   .grc-notice-ico { color: #c0392b; }
.grc-notice-item.is-warning { background: #fff6d9; border-left-color: #ffc107; }
.grc-notice-item.is-warning .grc-notice-ico { color: #b8860b; }
.grc-notice-item.is-info    { background: #e8ecfb; border-left-color: var(--grc-primary); }
.grc-notice-item.is-info    .grc-notice-ico { color: var(--grc-primary); }
.grc-notice-item.is-success { background: #e6f4ea; border-left-color: #198754; }
.grc-notice-item.is-success .grc-notice-ico { color: #198754; }
.grc-notice-item .grc-notice-msg { flex-grow: 1; color: #2a2a2a; font-weight: 500; }
.grc-notice-item .grc-notice-link {
  font-weight: 700;
  text-decoration: underline;
  margin-left: 4px;
  cursor: pointer;
}
.grc-notice-item.is-error   .grc-notice-link { color: #dc3545; }
.grc-notice-item.is-warning .grc-notice-link { color: #8a6d00; }
.grc-notice-item.is-info    .grc-notice-link { color: var(--grc-primary-dark); }
.grc-notice-item.is-success .grc-notice-link { color: #198754; }
.grc-notice-item .grc-notice-x {
  border: none;
  background: transparent;
  color: var(--grc-muted);
  padding: 0 4px;
  font-size: .8rem;
  cursor: pointer;
  flex-shrink: 0;
}
.grc-notice-item .grc-notice-x:hover { color: #333; }

/* ── Generic lookup picker (wwwroot/js/lookup.js) ─────────────────────────── */
.grc-lookup-display {
  cursor: pointer;
  background: #fff;
}
.grc-lookup-display:focus { box-shadow: none; }
.grc-lookup-clear:disabled { opacity: .35; }
.grc-lookup.is-invalid .grc-lookup-display { border-color: #dc3545; }

.grc-lookup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.grc-lookup-search { max-width: 320px; flex: 1 1 260px; }

.grc-lookup-body {
  max-height: 55vh;
  overflow-y: auto;
}
.grc-lookup-table thead th {
  position: sticky;
  top: 0;
  background: #f8f9fc;
  color: var(--grc-primary-dark);
  font-weight: 600;
  z-index: 1;
  border-bottom: 1px solid var(--grc-border);
}
.grc-lookup-row { cursor: pointer; }
.grc-lookup-row.is-selected { background-color: rgba(78, 115, 223, .12); }
.grc-lookup-row.is-selected td:first-child { font-weight: 600; }
.grc-lookup-group-header {
  cursor: pointer;
  background: #f8f9fc;
  font-weight: 600;
  color: var(--grc-muted);
  user-select: none;
}
.grc-lookup-group-header .grc-lookup-chevron { transition: transform .15s ease; display: inline-block; }
.grc-lookup-group-header.collapsed .grc-lookup-chevron { transform: rotate(-90deg); }

.grc-lookup-addnew-btn { white-space: nowrap; flex-shrink: 0; }
#lookup-addnew-form .is-invalid { border-color: #dc3545; }