/* =============================================================
   theme-meta.css — Meta-inspired design overlay
   Loads AFTER theme.css / theme.min.css (Geeks-UI dashboard kit).
   Source spec: DESIGN.md (Meta design system, alpha)
   ============================================================= */

/* ---------- A. Design tokens (source of truth) ---------- */
:root {
  --md-cobalt: #0064e0;
  --md-cobalt-deep: #0457cb;
  --md-cobalt-soft: #0091ff;
  --md-ink-button: #000000;
  --md-ink-deep: #0a1317;
  --md-ink: #1c1e21;
  --md-charcoal: #444950;
  --md-slate: #4b4c4f;
  --md-steel: #5d6c7b;
  --md-stone: #8595a4;
  --md-canvas: #ffffff;
  --md-surface-soft: #f1f4f7;
  --md-hairline: #ced0d4;
  --md-hairline-soft: #dee3e9;
  --md-disabled-text: #bcc0c4;
  --md-success: #31a24c;
  --md-critical: #e41e3f;
  --md-critical-strong: #f0284a;
  --md-warning: #f7b928;
  --md-attention: #f2a918;
  --md-fb-blue: #1876f2;

  --md-radius-sm: 4px;
  --md-radius-md: 6px;
  --md-radius-lg: 8px;
  --md-radius-xl: 16px;
  --md-radius-xxl: 24px;
  --md-radius-xxxl: 32px;
  --md-radius-pill: 100px;

  --md-font-sans:
    "Montserrat", "Helvetica Neue", "Arial", "Noto Sans KR", "Noto Sans",
    sans-serif;
}

/* ---------- B. Geeks-UI bridge (kit reads --gk-*) ---------- */
:root {
  --gk-primary: var(--md-ink-button);
  --gk-primary-rgb: 0, 0, 0;
  --gk-link-color: var(--md-cobalt);
  --gk-link-color-rgb: 0, 100, 224;
  --gk-link-hover-color: var(--md-cobalt-deep);
  --gk-link-hover-color-rgb: 4, 87, 203;

  --gk-body-font-family: var(--md-font-sans);
  --gk-font-sans-serif: var(--md-font-sans);
  --gk-body-color: var(--md-ink);
  --gk-body-color-rgb: 28, 30, 33;
  --gk-body-bg: var(--md-canvas);
  --gk-body-bg-rgb: 255, 255, 255;

  --gk-border-color: var(--md-hairline-soft);
  --gk-border-color-translucent: var(--md-hairline-soft);
  --gk-border-radius: var(--md-radius-lg);
  --gk-border-radius-sm: var(--md-radius-md);
  --gk-border-radius-lg: var(--md-radius-xl);
  --gk-border-radius-xl: var(--md-radius-xxl);
  --gk-border-radius-xxl: var(--md-radius-xxxl);
  --gk-border-radius-pill: var(--md-radius-pill);

  --gk-success: var(--md-success);
  --gk-success-rgb: 49, 162, 76;
  --gk-danger: var(--md-critical);
  --gk-danger-rgb: 228, 30, 63;
  --gk-warning: var(--md-warning);
  --gk-warning-rgb: 247, 185, 40;
  --gk-info: var(--md-cobalt);
  --gk-info-rgb: 0, 100, 224;
  --gk-light: var(--md-surface-soft);
  --gk-light-rgb: 241, 244, 247;
  --gk-dark: var(--md-ink-deep);
  --gk-dark-rgb: 10, 19, 23;

  --gk-tertiary-bg: var(--md-surface-soft);
  --gk-secondary-bg: var(--md-surface-soft);

  --gk-focus-ring-color: rgba(0, 100, 224, 0.25);
  --gk-focus-ring-width: 2px;

  --gk-heading-color: var(--md-ink-deep);
  --gk-emphasis-color: var(--md-ink-deep);

  --gk-card-box-shadow: none;
  --gk-card-border-color: var(--md-hairline-soft);
  --gk-card-border-radius: var(--md-radius-xl);
  --gk-card-bg: var(--md-canvas);
}

/* ---------- C. Typography ---------- */
body {
  font-family: var(--md-font-sans);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  font-weight: 400;
  color: var(--md-ink);
  background-color: var(--md-canvas);
}

h1,
.h1 {
  font-size: 48px;
  line-height: 68px;
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--md-ink-deep);
}
h2,
.h2 {
  font-size: 28px;
  line-height: 52px;
  font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--md-ink-deep);
}
h3,
.h3 {
  font-size: 22px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--md-ink-deep);
}
/* h4 stays 500 (Korean glyphs become spidery at 300). Use .fw-light-editorial opt-in. */
h4,
.h4 {
  font-size: 20px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
h5,
.h5 {
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
h6,
.h6 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

small,
.small {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.fw-light-editorial {
  font-weight: 300;
  letter-spacing: -0.5px;
}

/* Display utilities for marketing hero */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--md-font-sans);
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--md-ink-deep);
}

/* Links */
a {
  color: var(--md-cobalt);
}
a:hover {
  color: var(--md-cobalt-deep);
}

/* ---------- D. Buttons (uniform pill) ---------- */
.btn {
  border-radius: var(--md-radius-pill);
  padding: 10px 21px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
  border-width: 1px;
  border-style: solid;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 18px;
}
.btn-lg,
.btn-group-lg > .btn {
  padding: 11px 25px;
  font-size: 16px;
  line-height: 22px;
}

/* btn-primary = black ink (Q1) */
.btn-primary {
  background-color: var(--md-ink-button);
  border-color: var(--md-ink-button);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--md-charcoal);
  border-color: var(--md-charcoal);
  color: #fff;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--md-disabled-text);
  border-color: var(--md-disabled-text);
  color: #fff;
}

/* btn-cobalt utility — escalation CTA ("최종 확정/결제") */
.btn-cobalt {
  background-color: var(--md-cobalt);
  border-color: var(--md-cobalt);
  color: #fff;
}
.btn-cobalt:hover,
.btn-cobalt:focus,
.btn-cobalt:active,
.btn-cobalt.active {
  background-color: var(--md-cobalt-deep);
  border-color: var(--md-cobalt-deep);
  color: #fff;
}

/* btn-secondary = outline ghost (ink-deep) */
.btn-secondary {
  background-color: transparent;
  border-color: var(--md-ink-deep);
  border-width: 2px;
  color: var(--md-ink-deep);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--md-ink-deep);
  border-color: var(--md-ink-deep);
  color: #fff;
}

/* btn-light = soft surface */
.btn-light {
  background-color: var(--md-surface-soft);
  border-color: transparent;
  color: var(--md-ink);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
  background-color: var(--md-hairline-soft);
  border-color: transparent;
  color: var(--md-ink-deep);
}

/* btn-dark — ink alias */
.btn-dark {
  background-color: var(--md-ink-deep);
  border-color: var(--md-ink-deep);
  color: #fff;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* btn-success / danger / warning / info — semantic */
.btn-success {
  background-color: var(--md-success);
  border-color: var(--md-success);
  color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #258a3e;
  border-color: #258a3e;
  color: #fff;
}
.btn-danger {
  background-color: var(--md-critical);
  border-color: var(--md-critical);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #b8172f;
  border-color: #b8172f;
  color: #fff;
}
.btn-warning {
  background-color: var(--md-warning);
  border-color: var(--md-warning);
  color: var(--md-ink-deep);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #d99c0e;
  border-color: #d99c0e;
  color: var(--md-ink-deep);
}
.btn-info {
  background-color: var(--md-cobalt);
  border-color: var(--md-cobalt);
  color: #fff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--md-cobalt-deep);
  border-color: var(--md-cobalt-deep);
  color: #fff;
}

/* btn-outline-* — ghost variants */
.btn-outline-primary {
  background-color: transparent;
  border: 2px solid var(--md-ink-deep);
  color: var(--md-ink-deep);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--md-ink-deep);
  border-color: var(--md-ink-deep);
  color: #fff;
}
.btn-outline-secondary {
  background-color: transparent;
  border: 2px solid var(--md-hairline);
  color: var(--md-ink);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--md-surface-soft);
  border-color: var(--md-hairline);
  color: var(--md-ink-deep);
}
.btn-outline-success {
  background-color: transparent;
  border: 2px solid var(--md-success);
  color: var(--md-success);
}
.btn-outline-success:hover {
  background-color: var(--md-success);
  color: #fff;
}
.btn-outline-danger {
  background-color: transparent;
  border: 2px solid var(--md-critical);
  color: var(--md-critical);
}
.btn-outline-danger:hover {
  background-color: var(--md-critical);
  color: #fff;
}
.btn-outline-warning {
  background-color: transparent;
  border: 2px solid var(--md-warning);
  color: var(--md-ink-deep);
}
.btn-outline-warning:hover {
  background-color: var(--md-warning);
  color: var(--md-ink-deep);
}
.btn-outline-info {
  background-color: transparent;
  border: 2px solid var(--md-cobalt);
  color: var(--md-cobalt);
}
.btn-outline-info:hover {
  background-color: var(--md-cobalt);
  color: #fff;
}

/* ---------- E. Cards ---------- */
.card {
  border-radius: var(--md-radius-xl);
  border: 1px solid var(--md-hairline-soft);
  box-shadow: none;
  background-color: var(--md-canvas);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--md-hairline-soft);
  padding: 16px 20px;
}
.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--md-hairline-soft);
  padding: 16px 20px;
}
.card-body {
  padding: 20px;
}

/* ---------- F. Forms ---------- */
.form-control,
.form-select {
  height: 44px;
  padding: 10px 14px;
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-hairline);
  background-color: var(--md-canvas);
  color: var(--md-ink);
  font-size: 14px;
  letter-spacing: -0.14px;
  line-height: 22px;
}
textarea.form-control {
  height: auto;
  min-height: 88px;
}
.form-control:focus,
.form-select:focus {
  outline: 0;
  border-color: var(--md-fb-blue);
  box-shadow: 0 0 0 2px rgba(24, 118, 242, 0.25);
}
.form-control::placeholder {
  color: var(--md-stone);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--md-surface-soft);
  color: var(--md-steel);
}

/* Defeat Chrome/Safari autofill (overrides browser's lavender/yellow inset) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
.form-select:-webkit-autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--md-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--md-canvas) inset;
  box-shadow: 0 0 0 1000px var(--md-canvas) inset;
  border-color: var(--md-hairline);
  caret-color: var(--md-ink);
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus,
.form-control:-webkit-autofill:focus {
  border-color: var(--md-fb-blue);
  box-shadow:
    0 0 0 1000px var(--md-canvas) inset,
    0 0 0 2px rgba(24, 118, 242, 0.25);
  -webkit-box-shadow:
    0 0 0 1000px var(--md-canvas) inset,
    0 0 0 2px rgba(24, 118, 242, 0.25);
}
.form-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.14px;
  color: var(--md-ink-deep);
  margin-bottom: 6px;
}
.form-text {
  color: var(--md-steel);
  font-size: 12px;
  line-height: 16px;
}
.form-check-input {
  border: 1px solid var(--md-hairline);
  border-radius: var(--md-radius-sm);
}
.form-check-input:checked {
  background-color: var(--md-fb-blue);
  border-color: var(--md-fb-blue);
}
.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(24, 118, 242, 0.25);
  border-color: var(--md-fb-blue);
}
.form-switch .form-check-input {
  border-radius: var(--md-radius-pill);
}

/* ---------- G. Badges ---------- */
.badge {
  border-radius: var(--md-radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.1px;
}
.badge.bg-primary {
  background-color: var(--md-cobalt) !important;
  color: #fff;
}
.badge.bg-secondary {
  background-color: var(--md-surface-soft) !important;
  color: var(--md-ink-deep);
}
.badge.bg-success {
  background-color: var(--md-success) !important;
}
.badge.bg-danger {
  background-color: var(--md-critical) !important;
}
.badge.bg-warning {
  background-color: var(--md-warning) !important;
  color: var(--md-ink-deep);
}
.badge.bg-info {
  background-color: var(--md-cobalt) !important;
  color: #fff;
}
.badge.bg-light {
  background-color: var(--md-surface-soft) !important;
  color: var(--md-ink-deep);
}
.badge.bg-dark {
  background-color: var(--md-ink-deep) !important;
  color: #fff;
}

/* ---------- H. Alerts ---------- */
.alert {
  border-radius: var(--md-radius-xl);
  border: 1px solid var(--md-hairline-soft);
  padding: 16px 20px;
}
.alert-success {
  background-color: rgba(49, 162, 76, 0.08);
  border-color: rgba(49, 162, 76, 0.25);
  color: var(--md-ink-deep);
}
.alert-danger {
  background-color: rgba(228, 30, 63, 0.08);
  border-color: rgba(228, 30, 63, 0.25);
  color: var(--md-ink-deep);
}
.alert-warning {
  background-color: rgba(247, 185, 40, 0.1);
  border-color: rgba(247, 185, 40, 0.3);
  color: var(--md-ink-deep);
}
.alert-info {
  background-color: rgba(0, 100, 224, 0.06);
  border-color: rgba(0, 100, 224, 0.25);
  color: var(--md-ink-deep);
}
.alert-primary {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--md-ink-deep);
}

/* ---------- I. Tables ---------- */
.table {
  --gk-table-border-color: var(--md-hairline-soft);
  --gk-table-bg: transparent;
  --gk-table-color: var(--md-ink);
  color: var(--md-ink);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--md-hairline-soft);
  padding: 12px 14px;
}
.table > thead {
  border-bottom: 1px solid var(--md-hairline);
}
.table > thead > tr > th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.13px;
  color: var(--md-ink-deep);
  background-color: transparent;
  text-transform: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --gk-table-bg-type: var(--md-surface-soft);
  background-color: var(--md-surface-soft);
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(241, 244, 247, 0.6);
}

/* ---------- J. Modals ---------- */
.modal-content {
  border-radius: var(--md-radius-xl);
  border: 1px solid var(--md-hairline-soft);
  box-shadow: 0 10px 30px rgba(10, 19, 23, 0.1);
  background-color: var(--md-canvas);
}
.modal-header {
  border-bottom: 1px solid var(--md-hairline-soft);
  padding: 20px 24px;
}
.modal-body {
  padding: 20px 24px;
}
.modal-footer {
  border-top: 1px solid var(--md-hairline-soft);
  padding: 16px 24px;
}

/* ---------- K. Dropdowns ---------- */
.dropdown-menu {
  border-radius: var(--md-radius-xl);
  border: 1px solid var(--md-hairline-soft);
  box-shadow: 0 8px 24px rgba(10, 19, 23, 0.08);
  padding: 8px;
  background-color: var(--md-canvas);
}
.dropdown-item {
  border-radius: var(--md-radius-md);
  padding: 8px 12px;
  font-size: 14px;
  letter-spacing: -0.14px;
  color: var(--md-ink);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--md-surface-soft);
  color: var(--md-ink-deep);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--md-cobalt);
  color: #fff;
}
.dropdown-divider {
  border-top: 1px solid var(--md-hairline-soft);
  margin: 8px 0;
}

/* ---------- L. Top horizontal navbar ---------- */
/* Keep .navbar-vertical dark (Q3) but force all text white + add highlight states */
.navbar:not(.navbar-vertical) {
  background-color: var(--md-canvas);
  border-bottom: 1px solid var(--md-hairline-soft);
}
.navbar:not(.navbar-vertical) .nav-link {
  color: var(--md-ink);
  font-weight: 700;
  letter-spacing: -0.14px;
}
.navbar:not(.navbar-vertical) .nav-link:hover,
.navbar:not(.navbar-vertical) .nav-link:focus {
  color: var(--md-cobalt);
}

/* Vertical sidebar — all text white, hover/active highlight */
.navbar-vertical,
.navbar-vertical .nav-link,
.navbar-vertical .nav-link .nav-icon,
.navbar-vertical .navbar-heading,
.navbar-vertical h1,
.navbar-vertical h2,
.navbar-vertical h3,
.navbar-vertical h4,
.navbar-vertical h5,
.navbar-vertical h6,
.navbar-vertical .navbar-brand,
.navbar-vertical span,
.navbar-vertical .text-muted {
  color: #ffffff !important;
}

.navbar-vertical .navbar-heading {
  /* still white, hierarchy via size/case */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
  padding-left: 12px;
  /* override Bootstrap pt-3 (16px) → 11px = 30% tighter */
  padding-top: 11px !important;
  padding-bottom: 4px;
  margin-bottom: 0;
}

/* Match Geeks-UI's specificity (.navbar-vertical .navbar-nav .nav-item .nav-link)
   so our padding/line-height actually wins. */
.navbar-vertical .navbar-nav .nav-item .nav-link {
  border-radius: var(--md-radius-md);
  padding: 2px 12px;
  margin: 2px 8px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.14px;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

/* Compress Bootstrap utility margins inside the sidebar 30% */
.navbar-vertical .nav-item.mt-1 {
  margin-top: 3px !important;
} /* was 4px */
.navbar-vertical .nav-item.mt-2 {
  margin-top: 6px !important;
} /* was 8px */
.navbar-vertical .nav-item.mt-3 {
  margin-top: 11px !important;
} /* was 16px */
.navbar-vertical .nav-item.mt-4 {
  margin-top: 17px !important;
} /* was 24px */

.navbar-vertical .navbar-nav .nav-item .nav-link:hover,
.navbar-vertical .navbar-nav .nav-item .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active,
.navbar-vertical .navbar-nav .nav-item .nav-link[aria-current="page"] {
  background-color: rgba(0, 100, 224, 0.3);
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--md-cobalt-soft);
}

.navbar-vertical .navbar-nav .nav-item .nav-link.active .nav-icon,
.navbar-vertical .navbar-nav .nav-item .nav-link:hover .nav-icon {
  color: #ffffff !important;
  opacity: 1;
}

/* Top-nav manual shortcut icon — cobalt theme blue with white icon */
.btn-man-shortcut {
  background-color: var(--md-cobalt);
  border-color: var(--md-cobalt);
  color: #ffffff;
}
.btn-man-shortcut:hover,
.btn-man-shortcut:focus,
.btn-man-shortcut:active {
  background-color: var(--md-cobalt-deep);
  border-color: var(--md-cobalt-deep);
  color: #ffffff;
}
.btn-man-shortcut i {
  font-size: 1.6em;
  line-height: 1;
}

/* ---------- L2. Manual app in-flow sidebar (.man-sidebar) ---------- */
.man-sidebar {
  background-color: var(--md-surface-soft);
  border: 1px solid var(--md-hairline-soft);
}

.man-sidebar .man-nav-heading {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--md-steel);
  padding: 0 12px;
  margin-bottom: 4px;
}

.man-sidebar .nav-link {
  color: var(--md-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.14px;
  border-radius: var(--md-radius-md);
  padding: 6px 12px;
  margin: 1px 0;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.man-sidebar .nav-link:hover,
.man-sidebar .nav-link:focus {
  background-color: var(--md-hairline-soft);
  color: var(--md-ink-deep);
}

.man-sidebar .nav-link.active,
.man-sidebar .nav-link[aria-current="page"] {
  background-color: #ffffff;
  color: var(--md-cobalt-deep);
}

/* ---------- M. Pagination ---------- */
.pagination {
  --gk-pagination-border-color: var(--md-hairline-soft);
  --gk-pagination-active-bg: var(--md-ink-button);
  --gk-pagination-active-border-color: var(--md-ink-button);
  --gk-pagination-color: var(--md-ink);
  --gk-pagination-hover-color: var(--md-ink-deep);
  --gk-pagination-hover-bg: var(--md-surface-soft);
}
.page-link {
  border-radius: var(--md-radius-md);
  margin: 0 2px;
}

/* ---------- N. List groups ---------- */
.list-group-item {
  border-color: var(--md-hairline-soft);
  background-color: var(--md-canvas);
  color: var(--md-ink);
  padding: 12px 16px;
}
.list-group-item.active {
  background-color: var(--md-cobalt);
  border-color: var(--md-cobalt);
  color: #fff;
}

/* ---------- O. Breadcrumb ---------- */
.breadcrumb {
  font-size: 14px;
  letter-spacing: -0.14px;
  color: var(--md-steel);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--md-stone);
}
.breadcrumb-item.active {
  color: var(--md-ink);
}

/* ---------- P. Tooltips & popovers ---------- */
.tooltip-inner {
  background-color: var(--md-ink-deep);
  color: #fff;
  border-radius: var(--md-radius-md);
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0;
}
.popover {
  border-radius: var(--md-radius-xl);
  border: 1px solid var(--md-hairline-soft);
  box-shadow: 0 8px 24px rgba(10, 19, 23, 0.08);
}

/* ---------- Q. Focus ring (non-form interactive elements) ---------- */
:focus-visible {
  outline: 2px solid var(--md-cobalt);
  outline-offset: 2px;
}
.btn:focus-visible {
  outline: 2px solid var(--md-cobalt);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- R. Background utility overrides ---------- */
.bg-primary {
  background-color: var(--md-cobalt) !important;
}
.bg-secondary {
  background-color: var(--md-surface-soft) !important;
}
.bg-success {
  background-color: var(--md-success) !important;
}
.bg-danger {
  background-color: var(--md-critical) !important;
}
.bg-warning {
  background-color: var(--md-warning) !important;
}
.bg-info {
  background-color: var(--md-cobalt) !important;
}
.bg-light {
  background-color: var(--md-surface-soft) !important;
}
.bg-dark {
  background-color: var(--md-ink-deep) !important;
}
.bg-white {
  background-color: var(--md-canvas) !important;
}

/* Soft variants used heavily by Geeks-UI */
.bg-primary-soft {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--md-ink-deep) !important;
}
.bg-success-soft {
  background-color: rgba(49, 162, 76, 0.1) !important;
  color: #1f6b32 !important;
}
.bg-danger-soft {
  background-color: rgba(228, 30, 63, 0.1) !important;
  color: #a3142d !important;
}
.bg-warning-soft {
  background-color: rgba(247, 185, 40, 0.15) !important;
  color: #8a630a !important;
}
.bg-info-soft {
  background-color: rgba(0, 100, 224, 0.1) !important;
  color: var(--md-cobalt-deep) !important;
}
.bg-light-soft {
  background-color: var(--md-surface-soft) !important;
  color: var(--md-ink) !important;
}

/* ---------- S. Text color utilities ---------- */
.text-primary {
  color: var(--md-cobalt) !important;
}
.text-success {
  color: var(--md-success) !important;
}
.text-danger {
  color: var(--md-critical) !important;
}
.text-warning {
  color: var(--md-warning) !important;
}
.text-info {
  color: var(--md-cobalt) !important;
}
.text-muted {
  color: var(--md-steel) !important;
}
.text-dark {
  color: var(--md-ink-deep) !important;
}
.text-secondary {
  color: var(--md-steel) !important;
}

/* ---------- T. Border utilities ---------- */
.border {
  border: 1px solid var(--md-hairline-soft) !important;
}
.border-top {
  border-top: 1px solid var(--md-hairline-soft) !important;
}
.border-bottom {
  border-bottom: 1px solid var(--md-hairline-soft) !important;
}
.border-start {
  border-left: 1px solid var(--md-hairline-soft) !important;
}
.border-end {
  border-right: 1px solid var(--md-hairline-soft) !important;
}

.rounded {
  border-radius: var(--md-radius-lg) !important;
}
.rounded-1 {
  border-radius: var(--md-radius-sm) !important;
}
.rounded-2 {
  border-radius: var(--md-radius-md) !important;
}
.rounded-3 {
  border-radius: var(--md-radius-lg) !important;
}
.rounded-4 {
  border-radius: var(--md-radius-xl) !important;
}
.rounded-5 {
  border-radius: var(--md-radius-xxl) !important;
}
.rounded-pill {
  border-radius: var(--md-radius-pill) !important;
}
.rounded-circle {
  border-radius: 50% !important;
}

/* ---------- U. Misc Geeks-UI compensations ---------- */
/* Geeks-UI ships rounded-pill on inputs in some pages — keep our 8px radius */
.form-control.rounded-pill,
input.rounded-pill {
  border-radius: var(--md-radius-lg) !important;
}

/* Print: ensure clean output */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  .btn {
    border-radius: 4px;
  }
}