/* ========================================
   1. LOCAL FONTS DECLARATION
   ======================================== */

/* Lato Font Family */
@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato/lato-v24-latin-regular.woff2') format('woff2'), url('/fonts/lato/lato-v24-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/fonts/lato/lato-v24-latin-700.woff2') format('woff2'), url('/fonts/lato/lato-v24-latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Font Family */
@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/noto-sans-v38-latin-300.woff2') format('woff2'), url('/fonts/noto-sans/noto-sans-v38-latin-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/noto-sans-v38-latin-regular.woff2') format('woff2'), url('/fonts/noto-sans/noto-sans-v38-latin-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/noto-sans-v38-latin-500.woff2') format('woff2'), url('/fonts/noto-sans/noto-sans-v38-latin-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/noto-sans-v38-latin-600.woff2') format('woff2'), url('/fonts/noto-sans/noto-sans-v38-latin-600.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans/noto-sans-v38-latin-700.woff2') format('woff2'), url('/fonts/noto-sans/noto-sans-v38-latin-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   2. CSS VARIABLES - BRAND COLORS
   ======================================== */
:root {
    /* Primary Brand Colors */
    --ret-primary: #A71D2A;
    --ret-primary-dark: #8B1823;
    --ret-primary-light: #C42A39;
    /* Secondary Colors */
    --ret-secondary: #2C3E50;
    --ret-accent-blue: #339AF0;
    --ret-accent-gold: #F59F00;
    /* Status Colors */
    --ret-success: #51CF66;
    --ret-warning: #FAB005;
    --ret-danger: #FA5252;
    --ret-info: #339AF0;
    /* Neutral Colors */
    --ret-text-primary: #212529;
    --ret-text-secondary: #6C757D;
    --ret-text-muted: #ADB5BD;
    --ret-bg-light: #F8F9FA;
    --ret-bg-white: #FFFFFF;
    --ret-border: #DEE2E6;
    /* Fonts */
    --ret-font-heading: 'Noto Sans', sans-serif;
    --ret-font-body: 'Lato', sans-serif;
    /* Spacing */
    --ret-spacing-xs: 0.25rem;
    --ret-spacing-sm: 0.5rem;
    --ret-spacing-md: 1rem;
    --ret-spacing-lg: 1.5rem;
    --ret-spacing-xl: 2rem;
    /* Border Radius */
    --ret-radius-sm: 4px;
    --ret-radius-md: 8px;
    --ret-radius-lg: 12px;
    /* Shadows */
    --ret-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --ret-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ret-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ========================================
   3. BASE TYPOGRAPHY
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ret-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ret-text-primary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ret-font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--ret-spacing-md);
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 2rem;
}

h3, .h3 {
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 1.5rem;
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

/* Font Awesome duotone icon spacing (between icon and adjacent text).
   Portal delta vs Identity's copy: also matches .fa-duotone — this app is on
   FA Pro 7, where the fad shorthand is deprecated (RET icon style guide S21). */
.fad,
.fa-duotone {
    margin-right: 0.35em;
}

/* Reset icon margin for standalone/centred icons (no adjacent text) */
.card-icon-lg,
.card-icon-xl,
.access-denied-icon,
.stats-icon,
.empty-state-icon,
.text-center > .fad:only-child,
.text-center > .fa-duotone:only-child,
.theme-option-btn > .fad,
.theme-option-btn > .fa-duotone {
    margin-right: 0;
}

/* ========================================
   4. BUTTON STYLES
   ======================================== */

/* PRIMARY CTA - Main actions */
.btn-primary,
.btn-ret-primary {
    background-color: var(--ret-accent-blue);
    border-color: var(--ret-accent-blue);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--ret-radius-sm);
    transition: all 0.3s ease;
}

    .btn-primary:hover,
    .btn-ret-primary:hover {
        background-color: #228BE6;
        border-color: #228BE6;
        transform: translateY(-1px);
        box-shadow: var(--ret-shadow-sm);
    }

    .btn-primary:active,
    .btn-ret-primary:active {
        background-color: #1C7ED6;
        border-color: #1C7ED6;
    }

/* PRIMARY OUTLINE - matches custom btn-primary color */
.btn-outline-primary {
    color: var(--ret-accent-blue);
    border-color: var(--ret-accent-blue);
    background-color: transparent;
}

    .btn-outline-primary:hover {
        background-color: var(--ret-accent-blue);
        border-color: var(--ret-accent-blue);
        color: white;
    }

    .btn-outline-primary:active {
        background-color: #1C7ED6;
        border-color: #1C7ED6;
        color: white;
    }

/* SECONDARY ACTION */
.btn-secondary,
.btn-ret-secondary {
    background-color: var(--ret-bg-light);
    border-color: var(--ret-border);
    color: var(--ret-text-primary);
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--ret-radius-sm);
    transition: all 0.3s ease;
}

    .btn-secondary:hover,
    .btn-ret-secondary:hover {
        background-color: #E9ECEF;
        border-color: #ADB5BD;
    }

/* WARNING ACTIONS - Reset Password, etc. */
.btn-warning,
.btn-ret-warning {
    background-color: var(--ret-warning);
    border-color: var(--ret-warning);
    color: var(--ret-text-primary);
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--ret-radius-sm);
    transition: all 0.3s ease;
}

    .btn-warning:hover,
    .btn-ret-warning:hover {
        background-color: #F59F00;
        border-color: #F59F00;
        transform: translateY(-1px);
        box-shadow: var(--ret-shadow-sm);
    }

    .btn-warning:active,
    .btn-ret-warning:active {
        background-color: #F08C00;
        border-color: #F08C00;
    }

/* DESTRUCTIVE ACTIONS */
.btn-danger,
.btn-ret-danger {
    background-color: var(--ret-danger);
    border-color: var(--ret-danger);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--ret-radius-sm);
    transition: all 0.3s ease;
}

    .btn-danger:hover,
    .btn-ret-danger:hover {
        background-color: #F03E3E;
        border-color: #F03E3E;
        transform: translateY(-1px);
        box-shadow: var(--ret-shadow-sm);
    }

/* ========================================
   5. BADGE STYLES
   ======================================== */

/* Role Badges */
.badge-retstaff {
    background-color: var(--ret-primary);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

.badge-admin {
    background-color: var(--ret-accent-gold);
    color: var(--ret-text-primary);
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

.badge-standarduser {
    background-color: var(--ret-secondary);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

/* Status Badges */
.badge-active {
    background-color: var(--ret-success);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

.badge-inactive {
    background-color: var(--ret-text-muted);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

/* Subscription Badges */
.badge-enterprise {
    background-color: var(--ret-success);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

.badge-freetrial {
    background-color: var(--ret-info);
    color: white;
    font-family: var(--ret-font-heading);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--ret-radius-sm);
}

/* ========================================
   6. LOGIN PAGE STYLES
   ======================================== */

/* Header logo */
.login-page-header-logo {
    height: 28px;
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Full-width header at the top - NO PADDING */
.login-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--ret-primary);
    color: white;
    text-align: center;
    padding: 0.65rem 0 !important; /* Vertical padding only, no horizontal */
    margin: 0 !important;
    font-family: var(--ret-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Page background with brighter colors */
.login-page {
    min-height: 100vh;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/img/bg/identity-provider-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 56px; /* Space for fixed header */
}

    /* Lighter overlay for brighter background */
    .login-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.25); /* Reduced opacity for brighter look */
        z-index: 1;
    }

.login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 0 1rem;
}

/* Narrower login card */
.login-card {
    background: white;
    border-radius: var(--ret-radius-lg);
    box-shadow: var(--ret-shadow-lg);
    padding: var(--ret-spacing-xl);
    width: 100%;
    overflow: hidden;
}

/* Title at the top on white background - CENTER ALIGNED */
.login-title {
    font-family: var(--ret-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    color: var(--ret-text-primary);
}

/* Login title subtitle */
.login-title-sub {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ret-text-secondary);
    margin-top: 0.25rem;
}

/* Logo styling */
.login-logo {
    max-width: 120px;
    height: auto;
    margin: 0 auto var(--ret-spacing-lg);
    display: block;
}

/* Smaller text for Remember me and Forgot password */
.login-small-text {
    font-size: 0.875rem !important;
}

/* Field labels - not bold, display as block */
.login-card .login-field-label {
    font-weight: 400 !important; /* Override default bold weight */
    display: block !important; /* Ensure label is on separate line */
    margin-bottom: 0.35rem !important; /* Reduced spacing between label and input */
}

/* Input fields - full width, centered */
.login-card .form-control {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Spacing between form groups */
.login-card .mb-3 {
    margin-bottom: 0.5rem !important; /* Reduced space - tight spacing */
}

    /* Last form field - no bottom margin */
    .login-card .mb-3:last-of-type {
        margin-bottom: 0 !important; /* No space after password field */
    }

/* Remember me and Forgot password on same line */
.login-card .remember-forgot-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0.35rem !important; /* Minimal space from password field */
    margin-bottom: 5rem !important; /* Increased space before Continue button */
    width: 100% !important;
    padding: 0 !important;
}

/* Form check styles */
.login-card .form-check {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
}

.login-card .form-check-input {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.login-card .form-check-label {
    margin-bottom: 0 !important;
}

/* Continue button - FULL WIDTH */
.login-card .d-grid {
    display: grid !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Two stacked full-width actions - "Copy all codes" above "I've saved these"
   on the recovery-codes page - would otherwise sit flush against each other.
   The rule above zeroes margins with !important so it can force the single
   primary button full-width, and it therefore also swallows any mb-* or mt-*
   utility placed on one of these wrappers, silently. Opting in by class beats
   it at the point of the conflict rather than weakening the original rule. */
.login-card .d-grid.login-card-action-gap {
    margin-top: 0.75rem !important;
}

.login-card .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important; /* Center the button */
    box-sizing: border-box !important;
}

/* Forgot password link without underline */
.login-link {
    color: var(--ret-accent-blue) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    white-space: nowrap;
}

    .login-link:hover {
        color: #228BE6 !important;
        text-decoration: none !important;
    }

/* Simplified footer */
.login-footer {
    text-align: center;
    margin-top: var(--ret-spacing-md);
}

.login-footer-text {
    color: var(--ret-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* 2FA specific styles */
.twofa-help-section {
    margin-top: var(--ret-spacing-md);
}

.twofa-help-title {
    font-family: var(--ret-font-heading);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ret-text-primary);
    margin-bottom: 0.5rem;
}

.twofa-help-list {
    font-size: 0.8rem;
    color: var(--ret-text-secondary);
    margin-bottom: 0;
    padding-left: 1.25rem;
}

    .twofa-help-list li {
        margin-bottom: 0.25rem;
    }

/* Access Denied page */
.access-denied-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    padding: 0 1rem;
}

.access-denied-card {
    background: white;
    border-radius: var(--ret-radius-lg);
    box-shadow: var(--ret-shadow-lg);
    padding: var(--ret-spacing-xl);
    width: 100%;
}

.access-denied-icon {
    font-size: 4rem;
    color: var(--ret-danger);
    margin-bottom: 1.5rem;
}

.access-denied-title {
    font-family: var(--ret-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--ret-text-primary);
}

.access-denied-subtitle {
    text-align: center;
    color: var(--ret-text-secondary);
    margin-bottom: 1.5rem;
}

.access-denied-info {
    background-color: #E3F2FD;
    border-left: 4px solid var(--ret-info);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--ret-radius-sm);
}

    .access-denied-info small {
        font-size: 0.85rem;
        line-height: 1.6;
    }

.access-denied-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.access-denied-footer {
    text-align: center;
    margin-top: var(--ret-spacing-md);
    font-size: 0.8rem;
    color: var(--ret-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-card {
        margin: var(--ret-spacing-md);
        padding: var(--ret-spacing-lg);
    }

    .login-page-header {
        font-size: 1.1rem;
        padding: 0.5rem 0 !important;
    }

    .login-title {
        font-size: 1.25rem;
    }

    .login-container {
        padding: 0 0.5rem;
    }

    .access-denied-container {
        padding: 0 0.5rem;
    }

    .access-denied-card {
        padding: var(--ret-spacing-lg);
    }

}

/* Fix for button links - remove underline and center text */
.btn.btn-secondary,
.btn.btn-primary,
.btn-ret-secondary,
.btn-ret-primary {
    text-decoration: none !important;
    text-align: center;
    display: inline-block;
}

.btn.btn-secondary:hover,
.btn.btn-primary:hover {
    text-decoration: none !important;
}

/* ========================================
   7. ADMIN LAYOUT STYLES
   ======================================== */

/* Admin page background */
html,
body.admin-body {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

/* Admin header/navbar */
.admin-header {
    background-color: var(--ret-primary);
    color: white;
    padding: var(--ret-spacing-md) var(--ret-spacing-lg);
    box-shadow: var(--ret-shadow-md);
}

    .admin-header .navbar-brand {
        color: white;
        font-family: var(--ret-font-heading);
        font-weight: 700;
        font-size: 1.25rem;
    }

    .admin-header .nav-link {
        color: white;
        transition: color 0.3s ease;
    }

        .admin-header .nav-link:hover {
            color: white;
        }

/* Admin navbar - no borders or gaps */
.navbar.admin-navbar {
    background-color: var(--ret-primary);
    color: white;
    height: 56px;
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

    .navbar.admin-navbar .container-fluid {
        border: none;
        margin: 0;
        padding: 0;
    }

.navbar-brand img {
    height: 30px;
    width: auto;
}

/* Admin username - white color */
.admin-navbar .admin-username {
    color: white;
}

/* Admin logout button - gray transparent */
.admin-navbar .admin-logout-btn {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

    .admin-navbar .admin-logout-btn:hover {
        color: white;
    }

/* Sidebar */
.admin-sidebar {
    background-color: var(--ret-primary);
    border-right: none;
    min-height: calc(100vh - 56px);
}

nav.sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
    box-shadow: none;
    width: 250px;
    background-color: var(--ret-primary);
}

.sidebar-sticky {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    padding-top: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}

nav.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1.25rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    font-family: var(--ret-font-body);
}

    nav.sidebar .nav-link:hover {
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
    }

    nav.sidebar .nav-link.active {
        background-color: rgba(255, 255, 255, 0.15);
        border-left-color: white;
        color: white;
        font-weight: 600;
    }

    nav.sidebar .nav-link i {
        margin-right: 0.5rem;
        width: 20px;
        text-align: center;
    }

.sidebar-heading {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Main content area */
main.main-content {
    margin-left: 250px;
    padding: 20px;
    padding-top: 96px;
    background-color: #F5F5F5;
    min-height: calc(100vh - 56px);
}

/* Remove any white gaps or borders - only for admin pages */
body.admin-body .container-fluid {
    padding: 0;
    margin: 0;
}

body.admin-body .row {
    margin: 0;
}

/* Restore Bootstrap's default row gutters inside cards so col-* fields
   align with full-width fields above/below them (e.g. FirstName/LastName
   row matches the Email input width on the user create form). */
body.admin-body .card-body .row {
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* Admin navbar brand - fixed width to match sidebar */
.admin-navbar-brand {
    width: 250px;
    flex-shrink: 0;
}

/* Admin main content area - positioned next to fixed sidebar */
body.admin-body main.admin-main {
    margin-left: 250px;
    padding-top: 5rem;
    width: calc(100% - 250px);
    overflow-x: auto;
}

/* Mobile: full width when sidebar is collapsed */
@media (max-width: 767.98px) {
    body.admin-body main.admin-main {
        margin-left: 0;
    }

    .admin-navbar-brand {
        width: auto;
    }
}

/* Statistics Cards */
.stats-card {
    border: none;
    box-shadow: var(--ret-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ret-shadow-md);
    }

.stats-number {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--ret-font-heading);
    color: var(--ret-text-primary);
}

.stats-icon {
    font-size: 2rem;
}

/* Dashboard time badge */
.dashboard-time-badge {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Mobile logout button in sidebar */
.mobile-logout-btn {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.75rem 1.25rem;
}

    .mobile-logout-btn:hover {
        color: white;
        background-color: rgba(0, 0, 0, 0.1);
    }

/* ========================================
   TABLE STYLES FOR ADMIN PAGES
   ======================================== */

/* Role text colors - no badges */
.role-retstaff {
    color: var(--ret-primary);
    font-weight: 600;
}

.role-admin {
    color: var(--ret-accent-gold);
    font-weight: 600;
}

.role-standarduser {
    color: var(--ret-text-secondary);
    font-weight: 600;
}

.role-norole {
    color: var(--ret-text-muted);
    font-weight: 400;
}

/* Status text colors */
.status-active {
    color: var(--ret-success);
    font-weight: 600;
}

.status-inactive {
    color: var(--ret-danger);
    font-weight: 600;
}

/* Subscription tier text colors */
.subscription-enterprise {
    color: var(--ret-success);
    font-weight: 600;
}

.subscription-professional {
    color: var(--ret-accent-blue);
    font-weight: 600;
}

.subscription-basic {
    color: var(--ret-text-secondary);
    font-weight: 600;
}

/* Organization code styling */
.org-code {
    color: var(--ret-text-secondary);
    font-family: monospace;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--ret-bg-light);
    padding: 0.25rem 0.5rem;
    border-radius: var(--ret-radius-sm);
}

/* 2FA indicator */
.tfa-indicator {
    color: var(--ret-info);
    font-weight: 600;
}

/* ========================================
   RESPONSIVE DESIGN FOR MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Hide sidebar by default on mobile */
    nav.sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

        nav.sidebar.show {
            transform: translateX(0);
        }

    /* Main content full width on mobile */
    main.main-content {
        margin-left: 0;
        padding: 15px;
        padding-top: 70px;
    }

    /* Navbar adjustments for mobile */
    .navbar.admin-navbar {
        height: auto;
        min-height: 56px;
    }

        .navbar.admin-navbar .navbar-brand {
            font-size: 1rem;
        }

    .navbar-brand img {
        height: 24px;
    }

    /* Stack user info and buttons vertically on very small screens */
    .admin-navbar .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0.5rem 0;
    }

    .admin-navbar .nav-item {
        width: 100%;
        margin: 0.25rem 0;
    }

    /* Make buttons full width on mobile */
    .admin-logout-btn {
        display: block;
        width: 100%;
        text-align: left;
    }

    /* Adjust navbar toggler position */
    .navbar-toggler {
        right: 10px;
        top: 10px;
    }

    /* Statistics cards full width on mobile */
    .stats-card {
        margin-bottom: 1rem;
    }

    /* Dashboard time badge smaller on mobile */
    .dashboard-time-badge {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    /* Even more compact on very small screens */
    .navbar.admin-navbar .navbar-brand span {
        font-size: 0.875rem;
    }

    .navbar-brand img {
        height: 20px;
    }

    main.main-content {
        padding: 10px;
        padding-top: 65px;
    }

    /* Hide username icon on very small screens */
    .admin-username i {
        display: none;
    }

    /* Smaller stats numbers */
    .stats-number {
        font-size: 1.5rem;
    }

    .stats-icon {
        font-size: 1.5rem;
    }
}

/* ========================================
   8. FORM CONTROLS
   ======================================== */
.form-label {
    font-family: var(--ret-font-heading);
    font-weight: 600;
    color: var(--ret-text-primary);
    margin-bottom: var(--ret-spacing-sm);
}

.form-control {
    border-radius: var(--ret-radius-sm);
    border: 1px solid var(--ret-border);
    padding: 0.75rem 1rem;
    font-family: var(--ret-font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .form-control:focus {
        border-color: var(--ret-accent-blue);
        box-shadow: 0 0 0 0.2rem rgba(51, 154, 240, 0.25);
    }

    .form-control::placeholder {
        color: var(--ret-text-muted);
        font-style: italic;
    }

/* ========================================
   9. CARDS & PANELS
   ======================================== */
.card {
    border-radius: var(--ret-radius-md);
    border: 1px solid var(--ret-border);
    box-shadow: var(--ret-shadow-sm);
    margin-bottom: var(--ret-spacing-lg);
}

.card-header {
    background-color: var(--ret-bg-light);
    border-bottom: 1px solid var(--ret-border);
    padding: var(--ret-spacing-md) var(--ret-spacing-lg);
    font-family: var(--ret-font-heading);
    font-weight: 700;
}

.card-body {
    padding: var(--ret-spacing-lg);
}

/* ========================================
   10. TABLES
   ======================================== */
.table {
    font-family: var(--ret-font-body);
}

    .table thead th {
        font-family: var(--ret-font-heading);
        font-weight: 700;
        background-color: var(--ret-bg-light);
        border-bottom: 2px solid var(--ret-border);
        color: var(--ret-text-primary);
    }

    .table tbody tr:hover {
        background-color: rgba(51, 154, 240, 0.05);
    }

/* ========================================
   11. UTILITY CLASSES
   ======================================== */
.text-ret-primary {
    color: var(--ret-primary) !important;
}

.text-ret-secondary {
    color: var(--ret-secondary) !important;
}

.bg-ret-primary {
    background-color: var(--ret-primary) !important;
}

.bg-ret-light {
    background-color: var(--ret-bg-light) !important;
}

/* ========================================
   12. RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    .login-card {
        margin: var(--ret-spacing-md);
        padding: var(--ret-spacing-lg);
    }

    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.75rem;
    }

    h3, .h3 {
        font-size: 1.5rem;
    }
}

/* ========================================
   13. CLICKABLE USERNAME STYLES
   ======================================== */

/* Admin username - clickable with hover effect */
.admin-navbar .admin-username {
    color: white;
    transition: opacity 0.3s ease;
}

    .admin-navbar .admin-username:hover {
        opacity: 0.8;
        text-decoration: none;
    }

/* Ensure link styling doesn't interfere */
.admin-navbar a.admin-username {
    color: white !important;
}

    .admin-navbar a.admin-username:hover {
        color: white !important;
    }

/* ==========================================================================
   INLINE STYLE REFACTORING - Utility Classes
   ========================================================================== */

/* Login container variation - wider for 2FA setup */
.login-container-wide {
    max-width: 600px;
}

/* Card icons for action cards */
.card-icon-lg {
    font-size: 3rem;
    color: var(--ret-accent-blue);
}

.card-icon-xl {
    font-size: 4rem;
    color: var(--ret-accent-blue);
}

/* Fixed-height wrapper for card icon/logo area to ensure consistent title alignment */
.card-icon-wrapper {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty state icon */
.empty-state-icon {
    font-size: 2rem;
    color: var(--ret-text-muted);
}

/* Text size utilities */
.text-sm {
    font-size: 0.9rem;
}

.text-xs {
    font-size: 0.85rem;
}

/* Table utilities */
.table-label-col {
    width: 25%;
}

/* Layout utilities */
.main-content-area {
    margin-top: 80px;
}

/* 2FA verification code input styling */
.twofa-code-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    font-weight: 600;
}

/* Text utilities */
.break-all {
    word-break: break-all;
}

/* Section title for 2FA setup */
.twofa-section-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.qr-code-container {
    background: #ffffff;
    padding: 16px;
    border-radius: var(--ret-border-radius);
}

/* Cloudflare Turnstile
   The widget draws itself inside a cross-origin iframe and Cloudflare exposes
   no styling options at all - theme and size are the only levers, and neither
   touches the border. So the widget arrives with its own square, high-contrast
   border that belongs to no design system.

   Rounding the wrapper alone is not enough: overflow-hidden then slices the
   corners off that square border and leaves four gaps that read as holes.
   Instead, crop Cloudflare's border away entirely by pulling the widget out
   past the wrapper on every side, and draw our own - so it matches the form
   controls above it rather than competing with them.

   Width is handled by data-size="flexible" on the widget itself, which fills
   the container rather than sitting at a fixed 300px. */
.turnstile-frame {
    /* How much of the widget's own edge to swallow. Cloudflare's border is 1px;
       this is a variable because it is theirs to change, not ours. */
    --turnstile-crop: 1px;
    border: 1px solid var(--ret-border);
    border-radius: var(--ret-radius-sm);
    overflow: hidden;
    /* The iframe is inline by default, so the line box leaves a few stray
       pixels underneath and the clipped corners look lopsided. */
    line-height: 0;
}

    /* Negative margins on a block widen it past the content box, so the widget
       renders slightly larger than the frame and its own border falls outside
       the overflow. The frame's outer size is unchanged. */
    .turnstile-frame .cf-turnstile {
        margin: calc(-1 * var(--turnstile-crop));
    }

    .turnstile-frame iframe {
        display: block;
    }

/* Table label column 30% width */
.table-label-col-30 {
    width: 30%;
}

/* Not-signed-in container */
.not-signed-in-container {
    min-height: 100vh;
    background-color: #F5F5F5;
}

/* Audit log action text */
.audit-action-text {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Default layout body */
.default-layout-body {
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

/* Default container max-width */
.container-max-1400 {
    max-width: 1400px;
}

/* Fix spacing and bullet points in validation summary alerts.
   asp-validation-summary generates a <ul> which has Bootstrap's default
   margin-bottom and list-style, creating extra space and unwanted bullets. */
.alert .validation-summary-errors,
.alert .validation-summary-errors ul {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
}

/* ----------------------------------------
   Loading spinner for buttons during
   async operations (adapted from NHM EstPfm)
   ---------------------------------------- */
@keyframes retSpinnerSpin {
    to { transform: rotate(360deg); }
}

.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: retSpinnerSpin 0.8s linear infinite;
    vertical-align: -0.15em;
    opacity: 0.8;
}

.btn.is-loading {
    opacity: 0.65;
    pointer-events: none;
}