/* ============================================
   FORE Uganda Integrated Recovery, Finance
   and Administration System
   Theme: Recovery Green | Warm Gold | White/Light Grey
   ============================================ */

:root {
    --recovery-green: #2D7D46;
    --recovery-green-light: #3D9A5A;
    --recovery-green-dark: #1E5A30;
    --recovery-green-pale: #E8F5E9;

    --warm-gold: #D4A843;
    --warm-gold-light: #E8C97A;
    --warm-gold-dark: #B8922E;
    --warm-gold-pale: #FFF8E1;

    --bg-primary: #F5F7FA;
    --bg-secondary: #FFFFFF;
    --bg-sidebar: #2C3E50;
    --bg-sidebar-hover: #34495E;
    --bg-card: #FFFFFF;

    --text-primary: #2C3E50;
    --text-secondary: #5D6D7E;
    --text-muted: #95A5A6;
    --text-light: #FFFFFF;
    --text-sidebar: #BDC3C7;
    --text-sidebar-active: #FFFFFF;

    --success: #27AE60;
    --warning: #F39C12;
    --danger: #E74C3C;
    --info: #3498DB;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --footer-height: 48px;

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.35s ease;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
ul { list-style: none; }

.app-container {
    display: flex;
    min-height: 100vh;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transition: width var(--transition-base), transform var(--transition-base);
    overflow: hidden;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.sidebar-header {
    padding: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    overflow: hidden;
    white-space: nowrap;
}

.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 14px;
    padding: 6px;
    display: block;
    box-shadow: 0 8px 22px rgba(18, 63, 63, 0.18);
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    transition: opacity var(--transition-base), width var(--transition-base);
}

.sidebar.collapsed .brand-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0.3px;
}

.brand-subtitle {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-sidebar);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) 0;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; }

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--space-md);
}

.nav-item { position: relative; }

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--text-sidebar);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--warm-gold);
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transition: transform var(--transition-base);
}

.nav-link:hover {
    background: var(--bg-sidebar-hover);
    color: var(--text-light);
}

.nav-link.active {
    background: rgba(45, 125, 70, 0.15);
    color: var(--text-light);
}

.nav-link.active::before { transform: scaleY(1); }

.nav-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.nav-text { transition: opacity var(--transition-base); }
.sidebar.collapsed .nav-text { opacity: 0; width: 0; }

.sidebar-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.system-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.version {
    font-weight: 600;
    color: var(--recovery-green-light);
}

.environment {
    background: rgba(243, 156, 18, 0.2);
    color: var(--warning);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.sidebar.collapsed .sidebar-footer { display: none; }

/* ============================================
   Main Wrapper & Header
   ============================================ */
.main-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-base);
}

.sidebar.collapsed ~ .main-wrapper { margin-left: var(--sidebar-collapsed); }

.top-header {
    height: var(--header-height);
    min-width: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.header-right { display: flex; align-items: center; }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.action-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-secondary);
}

.user-menu { margin-left: var(--space-md); }

.user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.user-btn:hover { background: var(--bg-primary); }

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--recovery-green), var(--recovery-green-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.main-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-xl);
    overflow-x: hidden;
    overflow-y: auto;
}

.app-footer {
    height: var(--footer-height);
    background: var(--bg-secondary);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0 var(--space-xl);
    display: flex;
    align-items: center;
}

.footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-links a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: var(--recovery-green); }

/* ============================================
   Dashboard
   ============================================ */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    margin-bottom: var(--space-xs);
}

.welcome-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-sm {
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--recovery-green), var(--recovery-green-light));
    color: white;
    box-shadow: 0 4px 12px rgba(45, 125, 70, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(45, 125, 70, 0.4);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--recovery-green);
    color: var(--recovery-green);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(45, 125, 70, 0.15);
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--recovery-green);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card:hover::after { opacity: 1; }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.badge-warning {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.badge-danger {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.badge-info {
    background: rgba(52, 152, 219, 0.15);
    color: var(--info);
}

.card-body { flex: 1; }

.card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.5px;
}

.card-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.card-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.trend-up {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success);
}

.trend-down {
    background: rgba(231, 76, 60, 0.1);
    color: var(--danger);
}

.trend-neutral {
    background: rgba(149, 165, 166, 0.1);
    color: var(--text-muted);
}

.card-footer {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.card-client .card-icon { background: linear-gradient(135deg, #3498DB, #5DADE2); }
.card-session .card-icon { background: linear-gradient(135deg, #9B59B6, #BB8FCE); }
.card-followup .card-icon { background: linear-gradient(135deg, #E67E22, #F39C12); }
.card-residential .card-icon { background: linear-gradient(135deg, #1ABC9C, #48C9B0); }
.card-fees .card-icon { background: linear-gradient(135deg, var(--warm-gold-dark), var(--warm-gold)); }
.card-balance .card-icon { background: linear-gradient(135deg, #E74C3C, #EC7063); }
.card-requisition .card-icon { background: linear-gradient(135deg, #34495E, #5D6D7E); }
.card-approval .card-icon { background: linear-gradient(135deg, #16A085, #1ABC9C); }
.card-expenses .card-icon { background: linear-gradient(135deg, #8E44AD, #9B59B6); }
.card-budget .card-icon { background: linear-gradient(135deg, var(--recovery-green), var(--recovery-green-light)); }

.card-highlight {
    border: 2px solid rgba(212, 168, 67, 0.3);
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--warm-gold-pale) 100%);
}

.card-highlight:hover { border-color: var(--warm-gold); }
.card-highlight::after { background: var(--warm-gold); }

/* ============================================
   Quick Actions
   ============================================ */
.quick-actions { margin-bottom: var(--space-xl); }

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--recovery-green);
    border-radius: 2px;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--recovery-green);
    color: var(--recovery-green);
}

.action-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.action-card i {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--recovery-green-pale);
    color: var(--recovery-green);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.action-card:hover i {
    background: var(--recovery-green);
    color: white;
}

.card-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-implemented {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-partial {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.status-planned,
.status-pendingschema,
.status-pending {
    background: rgba(149, 165, 166, 0.15);
    color: var(--text-muted);
}

.action-card-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.action-card-description {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.action-card-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.action-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.action-card-actions .btn {
    flex: 1 1 120px;
    justify-content: center;
}

.action-card-actions .btn i {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
    font-size: 0.85rem;
}

.action-card:hover .action-card-title {
    color: var(--recovery-green);
}

.action-card-disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.action-card-disabled:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.action-card small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.nav-badge,
.button-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.button-badge {
    margin-left: 0.25rem;
}

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
    align-items: end;
}

.details-grid {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr;
    gap: 0.75rem 1.25rem;
    padding: 1rem;
}

.details-grid dt {
    font-weight: 700;
    color: var(--text-muted);
}

.details-grid dd {
    margin: 0;
    color: var(--text-primary);
}

.table-inline-input {
    min-width: 180px;
    max-width: 260px;
}

.text-right {
    text-align: right;
}

.print-document {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.print-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
}

.print-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.statement-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: var(--space-lg);
    color: var(--text-secondary);
}

.statement-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.statement-totals div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.signature-grid div {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media print {
    .sidebar,
    .top-header,
    .app-footer,
    .no-print,
    .header-actions {
        display: none !important;
    }

    .main-wrapper,
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-document {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ============================================
   Recent Activity
   ============================================ */
.recent-activity {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
}

.activity-fee { background: linear-gradient(135deg, var(--warm-gold-dark), var(--warm-gold)); }
.activity-client { background: linear-gradient(135deg, #3498DB, #5DADE2); }
.activity-session { background: linear-gradient(135deg, #9B59B6, #BB8FCE); }
.activity-requisition { background: linear-gradient(135deg, var(--recovery-green), var(--recovery-green-light)); }

.activity-content { flex: 1; }

.activity-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    line-height: 1.4;
}

.activity-text strong {
    color: var(--recovery-green-dark);
    font-weight: 600;
}

.activity-time {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1200px) {
    .cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 992px) {
    :root { --sidebar-width: 260px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .actions-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }
    .sidebar.open { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
    .mobile-toggle { display: flex; }
    .cards-grid { grid-template-columns: 1fr; }
    .actions-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-header { flex-direction: column; align-items: flex-start; }
    .header-actions { width: 100%; }
    .btn { flex: 1; justify-content: center; }
    .top-header { padding: 0 var(--space-md); }
    .main-content { padding: var(--space-md); }
    .user-name { display: none; }
}

@media (max-width: 480px) {
    .actions-grid { grid-template-columns: 1fr; }
    .welcome-title { font-size: 1.4rem; }
    .card-value { font-size: 1.5rem; }
}

/* ============================================
   Utility & Print
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

@media print {
    .sidebar, .top-header, .app-footer, .sidebar-toggle, .mobile-toggle, .header-actions {
        display: none !important;
    }
    .main-wrapper { margin-left: 0; }
    .card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================
   Sidebar Submenu
   ============================================ */
.nav-group { position: relative; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--text-sidebar);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.nav-group-toggle:hover {
    background: var(--bg-sidebar-hover);
    color: var(--text-light);
}

.nav-chevron {
    font-size: 0.7rem;
    margin-left: auto;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.nav-group.open .nav-chevron {
    transform: rotate(90deg);
}

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    padding-left: var(--space-lg);
}

.nav-group.open .nav-submenu {
    max-height: 500px;
}

.nav-subitem { position: relative; }

.nav-sublink {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    color: var(--text-sidebar);
    font-size: 0.85rem;
    font-weight: 400;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    margin: 2px 0;
}

.nav-sublink::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--warm-gold);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0);
    transition: transform var(--transition-base);
}

.nav-sublink:hover {
    background: var(--bg-sidebar-hover);
    color: var(--text-light);
}

.nav-sublink.active {
    background: rgba(45, 125, 70, 0.15);
    color: var(--text-light);
}

.nav-sublink.active::before { transform: scaleY(1); }

/* ============================================
   Content Panels
   ============================================ */
.content-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.panel-actions {
    display: flex;
    gap: var(--space-md);
}

.panel-body {
    padding: var(--space-xl);
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
}

.empty-icon {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.empty-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.empty-subtext {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ============================================
   Alerts
   ============================================ */
.alert {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
    font-weight: 500;
}

.alert-success {
    background: var(--recovery-green-pale);
    color: var(--recovery-green-dark);
    border: 1px solid rgba(45, 125, 70, 0.2);
}

.alert-success i {
    color: var(--recovery-green);
    font-size: 1.1rem;
}

.alert-danger {
    background: rgba(231, 76, 60, 0.12);
    color: #A93226;
    border: 1px solid rgba(231, 76, 60, 0.24);
}

.alert-danger i {
    color: var(--danger);
    font-size: 1.1rem;
}

/* ============================================
   Forms
   ============================================ */
.form-container {
    max-width: 900px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-left: 4px solid var(--recovery-green);
    transition: box-shadow var(--transition-fast);
}

.form-section:hover {
    box-shadow: var(--shadow-lg);
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.form-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(45, 125, 70, 0.1);
    color: var(--recovery-green);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.form-row {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group-wide {
    flex: 1 1 100%;
    min-width: 100%;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.required {
    color: var(--danger);
    font-size: 0.75rem;
}

.form-control {
    padding: var(--space-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
    transition: all var(--transition-fast);
    width: 100%;
}

.form-control:focus {
    outline: none;
    border-color: var(--recovery-green);
    box-shadow: 0 0 0 3px rgba(45, 125, 70, 0.1);
}

.form-control:hover:not(:focus) {
    border-color: rgba(45, 125, 70, 0.35);
}

.form-control::placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235D6D7E' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-xl);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* Consent Checkbox */
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.consent-label:hover {
    border-color: var(--recovery-green);
}

.consent-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--recovery-green);
    cursor: pointer;
    flex-shrink: 0;
}

.consent-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.05);
    z-index: 5;
}

.form-actions .btn {
    min-width: 160px;
    justify-content: center;
}

/* ============================================
   Responsive Forms
   ============================================ */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: var(--space-md);
    }

    .form-group {
        min-width: 100%;
    }

    .form-section {
        padding: var(--space-md);
    }

    .form-actions .btn {
        flex: 1;
        min-width: auto;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .panel-actions {
        width: 100%;
    }

    .panel-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   Foundation Notice
   ============================================ */
.foundation-notice {
    margin-bottom: var(--space-lg);
}

.notice-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--warm-gold-pale), #FFF3E0);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: var(--radius-md);
    color: var(--warm-gold-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

.notice-content i {
    font-size: 1.1rem;
    color: var(--warm-gold);
    flex-shrink: 0;
}

.notice-content strong {
    color: var(--warm-gold-dark);
    font-weight: 700;
}

/* ============================================
   Wide Form Container
   ============================================ */
.form-container-wide {
    max-width: 1100px;
}

/* ============================================
   Form Section Enhancements for Intake
   ============================================ */
.form-section .form-row {
    margin-bottom: var(--space-lg);
}

.form-section .form-row:last-child {
    margin-bottom: 0;
}

/* Risk level select styling */
select.form-control option[value="Critical"] {
    color: var(--danger);
    font-weight: 600;
}

select.form-control option[value="High"] {
    color: #E67E22;
    font-weight: 600;
}

/* Checkbox group spacing */
.form-row .consent-label {
    margin-bottom: var(--space-sm);
}

.form-row .consent-label:last-child {
    margin-bottom: 0;
}

/* ============================================
   Confidentiality Banner
   ============================================ */
.confidentiality-banner {
    margin-bottom: var(--space-lg);
}

.banner-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #FFEBEE, #FFF3E0);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

.banner-content i {
    font-size: 1.1rem;
    color: var(--danger);
    flex-shrink: 0;
    margin-top: 2px;
}

.banner-content strong {
    font-weight: 700;
}

/* ============================================
   Checkbox Row and Group
   ============================================ */
.checkbox-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
    width: 100%;
    transition: all var(--transition-fast);
}

.checkbox-label:hover {
    border-color: var(--recovery-green);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--recovery-green);
    cursor: pointer;
    flex-shrink: 0;
}

/* ============================================
   Data Table
   ============================================ */
.data-table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table thead th {
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

.data-table tbody td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--bg-primary);
}

.data-table tbody tr.uif-row-editable {
    cursor: pointer;
}

.data-table tbody tr.uif-row-editable:hover {
    background: var(--bg-primary);
    box-shadow: inset 3px 0 0 var(--recovery-green);
}

/* ============================================
   Client Profile Photo
   ============================================ */
.header-welcome-with-photo {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.client-photo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.client-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-card);
    box-shadow: var(--shadow-md);
    background: var(--bg-secondary);
}

.client-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 2rem;
}

.client-photo-form {
    display: contents;
}

.client-photo-change-btn {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--recovery-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: var(--shadow-sm);
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.client-photo-change-btn:hover {
    transform: scale(1.08);
}

.empty-row td {
    padding: 0;
    border: none;
}

/* ============================================
   Profile Grid
   ============================================ */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.profile-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    gap: var(--space-md);
}

.profile-field:last-child {
    border-bottom: none;
}

.field-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.field-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

/* ============================================
   Status Badges
   ============================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-inactive {
    background: rgba(149, 165, 166, 0.15);
    color: var(--text-muted);
}

.status-low {
    background: rgba(39, 174, 96, 0.15);
    color: var(--success);
}

.status-moderate {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.status-high {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.status-draft {
    background: rgba(149, 165, 166, 0.15);
    color: var(--text-muted);
}

.status-open {
    background: rgba(52, 152, 219, 0.15);
    color: var(--info);
}

.status-committed {
    background: rgba(243, 156, 18, 0.15);
    color: var(--warning);
}

.status-closed {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger);
}

.status-archived {
    background: rgba(44, 62, 80, 0.15);
    color: var(--text-primary);
}

/* ============================================
   Upload Placeholder
   ============================================ */
.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: var(--bg-primary);
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-fast);
}

.upload-placeholder:hover {
    border-color: var(--recovery-green);
    background: var(--recovery-green-pale);
}

.upload-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.upload-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.upload-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    max-width: 400px;
}

/* ============================================
   Responsive Profile and Tables
   ============================================ */
@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
    
    .checkbox-row {
        grid-template-columns: 1fr;
    }
    
    .data-table-container {
        margin: 0 calc(-1 * var(--space-md));
    }
    
    .data-table thead th,
    .data-table tbody td {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
    }
    
    .profile-field {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .field-value {
        text-align: left;
    }
}

/* Sidebar stability fix: prevents expanded submenu from covering the sidebar */
.sidebar {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

.sidebar-footer {
    flex-shrink: 0;
}

.nav-list,
.nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-group {
    position: relative;
}

.nav-submenu {
    position: static !important;
    display: none;
    width: 100%;
    max-height: none !important;
    overflow: visible !important;
    background: transparent;
    margin: 0.25rem 0 0.5rem 0;
    padding: 0;
    box-shadow: none !important;
    z-index: auto !important;
}

.nav-submenu.open,
.nav-group.open > .nav-submenu {
    display: block;
}

.nav-subitem {
    margin: 0;
    padding: 0;
}

.nav-sublink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 38px;
    padding: 0.55rem 1rem 0.55rem 2.4rem;
    text-decoration: none;
    white-space: normal;
}

.nav-group-toggle {
    cursor: pointer;
}

.nav-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.nav-group.open .nav-chevron {
    transform: rotate(90deg);
}

/* Make long sidebars usable on smaller screens */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}

/* ============================================
   Authentication
   ============================================ */
.signed-in-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logout-form {
    margin: 0;
}

.btn-compact {
    padding: var(--space-sm) var(--space-md);
}

.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--recovery-green-pale), var(--bg-primary));
}

.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.login-card {
    width: min(100%, 460px);
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.login-logo {
    width: 74px;
    height: 74px;
    object-fit: contain;
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.login-brand-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--recovery-green);
    margin-bottom: var(--space-xs);
}

.login-brand h1 {
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--text-primary);
}

.login-welcome {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.login-success-message {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--recovery-green-pale);
    color: var(--recovery-green-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.remember-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.remember-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--recovery-green);
}

.login-button {
    justify-content: center;
}

.login-link-disabled {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: not-allowed;
}

.login-security-note {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--warm-gold-pale);
    color: var(--warm-gold-dark);
    font-size: 0.85rem;
}

.auth-secondary-form {
    margin-top: var(--space-md);
    text-align: center;
}

.login-footer {
    margin-top: var(--space-lg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.validation-summary {
    color: var(--danger);
    font-size: 0.9rem;
    font-weight: 600;
}

.validation-summary ul {
    list-style: none;
}

.field-validation {
    color: var(--danger);
    font-size: 0.8rem;
}

.access-denied-panel {
    max-width: 760px;
    margin: 0 auto;
}

.access-denied-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    margin-bottom: var(--space-md);
}

.login-link { color: var(--recovery-green-dark); font-size: .88rem; font-weight: 700; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.password-input-wrap { position: relative; }
.password-input-wrap .form-control { width: 100%; padding-right: 4.5rem; }
.password-toggle { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--recovery-green-dark); font-weight: 700; cursor: pointer; padding: .35rem; }
.password-rules { display: grid; gap: .25rem; padding: .85rem 1rem; border-radius: var(--radius-md); background: var(--recovery-green-pale); color: var(--text-secondary); font-size: .82rem; }
.password-rules span::before { content: "✓"; margin-right: .45rem; color: var(--recovery-green); font-weight: 800; }

.hr-p3-page { color: var(--text-primary); }
.hr-p3-panel { margin-bottom: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 8px 24px rgba(16,24,40,.04); }
.hr-p3-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hr-p3-form-grid > div { min-width: 0; }
.hr-p3-form-grid .wide { grid-column: 1 / -1; }
.hr-p3-form-grid label { display: block; margin-bottom: .35rem; color: var(--text-secondary); font-size: .78rem; font-weight: 650; }
.hr-p3-form-grid input, .hr-p3-form-grid select, .hr-p3-form-grid textarea { width: 100%; }
.hr-p3-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 1.6rem; }
.hr-p3-checks label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.hr-p3-checks input { width: auto; }
.hr-p3-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.hr-p3-panel .text-danger { margin-bottom: .75rem; }
.hr-p3-inline-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-color); }
.hr-subheading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.45rem; }
.hr-subheading h3 { margin:0; font-size:.85rem; }
.hr-p3-record-list { padding:0 .9rem .6rem; }
.hr-p3-record-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.75rem; align-items:center; padding:.7rem 0; border-bottom:1px solid #eef1f5; }
.hr-p3-record-row strong { display:block; font-size:.76rem; }.hr-p3-record-row span,.hr-p3-record-row small { display:block; margin-top:.15rem; color:var(--text-muted); font-size:.68rem; }.hr-p3-record-row a { color:var(--primary); font-size:.7rem; font-weight:650; text-decoration:none; white-space:nowrap; }
@media (max-width: 700px) { .hr-p3-form-grid { grid-template-columns: 1fr; } .hr-p3-form-grid .wide { grid-column: auto; } .hr-p3-checks { padding-top: .25rem; } }
@media (max-width: 700px) { .hr-p3-inline-sections { grid-template-columns:1fr; } .hr-p3-record-row { grid-template-columns:minmax(0,1fr) auto; } .hr-p3-record-row a { grid-column:2; grid-row:1 / span 2; } }

/* HR-P2 employment and organisational-authority workspace */
.hr-p2-page{--hr-p2-border:#e3e8ef;--hr-p2-text:#172033;--hr-p2-muted:#667085;--hr-p2-primary:#173b6c;color:var(--hr-p2-text)}
.hr-local-workspaces{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.75rem;margin-bottom:var(--space-lg)}
.hr-local-workspace{padding:.7rem .8rem;border:1px solid #e3e8ef;border-radius:11px;background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.035)}
.hr-local-workspace-heading{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.45rem;color:#667085;font-size:.67rem}
.hr-local-workspace-heading .eyebrow{color:#173b6c;font-size:.63rem}
.hr-local-subnav{display:flex;flex-wrap:wrap;gap:.25rem}
.hr-local-subnav a{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .52rem;border-radius:7px;color:#475467;font-size:.68rem;font-weight:650;text-decoration:none;white-space:nowrap}
.hr-local-subnav a:hover,.hr-local-subnav a.active{background:#eef4fb;color:#173b6c}
.hr-local-subnav a i{font-size:.64rem}
.hr-p2-page .hr-workspace-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;margin-bottom:.85rem;padding:1.05rem 1.15rem;border:1px solid var(--hr-p2-border);border-radius:14px;background:linear-gradient(135deg,#eef4fb,#fff 48%)}
.hr-p2-page .hr-workspace-header h1{margin:.15rem 0 0;font-size:clamp(1.5rem,2.1vw,2.05rem);letter-spacing:-.03em}.hr-p2-page .hr-workspace-header p{max-width:780px;margin:.4rem 0 0;color:var(--hr-p2-muted);font-size:.8rem;line-height:1.5}
.hr-p2-tabs{display:flex;gap:.2rem;overflow-x:auto;margin-bottom:.85rem;padding:.35rem;border:1px solid var(--hr-p2-border);border-radius:11px;background:#fff}.hr-p2-tabs a{flex:0 0 auto;padding:.62rem .72rem;border-radius:7px;color:#475467;font-size:.75rem;font-weight:650;text-decoration:none}.hr-p2-tabs a:hover,.hr-p2-tabs a.active{background:#eef4fb;color:var(--hr-p2-primary)}
.hr-p2-panel{overflow:hidden;border:1px solid var(--hr-p2-border);border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(16,24,40,.045)}.hr-p2-filters{display:grid;grid-template-columns:minmax(220px,1fr) 220px auto;gap:.6rem;padding:.8rem;border-bottom:1px solid #eef1f5}.hr-p2-register-meta{padding:.65rem .8rem;color:var(--hr-p2-muted);font-size:.68rem}.hr-p2-table{margin:0}.hr-p2-table th{padding:.65rem .75rem;border-top:0;background:#f8fafc;color:#475467;font-size:.66rem;text-transform:uppercase;letter-spacing:.035em}.hr-p2-table td{padding:.7rem .75rem;vertical-align:middle;font-size:.72rem}.hr-p2-table td small{display:block;margin-top:.12rem;color:var(--hr-p2-muted);font-size:.62rem}.hr-p2-status{display:inline-flex;padding:.24rem .45rem;border-radius:999px;background:#eef4fb;color:var(--hr-p2-primary);font-size:.62rem;font-weight:700}.hr-p2-empty{padding:2rem!important;text-align:center;color:var(--hr-p2-muted)}
.hr-p2-panel .hr-panel-heading h2{margin:.15rem 0;color:var(--hr-p2-text);font-size:1rem;letter-spacing:-.02em}.hr-foundation-form-panel{padding:1rem}.hr-foundation-form-recent{padding:0}.hr-foundation-form-page .hr-p3-form-grid{padding:.1rem 0}.hr-directory-page > .hr-local-nav{display:none}
.hr-foundation-list-actions{display:flex;flex-wrap:wrap;gap:.5rem}.hr-foundation-list-status{margin-bottom:.75rem}.hr-foundation-list-page .hr-p2-panel{overflow:hidden}.hr-foundation-list-page .hr-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid #eef1f5}.hr-foundation-list-page .hr-panel-heading p{margin:.25rem 0 0;color:var(--hr-p2-muted);font-size:.72rem}.hr-foundation-empty-state{display:grid;place-items:center;gap:.45rem;padding:3rem 1rem;text-align:center;color:var(--hr-p2-muted)}.hr-foundation-empty-state i{font-size:1.8rem;color:#98a2b3}.hr-foundation-empty-state p{margin:0;max-width:38rem}.hr-foundation-empty-state small{font-size:.68rem}.hr-foundation-empty-state.compact{padding:1.75rem .75rem}.hr-foundation-row-actions{white-space:nowrap}
.hr-p2-form-panel{padding:1rem}.hr-p2-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.hr-p2-form-grid .wide{grid-column:1/-1}.hr-p2-form-grid label{display:block;margin-bottom:.3rem;color:#344054;font-size:.72rem;font-weight:650}.hr-p2-form-grid span.field-validation-error{display:block;margin-top:.25rem;color:#b42318;font-size:.65rem}.hr-p2-form-actions{display:flex;gap:.55rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #eef1f5}.hr-p2-check{display:flex;align-items:center;gap:.45rem;min-height:38px;padding-top:1.25rem}.hr-p2-check label{margin:0}.hr-p2-note{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.85rem;padding:.7rem .8rem;border:1px solid #d9e5f3;border-radius:9px;background:#f8fbff;color:#475467;font-size:.7rem;line-height:1.45}
.nav-subgroup-title{padding:.65rem .85rem .25rem;color:#98a2b3;font-size:.62rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.hr-supporting-metric{text-decoration:none;color:inherit}
@media(max-width:760px){.hr-local-workspaces{grid-template-columns:1fr}.hr-local-workspace-heading{flex-direction:column;gap:.1rem}.hr-p2-page .hr-workspace-header{flex-direction:column}.hr-p2-filters{grid-template-columns:1fr}.hr-p2-form-grid{grid-template-columns:1fr}.hr-p2-form-grid .wide{grid-column:auto}}

/* Premium HR P1A workspace */
.hr-workspace { max-width: 1440px; margin: 0 auto; }
.hr-workspace-header, .hr-profile-header { display:flex; align-items:flex-end; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.hr-workspace-header > div:first-child, .hr-profile-header > div:nth-child(2) { flex:1; }
.hr-workspace-header h2, .hr-profile-header h2 { margin:.15rem 0; color:var(--text-primary); letter-spacing:-.02em; }
.hr-workspace-header p, .hr-profile-header p { margin:0; color:var(--text-secondary); }
.eyebrow { color:var(--text-muted); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hr-header-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.hr-local-nav, .hr-profile-tabs { display:flex; gap:.25rem; overflow-x:auto; border-bottom:1px solid var(--border-color); margin-bottom:var(--space-lg); }
.hr-local-nav a, .hr-profile-tabs a { padding:.7rem .85rem; color:var(--text-secondary); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
.hr-local-nav a.active, .hr-profile-tabs a.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
.hr-empty-hero { display:flex; gap:var(--space-lg); align-items:center; padding:var(--space-xl); margin-bottom:var(--space-lg); border:1px solid var(--border-color); border-radius:var(--radius-lg); background:linear-gradient(105deg, var(--surface), var(--background)); }
.hr-empty-hero h3 { margin:.35rem 0; }.hr-empty-hero p { max-width:700px; color:var(--text-secondary); }
.hr-empty-icon, .hr-metric-icon { display:grid; place-items:center; width:3rem; height:3rem; border-radius:var(--radius-md); background:var(--primary-pale); color:var(--primary); }
.hr-metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.75rem; margin-bottom:var(--space-lg); }
.hr-metric { display:flex; gap:.7rem; align-items:center; padding:1rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--surface); }
.hr-metric span, .hr-metric small { display:block; color:var(--text-muted); font-size:.75rem; }.hr-metric strong { display:block; font-size:1.55rem; color:var(--text-primary); }
.hr-dashboard-columns, .hr-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); }.hr-panel-wide { grid-column:1/-1; }
.hr-panel { padding:var(--space-lg); border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--surface); }.hr-panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-md); }.hr-panel-heading h3 { margin:.2rem 0; }
.hr-muted { color:var(--text-muted); font-size:.85rem; }.hr-progress-value { color:var(--primary); }.hr-progress { height:.5rem; overflow:hidden; background:var(--background); border-radius:99px; }.hr-progress span { display:block; height:100%; background:var(--primary); border-radius:99px; }.hr-inline-empty { display:flex; gap:.6rem; align-items:center; padding:1rem 0; color:var(--text-muted); }.hr-attention-list, .hr-clean-list { list-style:none; padding:0; margin:0; }.hr-attention-list li, .hr-clean-list li { display:flex; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--border-color); }.hr-attention-list i { color:var(--warm-gold); }
.hr-filter-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:var(--space-lg); }.hr-search { position:relative; flex:1 1 260px; }.hr-search i { position:absolute; left:.8rem; top:.75rem; color:var(--text-muted); }.hr-search input { width:100%; padding:.65rem .75rem .65rem 2.2rem; border:1px solid var(--border-color); border-radius:var(--radius-md); }.hr-filter-bar select { min-width:145px; padding:.65rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--surface); }
.hr-table-wrap { overflow-x:auto; }.hr-table { width:100%; border-collapse:collapse; }.hr-table th, .hr-table td { padding:.8rem .6rem; text-align:left; border-bottom:1px solid var(--border-color); vertical-align:middle; }.hr-table th { color:var(--text-muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }.hr-person { display:flex; gap:.65rem; align-items:center; }.hr-person a { display:block; color:var(--primary); font-weight:700; text-decoration:none; }.hr-person small, .hr-cell-sub { display:block; color:var(--text-muted); font-size:.78rem; }.hr-avatar { display:grid; place-items:center; width:2.15rem; height:2.15rem; flex:none; border-radius:50%; background:var(--primary-pale); color:var(--primary); font-size:.72rem; font-weight:700; }.hr-avatar-large { width:4rem; height:4rem; font-size:1.15rem; }.hr-status { display:inline-block; padding:.22rem .5rem; border-radius:99px; background:var(--primary-pale); color:var(--primary); font-size:.75rem; font-weight:700; }.hr-status-large { align-self:flex-start; }.hr-row-actions { white-space:nowrap; }
.hr-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:0; }.hr-facts dt { color:var(--text-muted); font-size:.75rem; }.hr-facts dd { margin:.2rem 0 0; color:var(--text-primary); }.hr-timeline-item { display:flex; gap:.8rem; padding:.7rem 0; }.hr-timeline-dot { width:.65rem; height:.65rem; margin-top:.35rem; flex:none; border-radius:50%; background:var(--primary); }.hr-timeline-item strong { margin-right:.5rem; }.hr-timeline-item p { margin:.25rem 0; color:var(--text-secondary); }.hr-timeline-item small { color:var(--text-muted); }
@media (max-width: 760px) { .hr-workspace-header, .hr-profile-header { align-items:flex-start; flex-wrap:wrap; }.hr-dashboard-columns, .hr-profile-grid { grid-template-columns:1fr; }.hr-facts { grid-template-columns:1fr; }.hr-empty-hero { align-items:flex-start; flex-direction:column; } }

@media (max-width: 480px) {
    .login-shell {
        padding: var(--space-md);
    }

    .login-card {
        padding: var(--space-lg);
    }

    .login-brand {
        align-items: flex-start;
    }

    .login-brand h1 {
        font-size: 1rem;
    }

    .signed-in-user {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
/* HR-UX1B enterprise contextual navigation harmonisation */
.hr-workspace-band {
    margin: .35rem 0 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hr-workspace-band-heading {
    display: none;
}

.hr-workspace-band .hr-local-subnav {
    display: flex;
    flex-wrap: nowrap;
    gap: .2rem;
    overflow-x: auto;
    margin: 0;
    padding: .3rem;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .025);
    scrollbar-width: thin;
}

.hr-workspace-band .hr-local-subnav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 34px;
    padding: .45rem .62rem;
    border-radius: 7px;
    color: #596273;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.hr-workspace-band .hr-local-subnav a i {
    font-size: .68rem;
    color: #667085;
}

.hr-workspace-band .hr-local-subnav a:hover {
    background: #f5f8fc;
    color: #173b6c;
}

.hr-workspace-band .hr-local-subnav a.active {
    background: #eef4fb;
    color: #173b6c;
    box-shadow: inset 0 0 0 1px #d8e4f2;
}

.hr-workspace-band .hr-local-subnav a.active i {
    color: #173b6c;
}

@media (max-width: 760px) {
    .hr-workspace-band {
        margin-bottom: .8rem;
    }

    .hr-workspace-band .hr-local-subnav {
        padding: .25rem;
    }

    .hr-workspace-band .hr-local-subnav a {
        min-height: 32px;
        padding: .42rem .55rem;
        font-size: .69rem;
    }
}
/* Premium enterprise workspace foundation (adopted app-wide, originally HR-UX1C1, Phase 13 Stage E) */

.premium-page {
    max-width: 100%;
    overflow-x: hidden;
    --pmx-text: #182230;
    --pmx-muted: #667085;
    --pmx-border: #e3e8ef;
    --pmx-border-soft: #edf0f4;
    --pmx-surface: #ffffff;
    --pmx-soft: #f7f9fc;
    --pmx-primary: var(--recovery-green);
    --pmx-primary-soft: var(--recovery-green-pale);
    --pmx-success: var(--recovery-green-dark);
    color: var(--pmx-text);
    font-size: .84rem;
}

.premium-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: .2rem 0 .25rem;
}

.premium-header .eyebrow,
.premium-panel__head .eyebrow,
.premium-section__head .eyebrow,
.premium-profile .eyebrow {
    display: block;
    color: var(--pmx-primary);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.3;
}

.premium-header h1 {
    margin: .14rem 0 .22rem;
    color: var(--pmx-text);
    font-size: clamp(1.3rem, 1.3vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.premium-header p {
    max-width: 760px;
    margin: 0;
    color: var(--pmx-muted);
    font-size: .82rem;
    line-height: 1.55;
}

.premium-context {
    min-width: 210px;
    max-width: 280px;
    padding: .7rem .8rem;
    border: 1px solid var(--pmx-border);
    border-radius: 10px;
    background: var(--pmx-soft);
}

.premium-context > span {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: var(--pmx-text);
    font-size: .72rem;
    font-weight: 650;
}

.premium-context > span i {
    color: var(--pmx-primary);
}

.premium-context small {
    display: block;
    margin-top: .2rem;
    color: var(--pmx-muted);
    font-size: .64rem;
    line-height: 1.45;
}

.premium-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: .9rem;
}

.premium-metrics--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-metrics--analytics {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.premium-metric {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-width: 0;
    min-height: 88px;
    padding: .78rem .82rem;
    border: 1px solid var(--pmx-border);
    border-radius: 11px;
    background: var(--pmx-surface);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .025);
}

.premium-metric__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--pmx-primary-soft);
    color: var(--pmx-primary);
    font-size: .78rem;
}

.premium-metric__body,
.premium-metric > div {
    min-width: 0;
}

.premium-metric__label {
    display: block;
    overflow: hidden;
    color: var(--pmx-muted);
    font-size: .67rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.premium-metric__value {
    display: block;
    margin-top: .1rem;
    color: var(--pmx-text);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
}

.premium-metric__caption {
    display: block;
    margin-top: .12rem;
    color: var(--pmx-muted);
    font-size: .63rem;
}

.premium-metric--detail {
    align-items: flex-start;
    min-height: 142px;
}

.premium-metric--compact {
    min-height: 76px;
    padding: .72rem .76rem;
}

.premium-metric--compact .premium-metric__value {
    margin-top: .18rem;
    font-size: 1.12rem;
}

.premium-metric__meta {
    display: grid;
    gap: .22rem;
    margin-top: .58rem;
    padding-top: .52rem;
    border-top: 1px solid var(--pmx-border-soft);
}

.premium-metric__meta span {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    color: var(--pmx-muted);
    font-size: .63rem;
    line-height: 1.35;
}

.premium-metric__meta strong {
    color: var(--pmx-text);
    font-weight: 650;
    text-align: right;
}

.premium-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr);
    gap: .8rem;
    align-items: start;
}

.premium-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: .8rem;
}

.premium-three-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: .8rem;
}

.premium-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--pmx-border);
    border-radius: 11px;
    background: var(--pmx-surface);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .02);
}

.premium-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: .78rem .88rem .72rem;
    border-bottom: 1px solid var(--pmx-border-soft);
}

.premium-panel__head h2,
.premium-section__head h2 {
    margin: .12rem 0 0;
    color: var(--pmx-text);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.25;
}

.premium-panel__head p {
    margin: .24rem 0 0;
    color: var(--pmx-muted);
    font-size: .67rem;
    line-height: 1.45;
}

.premium-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 .45rem;
    border: 1px solid var(--pmx-border);
    border-radius: 999px;
    background: var(--pmx-soft);
    color: var(--pmx-muted);
    font-size: .66rem;
    font-weight: 700;
}

.premium-attention-list {
    padding: .18rem .82rem .35rem;
}

.premium-attention-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .62rem;
    padding: .64rem 0;
    border-bottom: 1px solid var(--pmx-border-soft);
}

.premium-attention-item:last-child {
    border-bottom: 0;
}

.premium-attention-item__icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: var(--pmx-soft);
    color: var(--pmx-primary);
    font-size: .67rem;
}

.premium-attention-item > div {
    min-width: 0;
}

.premium-attention-item > div > strong {
    display: block;
    color: var(--pmx-text);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
}

.premium-attention-item > div > span,
.premium-attention-item > div > small {
    display: block;
    margin-top: .08rem;
    color: var(--pmx-muted);
    font-size: .63rem;
    line-height: 1.4;
}

.premium-attention-item__count {
    min-width: 24px;
    color: var(--pmx-text);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.premium-attention-item > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--pmx-primary);
    font-size: .65rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.premium-attention-item > a:hover {
    text-decoration: underline;
}

.premium-actions {
    padding: .28rem .72rem .55rem;
}

.premium-action {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: .58rem;
    min-height: 46px;
    padding: .46rem .3rem;
    border-bottom: 1px solid var(--pmx-border-soft);
    color: var(--pmx-text);
    text-decoration: none;
}

.premium-action:last-child {
    border-bottom: 0;
}

.premium-action > span {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    background: var(--pmx-primary-soft);
    color: var(--pmx-primary);
    font-size: .68rem;
}

.premium-action strong {
    overflow: hidden;
    font-size: .7rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-action > i {
    color: #98a2b3;
    font-size: .58rem;
}

.premium-action:hover {
    color: var(--pmx-primary);
}

.premium-action:focus-visible,
.premium-attention-item > a:focus-visible {
    outline: 2px solid var(--pmx-primary);
    outline-offset: 2px;
}

.premium-empty {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .92rem;
    color: var(--pmx-muted);
}

.premium-empty > i {
    margin-top: .08rem;
    color: var(--pmx-success);
}

.premium-empty strong {
    display: block;
    color: var(--pmx-text);
    font-size: .72rem;
}

.premium-empty span {
    display: block;
    margin-top: .12rem;
    font-size: .65rem;
    line-height: 1.45;
}

.premium-empty--compact {
    padding: .72rem .3rem;
}

.premium-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
    padding: .88rem .95rem;
    border: 1px solid var(--pmx-border);
    border-radius: 11px;
    background: var(--pmx-surface);
}

.premium-profile__identity {
    display: flex;
    align-items: center;
    gap: .78rem;
    min-width: 0;
}

.premium-profile__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--pmx-primary-soft);
    color: var(--pmx-primary);
    font-size: .92rem;
}

.premium-profile h2 {
    margin: .1rem 0 .12rem;
    color: var(--pmx-text);
    font-size: 1.06rem;
    font-weight: 700;
}

.premium-profile p {
    margin: 0;
    color: var(--pmx-muted);
    font-size: .7rem;
}

.premium-profile__status {
    text-align: right;
}

.premium-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .34rem .52rem;
    border: 1px solid #cfe7db;
    border-radius: 999px;
    background: #f0f8f4;
    color: var(--pmx-success);
    font-size: .65rem;
    font-weight: 650;
}

.premium-profile__status small {
    display: block;
    margin-top: .34rem;
    color: var(--pmx-muted);
    font-size: .63rem;
}

.premium-profile__status small strong {
    color: var(--pmx-text);
    font-weight: 650;
}

.premium-filter-panel {
    margin-bottom: .9rem;
}

.premium-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: .62rem;
    padding: .78rem .88rem .88rem;
}

.premium-filter__field {
    min-width: 0;
}

.premium-filter__field .form-label {
    margin-bottom: .26rem;
    color: var(--pmx-muted);
    font-size: .64rem;
    font-weight: 650;
}

.premium-filter__field .form-control,
.premium-filter__field .form-select {
    min-height: 36px;
    border-color: var(--pmx-border);
    border-radius: 8px;
    font-size: .74rem;
}

.premium-filter__actions {
    display: flex;
    align-items: end;
    gap: .4rem;
}

.premium-page .btn {
    min-height: 36px;
    border-radius: 8px;
    font-size: .73rem;
    font-weight: 600;
}

.premium-section {
    margin-bottom: .8rem;
}

.premium-section__head {
    margin-bottom: .5rem;
}

.premium-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .72rem .82rem;
}

.premium-mini-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.premium-mini-grid > div {
    padding: .58rem .62rem;
    border: 1px solid var(--pmx-border-soft);
    border-radius: 8px;
    background: var(--pmx-soft);
}

.premium-mini-grid span {
    display: block;
    color: var(--pmx-muted);
    font-size: .62rem;
}

.premium-mini-grid strong {
    display: block;
    margin-top: .12rem;
    color: var(--pmx-text);
    font-size: .9rem;
    font-weight: 700;
}

.premium-list-heading {
    padding: .58rem .82rem .28rem;
    color: var(--pmx-text);
    font-size: .68rem;
    font-weight: 700;
}

.premium-data-list {
    padding: .18rem .82rem .55rem;
}

.premium-data-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: .48rem 0;
    border-bottom: 1px solid var(--pmx-border-soft);
}

.premium-data-list > div:last-child {
    border-bottom: 0;
}

.premium-data-list span {
    color: var(--pmx-muted);
    font-size: .66rem;
    line-height: 1.4;
}

.premium-data-list strong {
    color: var(--pmx-text);
    font-size: .69rem;
    font-weight: 700;
}

.premium-insights {
    margin-bottom: .65rem;
}

.premium-insight-row > div {
    min-width: 0;
}

.premium-insight-row > div > strong {
    display: block;
    font-size: .7rem;
}

.premium-insight-row > div > span {
    display: block;
    margin-top: .08rem;
    font-size: .63rem;
}

.premium-footnote {
    margin: .55rem 0 0;
    color: var(--pmx-muted);
    font-size: .62rem;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .premium-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .premium-metrics--analytics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .premium-filter {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 900px) {
    .premium-header {
        flex-direction: column;
    }

    .premium-context {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .premium-layout,
    .premium-two-column,
    .premium-three-column {
        grid-template-columns: 1fr;
    }

    .premium-metrics,
    .premium-metrics--three,
    .premium-metrics--analytics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-filter {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

@media (max-width: 580px) {
    .premium-header h1 {
        font-size: 1.3rem;
    }

    .premium-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .premium-profile__status {
        text-align: left;
    }

    .premium-metrics,
    .premium-metrics--three,
    .premium-metrics--analytics {
        grid-template-columns: 1fr 1fr;
    }

    .premium-filter {
        grid-template-columns: 1fr;
    }

    .premium-filter__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .premium-attention-item {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }

    .premium-attention-item > a {
        grid-column: 2 / -1;
    }
}

/* Premium workspace sub-navigation (module tab strip), Phase 13 Stage E.
   Uses the app's global brand tokens (not the page-scoped --pmx-* ones)
   since this renders in the layout, outside .premium-page's DOM subtree.
   Round 3: primary and secondary tiers share ONE bordered container
   (matching Finance's own workspace nav, which is a single box with an
   internal divider) instead of two visually separate, floating bars. */
.premium-subnav-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 var(--space-md);
    border: 1px solid rgba(44, 62, 80, 0.08);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.premium-subnav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 6px;
    scrollbar-width: thin;
}

.premium-subnav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.premium-subnav a i {
    font-size: 12px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.premium-subnav a:hover {
    background: var(--recovery-green-pale);
    color: var(--recovery-green-dark);
}

.premium-subnav a:hover i {
    color: var(--recovery-green);
}

.premium-subnav a.active {
    background: var(--recovery-green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(45, 125, 70, 0.28);
}

.premium-subnav a.active i {
    color: #fff;
}

@media (max-width: 760px) {
    .premium-subnav {
        padding: 4px;
        gap: 4px;
    }

    .premium-subnav a {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Premium workspace sub-navigation, second tier (Phase 13 Stage E, round 3).
   Renders inside the same .premium-subnav-group container as the primary
   row, below a thin divider, only for the one primary tab that is
   currently active AND genuinely has child items (e.g. Beds -> Bed List /
   Allocations). The "WORKSPACE" label mirrors Finance's own workspace
   band so the pattern reads the same across the app. */
.premium-subnav-label {
    flex: 0 0 auto;
    padding-right: 2px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.premium-subnav-secondary {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    align-items: center;
    padding: 8px 10px;
    border-top: 1px solid rgba(44, 62, 80, 0.08);
    background: var(--recovery-green-pale);
    scrollbar-width: thin;
}

.premium-subnav-secondary a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    color: var(--recovery-green-dark);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.premium-subnav-secondary a i {
    font-size: 11px;
    color: var(--recovery-green);
    transition: color var(--transition-fast);
}

.premium-subnav-secondary a:hover {
    background: var(--recovery-green);
    color: #fff;
}

.premium-subnav-secondary a:hover i {
    color: #fff;
}

.premium-subnav-secondary a.active {
    background: var(--recovery-green-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30, 90, 48, 0.32);
}

.premium-subnav-secondary a.active i {
    color: #fff;
}

@media (max-width: 760px) {
    .premium-subnav-secondary {
        padding: 6px 8px;
    }

    .premium-subnav-secondary a {
        padding: 6px 10px;
        font-size: 11px;
    }
}
/* FORE enterprise visual system — corporate refinement without workflow changes. */
:root{--fore-navy:#0d2f45;--fore-navy-2:#09263a;--fore-green:#2f9250;--fore-green-dark:#1f6f3b;--fore-orange:#ef6b45;--fore-surface:#f5f8fa;--fore-border:#d8e2e8;--fore-text:#17324a;--fore-muted:#63798a;--fore-radius:12px;--fore-focus:0 0 0 3px rgba(47,146,80,.18)}
body{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fore-text);text-rendering:optimizeLegibility}
.btn,.form-control,button,input,select,textarea{font:inherit}.btn{min-height:40px;border-radius:10px;font-weight:700;letter-spacing:-.005em;transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s}.btn:hover{transform:translateY(-1px)}.btn:focus-visible,.form-control:focus-visible,a:focus-visible,button:focus-visible{outline:0;box-shadow:var(--fore-focus)}
.form-control{min-height:44px;border-color:var(--fore-border);border-radius:10px;background:#fff;color:var(--fore-text)}.form-label{margin-bottom:6px;color:#344f63;font-size:.82rem;font-weight:750}.field-validation,.form-text{font-size:.78rem}.validation-summary{border-radius:10px}
.app-footer .footer-content{gap:16px;flex-wrap:wrap}.technology-credit{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--fore-muted);font-size:.72rem;white-space:nowrap}.technology-credit img{width:25px;height:22px;object-fit:contain}.technology-credit strong{color:#425c6d;font-size:.72rem}
.auth-page{min-height:100vh;background:linear-gradient(135deg,#edf4f1 0%,#f7f9fb 50%,#eef3f6 100%)}.auth-shell{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(420px,560px);align-items:stretch;width:min(1120px,calc(100% - 40px));min-height:680px;margin:clamp(24px,5vh,60px) auto;border:1px solid rgba(13,47,69,.1);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(9,38,58,.16)}
.auth-hero{position:relative;display:flex;flex-direction:column;padding:48px;background:linear-gradient(155deg,var(--fore-navy-2),var(--fore-navy) 62%,#174d4b);color:#fff;overflow:hidden}.auth-hero:after{content:"";position:absolute;right:-110px;bottom:-140px;width:330px;height:330px;border-radius:50%;background:rgba(47,146,80,.18)}.auth-hero__brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-size:1.02rem;font-weight:800}.auth-hero__brand img{width:50px;height:50px;object-fit:contain;padding:5px;border-radius:12px;background:#fff}.auth-hero__content{position:relative;z-index:1;margin:auto 0}.auth-kicker{margin:0 0 14px;color:#9fe0b3;font-size:.73rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.auth-hero h2{max-width:560px;margin:0;color:#fff;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.045em}.auth-hero__content>p:last-child{max-width:560px;margin:22px 0 0;color:#d5e3eb;font-size:1rem;line-height:1.7}.auth-hero__assurance{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:18px;color:#d5e3eb;font-size:.78rem}.auth-hero__assurance span{display:flex;align-items:center;gap:7px}
.auth-card{display:flex;flex-direction:column;justify-content:center;width:auto;max-width:none;margin:0;padding:clamp(38px,6vw,68px);border:0;border-radius:0;box-shadow:none}.auth-card .login-brand{align-items:center;margin-bottom:24px}.auth-card .login-logo{width:52px;height:52px;border-radius:12px}.auth-card .login-brand h1{font-size:1.7rem;letter-spacing:-.03em}.auth-card .login-brand-title{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}.auth-card .login-welcome{margin:0 0 25px;color:var(--fore-muted)}.auth-card .login-form{gap:17px}.auth-card .login-button{width:100%;min-height:48px;margin-top:4px}.auth-card .login-security-note{margin-top:24px;border:1px solid #d8e7dd;border-radius:11px;background:#f4faf6;color:#496657}.auth-card>.technology-credit{align-self:center;margin:25px 0 0;padding-top:18px;border-top:1px solid var(--fore-border)}.auth-card>.technology-credit img{width:30px;height:27px}.auth-footer{grid-column:1/-1;position:absolute;left:0;right:0;bottom:-34px;color:var(--fore-muted)}
@media(max-width:860px){.auth-shell{display:block;width:min(560px,calc(100% - 24px));min-height:auto;overflow:visible}.auth-hero{min-height:260px;padding:30px;border-radius:22px 22px 0 0}.auth-hero__content{margin:32px 0}.auth-hero h2{font-size:2rem}.auth-card{border-radius:0 0 22px 22px}.auth-footer{position:static;padding:15px}.technology-credit{margin-left:0}}
@media(max-width:520px){.auth-shell{margin:12px auto}.auth-hero{display:none}.auth-card{padding:30px 22px;border-radius:20px}.app-footer .footer-content{align-items:flex-start;flex-direction:column}}

/* Authentication and mail-credential finishing layer. */
.auth-shell{position:relative}
.auth-footer{position:static;grid-column:1/-1;padding:12px 20px;border-top:1px solid var(--fore-border);background:#f7f9fb;text-align:center;color:var(--fore-muted)}
.auth-switch{margin:18px 0 0;padding-top:17px;border-top:1px solid var(--fore-border);text-align:center;color:var(--fore-muted);font-size:.88rem}
.auth-switch a{font-weight:700;color:var(--fore-green);text-decoration:none}.auth-switch a:hover{text-decoration:underline}
.mail-credential-shell{display:grid;place-items:center;min-height:calc(100vh - 180px);padding:40px 20px;background:linear-gradient(145deg,#eef5f1,#f8fafb 58%,#eef3f6)}
.mail-credential-card{width:min(620px,100%);padding:34px;border:1px solid var(--fore-border);border-radius:20px;background:#fff;box-shadow:0 18px 48px rgba(9,38,58,.12)}
.mail-credential-heading{display:flex;gap:16px;align-items:center;margin-bottom:18px}.mail-credential-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#e7f5eb;color:var(--fore-green);font-size:1.15rem}.mail-credential-heading h1{margin:3px 0 0;font-size:1.55rem;letter-spacing:-.025em}.mail-credential-intro{margin:0 0 24px;color:var(--fore-muted);line-height:1.65}.mail-credential-form{display:grid;gap:17px}.mail-credential-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}.mail-credential-card>.technology-credit{justify-content:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--fore-border)}
@media(max-width:520px){.mail-credential-shell{padding:18px 12px}.mail-credential-card{padding:25px 20px;border-radius:16px}.mail-credential-actions .btn{width:100%}}

/* ======================================================================
   Phase 6 Enterprise UI refinement — Staff Systems + FORE Mail sign-in.
   Visual-only layer. FORE green/navy remain primary; logo orange is used
   as a restrained accent for hierarchy, focus and brand continuity.
   ====================================================================== */
:root{
    --fore-orange:#f15a2b;
    --fore-orange-soft:#fff2ec;
    --fore-navy:#12304a;
    --fore-navy-2:#09263a;
    --fore-green:#2f8f4e;
    --fore-border:#d9e3e8;
    --fore-muted:#667b8b;
    --fore-text:#183247;
    --fore-focus:0 0 0 3px rgba(47,143,78,.14);
}
body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-weight:400;color:var(--fore-text)}
.btn{font-weight:600!important;letter-spacing:0!important}.form-label{font-size:.8rem!important;font-weight:600!important;color:#304c5f!important}.form-control{font-weight:400!important}
.login-link{font-weight:600!important}.password-toggle{font-weight:600!important}
.technology-credit{gap:8px!important;font-size:.76rem!important}.technology-credit img{width:38px!important;height:28px!important;object-fit:contain!important}.technology-credit strong{font-size:.76rem!important;font-weight:600!important;color:#334f62!important}
.auth-page{background:radial-gradient(circle at 18% 15%,rgba(47,143,78,.075),transparent 25%),radial-gradient(circle at 84% 80%,rgba(241,90,43,.06),transparent 24%),linear-gradient(135deg,#eef4f1 0%,#f8fafb 52%,#eef3f6 100%)!important}
.auth-shell{grid-template-columns:minmax(330px,.82fr) minmax(430px,1.18fr)!important;width:min(1040px,calc(100% - 40px))!important;min-height:610px!important;border-radius:22px!important;border:1px solid rgba(18,48,74,.11)!important;box-shadow:0 24px 70px rgba(9,38,58,.14)!important}
.auth-hero{padding:38px!important;background:linear-gradient(150deg,#09263a 0%,#0e344b 70%,#164c4b 100%)!important}
.auth-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--fore-orange),#ff8a4d 45%,var(--fore-green));z-index:2}
.auth-hero:after{right:-130px!important;bottom:-160px!important;width:310px!important;height:310px!important;background:rgba(47,143,78,.14)!important}
.auth-hero__brand{gap:11px!important;font-size:.94rem!important;font-weight:650!important}.auth-hero__brand img{width:46px!important;height:46px!important;border-radius:10px!important}
.auth-hero__content{margin:auto 0!important}.auth-kicker{margin-bottom:11px!important;color:#ff9a72!important;font-size:.69rem!important;font-weight:650!important;letter-spacing:.12em!important}
.auth-hero h2{max-width:430px!important;font-size:clamp(1.8rem,3vw,2.55rem)!important;line-height:1.12!important;font-weight:650!important;letter-spacing:-.028em!important}
.auth-hero__content>p:last-child{max-width:430px!important;margin-top:18px!important;color:#cfdde5!important;font-size:.9rem!important;line-height:1.65!important}
.auth-hero__assurance{gap:15px!important;font-size:.73rem!important;color:#d8e4ea!important}.auth-hero__assurance i{color:#ff9a72}
.auth-card{position:relative!important;padding:clamp(38px,5vw,58px)!important;background:linear-gradient(180deg,#fff,#fdfefe)!important}
.auth-card:before{content:"";position:absolute;top:0;left:clamp(38px,5vw,58px);right:clamp(38px,5vw,58px);height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,var(--fore-orange),#ff985f 35%,var(--fore-green) 100%)}
.auth-card .login-brand{gap:13px!important;margin-bottom:20px!important}.auth-card .login-logo{width:48px!important;height:48px!important;padding:5px!important;border:1px solid #e4eaee!important;box-shadow:0 4px 14px rgba(9,38,58,.07)!important}
.auth-card .login-brand-title{margin:0 0 3px!important;color:var(--fore-green)!important;font-size:.7rem!important;font-weight:650!important;letter-spacing:.11em!important}.auth-card .login-brand h1{font-size:1.55rem!important;font-weight:650!important;letter-spacing:-.022em!important;color:var(--fore-navy)!important}
.auth-card .login-welcome{margin-bottom:22px!important;font-size:.9rem!important;line-height:1.55!important}
.auth-card .login-form{gap:15px!important}.auth-card .form-group{display:grid;gap:6px!important}.auth-card .form-control{min-height:48px!important;padding:10px 13px!important;border:1px solid #cfdae1!important;border-radius:10px!important;background:#fff!important;box-shadow:0 1px 2px rgba(9,38,58,.025)!important;font-size:.92rem!important}.auth-card .form-control:hover:not(:focus){border-color:#b9c9d2!important}.auth-card .form-control:focus{border-color:var(--fore-green)!important;box-shadow:var(--fore-focus)!important}
.auth-card .remember-row{font-size:.84rem!important}.auth-card .remember-row input{width:16px!important;height:16px!important}
.auth-card .login-button{min-height:47px!important;border-radius:10px!important;font-size:.9rem!important;font-weight:600!important;box-shadow:0 6px 14px rgba(47,143,78,.17)!important}.auth-card .login-button:hover{transform:none!important;box-shadow:0 8px 18px rgba(47,143,78,.21)!important}
.auth-card .login-link{font-size:.82rem!important;text-decoration:none!important}.auth-card .login-link:hover{text-decoration:underline!important}
.auth-switch{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:6px!important;margin-top:16px!important;padding-top:15px!important;font-size:.82rem!important}.auth-switch a{font-weight:600!important}
.auth-card .login-security-note{margin-top:19px!important;padding:12px 13px!important;border-radius:10px!important;background:#f6faf7!important;color:#4c6759!important;font-size:.78rem!important;line-height:1.55!important}.auth-card .login-security-note strong{font-weight:600!important}
.auth-card>.technology-credit{margin-top:20px!important;padding-top:15px!important}.auth-footer{padding:10px 18px!important;font-size:.76rem!important}
@media(max-width:860px){.auth-shell{width:min(570px,calc(100% - 24px))!important}.auth-hero{min-height:230px!important;padding:28px!important}.auth-hero__content{margin:26px 0!important}.auth-hero h2{font-size:1.85rem!important}.auth-card{padding:34px 30px!important}.auth-card:before{left:30px;right:30px}}
@media(max-width:520px){.auth-card{padding:30px 22px!important}.auth-card:before{left:22px;right:22px}.technology-credit{white-space:normal!important;justify-content:center!important;text-align:center!important}}

/* FORE Uganda Authentication Portal V3 */
.auth-page--v3{--fore-orange:#ff6b1a;--fore-orange-dark:#dc530f;--fore-teal:#0e4b5a;--fore-deep:#082d3c;--fore-green:#2f8f4e;--fore-muted:#667985;--fore-line:#d9e3e8;background:radial-gradient(circle at 14% 12%,rgba(14,75,90,.08),transparent 28%),radial-gradient(circle at 88% 84%,rgba(255,107,26,.07),transparent 24%),#f4f7f8!important;color:#14384b;font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif}.auth-portal{position:relative;display:flex;flex-direction:column;width:min(1180px,calc(100% - 40px));min-height:calc(100vh - 42px);margin:21px auto;border:1px solid rgba(14,75,90,.11);border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(8,45,60,.12);overflow:hidden}.auth-portal:after{content:"";position:absolute;left:-8%;right:-8%;bottom:45px;height:145px;background:linear-gradient(174deg,transparent 0 28%,rgba(14,75,90,.9) 29% 49%,rgba(255,107,26,.82) 50% 67%,transparent 68%);opacity:.14;pointer-events:none}.auth-portal__masthead{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 30px;border-bottom:1px solid #edf1f3;background:rgba(255,255,255,.94)}.auth-portal__brand{display:flex;align-items:center;gap:12px;color:#14384b;text-decoration:none}.auth-portal__brand img{width:52px;height:52px;object-fit:contain}.auth-portal__brand strong,.auth-portal__brand small{display:block}.auth-portal__brand strong{font-size:.95rem;font-weight:650}.auth-portal__brand small{margin-top:1px;color:#728490;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}.auth-portal__motto{display:grid;grid-template-columns:auto 12px auto 12px auto;align-items:center;gap:8px;color:#214b60;font-size:.67rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.auth-portal__motto i{width:3px;height:3px;border-radius:50%;background:var(--fore-orange)}.auth-portal__motto small{grid-column:1/-1;justify-self:end;margin-top:3px;color:#5f7583;font-size:.6rem;font-weight:600;letter-spacing:.22em}.auth-portal__stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(340px,.9fr) minmax(430px,1.1fr);align-items:center;gap:64px;flex:1;padding:46px 70px 70px}.auth-portal__story{max-width:430px;padding:20px 0}.auth-portal__story .auth-kicker{margin:0 0 14px;color:var(--fore-orange)!important;font-size:.7rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase}.auth-portal__story h2{margin:0;color:var(--fore-deep);font-size:clamp(2.25rem,4.2vw,4rem);line-height:1.02;font-weight:600;letter-spacing:-.04em}.auth-portal__story h2 span{color:var(--fore-orange)}.auth-portal__story>p:not(.auth-kicker){max-width:390px;margin:22px 0 0;color:#5f7583;font-size:.94rem;line-height:1.7}.auth-portal__story-points{display:grid;gap:11px;margin-top:30px}.auth-portal__story-points span{display:flex;align-items:center;gap:10px;color:#405f70;font-size:.8rem}.auth-portal__story-points i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff2e9;color:var(--fore-orange)}.auth-portal__story-points b{font-weight:550}.auth-card--v3{justify-self:end;width:min(480px,100%);padding:34px 38px 30px!important;border:1px solid #e0e8ec!important;border-radius:18px!important;background:rgba(255,255,255,.98)!important;box-shadow:0 18px 48px rgba(8,45,60,.10)!important;text-align:left}.auth-card--v3:before{display:none!important}.auth-card__brandmark{display:grid;place-items:center;width:92px;height:92px;margin:0 auto 12px}.auth-card__brandmark img{width:92px;height:92px;object-fit:contain}.auth-card--v3 .login-brand-title{margin:0!important;text-align:center;color:var(--fore-teal)!important;font-size:.68rem!important;font-weight:650!important;letter-spacing:.16em!important;text-transform:uppercase}.auth-card--v3 h1{margin:6px 0 4px;text-align:center;color:var(--fore-deep);font-size:1.65rem;font-weight:600;letter-spacing:-.025em}.auth-card--v3 .login-welcome{margin:0 0 24px!important;text-align:center;color:#687b87;font-size:.9rem!important}.auth-form-v3{display:grid;gap:14px}.auth-field{display:grid;gap:6px}.auth-field .form-label{margin:0;color:#23485d;font-size:.76rem;font-weight:600}.auth-input{display:grid;grid-template-columns:34px minmax(0,1fr) 38px;align-items:center;min-height:48px;border:1px solid #cfdae0;border-radius:9px;background:#fff;overflow:hidden;transition:.15s}.auth-input>i{justify-self:center;color:#5f7481;font-size:.88rem}.auth-input .form-control{height:46px!important;min-height:46px!important;padding:10px 5px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;font-size:.9rem!important}.auth-input:focus-within{border-color:var(--fore-orange)!important;box-shadow:0 0 0 3px rgba(255,107,26,.12)!important}.auth-input.password-input-wrap{display:grid!important}.password-toggle--icon{position:static!important;display:grid!important;place-items:center!important;width:38px!important;height:46px!important;padding:0!important;border:0!important;background:transparent!important;color:#486477!important;font-size:.86rem!important}.auth-form-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.auth-form-row .remember-row{margin:0!important;color:#536b79;font-size:.8rem!important}.auth-form-row .login-link{font-size:.8rem!important;font-weight:500!important;color:var(--fore-orange)!important;text-decoration:none}.auth-mail-only-chip{display:inline-flex;align-items:center;gap:5px;color:#607784;font-size:.72rem}.auth-submit{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-height:48px!important;border:0!important;border-radius:9px!important;font-size:.94rem!important;font-weight:600!important;cursor:pointer}.auth-submit--orange{background:linear-gradient(90deg,var(--fore-orange),#ff7a2b)!important;color:#fff!important;box-shadow:0 8px 18px rgba(255,107,26,.18)!important}.auth-switch--compact{display:flex!important;justify-content:center!important;gap:5px!important;margin:2px 0 0!important;padding-top:13px!important;border-top:1px solid #e7edf0!important;color:#70838f!important;font-size:.77rem!important}.auth-switch--compact a{color:var(--fore-green)!important;font-weight:600!important}.auth-card__features{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding-top:16px;border-top:1px solid #e6ecef}.auth-card__features span{display:grid;justify-items:center;gap:6px;padding:4px 7px;color:#466476;text-align:center;font-size:.68rem}.auth-card__features span+span{border-left:1px solid #e3e9ed}.auth-card__features i{color:var(--fore-orange);font-size:1rem}.auth-card--v3 .login-security-note{margin-top:16px!important;padding:10px 12px!important;border:1px solid #dce8e1!important;border-radius:9px!important;background:#f7fbf8!important;color:#557064!important;font-size:.72rem!important;line-height:1.5!important}.auth-card--v3>.technology-credit{justify-content:center!important;margin:16px 0 0!important;padding-top:13px!important;border-top:1px solid #e7edf0!important}.auth-card--v3>.technology-credit img{width:32px!important;height:22px!important}.auth-card--v3>.technology-credit strong{font-size:.7rem!important;font-weight:600!important}.auth-portal__footer{position:relative;z-index:2;display:flex;justify-content:space-between;gap:18px;padding:14px 28px;border-top:1px solid #edf1f3;background:rgba(255,255,255,.95);color:#71838e;font-size:.7rem}.auth-portal--mail .auth-portal__story h2 span{color:var(--fore-green)}
@media(max-width:920px){.auth-portal{width:min(620px,calc(100% - 24px));min-height:auto;margin:12px auto}.auth-portal__masthead{padding:18px 22px}.auth-portal__motto{display:none}.auth-portal__stage{display:block;padding:30px}.auth-portal__story{display:none}.auth-card--v3{justify-self:auto;width:100%;margin:auto}.auth-portal__footer{flex-direction:column;align-items:center;text-align:center}.auth-portal:after{height:100px;bottom:36px}}@media(max-width:520px){.auth-portal{border-radius:16px}.auth-portal__masthead{padding:14px 18px}.auth-portal__brand img{width:42px;height:42px}.auth-portal__stage{padding:18px}.auth-card--v3{padding:28px 22px!important}.auth-card__brandmark,.auth-card__brandmark img{width:78px;height:78px}.auth-form-row{align-items:flex-start;flex-direction:column;gap:8px}.auth-card__features{grid-template-columns:1fr}.auth-card__features span+span{border-left:0;border-top:1px solid #e3e9ed;padding-top:10px}}


/* ==========================================================================
   FORE Enterprise UI V4 — approved visual specification
   ========================================================================== */
.fore-auth-v4{
    margin:0;
    min-height:100vh;
    background:#f4f7f9;
    color:#0e4b5a;
    font-family:"Segoe UI Variable","Segoe UI",Inter,Arial,sans-serif;
}
.fore-auth-v4 *{box-sizing:border-box}
.fore-auth-v4__page{
    display:grid;
    grid-template-columns:minmax(520px,1.02fr) minmax(560px,.98fr);
    min-height:100vh;
    background:#fff;
}
.fore-auth-v4__visual{
    min-height:100vh;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
.fore-auth-v4__visual--staff{background-image:url('/images/fore-staff-login-hero.webp')}
.fore-auth-v4__visual--mail{background-image:url('/images/fore-mail-login-hero.webp')}
.fore-auth-v4__content{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:42px clamp(42px,6vw,96px) 28px;
    background:
      radial-gradient(circle at 90% 16%,rgba(14,75,90,.05),transparent 28%),
      linear-gradient(180deg,#fff 0,#fbfcfd 100%);
}
.fore-auth-v4__motto{
    position:absolute;
    top:36px;
    right:clamp(42px,6vw,96px);
    display:grid;
    grid-template-columns:auto 16px auto 16px auto;
    align-items:center;
    gap:10px;
    color:#0e4b5a;
    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
}
.fore-auth-v4__motto i{width:3px;height:3px;border-radius:50%;background:#ff6b1a}
.fore-auth-v4__motto small{
    grid-column:1/-1;
    justify-self:end;
    margin-top:5px;
    color:#60788a;
    font-size:10px;
    letter-spacing:.24em;
}
.fore-auth-v4__motto:after{
    content:"";
    grid-column:1/-1;
    justify-self:center;
    width:42px;
    height:3px;
    margin-top:7px;
    border-radius:3px;
    background:#ff6b1a;
}
.fore-auth-v4__card{
    width:min(560px,100%);
    margin:72px auto 30px;
    padding:38px 46px 34px;
    border:1px solid #e2e8ec;
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 52px rgba(12,50,70,.10);
    text-align:center;
}
.fore-auth-v4__logo{
    display:block;
    width:132px;
    height:112px;
    margin:0 auto 12px;
    object-fit:contain;
}
.fore-auth-v4__mail-icon{
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    margin:-2px auto 12px;
    border-radius:50%;
    background:#fff1e9;
    color:#ff5f12;
    font-size:30px;
}
.fore-auth-v4__card h1{
    margin:0;
    color:#0e4b5a;
    font-size:30px;
    line-height:1.15;
    font-weight:650;
    letter-spacing:-.025em;
}
.fore-auth-v4__lead{
    margin:7px 0 28px;
    color:#667085;
    font-size:16px;
    line-height:1.45;
}
.fore-auth-v4__form{display:grid;gap:14px;text-align:left}
.fore-auth-v4__field{display:grid;gap:7px}
.fore-auth-v4__field label{
    color:#173f56;
    font-size:13px;
    font-weight:600;
}
.fore-auth-v4__input{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 48px;
    align-items:center;
    height:52px;
    border:1px solid #d6e0e6;
    border-radius:9px;
    background:#fff;
    transition:.15s ease;
}
.fore-auth-v4__input:focus-within{
    border-color:#ff6b1a;
    box-shadow:0 0 0 3px rgba(255,107,26,.12);
}
.fore-auth-v4__input>i{justify-self:center;color:#667085;font-size:18px}
.fore-auth-v4__input input{
    width:100%;
    height:50px;
    padding:0 4px;
    border:0;
    outline:0;
    background:transparent;
    color:#193d50;
    font-size:15px;
}
.fore-auth-v4__eye{
    display:grid;
    place-items:center;
    width:48px;height:50px;
    border:0;
    background:transparent;
    color:#667085;
    cursor:pointer;
}
.fore-auth-v4__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:36px;
}
.fore-auth-v4__remember{
    display:flex;
    align-items:center;
    gap:9px;
    color:#263b49;
    font-size:14px;
}
.fore-auth-v4__remember input{width:18px;height:18px;accent-color:#ff6b1a}
.fore-auth-v4__row a,.fore-auth-v4__switch a{
    color:#ff5f12;
    font-size:14px;
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:3px;
}
.fore-auth-v4__submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:52px;
    border:0;
    border-radius:9px;
    background:linear-gradient(90deg,#ff701f,#ff5710);
    color:#fff;
    box-shadow:0 8px 18px rgba(255,93,16,.20);
    font-size:18px;
    font-weight:600;
    cursor:pointer;
}
.fore-auth-v4__submit:hover{filter:brightness(.98);transform:translateY(-1px)}
.fore-auth-v4__terms{
    margin:3px 0 0;
    padding:16px 12px 0;
    border-top:1px solid #e7ecef;
    color:#667085;
    text-align:center;
    font-size:13px;
    line-height:1.55;
}
.fore-auth-v4__features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:2px;
    padding-top:17px;
    border-top:1px solid #e7ecef;
}
.fore-auth-v4__features span{
    display:grid;
    justify-items:center;
    gap:8px;
    min-height:78px;
    padding:3px 10px;
    color:#0e4b5a;
    text-align:center;
    font-size:13px;
}
.fore-auth-v4__features span+span{border-left:1px solid #e2e8ec}
.fore-auth-v4__features i{color:#ff5f12;font-size:25px}
.fore-auth-v4__features b{font-weight:500;line-height:1.3}
.fore-auth-v4__switch{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:16px;
    color:#667085;
    font-size:13px;
}
.fore-auth-v4__footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
    margin-top:auto;
    padding-top:20px;
}
.fore-auth-v4__footer nav{display:flex;gap:18px}
.fore-auth-v4__footer a{color:#0e4b5a;text-decoration:none;font-size:13px}
.fore-auth-v4__footer .technology-credit{
    padding-left:28px;
    border-left:1px solid #dce4e8;
}
.fore-auth-v4__footer .technology-credit img{width:72px!important;height:34px!important;object-fit:contain}
.fore-auth-v4__footer .technology-credit strong{font-size:13px!important;color:#263b49!important}
.fore-auth-v4__footer .technology-credit>span{font-size:12px!important;color:#667085!important}

@media(max-width:1050px){
    .fore-auth-v4__page{grid-template-columns:1fr}
    .fore-auth-v4__visual{display:none}
    .fore-auth-v4__content{min-height:100vh;padding:86px 28px 28px}
    .fore-auth-v4__motto{top:24px;right:28px;left:28px;justify-content:center}
    .fore-auth-v4__card{margin:30px auto 24px}
}
@media(max-width:620px){
    .fore-auth-v4__content{padding:74px 16px 20px}
    .fore-auth-v4__motto{font-size:9px;gap:6px}
    .fore-auth-v4__card{padding:30px 22px 26px;border-radius:16px}
    .fore-auth-v4__logo{width:110px;height:96px}
    .fore-auth-v4__card h1{font-size:26px}
    .fore-auth-v4__row{align-items:flex-start;flex-direction:column;gap:7px}
    .fore-auth-v4__features{grid-template-columns:1fr}
    .fore-auth-v4__features span+span{border-left:0;border-top:1px solid #e2e8ec;padding-top:12px}
    .fore-auth-v4__footer{flex-direction:column;gap:14px}
    .fore-auth-v4__footer .technology-credit{padding-left:0;border-left:0}
}

/* Dedicated FORE Mail top identity */
.fore-mail-layout .top-header{
    min-height:64px;
    border-bottom:1px solid #dfe7eb;
    background:#fff;
}
.fore-mail-layout-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#0e4b5a;
    text-decoration:none;
}
.fore-mail-layout-brand img{
    width:34px;height:34px;object-fit:contain;
}
.fore-mail-layout-brand span{display:flex;align-items:baseline;gap:12px}
.fore-mail-layout-brand strong{font-size:17px;font-weight:650}
.fore-mail-layout-brand small{
    padding-left:12px;
    border-left:1px solid #dce4e8;
    color:#728391;
    font-size:11px;
    font-weight:400;
}
.fore-mail-layout .signed-in-user{gap:8px}
.fore-mail-layout .btn.btn-secondary.btn-compact{
    min-height:36px;
    border-radius:8px;
    font-size:13px;
    font-weight:500;
}

/* Set FORE Mail password — approved security-card direction */
.mail-credential-shell--v4{
    position:relative;
    min-height:calc(100vh - 128px);
    padding:72px 24px 120px;
    overflow:hidden;
    background:
      radial-gradient(circle at 20% 20%,rgba(47,143,78,.08),transparent 30%),
      radial-gradient(circle at 85% 20%,rgba(56,130,246,.06),transparent 28%),
      #f5f8fa;
}
.mail-credential-shell--v4:after{
    content:"";
    position:absolute;
    left:-4%;right:-4%;bottom:0;
    height:130px;
    background:linear-gradient(172deg,transparent 0 24%,rgba(14,75,90,.90) 25% 43%,rgba(255,107,26,.72) 44% 63%,rgba(14,75,90,.35) 64% 72%,transparent 73%);
    opacity:.30;
    pointer-events:none;
}
.mail-credential-brandline{
    position:absolute;
    left:34px;top:30px;
    display:flex;align-items:center;gap:10px;
    color:#0e4b5a;
}
.mail-credential-brandline img{width:42px;height:42px;object-fit:contain}
.mail-credential-brandline strong,.mail-credential-brandline span{display:block}
.mail-credential-brandline strong{font-size:15px;font-weight:650}
.mail-credential-brandline span{color:#728391;font-size:11px}
.mail-credential-motto{
    position:absolute;right:34px;top:34px;
    display:grid;grid-template-columns:auto 10px auto 10px auto;gap:8px;align-items:center;
    color:#0e4b5a;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase
}
.mail-credential-motto i{width:3px;height:3px;border-radius:50%;background:#ff6b1a}
.mail-credential-motto small{grid-column:1/-1;justify-self:end;margin-top:3px;color:#6b7f8c;font-size:9px;letter-spacing:.2em}
.mail-credential-card--v4{
    position:relative;z-index:2;
    width:min(500px,100%);
    margin:0 auto;
    padding:34px;
    border:1px solid #dce5ea;
    border-radius:18px;
    background:#fff;
    box-shadow:0 20px 55px rgba(9,46,65,.12);
}
.mail-credential-card--v4 .mail-credential-heading h1{font-size:24px;font-weight:650;color:#0e4b5a}
.mail-credential-card--v4 .eyebrow{color:#2f8f4e;font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.mail-credential-card--v4 .mail-password-input{height:48px;border-radius:8px;border-color:#d6e0e6}
.mail-credential-card--v4 .mail-credential-actions .btn-primary{background:#2f8f4e;border-color:#2f8f4e}
.mail-credential-card--v4>.technology-credit{justify-content:flex-start;margin-top:22px;padding-top:16px;border-top:1px solid #e6ecef}
@media(max-width:760px){.mail-credential-brandline,.mail-credential-motto{display:none}.mail-credential-shell--v4{padding-top:30px}}

/* ==========================================================================
   FORE Enterprise UI V5 — final auth refinement
   Unified centered shell + structured hero content + symmetric sign-in card
   ========================================================================== */
.fore-auth-v4{
    min-height:100vh;
    overflow:auto;
    background:
      radial-gradient(circle at 16% 18%,rgba(255,107,26,.11),transparent 30%),
      radial-gradient(circle at 84% 16%,rgba(14,75,90,.16),transparent 34%),
      radial-gradient(circle at 50% 100%,rgba(47,143,78,.08),transparent 34%),
      linear-gradient(135deg,#eef5f4 0%,#f8fafb 48%,#f4f0ed 100%);
}
.fore-auth-v4__page{
    width:min(1420px,calc(100vw - 48px));
    min-height:min(860px,calc(100vh - 48px));
    margin:24px auto;
    grid-template-columns:minmax(0,1.02fr) minmax(500px,.98fr);
    overflow:hidden;
    border:1px solid rgba(214,225,231,.92);
    border-radius:26px;
    background:rgba(255,255,255,.82);
    box-shadow:0 32px 90px rgba(11,55,72,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.fore-auth-v4__visual{
    position:relative;
    min-height:810px;
    overflow:hidden;
    background-image:url('/images/fore-staff-login-hero.webp')!important;
    background-position:center center;
    border-radius:25px 0 0 25px;
}
.fore-auth-v4__visual:before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg,rgba(4,53,70,.92) 0 36%,rgba(4,53,70,.54) 55%,rgba(4,53,70,.10) 78%,rgba(4,53,70,.02) 100%),
      linear-gradient(180deg,rgba(4,53,70,.08),rgba(4,53,70,.34));
    pointer-events:none;
}
.fore-auth-v5__hero-panel{
    position:absolute;
    z-index:2;
    top:34px;
    bottom:34px;
    left:30px;
    width:min(315px,46%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:28px 26px 24px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(4,51,68,.74),rgba(4,51,68,.58));
    box-shadow:0 18px 54px rgba(2,31,43,.22);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#fff;
}
.fore-auth-v5__hero-logo{
    width:126px;
    height:104px;
    margin:0 0 16px;
    object-fit:contain;
    object-position:left center;
    filter:drop-shadow(0 5px 14px rgba(0,0,0,.10));
}
.fore-auth-v5__established{
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:12px;
    font-weight:500;
    letter-spacing:.01em;
}
.fore-auth-v5__established span{color:#ff6b1a;margin:0 3px}
.fore-auth-v5__accent{width:48px;height:3px;margin:14px 0;border-radius:3px;background:#ff6b1a}
.fore-auth-v5__hero-panel h2{
    margin:0;
    color:#fff;
    font-size:clamp(30px,3vw,42px);
    line-height:1.02;
    font-weight:650;
    letter-spacing:-.035em;
}
.fore-auth-v5__hero-panel h2 em{color:#ff6b1a;font-style:normal}
.fore-auth-v5__hero-copy{
    margin:18px 0 18px;
    max-width:28ch;
    color:rgba(255,255,255,.91);
    font-size:14px;
    line-height:1.55;
    font-weight:400;
}
.fore-auth-v5__hero-values{display:grid;gap:10px;margin-top:auto;width:100%}
.fore-auth-v5__hero-values span{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px}
.fore-auth-v5__hero-values i{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(255,107,26,.46);border-radius:50%;color:#ff7a2a;background:rgba(255,255,255,.04)}
.fore-auth-v5__hero-values b{font-size:12.5px;line-height:1.25;font-weight:550}
.fore-auth-v5__hero-tagline{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.17);color:rgba(255,255,255,.75);font-size:9.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase}

.fore-auth-v4__content{
    min-height:810px;
    padding:52px clamp(40px,4.2vw,70px) 30px;
    background:
      radial-gradient(circle at 84% 10%,rgba(14,75,90,.055),transparent 32%),
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(249,251,252,.94));
}
.fore-auth-v4__motto{top:30px;right:clamp(40px,4.2vw,70px);font-size:10px;gap:8px}
.fore-auth-v4__motto small{font-size:9px}
.fore-auth-v4__card{
    width:min(520px,100%);
    margin:62px auto 24px;
    padding:32px 40px 30px;
    border:1px solid #dfe7eb;
    border-radius:20px;
    box-shadow:0 20px 52px rgba(12,50,70,.095);
}
.fore-auth-v4__logo{width:112px;height:92px;margin-bottom:8px}
.fore-auth-v4__mail-icon{width:58px;height:58px;font-size:25px;margin-bottom:10px}
.fore-auth-v4__card h1{font-size:28px;font-weight:620}
.fore-auth-v4__lead{margin:6px 0 24px;font-size:14.5px}
.fore-auth-v4__form{gap:13px}
.fore-auth-v4__input{height:50px;border-radius:8px}
.fore-auth-v4__input input,.fore-auth-v4__eye{height:48px}
.fore-auth-v4__field label{font-size:12.5px;font-weight:550}
.fore-auth-v4__row{min-height:34px}
.fore-auth-v4__remember,.fore-auth-v4__row a,.fore-auth-v4__switch a{font-size:13px}
.fore-auth-v4__submit{min-height:50px;border-radius:8px;font-size:16px}
.fore-auth-v4__terms{font-size:12px;line-height:1.5;padding-top:14px}
.fore-auth-v4__features{padding-top:14px}
.fore-auth-v4__features span{min-height:70px;font-size:12px;gap:6px}
.fore-auth-v4__features i{font-size:22px}
.fore-auth-v4__footer{margin-top:auto;padding-top:16px;gap:26px}

@media(max-width:1180px){
    .fore-auth-v4__page{grid-template-columns:minmax(420px,.9fr) minmax(480px,1.1fr)}
    .fore-auth-v5__hero-panel{width:min(290px,52%);left:22px;top:24px;bottom:24px;padding:24px 21px}
    .fore-auth-v5__hero-panel h2{font-size:32px}
}
@media(max-width:980px){
    .fore-auth-v4__page{width:min(720px,calc(100vw - 30px));grid-template-columns:1fr;min-height:auto;margin:15px auto}
    .fore-auth-v4__visual{display:block;min-height:340px;border-radius:24px 24px 0 0;background-position:center 28%}
    .fore-auth-v4__visual:before{background:linear-gradient(90deg,rgba(4,53,70,.90),rgba(4,53,70,.38),rgba(4,53,70,.08))}
    .fore-auth-v5__hero-panel{top:18px;bottom:18px;left:18px;width:min(330px,55%);padding:18px 20px}
    .fore-auth-v5__hero-logo{width:92px;height:72px;margin-bottom:8px}
    .fore-auth-v5__hero-copy{font-size:12px;margin:10px 0}
    .fore-auth-v5__hero-values{display:none}
    .fore-auth-v5__hero-tagline{margin-top:auto}
    .fore-auth-v4__content{min-height:auto;padding:72px 28px 24px}
    .fore-auth-v4__motto{top:24px;right:28px;left:28px;justify-content:center}
    .fore-auth-v4__card{margin:22px auto}
}
@media(max-width:620px){
    .fore-auth-v4__page{width:calc(100vw - 18px);margin:9px auto;border-radius:18px}
    .fore-auth-v4__visual{min-height:270px;border-radius:17px 17px 0 0}
    .fore-auth-v5__hero-panel{left:12px;top:12px;bottom:12px;width:64%;padding:14px 15px;border-radius:14px}
    .fore-auth-v5__hero-logo{width:74px;height:58px}
    .fore-auth-v5__established{font-size:10px}
    .fore-auth-v5__accent{margin:9px 0;width:36px}
    .fore-auth-v5__hero-panel h2{font-size:24px}
    .fore-auth-v5__hero-copy{font-size:10.5px;line-height:1.45}
    .fore-auth-v5__hero-tagline{font-size:8px;padding-top:8px}
    .fore-auth-v4__content{padding:66px 14px 16px}
    .fore-auth-v4__card{padding:26px 20px 24px;border-radius:15px}
}

/* V5.1 — left hero micro-navigation and logo clarity */
.fore-auth-v5__hero-kicker{
    width:100%;
    margin:0 0 14px;
    padding:0 0 12px;
    border-bottom:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.86);
    text-align:center;
}
.fore-auth-v5__hero-kicker>div{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:8.5px;
    font-weight:650;
    letter-spacing:.16em;
    text-transform:uppercase;
    white-space:nowrap;
}
.fore-auth-v5__hero-kicker>div i{
    width:3px;
    height:3px;
    flex:0 0 auto;
    border-radius:50%;
    background:#ff6b1a;
}
.fore-auth-v5__hero-kicker small{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.72);
    font-size:7.8px;
    font-weight:600;
    letter-spacing:.17em;
    text-transform:uppercase;
}
.fore-auth-v5__hero-logo-wrap{
    display:inline-grid;
    place-items:center;
    margin:0 0 14px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;
    background:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.fore-auth-v5__hero-logo-wrap .fore-auth-v5__hero-logo{
    margin:0;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.12)) brightness(1.12) contrast(1.08);
}
@media(max-width:1180px){
    .fore-auth-v5__hero-kicker{margin-bottom:10px;padding-bottom:9px}
    .fore-auth-v5__hero-kicker>div{font-size:7.7px;gap:5px;letter-spacing:.12em}
    .fore-auth-v5__hero-kicker small{font-size:7px;margin-top:5px}
    .fore-auth-v5__hero-logo-wrap{margin-bottom:10px;padding:6px 9px}
}
@media(max-width:620px){
    .fore-auth-v5__hero-kicker{display:none}
    .fore-auth-v5__hero-logo-wrap{padding:5px 7px;margin-bottom:7px;border-radius:10px}
}