body {
    font-family: "Public Sans", "Inter", sans-serif;
}

:root {
    --scanops-field-bg: rgba(2, 6, 23, 0.9);
    --scanops-field-bg-auth: rgba(2, 6, 23, 0.55);
    --scanops-field-border: #334155;
    --scanops-field-border-auth: #1e293b;
    --scanops-field-text: #e2e8f0;
    --scanops-field-text-strong: #f8fafc;
    --scanops-field-placeholder: #64748b;
    --scanops-field-caret: #93c5fd;
    --scanops-field-focus: #3b82f6;
    --scanops-field-focus-ring: rgba(59, 130, 246, 0.2);
    --scanops-field-disabled-bg: #0f172a;
    --scanops-field-disabled-border: #1e293b;
    --scanops-field-disabled-text: #94a3b8;

    --scanops-sidebar-bg: #0f172a;
    --scanops-sidebar-bg-alt: #0b1220;
    --scanops-sidebar-border: #1e293b;
    --scanops-sidebar-divider: rgba(30, 41, 59, 0.85);
    --scanops-sidebar-text: #cbd5e1;
    --scanops-sidebar-text-muted: #94a3b8;
    --scanops-sidebar-hover-bg: rgba(30, 41, 59, 0.72);
    --scanops-sidebar-hover-border: rgba(51, 65, 85, 0.55);
    --scanops-sidebar-active-bg: rgba(37, 99, 235, 0.18);
    --scanops-sidebar-active-border: #2563eb;
    --scanops-sidebar-active-text: #bfdbfe;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}

.scanops-shell {
    background-color: #0b0e14;
    color: #e2e8f0;
}

.scanops-grid-bg {
    background-image: radial-gradient(circle, rgba(51, 65, 85, 0.38) 1px, transparent 1px);
    background-size: 24px 24px;
}

.scanops-panel {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.8);
    border-radius: 0.75rem;
}

.scanops-sidebar {
    background: linear-gradient(180deg, var(--scanops-sidebar-bg) 0%, var(--scanops-sidebar-bg-alt) 100%);
    border-right: 1px solid var(--scanops-sidebar-border);
}

.scanops-sidebar-header {
    border-bottom: 1px solid var(--scanops-sidebar-divider);
}

.scanops-sidebar-nav {
    scrollbar-color: #334155 transparent;
}

.scanops-sidebar-footer {
    border-top: 1px solid var(--scanops-sidebar-divider);
}

/* Global form field styling for dark ScanOps UI */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
textarea,
select,
.scanops-input,
.auth-input {
    background-color: var(--scanops-field-bg) !important;
    border: 1px solid var(--scanops-field-border) !important;
    border-radius: 0.5rem;
    color: var(--scanops-field-text) !important;
    -webkit-text-fill-color: var(--scanops-field-text) !important;
    caret-color: var(--scanops-field-caret);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.scanops-input,
.auth-input {
    width: 100%;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
select,
.scanops-input {
    padding: 0.625rem 0.75rem;
}

textarea {
    padding: 0.625rem 0.75rem;
}

.auth-input {
    background-color: var(--scanops-field-bg-auth) !important;
    border-color: var(--scanops-field-border-auth) !important;
    color: var(--scanops-field-text-strong) !important;
    -webkit-text-fill-color: var(--scanops-field-text-strong) !important;
    padding: 0.75rem 0.875rem;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"])::placeholder,
textarea::placeholder,
select::placeholder,
.scanops-input::placeholder,
.auth-input::placeholder {
    color: var(--scanops-field-placeholder) !important;
    opacity: 1;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus,
textarea:focus,
select:focus,
.scanops-input:focus,
.auth-input:focus,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):focus-visible,
textarea:focus-visible,
select:focus-visible,
.scanops-input:focus-visible,
.auth-input:focus-visible {
    outline: none;
    border-color: var(--scanops-field-focus) !important;
    box-shadow: 0 0 0 3px var(--scanops-field-focus-ring) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]):disabled,
textarea:disabled,
select:disabled,
.scanops-input:disabled,
.auth-input:disabled {
    background-color: var(--scanops-field-disabled-bg) !important;
    border-color: var(--scanops-field-disabled-border) !important;
    color: var(--scanops-field-disabled-text) !important;
    -webkit-text-fill-color: var(--scanops-field-disabled-text) !important;
    cursor: not-allowed;
    opacity: 0.75;
}

select option {
    background-color: #0f172a;
    color: var(--scanops-field-text);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--scanops-field-text) !important;
    caret-color: var(--scanops-field-caret);
    box-shadow: 0 0 0 1000px var(--scanops-field-bg) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--scanops-field-text-strong) !important;
    box-shadow: 0 0 0 1000px var(--scanops-field-bg-auth) inset !important;
}

input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="time"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="datetime"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.82);
}

.scanops-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    color: var(--scanops-sidebar-text-muted);
    padding: 0.6875rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: color 160ms ease-in-out, background-color 160ms ease-in-out, border-color 160ms ease-in-out;
}

button.scanops-nav-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

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

.scanops-nav-link.is-active {
    color: var(--scanops-sidebar-active-text);
    background: var(--scanops-sidebar-active-bg);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: inset 2px 0 0 var(--scanops-sidebar-active-border);
}

.doc-section {
    scroll-margin-top: 5.5rem;
}

.doc-toc-link {
    color: var(--scanops-sidebar-text-muted);
    border: 1px solid transparent;
    background: transparent;
}

.doc-toc-link:hover {
    color: var(--scanops-sidebar-text);
    background: var(--scanops-sidebar-hover-bg);
    border-color: var(--scanops-sidebar-hover-border);
}

.doc-toc-link.is-active,
.doc-toc-link.active,
.doc-toc-link[aria-current="location"] {
    color: var(--scanops-sidebar-active-text);
    background: var(--scanops-sidebar-active-bg);
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: inset 3px 0 0 var(--scanops-sidebar-active-border);
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    display: inline-block;
}