:root {
    --client-primary: #1f3347;
    --client-secondary: #3a5a78;
    --client-accent: #ffb612;
    --client-bg: #f8fafc;
    --client-surface: #ffffff;
    --client-text: #1e293b;
    --client-muted: #64748b;
    --client-border: #e2e8f0;
    --client-radius-sm: 8px;
    --client-radius-md: 12px;
    --client-radius-lg: 16px;
    --client-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --client-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.12);
    --client-focus: rgba(58, 90, 120, 0.18);
}

body {
    color: var(--client-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: transparent;
}

.btn-primary,
.client-btn-primary {
    background: linear-gradient(135deg, var(--client-primary), var(--client-secondary));
    border-color: transparent;
    border-radius: var(--client-radius-sm);
    box-shadow: var(--client-shadow-sm);
    font-weight: 600;
}

.btn-brand {
    background: linear-gradient(135deg, var(--client-primary), var(--client-secondary));
    border-color: transparent;
    border-radius: var(--client-radius-sm);
    box-shadow: var(--client-shadow-sm);
    color: #fff;
    font-weight: 700;
}

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

/* ── JunoAMS accent button — CTA on any page; background tracks --client-accent ── */
.btn-junoams {
    width: 100%;
    padding: 0.85rem;
    background: var(--client-accent);
    color: var(--client-primary);
    font-weight: 700;
    font-size: 0.95rem;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-junoams:hover  {
    background: color-mix(in srgb, var(--client-accent) 82%, #000);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--client-accent) 35%, transparent);
    color: var(--client-primary);
}
.btn-junoams:active { transform: scale(0.98); }
.btn-junoams:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--client-accent) 50%, transparent);
    outline-offset: 2px;
}
.btn-junoams .btn-text,
.btn-junoams .btn-loader { color: var(--client-primary); display: flex; align-items: center; gap: 0.5rem; }
.btn-junoams .btn-loader.d-none,
.btn-junoams .btn-text.d-none { display: none !important; }

.btn-primary:hover,
.btn-primary:focus,
.client-btn-primary:hover,
.client-btn-primary:focus {
    background: linear-gradient(135deg, var(--client-secondary), var(--client-primary));
    border-color: transparent;
}

.btn-outline-primary,
.client-btn-outline {
    border-color: color-mix(in srgb, var(--client-primary) 25%, var(--client-border));
    border-radius: var(--client-radius-sm);
    color: var(--client-primary);
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.client-btn-outline:hover,
.client-btn-outline:focus {
    background: color-mix(in srgb, var(--client-primary) 8%, white);
    border-color: var(--client-primary);
    color: var(--client-primary);
}

.form-control,
.form-select,
.client-input,
.client-select,
.client-textarea {
    border: 1px solid color-mix(in srgb, var(--client-border) 88%, var(--client-primary));
    border-radius: var(--client-radius-sm);
    box-shadow: none;
    color: var(--client-text);
}

.form-control-custom {
    border: 1px solid color-mix(in srgb, var(--client-border) 88%, var(--client-primary));
    border-radius: var(--client-radius-sm);
    color: var(--client-text);
}

.form-control:focus,
.form-select:focus,
.client-input:focus,
.client-select:focus,
.client-textarea:focus {
    border-color: var(--client-secondary);
    box-shadow: 0 0 0 0.22rem var(--client-focus);
}

.alert {
    border-radius: var(--client-radius-sm);
}

.client-card {
    background: var(--client-surface);
    border: 1px solid color-mix(in srgb, var(--client-border) 88%, var(--client-primary));
    border-radius: var(--client-radius-md);
    box-shadow: var(--client-shadow-sm);
}

.client-empty-state {
    align-items: center;
    background: color-mix(in srgb, var(--client-bg) 92%, white);
    border: 1px dashed color-mix(in srgb, var(--client-border) 70%, var(--client-primary));
    border-radius: var(--client-radius-md);
    color: var(--client-muted);
    display: flex;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    text-align: center;
}

/* ══ Global auto-responsive Bootstrap grid ════════════════════════════════
   Loaded by every page (auth + layout). Bootstrap col-xl-* / col-lg-* only
   apply at their own breakpoint and above. Without a smaller companion class
   elements sit side-by-side even on 375px. These rules fix every current and
   future page automatically — no .cshtml edits ever required.
   ═════════════════════════════════════════════════════════════════════════ */

/* xl-only columns → full-width below 1200px */
@media (max-width: 1199.98px) {
    .row > [class*="col-xl-"]:not([class*="col-lg-"]):not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* lg-only columns → full-width below 992px */
@media (max-width: 991.98px) {
    .row > [class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Form label alignment — right-aligned md labels stack left on mobile */
@media (max-width: 767.98px) {
    .row > [class*="col-md-"].text-end {
        text-align: start !important;
    }
}