html, body {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    margin: 0;
}

/* On phones, make dialogs full-screen and scrollable so the soft keyboard never
   hides the field being typed. 100dvh shrinks when the keyboard opens, so the
   scrollable content keeps the focused input visible. Desktop is unaffected. */
@media (max-width: 600px) {
    .mud-dialog-container .mud-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mud-dialog-container .mud-dialog > .mud-dialog-content {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0F7B63;
}

.content {
    padding-top: 1.1rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff4ce;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Παρουσιάστηκε σφάλμα."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #d6e4df;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #0F7B63;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: #4f6b62;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Φόρτωση...");
    }

/* ── App shell ─────────────────────────────────────────────────────── */
body { background: #F4F7F6; }

/* Room for the fixed bottom nav (+ iPhone home bar). */
.app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    display: flex; justify-content: center;
    background: #fff; border-top: 1px solid #e3e8e6;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-inner { display: flex; width: 100%; max-width: 600px; }
.bottom-nav a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 6px; text-decoration: none; color: #5f6d68; font-size: 12px;
    min-height: 56px; justify-content: center;
}
.bottom-nav a.active { color: #0F7B63; font-weight: 500; }
.bottom-nav a .mud-icon-root { font-size: 24px; }

/* Add button floats above the bottom nav. */
.fab-add { position: fixed !important; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1250; }

/* ── Lists ─────────────────────────────────────────────────────────── */
.day-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 4px 6px; color: #5f6d68; font-size: 13px; font-weight: 500;
}
.exp-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: #fff; cursor: pointer; border-bottom: 1px solid #edf1ef;
}
.exp-row:first-of-type { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.exp-row:last-of-type { border-bottom: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.exp-row:hover { background: #f7faf9; }
.exp-main { flex: 1 1 auto; min-width: 0; }
.exp-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-sub { font-size: 12.5px; color: #5f6d68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-right { text-align: right; flex: 0 0 auto; }
.exp-amount { font-weight: 500; font-variant-numeric: tabular-nums; }
.exp-effect { font-size: 12px; font-variant-numeric: tabular-nums; }

.cat-dot {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.cat-dot .mud-icon-root { font-size: 20px; }
.cat-dot.sm { width: 28px; height: 28px; }
.cat-dot.sm .mud-icon-root { font-size: 16px; }

/* Effect colours: text tokens, never the series colour. */
.pos { color: #1E7E34; }
.neg { color: #C62828; }
.muted { color: #5f6d68; }
.num { font-variant-numeric: tabular-nums; }

/* ── Expense form ──────────────────────────────────────────────────── */
.amount-input input { font-size: 28px !important; font-weight: 500; font-variant-numeric: tabular-nums; }
.section-label { font-size: 13px; color: #5f6d68; font-weight: 500; margin: 14px 0 4px; }
.chip-wrap .mud-chip { margin: 3px 4px 3px 0; }
.preview-box { background: #eef6f3; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.preview-box.err { background: #fdecea; color: #8e1c1c; }

/* ── Stats ─────────────────────────────────────────────────────────── */
.hero-value { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero-label { font-size: 12.5px; color: #5f6d68; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; cursor: pointer; border-radius: 6px; }
.rank-row:hover { background: #f2f6f4; }
.rank-bar-track { height: 6px; background: #edf1ef; border-radius: 3px; margin-top: 4px; }
.rank-bar { height: 6px; border-radius: 3px; }
.viz-root text { font-family: 'Roboto', 'Segoe UI', sans-serif; }

/* Greek in ALL CAPS loses accents and overflows small buttons: sentence case. */
.mud-button-root .mud-button-label, .mud-fab-label { text-transform: none; }