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

textarea, input, select, button {
    font-family: inherit;
}

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 nested submenu */
.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;
    transform: rotate(-90deg);
}

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

.nav-submenu-items {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    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;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 1002;
}

.nav-submenu-items.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

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

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1,
.page-header-row 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;
    flex-shrink: 0;
    margin-left: auto;
}

.user-dropdown {
    position: relative;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--verify-blue);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.user-dropdown-toggle:hover {
    background: var(--verify-blue-hover);
}

.user-dropdown-dev {
    background: #dc3545;
}

.user-dropdown-dev:hover {
    background: #c82333;
}

.user-greeting {
    white-space: nowrap;
}

.user-avatar-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.dropdown-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 2100;
    overflow: hidden;
}

.user-dropdown-item {
    display: block;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--charcoal-text);
    text-decoration: none;
    transition: background-color 0.15s;
}

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

.user-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.25rem 0;
}

.user-dropdown-logout {
    border-top: none;
}

.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);
}

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

.main-content:has(.full-width-mode) {
    max-width: 100%;
    padding: 0.5rem;
    overflow: hidden;
}

.main-content:has(.full-width-mode) > .content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height) - var(--footer-height) - 1rem);
    overflow: hidden;
    padding: 0.5rem;
}

.main-content:has(.full-width-mode) .page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main-content:has(.full-width-mode) .page-content > div[id="surveyCreator"] {
    flex: 1;
    min-height: 0;
}

.main-content:has(.review-full-width) {
    max-width: 100%;
    padding: 1rem;
}

.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;
}

.btn-outline {
    color: var(--primary-color);
    background-color: transparent;
    border: 1px solid var(--primary-color);
}

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

.btn-danger-outline {
    color: var(--alert-red);
    background-color: transparent;
    border: 1px solid var(--alert-red);
}

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

/* 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--wide-labels {
    grid-template-columns: 300px 1fr;
}

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

.profile-info dd {
    margin: 0;
}

/* Detail page sections */
.detail-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.detail-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
}

.detail-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal-text);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Detail page tabs */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
    display: none;
}

.detail-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--slate-grey);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.detail-tab:hover {
    color: var(--verify-blue);
}

.detail-tab.active {
    color: var(--verify-blue);
    border-bottom-color: var(--verify-blue);
    font-weight: 600;
}

.detail-tab-content {
    padding: 0.5rem 0;
}

/* ABR verification badges */
.abr-badge {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    vertical-align: middle;
}

.abr-entity-name {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.8125rem;
    color: var(--slate-grey);
    font-style: italic;
}

/* Company record notes */
.note-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.note-add-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 80px;
}

.note-add-form textarea:focus {
    outline: none;
    border-color: var(--verify-blue);
    box-shadow: 0 0 0 3px rgba(31, 106, 225, 0.1);
}

.note-add-form .btn {
    align-self: flex-end;
}

.note-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.note-text {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--navy);
    white-space: pre-wrap;
}

.note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.note-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.note-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--slate-grey);
}

.note-imported {
    background: var(--bg-light);
    border-style: dashed;
}

/* 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-invalid {
    background-color: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

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

.badge-secondary {
    background-color: rgba(108, 117, 125, 0.15);
    color: #495057;
}

/* Error UI */
/* Hide Blazor reconnect modal */
#components-reconnect-modal {
    display: none !important;
}

#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,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.form-group textarea {
    resize: vertical;
}

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

.form-group input::placeholder,
.form-group textarea::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;
}

/* Search bar */
.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-bar select,
.search-bar input[type="text"],
.search-bar input[type="date"] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar select:focus,
.search-bar input[type="text"]:focus,
.search-bar input[type="date"]:focus {
    outline: none;
    border-color: var(--verify-blue);
    box-shadow: 0 0 0 3px rgba(31, 106, 225, 0.15);
}

.search-bar input[type="text"] {
    flex: 1;
}

.search-bar input[type="text"]::placeholder {
    color: #adb5bd;
}

.record-count {
    font-size: 0.875rem;
    color: var(--slate-grey);
    margin-top: 0.75rem;
}

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

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

.data-table th {
    background-color: var(--light-grey-bg);
    font-weight: 600;
    color: var(--verico-blue);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.data-table tbody tr:hover {
    background-color: rgba(31, 106, 225, 0.04);
}

.data-table .col-date {
    width: 130px;
    white-space: nowrap;
}

.data-table .actions-column {
    width: 90px;
    text-align: right;
    white-space: nowrap;
}

/* Small button variant */
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

/* Icon-only action buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    margin-left: 0.375rem;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.btn-icon-edit {
    color: var(--verify-blue);
}

.btn-icon-edit:hover {
    background: rgba(31, 106, 225, 0.1);
    border-color: var(--verify-blue);
}

.btn-icon-delete {
    color: var(--alert-red);
}

.btn-icon-delete:hover {
    background: rgba(214, 69, 69, 0.1);
    border-color: var(--alert-red);
}

.btn-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

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

.btn-icon-resend {
    color: var(--primary-color);
}

.btn-icon-resend:hover {
    background: rgba(31, 106, 225, 0.1);
    border-color: var(--primary-color);
}

/* Admin toolbar */
.admin-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.modal-content h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
}

/* Form actions row */
.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--slate-grey);
    font-size: 1rem;
}

.last-checked-text {
    margin-top: 1rem;
    color: var(--slate-grey);
    font-size: 0.875rem;
    font-style: italic;
}

.operating-locations-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
}

/* Single-column variant: stack each row full width. Used by the
   Compliance tab Record Types grid alongside .tickbox-right so the
   tick sits at the far right edge of each row. */
.operating-locations-list.single-column {
    grid-template-columns: 1fr;
}

.operating-location-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.95rem;
    cursor: default;
}

/* Custom blue checkbox - native disabled inputs render grey, so we hide the
   native control and draw our own styled box that always shows the brand blue. */
.operating-location-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid var(--verify-blue);
    border-radius: 3px;
    background-color: var(--white);
    position: relative;
    flex-shrink: 0;
    cursor: default;
    opacity: 1;
}

.operating-location-item input[type="checkbox"]:checked {
    background-color: var(--verify-blue);
    border-color: var(--verify-blue);
}

.operating-location-item input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Tickbox-right modifier: pushes the checkbox after the label, with the
   label filling the available space. Used by the Compliance tab Record
   Types grid so the type name reads left-to-right and the tick sits at
   the right edge. Apply alongside .operating-location-item. */
.operating-location-item.tickbox-right {
    justify-content: space-between;
}

.operating-location-item.tickbox-right input[type="checkbox"] {
    order: 2;
}

.operating-location-item.tickbox-right span {
    order: 1;
    flex: 1;
}

/* Generic blue read-only tickbox. Native disabled checkboxes render grey;
   this gives them the same brand-blue treatment as the operating-locations
   grid. Apply to any standalone <input type="checkbox" disabled> that
   should read as a styled state indicator (e.g. data-table cells). */
.tickbox-blue {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    border: 1.5px solid var(--verify-blue);
    border-radius: 3px;
    background-color: var(--white);
    position: relative;
    flex-shrink: 0;
    cursor: default;
    opacity: 1;
    vertical-align: middle;
}

.tickbox-blue:checked {
    background-color: var(--verify-blue);
    border-color: var(--verify-blue);
}

.tickbox-blue:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + 1rem);
    right: 1.5rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in forwards;
    animation-delay: 0s, 3s;
    min-width: 280px;
    max-width: 420px;
}

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

.toast-error {
    background-color: var(--alert-red);
    color: var(--white);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* Validation message */
.validation-message {
    color: var(--alert-red);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Disabled button state */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Wide modal variant */
.modal-lg {
    max-width: 640px;
}

/* Audit log history */
.audit-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.audit-log-entry {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    background: var(--light-grey-bg);
}

.audit-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.audit-date {
    font-size: 0.8125rem;
    color: var(--slate-grey);
}

.audit-log-detail {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.audit-field {
    font-weight: 600;
    margin-right: 0.5rem;
}

.audit-old-value {
    color: var(--alert-red);
    text-decoration: line-through;
}

.audit-arrow {
    margin: 0 0.375rem;
    color: var(--slate-grey);
}

.audit-new-value {
    color: var(--compliance-green);
    font-weight: 500;
}

.audit-log-user {
    font-size: 0.75rem;
    color: var(--slate-grey);
    margin-top: 0.25rem;
}

/* AI Chat */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 310px);
    min-height: 300px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    background: var(--white);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-welcome {
    text-align: center;
    color: var(--slate-grey);
    padding: 2rem;
}

.chat-welcome h3 {
    color: var(--charcoal-text);
    margin-bottom: 0.5rem;
}

.prompt-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.prompt-card {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    color: var(--charcoal-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.prompt-card:hover {
    border-color: var(--verify-blue);
    box-shadow: 0 2px 8px rgba(31, 106, 225, 0.1);
}

.prompt-card-icon {
    font-size: 0.6rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.chat-message {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.chat-message-user {
    align-self: flex-end;
    background: var(--verify-blue);
    color: var(--white);
}

.chat-message-user .chat-message-label {
    color: rgba(255, 255, 255, 0.8);
}

.chat-message-assistant {
    align-self: flex-start;
    background: var(--light-grey-bg);
    color: var(--charcoal-text);
}

.chat-message-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    color: var(--slate-grey);
}

.chat-message-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}

.chat-thinking {
    font-style: italic;
    color: var(--slate-grey);
}

.chat-input-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.chat-input-form input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
}

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

.chat-input-form button {
    padding: 0.6rem 1.5rem;
}

/* Tag multi-select */
.tag-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    min-height: 42px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.tag-select-wrapper:hover {
    border-color: var(--verify-blue);
}

.tag-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    background-color: #e8f0fe;
    color: var(--verify-blue);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.tag-placeholder {
    color: #adb5bd;
    flex: 1;
}

.tag-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.tag-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}

.tag-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.1s;
}

.tag-dropdown-item:hover {
    background-color: #f8f9fa;
}

.tag-dropdown-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--verify-blue);
}

.tag-dropdown-empty {
    padding: 0.75rem;
    color: #9ca3af;
    font-size: 0.875rem;
    text-align: center;
}

/* Template Folders */
.folder-row {
    background-color: var(--light-grey-bg);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s;
}

.folder-row:hover {
    background-color: rgba(31, 106, 225, 0.04);
}

.folder-row.drag-over {
    background-color: rgba(31, 106, 225, 0.08);
    outline: 2px dashed var(--verify-blue);
    outline-offset: -2px;
}

.folder-chevron {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.folder-chevron.expanded {
    transform: rotate(90deg);
}

.uncategorized-header {
    transition: background-color 0.15s;
}

.uncategorized-header.drag-over {
    background-color: rgba(31, 106, 225, 0.08);
    outline: 2px dashed var(--verify-blue);
    outline-offset: -2px;
}

tr.dragging {
    opacity: 0.5;
}

tr[draggable="true"] {
    cursor: grab;
}

tr[draggable="true"]:active {
    cursor: grabbing;
}

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

    .user-dropdown-toggle {
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }

    .btn-login {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Wizard steps */
.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1rem 0;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.wizard-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--border-color);
    color: var(--slate-grey);
    transition: background 0.2s, color 0.2s;
}

.wizard-step .step-label {
    font-size: 0.75rem;
    color: var(--slate-grey);
    white-space: nowrap;
}

.wizard-step.active .step-number {
    background: var(--verify-blue);
    color: var(--white);
}

.wizard-step.active .step-label {
    color: var(--verify-blue);
    font-weight: 600;
}

.wizard-step.completed .step-number {
    background: var(--compliance-green);
    color: var(--white);
}

.wizard-step-connector {
    width: 60px;
    height: 2px;
    background: var(--border-color);
    margin: 0 0.5rem;
    margin-bottom: 1.25rem;
    transition: background 0.2s;
}

.wizard-step-connector.completed {
    background: var(--compliance-green);
}

.wizard-panel {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
}

.wizard-panel h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--verico-blue);
}

.wizard-panel p {
    margin: 0 0 1.5rem 0;
    color: var(--slate-grey);
    font-size: 0.9375rem;
}

/* DNS value cell - allow wrapping for long values */
.dns-value {
    word-break: break-all;
    font-size: 0.8125rem;
    font-family: 'Consolas', 'Courier New', monospace;
}

.btn-copy {
    background: none;
    border: none;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.25rem;
    transition: color 0.15s;
}

.btn-copy:hover {
    color: var(--primary-color);
}

/* Status badges for verification */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-verified {
    background: rgba(47, 191, 113, 0.15);
    color: var(--compliance-green);
}

.status-in-progress {
    background: rgba(245, 166, 35, 0.15);
    color: var(--risk-amber);
}

.status-not-started {
    background: rgba(107, 114, 128, 0.15);
    color: var(--slate-grey);
}

/* MailFrom preview */
.mailfrom-preview {
    padding: 0.75rem 1rem;
    background: var(--light-grey-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}

/* Summary table */
.summary-table td:first-child {
    width: 180px;
    color: var(--slate-grey);
}

/* Test email section */
.test-email-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.test-email-section h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.test-email-section p {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Actions column */
.col-actions {
    width: 90px;
    text-align: right;
    white-space: nowrap;
}

/* Pagination bar */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.75rem 0;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--slate-grey);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Organisation logo section */
.logo-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

img.logo-preview {
    max-height: 80px;
    object-fit: contain;
}

.logo-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.logo-file-name {
    font-size: 0.875rem;
    color: var(--slate-grey);
}

/* SurveyJS Creator container */
#surveyCreator {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

#surveyPreview {
    min-height: 200px;
}

/* API Platform */
.api-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.api-stat-card {
    flex: 1;
    min-width: 160px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}

.api-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--verico-blue);
}

.api-stat-value.api-stat-success {
    color: var(--compliance-green);
}

.api-stat-value.api-stat-error {
    color: var(--risk-red, #ef4444);
}

.api-stat-label {
    font-size: 0.8125rem;
    color: var(--slate-grey);
    margin-top: 0.25rem;
}

.api-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.api-tab {
    padding: 0.625rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--slate-grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

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

.api-tab.active {
    color: var(--verico-blue);
    border-bottom-color: var(--verico-blue);
}

.api-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.api-section-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.api-key-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--light-grey-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin: 1rem 0;
}

.api-key-display code {
    flex: 1;
    font-size: 0.875rem;
    word-break: break-all;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* API Base URL Bar & Copy Buttons */
.api-base-url-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--light-grey-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.api-base-url-bar label {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    margin: 0;
}

.api-copyable-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.api-copyable-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--slate-grey);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.btn-copy:hover {
    color: var(--verico-blue);
    border-color: var(--verico-blue);
    background: rgba(0, 102, 204, 0.05);
}

/* API Explorer */
.api-explorer-config {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--light-grey-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.api-endpoint-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.api-endpoint-card.expanded {
    border-color: var(--verico-blue);
}

.api-endpoint-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.api-endpoint-header:hover {
    background: var(--light-grey-bg);
}

.api-method-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.025em;
    flex-shrink: 0;
}

.api-method-badge.method-get {
    background: #e8f5e9;
    color: #2e7d32;
}

.api-endpoint-path {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dark-text);
    flex-shrink: 0;
}

.api-endpoint-desc {
    font-size: 0.8125rem;
    color: var(--slate-grey);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-endpoint-toggle {
    font-size: 0.75rem;
    color: var(--slate-grey);
    flex-shrink: 0;
}

.api-endpoint-body {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--light-grey-bg);
}

.api-params-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.api-params-table th {
    text-align: left;
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--slate-grey);
    border-bottom: 1px solid var(--border-color);
}

.api-params-table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.api-params-table td code {
    font-weight: 600;
}

.api-no-params {
    font-size: 0.85rem;
    color: var(--slate-grey);
    margin: 0 0 1rem;
}

.api-curl-example {
    margin-bottom: 1rem;
}

.api-curl-example label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--slate-grey);
    margin-bottom: 0.25rem;
}

.api-curl-example code {
    display: block;
    padding: 0.5rem 0.75rem;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 4px;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: nowrap;
}

.api-endpoint-actions {
    margin-bottom: 1rem;
}

.api-response {
    margin-top: 0.5rem;
}

.api-response-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.api-response-time {
    font-size: 0.8rem;
    color: var(--slate-grey);
}

.api-response-body {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: 'Consolas', 'Courier New', monospace;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
    white-space: pre;
}

/* ===== Site Page Sections ===== */

.page-toc {
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.page-toc strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gunmetal);
    font-size: 0.875rem;
}

.page-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-toc ul li a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 1rem;
    font-size: 0.8125rem;
    color: var(--verify-blue);
    text-decoration: none;
    transition: background 0.15s;
}

.page-toc ul li a:hover {
    background: #e0e7ff;
}

.site-page-section {
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.site-page-section .section-title {
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    color: var(--gunmetal);
    font-size: 1.125rem;
}

.site-page-section .section-content h4 {
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gunmetal);
}

.site-page-section .section-content p {
    margin: 0.25rem 0;
    color: #374151;
}

.site-page-section .section-image {
    margin: 0.75rem 0;
}

.site-page-section .section-image img {
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
}

.site-page-section .linked-image {
    margin: 0.75rem 0;
}

.site-page-section .linked-image img {
    border-radius: 0.375rem;
}

.site-page-section .contact-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

.site-page-section .contact-card strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--gunmetal);
}

.site-page-section .contact-card a {
    color: var(--verify-blue);
    font-size: 0.875rem;
}

.site-page-section .resource-file {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
}

.site-page-section .resource-file a {
    color: var(--verify-blue);
}

/* ===== Category Autocomplete ===== */

.category-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    z-index: 50;
    max-height: 160px;
    overflow-y: auto;
}

.category-suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.category-suggestion-item:hover {
    background: #f3f4f6;
}

/* ===== Entity Select with Logo ===== */

.entity-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    min-height: 44px;
    transition: border-color 0.2s;
}

.entity-select-trigger:hover {
    border-color: var(--verify-blue);
}

.entity-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.entity-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
}

.entity-select-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.entity-select-item:hover {
    background: #f3f4f6;
}

/* Attachment tabs */
.attachment-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #e5e7eb;
    background: #fff;
}

.attachment-tab {
    padding: 0.625rem 1.25rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

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

.attachment-tab.active {
    color: var(--verico-blue);
    border-bottom-color: var(--verico-blue);
}

/* Import drop zone */
.import-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    transition: border-color 0.15s, background 0.15s;
}

.import-drop-zone:hover,
.import-drop-zone.drag-over {
    border-color: var(--verico-blue);
    background: #eff6ff;
}