/* ==============================================================
 * VOSZ Theme — single source of truth for colors, spacing, type.
 *
 * Colors, sizes, and shadows are defined as CSS custom properties
 * at the top. Replace this block (or the whole file) to rebrand
 * without editing any template.
 *
 * Source: VOSZ brand guideline (design/…pdf).
 * ============================================================== */

:root {
    /* ---- Brand colors (from guideline) ---- */
    --brand-primary:        #00417F;   /* Dark blue — primary UI color */
    --brand-primary-hover:  #003366;
    --brand-red:            #E40072;   /* Accent only */
    --brand-green:          #66B872;   /* Accent only */

    /* ---- System neutrals ---- */
    --neutral-white:   #FFFFFF;
    --neutral-50:      #F5F7FA;        /* Light gray — app background */
    --neutral-200:     #D0D5DD;        /* Medium gray — borders */
    --neutral-900:     #1F2937;        /* Dark text */
    --neutral-muted:   #6B7280;

    /* ---- Feedback ---- */
    --error-bg:    #FCE8E9;
    --error-fg:    #9B1C1C;
    --error-border:#F3B4B7;
    --info-bg:     #E7F0FB;
    --info-fg:     #003366;
    --info-border: #C4D8F3;

    /* ---- Shape ---- */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 65, 127, .08);
    --shadow-md: 0 6px 18px rgba(0, 65, 127, .12);

    /* ---- Typography ----
     * DIN Condensed is a licensed font — not shipped. We fall back
     * to Arial Narrow / Arial per the brand guideline. If you license
     * DIN Condensed, drop @font-face above :root and it wins. */
    --font-display: "DIN Condensed", "Arial Narrow", Arial, sans-serif;
    --font-body:    "Arial Narrow", Arial, Helvetica, sans-serif;

    --fs-h1: 30px;
    --fs-h2: 22px;
    --fs-h3: 18px;
    --fs-body: 15px;
    --fs-small: 13px;
}

* { box-sizing: border-box; }

/* Compensate for Windows DPI scaling so embedded iframes (Power BI) get
 * enough CSS pixel viewport for proper rendering. `zoom` actually scales
 * layout dimensions for descendants (unlike `transform: scale` which is
 * visual only). Targets typical Windows scaling values; on other DPIs
 * the page renders at native size. */
@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) {
    body { zoom: 0.8; }
}
@media (min-resolution: 1.45dppx) and (max-resolution: 1.55dppx) {
    body { zoom: 0.667; }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--neutral-900);
    background: var(--neutral-50);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .3px;
    margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--brand-primary); }

/* ==============================================================
 * Buttons
 * ============================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--block   { width: 100%; }

.btn--primary {
    background: var(--brand-primary);
    color: var(--neutral-white);
}
.btn--primary:hover:not(:disabled) { background: var(--brand-primary-hover); }

.btn--ghost {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--neutral-200);
}
.btn--ghost:hover:not(:disabled) {
    background: var(--neutral-white);
    border-color: var(--brand-primary);
}

/* ==============================================================
 * Form fields
 * ============================================================== */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.field__label {
    font-size: var(--fs-small);
    color: var(--neutral-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.field input,
.field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius);
    font: inherit;
    background: var(--neutral-white);
    color: var(--neutral-900);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 65, 127, .18);
}

/* ==============================================================
 * Card
 * ============================================================== */
.card {
    background: var(--neutral-white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ==============================================================
 * Login page
 * Glassmorphism card on a blue gradient with a dot pattern and
 * Hungarian flag accent glows (top-left red, top-right green).
 * ============================================================== */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background: #0F4A9C url("login-bg.png") center/cover no-repeat;
    position: relative;
}
.login {
    display: block;
}

.login__card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 540px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 18px;
    padding: 52px 48px 44px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
    text-align: center;
}
.login__logo {
    height: 72px;
    aspect-ratio: 330 / 126;
    margin: 4px auto 22px;
    display: block;
    filter: brightness(0) saturate(100%) invert(18%) sepia(55%) saturate(2200%) hue-rotate(200deg) brightness(92%) contrast(101%);
}
.login__title {
    margin: 0 0 22px;
    color: var(--neutral-900);
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.login__form  { text-align: left; display: flex; flex-direction: column; gap: 16px; }

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 65, 127, .10);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 65, 127, .06), inset 0 1px 0 rgba(255,255,255,.8);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(0, 65, 127, .18);
}
.input-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 14px;
    color: var(--neutral-muted);
}
.input-group input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 16px 14px 16px 0;
    font: inherit;
    font-size: 15px;
    color: var(--neutral-900);
}
.input-group input::placeholder { color: #8A94A6; }
.btn--login {
    background: linear-gradient(180deg, #1E62C9 0%, #0F4A9C 100%);
    color: var(--neutral-white);
    border: 0;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 17px;
    margin-top: 6px;
    box-shadow: 0 8px 20px rgba(15, 74, 156, .35);
}
.btn--login:hover:not(:disabled) {
    background: linear-gradient(180deg, #2A6FD6 0%, #124FAA 100%);
}

.login__error {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: var(--fs-small);
    background: var(--error-bg);
    color: var(--error-fg);
    border: 1px solid var(--error-border);
}

.login__hint {
    margin: 0 0 6px;
    font-size: var(--fs-small);
    color: var(--neutral-muted);
}

.login__success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(236, 249, 238, .85);
    border: 1px solid rgba(102, 184, 114, .35);
    color: #2E5D3A;
    font-size: var(--fs-body);
}
.login__success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-green);
    color: var(--neutral-white);
    flex-shrink: 0;
}

/* ==============================================================
 * Dashboard — top nav (dark blue) + content (white)
 * ============================================================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: var(--brand-primary);
    color: var(--neutral-white);
    box-shadow: var(--shadow-sm);
}
.topbar__brand  { display: flex; align-items: center; gap: 14px; }
.topbar__logo   { height: 32px; }
.topbar__title  { font-family: var(--font-display); font-size: 20px; letter-spacing: .4px; text-transform: uppercase; }
.topbar__user   { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); }
.topbar__user .btn--ghost { color: var(--neutral-white); border-color: rgba(255,255,255,.4); }
.topbar__user .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--neutral-white); }
.topbar__logout { margin: 0; }

.dashboard-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.dashboard-page .topbar { flex-shrink: 0; }

.dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 16px;
    flex: 1;
    min-height: 0;
}

.filters {
    background: var(--neutral-white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: 18px;
    height: fit-content;
    position: sticky;
    top: 80px;
}
.filters__title { color: var(--brand-primary); margin-bottom: 4px; }
.filters__hint  { margin: 0 0 16px; font-size: var(--fs-small); color: var(--neutral-muted); }

.report {
    background: var(--neutral-white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 620px;
    overflow: hidden;
}
.report__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}
.report__title   { color: var(--brand-primary); display: flex; align-items: center; gap: 12px; }
.report__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    background: var(--brand-primary);
    color: var(--neutral-white);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.report__title-icon svg { width: 18px; height: 18px; }
.report__source  {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 65, 127, .18);
    border-radius: 999px;
    background: rgba(0, 65, 127, .06);
    transition: background-color .15s ease, border-color .15s ease;
}
.report__source:hover {
    background: rgba(0, 65, 127, .12);
    border-color: rgba(0, 65, 127, .4);
}
.report__source svg { flex-shrink: 0; }

.report__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

.report__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 20px;
    text-align: center;
}
.report__empty-art {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #EEF3F9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9FB4D1;
    margin-bottom: 8px;
}
.report__empty-title {
    color: var(--neutral-900);
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.report__empty-text {
    color: var(--neutral-muted);
    margin: 0;
    font-size: var(--fs-body);
}
.report__empty-cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-white);
    color: var(--brand-primary);
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}
.report__empty-cta:hover {
    border-color: var(--brand-primary);
    background: #F5F9FF;
}

.btn__icon { flex-shrink: 0; }
.report__embed   { flex: 1; min-height: 600px; }
.report__embed iframe { border: 0; width: 100%; height: 100%; }
.report__status  {
    padding: 10px 18px;
    font-size: var(--fs-small);
    color: var(--neutral-muted);
    min-height: 20px;
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}
.report__status:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><circle cx='12' cy='7.5' r='1.2' fill='black'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><circle cx='12' cy='7.5' r='1.2' fill='black'/></svg>") no-repeat center / contain;
}

/* ==============================================================
 * Responsive — desktop first; tablet/mobile graceful collapse.
 * ============================================================== */
@media (max-width: 900px) {
    .dashboard { grid-template-columns: 1fr; }
    .filters   { position: static; }
}
@media (max-width: 560px) {
    .topbar         { padding: 10px 14px; }
    .topbar__title  { display: none; }
    .dashboard      { padding: 12px; gap: 12px; }
}