@font-face {
    font-family: "Dot Studio";
    src: url("../fonts/custom/dot-studio.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series B";
    src: url("../fonts/custom/roadgeek14-b.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series C";
    src: url("../fonts/custom/roadgeek14-c.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series D";
    src: url("../fonts/custom/roadgeek14-d.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series E";
    src: url("../fonts/custom/roadgeek14-e.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series EM";
    src: url("../fonts/custom/roadgeek14-em.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series EEM";
    src: url("../fonts/custom/roadgeek14-eem.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roadgeek 2014 Series F";
    src: url("../fonts/custom/roadgeek14-f.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EU Plate";
    src: url("../fonts/custom/plate-euro.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "US Plate";
    src: url("../fonts/custom/plate-us.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EU Plate";
    src: url("../fonts/custom/plate-euro.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "US Plate";
    src: url("../fonts/custom/plate-us.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Base typography and colors */
body {
    margin: 0;
    font-family: "Roboto", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--mud-palette-background, #fafafa);
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.navigation-bar {
    width: 100%;
    min-height: var(--mud-appbar-height, 64px);
}

.navigation-bar h6 {
    font-family: "futura-100", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.5rem;
    padding-bottom: 0.2rem;
}

.navigation-bar .mud-avatar {
    box-shadow: none;
    padding-bottom: 5px;
}

.page-shell {
    padding-top: 20px;
}

.mud-drawer-content h5 {
    margin-top: 15px;
}

.mud-main-content h4,
.mud-drawer-content h5 {
    font-family: "futura-100", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.mud-drawer .mud-typography-caption {
    font-family: "futura-book-100", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

.typekit-fonts-card {
    background-color: var(--mud-palette-surface, #ffffff);
}

.typekit-font-card {
    height: 100%;
}

.typekit-font-card .mud-stack {
    height: 100%;
}

.typekit-font-preview {
    padding: 0.75rem;
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background-color: var(--mud-palette-surface, #ffffff);
}

.typekit-empty-state {
    text-align: center;
}

.id-detail-card {
    background-color: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
}

.dashboard-activity-card {
    background-color: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.1));
    border-radius: 12px;
}

.login-shell {
    width: 100%;
    max-width: 420px;
}

.settings-section {
    background-color: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    border-radius: 12px;
    padding: 1.5rem;
}

.embed-main {
    padding: 0;
    overflow-x: hidden;
}

.embed-shell {
    padding-top: 0;
}

.embed-container.mud-container--gutters {
    padding-left: 0;
    padding-right: 0;
}

.events-embed {
    --mud-palette-primary: #3b0919;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-lighten: #3b0919;
    --mud-palette-secondary: #626262;
    --mud-palette-text-primary: #626262;
    --mud-palette-text-secondary: #7a7a7a;
    --mud-palette-divider: #e6e6e6;
    --mud-palette-background: #ffffff;
    --mud-palette-surface: #ffffff;
    background-color: #ffffff;
    color: #626262;
}

.events-embed .mud-container {
    padding-left: 0;
    padding-right: 0;
}

.events-embed-content {
    padding: 0;
}

.events-calendar-shell {
    padding: 0;
    box-shadow: none;
    border: 1px solid #e6e6e6;
}

.events-embed .mud-calendar .mud-calendar-month-cell {
    border: 1px solid #e6e6e6;
}

.events-embed-toolbar {
    flex-wrap: wrap;
}

.events-embed-toolbar .mud-badge {
    max-width: 100%;
}

.sidebar-container {
    height: 100%;
}

.sidebar-nav-groups {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-nav-menu {
    padding-left: 0.25rem;
}

.sidebar-nav-menu .mud-nav-link {
    margin-bottom: 2px;
}

.sidebar-footer {
    border-top: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
}

/* Prop template helpers */
.props-template-page .mud-card {
    background-color: var(--mud-palette-surface, #ffffff);
}

.props-template-page .mud-card-header {
    border-bottom: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
}

.props-variable-chip,
.props-monospace {
    font-family: "Roboto Mono", "Cascadia Code", "Consolas", monospace;
    font-size: 0.75rem;
}

.props-canvas-card {
    background-color: var(--mud-palette-surface, #ffffff);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.props-export-preview {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
}

.props-layer-card {
    height: 100%;
}

.props-layer-list {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.props-layer-dropzone .mud-dropzone-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.props-layer-draggable {
    display: block;
}

.props-layer-drag-handle {
    cursor: grab;
    color: var(--mud-palette-primary, #1976d2);
}

.props-layer-drag-handle:active {
    cursor: grabbing;
}

.props-layer-item {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.props-layer-item.activated,
.props-layer-item.mud-selected {
    background-color: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.08));
    border-color: var(--mud-palette-primary, #1976d2);
}

.props-layer-item-hidden {
    opacity: 0.7;
}

.props-template-card {
    cursor: pointer;
}

/* Citizen form helpers */
.citizen-form-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Home page decorations */
.home-page .home-feature {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    background-color: var(--mud-palette-surface, #ffffff);
    border-radius: 12px;
    box-shadow: var(--mud-elevation-2, 0 3px 6px rgba(0, 0, 0, 0.16));
}

.home-page .home-feature .mud-icon {
    font-size: 48px;
}

.home-hero {
    background: linear-gradient(135deg, var(--mud-palette-primary, #1976d2), var(--mud-palette-secondary, #9c27b0));
    color: var(--mud-palette-primary-contrast-text, #ffffff);
}

.home-hero .mud-icon {
    color: inherit;
}

.home-hero .mud-button {
    align-self: flex-start;
}

.svc-creator__banner {
    display: none !important;
}

/* Registration */
.register-form {
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    border-radius: var(--mud-default-border-radius, 12px);
}

.discord-pending-card {
    background-color: var(--mud-palette-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--mud-palette-warning, #ffa000);
    border-radius: var(--mud-default-border-radius, 12px);
}

.approval-preview-cell {
    min-width: 160px;
}

.approval-preview-canvas {
    width: 100%;
    max-width: 240px;
    max-height: 150px;
}

.approval-preview-canvas canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 150px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.register-portrait-preview {
    min-height: 200px;
    background-color: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.register-portrait-preview--has-image {
    align-items: flex-start;
}

.register-portrait-placeholder {
    width: 100%;
}

.register-portrait-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
    box-shadow: var(--mud-elevation-6, 0 16px 24px rgba(0, 0, 0, 0.2));
}

.register-terms .mud-checkbox {
    align-items: flex-start;
}

.braille-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    line-height: 1;
}

.braille-spinner::after {
    content: "\280B";
    animation: braille-spinner-frames 0.8s linear infinite;
}

@keyframes braille-spinner-frames {
    10% { content: "\2819"; }
    20% { content: "\2839"; }
    30% { content: "\2838"; }
    40% { content: "\283C"; }
    50% { content: "\2834"; }
    60% { content: "\2826"; }
    70% { content: "\2827"; }
    80% { content: "\2807"; }
    90% { content: "\280F"; }
}

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

.identification-preview-dialog {
    max-width: 480px;
    width: calc(100% - 2rem);
    margin: 5vh auto;
    border-radius: 16px;
}

/* Error overlay */
#blazor-error-ui {
    background: #ffffdd;
    bottom: 0;
    box-shadow: 0 -2px 4px 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: 3000;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

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

.blazor-error-ui {
    z-index: 3000;
}

.props-layer-drop-container {
    display: block;
}

.vehicle-owner-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: min(160px, 40vw);
    height: min(160px, 40vw);
    max-width: 512px;
    max-height: 512px;
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    background-color: var(--mud-palette-grey-lighten4);
}

.vehicle-owner-card__image {
    width: 100%;
    height: 100%;
    max-width: 512px;
    max-height: 512px;
    object-fit: cover;
}

.vehicle-owner-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 512px;
    max-height: 512px;
    color: var(--mud-palette-grey-darken2);
}

.vehicle-owner-card__link {
    color: inherit;
    text-decoration: none;
}

.vehicle-owner-card__link:hover {
    text-decoration: underline;
}


.vehicle-document-preview {
    width: 100%;
    border-radius: var(--mud-default-borderradius);
}