@font-face {
    font-family: 'Akkurat Pro';
    src: url('resources/AkkRg_Pro.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Akkurat Pro';
    src: url('resources/AkkBd_Pro.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Sentinel';
    src: url('resources/Sentinel-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/* Fika Brand Colors */
:root {
    --fika-navy: #161345;
    --fika-green: #009149;
    --fika-grey: #D7D1CB;
    --fika-orange: #EA7149;
    --fika-blue: #66C3E3;
}

/* Typography - Fika brand fonts */
/* Body Copy: Akkurat Pro Regular */
html, body {
    font-family: 'Akkurat Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ========================================
   Fika Brand Typography
   ======================================== */

/* Tool Title: Akkurat Pro Bold */
.tool-title,
.mud-typography-h5.tool-title {
    font-family: 'Akkurat Pro', sans-serif;
    font-weight: 700;
}

/* "Powered by BHoM": Sentinel Medium */
.bhom-powered {
    font-family: 'Sentinel', serif;
    font-weight: 500;
    color: var(--fika-green) !important;
}

/* ========================================
   Fika AppBar UI Elements - Navy Color
   ======================================== */

/* Text, icons, and toggles in AppBar */
.fika-navy-text,
.fika-navy-icon,
.fika-navy-toggle {
    color: var(--fika-navy) !important;
}

/* Descendant icons and switch parts inherit the navy colour */
.fika-navy-icon .mud-icon-root,
.fika-navy-toggle .mud-icon-root,
.fika-navy-toggle .mud-switch-base,
.fika-navy-toggle .mud-switch-base.mud-checked {
    color: var(--fika-navy) !important;
}

/* Toggle switch track backgrounds */
.fika-navy-toggle .mud-switch-track {
    background-color: rgba(22, 19, 69, 0.3) !important;
}

.fika-navy-toggle .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: rgba(22, 19, 69, 0.5) !important;
}

/* ========================================
   Sidebar Navigation - Fika Colors
   ======================================== */

/* Inactive nav links - Navy (low-specificity wrapper keeps MudBlazor overrides predictable) */
.mud-nav-link:where(:not(.mud-nav-link-active):not([aria-current="page"])),
.mud-nav-link:where(:not(.mud-nav-link-active):not([aria-current="page"])) :is(.mud-nav-link-icon, .mud-nav-link-text, .mud-icon-root) {
    color: var(--fika-navy) !important;
}

.mud-nav-link:where(:not(.mud-nav-link-active):not([aria-current="page"])) {
    background-color: transparent !important;
}

/* Active leaf nav links - Green (excludes nav group headers) */
.mud-nav-link:is(.mud-nav-link-active, .active, [aria-current="page"]):not(.mud-nav-group > .mud-nav-link),
.mud-nav-item:not(.mud-nav-group) .mud-nav-link.mud-ripple:is(.mud-nav-link-active, [aria-current="page"]):not(.mud-disabled) {
    color: var(--fika-green) !important;
    background-color: rgba(0, 145, 73, 0.1) !important;
}

.mud-nav-link:is(.mud-nav-link-active, .active, [aria-current="page"]):not(.mud-nav-group > .mud-nav-link) :is(.mud-nav-link-icon, .mud-nav-link-text, .mud-icon-root),
.mud-nav-item:not(.mud-nav-group) .mud-nav-link.mud-ripple:is(.mud-nav-link-active, [aria-current="page"]):not(.mud-disabled) .mud-icon-root {
    color: var(--fika-green) !important;
}

/* Nav group headers - Always Navy (never green, even when expanded/active) */
.mud-nav-group,
.mud-nav-group > .mud-nav-link,
.mud-nav-group > .mud-nav-link.mud-nav-link-active,
.mud-nav-group.mud-expanded > .mud-nav-link,
.mud-nav-group .mud-nav-link:where(:not(.mud-nav-link-active):not([aria-current="page"])),
.mud-nav-group .mud-nav-link:where(:not(.mud-nav-link-active):not([aria-current="page"])) :is(.mud-nav-link-icon, .mud-icon-root),
.mud-nav-group > .mud-nav-link :is(.mud-icon-root, .mud-expand-icon, .mud-collapse-button, .mud-button-root),
.mud-nav-group.mud-expanded > .mud-nav-link :is(.mud-icon-root, .mud-expand-icon, .mud-collapse-button, .mud-button-root),
.mud-nav-group > .mud-nav-link :is(.mud-collapse-button .mud-icon-root, .mud-button-root .mud-icon-root, svg, .mud-svg-icon),
.mud-nav-group.mud-expanded > .mud-nav-link :is(.mud-collapse-button .mud-icon-root, .mud-button-root .mud-icon-root, svg, .mud-svg-icon) {
    color: var(--fika-navy) !important;
}

.mud-nav-group > .mud-nav-link,
.mud-nav-group > .mud-nav-link.mud-nav-link-active,
.mud-nav-group.mud-expanded > .mud-nav-link {
    background-color: transparent !important;
}

/* SVG fill for nav group icons */
.mud-nav-group > .mud-nav-link :is(svg, .mud-svg-icon),
.mud-nav-group.mud-expanded > .mud-nav-link :is(svg, .mud-svg-icon) {
    fill: var(--fika-navy) !important;
}

/* Hover and disabled states */
.mud-nav-link:hover:not(.mud-nav-link-active) {
    background-color: rgba(22, 19, 69, 0.05) !important;
}

.mud-nav-link.mud-disabled,
.mud-nav-link.mud-disabled .mud-nav-link-icon {
    color: rgba(22, 19, 69, 0.4) !important;
}

/* ========================================
   Bridge Paged Input Layout
   ======================================== */

.bridge-input-layout {
    display: flex;
    gap: 16px;
    min-height: 500px;
}

/* Page Navigation Column (left) */
.page-nav-column {
    width: 60px;
    min-width: 60px;
    flex-shrink: 0;
    transition: width 225ms cubic-bezier(0, 0, .2, 1);
    overflow: hidden;
}

.page-nav-column:hover {
    width: 220px;
    min-width: 220px;
}

.page-nav-column.pinned {
    width: 220px;
    min-width: 220px;
}

.page-nav-inner {
    background: var(--mud-palette-surface);
    border-radius: 4px;
    padding: 8px 0;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-nav-header {
    padding: 4px 16px 8px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: opacity 225ms cubic-bezier(0, 0, .2, 1);
}

.page-nav-column:hover .page-nav-header,
.page-nav-column.pinned .page-nav-header {
    opacity: 1;
}

.page-nav-item {
    cursor: pointer;
    padding: 4px 8px !important;
    min-height: 40px !important;
    border-left: 3px solid transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.page-nav-item:hover {
    background-color: rgba(22, 19, 69, 0.05);
}

.page-nav-item.active {
    border-left-color: var(--fika-navy);
    background-color: rgba(22, 19, 69, 0.08);
}

.page-nav-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

/* Status dot: green = complete, yellow = incomplete */
.page-nav-status-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.page-nav-status-dot.status-complete {
    background-color: #4caf50;
}

.page-nav-status-dot.status-incomplete {
    background-color: #ff9800;
}

.page-nav-icon {
    flex-shrink: 0;
    color: var(--fika-navy);
}

.page-nav-label {
    opacity: 0;
    transition: opacity 225ms cubic-bezier(0, 0, .2, 1);
    font-size: 0.875rem;
    color: var(--fika-navy);
}

.page-nav-column:hover .page-nav-label,
.page-nav-column.pinned .page-nav-label {
    opacity: 1;
}

.page-nav-pin-btn {
    opacity: 0;
    transition: opacity 225ms cubic-bezier(0, 0, .2, 1);
    margin-left: auto;
}

.page-nav-column:hover .page-nav-pin-btn,
.page-nav-column.pinned .page-nav-pin-btn {
    opacity: 1;
}

/* Input Column (centre) */
.input-column {
    flex: 1;
    min-width: 0;
}

/* Feedback Column (right) */
.feedback-column {
    width: 35%;
    min-width: 250px;
    flex-shrink: 0;
    transition: width 225ms cubic-bezier(0, 0, .2, 1),
                min-width 225ms cubic-bezier(0, 0, .2, 1),
                padding 225ms cubic-bezier(0, 0, .2, 1);
    overflow: hidden;
}

.feedback-column.collapsed {
    width: 40px;
    min-width: 40px;
}

.feedback-panel-inner {
    background: var(--mud-palette-surface);
    border-radius: 4px;
    padding: 16px;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.feedback-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.feedback-panel-content {
    max-height: 500px;
    overflow-y: auto;
}

.feedback-column.collapsed .feedback-panel-inner {
    padding: 8px 4px;
}

.feedback-column.collapsed .feedback-panel-header {
    flex-direction: column;
}

.feedback-column.collapsed .feedback-panel-header .mud-typography {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.75rem;
}

.feedback-column.collapsed .feedback-panel-content {
    display: none;
}

/* ========================================
   Input Page Common Styles
   ======================================== */

.input-page-section {
    margin-bottom: 16px;
}

/* Subheadings: Sentinel Medium */
.input-page-section-title {
    margin-bottom: 8px;
    color: var(--fika-navy);
    font-family: 'Sentinel', serif;
    font-weight: 500;
}

.mirror-toggle-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: rgba(0, 145, 73, 0.06);
    border-radius: 4px;
    margin-bottom: 16px;
}

.right-side-overrides {
    padding: 12px 16px;
    background-color: rgba(22, 19, 69, 0.03);
    border-left: 3px solid var(--fika-navy);
    border-radius: 0 4px 4px 0;
    margin-top: 12px;
}

/* ========================================
   Fika Green Action Buttons
   Targets specific MudButton instances (Analyse Bridge, export buttons,
   Estimate Ground Level) so they use the same brand green as the
   "Powered by BHoM" lockup without affecting MudBlazor's global theme.
   The class composes with the existing mud-button-filled-primary /
   mud-button-outlined-primary classes emitted by Color="Color.Primary".
   ======================================== */

/* Filled variant: green fill, white text */
.fika-green-btn.mud-button-filled-primary {
    background-color: var(--fika-green) !important;
    border-color: var(--fika-green) !important;
    color: #fff !important;
}

.fika-green-btn.mud-button-filled-primary:hover {
    background-color: #007a3e !important;
    border-color: #007a3e !important;
}

.fika-green-btn.mud-button-filled-primary:is(:disabled, [disabled]) {
    background-color: rgba(0, 145, 73, 0.4) !important;
    border-color: rgba(0, 145, 73, 0.4) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Outlined variant: green border + text */
.fika-green-btn.mud-button-outlined-primary {
    color: var(--fika-green) !important;
    border-color: var(--fika-green) !important;
}

.fika-green-btn.mud-button-outlined-primary:hover {
    background-color: rgba(0, 145, 73, 0.08) !important;
    border-color: var(--fika-green) !important;
}

.fika-green-btn.mud-button-outlined-primary:is(:disabled, [disabled]) {
    color: rgba(0, 145, 73, 0.5) !important;
    border-color: rgba(0, 145, 73, 0.3) !important;
}

/* Ensure the start-icon picks up the green text colour in the outlined variant */
.fika-green-btn.mud-button-outlined-primary .mud-icon-root {
    color: var(--fika-green) !important;
}

.fika-green-btn.mud-button-outlined-primary:is(:disabled, [disabled]) .mud-icon-root {
    color: rgba(0, 145, 73, 0.5) !important;
}