/*
 * Kassavirtaennuste — front-end styles
 * Brand: #FFCE00 (header), #004A6E (footer / dark), #5CC4C4 (light primary), rgb(43,125,246) (blue button)
 * Font: Lato
 */

.kve-wrap {
    --kve-yellow: #FFCE00;
    --kve-navy: #004A6E;
    --kve-teal: #5CC4C4;
    --kve-blue: rgb(43, 125, 246);
    --kve-bg-1: rgb(250, 250, 250);
    --kve-bg-2: rgb(233, 233, 233);
    --kve-text: #1a1a1a;
    --kve-muted: #5b6b75;
    --kve-border: #d9dee2;
    --kve-section: #eef4f8;
    --kve-row-hover: #fff8d8;

    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--kve-text);
    background: #fff;
    border: 1px solid var(--kve-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    margin: 1.5rem 0;
}

.kve-wrap *, .kve-wrap *::before, .kve-wrap *::after { box-sizing: border-box; }

.kve-header {
    background: var(--kve-yellow);
    padding: 1.25rem 1.5rem;
}
.kve-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--kve-navy);
    letter-spacing: -0.01em;
}
.kve-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--kve-navy);
    opacity: 0.85;
}

.kve-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: end;
    padding: 1rem 1.5rem;
    background: var(--kve-bg-1);
    border-bottom: 1px solid var(--kve-border);
}
.kve-control-group { display: flex; flex-direction: column; gap: 0.35rem; }
.kve-control-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--kve-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kve-text-input {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--kve-border);
    border-radius: 6px;
    background: #fff;
    min-width: 220px;
}
.kve-text-input:focus { outline: 2px solid var(--kve-teal); outline-offset: 1px; border-color: var(--kve-teal); }

.kve-segmented {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--kve-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.kve-seg-btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--kve-navy);
    transition: background 0.15s, color 0.15s;
}
.kve-seg-btn:hover { background: var(--kve-bg-2); }
.kve-seg-btn[aria-pressed="true"] { background: var(--kve-navy); color: #fff; }
.kve-seg-btn:focus-visible { outline: 2px solid var(--kve-teal); outline-offset: 2px; }

.kve-actions-inline { margin-left: auto; }

.kve-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.55rem 1.15rem;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
}
.kve-btn:active { transform: translateY(1px); }
.kve-btn:focus-visible { outline: 2px solid var(--kve-navy); outline-offset: 2px; }
.kve-btn-light { background: var(--kve-teal); color: #fff; }
.kve-btn-light:hover { filter: brightness(0.95); }
.kve-btn-blue { background: var(--kve-blue); color: #fff; }
.kve-btn-blue:hover { filter: brightness(0.95); }
.kve-btn-ghost {
    background: #fff;
    color: var(--kve-navy);
    border: 1px solid var(--kve-border);
}
.kve-btn-ghost:hover { background: var(--kve-bg-2); }

.kve-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.kve-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 1100px;
    font-size: 0.9rem;
}
.kve-table thead th {
    background: var(--kve-navy);
    color: #fff;
    font-weight: 700;
    text-align: right;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--kve-yellow);
}
.kve-table thead th:first-child {
    text-align: left;
    background: var(--kve-navy);
}
.kve-month-head { min-width: 92px; }

.kve-row-label {
    text-align: left;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    background: #fff;
    color: var(--kve-text);
    border-bottom: 1px solid var(--kve-border);
}
.kve-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--kve-border);
    min-width: 240px;
    max-width: 280px;
}
.kve-table thead .kve-sticky-col { z-index: 3; background: var(--kve-navy); }

.kve-row:nth-child(even of .kve-row) .kve-row-label,
.kve-row:nth-child(even of .kve-row) .kve-cell { background: var(--kve-bg-1); }
.kve-row:hover .kve-row-label,
.kve-row:hover .kve-cell { background: var(--kve-row-hover); }

.kve-cell {
    padding: 0.3rem 0.45rem;
    text-align: right;
    border-bottom: 1px solid var(--kve-border);
    background: #fff;
    vertical-align: middle;
}
.kve-num-input {
    width: 100%;
    min-width: 80px;
    padding: 0.4rem 0.55rem;
    text-align: right;
    font-family: inherit;
    font-size: 0.9rem;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    color: var(--kve-text);
}
.kve-num-input:hover { background: #fff; border-color: var(--kve-border); }
.kve-num-input:focus { outline: none; background: #fff; border-color: var(--kve-teal); box-shadow: 0 0 0 2px rgba(92, 196, 196, 0.25); }
.kve-num-input.kve-invalid { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.18); }

.kve-num-out {
    display: inline-block;
    padding: 0.4rem 0.55rem;
    font-variant-numeric: tabular-nums;
    color: var(--kve-navy);
}
.kve-num-out.kve-negative { color: #c62828; }
.kve-computed-cell { background: rgba(92, 196, 196, 0.06); }

/* Section heading rows */
.kve-section-row .kve-section-head {
    background: var(--kve-section);
    color: var(--kve-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border-top: 2px solid var(--kve-yellow);
    border-bottom: 1px solid var(--kve-border);
    position: sticky;
    left: 0;
}
.kve-section-result .kve-section-head { background: var(--kve-yellow); color: var(--kve-navy); }

/* Total + closing rows */
.kve-row-total .kve-row-label,
.kve-row-total .kve-cell {
    background: #f0f7fb;
    font-weight: 700;
}
.kve-row-closing .kve-row-label,
.kve-row-closing .kve-cell {
    background: var(--kve-yellow);
    font-weight: 900;
    color: var(--kve-navy);
}
.kve-row-closing .kve-num-out { color: var(--kve-navy); }
.kve-row-closing .kve-num-out.kve-negative { color: #b71c1c; }

.kve-empty-hint {
    margin: 0;
    padding: 0.8rem 1.5rem;
    font-size: 0.85rem;
    color: var(--kve-muted);
    background: var(--kve-bg-1);
    border-top: 1px solid var(--kve-border);
}

.kve-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--kve-navy);
    color: #fff;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 3px solid var(--kve-yellow);
}
.kve-currency-tag {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.kve-action-buttons { display: flex; gap: 0.6rem; }

/* Mode visibility — extended rows hidden by default (perus mode) */
.kve-extended-only { display: none; }
.kve-wrap[data-mode="laajennettu"] .kve-extended-only { display: table-row; }

/* Validation message */
.kve-validation {
    color: #c62828;
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

@media (max-width: 640px) {
    .kve-controls { padding: 0.85rem 1rem; gap: 0.85rem; }
    .kve-actions-inline { margin-left: 0; }
    .kve-text-input { min-width: 0; width: 100%; }
    .kve-header { padding: 1rem 1.1rem; }
    .kve-title { font-size: 1.35rem; }
    .kve-action-bar { padding: 0.75rem 1rem; }
}

/* Print-friendly fallback for window.print() if used */
@media print {
    .kve-controls, .kve-action-bar, .kve-empty-hint { display: none !important; }
    .kve-wrap { border: 0; box-shadow: none; }
    .kve-extended-only { display: table-row; }
}