/* =========================================================================
   Strompreis-Webseite – Stylesheet im KRAMSKI-Design
   Farben/Typo abgeleitet von kramski.com:
     Primaerblau #00A0E3, Tuerkis #00CFD7, Verlauf Tuerkis->Blau,
     Text #333, Flaechen #f3f3f3, dunkler Footer, 4px-Radius,
     Headlines condensed + GROSSBUCHSTABEN (Oswald als freier Ersatz
     fuer Trade Gothic Bold Condensed; Fliesstext Helvetica/Arial wie
     der Original-Fallback der Kramski-Seite).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

:root {
    /* KRAMSKI-Markenfarben */
    --accent:      #00A0E3;   /* Primaerblau */
    --accent-dark: #0095DB;   /* Hover */
    --accent-2:    #00CFD7;   /* Tuerkis (Sekundaer) */
    --grad:        linear-gradient(252deg, #00CFD7 0%, #00A0E3 100%);
    --grad-r:      linear-gradient(to right, #00A0E3, #00CFD7);

    --bg:          #f3f3f3;
    --card:        #ffffff;
    --text:        #333333;
    --muted:       #777777;
    --border:      #e2e2e2;
    --dark:        #333333;   /* Footer/dunkle Flaechen wie kramski.com */
    --danger:      #c02b0a;
    --good:        #2e9e44;   /* semantisch: guenstig */

    --radius:      4px;       /* Kramski nutzt 4px */
    --shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --maxw:        1000px;

    --font-head:   'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
    --font-body:   'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}

/* Headlines im Kramski-Stil: condensed, fett, GROSSBUCHSTABEN */
h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
    color: var(--text);
}

a { color: var(--accent); }
code { background: #e9f6fd; padding: 1px 5px; border-radius: var(--radius); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- Buttons & Formulare (Kramski: 4px, uppercase, blau) ---------- */
.btn {
    display: inline-block; cursor: pointer; border: 2px solid transparent;
    border-radius: var(--radius); padding: .5rem 1rem;
    font-family: var(--font-head); font-size: .9rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    background: #ffffff; color: var(--text); text-decoration: none;
    border-color: var(--border); transition: .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-primary {
    background: var(--grad); color: #fff; border-color: transparent;
}
.btn-primary:hover { background: var(--accent-dark); color: #fff; filter: none; }
.btn-danger  { background: #fff; color: var(--danger); border-color: #eac6bc; }
.btn-danger:hover { background: #fdf0ec; border-color: var(--danger); color: var(--danger); }

input[type=text], input[type=password], input[type=date], input[inputmode], select {
    width: 100%; padding: .5rem .6rem; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: .95rem; background: #fff; color: var(--text);
    font-family: var(--font-body);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
label.check, label.radio { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
label.check.big { font-weight: 700; font-size: 1rem; }

/* ---------- Alerts / Badges ---------- */
.alert { padding: .7rem .9rem; border-radius: var(--radius); margin: 0 0 1rem; border-left: 4px solid transparent; }
.alert-success { background: #eef9f0; border-color: var(--good); color: #226b33; }
.alert-warn    { background: #fff8e6; border-color: #e8b931; color: #7a5c07; }
.alert-error   { background: #fdf0ec; border-color: var(--danger); color: #8f2007; }
.badge { padding: .1rem .5rem; border-radius: var(--radius); font-size: .75rem; font-weight: 700;
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.badge-success { background: #dff3e4; color: #226b33; }
.badge-no_data { background: #fdeeb8; color: #7a5c07; }
.badge-error   { background: #f9ddd4; color: #8f2007; }

/* ---------- Oeffentliche Mitarbeiter-Seite ---------- */
.public-head {
    text-align: center; padding: 1.6rem 1rem 1.2rem; background: #fff;
    border-bottom: 1px solid var(--border); position: relative;
}
.public-head::before {
    /* Kramski-Farbverlauf als Markenlinie */
    content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-r);
}
.brandmark {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 1.05rem; letter-spacing: .35em; text-transform: uppercase;
    color: var(--accent); margin-bottom: .35rem;
}
.public-head h1 { margin: 0 0 .25rem; font-size: 1.9rem; }
.subtitle { margin: 0; color: var(--muted); }
.public-wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1rem; }

/* Datumswechsel (Mitarbeiter + Admin) */
.date-nav { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .5rem 0 1.2rem; }
.date-nav-form { margin: 0; }
.date-nav input[type=date] { width: auto; text-align: center; font-weight: 700; }
.nav-arrow {
    font-size: .95rem; line-height: 1; padding: .55rem .85rem; text-decoration: none;
    background: var(--grad); color: #fff; border-color: transparent;
}
.nav-arrow:hover { background: var(--accent-dark); color: #fff; border-color: transparent; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0; }
.kpi {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem .9rem; box-shadow: var(--shadow); text-align: center;
    border-top: 3px solid var(--accent);
}
.kpi span { display: block; font-family: var(--font-head); font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi strong { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; margin-top: .2rem; }
.kpi em { font-style: normal; font-size: .8rem; color: var(--muted); }
.kpi-good { border-top-color: var(--good); }
.kpi-good strong { color: var(--good); }
.kpi-bad { border-top-color: var(--danger); }
.kpi-bad strong  { color: var(--danger); }

.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1rem; }
.chart-canvas-wrap { position: relative; height: 360px; width: 100%; }
.hint { text-align: center; margin: .6rem 0 0; }
.empty-state { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem; text-align: center; box-shadow: var(--shadow); }

/* Footer im Kramski-Stil: dunkel, volle Breite */
.public-foot {
    margin: 2rem 0 0; padding: 1.4rem 1rem; background: var(--dark);
    color: #cccccc; text-align: center; font-size: .8rem;
}
.public-foot strong { color: #ffffff; }
body.public { display: flex; flex-direction: column; min-height: 100vh; }
body.public .public-wrap { flex: 1; width: 100%; }

/* ---------- Login / Setup ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem;
    background: var(--bg); }
.login-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.8rem; width: 100%; max-width: 380px;
    border-top: 5px solid; border-image: var(--grad-r) 1; }
.login-card h1 { margin: 0 0 .25rem; font-size: 1.4rem; text-align: center; }
.login-card form { display: grid; gap: .9rem; margin-top: 1rem; }

/* ---------- Admin-Layout (weisser Kopf wie kramski.com) ---------- */
.topbar { background: #ffffff; color: var(--text); position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid var(--border); }
.topbar::before { content: ""; display: block; height: 4px; background: var(--grad-r); }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center;
    gap: 1rem; padding: .55rem 1rem; flex-wrap: wrap; }
.brand { color: var(--accent); font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; text-decoration: none; font-size: 1.05rem; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--text);
    font-size: 1.4rem; cursor: pointer; }
.mainnav { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.mainnav a {
    color: var(--text); text-decoration: none; padding: .4rem .65rem; border-radius: var(--radius);
    font-family: var(--font-head); font-weight: 600; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.mainnav a:hover { color: var(--accent); background: #eef8fd; }
.mainnav a.is-active { background: var(--grad); color: #fff; }
.mainnav a.logout { color: var(--danger); }
.mainnav a.logout:hover { background: #fdf0ec; color: var(--danger); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.wrap > h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.2rem; margin-bottom: 1.4rem; }
.card h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.foot { background: var(--dark); color: #cccccc; text-align: center; font-size: .8rem; padding: 1.2rem 1rem; }

/* ---------- Tabellen ---------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { background: #f8f8f8; font-family: var(--font-head); font-weight: 600;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.steps { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; }
.steps li { display: grid; grid-template-columns: 1.4fr 1.4fr .8fr .8fr; gap: .4rem; font-size: .82rem; }
.step-label { font-weight: 700; }
.step-detail, .step-amount, .step-run { color: var(--muted); }
details summary { cursor: pointer; color: var(--accent); }

/* ---------- Baustein-Liste (Cards) ---------- */
.component-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.component-item {
    display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .6rem;
    background: #fafbfc; border: 1px solid var(--border); border-left: 3px solid var(--accent);
    border-radius: var(--radius); padding: .7rem;
}
.component-item.is-inactive { opacity: .55; border-left-color: var(--border); }
.component-item.dragging { outline: 2px dashed var(--accent); }
.drag-handle { cursor: grab; font-size: 1.3rem; color: var(--muted); padding: .2rem .3rem; user-select: none; align-self: center; }
.component-form { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr auto auto; gap: .6rem; align-items: end; }
.add-form { background: #fafbfc; }
.field { min-width: 0; }
.field label { font-size: .75rem; }
.field-actions { align-self: end; }
.inline-form { align-self: center; }

/* ---------- Manueller Abruf (Dashboard) ---------- */
.fetch-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.fetch-actions .inline-form { display: flex; gap: .4rem; align-items: center; }
.fetch-custom input[type=date] { width: auto; }

/* ---------- Export-Formular ---------- */
.export-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.export-form .field { flex: 1 1 160px; }
.export-form input[type=date], .export-form select { width: 100%; }

/* ---------- gestapelte Formulare (Settings) ---------- */
.stacked-form { display: grid; gap: .8rem; max-width: 460px; }
.stacked-form h2 { margin-top: .6rem; }
.form-actions { margin-top: .5rem; }

/* =========================================================================
   Responsive – Breakpoints
   ========================================================================= */
@media (max-width: 760px) {
    .component-form { grid-template-columns: 1fr 1fr; }
    .component-form .field-name { grid-column: 1 / -1; }
    .component-form .field-actions { grid-column: 1 / -1; }
    .steps li { grid-template-columns: 1fr; gap: .05rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--border); }
}

@media (max-width: 640px) {
    /* KPIs bleiben nebeneinander, aber kompakt – kein langer Stapel */
    .kpis { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
    .kpi { padding: .6rem .35rem; }
    .kpi span { font-size: .6rem; letter-spacing: .03em; }
    .kpi strong { font-size: 1.02rem; }
    .kpi em { font-size: .68rem; }

    /* Chart: volle Breite ohne Scrollen, kompaktere Hoehe */
    .chart-card { padding: .6rem .4rem .4rem; }
    .chart-canvas-wrap { height: 260px; }

    .public-head { padding: 1.1rem .8rem .9rem; }
    .public-head h1 { font-size: 1.35rem; }
    .brandmark { font-size: .9rem; }
    .subtitle { font-size: .85rem; }
    .public-wrap { padding: .8rem .6rem; }
    .date-nav { margin: .3rem 0 .9rem; }

    .nav-toggle { display: block; }
    .mainnav { display: none; width: 100%; flex-direction: column; }
    body.nav-open .mainnav { display: flex; }
    .mainnav a { padding: .6rem .4rem; border-bottom: 1px solid var(--border); border-radius: 0; }
    .component-item { grid-template-columns: auto 1fr; }
    .component-item .inline-form { grid-column: 2; justify-self: start; }
}

@media (max-width: 420px) {
    .component-form { grid-template-columns: 1fr; }
}