/* Shared visual language. Bootstrap remains the layout / behaviour layer. */
/* 1. Tokens and application shell */
:root, [data-bs-theme="dark"] {
  --river-bg: #0c1215;
  --river-panel: #131c20;
  --river-panel-2: #19262b;
  --river-border: #2a383d;
  --river-muted: #95a8ad;
  --river-accent: #79dec2;
  --river-sidebar: 244px;
  --ui-radius: 14px;
  --bs-body-bg: var(--river-bg);
  --bs-body-color: #e6efed;
  --bs-secondary-color: var(--river-muted);
  --bs-border-color: var(--river-border);
  --bs-link-color: #8ce5cc;
  --bs-link-color-rgb: 140, 229, 204;
  --bs-link-hover-color: #b8f2e2;
  --bs-link-hover-color-rgb: 184, 242, 226;
  --bs-success-rgb: 121, 222, 194;
  --bs-info-rgb: 134, 190, 236;
  --bs-danger-rgb: 243, 142, 146;
}
body { font-size: .925rem; line-height: 1.55; }
.app-container { max-width: 1600px; margin-inline: auto; padding: 1.8rem 2rem 3rem; }
.app-sidebar, .app-mobile-nav { background: #10191d; }
.app-sidebar { overflow-y: auto; }
.app-brand { font-size: .96rem; min-height: 80px; }
.app-brand-mark, .auth-logo { background: #79dec2; color: #10231d; box-shadow: none; }
.app-nav .nav-link { font-size: .88rem; padding: .66rem .95rem; border-radius: 9px; }
.app-nav .nav-link:hover { background: #19272c; color: #e3eeeb; }
.app-nav .nav-link.active { background: rgba(121,222,194,.09); color: #a8edd9; }
.offcanvas.text-bg-dark { background: #10191d !important; }
.nav-last-login { padding-top: .9rem; }
.app-brand-mark { border-radius: 10px; flex-shrink: 0; }

/* 2. Typography, surfaces, headings, empty states */
.page-header { align-items: flex-start; margin-bottom: 1.6rem; }
.page-header > div { min-width: 0; }
.page-header h1 { font-size: clamp(1.6rem, 2.1vw, 2.1rem); font-weight: 680; letter-spacing: -.035em; overflow-wrap: anywhere; line-height: 1.2; }
.page-subtitle { color: var(--river-muted); margin: .65rem 0 0; font-size: .9rem; }
.eyebrow { font-size: .66rem; letter-spacing: .13em; margin-bottom: .4rem; }
.app-card, .auth-card { border-radius: var(--ui-radius); box-shadow: none; }
.app-card > .card-body { padding: 1.4rem; }
.card-header, .card-footer { border-color: var(--river-border); }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-heading h2 { font-size: 1.12rem; margin: 0; font-weight: 650; letter-spacing: -.02em; }
h2.h4 { font-size: 1.2rem; }
.h5 { font-size: 1.08rem; }
.empty-state h3, .health-success h3 { font-size: 1.05rem; font-weight: 600; }
.empty-state p { color: var(--river-muted); font-size: .88rem; }
.empty-mark { border-color: var(--river-border); width: 44px; height: 44px; border-radius: 12px; }
.metric-card .card-body { min-height: 116px; gap: .8rem; padding: 1.15rem; }
.metric-card span { font-size: .8rem; }
.metric-card strong { font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 1.6vw, 1.9rem); overflow-wrap: anywhere; }
.metric-card strong, .compact-stats strong { display: block; white-space: nowrap; font-size: var(--fit-font, 1.5rem) !important; max-width: 100%; }
.system-tile { background: #172226; min-height: 85px; border-left-width: 2px; padding: .85rem; }
.system-tile span { font-size: .75rem; }
.system-tile strong { font-size: .96rem; font-variant-numeric: tabular-nums; }
.auth-shell { background: var(--river-bg); }
.auth-card { border: 1px solid var(--river-border) !important; background: var(--river-panel); }

/* 3. Form / filter controls and action semantics */
.form-label { font-size: .8rem; color: #bacbc9; font-weight: 550; margin-bottom: .45rem; }
.form-control, .form-select, .input-group-text { border-color: #34464c; border-radius: 9px; background-color: #101a1f; color: #e3eeeb; min-width: 0; }
.form-control, .form-select { padding-block: .6rem; }
.form-control::placeholder { color: #748b92; }
.form-control:focus, .form-select:focus { background-color: #142027; color: #e3eeeb; border-color: var(--river-accent); box-shadow: 0 0 0 3px rgba(121,222,194,.13); }
.form-control:disabled, .form-control[readonly] { background: #19242a; color: #95a8ad; }
.form-text { color: var(--river-muted); font-size: .76rem; overflow-wrap: anywhere; }
.form-check-input:checked { background-color: #64cdb0; border-color: #64cdb0; }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(121,222,194,.16); }
.btn { border-radius: 9px; padding: .55rem .85rem; font-weight: 550; font-size: .85rem; }
.btn-sm { font-size: .76rem; padding: .35rem .65rem; }
.btn-primary { --bs-btn-color: #10251e; --bs-btn-bg: #79dec2; --bs-btn-border-color: #79dec2; --bs-btn-hover-color: #10251e; --bs-btn-hover-bg: #9be9d2; --bs-btn-hover-border-color: #9be9d2; --bs-btn-active-bg: #67cfb1; --bs-btn-active-border-color: #67cfb1; --bs-btn-active-color: #10251e; --bs-btn-disabled-bg: #79dec2; --bs-btn-disabled-border-color: #79dec2; --bs-btn-disabled-color: #10251e; }
.btn-outline-light, .btn-outline-secondary { --bs-btn-color: #c1d0cd; --bs-btn-border-color: #42565c; --bs-btn-hover-color: #ecf5f2; --bs-btn-hover-bg: #22343a; --bs-btn-hover-border-color: #628078; --bs-btn-active-bg: #22343a; --bs-btn-active-border-color: #628078; }
.btn-outline-primary { --bs-btn-color: #79dec2; --bs-btn-border-color: #458f7d; --bs-btn-hover-bg: #213d34; --bs-btn-hover-border-color: #79dec2; }
.btn-danger { --bs-btn-bg: #ad414c; --bs-btn-border-color: #ad414c; --bs-btn-hover-bg: #c65460; --bs-btn-hover-border-color: #c65460; }
.btn-outline-danger { --bs-btn-color: #f38e92; --bs-btn-border-color: #964b55; --bs-btn-hover-bg: #7e3440; --bs-btn-hover-border-color: #b9606d; }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--river-accent); outline-offset: 3px; }
.input-group > .btn { white-space: nowrap; }
.dropdown-menu { --bs-dropdown-bg: #1a282d; --bs-dropdown-border-color: var(--river-border); --bs-dropdown-link-hover-bg: #263b40; border-radius: 10px; padding: .5rem; }
.dropdown-item { font-size: .84rem; border-radius: 6px; }
.modal-content { background: var(--river-panel); border: 1px solid var(--river-border); border-radius: var(--ui-radius); }
.modal-header, .modal-footer { border-color: var(--river-border); }

/* 4. Data tables, status pills, notices and pagination */
.table-dark { --bs-table-bg: transparent; --bs-table-color: #dde8e5; --bs-table-border-color: #2a383d; --bs-table-hover-bg: #1b292f; }
.table thead th { background: #172329; color: #91abae; font-size: .69rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; padding: .9rem 1rem; vertical-align: middle; }
.table td { padding: .85rem 1rem; font-size: .84rem; font-variant-numeric: tabular-nums; vertical-align: middle; }
.table tbody tr:hover { background: #18262a; }
.table a { text-decoration: none; font-weight: 550; }
.table .club-url { display: block; margin-top: .2rem; }
.table-responsive { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
.table-responsive:focus-visible { outline: 2px solid var(--river-accent); outline-offset: -2px; }
.status-badge { font-size: .68rem; font-weight: 600; line-height: 1.4; padding: .25rem .6rem; white-space: normal; overflow-wrap: anywhere; }
.alert { border-radius: 10px; font-size: .85rem; border-width: 1px; padding: .9rem 1rem; overflow-wrap: anywhere; }
.alert-success { color: #a3e8d2; background: #162b26; border-color: #315247; }
.alert-warning { color: #e9cf99; background: #2d291e; border-color: #574a30; }
.alert-danger { color: #f0b2b7; background: #2e1f25; border-color: #61404a; }
.alert-info { color: #b4d4e8; background: #1a2933; border-color: #354e60; }
.alert-secondary { background: #1a282d; border-color: var(--river-border); }
.pagination-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding: 1rem; color: var(--river-muted); font-size: .8rem; border-top: 1px solid var(--river-border); }
.chart-frame { position: relative; height: 300px; min-width: 0; }
.chart-canvas { height: 240px; }
.chart-empty { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-tabs a { font-size: .8rem; text-decoration: none; color: #bbcfcb; padding: .45rem .75rem; border: 1px solid var(--river-border); border-radius: 8px; }
.section-tabs a:hover { border-color: #79dec2; background: #172e28; }
.admin-disclosure > summary { cursor: pointer; list-style-position: inside; padding: 1rem 1.2rem; color: #b8cecb; font-size: .9rem; font-weight: 600; background: var(--river-panel); border: 1px solid var(--river-border); border-radius: var(--ui-radius); margin-bottom: 1rem; }

/* 5. Narrow screens: wrapping inside surfaces, scrolling inside tables only */
@media (max-width: 991.98px) {
  .app-container { padding: 1.3rem 1rem 2rem; }
  .app-nav { min-height: 0; height: 100%; }
  .offcanvas-body { display: flex; flex-direction: column; }
  .app-mobile-nav .navbar-brand { font-size: .96rem; }
}
@media (max-width: 575.98px) {
  .app-card > .card-body { padding: 1.1rem; }
  .page-header h1 { font-size: 1.65rem; }
  .page-header { gap: .85rem; }
  .form-control, .form-select { font-size: 16px; }
  .metric-card strong.fs-4 { font-size: var(--fit-font, 1.08rem) !important; }
  .metric-card .card-body { min-height: 104px; padding: 1rem; }
  .card-body.p-4 { padding: 1.1rem !important; }
  .chart-frame { height: 260px; }
  .status-badge { max-width: 100%; }
  .section-tabs { gap: .4rem; }
  .section-tabs a { padding: .45rem .55rem; font-size: .76rem; }
  .health-issues, .credentials-list, .profile-list { overflow-wrap: anywhere; }
  .pagination-toolbar { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-running, .update-running, .provision-running { animation: none; }
}