/* portal-refinement.css
 * Non-destructive visual refinement for generic-mcp-template portal.
 * - Overrides Bootstrap 5.3 CSS variables (--bs-*) at :root
 * - Overrides legacy portal vars (--primary, --primary-gradient, --bg-page) too
 * - Direct body selector for font-family (wins over portal.css line 14)
 * - No @import (fonts via CDN @font-face would need separate <link>; we rely
 *   on font stacks with system fallbacks that still look refined)
 * - Date: 2026-04-21
 * - Rollback: remove the <link> tag from each HTML file
 */

/* ============================================================
 * 1. Signature Ink palette + Bootstrap variable overrides
 * ============================================================ */
:root {
  /* Signature Ink local palette */
  --portal-seal-600: #b0402e;
  --portal-seal-500: #c94f3d;
  --portal-seal-700: #8a3324;
  --portal-seal-400: #d4685a;
  --portal-seal-tint: rgba(176, 64, 46, 0.10);
  --portal-ink-900: #0a0a0a;
  --portal-ink-800: #141414;
  --portal-ink-700: #1a1a1a;
  --portal-ink-mute: rgba(10, 10, 10, 0.60);
  --portal-ink-faint: rgba(10, 10, 10, 0.40);
  --portal-surface-0: #fafaf8;
  --portal-surface-1: #ffffff;
  --portal-surface-2: #f4f4f2;
  --portal-surface-3: #eeece8;
  --portal-line: rgba(10, 10, 10, 0.08);
  --portal-line-strong: rgba(10, 10, 10, 0.18);

  --portal-font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", sans-serif;
  --portal-font-serif: "Source Serif 4", "Noto Serif JP", Georgia, "Yu Mincho", serif;
  --portal-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Bootstrap --bs-* overrides */
  --bs-body-font-family: var(--portal-font-sans);
  --bs-body-font-size: 0.9375rem;
  --bs-body-color: var(--portal-ink-700);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-body-bg: var(--portal-surface-0);
  --bs-body-bg-rgb: 250, 250, 248;

  --bs-emphasis-color: var(--portal-ink-900);
  --bs-secondary-color: var(--portal-ink-mute);
  --bs-tertiary-color: var(--portal-ink-faint);
  --bs-secondary-bg: var(--portal-surface-2);
  --bs-tertiary-bg: var(--portal-surface-1);

  --bs-primary: var(--portal-seal-600);
  --bs-primary-rgb: 176, 64, 46;
  --bs-primary-text-emphasis: var(--portal-seal-700);
  --bs-primary-bg-subtle: var(--portal-seal-tint);

  --bs-success: #4a8a5f;
  --bs-success-rgb: 74, 138, 95;
  --bs-danger: #c85454;
  --bs-danger-rgb: 200, 84, 84;
  --bs-warning: #c89547;
  --bs-warning-rgb: 200, 149, 71;
  --bs-info: #547ba0;
  --bs-info-rgb: 84, 123, 160;

  /* Override bg-light / bg-dark class color (used in body class="bg-light") */
  --bs-light: #fafaf8;
  --bs-light-rgb: 250, 250, 248;
  --bs-dark: #0a0a0a;
  --bs-dark-rgb: 10, 10, 10;

  --bs-link-color: var(--portal-seal-600);
  --bs-link-color-rgb: 176, 64, 46;
  --bs-link-hover-color: var(--portal-seal-700);
  --bs-link-hover-color-rgb: 138, 51, 36;

  --bs-border-color: var(--portal-line);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;

  --bs-focus-ring-color: rgba(176, 64, 46, 0.25);
  --bs-code-color: var(--portal-seal-700);
  --bs-font-monospace: var(--portal-font-mono);

  /* Legacy portal vars (used by portal.css / theme.css) */
  --primary: var(--portal-seal-600);
  --primary-dark: var(--portal-seal-700);
  --primary-hover: var(--portal-seal-500);
  --primary-gradient: linear-gradient(135deg, var(--portal-seal-600) 0%, var(--portal-seal-700) 100%);
  --accent: var(--portal-seal-500);
  --accent-dark: var(--portal-seal-700);
  --accent-gradient: linear-gradient(135deg, var(--portal-seal-500) 0%, var(--portal-seal-700) 100%);
  --user-card-gradient: linear-gradient(135deg, var(--portal-seal-500) 0%, var(--portal-seal-700) 100%);

  --success: var(--bs-success);
  --warning: var(--bs-warning);
  --danger: var(--bs-danger);
  --info: var(--bs-info);

  --bg-page: var(--portal-surface-0);
  --bg-card: var(--portal-surface-1);
  --bg-card-hover: var(--portal-surface-2);
  --bg-primary: var(--portal-surface-1);
  --bg-secondary: var(--portal-surface-2);
  --bg-tertiary: var(--portal-surface-3);

  --text-primary: var(--portal-ink-700);
  --text-secondary: var(--portal-ink-mute);
  --text-muted: var(--portal-ink-faint);
  --text-inverse: #ffffff;

  --border-color: var(--portal-line);

  --shadow-sm: 0 1px 2px rgba(20, 10, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 10, 0, 0.08);
  --shadow-lg: 0 12px 36px rgba(20, 10, 0, 0.12);
  --shadow: 0 1px 2px rgba(20, 10, 0, 0.06);
}

/* ============================================================
 * 2. Body direct declarations (wins over portal.css line 14-16)
 *    portal.css has: body { font-family: -apple-system, ... }
 *    which is a direct property, not a CSS variable reference.
 *    Since portal-refinement.css loads AFTER portal.css, the later
 *    rule with same specificity (body = 0,0,0,1) wins.
 * ============================================================ */
body {
  font-family: var(--portal-font-sans);
  color: var(--portal-ink-700);
  background-color: var(--portal-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.bg-light {
  background-color: var(--portal-surface-0);
}

/* ============================================================
 * 3. Heading refinement (serif)
 * ============================================================ */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--portal-ink-900);
}

h1, .h1 { letter-spacing: -0.5px; }

h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--portal-font-sans);
  font-weight: 600;
  color: var(--portal-ink-900);
}

/* ============================================================
 * 4. Buttons (override portal.css inline gradient)
 *    portal.css line 51-53: .btn-primary { background: var(--primary-gradient); border: none; }
 *    Now --primary-gradient is our seal gradient, so the visual
 *    automatically becomes seal. Belt-and-suspenders via variables.
 * ============================================================ */
.btn {
  font-weight: 500;
  letter-spacing: 0.1px;
}

.btn-primary {
  --bs-btn-bg: var(--portal-seal-600);
  --bs-btn-border-color: var(--portal-seal-600);
  --bs-btn-hover-bg: var(--portal-seal-700);
  --bs-btn-hover-border-color: var(--portal-seal-700);
  --bs-btn-active-bg: var(--portal-seal-700);
  --bs-btn-active-border-color: var(--portal-seal-700);
}

.btn-outline-primary {
  --bs-btn-color: var(--portal-seal-600);
  --bs-btn-border-color: var(--portal-seal-600);
  --bs-btn-hover-bg: var(--portal-seal-600);
  --bs-btn-hover-border-color: var(--portal-seal-600);
  --bs-btn-active-bg: var(--portal-seal-700);
  --bs-btn-active-border-color: var(--portal-seal-700);
}

/* ============================================================
 * 5. Cards / tables / forms - subtle polish
 * ============================================================ */
.card {
  --bs-card-border-color: var(--portal-line);
  --bs-card-border-radius: 8px;
  --bs-card-bg: var(--portal-surface-1);
}

.form-control, .form-select {
  --bs-border-color: var(--portal-line-strong);
  background-color: var(--portal-surface-1);
}

.form-control:focus, .form-select:focus {
  border-color: var(--portal-seal-600);
  box-shadow: 0 0 0 0.2rem rgba(176, 64, 46, 0.15);
}

.table {
  --bs-table-border-color: var(--portal-line);
  --bs-table-color: var(--portal-ink-700);
}

.table > thead {
  color: var(--portal-ink-900);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.alert {
  --bs-alert-border-radius: 6px;
  border-width: 1px;
}

.badge {
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* ============================================================
 * 6. Code / mono
 * ============================================================ */
code, kbd, samp, pre {
  font-family: var(--portal-font-mono);
}

code {
  color: var(--portal-seal-700);
  background: var(--portal-seal-tint);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

pre code {
  background: transparent;
  padding: 0;
}

/* ============================================================
 * 7. Links
 * ============================================================ */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
 * 8. Modals / dropdowns / list-groups
 * ============================================================ */
.modal-content {
  --bs-modal-border-color: var(--portal-line);
  --bs-modal-border-radius: 8px;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--portal-line);
  --bs-dropdown-border-radius: 6px;
  --bs-dropdown-bg: var(--portal-surface-1);
}

.list-group {
  --bs-list-group-border-color: var(--portal-line);
  --bs-list-group-border-radius: 6px;
}

/* ============================================================
 * 9. Dark theme (optional, opt-in via data-theme="dark")
 * ============================================================ */
[data-theme="dark"] {
  --portal-surface-0: #0a0a0a;
  --portal-surface-1: #111111;
  --portal-surface-2: #161616;
  --portal-ink-700: #ededed;
  --portal-ink-900: #ffffff;
  --portal-ink-mute: rgba(237, 237, 237, 0.62);
  --portal-ink-faint: rgba(237, 237, 237, 0.40);
  --portal-line: rgba(237, 237, 237, 0.08);
  --portal-line-strong: rgba(237, 237, 237, 0.18);

  --bs-body-color: var(--portal-ink-700);
  --bs-body-color-rgb: 237, 237, 237;
  --bs-body-bg: var(--portal-surface-0);
  --bs-body-bg-rgb: 10, 10, 10;
}

/* ============================================================
 * Phase F: Component polish (learned from Claude Design)
 * ============================================================ */

/* ------------------------------------------------------------
 * F.1 Navbar - defeat inline !important gradient with higher
 *     specificity + !important. Old portal hardcodes
 *     background-color: #0066cc !important in each HTML file.
 *     We use a body-prefixed selector to outrank (0,0,3,1 > 0,0,2,0).
 * ------------------------------------------------------------ */
body > .navbar.navbar-dark.bg-dark,
body nav.navbar.navbar-dark.bg-dark,
body nav.navbar.navbar-dark {
  background-color: var(--portal-ink-900) !important;
  background: var(--portal-ink-900) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body .navbar-dark .navbar-brand,
body .navbar-dark .navbar-text {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #ffffff !important;
}

body .navbar-dark .navbar-brand {
  font-size: 18px;
}

body .navbar-dark .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
  font-size: 13px !important;
  padding: 4px 10px !important;
  border-radius: 6px;
  transition: background-color 140ms, border-color 140ms;
}

body .navbar-dark .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

body .navbar-dark .btn-light {
  background-color: var(--portal-seal-600) !important;
  border-color: var(--portal-seal-600) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: 6px;
}

body .navbar-dark .btn-light:hover {
  background-color: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-700) !important;
}

body .navbar-dark .btn-outline-light.active,
body .navbar-dark .btn-group .btn-outline-light.active {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #ffffff !important;
}

/* Stronger Bootstrap navbar override for pages that still ship
 * inline blue/teal gradients and per-page hover tweaks. */
body nav.navbar.navbar-expand-lg.navbar-dark.bg-dark,
body nav.navbar.navbar-dark.bg-dark[style],
body nav.navbar.navbar-dark[style*="linear-gradient"] {
  background: var(--portal-ink-900) !important;
  background-color: var(--portal-ink-900) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

body nav.navbar.navbar-dark .btn-outline-light:hover,
body nav.navbar.navbar-dark .btn-outline-light:focus-visible,
body nav.navbar.navbar-dark #logout-btn:hover,
body nav.navbar.navbar-dark #languageToggle .btn:hover,
body nav.navbar.navbar-dark #languageToggle .btn.active {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

body nav.navbar.navbar-dark .btn-light,
body nav.navbar.navbar-dark .btn-light:hover,
body nav.navbar.navbar-dark .btn-light:focus-visible {
  background: var(--portal-seal-600) !important;
  background-color: var(--portal-seal-600) !important;
  background-image: none !important;
  border-color: var(--portal-seal-600) !important;
  color: #ffffff !important;
}

body nav.navbar.navbar-dark .btn-light:hover,
body nav.navbar.navbar-dark .btn-light:focus-visible {
  background: var(--portal-seal-700) !important;
  background-color: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-700) !important;
}

body #user-name {
  font-family: var(--portal-font-mono) !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px;
}

body #logout-btn {
  font-size: 12px !important;
  padding: 3px 10px !important;
}

/* ------------------------------------------------------------
 * F.2 Cards - flatter surface, softer border, serif header
 * ------------------------------------------------------------ */
.card {
  background-color: var(--portal-surface-1);
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 160ms, box-shadow 160ms;
}

.card.shadow,
.card.shadow-sm {
  box-shadow: 0 1px 2px rgba(20, 10, 0, 0.05) !important;
}

.card.shadow-lg {
  box-shadow: 0 10px 32px rgba(20, 10, 0, 0.10) !important;
}

.card-header {
  background-color: var(--portal-surface-1);
  border-bottom: 1px solid var(--portal-line);
  padding: 14px 20px;
  font-family: var(--portal-font-serif);
  color: var(--portal-ink-900);
}

/* Colorized card-headers (bg-success, bg-primary, bg-danger) kept readable */
.card-header.bg-primary {
  background-color: var(--portal-seal-600) !important;
  border-bottom-color: transparent;
}

.card-header.bg-success {
  background-color: var(--portal-surface-1) !important;
  color: var(--portal-ink-900) !important;
  border-left: 3px solid var(--portal-seal-600);
}

.card-header.bg-success .text-white,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6 {
  color: var(--portal-ink-900) !important;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--portal-ink-900);
  margin: 0;
}

.card-header h5 { font-size: 16px; }
.card-header h6 { font-size: 14px; }

.card-body { padding: 20px; }

/* ------------------------------------------------------------
 * F.3 Tables - mono uppercase eyebrow headers, subtle rows
 * ------------------------------------------------------------ */
.table {
  font-size: 13px;
  color: var(--portal-ink-700);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--portal-line);
  margin-bottom: 0;
}

.table > thead {
  border-bottom: 1px solid var(--portal-line-strong);
}

.table > thead > tr > th,
.table thead th {
  font-family: var(--portal-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--portal-ink-faint);
  background-color: var(--portal-surface-1);
  border-bottom: 1px solid var(--portal-line);
  padding: 11px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr {
  border-top: 1px solid var(--portal-line);
}

.table > tbody > tr:first-child {
  border-top: none;
}

.table > tbody > tr > td,
.table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid var(--portal-line);
}

.table.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td {
  background-color: var(--portal-surface-2);
  --bs-table-bg-state: var(--portal-surface-2);
}

.table.table-sm th,
.table.table-sm td {
  padding: 8px 12px;
}

.table.provider-table thead {
  background-color: var(--portal-surface-1) !important;
}

/* ------------------------------------------------------------
 * F.4 Badges - refined chip-style, mono font
 * ------------------------------------------------------------ */
.badge {
  font-family: var(--portal-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  vertical-align: middle;
}

.badge.bg-success {
  background-color: rgba(74, 138, 95, 0.12) !important;
  color: #3d7852 !important;
  border-color: rgba(74, 138, 95, 0.28);
}

.badge.bg-danger {
  background-color: rgba(200, 84, 84, 0.12) !important;
  color: #a64545 !important;
  border-color: rgba(200, 84, 84, 0.28);
}

.badge.bg-warning {
  background-color: rgba(200, 149, 71, 0.14) !important;
  color: #8a6325 !important;
  border-color: rgba(200, 149, 71, 0.32);
}

.badge.bg-info {
  background-color: rgba(84, 123, 160, 0.14) !important;
  color: #3e5e80 !important;
  border-color: rgba(84, 123, 160, 0.32);
}

.badge.bg-secondary {
  background-color: var(--portal-surface-2) !important;
  color: var(--portal-ink-mute) !important;
  border-color: var(--portal-line);
}

.badge.bg-primary {
  background-color: var(--portal-seal-tint) !important;
  color: var(--portal-seal-700) !important;
  border-color: rgba(176, 64, 46, 0.28);
}

/* ------------------------------------------------------------
 * F.5 Alerts - left-border accent instead of heavy fill
 * ------------------------------------------------------------ */
.alert {
  border: 1px solid var(--portal-line);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13.5px;
}

.alert-success {
  background-color: rgba(74, 138, 95, 0.06);
  border-color: rgba(74, 138, 95, 0.28);
  border-left-color: #4a8a5f;
  color: #2d5c3e;
}

.alert-danger {
  background-color: rgba(200, 84, 84, 0.06);
  border-color: rgba(200, 84, 84, 0.28);
  border-left-color: #c85454;
  color: #8a3838;
}

.alert-warning {
  background-color: rgba(200, 149, 71, 0.08);
  border-color: rgba(200, 149, 71, 0.32);
  border-left-color: #c89547;
  color: #6e4e1c;
}

.alert-info {
  background-color: rgba(84, 123, 160, 0.08);
  border-color: rgba(84, 123, 160, 0.28);
  border-left-color: #547ba0;
  color: #2f4862;
}

/* ------------------------------------------------------------
 * F.6 Form controls - calmer border, seal focus, mono meta
 * ------------------------------------------------------------ */
.form-control,
.form-select {
  border: 1px solid var(--portal-line-strong);
  background-color: var(--portal-surface-1);
  color: var(--portal-ink-700);
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  transition: border-color 140ms, box-shadow 140ms;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--portal-seal-600);
  box-shadow: 0 0 0 3px rgba(176, 64, 46, 0.14);
  outline: none;
}

.form-control-sm,
.form-select-sm {
  font-size: 13px;
  padding: 5px 10px;
}

.form-label {
  font-family: var(--portal-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--portal-ink-900);
  letter-spacing: 0.1px;
  margin-bottom: 6px;
}

.form-text {
  font-size: 12px;
  color: var(--portal-ink-mute);
}

.input-group-text {
  background-color: var(--portal-surface-2);
  border-color: var(--portal-line-strong);
  color: var(--portal-ink-mute);
  font-size: 13px;
  font-family: var(--portal-font-mono);
}

/* ------------------------------------------------------------
 * F.7 Nav tabs - seal underline on active
 * ------------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--portal-line);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--portal-ink-mute);
  font-weight: 500;
  padding: 10px 16px;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color 140ms, border-color 140ms;
}

.nav-tabs .nav-link:hover {
  color: var(--portal-ink-900);
  border-color: transparent transparent var(--portal-line-strong);
  background-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--portal-seal-600);
  background-color: transparent;
  border-color: transparent transparent var(--portal-seal-600);
  font-weight: 600;
}

/* ------------------------------------------------------------
 * F.8 Buttons - additional variants + small sizes
 * ------------------------------------------------------------ */
.btn {
  border-radius: 6px;
  font-size: 14px;
  padding: 7px 14px;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}

.btn-sm {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 5px;
}

.btn-lg {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 8px;
}

.btn-success {
  --bs-btn-bg: #4a8a5f;
  --bs-btn-border-color: #4a8a5f;
  --bs-btn-hover-bg: #3d7852;
  --bs-btn-hover-border-color: #3d7852;
  --bs-btn-active-bg: #356a48;
  --bs-btn-active-border-color: #356a48;
}

.btn-danger {
  --bs-btn-bg: #c85454;
  --bs-btn-border-color: #c85454;
  --bs-btn-hover-bg: #a64545;
  --bs-btn-hover-border-color: #a64545;
  --bs-btn-active-bg: #913838;
  --bs-btn-active-border-color: #913838;
}

.btn-warning {
  --bs-btn-bg: #c89547;
  --bs-btn-border-color: #c89547;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: #a67a35;
  --bs-btn-hover-border-color: #a67a35;
  --bs-btn-hover-color: #ffffff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--portal-ink-mute);
  --bs-btn-border-color: var(--portal-line-strong);
  --bs-btn-hover-bg: var(--portal-surface-2);
  --bs-btn-hover-border-color: var(--portal-ink-mute);
  --bs-btn-hover-color: var(--portal-ink-900);
}

/* ------------------------------------------------------------
 * F.9 List groups, dropdowns, pagination
 * ------------------------------------------------------------ */
.list-group-item {
  background-color: var(--portal-surface-1);
  border-color: var(--portal-line);
  color: var(--portal-ink-700);
  padding: 12px 16px;
}

.list-group-item.active {
  background-color: var(--portal-seal-tint);
  border-color: var(--portal-seal-600);
  color: var(--portal-seal-700);
}

.dropdown-menu {
  background-color: var(--portal-surface-1);
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(20, 10, 0, 0.10);
  padding: 6px;
}

.dropdown-item {
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 4px;
  color: var(--portal-ink-700);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--portal-surface-2);
  color: var(--portal-ink-900);
}

.dropdown-item.active {
  background-color: var(--portal-seal-tint);
  color: var(--portal-seal-700);
}

.dropdown-divider {
  border-color: var(--portal-line);
  margin: 4px 0;
}

.pagination {
  --bs-pagination-color: var(--portal-ink-mute);
  --bs-pagination-hover-color: var(--portal-seal-600);
  --bs-pagination-hover-bg: var(--portal-surface-2);
  --bs-pagination-hover-border-color: var(--portal-line);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--portal-seal-600);
  --bs-pagination-active-border-color: var(--portal-seal-600);
  --bs-pagination-border-color: var(--portal-line);
  --bs-pagination-border-radius: 6px;
}

/* ------------------------------------------------------------
 * F.10 Modals - softer border and shadow
 * ------------------------------------------------------------ */
.modal-content {
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(20, 10, 0, 0.22);
}

.modal-header {
  border-bottom: 1px solid var(--portal-line);
  padding: 16px 20px;
}

.modal-title {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  letter-spacing: -0.2px;
  font-size: 18px;
  color: var(--portal-ink-900);
}

.modal-body {
  padding: 20px;
  color: var(--portal-ink-700);
}

.modal-footer {
  border-top: 1px solid var(--portal-line);
  padding: 12px 20px;
}

/* ------------------------------------------------------------
 * F.11 Misc - hr, details/summary, small text
 * ------------------------------------------------------------ */
hr {
  border: none;
  border-top: 1px solid var(--portal-line);
  opacity: 1;
  margin: 16px 0;
}

details > summary {
  cursor: pointer;
  font-family: var(--portal-font-sans);
  font-weight: 600;
  color: var(--portal-ink-900);
}

small, .small {
  color: var(--portal-ink-mute);
}

.text-muted {
  color: var(--portal-ink-mute) !important;
}

/* ------------------------------------------------------------
 * F.12 Auth-specific (login / reset-password)
 * ------------------------------------------------------------ */
.auth-card {
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20, 10, 0, 0.08);
}

.auth-header {
  background: var(--portal-ink-900) !important;
  color: #ffffff !important;
  padding: 24px 24px 20px;
  border-radius: 12px 12px 0 0;
}

.auth-header h2 {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.auth-header p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  margin: 6px 0 0;
}

/* ------------------------------------------------------------
 * F.13 Provider cards + dashboard #my-providers section
 *      (subtle polish without touching dashboard.js rendering)
 * ------------------------------------------------------------ */
#my-providers .provider-card-clickable {
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms !important;
}

#my-providers .provider-card-clickable .card-title {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  color: var(--portal-ink-900);
  font-size: 15px;
  letter-spacing: -0.2px;
}

#my-providers .card-text {
  color: var(--portal-ink-mute);
  font-size: 13px;
  line-height: 1.55;
}

#providerFilter {
  max-width: 320px;
}

/* ============================================================
 * Phase G: Final polish - kill remaining hardcoded gradients,
 *          tighten button sizes, remove primary-color residue
 * ============================================================ */

/* ------------------------------------------------------------
 * G.1 Footer nav - inline style="background: linear-gradient
 *     (#667eea, #764ba2)" is in every page's HTML. Defeat it
 *     by matching the attribute selector with !important.
 *     Inline style WITHOUT !important loses to our !important.
 * ------------------------------------------------------------ */
.footer-nav,
.footer-nav[style*="linear-gradient"],
.footer-nav[style*="#667eea"],
div.footer-nav[style] {
  background: var(--portal-surface-2) !important;
  background-color: var(--portal-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  color: var(--portal-ink-700) !important;
  text-align: left !important;
  margin-top: 32px !important;
}

.footer-nav h3,
.footer-nav h4,
.footer-nav h5,
.footer-nav .footer-title {
  font-family: var(--portal-font-serif);
  color: var(--portal-ink-900) !important;
  font-weight: 500;
}

.footer-nav a {
  color: var(--portal-seal-600) !important;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--portal-seal-700) !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
 * G.2 Hero cards with hardcoded dark-blue gradient
 *     Dashboard "AI 自律エージェント" card:
 *       <div class="card shadow-sm border-0"
 *            style="background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%); color: white;">
 *     Defeat via attribute selector matching.
 * ------------------------------------------------------------ */
.card[style*="linear-gradient"],
.card[style*="#0f172a"],
.card[style*="#1d4ed8"],
.card.shadow-sm.border-0[style*="background"] {
  background: var(--portal-ink-900) !important;
  background-color: var(--portal-ink-900) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

.card[style*="linear-gradient"] .card-title,
.card[style*="linear-gradient"] h1,
.card[style*="linear-gradient"] h2,
.card[style*="linear-gradient"] h3,
.card[style*="linear-gradient"] h4,
.card[style*="linear-gradient"] h5,
.card[style*="linear-gradient"] h6 {
  color: #ffffff !important;
  font-family: var(--portal-font-serif);
  font-weight: 500;
}

.card[style*="linear-gradient"] .btn-light {
  background-color: var(--portal-seal-600) !important;
  border-color: var(--portal-seal-600) !important;
  color: #ffffff !important;
}

.card[style*="linear-gradient"] .btn-light:hover {
  background-color: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-700) !important;
}

/* ------------------------------------------------------------
 * G.3 Alerts with inline gradients (credentials_dynamic.html)
 * ------------------------------------------------------------ */
.alert[style*="linear-gradient"] {
  background: rgba(84, 123, 160, 0.08) !important;
  background-color: rgba(84, 123, 160, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(84, 123, 160, 0.28) !important;
  border-left: 3px solid #547ba0 !important;
  color: #2f4862 !important;
}

/* ------------------------------------------------------------
 * G.4 Buttons - tighter sizes, Claude Design-inspired rhythm
 *     Override the F.8 values with more restrained proportions.
 * ------------------------------------------------------------ */
.btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.5;
}

.btn-sm {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.btn-lg {
  font-size: 14.5px;
  padding: 9px 18px;
  border-radius: 6px;
}

/* Refresh button, filter buttons typical in dashboard */
#refreshBtn,
#providerFilter {
  font-size: 12.5px;
}

/* ------------------------------------------------------------
 * G.5 Utility color classes - align to Signature Ink palette
 *     These propagate to many inline usages across pages.
 * ------------------------------------------------------------ */
.text-primary { color: var(--portal-seal-600) !important; }
.text-success { color: #4a8a5f !important; }
.text-danger  { color: #a64545 !important; }
.text-warning { color: #a67a35 !important; }
.text-info    { color: #547ba0 !important; }

.bg-primary {
  background-color: var(--portal-seal-600) !important;
  color: #ffffff;
}

.bg-info {
  background-color: rgba(84, 123, 160, 0.12) !important;
  color: #3e5e80;
}

.bg-light {
  background-color: var(--portal-surface-0) !important;
}

.border-primary { border-color: var(--portal-seal-600) !important; }
.border-info    { border-color: rgba(84, 123, 160, 0.32) !important; }

/* ------------------------------------------------------------
 * G.6 Provider card publish button (dashboard.js generated)
 *     `.publish-btn` toggles between .btn-success and
 *     .btn-outline-secondary. Smooth the transition.
 * ------------------------------------------------------------ */
#my-providers .publish-btn {
  font-family: var(--portal-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px !important;
  border-radius: 4px;
}

#my-providers .publish-btn.btn-success {
  background-color: rgba(74, 138, 95, 0.14) !important;
  color: #3d7852 !important;
  border-color: rgba(74, 138, 95, 0.32) !important;
}

#my-providers .publish-btn.btn-outline-secondary {
  background-color: var(--portal-surface-1) !important;
  color: var(--portal-ink-mute) !important;
  border-color: var(--portal-line-strong) !important;
}

/* ------------------------------------------------------------
 * G.7 Tabs in dashboard (Bootstrap nav-tabs) - seal underline
 *     already in F.7, add subtle hover polish
 * ------------------------------------------------------------ */
.nav-tabs .nav-link:focus {
  outline: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
 * G.8 Typography micro-polish
 * ------------------------------------------------------------ */
p { line-height: 1.6; }

.lead {
  font-size: 15px;
  font-weight: 400;
  color: var(--portal-ink-mute);
  line-height: 1.55;
}

/* Remove heavy drop shadows from random cards */
.card.shadow-sm[style*="box-shadow"] {
  box-shadow: 0 1px 2px rgba(20, 10, 0, 0.05) !important;
}

/* ------------------------------------------------------------
 * G.9 Progress bars - seal tinted
 * ------------------------------------------------------------ */
.progress {
  height: 6px;
  background-color: var(--portal-surface-2);
  border-radius: 3px;
}

.progress-bar {
  background-color: var(--portal-seal-600);
}

.progress-bar.bg-success { background-color: #4a8a5f !important; }
.progress-bar.bg-danger  { background-color: #c85454 !important; }
.progress-bar.bg-warning { background-color: #c89547 !important; }
.progress-bar.bg-info    { background-color: #547ba0 !important; }

/* ------------------------------------------------------------
 * G.10 Section headings with details/summary (dashboard)
 *      The dashboard has <summary style="...color: #1e293b...">
 *      style attributes with semi-specific colors. Unify.
 * ------------------------------------------------------------ */
details > summary[style*="color"] {
  color: var(--portal-ink-900) !important;
  font-family: var(--portal-font-serif);
  font-weight: 500 !important;
  letter-spacing: -0.2px;
}

/* ============================================================
 * Phase H: Final polish (independent design review)
 *
 * Key insight: to defeat inline style="background: linear-gradient(...)"
 * WITHOUT requiring inline !important, we use the background LONGHAND
 * property `background-image: none !important` — this wins the
 * shorthand-vs-longhand specificity dance regardless of source order.
 * ============================================================ */

/* ------------------------------------------------------------
 * H.1 Navbar - attribute selector + background-image:none
 *     Covers all pages with inline <style> blue gradient
 *     and the workflow_detail.html nav style="..." attr.
 * ------------------------------------------------------------ */
nav.navbar-dark,
nav.navbar-dark.bg-dark,
nav.navbar[style*="linear-gradient"],
nav[style*="#0066cc"],
nav[style*="linear-gradient"].navbar,
body nav.navbar.navbar-dark,
body nav.navbar.navbar-dark.bg-dark,
body nav.navbar.navbar-dark[style] {
  background: var(--portal-ink-900) !important;
  background-color: var(--portal-ink-900) !important;
  background-image: none !important;
}

/* ------------------------------------------------------------
 * H.2 Footer-nav - tone down purple gradient + ghost white buttons
 * ------------------------------------------------------------ */
.footer-nav,
.footer-nav[style] {
  background: var(--portal-surface-1) !important;
  background-color: var(--portal-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  margin-top: 32px !important;
  color: var(--portal-ink-700) !important;
  text-align: left !important;
}

.footer-nav h3, .footer-nav h4, .footer-nav h5,
.footer-nav .footer-title {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  color: var(--portal-ink-900) !important;
}

/* Internal translucent-white buttons -> surface-2 chips */
.footer-nav a[style*="rgba(255, 255, 255, 0.2)"],
.footer-nav a[style*="rgba(255,255,255,0.2)"],
.footer-nav a[style*="rgba(255,255,255,.2)"],
.footer-nav button[style*="rgba(255, 255, 255"],
.footer-nav .btn[style*="rgba(255, 255, 255"] {
  background: var(--portal-surface-2) !important;
  background-color: var(--portal-surface-2) !important;
  background-image: none !important;
  color: var(--portal-ink-700) !important;
  border: 1px solid var(--portal-line) !important;
  font-weight: 400 !important;
}

.footer-nav a[style*="rgba(255, 255, 255, 0.2)"]:hover,
.footer-nav a[style*="rgba(255,255,255,0.2)"]:hover,
.footer-nav button[style*="rgba(255, 255, 255"]:hover {
  background: var(--portal-seal-tint) !important;
  background-color: var(--portal-seal-tint) !important;
  color: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-600) !important;
}

/* Faint "利用規約" / "プライバシー" links */
.footer-nav a[style*="rgba(255, 255, 255, 0.7)"],
.footer-nav a[style*="rgba(255,255,255,0.7)"],
.footer-nav a[style*="rgba(255,255,255,.7)"] {
  color: var(--portal-ink-mute) !important;
}

/* ------------------------------------------------------------
 * H.3 Hero cards (dashboard AI agent / ai_agent.html)
 *     Keep them visual but calm: white surface + seal left-border
 *     instead of heavy navy gradient.
 * ------------------------------------------------------------ */
.card[style*="linear-gradient"],
.card[style*="#0f172a"],
.card[style*="#1d4ed8"],
.card.shadow-sm.border-0[style*="background"] {
  background: var(--portal-surface-1) !important;
  background-color: var(--portal-surface-1) !important;
  background-image: none !important;
  color: var(--portal-ink-700) !important;
  border: 1px solid var(--portal-line) !important;
  border-left: 3px solid var(--portal-seal-600) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(20, 10, 0, 0.05) !important;
}

.card[style*="linear-gradient"] .card-title,
.card[style*="linear-gradient"] h1,
.card[style*="linear-gradient"] h2,
.card[style*="linear-gradient"] h3,
.card[style*="linear-gradient"] h4,
.card[style*="linear-gradient"] h5,
.card[style*="linear-gradient"] h6 {
  color: var(--portal-ink-900) !important;
  font-family: var(--portal-font-serif);
  font-weight: 500;
}

.card[style*="linear-gradient"] .text-white,
.card[style*="linear-gradient"] .text-white-50,
.card[style*="linear-gradient"] [class*="text-white"] {
  color: var(--portal-ink-mute) !important;
}

.card[style*="linear-gradient"] .text-uppercase,
.card[style*="linear-gradient"] small.text-uppercase {
  color: var(--portal-seal-600) !important;
  font-family: var(--portal-font-mono);
  letter-spacing: 1.5px;
  font-weight: 500;
}

.card[style*="linear-gradient"] .btn-light,
.card[style*="linear-gradient"] .btn-outline-light {
  background: var(--portal-seal-600) !important;
  background-image: none !important;
  border-color: var(--portal-seal-600) !important;
  color: #ffffff !important;
}

.card[style*="linear-gradient"] .btn-light:hover,
.card[style*="linear-gradient"] .btn-outline-light:hover {
  background: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-700) !important;
}

/* ai_agent.html line 25 etc: div with dark gradient */
div[style*="linear-gradient(135deg, #0f172a"],
div[style*="linear-gradient(135deg,#0f172a"],
div[style*="#111827"],
[style*="linear-gradient"][style*="#1d4ed8"] {
  background: var(--portal-ink-900) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * H.4 Alert inline gradient (credentials_dynamic.html:213)
 * ------------------------------------------------------------ */
.alert[style*="linear-gradient"],
.alert-info[style*="linear-gradient"],
.alert[style*="#e0f2fe"] {
  background: rgba(84, 123, 160, 0.06) !important;
  background-color: rgba(84, 123, 160, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(84, 123, 160, 0.28) !important;
  border-left: 3px solid #547ba0 !important;
  color: #2f4862 !important;
}

.alert[style*="#3b82f6"] i,
.alert-info i[style*="#3b82f6"],
.alert i[style*="#3b82f6"] {
  color: var(--portal-seal-600) !important;
}

/* ------------------------------------------------------------
 * H.5 ai_agent.html status chips (replace blue fill)
 * ------------------------------------------------------------ */
.status-in_progress,
.status-running,
[class*="status-"][class*="in_progress"],
[class*="status-"][class*="running"] {
  background: rgba(84, 123, 160, 0.10) !important;
  background-color: rgba(84, 123, 160, 0.10) !important;
  background-image: none !important;
  color: #3e5e80 !important;
  border: 1px solid rgba(84, 123, 160, 0.25) !important;
  font-family: var(--portal-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
 * H.6 experiments.html cost bars - flat single color
 * ------------------------------------------------------------ */
.cost-safe {
  background: #4a8a5f !important;
  background-image: none !important;
}

.cost-warn {
  background: #c89547 !important;
  background-image: none !important;
}

.cost-danger {
  background: #c85454 !important;
  background-image: none !important;
}

/* ------------------------------------------------------------
 * H.7 workflow_detail / workflows running snippet
 * ------------------------------------------------------------ */
.wf-snippet-running,
[class*="wf-snippet-running"] {
  background: var(--portal-surface-2) !important;
  background-image: none !important;
  border-left-color: var(--portal-line-strong) !important;
  color: var(--portal-ink-mute) !important;
}

/* ------------------------------------------------------------
 * H.8 Buttons - reconcile with Claude Design tokens
 *     Override Phase F/G values to match --radius-md = 6px and
 *     line-height:1 rhythm. Claude Design btn/btn-sm/btn-lg specs:
 *     .btn   : padding 10px 18px, font-size 14px, radius 6px
 *     .btn-sm: padding  6px 12px, font-size 12.5px, radius 6px
 *     .btn-lg: padding 14px 24px, font-size 15px, radius 6px
 * ------------------------------------------------------------ */
.btn {
  font-family: var(--portal-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1px;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color 120ms, border-color 120ms, color 120ms;
  gap: 8px;
}

.btn-sm {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

.btn-lg {
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 6px;
}

/* Remove transform/shadow based hover if any page tries to add them */
.btn:hover {
  transform: none !important;
}

/* ------------------------------------------------------------
 * H.9 Heading weight scale - Claude Design uses 400 for h1 serif
 * ------------------------------------------------------------ */
h1, .h1 { font-weight: 400; }
h2, .h2 { font-weight: 500; }
h3, .h3 { font-weight: 500; }

/* ------------------------------------------------------------
 * H.10 Table header weight - Claude Design is 500, not 600
 * ------------------------------------------------------------ */
.table > thead > tr > th,
.table thead th {
  font-weight: 500;
  padding: 10px 20px;
}

/* ------------------------------------------------------------
 * H.11 Modal shadow reduction to match --shadow-lg in tokens
 * ------------------------------------------------------------ */
.modal-content {
  box-shadow: 0 12px 48px rgba(20, 10, 0, 0.12);
}

/* ------------------------------------------------------------
 * H.12 Eyebrow class (new utility) - mono uppercase seal label
 *     Applied automatically to .text-uppercase.small + Bootstrap
 *     .badge.bg-light patterns and explicit .eyebrow if used.
 * ------------------------------------------------------------ */
.eyebrow,
.card-header .text-uppercase.small,
.card-body .text-uppercase.small {
  font-family: var(--portal-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--portal-seal-600);
  display: inline-block;
}

/* ------------------------------------------------------------
 * H.13 card-header.bg-primary - white + seal left-border
 *      (match the bg-success treatment for consistency)
 * ------------------------------------------------------------ */
.card-header.bg-primary {
  background-color: var(--portal-surface-1) !important;
  background-image: none !important;
  color: var(--portal-ink-900) !important;
  border-left: 3px solid var(--portal-seal-600);
  border-bottom: 1px solid var(--portal-line);
}

.card-header.bg-primary .text-white,
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6 {
  color: var(--portal-ink-900) !important;
}

/* ------------------------------------------------------------
 * H.14 auth_wizard purple traces (CSS-only reach - limited)
 * ------------------------------------------------------------ */
[style*="#667eea"],
[style*="#764ba2"] {
  background-image: none !important;
}

[style*="background: linear-gradient(135deg, #667eea"],
[style*="background: linear-gradient(135deg,#667eea"] {
  background: var(--portal-surface-1) !important;
  background-image: none !important;
  color: var(--portal-ink-700) !important;
  border: 1px solid var(--portal-line) !important;
}

/* Input focus purple */
input[style*="#667eea"]:focus,
[style*="border-color: #667eea"] {
  border-color: var(--portal-seal-600) !important;
  box-shadow: 0 0 0 3px rgba(176, 64, 46, 0.14) !important;
}

/* ------------------------------------------------------------
 * H.15 Avoid hover-lift transform
 * ------------------------------------------------------------ */
.card:hover,
.provider-card-clickable:hover {
  transform: none !important;
}

/* ------------------------------------------------------------
 * H.16 Fine-tune .fw-bold for Signature Ink
 * ------------------------------------------------------------ */
.fw-bold {
  font-weight: 500 !important;
  color: var(--portal-ink-900);
}

/* ------------------------------------------------------------
 * H.17 border-radius cap at 12px (no 15px Bootstrap/custom)
 * ------------------------------------------------------------ */
[style*="border-radius: 15px"],
[style*="border-radius:15px"] {
  border-radius: 8px !important;
}

/* ============================================================
 * Phase I: Non-portal pages + navbar button polish
 *   Addresses: public/index.html (landing), newsletter, easy/,
 *   legal/, admin/, marketplace/ — wherever Bootstrap + inline
 *   styles still produce old colors. Also navbar inline ghost-
 *   white buttons and misc gradient patterns not covered in H.
 * ============================================================ */

/* ------------------------------------------------------------
 * I.1 Broader inline gradient kill (covers no-space variants)
 * ------------------------------------------------------------ */
[style*="#667eea"],
[style*="#764ba2"],
[style*="#c4b5fd"],
[style*="#1a1040"],
[style*="linear-gradient(135deg,#667eea"],
[style*="linear-gradient(135deg, #667eea"],
[style*="linear-gradient(135deg,#fff 0%,#c4b5fd"],
[style*="linear-gradient(135deg, #fff 0%, #c4b5fd"] {
  background-image: none !important;
}

/* ------------------------------------------------------------
 * I.2 Newsletter CTA section on landing (index.html:335)
 *     Full-bleed purple gradient block. Replace with warm
 *     surface-2 band; content stays readable.
 * ------------------------------------------------------------ */
section[style*="linear-gradient"][style*="#667eea"],
section[style*="linear-gradient"][style*="#764ba2"] {
  background: var(--portal-surface-2) !important;
  background-color: var(--portal-surface-2) !important;
  background-image: none !important;
  color: var(--portal-ink-700) !important;
  border-top: 1px solid var(--portal-line);
  border-bottom: 1px solid var(--portal-line);
}

section[style*="linear-gradient"][style*="#667eea"] a,
section[style*="linear-gradient"][style*="#764ba2"] a,
section[style*="linear-gradient"] a[style*="rgba(255,255,255,0.2)"],
section[style*="linear-gradient"] a[style*="rgba(255, 255, 255, 0.2)"] {
  background: var(--portal-seal-600) !important;
  background-color: var(--portal-seal-600) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--portal-seal-600) !important;
}

/* ------------------------------------------------------------
 * I.3 Navbar buttons - general hardening for all pages
 *     Captures cases where individual buttons have inline
 *     rgba white, border, etc (multi-page legacy).
 * ------------------------------------------------------------ */
body nav.navbar a.btn[style*="rgba(255, 255, 255, 0.2)"],
body nav.navbar a.btn[style*="rgba(255,255,255,0.2)"],
body nav.navbar .btn[style*="rgba(255, 255, 255"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ------------------------------------------------------------
 * I.4 Language toggle buttons - unified in navbar context
 * ------------------------------------------------------------ */
#languageToggle .btn {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  min-height: unset;
}

/* ------------------------------------------------------------
 * I.5 Legal pages header/nav - tone down seal fill
 *     legal.css uses .legal-header { background: var(--primary-gradient) }
 *     Our --primary-gradient override makes it seal. But large seal fill
 *     is off-brand per Claude Design (no big brand fills). Use dark ink.
 * ------------------------------------------------------------ */
.legal-nav {
  background: var(--portal-ink-900) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-header {
  background: var(--portal-surface-2) !important;
  background-image: none !important;
  color: var(--portal-ink-700) !important;
  border-left: 4px solid var(--portal-seal-600);
  border-bottom: 1px solid var(--portal-line);
  padding: 32px 0;
}

.legal-header h1 {
  color: var(--portal-ink-900) !important;
  font-family: var(--portal-font-serif);
  font-weight: 400;
}

.legal-header .meta {
  color: var(--portal-ink-mute) !important;
  font-family: var(--portal-font-mono);
  font-size: 12px;
}

.legal-nav .brand {
  font-family: var(--portal-font-serif);
  color: #ffffff !important;
}

.legal-nav a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.legal-nav a:hover,
.legal-nav a strong {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * I.6 easy/provider_chat.html - many colorful gradients
 *     Normalize status/action gradients to solid muted tones.
 * ------------------------------------------------------------ */
[style*="linear-gradient(135deg, #2563eb"],
[style*="linear-gradient(135deg,#2563eb"],
[style*="linear-gradient(135deg, #1d4ed8"] {
  background: var(--portal-seal-600) !important;
  background-image: none !important;
}

[style*="linear-gradient(135deg, #0ea5e9"],
[style*="linear-gradient(135deg, #6366f1"],
[style*="linear-gradient(135deg, #8b5cf6"] {
  background: #547ba0 !important;
  background-image: none !important;
}

[style*="linear-gradient(135deg, #10b981"],
[style*="linear-gradient(135deg, #059669"],
[style*="linear-gradient(135deg, #047857"] {
  background: #4a8a5f !important;
  background-image: none !important;
}

[style*="linear-gradient(135deg, #ef4444"],
[style*="linear-gradient(135deg, #dc2626"],
[style*="linear-gradient(135deg, #b91c1c"] {
  background: #c85454 !important;
  background-image: none !important;
}

[style*="linear-gradient(135deg, #fef3c7"],
[style*="linear-gradient(135deg, #fde68a"] {
  background: rgba(200, 149, 71, 0.12) !important;
  background-image: none !important;
}

/* ------------------------------------------------------------
 * I.7 Landing (index.html) and newsletter - partial tone-down
 *     These pages intentionally have dark brand designs, but we
 *     can still tone down the hot purple accents into seal ink.
 * ------------------------------------------------------------ */
[style*="background:linear-gradient(135deg,#667eea"],
[style*="background: linear-gradient(135deg,#667eea"],
[style*="background: linear-gradient(135deg, #667eea"] {
  background-image: none !important;
}

/* Landing CTA buttons - solid seal */
a[style*="#fff"][style*="#c4b5fd"],
button[style*="#fff"][style*="#c4b5fd"],
[style*="background: linear-gradient(135deg, #fff 0%, #c4b5fd"],
[style*="background:linear-gradient(135deg,#fff 0%,#c4b5fd"] {
  background: var(--portal-seal-600) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--portal-seal-600) !important;
}

/* ------------------------------------------------------------
 * I.8 Legacy --da-accent variables (on landing/newsletter)
 *     Override to seal palette so any component using
 *     var(--da-accent1/2) renders in brand.
 * ------------------------------------------------------------ */
:root {
  --da-accent1: var(--portal-seal-600);
  --da-accent2: var(--portal-seal-700);
  --da-accent1-rgb: 176, 64, 46;
  --da-accent2-rgb: 138, 51, 36;
}

/* ------------------------------------------------------------
 * I.9 Admin portal specific
 * ------------------------------------------------------------ */
.admin-portal-nav,
.admin-nav {
  background: var(--portal-ink-900) !important;
  background-image: none !important;
}

/* ------------------------------------------------------------
 * I.10 Generic utility: suppress stray inline linear-gradient
 *     on <a> / <button> / small decorative divs while preserving
 *     the background color shorthand.
 * ------------------------------------------------------------ */
a[style*="linear-gradient"],
button[style*="linear-gradient"],
.btn[style*="linear-gradient"] {
  background-image: none !important;
}

/* ============================================================
 * Phase J: Marketplace navbar + install button unification
 *   marketplace/index.html + provider-detail.html have a custom
 *   .marketplace-header (white bg + purple brand) and .btn-install
 *   (purple background). Unify with portal navbar (black) + seal CTA.
 * ============================================================ */

/* ------------------------------------------------------------
 * J.1 marketplace-header - black (ink-900) to match portal navbar
 * ------------------------------------------------------------ */
.marketplace-header {
  background: var(--portal-ink-900) !important;
  background-color: var(--portal-ink-900) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.marketplace-header .header-brand a {
  color: #ffffff !important;
  font-family: var(--portal-font-serif);
  font-weight: 500;
  font-size: 16px;
}

.marketplace-header .header-brand i {
  color: var(--portal-seal-400) !important;
}

.marketplace-header .brand-text {
  color: #ffffff;
}

/* ------------------------------------------------------------
 * J.2 header-search on dark bg
 * ------------------------------------------------------------ */
.marketplace-header .header-search {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.marketplace-header .header-search:focus-within {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 0 0 2px rgba(176, 64, 46, 0.35) !important;
  border-color: var(--portal-seal-500);
}

.marketplace-header .header-search i,
.marketplace-header .header-search input,
.marketplace-header .header-search input::placeholder {
  color: rgba(255, 255, 255, 0.78) !important;
}

.marketplace-header .header-search input {
  background: transparent !important;
}

.marketplace-header .header-search input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}

.marketplace-header .search-submit {
  color: var(--portal-seal-400) !important;
}

.marketplace-header .search-submit:hover {
  color: var(--portal-seal-300) !important;
}

/* ------------------------------------------------------------
 * J.3 header-actions buttons (filter / link / user / logout)
 * ------------------------------------------------------------ */
.marketplace-header .btn-filter {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.marketplace-header .btn-filter:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

.marketplace-header .btn-filter.active {
  background: var(--portal-seal-600) !important;
  border-color: var(--portal-seal-600) !important;
  color: #ffffff !important;
}

.marketplace-header .filter-count {
  background: var(--portal-seal-600) !important;
  color: #ffffff !important;
}

.marketplace-header .header-link {
  color: rgba(255, 255, 255, 0.78) !important;
  border-radius: 6px;
}

.marketplace-header .header-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.marketplace-header .user-name {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--portal-font-mono);
  font-size: 12px;
}

.marketplace-header .btn-logout {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
}

.marketplace-header .btn-logout:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

/* Language toggle on dark header */
.marketplace-header #languageToggle .btn,
.marketplace-header #languageToggle .btn-outline-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  line-height: 1.4;
}

.marketplace-header #languageToggle .btn:hover,
.marketplace-header #languageToggle .btn.active,
.marketplace-header #languageToggle .btn-outline-primary:hover,
.marketplace-header #languageToggle .btn-outline-primary.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * J.4 Install / Uninstall buttons - seal for primary, refined
 *     danger tone for uninstall.
 * ------------------------------------------------------------ */
.btn-install,
.install-btn,
.card-footer-actions .btn-install {
  background: var(--portal-seal-600) !important;
  background-color: var(--portal-seal-600) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--portal-seal-600) !important;
  border-radius: 6px !important;
  font-family: var(--portal-font-sans);
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px;
  padding: 5px 14px !important;
  height: auto !important;
  transition: background-color 140ms, border-color 140ms !important;
}

.btn-install:hover,
.install-btn:hover,
.card-footer-actions .btn-install:hover {
  background: var(--portal-seal-700) !important;
  background-color: var(--portal-seal-700) !important;
  border-color: var(--portal-seal-700) !important;
}

.btn-install.btn-danger,
.install-btn.btn-danger,
.card-footer-actions .btn-install.btn-danger,
.install-btn.installed {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--portal-ink-mute) !important;
  border: 1px solid var(--portal-line-strong) !important;
}

.btn-install.btn-danger:hover,
.install-btn.btn-danger:hover,
.card-footer-actions .btn-install.btn-danger:hover,
.install-btn.installed:hover {
  background: rgba(200, 84, 84, 0.08) !important;
  background-color: rgba(200, 84, 84, 0.08) !important;
  color: #a64545 !important;
  border-color: #c85454 !important;
}

.install-btn.installing {
  background: var(--portal-surface-2) !important;
  color: var(--portal-ink-mute) !important;
  border-color: var(--portal-line-strong) !important;
  cursor: wait;
}

.install-btn:disabled,
.btn-install:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.install-btn.btn-danger:disabled {
  background: transparent !important;
  color: var(--portal-ink-faint) !important;
  border-color: var(--portal-line) !important;
}

.install-btn.installed,
.install-btn.installed:hover,
.install-btn.installed:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--portal-ink-mute) !important;
  border: 1px solid var(--portal-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.install-btn.admin-disabled,
.install-btn.admin-disabled:hover,
.install-btn.admin-disabled:active,
#install-btn.admin-disabled,
#install-btn.admin-disabled:hover,
#install-btn.admin-disabled:active {
  background: var(--portal-surface-2) !important;
  background-color: var(--portal-surface-2) !important;
  background-image: none !important;
  color: var(--portal-ink-faint) !important;
  border: 1px solid var(--portal-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

.install-btn.admin-disabled:disabled,
#install-btn.admin-disabled:disabled {
  opacity: 1 !important;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
 * J.5 Marketplace card polish - flat surface, seal accent
 * ------------------------------------------------------------ */
.marketplace-card,
.provider-card {
  background: var(--portal-surface-1) !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 160ms, box-shadow 160ms !important;
}

.marketplace-card:hover,
.provider-card:hover {
  border-color: var(--portal-line-strong) !important;
  box-shadow: 0 1px 2px rgba(20, 10, 0, 0.05) !important;
}

.card-footer-actions,
.card-footer {
  background: var(--portal-surface-1) !important;
  border-top: 1px solid var(--portal-line) !important;
}

/* Stat chips (installs / ratings) on cards */
.card-stats .stat,
.provider-detail-modal-chip {
  color: var(--portal-ink-faint) !important;
  font-family: var(--portal-font-mono);
  font-size: 11px !important;
}

/* ------------------------------------------------------------
 * J.6 Installed-only checkbox filter (top bar)
 * ------------------------------------------------------------ */
#installed-only + span,
label[for="installed-only"] {
  color: var(--portal-ink-700);
  font-family: var(--portal-font-sans);
  font-size: 13px;
}

/* ------------------------------------------------------------
 * J.7 Marketplace icon colors (bi-* bootstrap icons)
 *     Some icons in marketplace use purple #667eea via
 *     inline style or class. Normalize to seal.
 * ------------------------------------------------------------ */
.marketplace-header .bi-grid-3x3-gap {
  color: var(--portal-seal-400) !important;
}

/* ------------------------------------------------------------
 * J.7b Marketplace toolbar - search/filter row below unified nav
 * ------------------------------------------------------------ */
.marketplace-page {
  padding-top: 0 !important;
}

.marketplace-toolbar {
  background: var(--portal-surface-1);
  border-bottom: 1px solid var(--portal-line);
  padding: 12px 16px;
}

.marketplace-toolbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marketplace-toolbar .header-search {
  flex: 1 1 420px;
  max-width: 520px;
}

.marketplace-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .marketplace-toolbar {
    padding: 10px 12px;
  }

  .marketplace-toolbar-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .marketplace-toolbar .header-search {
    max-width: none;
    width: 100%;
  }

  .marketplace-toolbar-actions {
    justify-content: flex-end;
  }
}

/* ============================================================
 * Phase K: Unified footer-nav styling (class-based, no inline style)
 *
 * portal-nav.js now injects a canonical footer-nav with:
 *   .footer-nav-title (h3)
 *   .footer-nav-links (primary chip row)
 *     .footer-nav-link (a)
 *   .footer-nav-legal (legal row)
 *     .footer-legal-link (a)
 *
 * These class-based selectors provide consistent styling without
 * depending on inline style attributes.
 * ============================================================ */

/* Container — override previous Phase G/H rule (attribute selector)
   with a stronger class-based rule. */
.footer-nav {
  background: var(--portal-surface-1) !important;
  background-color: var(--portal-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin: 32px auto !important;
  max-width: 1200px;
  color: var(--portal-ink-700) !important;
  text-align: center !important;
}

.footer-nav-title {
  font-family: var(--portal-font-serif);
  font-weight: 500;
  color: var(--portal-ink-900);
  font-size: 15px;
  letter-spacing: -0.2px;
  margin: 0 0 16px;
  text-align: center;
}

.footer-nav-title span {
  margin-left: 4px;
}

.footer-nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--portal-surface-2);
  color: var(--portal-ink-700);
  text-decoration: none;
  border: 1px solid var(--portal-line);
  border-radius: 6px;
  font-family: var(--portal-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}

.footer-nav-link:hover {
  background: var(--portal-seal-tint);
  color: var(--portal-seal-700);
  border-color: var(--portal-seal-600);
  text-decoration: none;
}

.footer-nav-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--portal-line);
}

.footer-legal-link {
  color: var(--portal-ink-faint) !important;
  font-size: 11.5px;
  text-decoration: none;
  font-family: var(--portal-font-sans);
}

.footer-legal-link:hover {
  color: var(--portal-seal-600) !important;
  text-decoration: underline;
}

/* ============================================================
 * Phase L: .navbar (non-Bootstrap marketplace/provider-detail
 *   implementation) unification.
 *
 * portal.css lines 86-228 define a custom .navbar (white bg,
 * purple accents) used in marketplace/provider-detail.html with:
 *   <nav class="navbar"> <div class="nav-container">
 *     <div class="nav-brand"> <a><span>Digital Autograph</span></a>
 *     <div class="nav-menu">
 *       <a class="nav-link">...</a>
 *       <div class="nav-user"><span id="user-name">...</span>
 *         <button id="logout-btn" class="btn btn-outline">...</button>
 *       <div id="languageToggle">...</div>
 *
 * Unify to match portal-navbar black + seal aesthetic.
 * ============================================================ */

/* ------------------------------------------------------------
 * L.1 .navbar (custom/portal.css version, NOT Bootstrap .navbar-dark)
 *     Target only contexts where it's NOT a Bootstrap navbar.
 *     We match by requiring .nav-container as child (portal.css structure).
 * ------------------------------------------------------------ */
nav.navbar:has(.nav-container),
.navbar:has(> .nav-container) {
  background: var(--portal-ink-900) !important;
  background-color: var(--portal-ink-900) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
}

nav.navbar:has(.nav-container) .nav-brand a,
.navbar:has(> .nav-container) .nav-brand a {
  color: #ffffff !important;
  font-family: var(--portal-font-serif);
  font-weight: 500;
  font-size: 16px;
}

nav.navbar:has(.nav-container) .nav-brand a:hover,
.navbar:has(> .nav-container) .nav-brand a:hover {
  color: #ffffff !important;
  text-decoration: none;
}

nav.navbar:has(.nav-container) .nav-logo,
.navbar:has(> .nav-container) .nav-logo {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

nav.navbar:has(.nav-container) .nav-link,
.navbar:has(> .nav-container) .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--portal-font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background-color 140ms, color 140ms;
}

nav.navbar:has(.nav-container) .nav-link:hover,
nav.navbar:has(.nav-container) .nav-link.active,
.navbar:has(> .nav-container) .nav-link:hover,
.navbar:has(> .nav-container) .nav-link.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

nav.navbar:has(.nav-container) .nav-user,
.navbar:has(> .nav-container) .nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  margin-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

nav.navbar:has(.nav-container) .nav-user span,
nav.navbar:has(.nav-container) #user-name,
.navbar:has(> .nav-container) .nav-user span,
.navbar:has(> .nav-container) #user-name {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--portal-font-mono);
  font-size: 12px !important;
}

nav.navbar:has(.nav-container) .nav-user #logout-btn,
nav.navbar:has(.nav-container) .nav-user .btn,
nav.navbar:has(.nav-container) .nav-user .btn-outline,
.navbar:has(> .nav-container) .nav-user .btn,
.navbar:has(> .nav-container) .nav-user .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
}

nav.navbar:has(.nav-container) .nav-user .btn:hover,
.navbar:has(> .nav-container) .nav-user .btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

/* Language toggle within custom navbar */
nav.navbar:has(.nav-container) #languageToggle .btn,
nav.navbar:has(.nav-container) #languageToggle .btn-outline-primary,
.navbar:has(> .nav-container) #languageToggle .btn,
.navbar:has(> .nav-container) #languageToggle .btn-outline-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  line-height: 1.4 !important;
}

nav.navbar:has(.nav-container) #languageToggle .btn:hover,
nav.navbar:has(.nav-container) #languageToggle .btn.active,
.navbar:has(> .nav-container) #languageToggle .btn:hover,
.navbar:has(> .nav-container) #languageToggle .btn.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * L.2 Fallback for browsers without :has() (Firefox <121 is
 *     already supported; all modern browsers OK since 2023-12).
 *     Also provide non-:has rules for safety.
 * ------------------------------------------------------------ */
.nav-container {
  /* If present, forces parent .navbar into unified style via child rules */
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
}

/* Safe child-based rules (work even without :has()) */
.navbar > .nav-container .nav-brand a {
  color: #ffffff !important;
  font-family: var(--portal-font-serif);
  font-weight: 500;
}

.navbar > .nav-container .nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
}

.navbar > .nav-container .nav-link:hover,
.navbar > .nav-container .nav-link.active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
 * L.3 Breadcrumb in marketplace provider-detail
 * ------------------------------------------------------------ */
nav.breadcrumb {
  font-family: var(--portal-font-sans);
  font-size: 12.5px;
  padding: 12px 0;
  background: transparent !important;
  margin-bottom: 8px;
}

nav.breadcrumb a {
  color: var(--portal-seal-600) !important;
  text-decoration: none;
}

nav.breadcrumb a:hover {
  color: var(--portal-seal-700) !important;
  text-decoration: underline;
}

nav.breadcrumb .breadcrumb-separator {
  color: var(--portal-ink-faint);
  margin: 0 8px;
}

/* portal-refinement.css loaded (Phase L applied - custom .navbar + breadcrumb) */

/* Dashboard specific refinement (2026-05-14) */
.dashboard-refined .navbar {
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 40, 90, 0.2);
}

.dashboard-main {
  max-width: 1100px;
}

.dashboard-hero {
  background: linear-gradient(135deg, rgba(176,64,46,.08), rgba(84,123,160,.08));
  border: 1px solid rgba(10,10,10,.08);
  border-radius: 14px;
}

.dashboard-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--portal-seal-600);
}

.dashboard-refined #dashboardTabs .nav-link {
  border-radius: 999px;
  margin-right: .5rem;
  border: 1px solid transparent;
}

.dashboard-refined #dashboardTabs .nav-link.active {
  background: var(--portal-seal-tint);
  border-color: rgba(176,64,46,.25);
  color: var(--portal-seal-700);
  font-weight: 600;
}

.dashboard-refined #kpiRow .card {
  border: 1px solid rgba(10,10,10,.08);
  box-shadow: 0 6px 18px rgba(10,10,10,.04);
}