/* ========================================
   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
   ======================================== */
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;
}

/* ========================================
   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;
    }

/* 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
   ======================================== */

/* Full-width header at the top - NO PADDING */
.login-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    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;
    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: 380px;
    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);
}

/* 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: 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;
}

.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-lg);
    padding-top: var(--ret-spacing-lg);
    border-top: 1px solid var(--ret-border);
}

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

/* 2FA specific styles */
.twofa-help-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ret-border);
}

.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: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ret-border);
    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;
    }

/* Back to app button */
.btn-back-to-app {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    display: inline-block;
}

    .btn-back-to-app:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        border-color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
    }

/* 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;
}

/* 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 */
    .btn-back-to-app,
    .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);
}

/* 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;
}

/* 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;
}