/* ===========================================================================
   Brand theme — inspired by metaltrade COMAX (mtcomax.cz):
   industrial-modern, white/off-white surfaces, charcoal text, teal accent,
   clean sans-serif with a geometric heading face.
   =========================================================================== */
:root {
    /* Primary brand color — METAL TRADE COMAX blue. */
    --brand-teal: #0583be;
    --brand-teal-dark: #046a9c;
    --brand-teal-soft: #e3f1f9;
    --brand-charcoal: #23282d;
    --brand-ink: #2f363c;
    --brand-muted: #6b7479;
    --brand-bg: #f4f6f7;
    --brand-surface: #ffffff;
    --brand-border: #e3e7e9;

    --bs-primary: var(--brand-teal);
    --bs-primary-rgb: 5, 131, 190;
    --bs-link-color: var(--brand-teal-dark);
    --bs-link-hover-color: var(--brand-teal);
}

html, body {
    font-family: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: var(--brand-ink);
    background-color: var(--brand-bg);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    color: var(--brand-charcoal);
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--brand-teal-dark);
}

a:hover {
    color: var(--brand-teal);
}

/* ----- Back-office shell: sidebar + topbar + content --------------------- */
.bo-shell {
    display: flex;
    min-height: 100vh;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--brand-charcoal);
    text-decoration: none;
}

.brand:hover {
    color: var(--brand-charcoal);
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--brand-teal);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.bo-sidebar {
    width: 256px;
    flex-shrink: 0;
    background: var(--brand-surface);
    border-right: 1px solid var(--brand-border);
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.bo-sidebar-brand {
    padding: 1.05rem 1.25rem;
    border-bottom: 1px solid var(--brand-border);
}

/* teal accent stripe along the sidebar edge */
.bo-sidebar-brand {
    box-shadow: inset 0 -3px 0 -2px var(--brand-teal);
}

.bo-nav {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow-y: auto;
    flex: 1;
}

.bo-nav .nav-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--brand-muted);
    font-weight: 700;
    padding: 0.85rem 0.75rem 0.3rem;
}

.bo-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--brand-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}

.bo-nav a .bi {
    font-size: 1.05rem;
    color: var(--brand-muted);
}

.bo-nav a:hover {
    background: var(--brand-bg);
    color: var(--brand-charcoal);
}

.bo-nav a.active {
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
    box-shadow: inset 3px 0 0 var(--brand-teal);
}

.bo-nav a.active .bi {
    color: var(--brand-teal-dark);
}

.bo-sidebar-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--brand-border);
    font-size: 0.85rem;
}

.bo-sidebar-footer a {
    color: var(--brand-muted);
    text-decoration: none;
}

.bo-sidebar-footer a:hover {
    color: var(--brand-teal);
}

.bo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bo-topbar {
    height: 60px;
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1010;
}

.bo-topbar-spacer {
    flex: 1;
}

.bo-sidebar-toggle {
    display: none;
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    color: var(--brand-charcoal);
    font-size: 1.15rem;
}

.bo-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bo-topbar-logo {
    display: inline-flex;
    align-items: center;
    padding-left: 1.25rem;
    margin-left: 0.5rem;
    border-left: 1px solid var(--brand-border);
}

.bo-topbar-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.bo-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
}

.bo-content {
    flex: 1;
    padding: 2rem 1.75rem 3rem;
}

/* ----- Dashboard widgets ------------------------------------------------- */
.stat-card .stat-label {
    color: var(--brand-muted);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-card .stat-label .bi {
    color: var(--brand-teal);
}

.stat-card .stat-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--brand-charcoal);
    margin: 0.35rem 0 0.15rem;
}

.stat-card .stat-trend {
    font-size: 0.82rem;
    font-weight: 600;
}

.status-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--brand-border);
}

.status-list li:last-child {
    border-bottom: none;
}

/* ----- Invoice list / score / detail ------------------------------------- */
.invoice-row {
    cursor: pointer;
}

.invoice-row:hover {
    background: var(--brand-teal-soft);
}

.score-bar {
    height: 7px;
    border-radius: 4px;
    background: var(--brand-border);
    overflow: hidden;
}

.score-fill {
    height: 100%;
    border-radius: 4px;
}

.score-high { background: var(--brand-teal); }
.score-mid  { background: #e0a800; }
.score-low  { background: #d6455d; }

.score-circle {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}

.score-circle.score-high { background: var(--brand-teal); }
.score-circle.score-mid  { background: #e0a800; }
.score-circle.score-low  { background: #d6455d; }

.preview-frame {
    width: 100%;
    height: 460px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    background: var(--brand-bg);
}

.preview-image {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    background: var(--brand-bg);
}

.preview-placeholder {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    height: 280px;
    border: 1px dashed var(--brand-border);
    border-radius: 8px;
    color: var(--brand-muted);
    text-align: center;
    padding: 1rem;
}

.preview-placeholder .bi {
    font-size: 2rem;
}

.file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--brand-border);
}

.file-list li:last-child {
    border-bottom: none;
}

/* ----- Responsive: collapsible sidebar ----------------------------------- */
@media (max-width: 768px) {
    .bo-sidebar {
        position: fixed;
        z-index: 1030;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    }

    .bo-shell.nav-open .bo-sidebar {
        transform: translateX(0);
    }

    .bo-sidebar-toggle {
        display: inline-grid;
        place-items: center;
    }
}

/* ----- Hero -------------------------------------------------------------- */
.hero {
    margin-bottom: 2rem;
}

.hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-teal);
}

.hero h1 {
    font-weight: 700;
    font-size: 2.1rem;
    margin: 0.35rem 0 0.6rem;
}

.hero p {
    color: var(--brand-muted);
    max-width: 60ch;
    margin: 0;
}

/* ----- Cards ------------------------------------------------------------- */
.card {
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    background: var(--brand-surface);
    box-shadow: 0 1px 2px rgba(35, 40, 45, 0.04);
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--brand-charcoal);
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--brand-charcoal);
    margin: 1.5rem 0 0.75rem;
}

/* ----- Buttons ----------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--brand-teal);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal-dark);
    --bs-btn-hover-border-color: var(--brand-teal-dark);
    --bs-btn-active-bg: var(--brand-teal-dark);
    --bs-btn-active-border-color: var(--brand-teal-dark);
    --bs-btn-disabled-bg: var(--brand-teal);
    --bs-btn-disabled-border-color: var(--brand-teal);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-teal-dark);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal);
    --bs-btn-hover-border-color: var(--brand-teal);
    --bs-btn-active-bg: var(--brand-teal-dark);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 131, 190, 0.25);
    border-color: var(--brand-teal);
}

/* ----- Badges (field source tags) ---------------------------------------- */
.badge.bg-primary {
    background-color: var(--brand-teal) !important;
}

.spinner-border {
    color: var(--brand-teal);
}

/* ----- Tables ------------------------------------------------------------ */
.table {
    --bs-table-border-color: var(--brand-border);
}

.table thead th {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-muted);
    border-bottom: 2px solid var(--brand-border);
}

.alert {
    border-radius: 10px;
}

pre {
    font-size: 0.82rem;
}

/* ----- Login (matches the back-office brand) ----------------------------- */
.login-split {
    display: flex;
    height: 100vh;
    width: 100%;
    background: var(--brand-bg);
    overflow: hidden;
    font-family: 'Open Sans', 'Segoe UI', sans-serif;
    color: var(--brand-ink);
}

/* Brand panel (left) */
.login-brand-panel {
    width: 46%;
    max-width: 620px;
    height: 100%;
    flex-shrink: 0;
    background: linear-gradient(155deg, #046a9c 0%, #034d72 55%, #0583be 130%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
}

.login-brand-blob { position: absolute; border-radius: 50%; }
.login-brand-blob--1 { right: -120px; top: -80px; width: 380px; height: 380px; background: rgba(255, 255, 255, 0.10); }
.login-brand-blob--2 { right: 60px; bottom: -140px; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.05); }

.login-brand-top { display: flex; align-items: center; gap: 12px; position: relative; }
.login-brand-mark {
    width: 40px; height: 40px; border-radius: 7px; background: #fff; color: var(--brand-teal);
    font: 700 15px 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center; letter-spacing: 0.02em;
}
.login-brand-name { font: 600 18px 'Montserrat', sans-serif; color: #fff; }

.login-brand-mid { position: relative; }
.login-brand-eyebrow { font: 700 11px 'Montserrat', sans-serif; color: #bfe3f4; letter-spacing: 0.14em; margin-bottom: 14px; }
.login-brand-headline { font: 700 32px 'Montserrat', sans-serif; color: #fff; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.login-brand-desc { font: 400 14px 'Open Sans', sans-serif; color: #d6ebf6; line-height: 1.6; margin-top: 16px; max-width: 380px; }
.login-brand-features { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 32px; padding: 0; }
.login-brand-features li { display: flex; align-items: center; gap: 11px; font: 600 13.5px 'Open Sans', sans-serif; color: #eaf5fb; }
.login-brand-check {
    width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.14);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-brand-foot { font: 600 12px 'Open Sans', sans-serif; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; position: relative; }

/* Form panel (right) */
.login-form-panel {
    flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px;
}
.login-form { width: 100%; max-width: 380px; }
.login-eyebrow { font: 700 11px 'Montserrat', sans-serif; color: var(--brand-teal); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 9px; }
.login-heading { font: 700 25px 'Montserrat', sans-serif; color: var(--brand-charcoal); letter-spacing: -0.01em; margin: 0; }
.login-subtitle { font: 400 13.5px 'Open Sans', sans-serif; color: var(--brand-muted); margin-top: 6px; }

.login-entra {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    width: 100%; height: 48px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 8px;
    margin-top: 26px; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-decoration: none;
    font: 600 13.5px 'Open Sans', sans-serif; color: var(--brand-ink);
}
.login-entra:hover { background: var(--brand-bg); border-color: #cfd6d9; color: var(--brand-ink); }
.login-ms-logo { display: grid; grid-template-columns: 9px 9px; grid-template-rows: 9px 9px; gap: 2px; }
.login-ms-logo span { display: block; }
.login-sso-hint { font: 400 11.5px 'Open Sans', sans-serif; color: var(--brand-muted); text-align: center; margin-top: 9px; }

.login-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--brand-border); }
.login-divider span { font: 700 11px 'Montserrat', sans-serif; color: var(--brand-muted); letter-spacing: 0.06em; white-space: nowrap; }

.login-field { margin-bottom: 15px; }
.login-field > label { display: block; font: 600 12px 'Open Sans', sans-serif; color: var(--brand-ink); margin-bottom: 6px; }
.login-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.login-label-row label { font: 600 12px 'Open Sans', sans-serif; color: var(--brand-ink); margin: 0; }
.login-link { font: 600 12px 'Open Sans', sans-serif; color: var(--brand-teal-dark); cursor: pointer; text-decoration: none; }
.login-link:hover { color: var(--brand-teal); }

.login-remember { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; cursor: pointer; }
.login-remember input { width: 18px; height: 18px; border-radius: 5px; accent-color: var(--brand-teal); cursor: pointer; }
.login-remember span { font: 400 13px 'Open Sans', sans-serif; color: var(--brand-ink); }

.login-submit { width: 100%; height: 46px; font-weight: 600; }
.login-help { font: 400 12px 'Open Sans', sans-serif; color: var(--brand-muted); text-align: center; margin-top: 24px; line-height: 1.6; }

.bo-logout { margin-left: 0.25rem; }

@media (max-width: 860px) {
    .login-brand-panel { display: none; }
}

/* ----- Email inbox ------------------------------------------------------- */
.email-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--brand-teal-soft);
    color: var(--brand-teal-dark);
    font-weight: 700;
    font-size: 0.72rem;
}

/* ----- Audit timeline ---------------------------------------------------- */
.audit-timeline { list-style: none; padding: 0; margin: 0; }
.audit-timeline > li {
    padding: 0.65rem 0 0.65rem 0.9rem;
    border-left: 2px solid var(--brand-border);
    margin-left: 0.3rem;
    position: relative;
}
.audit-timeline > li:not(:last-child) { padding-bottom: 0.9rem; }
.audit-timeline > li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.95rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-teal);
}
.audit-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.audit-meta { color: var(--brand-muted); font-size: 0.8rem; }
.audit-summary { font-size: 0.85rem; color: var(--brand-ink); margin-top: 0.3rem; }
.audit-changes { list-style: none; padding: 0; margin: 0.35rem 0 0; }
.audit-changes li { font-size: 0.8rem; color: var(--brand-muted); padding: 0.1rem 0; }
.audit-field { font-weight: 600; color: var(--brand-ink); }
.audit-from { color: #b1474f; }
.audit-to { color: #1f8a4c; }
.audit-changes .bi { font-size: 0.75rem; margin: 0 0.15rem; }

/* ----- Blazor defaults --------------------------------------------------- */
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: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

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