/* ===================================================================
 * Fisch Schloh — Maritime Design System
 * =================================================================== */

/* ---------------------------------------------------------------
 * 1. Design Tokens
 * --------------------------------------------------------------- */
:root {
    /* Palette */
    --color-bg:             #F3F6F9;
    --color-surface:        #FFFFFF;
    --color-surface-alt:    #FAFBFC;
    --color-navy-900:       #0A1F36;
    --color-navy-800:       #0F2C47;
    --color-navy-700:       #1B3A5B;
    --color-navy-500:       #355979;
    --color-navy-300:       #7E99B2;
    --color-teal-500:       #4E8C99;
    --color-teal-300:       #A3C6CE;
    --color-copper-500:     #C97B4A;
    --color-copper-400:     #D6916A;
    --color-green-500:      #5A8A6B;
    --color-amber-500:      #D9A441;
    --color-red-500:        #C44536;
    --color-text:           #1F2937;
    --color-text-muted:     #6B7280;
    --color-border:         #E2E8EF;
    --color-border-strong:  #CBD5DE;

    /* Soft Status Fills */
    --status-offen-bg:           #FDECEA;
    --status-offen-fg:           #8C2A21;
    --status-offen-br:           #F1BDB5;
    --status-bestellt-bg:        #FEF5E0;
    --status-bestellt-fg:        #8C6810;
    --status-bestellt-br:        #F2D989;
    --status-in_produktion-bg:   #FEEDD6;
    --status-in_produktion-fg:   #8A4A14;
    --status-in_produktion-br:   #F4C48A;
    --status-erledigt-bg:        #E3F0E7;
    --status-erledigt-fg:        #2E5A3E;
    --status-erledigt-br:        #AECFB8;
    --status-in_arbeit-bg:       #FEEDD6;
    --status-in_arbeit-fg:       #8A4A14;
    --status-in_arbeit-br:       #F4C48A;
    --type-einkauf-bg:           #E0F0F4;
    --type-einkauf-fg:           #1F4A56;
    --type-einkauf-br:           #9BCAD4;
    --type-vorbereitung-bg:      #FEF5E0;
    --type-vorbereitung-fg:      #8C6810;
    --type-vorbereitung-br:      #F2D989;
    --type-produktion-bg:        #E3F0E7;
    --type-produktion-fg:        #2E5A3E;
    --type-produktion-br:        #AECFB8;

    /* Typography */
    --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 1px rgba(10,31,54,.04);
    --shadow-sm: 0 1px 2px rgba(10,31,54,.06), 0 1px 1px rgba(10,31,54,.04);
    --shadow-md: 0 4px 12px rgba(10,31,54,.08), 0 1px 3px rgba(10,31,54,.04);
    --shadow-lg: 0 10px 30px rgba(10,31,54,.10), 0 4px 8px rgba(10,31,54,.04);

    /* Bootstrap Overrides */
    --bs-body-bg:       var(--color-bg);
    --bs-body-color:    var(--color-text);
    --bs-body-font-family: var(--font-ui);
    --bs-primary:       var(--color-navy-700);
    --bs-primary-rgb:   27,58,91;
    --bs-success:       var(--color-green-500);
    --bs-success-rgb:   90,138,107;
    --bs-info:          var(--color-teal-500);
    --bs-info-rgb:      78,140,153;
    --bs-warning:       var(--color-amber-500);
    --bs-warning-rgb:   217,164,65;
    --bs-danger:        var(--color-red-500);
    --bs-danger-rgb:    196,69,54;
    --bs-border-color:  var(--color-border);
    --bs-link-color:    var(--color-navy-700);
    --bs-link-hover-color: var(--color-navy-900);
}

/* ---------------------------------------------------------------
 * 2. Layout Shell
 * --------------------------------------------------------------- */
html { height: 100%; }

body {
    background-color: var(--color-bg);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    letter-spacing: -0.005em;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container-fluid { flex: 1; }

.site-footer {
    margin-top: auto;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border) !important;
}

/* ---------------------------------------------------------------
 * 3. Typography
 * --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.text-muted { color: var(--color-text-muted) !important; }

/* ---------------------------------------------------------------
 * 4. Navbar
 * --------------------------------------------------------------- */
.navbar.navbar-dark {
    background: var(--color-navy-800) !important;
    box-shadow: var(--shadow-md);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.navbar .navbar-brand i { color: var(--color-copper-400); }
.navbar .nav-link {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem !important;
    margin: 0 0.1rem;
    transition: background .15s, color .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { background: rgba(255,255,255,0.08); color: #fff; }
.navbar .dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.4rem;
}
.navbar .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}
.navbar .dropdown-item:hover { background: var(--color-bg); }
.navbar form input[type=search] {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    padding: 0.35rem 0.9rem;
}
.navbar form input[type=search]::placeholder { color: rgba(255,255,255,0.55); }
.navbar form input[type=search]:focus {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: var(--color-teal-300);
    box-shadow: 0 0 0 3px rgba(78,140,153,0.25);
}

/* ---------------------------------------------------------------
 * 5. Cards
 * --------------------------------------------------------------- */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
}
.card-header {
    background: linear-gradient(180deg, var(--color-surface-alt), var(--color-bg));
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    padding: 0.8rem 1.1rem;
    color: var(--color-navy-800);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.card-body { padding: 1.1rem; }

/* Dashboard Stat Cards */
.card.text-center .card-body {
    padding: 1.4rem 1rem;
    position: relative;
}
.card.text-center .card-body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-copper-500);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.row > .col-md-3:nth-child(1) .card.text-center .card-body::before { background: var(--color-navy-700); }
.row > .col-md-3:nth-child(2) .card.text-center .card-body::before { background: var(--color-amber-500); }
.row > .col-md-3:nth-child(3) .card.text-center .card-body::before { background: var(--color-green-500); }
.row > .col-md-3:nth-child(4) .card.text-center .card-body::before { background: var(--color-teal-500); }

.dashboard-stat {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--color-navy-800);
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------
 * 6. Tables
 * --------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: #F5F8FB;
    margin-bottom: 0;
}
.table > thead > tr > th,
.table > thead.table-light > tr > th {
    background: transparent !important;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border-strong);
    padding: 0.65rem 0.9rem;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 0.8rem 0.9rem;
    border-color: var(--color-border);
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > * { background: var(--bs-table-hover-bg); }

/* ---------------------------------------------------------------
 * 7. Badges (Pills with soft tint)
 * --------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35em 0.75em;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    vertical-align: middle;
}
.badge-status-offen     { background: var(--status-offen-bg);    color: var(--status-offen-fg);    border-color: var(--status-offen-br); }
.badge-status-bestellt  { background: var(--status-bestellt-bg); color: var(--status-bestellt-fg); border-color: var(--status-bestellt-br); }
.badge-status-in_produktion { background: var(--status-in_produktion-bg); color: var(--status-in_produktion-fg); border-color: var(--status-in_produktion-br); }
.badge-status-erledigt  { background: var(--status-erledigt-bg); color: var(--status-erledigt-fg); border-color: var(--status-erledigt-br); }
.badge-status-in_arbeit { background: var(--status-in_arbeit-bg); color: var(--status-in_arbeit-fg); border-color: var(--status-in_arbeit-br); }
.badge-status-open      { background: var(--color-bg);        color: var(--color-text-muted);  border-color: var(--color-border-strong); }
.badge-status-received  { background: var(--status-erledigt-bg); color: var(--status-erledigt-fg); border-color: var(--status-erledigt-br); }
/* Phase-2 State-Machine */
.badge-status-abgeschlossen         { background: var(--color-bg);            color: var(--color-navy-700);      border-color: var(--color-border-strong); }
.badge-status-telefonisch_abgefragt { background: #fff3cd;                    color: #664d03;                    border-color: #ffe69c; }
.badge-status-versand               { background: #cfe2ff;                    color: #084298;                    border-color: #9ec5fe; }
.badge-status-teilweise_geliefert   { background: var(--status-in_arbeit-bg); color: var(--status-in_arbeit-fg); border-color: var(--status-in_arbeit-br); }
.badge-status-geliefert             { background: var(--status-erledigt-bg);  color: var(--status-erledigt-fg);  border-color: var(--status-erledigt-br); }
.badge-status-storniert             { background: #f8d7da;                    color: #842029;                    border-color: #f5c2c7; }
.badge-type-einkauf     { background: var(--type-einkauf-bg);   color: var(--type-einkauf-fg);   border-color: var(--type-einkauf-br); }
.badge-type-vorbereitung{ background: var(--type-vorbereitung-bg); color: var(--type-vorbereitung-fg); border-color: var(--type-vorbereitung-br); }
.badge-type-produktion  { background: var(--type-produktion-bg); color: var(--type-produktion-fg); border-color: var(--type-produktion-br); }

/* ---------------------------------------------------------------
 * 8. Buttons
 * --------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
    padding: 0.5rem 1.05rem;
    border-width: 1px;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1.05rem; }

.btn-primary {
    background: var(--color-navy-700);
    border-color: var(--color-navy-700);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-navy-800);
    border-color: var(--color-navy-800);
    color: #fff;
}
.btn-success { background: var(--color-green-500); border-color: var(--color-green-500); }
.btn-success:hover,.btn-success:focus { background: #4B7659; border-color: #4B7659; }
.btn-info { background: var(--color-teal-500); border-color: var(--color-teal-500); color: #fff; }
.btn-info:hover,.btn-info:focus { background: #417A85; border-color: #417A85; color: #fff; }
.btn-warning { background: var(--color-amber-500); border-color: var(--color-amber-500); color: #fff; }
.btn-warning:hover,.btn-warning:focus { background: #BE8E30; border-color: #BE8E30; color: #fff; }
.btn-danger { background: var(--color-red-500); border-color: var(--color-red-500); }
.btn-danger:hover,.btn-danger:focus { background: #A63A2C; border-color: #A63A2C; }
.btn-secondary { background: var(--color-navy-300); border-color: var(--color-navy-300); color: #fff; }
.btn-secondary:hover,.btn-secondary:focus { background: var(--color-navy-500); border-color: var(--color-navy-500); }

.btn-outline-primary { color: var(--color-navy-700); border-color: var(--color-navy-500); background: transparent; }
.btn-outline-primary:hover,.btn-outline-primary:focus { background: var(--color-navy-700); border-color: var(--color-navy-700); color: #fff; }
.btn-outline-success { color: var(--color-green-500); border-color: var(--color-green-500); background: transparent; }
.btn-outline-success:hover,.btn-outline-success:focus { background: var(--color-green-500); color: #fff; }
.btn-outline-info { color: var(--color-teal-500); border-color: var(--color-teal-500); background: transparent; }
.btn-outline-info:hover,.btn-outline-info:focus { background: var(--color-teal-500); color: #fff; }
.btn-outline-warning { color: var(--color-amber-500); border-color: var(--color-amber-500); background: transparent; }
.btn-outline-warning:hover,.btn-outline-warning:focus { background: var(--color-amber-500); color: #fff; }
.btn-outline-danger { color: var(--color-red-500); border-color: var(--color-red-500); background: transparent; }
.btn-outline-danger:hover,.btn-outline-danger:focus { background: var(--color-red-500); color: #fff; }
.btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-border-strong); background: transparent; }
.btn-outline-secondary:hover,.btn-outline-secondary:focus { background: var(--color-navy-300); border-color: var(--color-navy-300); color: #fff; }

.btn-action { padding: 0.25rem 0.5rem; font-size: 0.875rem; }

/* ---------------------------------------------------------------
 * 9. Forms
 * --------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--color-border-strong);
    padding: 0.55rem 0.8rem;
    transition: border-color .15s, box-shadow .15s;
    background-color: var(--color-surface);
    color: var(--color-text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-navy-500);
    box-shadow: 0 0 0 3px rgba(27,58,91,.12);
}
.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}
.form-text { color: var(--color-text-muted); }

/* ---------------------------------------------------------------
 * 10. Alerts
 * --------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid;
    padding: 0.85rem 1.1rem;
}
.alert-success { background: var(--status-erledigt-bg); color: var(--status-erledigt-fg); border-color: var(--status-erledigt-br); }
.alert-danger  { background: var(--status-offen-bg);    color: var(--status-offen-fg);    border-color: var(--status-offen-br); }
.alert-warning { background: var(--status-bestellt-bg); color: var(--status-bestellt-fg); border-color: var(--status-bestellt-br); }
.alert-info    { background: var(--type-einkauf-bg);    color: var(--type-einkauf-fg);    border-color: var(--type-einkauf-br); }

/* ---------------------------------------------------------------
 * 11. Modals
 * --------------------------------------------------------------- */
.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
}
.modal-footer { border-top: 1px solid var(--color-border); }

/* ---------------------------------------------------------------
 * 12. Progress
 * --------------------------------------------------------------- */
.progress {
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar { background: var(--color-green-500); }

.step-done {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
 * 13. Kitchen View (light theme)
 * --------------------------------------------------------------- */
.kitchen-body {
    background: var(--color-bg);
    min-height: 100vh;
    min-height: 100dvh;
    font-size: 1.05rem;
    padding-bottom: 4.5rem; /* space for status footer where applicable */
}

.kitchen-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}
.kitchen-header h1 {
    font-size: 1.3rem;
    margin: 0;
    color: var(--color-navy-800);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kitchen-header h1 i { color: var(--color-copper-500); }
.kitchen-header .clock {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-navy-700);
    font-variant-numeric: tabular-nums;
}
.kitchen-header .kitchen-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.btn-kitchen-back,
.btn-fullscreen,
.btn-quick-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: all .15s;
    white-space: nowrap;
}
.btn-kitchen-back:hover,
.btn-fullscreen:hover { background: var(--color-bg); color: var(--color-navy-800); }
.btn-quick-add {
    background: var(--color-navy-700);
    color: #fff;
    border-color: var(--color-navy-700);
}
.btn-quick-add:hover { background: var(--color-navy-800); border-color: var(--color-navy-800); color: #fff; }
.btn-kitchen-back i, .btn-fullscreen i { font-size: 0.95rem; }

/* Progress strip below kitchen header (on show page) */
.progress-strip {
    height: 6px;
    background: var(--color-border);
}
.progress-strip-fill {
    height: 100%;
    background: var(--color-green-500);
    transition: width 0.4s;
}

.meta-bar {
    background: var(--color-surface);
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.meta-bar .badge-type { font-weight: 600; }
.meta-bar .counter {
    margin-left: auto;
    font-weight: 700;
    color: var(--color-navy-800);
}

/* Area headers: "Meine Aufträge" / "Nicht zugewiesen" */
.area-header {
    padding: 1rem 1.25rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-navy-700);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.area-header.unassigned { color: var(--color-copper-500); }
.area-header .area-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
}

/* Sections (Einkauf / Vorbereitung / Produktion) */
.sections-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.4rem 1rem 1.4rem;
}
@media (min-width: 900px) {
    .sections-wrapper { grid-template-columns: 1fr 1fr 1fr; }
}
.section-einkauf      .section-title,
.section-vorbereitung .section-title,
.section-produktion   .section-title { }
.section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0 0.4rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.section-einkauf     .section-title { color: var(--color-teal-500); }
.section-vorbereitung .section-title { color: var(--color-amber-500); }
.section-produktion  .section-title { color: var(--color-green-500); }

/* Order Cards on kitchen index */
.order-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-navy-500);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all .15s;
    min-height: 80px;
    box-shadow: var(--shadow-xs);
    -webkit-tap-highlight-color: transparent;
}
.order-card:hover,
.order-card:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: inherit;
    border-color: var(--color-border-strong);
    border-left-color: var(--color-navy-700);
}
.order-card.status-in_arbeit { border-left-color: var(--color-amber-500); }
.order-card.status-erledigt  { opacity: 0.55; border-left-color: var(--color-green-500); }
.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.order-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-navy-800);
    line-height: 1.3;
}
.order-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.order-meta i { opacity: 0.7; }
.status-pill { white-space: nowrap; }
.empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1.2rem 0;
    font-size: 0.9rem;
}
.empty-state i { opacity: 0.5; margin-right: 0.25rem; }
.keine-auftraege {
    text-align: center;
    color: var(--color-text-muted);
    padding: 4rem 1rem;
    font-size: 1.1rem;
}
.keine-auftraege i {
    font-size: 3rem;
    color: var(--color-green-500);
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.75;
}

/* Kitchen show: step list */
.steps-list {
    list-style: none;
    margin: 0;
    padding: 0.6rem 1rem 6rem;
}
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.55rem;
    box-shadow: var(--shadow-xs);
    transition: all .15s;
}
.step-item.done {
    background: #F4F8F5;
    border-color: var(--status-erledigt-br);
    opacity: 0.75;
}
.step-text {
    flex: 1;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--color-text);
    word-break: break-word;
}
.step-text.done-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.step-qty {
    font-weight: 700;
    color: var(--color-navy-800);
}
.step-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}
.btn-toggle {
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.btn-toggle:hover { border-color: var(--color-navy-500); color: var(--color-navy-700); }
.btn-toggle.done { background: var(--color-green-500); border-color: var(--color-green-500); color: #fff; }
.btn-toggle:active { transform: scale(0.93); }

/* Status footer (on show page) */
.status-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0.7rem 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 200;
    box-shadow: 0 -4px 12px rgba(10,31,54,.06);
}
.status-footer > span { color: var(--color-text-muted); font-size: 0.9rem; margin-right: 0.3rem; }
.btn-status {
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-status:hover { background: var(--color-bg); }
.btn-status.active-offen     { border-color: var(--status-offen-br);    color: var(--status-offen-fg);    background: var(--status-offen-bg); }
.btn-status.active-in_arbeit { border-color: var(--status-in_arbeit-br); color: var(--status-in_arbeit-fg); background: var(--status-in_arbeit-bg); }
.btn-status.active-erledigt  { border-color: var(--status-erledigt-br); color: var(--status-erledigt-fg); background: var(--status-erledigt-bg); }
.no-steps {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 1rem;
}
.no-steps i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.45;
}

/* Kitchen assignment UI pieces (dropdown + unassign) */
.kitchen-assign-form select {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
    max-width: 200px;
}

/* iOS standalone / full-screen extras */
@media (display-mode: standalone) {
    .kitchen-header { padding-top: max(0.75rem, env(safe-area-inset-top)); }
    .status-footer  { padding-bottom: max(0.7rem, env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------
 * 14. Auth-Seiten (Login, Passwort setzen, Passwort aendern)
 * --------------------------------------------------------------- */

body.auth-shell {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-ui);
    color: var(--color-text);
    background:
        radial-gradient(1000px 600px at 100% 100%, rgba(163, 198, 206, 0.14), transparent 65%),
        radial-gradient(700px 400px at 0% 10%,     rgba(255, 255, 255, 0.06), transparent 60%),
        linear-gradient(140deg, var(--color-navy-900) 0%, var(--color-navy-800) 40%, var(--color-navy-700) 75%, var(--color-teal-500) 135%);
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

/* Dezente Welle als SVG am unteren Rand.
   Das SVG ist URL-encoded (nicht nur im data: belassen), weil Firefox < 122
   inline single-quotes in data:image/svg+xml nicht sauber parst. */
body.auth-shell::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 180px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22rgba(255%2C255%2C255%2C0.045)%22%20d%3D%22M0%2C120%20C240%2C60%20480%2C150%20720%2C110%20C960%2C70%201200%2C140%201440%2C90%20L1440%2C180%20L0%2C180%20Z%22%2F%3E%3Cpath%20fill%3D%22rgba(78%2C140%2C153%2C0.18)%22%20d%3D%22M0%2C150%20C240%2C110%20480%2C170%20720%2C140%20C960%2C110%201200%2C165%201440%2C125%20L1440%2C180%20L0%2C180%20Z%22%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Sparse "ocean horizon" line */
body.auth-shell::after {
    content: "";
    position: absolute;
    inset: auto 0 32% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10) 50%, transparent);
    pointer-events: none;
    z-index: 0;
}

@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes auth-brand-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nutzer-Praeferenz respektieren: keine Entrance-Animations */
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-brand {
        animation: none !important;
    }
}

.auth-container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.25rem;
    gap: 1.5rem;
}

.auth-brand {
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    animation: auth-brand-in 420ms cubic-bezier(.2,.7,.2,1) both;
}
.auth-brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-copper-400);
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(214, 145, 106, 0.22), 0 0 12px rgba(214, 145, 106, 0.45);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:
        0 24px 60px -16px rgba(10, 31, 54, 0.45),
        0 8px 24px -8px rgba(10, 31, 54, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 2.25rem 2rem 1.875rem;
    position: relative;
    animation: auth-card-in 460ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: 80ms;
}
/* Oberer Akzent: dünner Copper-Streifen als Markenbezug */
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 18% auto 18%;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-copper-400) 40%, var(--color-copper-500) 60%, transparent);
    border-radius: 0 0 4px 4px;
}

.auth-card__header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-navy-800), var(--color-teal-500));
    color: #fff;
    font-size: 1.8rem;
    box-shadow:
        0 10px 20px -8px rgba(10, 31, 54, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -6px 12px -6px rgba(10, 31, 54, 0.35);
    margin-bottom: 1rem;
    position: relative;
}
.auth-card__logo::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(163, 198, 206, 0.35), transparent 70%);
    opacity: 0.6;
    z-index: -1;
}
.auth-card__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-navy-900);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.auth-card__subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
}

.auth-card .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-navy-800);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.auth-card .form-control {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    background: var(--color-surface-alt);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.auth-card .form-control:focus {
    border-color: var(--color-teal-500);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(78, 140, 153, 0.18);
    outline: 0;
}

.auth-card .form-field {
    margin-bottom: 1.125rem;
}

.auth-card__submit {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.9375rem 1rem;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--color-navy-800) 0%, var(--color-navy-700) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    box-shadow:
        0 4px 10px -4px rgba(10, 31, 54, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: background 160ms ease, transform 90ms ease, box-shadow 160ms ease;
}
.auth-card__submit:hover {
    background: linear-gradient(135deg, var(--color-navy-700) 0%, var(--color-teal-500) 140%);
    box-shadow:
        0 8px 22px -6px rgba(10, 31, 54, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}
.auth-card__submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -2px rgba(10, 31, 54, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.auth-card__submit:focus-visible {
    outline: 3px solid rgba(163, 198, 206, 0.55);
    outline-offset: 2px;
}

.auth-card .alert {
    border-radius: var(--radius-md);
    border: 0;
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.auth-card .alert-danger {
    background: var(--status-offen-bg);
    color: var(--status-offen-fg);
    border: 1px solid var(--status-offen-br);
}
.auth-card .alert-info {
    background: #E0F0F4;
    color: #1F4A56;
    border: 1px solid #9BCAD4;
}

.auth-footer {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-align: center;
    letter-spacing: 0.02em;
}
.auth-footer .sep {
    margin: 0 0.5em;
    opacity: 0.5;
}

/* Mobile tuning */
@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.25rem 1.5rem; border-radius: var(--radius-md); }
    .auth-card__logo { width: 56px; height: 56px; font-size: 1.6rem; }
}

/* ---------------------------------------------------------------
 * 15. Lieferanten-Badges & Kategorie-Tint (Phase 1)
 * --------------------------------------------------------------- */

/* Kleines Pill, das einen Lieferanten in Einkaufslisten / Arbeitsauftraegen /
   Kuechenansicht anzeigt. Wird in Phase 1.6 in mehreren Views eingebaut. */
.supplier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background-color: var(--color-teal-300);
    color: var(--color-navy-900);
    /* Fallback fuer Safari < 16.2 / Firefox < 113 ohne color-mix-Support */
    border: 1px solid rgba(78, 140, 153, 0.45);
    border: 1px solid color-mix(in srgb, var(--color-teal-500) 45%, transparent);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.supplier-badge:hover {
    background-color: #87b9c3; /* Fallback */
    background-color: color-mix(in srgb, var(--color-teal-300) 80%, var(--color-teal-500));
    color: var(--color-navy-900);
    text-decoration: none;
}
.supplier-badge.is-primary {
    background-color: #dce9ec; /* Fallback */
    background-color: color-mix(in srgb, var(--color-teal-500) 20%, var(--color-surface));
    border-color: var(--color-teal-500);
    font-weight: 600;
}
.supplier-badge.is-primary::before {
    content: "★";
    color: var(--color-copper-500);
    font-size: 0.75rem;
    line-height: 1;
}

/* Fallback-Darstellung, wenn nur supplier_info-Freitext vorhanden ist (kein FK). */
.supplier-badge.is-legacy {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-style: dashed;
    border-color: var(--color-border-strong);
    font-style: italic;
}

/* Kategorie-Zeilen-Tint (wird in Phase 3 fuer den Salat-Touch-View genutzt).
   Template setzt per inline-style --tint-color aus categories.color_hex. */
.category-row-tint {
    background: transparent; /* Fallback */
    background: color-mix(in srgb, var(--tint-color, transparent) 25%, transparent);
    transition: background 120ms ease;
}

/* Auf Tablet-Hochformat Filter-Pills aufs 44px Touch-Target anheben */
@media (max-width: 991px) {
    .nav-pills .nav-link {
        padding: 0.625rem 1rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
}

/* Print: Supplier-Badge soll nicht in weiss-auf-weiss verschwinden */
@media print {
    .supplier-badge,
    .supplier-badge.is-primary,
    .supplier-badge.is-legacy {
        background: transparent !important;
        border: 1px solid #999 !important;
        color: #000 !important;
    }
}

/* ---------------------------------------------------------------
 * 16. Print Styles (unchanged scope, refined)
 * --------------------------------------------------------------- */
@media print {
    .navbar, .btn, .btn-close, footer, .site-footer, .card-header .btn,
    form[onsubmit], .no-print, .status-footer, .btn-fullscreen {
        display: none !important;
    }
    .container-fluid { padding: 0 !important; }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .card-header {
        background: #fff !important;
        border-bottom: 1px solid #999 !important;
    }
    .badge {
        border: 1px solid #999 !important;
        background: #fff !important;
        color: #000 !important;
    }
    .table { font-size: 10pt; }
    a { text-decoration: none !important; color: #000 !important; }
    .step-item, .order-card {
        box-shadow: none !important;
        border-left: 1px solid #999 !important;
    }
}