/*
  DelltonPlus Web — design system (Material + Sneat inspired).
  Foundation tokens (--dp-*) live in the shared UI.Shared RCL (tokens.css) and are
  ALSO consumed by the Mobile app — never edit that file from here. Everything in
  this file is Web-only: it re-themes Bootstrap's own components (via Bootstrap's
  --bs-* custom properties, which its 5.3 utilities/components already read from)
  and adds the shared page-level building blocks (page header, data table, toolbar,
  stat cards, workspace nav, auth screens) that every Web page composes from.
*/

:root {
    /* ---- Web-local aliases onto the shared --dp-* palette (unchanged mechanism) ---- */
    --font-body: "Public Sans", var(--dp-font-body);
    --font-heading: "Public Sans", var(--dp-font-body);
    --bg-canvas: var(--dp-bg-page);
    --bg-surface: var(--dp-bg-surface);
    --bg-surface-strong: var(--dp-bg-card);
    --bg-muted: var(--dp-bg-muted);
    --border-soft: var(--dp-border-light);
    --border-strong: var(--dp-border-color);
    --text-primary: var(--dp-text-primary);
    --text-secondary: var(--dp-text-secondary);
    --text-muted: var(--dp-text-muted);
    --brand-700: var(--dp-brand-active);
    --brand-600: var(--dp-brand);
    --brand-500: var(--dp-brand-hover);
    --brand-400: var(--dp-gold);
    --accent-500: var(--dp-gold);
    --success-500: var(--dp-success);
    --warning-500: var(--dp-warning);
    --danger-500: var(--dp-danger);
    --shadow-soft: var(--dp-shadow-lg);
    --shadow-card: var(--dp-shadow-md);
    --radius-lg: var(--dp-radius-xl);
    --radius-md: var(--dp-radius-lg);
    --radius-sm: var(--dp-radius-md);

    /* ---- Re-theme Bootstrap's own component/utility variables (5.3 reads these
       directly in .bg-*/.text-*/.border-*/.btn-* utilities, so this cascades to
       every page with zero markup changes) ---- */
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--dp-bg-page);
    --bs-body-color: var(--dp-text-primary);
    --bs-border-color: var(--dp-border-color);
    --bs-border-radius: var(--dp-radius-md);
    --bs-border-radius-sm: var(--dp-radius-sm);
    --bs-border-radius-lg: var(--dp-radius-lg);
    --bs-link-color: var(--dp-brand);
    --bs-link-hover-color: var(--dp-brand-active);
    --bs-emphasis-color: var(--dp-text-primary);

    --bs-primary: var(--dp-brand);
    --bs-primary-rgb: var(--dp-brand-rgb);
    --bs-secondary: var(--dp-text-secondary);
    --bs-secondary-rgb: 86, 91, 115;
    --bs-success: var(--dp-success);
    --bs-success-rgb: var(--dp-success-rgb);
    --bs-info: var(--dp-info);
    --bs-info-rgb: var(--dp-info-rgb);
    --bs-warning: #b8860b;
    --bs-warning-rgb: 184, 134, 11;
    --bs-danger: var(--dp-danger);
    --bs-danger-rgb: var(--dp-danger-rgb);
}

:root[data-theme="dark"] {
    --bs-warning: #e8c073;
    --bs-warning-rgb: 232, 192, 115;
}

/* ============ Base ============ */

html, body {
    min-height: 100%;
    font-family: var(--font-body);
    background: var(--bg-canvas);
    color: var(--text-primary);
}

body { margin: 0; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }

.container, .container-fluid { padding-left: 0; padding-right: 0; }

::selection { background: rgba(var(--dp-brand-rgb), 0.22); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--dp-brand-rgb), 0.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--dp-brand-rgb), 0.45); }

/* ============ Cards ============ */

.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body { padding: 1.25rem; }

.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-soft);
    padding: 0.85rem 1.25rem;
}

/* ============ Buttons ============ */

.btn {
    border-radius: var(--dp-radius-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.65rem 1.15rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.btn:hover { transform: translateY(-1px); }
.btn:focus { box-shadow: 0 0 0 0.2rem rgba(var(--dp-brand-rgb), 0.18); }

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border-color: transparent;
    box-shadow: var(--dp-shadow-brand);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
    border-color: transparent;
}

.btn-secondary {
    color: var(--text-primary);
    background: var(--bg-muted);
    border-color: var(--border-strong);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-info,
.btn-outline-warning, .btn-outline-success, .btn-outline-danger {
    background: var(--bg-surface);
}

.btn-outline-primary { color: var(--brand-600); border-color: rgba(var(--dp-brand-rgb), 0.32); }
.btn-outline-primary:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); }

.btn-outline-secondary { color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline-secondary:hover { color: var(--text-primary); background: var(--bg-muted); border-color: var(--border-soft); }

.btn-outline-info { color: var(--dp-info); border-color: rgba(var(--dp-info-rgb), 0.28); }
.btn-outline-info:hover { color: #fff; background: linear-gradient(135deg, var(--dp-info), var(--dp-cyan)); border-color: transparent; }

.btn-outline-warning { color: #8a6414; border-color: rgba(var(--dp-warning-rgb), 0.32); }
.btn-outline-warning:hover { color: #fff; background: linear-gradient(135deg, var(--dp-warning), var(--dp-gold)); border-color: transparent; }

.btn-outline-success { color: var(--success-500); border-color: rgba(var(--dp-success-rgb), 0.28); }
.btn-outline-success:hover { color: #fff; background: linear-gradient(135deg, var(--success-500), #4aa06e); border-color: transparent; }

.btn-outline-danger { color: var(--danger-500); border-color: rgba(var(--dp-danger-rgb), 0.28); }
.btn-outline-danger:hover { color: #fff; background: linear-gradient(135deg, var(--danger-500), #c06a61); border-color: transparent; }

.btn-close { opacity: 0.6; }
.btn-close:hover { opacity: 1; }

/* ============ Forms ============ */

.form-control, .form-select {
    min-height: 2.85rem;
    border-radius: var(--dp-radius-md);
    border-color: var(--border-soft);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.form-control-sm, .form-select-sm { min-height: 2.35rem; border-radius: var(--dp-radius-sm); }

.form-control::placeholder { color: var(--text-muted); }

.form-control:focus, .form-select:focus, .btn:focus,
.btn-link.nav-link:focus, .form-check-input:focus {
    border-color: rgba(var(--dp-brand-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--dp-brand-rgb), 0.15);
}

.form-label { color: var(--text-secondary); font-size: 0.86rem; font-weight: 600; }

.form-check-input { border-color: var(--border-strong); background-color: var(--bg-surface); }
.form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); }
.form-check-input:indeterminate { background-color: var(--brand-600); border-color: var(--brand-600); }

/* ============ Alerts / badges ============ */

.alert { border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.alert-warning { background: rgba(var(--dp-warning-rgb), 0.14); border-color: rgba(var(--dp-warning-rgb), 0.35); color: #8a6414; }
.alert-danger { background: rgba(var(--dp-danger-rgb), 0.12); border-color: rgba(var(--dp-danger-rgb), 0.28); color: var(--danger-500); }
.alert-success { background: rgba(var(--dp-success-rgb), 0.12); border-color: rgba(var(--dp-success-rgb), 0.24); color: var(--success-500); }
.alert-info { background: rgba(var(--dp-info-rgb), 0.12); border-color: rgba(var(--dp-info-rgb), 0.26); color: var(--dp-info); }

.badge {
    border-radius: var(--dp-radius-pill);
    padding: 0.4rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Bootstrap's solid .bg-* pills reinterpreted as soft tinted pills, matching dp-badge-* */
.badge.bg-primary { background: rgba(var(--dp-brand-rgb), 0.14) !important; color: var(--dp-brand) !important; }
.badge.bg-success { background: rgba(var(--dp-success-rgb), 0.14) !important; color: var(--dp-success) !important; }
.badge.bg-info { background: rgba(var(--dp-info-rgb), 0.16) !important; color: var(--dp-info) !important; }
.badge.bg-warning { background: rgba(var(--dp-warning-rgb), 0.18) !important; color: #8a6414 !important; }
.badge.bg-danger { background: rgba(var(--dp-danger-rgb), 0.14) !important; color: var(--dp-danger) !important; }
.badge.bg-secondary { background: var(--bg-muted) !important; color: var(--text-secondary) !important; }
.badge.text-dark { color: #8a6414 !important; }

/* ============ Tables ============ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-soft);
    --bs-table-striped-bg: rgba(var(--dp-brand-rgb), 0.035);
    --bs-table-hover-bg: rgba(var(--dp-brand-rgb), 0.05);
    margin-bottom: 0;
}

.table > thead {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.table > thead > tr > th {
    border-bottom-width: 1px;
    padding: 0.85rem 1rem;
    font-weight: 700;
}

.table > tbody > tr > td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

.table-responsive { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* ============ Dropdown / pagination / nav ============ */

.dropdown-menu {
    border: 1px solid var(--border-soft);
    border-radius: var(--dp-radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 0.5rem;
    background: var(--bg-surface-strong);
}

.dropdown-item { border-radius: var(--dp-radius-sm); padding: 0.55rem 0.75rem; color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--dp-brand-rgb), 0.08); color: var(--brand-600); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-600); color: #fff; }
.dropdown-divider { border-color: var(--border-soft); }

.pagination { --bs-pagination-border-radius: var(--dp-radius-sm); gap: 0.25rem; }
.page-link {
    border-color: var(--border-soft);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: var(--dp-radius-sm) !important;
    margin-left: 0 !important;
}
.page-link:hover { background: rgba(var(--dp-brand-rgb), 0.08); color: var(--brand-600); }
.page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.page-item.disabled .page-link { background: var(--bg-muted); color: var(--dp-text-tertiary); }

.nav-tabs { border-bottom-color: var(--border-soft); gap: 0.25rem; }
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.65rem 1rem;
}
.nav-tabs .nav-link:hover { background: rgba(var(--dp-brand-rgb), 0.06); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--brand-600); background: rgba(var(--dp-brand-rgb), 0.08); border-color: transparent; box-shadow: inset 0 -2px 0 var(--brand-600); }

.nav-pills .nav-link { border-radius: var(--dp-radius-pill); color: var(--text-secondary); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--brand-600); color: #fff; }

/* ============ Misc bootstrap bits ============ */

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand-600) !important; }
.spinner-border.text-primary { color: var(--brand-600) !important; }
.display-4 { letter-spacing: -0.04em; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--dp-success); }
.invalid { outline: 1px solid var(--dp-danger); }
.validation-message { color: var(--danger-500); font-size: 0.82rem; margin-top: 0.35rem; }

.blazor-error-boundary { background: var(--danger-500); padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--radius-md); }
.blazor-error-boundary::after { content: "An error has occurred."; }
.darker-border-checkbox.form-check-input { border-color: var(--border-strong); }

/* ============ Theme / language toggle controls ============ */

.theme-toggle-btn, .icon-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-radius: 999px;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    cursor: pointer;
    transition: var(--dp-transition-fast);
}

.theme-toggle-btn:hover, .icon-toggle-btn:hover { border-color: rgba(var(--dp-brand-rgb), 0.4); color: var(--brand-600); background: rgba(var(--dp-brand-rgb), 0.06); }

/* ============ Page header / breadcrumb pattern ============ */

.page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.35rem;
    border-radius: var(--dp-radius-xl);
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at top right, rgba(var(--dp-brand-rgb), 0.12), transparent 25%),
        var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

.page-eyebrow, .panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--dp-gold);
}

.page-hero h1, .panel-heading h2 { margin: 0.45rem 0 0.55rem; }
.page-hero h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.page-hero p { margin: 0; max-width: 46rem; color: var(--text-secondary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.page-panel {
    padding: 1.4rem;
    margin-bottom: 1rem;
    border-radius: var(--dp-radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--dp-shadow-sm);
}

.panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.panel-heading h2 { font-size: 1.15rem; }

.feedback-panel { display: grid; place-items: center; text-align: center; }
.feedback-panel p { margin: 0.75rem 0 0; color: var(--text-secondary); }

.page-feedback, .page-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.75rem;
    min-height: 14rem;
    padding: 1.4rem;
    border-radius: var(--dp-radius-lg);
    border: 1px dashed var(--border-strong);
    background: var(--bg-muted);
}

.page-feedback p, .page-empty-state p { margin: 0; max-width: 38rem; color: var(--text-secondary); }
.page-feedback .spinner-border { width: 2rem; height: 2rem; }
.page-inline-status { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text-secondary); }

.page-table-wrap {
    border-radius: var(--dp-radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--dp-shadow-sm);
    overflow: hidden;
}

/* ============ Data toolbar (search / filter rows above admin tables) ============ */

.data-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--dp-radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--dp-shadow-sm);
}

.data-toolbar .form-label { margin-bottom: 0.3rem; }

/* ============ Stat tiles (dashboard / settings summaries) ============ */

.stat-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.stat-tile {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--dp-radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-surface-strong);
    box-shadow: var(--dp-shadow-sm);
    position: relative;
    overflow: hidden;
}

.stat-tile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-600), var(--dp-cyan));
}

.stat-tile-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--dp-radius-md);
    background: rgba(var(--dp-brand-rgb), 0.12);
    color: var(--brand-600);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.stat-tile-label { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-tile strong { font-size: 1.35rem; color: var(--text-primary); font-family: var(--font-heading); }
.stat-tile small { color: var(--text-secondary); line-height: 1.4; }

/* ============ Workspace tab nav (Kundali summary/charts/dasha/...) ============ */

.workspace-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem;
    margin-bottom: 1.1rem;
    border-radius: var(--dp-radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    box-shadow: var(--dp-shadow-sm);
}

.workspace-nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--dp-radius-md);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    text-align: left;
    transition: var(--dp-transition-fast);
}

.workspace-nav-item:hover { background: rgba(var(--dp-brand-rgb), 0.06); color: var(--brand-600); }

.workspace-nav-item.active {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    box-shadow: var(--dp-shadow-brand);
}

.workspace-nav-title { font-weight: 700; font-size: 0.86rem; }
.workspace-nav-item small { font-size: 0.68rem; opacity: 0.85; }
.workspace-nav-item.active small { color: rgba(255, 255, 255, 0.85); }

/* ============ Auth screens ============ */

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 0; }

.auth-panel {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 430px);
    gap: 1.5rem;
    align-items: stretch;
}

.auth-intro, .auth-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--dp-radius-xl);
    box-shadow: var(--shadow-soft);
}

.auth-intro {
    padding: 2.4rem;
    background:
        radial-gradient(circle at top right, rgba(var(--dp-brand-rgb), 0.16), transparent 24%),
        var(--bg-surface-strong);
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    background: rgba(var(--dp-brand-rgb), 0.14);
    color: var(--brand-600);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-intro h1 { margin: 1rem 0 1rem; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.02; }
.auth-intro p { margin: 0; max-width: 38rem; color: var(--text-secondary); font-size: 1rem; }

.auth-points { display: grid; gap: 1rem; margin-top: 2rem; }
.auth-points > div { display: grid; gap: 0.25rem; padding: 1rem 1.1rem; border-radius: var(--dp-radius-md); background: var(--bg-surface); border: 1px solid var(--border-soft); }
.auth-points strong { color: var(--text-primary); }
.auth-points span { color: var(--text-secondary); }

.app-download-row { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--border-soft); }
.app-download-caption { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

.android-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1.1rem 0.55rem 0.85rem;
    border-radius: var(--dp-radius-md);
    background: #111318;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: transform 0.15s ease, background 0.15s ease;
}

.android-badge:hover { background: #1b1e26; color: #fff; transform: translateY(-1px); }
.android-badge-icon { flex: none; color: #3ddc84; }
.android-badge-text { display: grid; line-height: 1.15; }
.android-badge-text small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.65); }
.android-badge-text strong { font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; }

.auth-card { padding: 1.7rem; background: var(--bg-surface-strong); }
.auth-card-header { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.35rem; }

.auth-mark {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dp-radius-md);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.auth-card-header h2 { margin: 0; font-size: 1.4rem; }
.auth-card-header p { margin: 0.25rem 0 0; color: var(--text-secondary); }
.auth-footer { display: flex; gap: 0.35rem; justify-content: center; align-items: center; margin-top: 1.2rem; color: var(--text-secondary); font-size: 0.92rem; }

.reconnect-shell { position: fixed; right: 1rem; bottom: 1rem; z-index: 2200; }
.reconnect-banner { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 999px; background: var(--dp-text-inverse); color: var(--dp-bg-page); box-shadow: var(--shadow-soft); }
.reconnect-dot { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: var(--dp-gold); box-shadow: 0 0 0 0.35rem rgba(var(--dp-gold-rgb), 0.2); }
.components-reconnect-hide { display: none; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

.content { padding-top: 1.1rem; }

@media print {
    .sidebar, .top-row, .sidebar-overlay { display: none !important; }
    .page { display: block !important; }
    .btn, .card-header .btn, .alert { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .content { padding: 0 !important; }
}

@media (max-width: 991.98px) {
    .auth-panel { grid-template-columns: 1fr; }
    .auth-intro { display: none; }
    .page-hero, .panel-heading { flex-direction: column; align-items: stretch; }
    .stat-tile-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}