/* energie.css — Energie-specific styles. Not portable to other apps. */

/* ── Header nav: centered (Energie-specific layout) ─────────────────────────── */

.header-nav { flex: 1; justify-content: center; }

/* ── Notification dot (Energie import indicator) ────────────────────────────── */

.notif-dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-warning); border: 1.5px solid var(--color-surface);
    pointer-events: none;
}
.user-btn { position: relative; }
.dropdown-link-btn--import { color: var(--color-warning); }

/* ── Main layout ───────────────────────────────────────────────────────────── */

/* .app-header and .app-footer are position: fixed — reserve space via the
   custom properties declared on :root in shared layout.css (rule §12/§12a/§13). */
body {
    padding-top:    var(--app-header-height);
    padding-bottom: var(--app-footer-height);
}

/* Rule §13: three-column footer (Impressum | © | Version). */
.app-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
}
.app-footer > :nth-child(1) { justify-self: start; }
.app-footer > :nth-child(2) { justify-self: center; }
.app-footer > :nth-child(3) { justify-self: end; }

main { padding: 1.5rem 2rem; }

/* ── Overview tiles ────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tile {
    background: var(--color-card);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: border-color .2s;
    display: block;
}
.tile:hover { border-color: var(--color-accent); }
.tile .icon { font-size: 2rem; margin-bottom: 0.5rem; }
.tile .period { color: var(--color-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; }
.tile h2 { font-size: 1rem; margin: 0.25rem 0 1rem; }
.tile .kpi { display: flex; flex-direction: column; gap: 0.5rem; }
.tile .kpi-row { display: flex; justify-content: space-between; align-items: baseline; }
.tile .kpi-label { color: var(--color-muted); font-size: 0.85rem; }
.tile .kpi-value { font-weight: 600; }
.tile .kpi-value.kwh   { color: var(--color-green); }
.tile .kpi-value.eur   { color: var(--color-accent); }
.tile .kpi-value.tariff { color: var(--color-blue); }

/* ── Drilldown nav bar ─────────────────────────────────────────────────────── */

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-card);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
}
.nav-bar a { color: var(--color-muted); text-decoration: none; font-size: 0.9rem; }
.nav-bar a:hover { color: var(--color-text); }
.nav-bar .period-label { font-weight: 600; }

.period-nav { display: flex; align-items: center; gap: 0.4rem; }

.print-btn {
    background: none; border: none; cursor: pointer;
    color: var(--color-muted); padding: 0.15rem 0.3rem; border-radius: 4px;
    display: flex; align-items: center;
    transition: color .15s, background .15s;
}
.print-btn:hover { color: var(--color-text); background: var(--color-card); }

.date-input-inline {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text);
    color-scheme: dark;
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    min-width: 9rem;
    flex-shrink: 0;
}

/* ── Tab bar ───────────────────────────────────────────────────────────────── */

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}
.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 1.25rem;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab-panel.hidden { display: none; }

/* ── Charts ────────────────────────────────────────────────────────────────── */

@keyframes chart-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.chart-container {
    background: var(--color-card);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    height: 60vh;
    min-height: 300px;
    position: relative;
    animation: chart-fade-in 0.3s ease-out both;
}

/* ── KPI strip ─────────────────────────────────────────────────────────────── */

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.kpi-card {
    background: var(--color-card);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
}
.kpi-card .label { color: var(--color-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em; }
.kpi-card .value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }
.kpi-card .value.kwh    { color: var(--color-green); }
.kpi-card .value.eur    { color: var(--color-accent); }
.kpi-card .value.tariff { color: var(--color-blue); }

/* ── Chart dataset pills ───────────────────────────────────────────────────── */

.chart-controls {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.75rem 0 0;
}
.chart-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--pill-color, #718096) 35%, var(--color-surface));
    color: color-mix(in srgb, var(--pill-color, #718096) 40%, #4a5568);
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
    background: color-mix(in srgb, var(--pill-color, #718096) 5%, var(--color-bg));
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.15);
    transition: box-shadow .1s, background .1s, border-color .1s, color .1s;
}
.chart-pill.active {
    border-color: var(--pill-color, #718096);
    color: var(--pill-color, #718096);
    background: color-mix(in srgb, var(--pill-color, #718096) 16%, transparent);
    box-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 3px 0 color-mix(in srgb, var(--pill-color, #718096) 28%, #000);
}

.chart-pill--cost    { --pill-color: var(--color-pill-cost); }
.chart-pill--kwh     { --pill-color: var(--color-green); }
.chart-pill--tariff  { --pill-color: var(--color-blue); }
.chart-pill--minmax  { --pill-color: var(--color-blue); }
.chart-pill--htariff { --pill-color: var(--color-pill-blue-strong); }
.chart-pill--htband  { --pill-color: var(--color-pill-blue-strong); }
.chart-pill--hkwh    { --pill-color: var(--color-pill-green-strong); }
.chart-pill--hkband  { --pill-color: var(--color-pill-green-strong); }

/* ── Invoice table ─────────────────────────────────────────────────────────── */

.invoice {
    background: var(--color-card);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    margin-top: 1rem;
    overflow: hidden;
}
.invoice-meta {
    padding: 0.85rem 1.25rem 0.6rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    line-height: 1.9;
}
.invoice-period-line {
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
}
.invoice-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.invoice-table th,
.invoice-table td {
    padding: 0.4rem 1.25rem;
    text-align: right;
    border-bottom: 1px solid var(--color-border);
}
.invoice-table th:first-child,
.invoice-table td:first-child { text-align: left; }
.invoice-table thead th { color: var(--color-muted); font-weight: 600; }
.invoice-table tbody tr:last-child td { border-bottom: none; }
.invoice-table tfoot th {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    color: var(--color-text);
}
.invoice-table tfoot td { border-bottom: none; }
.invoice-table .neg      { color: var(--color-green); }
.inv-sub-lbl             { color: var(--color-muted); font-style: italic; }
.inv-fee-lbl             { color: var(--color-muted); font-size: 0.8rem; padding-left: 2rem !important; }
.invoice-table tfoot .inv-fee-lbl + td,
.invoice-table tfoot .inv-fee-lbl ~ td { border-bottom: none; }

/* ── Login page ────────────────────────────────────────────────────────────── */

.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    padding: 2rem;
}
.login-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 360px;
}
.login-card h2 {
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
}
.login-card .form-group { margin-bottom: 1rem; }
.login-card .form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.35rem;
}
.login-card .form-group input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.95rem;
}
.login-card .form-group input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
}
.btn-login {
    width: 100%;
    padding: 0.65rem;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 0.5rem;
}
.btn-login:hover { opacity: 0.9; }

/* ── TOTP code input and 2FA card helpers ──────────────────────────────────── */

.totp-code-input {
    width: 100%;
    padding: .75rem 1rem;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: .25em;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}
.totp-code-input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
}

.totp-qr-wrap { margin: .75rem 0; }
.totp-qr-wrap img { display: block; width: 200px; height: 200px; }

.totp-secret {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .95rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .15rem .4rem;
    display: inline-block;
    word-break: break-all;
}

/* ── Preferences page ──────────────────────────────────────────────────────── */

.pref-section { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.pref-section-wide { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.admin-section { width: 100%; display: flex; flex-direction: column; gap: 1.25rem; }
.pref-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.pref-card-hdr { padding: 0.75rem 1.25rem; font-weight: 600; font-size: 0.85rem; color: var(--color-text); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--color-border); }
.pref-card-body { padding: 1.25rem; }
.pref-card-body p + p,
.pref-card-body ul + p,
.pref-card-body ol + p { margin-top: 0.75rem; }
.pref-card-body ul,
.pref-card-body ol { padding-left: 1.25rem; line-height: 1.55; }
.pref-card-body li + li { margin-top: 0.35rem; }
.pref-card-body a { color: var(--color-accent); }
.pref-card-body code {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.85em;
}
.help-dl { margin: 0; }
.help-dl dt { font-weight: 600; color: var(--color-text); margin-top: 0.75rem; }
.help-dl dt:first-child { margin-top: 0; }
.help-dl dd { margin: 0.15rem 0 0; color: var(--color-muted); line-height: 1.5; }
.pref-section .form-group { margin-bottom: 1rem; }
.pref-section .form-group:last-child { margin-bottom: 0; }
.pref-section .form-group label { display: block; font-size: 0.85rem; color: var(--color-text); margin-bottom: 0.35rem; }
.form-control {
    width: 100%; padding: 0.55rem 0.75rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; color: var(--color-text); font-size: 0.9rem;
}
.form-control:focus-visible { outline: none; border-color: var(--color-accent); }
.btn-group { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 1rem; }
.btn-group input[type=radio] { display: none; }
.btn-group label { flex: 1; text-align: center; padding: 0.5rem; font-size: 0.85rem; color: var(--color-muted); cursor: pointer; background: var(--color-surface); transition: background .15s, color .15s; }
.btn-group input[type=radio]:checked + label { background: var(--color-card); color: var(--color-text); font-weight: 600; }
.avatar-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.avatar-preview { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--color-border); }
.text-muted { color: var(--color-muted); font-size: 0.8rem; }
.input-group { display: flex; gap: 0.5rem; }
.input-group .form-control { flex: 1; }

/* Alerts: use shared components.css — no project-level overrides. */

/* ── Import confirmation dialog ─────────────────────────────────────────────── */

#import-dialog {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    padding: 1.5rem;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#import-dialog::backdrop { background: rgba(0,0,0,.55); }
#import-dialog h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; }
.import-counts { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; }
.import-counts .label { color: var(--color-muted); }
.import-counts .value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.import-counts .value.new { color: var(--color-green, #68d391); }
.import-counts .value.exists { color: var(--color-muted); }
.import-dialog-btns { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .tiles, .kpi-strip { grid-template-columns: 1fr; }
}

/* ---- Admin tabs ------------------------------------------------------ */
.admin-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}
.tab-link {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    transition: color 120ms, border-color 120ms;
}
.tab-link:hover {
    color: var(--color-text);
}
.tab-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ---- Admin alert container ------------------------------------------- */
#adminAlerts {
    position: fixed;
    top: calc(var(--header-height, 56px) + 1rem);
    right: 1rem;
    max-width: 360px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
#adminAlerts .alert {
    pointer-events: auto;
    box-shadow: var(--shadow);
}

/* ---- Log table activity wrapping ------------------------------------- */
.log-table td.log-activity {
    word-break: break-word;
    max-width: 36rem;
}
.log-table td.log-time {
    font-family: var(--font-mono);
    white-space: nowrap;
}