/* Fabi Tax Services — brand layer on top of the Blazor template (Bootstrap + app.css + scoped CSS).
   Loaded LAST in App.razor, so equal-specificity rules here win over the template's. */

/* ---------- Brand tokens (sampled from the logo) ---------- */
:root {
    --fabi-royal: #0047AB;       /* wordmark */
    --fabi-royal-dark: #00398A;
    --fabi-royal-darker: #002C6B;
    --fabi-indigo: #474DA0;      /* hexagon */
    --fabi-steel: #3A82A8;       /* arrow */
    --fabi-steel-dark: #2A6F93;
    --fabi-sky: #8CC8EC;         /* bars */
    --fabi-sky-soft: #E4F2FB;
    --fabi-ink: #13254A;         /* body text */
    --fabi-muted: #55667F;
    --fabi-mist: #F3F8FC;        /* panel tint */
    --fabi-line: #D9E4EF;
    --fabi-amber: #F59E0B;       /* selection highlight only */

    /* Calendar slot colours (also used inline by the scheduler pages) */
    --fabi-open: var(--fabi-sky);
    --fabi-open-text: #0B2E5C;
    --fabi-booked: var(--fabi-royal);
    --fabi-blocked: #6B7787;

    --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
    --font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Bootstrap */
    --bs-body-color: var(--fabi-ink);
    --bs-link-color: var(--fabi-royal);
    --bs-link-color-rgb: 0, 71, 171;
    --bs-link-hover-color: var(--fabi-royal-dark);
    --bs-link-hover-color-rgb: 0, 57, 138;

    /* Radzen scheduler */
    --rz-primary: var(--fabi-royal);
    --rz-primary-light: #3A6FC0;
    --rz-primary-lighter: rgba(0, 71, 171, .12);
    --rz-primary-dark: var(--fabi-royal-dark);
    --rz-primary-darker: var(--fabi-royal-darker);
    --rz-text-font-family: var(--font-body);
}

/* ---------- Base type ---------- */
html, body {
    font-family: var(--font-body);
    color: var(--fabi-ink);
}

h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: .01em;
    color: var(--fabi-royal);
    margin-bottom: .6em;
}

a, .btn-link { color: var(--fabi-royal); }
a:hover, .btn-link:hover { color: var(--fabi-royal-dark); }

/* ---------- Buttons (app.css sets .btn-primary colours directly, so set both the vars and the properties) ---------- */
.btn-primary {
    --bs-btn-bg: var(--fabi-royal);
    --bs-btn-border-color: var(--fabi-royal);
    --bs-btn-hover-bg: var(--fabi-royal-dark);
    --bs-btn-hover-border-color: var(--fabi-royal-dark);
    --bs-btn-active-bg: var(--fabi-royal-darker);
    --bs-btn-active-border-color: var(--fabi-royal-darker);
    --bs-btn-disabled-bg: var(--fabi-royal);
    --bs-btn-disabled-border-color: var(--fabi-royal);
    color: #fff;
    background-color: var(--fabi-royal);
    border-color: var(--fabi-royal);
}
.btn-outline-primary {
    --bs-btn-color: var(--fabi-royal);
    --bs-btn-border-color: var(--fabi-royal);
    --bs-btn-hover-bg: var(--fabi-royal);
    --bs-btn-hover-border-color: var(--fabi-royal);
    --bs-btn-active-bg: var(--fabi-royal-dark);
    --bs-btn-active-border-color: var(--fabi-royal-dark);
}
.btn-success {
    --bs-btn-bg: var(--fabi-steel-dark);
    --bs-btn-border-color: var(--fabi-steel-dark);
    --bs-btn-hover-bg: #215B7A;
    --bs-btn-hover-border-color: #215B7A;
    --bs-btn-active-bg: #1B4B65;
    --bs-btn-active-border-color: #1B4B65;
    --bs-btn-disabled-bg: var(--fabi-steel-dark);
    --bs-btn-disabled-border-color: var(--fabi-steel-dark);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem rgba(0, 71, 171, .55);
    border-color: var(--fabi-royal);
}

/* ---------- Layout chrome: white sidebar with the logo mark ---------- */
.page .sidebar {
    background-image: none;
    background-color: #fff;
    border-right: 1px solid var(--fabi-line);
}
.sidebar .top-row {
    background-color: #fff;
    border-bottom: 1px solid var(--fabi-line);
}
.sidebar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--fabi-royal);
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: .03em;
    text-transform: uppercase;   /* matches the logo wordmark */
    white-space: nowrap;
}
.sidebar .navbar-brand:hover, .sidebar .navbar-brand:focus { color: var(--fabi-royal-dark); }
.sidebar .navbar-brand img { width: 40px; height: 40px; flex: none; }

.sidebar .nav-item .nav-link {
    color: var(--fabi-ink);
    font-weight: 500;
    border-left: 4px solid transparent;
    border-radius: 0 6px 6px 0;
}
.sidebar .nav-item .nav-link:hover {
    background-color: var(--fabi-mist);
    color: var(--fabi-royal);
}
.sidebar .nav-item a.nav-link.active {
    background-color: var(--fabi-sky-soft);
    color: var(--fabi-royal);
    border-left-color: var(--fabi-royal);
    font-weight: 600;
}
.sidebar .nav-item .nav-link:focus-visible {
    outline: 2px solid var(--fabi-royal);
    outline-offset: -2px;
}
/* Template nav icons are white SVGs; darken them for the white sidebar. */
.sidebar .bi { filter: brightness(0); opacity: .65; }

/* Mobile menu button: same icon, royal-blue strokes on white */
.sidebar .navbar-toggler {
    border: 1px solid var(--fabi-line);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230047AB' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem #fff;
}
.sidebar .navbar-toggler:checked { background-color: var(--fabi-sky-soft); }

.page main .top-row {
    background-color: #fff;
    border-bottom: 1px solid var(--fabi-line);
}
.page main .top-row a.btn:hover { text-decoration: none; }

/* ---------- Home page ---------- */
.fabi-hero {
    display: grid;
    grid-template-columns: minmax(160px, 280px) 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--fabi-mist);
    border-radius: 10px;
}
.fabi-hero-logo { width: 100%; height: auto; }
.fabi-hero h1 {
    font-size: clamp(2.4rem, 1.5rem + 3.2vw, 3.9rem);
    line-height: 1;
    max-width: 16ch;
    text-wrap: balance;
    margin: 0 0 .9rem;
}
.fabi-hero .lead { max-width: 44ch; margin-bottom: 0; }
.fabi-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.fabi-section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.fabi-section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: .01em;
    color: var(--fabi-royal);
    margin-bottom: 1.25rem;
}

/* The three booking steps drawn as the logo's rising bars. */
.fabi-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
}
.fabi-steps > li {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;   /* keeps all bars sitting on one baseline */
}
.fabi-step-bar {
    align-self: end;
    justify-self: start;
    width: 5rem;                   /* narrow like the logo's bars */
    background: var(--fabi-sky);
    color: var(--fabi-open-text);
    border-radius: 6px 6px 0 0;
    padding: .35rem .9rem;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.1;
}
.fabi-steps > li:nth-child(1) .fabi-step-bar { height: 4.5rem; }
.fabi-steps > li:nth-child(2) .fabi-step-bar { height: 7rem; }
.fabi-steps > li:nth-child(3) .fabi-step-bar { height: 9.5rem; }
.fabi-step-body {
    border-top: 3px solid var(--fabi-indigo);
    padding-top: .8rem;
}
.fabi-step-body h3, .fabi-service h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--fabi-ink);
    margin: 0 0 .35rem;
}
.fabi-step-body p, .fabi-service p { color: var(--fabi-muted); margin: 0; max-width: 34ch; }

.fabi-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.fabi-service {
    border-left: 3px solid var(--fabi-sky);
    padding: .15rem 0 .15rem 1.1rem;
}
.fabi-fineprint {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fabi-line);
    font-size: .875rem;
    color: var(--fabi-muted);
}

@media (max-width: 767px) {
    .fabi-hero { grid-template-columns: 1fr; }
    .fabi-hero-logo { max-width: 170px; }
    .fabi-services { grid-template-columns: 1fr; }
    /* Steps stack; the bars turn sideways and still rise left to right. */
    .fabi-steps { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.5rem; }
    .fabi-steps > li { grid-row: auto; grid-template-rows: auto auto; }
    .fabi-step-bar { height: auto !important; border-radius: 0 6px 0 0; }
    .fabi-steps > li:nth-child(1) .fabi-step-bar { width: 40%; }
    .fabi-steps > li:nth-child(2) .fabi-step-bar { width: 65%; }
    .fabi-steps > li:nth-child(3) .fabi-step-bar { width: 90%; }
}

/* ---------- App pages (booking, schedule, services) ---------- */
.fabi-card h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .75rem; color: var(--fabi-royal); }

.fabi-card {
    background: #fff;
    border: 1px solid var(--fabi-line);
    border-radius: 8px;
    padding: 1.25rem;
}

/* Calendar + side panel; stacks on phones */
.fabi-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 991px) {
    .fabi-layout { grid-template-columns: 1fr; }
    .fabi-panel { order: -1; } /* forms above the calendar on small screens */
}

.fabi-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.fabi-when { font-size: 1.1rem; font-weight: 600; }

.fabi-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.fabi-open { background: var(--fabi-open); }
.fabi-mine { background: var(--fabi-booked); }
.fabi-blocked { background: var(--fabi-blocked); }
.fabi-selected { background: #fff; box-shadow: inset 0 0 0 3px var(--fabi-amber); }

.fabi-days { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.fabi-day { white-space: nowrap; }

.fabi-dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
.fabi-dl dt { font-weight: 600; }
.fabi-dl dd { margin: 0; word-break: break-word; }