/* Eigenstaendiges, schlankes Stylesheet fuer das Shop-Portal -- 1:1 Kopie von
   supplier-portal/css/supplier-panel.css (gleiche Zielgruppe an Bedienkonzept,
   nur andere Nutzergruppe), Klassenpraefix "sp-" bewusst beibehalten statt
   projektweit umzubenennen. */

:root {
    --sp-logo: #34495e;
    --sp-logo-light: #526b84;
    --sp-success: #00bf8e;
    --sp-success-bg: rgba(0, 191, 142, 0.12);
    --sp-success-dark: #04795d;
    --sp-warning: #f7c94b;
    --sp-warning-bg: rgba(247, 201, 75, 0.18);
    --sp-warning-dark: #a3690a;
    --sp-danger: #f75842;
    --sp-danger-bg: rgba(247, 88, 66, 0.1);
    --sp-danger-dark: #c0392b;
    --sp-border: #e6e9ef;
    --sp-bg-app: #f5f7fa;
    --sp-text: #1f2a37;
    --sp-text-muted: #64748b;
    --sp-text-faint: #94a3b8;
    /* Dieselben Schriften wie im Supplier-Portal (Nutzeranfrage 18.09.2026:
       "login seite zum shop analog wie supplier"). Bis dahin stand hier fest
       'Oswald', geladen wurde die Schrift aber nie -- das Shop-Portal band
       css/self-hosted-fonts.css als einzige Oberflaeche des Projekts nicht
       ein und lief deshalb auf Arial. */
    --sp-font-ui: 'IBM Plex Sans', 'Inter', 'Montserrat', sans-serif;
    --sp-font-heading: 'Barlow Semi Condensed', 'Oswald', sans-serif;
    --sp-radius: 10px;
    --sp-radius-pill: 999px;
    --sp-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --sp-transition: all 160ms ease;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sp-font-ui);
    background: var(--sp-bg-app);
    color: var(--sp-text);
}

h1, h2, h3, h4, h5 {
    margin: 0 0 5px;
    font-family: var(--sp-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sp-text);
}

a { color: inherit; }

/* ==================== LOGIN ==================== */
.sp-login-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Wasserzeichen wie im Supplier-Portal -- dasselbe Asset wie die
       Mail-Vorlagen (communication/mail.js::sendStyledNotification). Die
       Deckkraft von 12 % steckt im SVG selbst, hier nur gekachelt, damit die
       ganze Flaeche die Textur traegt und nicht nur der Bereich hinter der
       Karte. */
    background-color: var(--sp-bg-app);
    background-image: url('../img/email-watermark.svg');
    background-repeat: repeat;
    background-size: 280px 210px;
}

.sp-login-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 32px 28px;
    /* Zentriert nur Inline-/Text-Inhalte (Logo-Kasten, h1, p) -- Eingabefelder
       und Knopf sind block-level mit width:100% und bleiben unberuehrt. */
    text-align: center;
}

/* text-align vererbt sich -- ohne diesen Reset ruecken auch die Beschriftungen
   und der eingegebene Text in die Mitte. */
.sp-login-card form {
    text-align: left;
}

/* Das Logo hat weisse Bildelemente und verschwindet ohne dunklen Grund --
   gleiches Problem und gleiche Loesung wie bei .sp-topbar-logo-box. */
.sp-login-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--sp-logo), var(--sp-logo-light));
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    margin-bottom: 16px;
}

.sp-login-logo {
    height: 34px;
    width: auto;
}

.sp-login-card h1 {
    font-size: 1.4rem;
    margin: 0 0 4px;
}

.sp-login-card p {
    color: var(--sp-text-muted);
    margin: 0 0 24px;
    font-size: 0.9rem;
}

/* ==================== TOPBAR / LAYOUT ==================== */
.sp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid var(--sp-border);
    flex-wrap: wrap;
}

.sp-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Wortmarke statt Fliesstext neben dem Logo -- wie im Supplier-Portal:
   "Shop" in Markenfarbe und fett, "Portal" leichter daneben, damit beides
   als EIN Wort lesbar bleibt und "Shop" der Blickfang ist. */
.sp-topbar-title {
    font-family: var(--sp-font-heading);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--sp-logo-light);
}

.sp-topbar-title strong {
    font-weight: 700;
    color: var(--sp-logo);
}

.sp-topbar-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: linear-gradient(135deg, var(--sp-logo), var(--sp-logo-light));
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}

.sp-topbar-logo {
    height: 26px;
    width: auto;
}

/* Hamburger fuer die Nav-Link-Reihe -- nur bei <=760px sichtbar (siehe
   Media-Query weiter unten). Reines CSS-Icon (3 Balken) statt Icon-Font,
   da das Shop-Portal (anders als das Supplier-Portal) Unicons nirgends
   einbindet. */
.sp-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--sp-radius);
    background: var(--sp-bg-app);
    cursor: pointer;
    flex-shrink: 0;
}

.sp-nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--sp-text);
    border-radius: 1px;
}

.sp-topbar-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-topbar-nav a {
    padding: 8px 14px;
    border-radius: var(--sp-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text-muted);
    text-decoration: none;
    transition: var(--sp-transition);
}

.sp-topbar-nav a:hover {
    background: var(--sp-bg-app);
    color: var(--sp-text);
}

.sp-topbar-nav a.active {
    background: linear-gradient(180deg, var(--sp-logo), var(--sp-logo-light));
    color: #fff;
}

.sp-topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--sp-text-muted);
}

/* Nutzerfund 2026-07-30: langer Shop-Name neben "Abmelden" hatte keine
   Breitenbegrenzung -- konnte auf schmalen Screens ueberlaufen/haesslich
   umbrechen. */
#sp-username {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
}

/* ==================== FORM ELEMENTS ==================== */
.sp-form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sp-text-muted);
}

.sp-form-group input,
.sp-form-group select {
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    outline: none;
    background: #fff;
    color: var(--sp-text);
}

.sp-form-group input:focus,
.sp-form-group select:focus {
    border-color: var(--sp-logo-light);
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: var(--sp-radius-pill);
    cursor: pointer;
    transition: var(--sp-transition);
}

.sp-btn-primary {
    width: 100%;
    background: linear-gradient(180deg, var(--sp-logo), var(--sp-logo-light));
    color: #fff;
}

.sp-btn-primary:hover { filter: brightness(1.1); }

.sp-btn-success {
    background: linear-gradient(180deg, #1f9d75, var(--sp-success));
    color: #fff;
}

.sp-btn-secondary {
    background: #fff;
    border: 1px solid var(--sp-border);
    color: var(--sp-text-muted);
}

.sp-btn-danger {
    background: transparent;
    border: 1px solid var(--sp-danger);
    color: var(--sp-danger-dark);
}

.sp-error {
    color: var(--sp-danger-dark);
    background: var(--sp-danger-bg);
    padding: 10px 14px;
    border-radius: var(--sp-radius);
    font-size: 0.85rem;
    margin-bottom: 16px;
    display: none;
}

/* ==================== KPI / STAT CARDS ==================== */
.sp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.sp-stat-card {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-logo-light);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 16px 18px;
}

.sp-stat-card.success { border-left-color: var(--sp-success); }
.sp-stat-card.warning { border-left-color: var(--sp-warning); }

.sp-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sp-text-faint);
    margin-bottom: 6px;
}

.sp-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ==================== SECTIONS / CARDS ==================== */
.sp-section {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 20px;
    margin-bottom: 24px;
}

.sp-section h2 {
    font-size: 1.05rem;
    margin: 0 0 16px;
}

.sp-range-filter {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.sp-range-filter button {
    background: transparent;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sp-logo);
    border-right: 1px solid var(--sp-border);
}

.sp-range-filter button:last-child { border-right: none; }
.sp-range-filter button.active { background: var(--sp-logo); color: #fff; }

.sp-chart-wrap {
    position: relative;
    height: 260px;
    margin-bottom: 20px;
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.sp-table th,
.sp-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    white-space: nowrap;
}

.sp-table-wrap {
    overflow-x: auto;
}

.sp-table th {
    color: var(--sp-text-faint);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sp-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--sp-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sp-badge.pending { background: rgba(100, 116, 139, 0.12); color: var(--sp-text-muted); }
.sp-badge.approved { background: rgba(82, 107, 132, 0.14); color: var(--sp-logo); }
.sp-badge.paid { background: var(--sp-success-bg); color: var(--sp-success-dark); }
.sp-badge.rejected { background: var(--sp-danger-bg); color: var(--sp-danger-dark); }

.sp-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--sp-text-muted);
    font-size: 0.9rem;
}

/* Karten-Ansicht als Alternative zu .sp-table-wrap auf schmalen Screens
   (siehe Media-Query weiter unten) -- Spiegelbild von
   supplier-portal/css/supplier-panel.css. js/dashboard.js rendert IMMER
   beide Varianten parallel, nur CSS entscheidet per Breakpoint. */
.sp-table-cards {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.sp-table-card {
    background: #fff;
    border: 1px solid var(--sp-border);
    border-left: 3px solid var(--sp-logo-light);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-table-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.sp-table-card-label {
    color: var(--sp-text-faint);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.sp-table-card-value {
    color: var(--sp-text);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: right;
}

.sp-doc-code {
    background: #1f2a37;
    color: #e6e9ef;
    padding: 14px 16px;
    border-radius: var(--sp-radius);
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    overflow-x: auto;
    white-space: pre;
    margin: 10px 0 20px;
}

.sp-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 0.85rem;
}

.sp-doc-table th, .sp-doc-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--sp-border);
    vertical-align: top;
}

.sp-doc-table th {
    color: var(--sp-text-faint);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.sp-notice {
    background: var(--sp-warning-bg);
    color: var(--sp-warning-dark);
    padding: 12px 16px;
    border-radius: var(--sp-radius);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.sp-offline-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--sp-danger);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ==================== ÜBERSICHT: ZUSATZ-STATS ==================== */
.sp-subtable-wrap {
    overflow-x: auto;
    margin-top: -6px;
}

@media (max-width: 700px) {
    .sp-table th, .sp-table td { white-space: normal; }
}

/* ==================== RESPONSIVE (Tablet/Phone) ====================
   Gleiche Breakpoint-Werte wie css/admin-panel.css (761-1024px Tablet,
   <=760px Phone), damit sich die Portale konsistent verhalten. Dieses
   Portal hat kein Sidebar-Layout (nur Topbar-Nav), daher liegt der Fokus
   auf Innenabstaenden, der Pill-Filter-Leiste und den Tabellen. */
@media only screen and (min-width: 761px) and (max-width: 1024px) {
    .sp-main {
        padding: 20px;
    }

    .sp-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media only screen and (max-width: 760px) {
    .sp-topbar {
        padding: 12px 16px;
        gap: 10px;
    }

    .sp-nav-toggle {
        display: flex;
    }

    /* order sorgt dafuer, dass Brand+Toggle+User in der ersten Zeile bleiben
       (Nav kommt im Markup zwischen den beiden, wuerde ohne order sonst die
       User-Gruppe in eine dritte Zeile verdraengen), Nav klappt per
       flex-basis:100% als eigene Zeile darunter auf. */
    .sp-topbar-brand {
        order: 0;
    }

    .sp-topbar-user {
        order: 1;
    }

    .sp-topbar-nav {
        display: none;
        order: 2;
        flex-basis: 100%;
        flex-direction: column;
        gap: 6px;
    }

    .sp-topbar-nav.is-open {
        display: flex;
    }

    .sp-topbar-nav a {
        padding: 7px 12px;
        font-size: 0.8rem;
        text-align: center;
    }

    #sp-username {
        max-width: 90px;
    }

    .sp-main {
        padding: 16px;
    }

    .sp-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .sp-stat-value {
        font-size: 1.25rem;
    }

    .sp-section {
        padding: 16px;
    }

    .sp-chart-wrap {
        height: 200px;
    }

    /* Pill-Filter-Leiste (7/30/90 Tage/Gesamt) ist inline-flex ohne Wrap --
       auf schmalen Screens wuerde sie sonst ueber den Rand hinauswachsen.
       Gleiche Loesung wie .range-filter in admin-panel.css: Breite kappen,
       intern horizontal scrollen statt umzubrechen. */
    .sp-range-filter {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sp-range-filter button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .sp-table th,
    .sp-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    /* "Letzte Verkaeufe"-Tabelle: Kartenansicht statt horizontalem Scrollen
       (js/dashboard.js::renderTransfers() rendert beide Varianten immer
       parallel, siehe .sp-table-cards weiter oben). */
    #sp-transfers-table-wrap {
        display: none;
    }

    .sp-table-cards {
        display: flex;
    }

    /* API-Doku: .sp-doc-table hat keinen .sp-table-wrap um sich -- auf
       Mobile scrollt die Tabelle selbst horizontal, statt die Seite zu
       verbreitern. Lange Inline-Codes (Base-URLs, JSON-Beispiele) brechen
       um, statt ueber den Rand zu laufen. */
    .sp-doc-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sp-section code {
        word-break: break-word;
    }
}

/* Rechtsfuss (siehe shop-portal/nav.php::shopFooterHtml()). Bewusst
   zeichengleich mit supplier-portal/css/supplier-panel.css -- die beiden
   Portale sollen sich nicht grundlos unterscheiden, und dieselbe Vorlage
   heisst dieselben Klassennamen. Dezent gehalten: kein taeglicher
   Arbeitsbereich, soll nicht mit der Topbar konkurrieren. */
.sp-footer {
    max-width: 1100px;
    margin: 40px auto 0;
    padding: 20px 24px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 20px;
    border-top: 1px solid var(--sp-border);
    text-align: center;
}

.sp-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
}

.sp-footer-links a {
    color: var(--sp-text-faint);
    font-size: 0.78rem;
    text-decoration: none;
}

.sp-footer-links a:hover {
    color: var(--sp-logo-light);
    text-decoration: underline;
}

/* flex-basis:100% erzwingt die eigene Zeile unabhaengig von der Fensterbreite
   -- ohne das rutscht die Zeile bei genug Platz neben die Links. */
.sp-footer-copy {
    color: var(--sp-text-faint);
    font-size: 0.78rem;
    flex-basis: 100%;
}