/* FreightIQHub Brand Colour Palette */
:root {
    /* Primary - Verico Blue: Trust, security, authority, compliance */
    --verico-blue: #0D2A45;
    /* Secondary - Verify Blue: Technology, verification, call-to-action */
    --verify-blue: #1F6AE1;
    --verify-blue-hover: #1857c2;
    /* Accent - Compliance Green: Approved, verified, success */
    --compliance-green: #2FBF71;
    /* Warning - Risk Amber: Attention, expiring, action required */
    --risk-amber: #F5A623;
    /* Error - Alert Red: Non-compliance, rejection, risk */
    --alert-red: #D64545;
    /* Neutrals */
    --charcoal-text: #1E1E1E;
    --slate-grey: #6B7280;
    --light-grey-bg: #F4F6F8;
    --white: #FFFFFF;
    --border-color: #E5E7EB;

    /* Semantic mappings for compatibility */
    --primary-color: var(--verify-blue);
    --primary-hover: var(--verify-blue-hover);
    --secondary-color: var(--slate-grey);
    --success-color: var(--compliance-green);
    --danger-color: var(--alert-red);
    --warning-color: var(--risk-amber);
    --background-color: var(--light-grey-bg);
    --text-color: var(--charcoal-text);
    --heading-color: var(--verico-blue);

    --nav-height: 64px;
    --footer-height: 50px;
}

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

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Page layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header/Navigation */
.top-row {
    height: var(--nav-height);
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 1rem;
}

.brand {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--verico-blue);
    text-decoration: none;
    letter-spacing: -0.025em;
    flex-shrink: 0;
}

.brand:hover {
    color: var(--verico-blue);
}

/* Mobile hamburger toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    order: 1;
    margin-left: auto;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--verico-blue);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Navigation container */
.nav-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Navigation menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0;
}

.nav-link {
    display: block;
    padding: 0.5rem 0.875rem;
    color: var(--slate-grey);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--verify-blue);
    background-color: rgba(31, 106, 225, 0.08);
}

.nav-link.active {
    color: var(--verify-blue);
    background-color: rgba(31, 106, 225, 0.1);
}

/* Navigation dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.nav-dropdown-toggle.open .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 1001;
}

.nav-dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--charcoal-text);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: background-color 0.2s, color 0.2s;
}

.nav-dropdown-item:hover {
    background-color: var(--light-grey-bg);
    color: var(--verify-blue);
}

.nav-dropdown-item.active {
    color: var(--verify-blue);
    background-color: rgba(31, 106, 225, 0.08);
}

/* Navigation submenu (nested dropdown) */
.nav-submenu {
    position: relative;
}

.nav-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.submenu-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.nav-submenu-toggle.open .submenu-arrow {
    transform: rotate(90deg);
}

.nav-submenu-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--light-grey-bg);
}

.nav-submenu-menu.open {
    display: block;
}

.nav-submenu-menu .nav-dropdown-item {
    padding-left: 2rem;
    font-size: 0.875rem;
}

/* Nested submenu (third level - e.g., Fuel under Master Data) */
.nav-nested-submenu {
    position: relative;
}

.nav-nested-submenu-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--light-grey-bg);
}

.nav-nested-submenu-menu.open {
    display: block;
}

.nav-nested-submenu-menu .nav-dropdown-item {
    padding-left: 3rem;
    font-size: 0.875rem;
}

/* Page header */
.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
}

.page-description {
    color: var(--slate-grey);
    margin: 0;
    font-size: 1rem;
}

/* Headings use Verico Blue */
h1, h2, h3, h4, h5, h6 {
    color: var(--verico-blue);
}

/* Auth display */
.auth-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-left: auto;
}

.user-name {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--charcoal-text);
}

.btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--verify-blue);
    text-decoration: none;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.btn-logout:hover {
    background-color: var(--verify-blue-hover);
}

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background-color: var(--verify-blue);
    text-decoration: none;
    border-radius: 9999px;
    transition: background-color 0.2s;
}

.btn-login:hover {
    background-color: var(--verify-blue-hover);
}

.btn-get-started {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    text-decoration: none;
    border-radius: 9999px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-left: 0.5rem;
}

.btn-get-started:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Main content */
.main-content {
    flex: 1;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.content {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Footer */
.footer {
    height: var(--footer-height);
    background-color: white;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
    color: var(--secondary-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary {
    color: white;
    background-color: var(--verify-blue);
}

.btn-primary:hover {
    background-color: var(--verify-blue-hover);
}

.btn-secondary {
    color: var(--charcoal-text);
    background-color: var(--white);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--light-grey-bg);
    border-color: var(--slate-grey);
}

.btn-success {
    color: white;
    background-color: var(--compliance-green);
}

.btn-success:hover {
    background-color: #27a862;
}

.btn-danger {
    color: white;
    background-color: var(--alert-red);
}

.btn-danger:hover {
    background-color: #c13a3a;
}

/* Loading indicator */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Access denied */
.access-denied {
    text-align: center;
    padding: 2rem;
}

.access-denied h1 {
    color: var(--danger-color);
}

/* Dashboard */
.dashboard-section {
    margin-top: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    background-color: var(--background-color);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.stat-card h3 {
    margin: 0 0 0.5rem 0;
    color: var(--secondary-color);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.stat-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: var(--verico-blue);
}

/* Profile */
.profile-section {
    margin-bottom: 2rem;
}

.profile-info {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0.5rem 1rem;
}

.profile-info dt {
    font-weight: 600;
    color: var(--secondary-color);
}

.profile-info dd {
    margin: 0;
}

/* Claims table */
.claims-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.claims-table th,
.claims-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.claims-table th {
    background-color: var(--background-color);
    font-weight: 600;
}

.claims-table td:first-child {
    font-family: monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

/* Admin */
.admin-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--background-color);
    border-radius: 8px;
}

.warning-text {
    color: #92631d;
    background-color: rgba(245, 166, 35, 0.15);
    padding: 1rem;
    border-radius: 4px;
    border-left: 4px solid var(--risk-amber);
}

/* Success states */
.success-message {
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    background-color: rgba(47, 191, 113, 0.1);
    border: 1px solid rgba(47, 191, 113, 0.3);
    border-radius: 6px;
    color: #1a7a47;
    font-size: 0.875rem;
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-success {
    background-color: rgba(47, 191, 113, 0.15);
    color: #1a7a47;
}

.badge-warning {
    background-color: rgba(245, 166, 35, 0.15);
    color: #92631d;
}

.badge-danger {
    background-color: rgba(214, 69, 69, 0.15);
    color: var(--alert-red);
}

.badge-info {
    background-color: rgba(31, 106, 225, 0.15);
    color: var(--verify-blue);
}

/* Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ni42MDYgNTIuMjY1OEwyODkuMzk0IDc0LjczNDJDMjkwLjE4NyA3NS41MTY0IDI5MC42OCA3Ni42MTc2IDI5MC42OCA3Ny44MjkyQzI5MC42OCA3OS4wNDA4IDI5MC4xODcgODAuMTQyIDI4OS4zOTQgODAuOTI0MkwyODkuMzk0IDgwLjkyNDJMMjY2LjYwNiA5My4yNjU4QzI2NS44MTMgOTQuMDQ3OSAyNjQuNzE3IDk0LjUzMTcgMjYzLjUwNiA5NC41MzE3QzI2MS4wNjEgOTQuNTMxNyAyNTkuMDYgOTIuNTMwOSAyNTkuMDYgOTAuMDg2MkwyNTkuMDYgNjUuNTcyMUMyNTkuMDYgNjMuMTI3NCAyNjEuMDYxIDYxLjEyNjQgMjYzLjUwNiA2MS4xMjY0QzI2NC43MTcgNjEuMTI2NCAyNjUuODEzIDYwLjY0MjggMjY2LjYwNiA1OS44NjA2TDI2Ni42MDYgNTkuODYwNkwyNjkuOTM5IDU2LjUyNzJDMjcwLjczMiA1NS43NDUxIDI3MS4yMjYgNTQuNjQzOSAyNzEuMjI2IDUzLjQzMjJDMjcxLjIyNiA1MS44NDE4IDI2OS45MDEgNTAuNTE2MiAyNjguMzE0IDUwLjUxNjJMMjYzLjUwNiA1MC41MTYyQzI2MS4wNjEgNTAuNTE2MiAyNTkuMDYgNTIuNTE3MSAyNTkuMDYgNTQuOTYxOUwyNTkuMDYgODAuMDc4QzI1OS4wNiA4Mi41MjI4IDI2MS4wNjEgODQuNTIzNyAyNjMuNTA2IDg0LjUyMzdMMjYzLjUwNiA4NC41MjM3TDI2NS43NjQgODQuNTIzN0MyNjcuMzUyIDg0LjUyMzcgMjY4LjYyOCA4NS44MDc4IDI2OC42MjggODcuMzk2MUMyNjguNjI4IDg4Ljk4NDQgMjY3LjM1MiA5MC4yNjg2IDI2NS43NjQgOTAuMjY4NkwyNTUuMjQ0IDkwLjI2ODZDMjUzLjY1NiA5MC4yNjg2IDI1Mi4zOCA4OC45ODQ0IDI1Mi4zOCA4Ny4zOTYxTDI1Mi4zOCA1NS4xODk4QzI1Mi4zOCA1MS44MjkgMjU1LjE0IDQ5LjA2OSAyNTguNTAxIDQ5LjA2OUwyODEuNDk5IDQ5LjA2OUMyODQuODU5IDQ5LjA2OSAyODcuNjIgNTEuODI5IDI4Ny42MiA1NS4xODk4TDI4Ny42MiA4Ny4zOTYxQzI4Ny42MiA4OC45ODQ0IDI4Ni4zNDQgOTAuMjY4NiAyODQuNzU2IDkwLjI2ODZDMjgzLjE2OCA5MC4yNjg2IDI4MS44OTIgODguOTg0NCAyODEuODkyIDg3LjM5NjFMMjgxLjg5MiA1NC45NjE5QzI4MS44OTIgNTIuNTE3MSAyNzkuODkxIDUwLjUxNjIgMjc3LjQ0NiA1MC41MTYyTDI2OS45MzkgNTAuNTE2MkMyNjguMzUyIDUwLjUxNjIgMjY3LjA3NiA1MS44MDA1IDI2Ny4wNzYgNTMuMzg4N0MyNjcuMDc2IDU0LjkxOCAyNjguMjgyIDU2LjE4NzcgMjY5LjgzIDU2LjI4MDNMMjY5Ljk0MiA1Ni4yODUxTDI3MC40MDkgNTYuMjg1MUMyNzEuOTM0IDU2LjI4NTEgMjczLjE4NyA1Ny41MjE0IDI3My4yNTIgNTkuMDQyMkwyNzMuMjUzIDU5LjE2MTJMMjczLjI1MyA5MC4wODYyQzI3My4yNTMgOTIuNTMwOSAyNzEuMjUyIDk0LjUzMTcgMjY4LjgwNyA5NC41MzE3TDI2OC44MDcgOTQuNTMxN0wyNTguNjE2IDk0LjUzMTdDMjU2LjE3MSA5NC41MzE3IDI1NC4xNyA5Mi41MzA5IDI1NC4xNyA5MC4wODYyTDI1NC4xNyA1My4yNTgxQzI1NC4xNyA1MS43OTI0IDI1NS4zOTQgNTAuNTY3NSAyNTYuODU5IDUwLjUxODFMMjU2Ljk4MiA1MC41MTYyTDI2My41MDYgNTAuNTE2MkMyNjUuMDk1IDUwLjUxNjIgMjY2LjM3MSA1MS44MDA1IDI2Ni4zNzEgNTMuMzg4N0MyNjYuMzcxIDU0Ljk3NyAyNjUuMDk1IDU2LjI2MTIgMjYzLjUwNiA1Ni4yNjEyTDI2My41MDYgNTYuMjYxMkwyNjIuNTEyIDU2LjI2MTJDMjYxLjE0MiA1Ni4yNjEyIDI1OS44OTEgNTcuMDYyMyAyNTkuMjQyIDU4LjI5MjlMMjU5LjE3IDU4LjQ0NTFMMjU5LjA2IDU4LjcwMzFMMjU5LjA2IDkwLjA4NjJDMjU5LjA2IDkxLjY3NDYgMjU3Ljc4MyA5Mi45NTg3IDI1Ni4xOTYgOTIuOTU4N0wyNTYuMTk2IDkyLjk1ODdMMjM4LjU2IDkyLjk1ODdDMjM2Ljk3MiA5Mi45NTg3IDIzNS42OTcgOTEuNjc0NiAyMzUuNjk3IDkwLjA4NjJMMjM1LjY5NyA3MC4xMDMxQzIzNS42OTcgNjguNTE0OCAyMzYuOTcyIDY3LjIzMDcgMjM4LjU2IDY3LjIzMDdMMjU2LjE5NiA2Ny4yMzA3QzI1Ny43ODMgNjcuMjMwNyAyNTkuMDYgNjguNTE0OCAyNTkuMDYgNzAuMTAzMUMyNTkuMDYgNzEuNjI4MyAyNTcuODUzIDcyLjg5OCAyNTYuMzA1IDcyLjk5MDdMMjU2LjE5NiA3Mi45OTU1TDI0MS4xMTkgNzIuOTk1NUMyMzkuNzUgNzIuOTk1NSAyMzguNTAxIDczLjc5NjYgMjM3Ljg1MiA3NS4wMjczTDIzNy43NzkgNzUuMTc5NUwyMzcuNjcgNzUuNDM3NUwyMzcuNjcgODQuNzg5N0MyMzcuNjcgODYuMTU5MyAyMzguNDcgODcuNDA5OSAyMzkuNzAxIDg4LjA1OUwyMzkuODUzIDg4LjEzMDlMMjQwLjExMSA4OC4yNDIyTDI1NC41OTcgODguMjQyMkMyNTUuOTY3IDg4LjI0MjIgMjU3LjIxNyA4Ny40NDExIDI1Ny44NjcgODYuMjEwNUwyNTcuOTM5IDg2LjA1ODJMMjU4LjA0OCA4NS44MDAxTDI1OC4wNDggNzMuNTY3OEMyNTguMDQ4IDcyLjE5ODIgMjU3LjI0NyA3MC45NDc1IDI1Ni4wMTYgNzAuMjk4NEwyNTUuODY0IDcwLjIyNjVMMjU1LjYwNiA3MC4xMTUyTDI0NS4wODYgNzAuMTE1MkMyNDMuNDk4IDcwLjExNTIgMjQyLjIyMiA2OC44MzExIDI0Mi4yMjIgNjcuMjQyN0MyNDIuMjIyIDY1LjY1NDQgMjQzLjQ5OCA2NC4zNzAyIDI0NS4wODYgNjQuMzcwMkwyNjAuNzI4IDY0LjM3MDJDMjYyLjMxNiA2NC4zNzAyIDI2My41OTIgNjUuNjU0NCAyNjMuNTkyIDY3LjI0MjdMMjYzLjU5MiA4Ny4zNjYyQzI2My41OTIgODguOTU0NiAyNjIuMzE2IDkwLjIzODcgMjYwLjcyOCA5MC4yMzg3TDI2MC43MjggOTAuMjM4N0wyNDMuMDkyIDkwLjIzODdDMjQxLjUwNCA5MC4yMzg3IDI0MC4yMjkgODguOTU0NiAyNDAuMjI5IDg3LjM2NjJMMjQwLjIyOSA3My41Njc4QzI0MC4yMjkgNzEuOTc5NSAyNDEuNTA0IDcwLjY5NTMgMjQzLjA5MiA3MC42OTUzTDI2MC43MjggNzAuNjk1M0MyNjIuMzE2IDcwLjY5NTMgMjYzLjU5MiA3MS45Nzk1IDI2My41OTIgNzMuNTY3OEwyNjMuNTkyIDg0Ljc4OTdDMjYzLjU5MiA4NS40OTQ1IDI2My4zMjYgODYuMTgwOSAyNjIuODM2IDg2LjcxNjZMMjYyLjcxOCA4Ni44MzE3TDI2Mi41ODQgODYuOTM5OEwyNjEuNTkgODcuNjgzN0MyNjAuMjg3IDg4LjYxMTkgMjU4LjQ3MiA4OC4yNjkgMjU3LjU0NCA4Ni45NjYzTDI1Ny40MzQgODYuODAyMUwyNTYuNjkgODUuODA4TDI1Ni42OSA3NC43NjMyQzI1Ni42OSA3NC4wNTg0IDI1Ni45NTYgNzMuMzcyIDI1Ny40NDYgNzIuODM2M0wyNTcuNTY0IDcyLjcyMTJMMjU3LjY5OCA3Mi42MTMxTDI2NC44OTggNjcuMjMwN0wyNjguMzYgNjQuNDkzOEwyNjguMzYgNTkuMTYxMkMyNjguMzYgNTguNDU2NCAyNjguMDk0IDU3Ljc3IDI2Ny42MDQgNTcuMjM0M0wyNjcuNDg2IDU3LjExOTJMMjY3LjM1MiA1Ny4wMTFMMjY0Ljg5OCA1NS4yNjIzQzI2NC4wMzQgNTQuNjUwNiAyNjMuNTkyIDUzLjYzNjkgMjYzLjU5MiA1Mi41NzI0TDI2My41OTIgNTEuOTY4MkMyNjMuNTkyIDUxLjQzNCAyNjMuODI1IDUwLjk0NDkgMjY0LjIgNTAuNjEyM0wyNjQuMzM0IDUwLjUwMzVMMjY0LjQzMyA1MC40Mjc1TDI2NC40OTYgNTAuMzg4MUMyNjQuOTI0IDUwLjE0MzkgMjY1LjQxMiA1MC4wMDY1IDI2NS45MTcgNTAuMDAwNUwyNjYuMDQyIDUwTDI2Ni4wNDIgNTBMMjY2LjA0MiA1MEwyNjYuMjc2IDUwLjAwNjdDMjY3LjExIDUwLjA0OTYgMjY3Ljg4MiA1MC40NDkyIDI2OC40MjkgNTEuMDg3TDI2OC41NTkgNTEuMjUwM0wyNjguNjU5IDUxLjQxMDVMMjgxLjY2OCA2Ny4wODIzQzI4Mi40ODMgNjguMDg1OCAyODIuNzU2IDY5LjQwNDcgMjgyLjQwMyA3MC42MjkyTDI4Mi4zMjUgNzAuODYzNkwyODIuMjMyIDcxLjA4OTdMMjc2LjMxMyA4Mi4yNjM1QzI3NS42NzEgODMuNDg2OSAyNzQuMzk5IDg0LjI1OTggMjczLjAxMyA4NC4yNTk4TDI3Mi44NjYgODQuMjU2NEwyNzIuNzE5IDg0LjI0NjRMMjcyLjU3NCA4NC4yMjk5TDI2OC4zMzIgODMuNjA4NEMyNjYuNzU2IDgzLjM3MjggMjY1LjY0NyA4MS45MDk1IDI2NS44ODMgODAuMzMzNEMyNjYuMTE4IDc4Ljc1NzIgMjY3LjU4MiA3Ny42NDgzIDI2OS4xNTggNzcuODgzOUwyNjkuMTU4IDc3Ljg4MzlMMjcxLjY4NiA3OC4yNTc3TDI3NS43MTIgNzAuMjE4MkwyNjQuNTMzIDU2LjYyOTRMMjY0LjUzMyA1MC41MTYyTDI2My41MDYgNTAuNTE2MkMyNjEuMjg5IDUwLjUxNjIgMjU5LjQ4OCA1Mi4xODMyIDI1OS4yNTQgNTQuMzQ2NkwyNTkuMjQyIDU0LjU0ODFMMjU5LjIzNyA1NC43NDk2TDI1OS4yMzcgODQuMTM5MkMyNTkuMjM3IDg2LjM1NjMgMjU3LjU3IDg4LjE1NzQgMjU1LjQwNyA4OC4zOTFMMjU1LjIwNSA4OC40MDMyTDI1NS4wMDQgODguNDA4N0wyNDIuNDkgODguNDA4N0MyNDAuMjczIDg4LjQwODcgMjM4LjQ3MiA4Ni43NDE3IDIzOC4yMzggODQuNTc4M0wyMzguMjI2IDg0LjM3NjhMMjM4LjIyIDg0LjE3NTNMMjM4LjIyIDc1LjQzNzVDMjM4LjIyIDczLjIyMDUgMjM5Ljg4NyA3MS40MTkzIDI0Mi4wNSA3MS4xODU4TDI0Mi4yNTIgNzEuMTczNkwyNDIuNDUzIDcxLjE2OEwyNTUuMDE3IDcxLjE2OEMyNTcuMjM0IDcxLjE2OCAyNTkuMDM1IDcyLjgzNTEgMjU5LjI2OSA3NC45OTg1TDI1OS4yODEgNzUuMkwyNTkuMjg3IDc1LjQwMTZMMjU5LjI4NyA4MS4zOTM1QzI1OS4yODcgODIuODI3MyAyNTguMTM2IDg0LjAxNDcgMjU2LjcxNyA4NC4wNzI5TDI1Ni41NzQgODQuMDc2MkwyNDUuMzU5IDg0LjA3NjJDMjQzLjkyNSA4NC4wNzYyIDI0Mi43MzcgODIuOTI0OCAyNDIuNjc5IDgxLjUwNTVMMjQyLjY3NiA4MS4zNjI0TDI0Mi42NzYgNzguNzA4MUMyNDIuNjc2IDc3LjI3NDQgMjQzLjgyNyA3Ni4wODcgMjQ1LjI0NiA3Ni4wMjg4TDI0NS4zODkgNzYuMDI1NUwyNTMuNzI1IDc2LjAyNTVDMjU1LjE1OSA3Ni4wMjU1IDI1Ni4zNDcgNzcuMTc2OSAyNTYuNDA1IDc4LjU5NjFMMjU2LjQwOCA3OC43MzkzTDI1Ni40MDggODAuMTg5OEwyNTAuMjYyIDgwLjE4OThMMjQ2LjU2MyA4MC4xODk4TDI0Ni41NjMgODEuMTkzMUwyNTMuMDg0IDgxLjE5MzFMMjU1LjU3MiA4MS4xOTMxTDI1NS41NzIgNzUuNDAxNkMyNTUuNTcyIDc1LjA4NiAyNTUuMzc3IDc0LjgxMzEgMjU1LjA5NiA3NC42ODk5TDI1NC45NzkgNzQuNjQ5TDI1NC44NTMgNzQuNjI1MUwyNDIuMjg5IDc0Ljg4MzFDMjQxLjk3NCA3NC44ODMxIDI0MS43MDEgNzUuMDc3OCAyNDEuNTc4IDc1LjM1ODlMMjQxLjUzNyA3NS40NzU3TDI0MS41MTMgNzUuNjAxN0wyNDEuNTEzIDgzLjcwMDRDMjQxLjUxMyA4NC4wMTYgMjQxLjcwNyA4NC4yODg5IDI0MS45ODkgODQuNDEyMUwyNDIuMTA1IDg0LjQ1M0wyNDIuMjMyIDg0LjQ3NjlMMjU0Ljk3MiA4NC4yMTg5QzI1NS4yODggODQuMjE4OSAyNTUuNTYxIDg0LjAyNDIgMjU1LjY4NCA4My43NDMxTDI1NS43MjUgODMuNjI2M0wyNTUuNzQ5IDgzLjUwMDNMMjU1Ljc0OSA1NC45NjE5QzI1NS43NDkgNTQuMTI0NiAyNTYuMTc4IDUzLjM2OTYgMjU2Ljg0OCA1Mi45MTc5TDI1Ni45OTkgNTIuODI4NEwyNTcuMTU5IDUyLjc1NzRDMjU3LjUwMyA1Mi42MjgyIDI1Ny44NzUgNTIuNTU4NCAyNTguMjYxIDUyLjU1NEwyNTguNDA0IDUyLjU1NEwyNjMuNTA2IDUyLjU1NEMyNjQuMzQ0IDUyLjU1NCAyNjUuMDk5IDUyLjk4MjcgMjY1LjU1IDUzLjY1MjVMMjY1LjY0IDUzLjgwMzRMMjY1LjcxMSA1My45NjMzQzI2NS44NCA1NC4zMDc0IDI2NS45MSA1NC42NzkyIDI2NS45MTQgNTUuMDY1NUwyNjUuOTE0IDU1LjIwODdMMjY1LjkxNCA4NS45OTY1QzI2NS45MTQgODYuODMzOSAyNjUuNDg1IDg3LjU4ODkgMjY0LjgxNSA4OC4wNDA1TDI2NC42NjUgODguMTNMMjY0LjUwNCA4OC4yMDFDMjY0LjE2IDg4LjMzMDIgMjYzLjc4OCA4OC40IDI2My40MDIgODguNDA0NEwyNjMuMjU5IDg4LjQwNDRMMjU4LjE1NyA4OC40MDQ0QzI1Ny4zMiA4OC40MDQ0IDI1Ni41NjUgODcuOTc1NyAyNTYuMTEzIDg3LjMwNTlMMjU2LjAyMyA4Ny4xNTVMMjU1Ljk1MyA4Ni45OTUxQzI1NS44MjMgODYuNjUxIDI1NS43NTQgODYuMjc5MSAyNTUuNzQ5IDg1Ljg5MjlMMjU1Ljc0OSA1NC45NjE5QzI1NS43NDkgNTQuMTI0NiAyNTYuMTc4IDUzLjM2OTYgMjU2Ljg0OCA1Mi45MTc5TDI1Ni45OTkgNTIuODI4NEwyNTcuMTU5IDUyLjc1NzRDMjU3LjUwMyA1Mi42MjgyIDI1Ny44NzUgNTIuNTU4NCAyNTguMjYxIDUyLjU1NEwyNTguNDA0IDUyLjU1NEwyNjMuNTA2IDUyLjU1NEMyNjQuMzQ0IDUyLjU1NCAyNjUuMDk5IDUyLjk4MjcgMjY1LjU1IDUzLjY1MjVMMjY1LjY0IDUzLjgwMzRMMjY1LjcxMSA1My45NjMzQzI2NS44NCA1NC4zMDc0IDI2NS45MSA1NC42NzkyIDI2NS45MTQgNTUuMDY1NUwyNjUuOTE0IDU1LjIwODdMMjY1LjkxNCA4NS45OTY1QzI2NS45MTQgODYuODMzOSAyNjUuNDg1IDg3LjU4ODkgMjY0LjgxNSA4OC4wNDA1TDI2NC42NjUgODguMTNMMjY0LjUwNCA4OC4yMDFDMjY0LjE2IDg4LjMzMDIgMjYzLjc4OCA4OC40IDI2My40MDIgODguNDA0NEwyNjMuMjU5IDg4LjQwNDRMMjM1Ljk0MSA4OC40MDQ0TDIzNS45NDEgNjFaIiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Login page */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height) - 4rem);
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    color: var(--verico-blue);
}

.login-header p {
    margin: 0;
    color: var(--secondary-color);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-color);
}

.form-group input {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--verify-blue);
    box-shadow: 0 0 0 3px rgba(31, 106, 225, 0.15);
}

.form-group input::placeholder {
    color: #adb5bd;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.remember-me input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.forgot-password {
    color: var(--verify-blue);
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
    color: var(--verify-blue-hover);
}

.btn-block {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
}

.divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--secondary-color);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.divider span {
    padding: 0 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.sso-section {
    text-align: center;
}

.btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    color: var(--text-color);
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-sso:hover {
    background-color: var(--background-color);
    border-color: var(--secondary-color);
}

.sso-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.sso-hint {
    margin: 0.75rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--secondary-color);
}

.error-message {
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    background-color: rgba(214, 69, 69, 0.1);
    border: 1px solid rgba(214, 69, 69, 0.3);
    border-radius: 6px;
    color: var(--alert-red);
    font-size: 0.875rem;
}

.already-signed-in {
    text-align: center;
    padding: 1rem 0;
}

.already-signed-in p {
    margin-bottom: 1.5rem;
}

/* Responsive - Mobile navigation */
@media (max-width: 1024px) {
    .nav-toggle {
        display: flex;
    }

    .nav-container {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background-color: var(--white);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
        z-index: 999;
    }

    .nav-container.nav-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 6px;
    }

    .auth-display {
        margin-left: 0;
    }

    .user-name {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 1rem;
    }

    .main-content {
        padding: 1rem;
    }

    .content {
        padding: 1.5rem;
    }

    .profile-info {
        grid-template-columns: 1fr;
    }

    .claims-table {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .auth-display {
        gap: 0.5rem;
    }

    .btn-logout,
    .btn-login,
    .btn-get-started {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}