/* ============================================================
   PYROPICK · PREMIUM DESIGN SYSTEM
   Zentrale, seitenübergreifende Gestaltung.
   Wird NACH den Modul-Styles geladen und vereinheitlicht das
   Erscheinungsbild (Farben, Typografie, Abstände, Schatten,
   Komponenten) – ohne die Funktionalität zu verändern.
   ============================================================ */

/* ---------- Design Tokens ---------- */
/* Shop-Feature-Gating: deaktivierte Funktionen ausgrauen */
.shop-feature-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(60%);
}

:root {
    /* Marke – Ahlers Pyrotechnik, ausgewogene Mittelstufe */
    --brand-50:  #faf0f0;
    --brand-100: #f2d8d8;
    --brand-200: #e8b4b4;
    --brand-400: #e06868;
    --brand-500: #c84040;
    --brand-600: #ad3333;
    --brand-700: #942f2f;
    --brand-grad: linear-gradient(135deg, #0f0d0d 0%, #530707 55%, #a81010 100%);
    --brand-grad-btn: linear-gradient(135deg, #cc3d3d 0%, #a83232 100%);
    --brand-grad-soft: linear-gradient(135deg, #faf5f5 0%, #f5e6e6 100%);

    /* Neutrale Flächen */
    --bg:          #f5f3f3;
    --bg-grad:     radial-gradient(1200px 600px at 100% -10%, #f6ecec 0%, rgba(246,236,236,0) 60%),
                   radial-gradient(900px 500px at -10% 0%, #f4eeee 0%, rgba(244,238,238,0) 55%),
                   #f5f3f3;
    --surface:     #ffffff;
    --surface-2:   #faf9f9;
    --surface-3:   #f0eeee;

    /* Linien */
    --border:        #e8e4e4;
    --border-strong: #d9d3d3;

    /* Text */
    --text:        #1a1a1a;
    --text-muted:  #5c5656;
    --text-faint:  #9a9090;

    /* Semantik */
    --success:      #16a34a;
    --success-bg:   #dcfce7;
    --success-text: #166534;
    --warning:      #d97706;
    --warning-bg:   #fef3c7;
    --warning-text: #92400e;
    --danger:       #dc2626;
    --danger-bg:    #fee2e2;
    --danger-text:  #991b1b;
    --info:         #0891b2;
    --info-bg:      #cffafe;
    --info-text:    #155e75;

    /* Radien */
    --r-xs: 8px;
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 18px;
    --r-pill: 15px;
    --r-badge: 15px;

    /* Schatten */
    --shadow-xs: 0 1px 2px rgba(20, 28, 51, .06);
    --shadow-sm: 0 1px 3px rgba(20, 28, 51, .08), 0 1px 2px rgba(20, 28, 51, .04);
    --shadow:    0 6px 16px rgba(20, 28, 51, .08);
    --shadow-md: 0 12px 28px rgba(20, 28, 51, .10);
    --shadow-lg: 0 24px 50px rgba(20, 28, 51, .18);
    --shadow-brand: 0 7px 18px rgba(168, 52, 52, .22);

    /* Bewegung */
    --t: .18s cubic-bezier(.4, 0, .2, 1);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ---------- Basis ---------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .1px;
}

::selection {
    background: var(--brand-200);
    color: var(--brand-700);
}

/* Dezente, moderne Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #c4b8b8; background-clip: content-box; }

/* Sichtbarer, eleganter Fokus-Ring (nur Tastatur) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* ---------- Header ---------- */
header {
    background: var(--brand-grad) !important;
    color: #fff;
    box-shadow: 0 5px 18px rgba(168, 52, 52, .18);
    position: relative;
}
header h1 {
    font-weight: 700;
    letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
/* Header-Aktionsbuttons: dezent, durchscheinend (statt grau) */
header .btn-secondary,
header .btn {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(4px);
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: background var(--t), transform var(--t);
}
header .btn-secondary:hover,
header .btn:hover {
    background: rgba(255, 255, 255, .28);
}

/* ---------- Buttons ---------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning {
    font-family: var(--font);
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--t), box-shadow var(--t), transform var(--t), border-color var(--t), color var(--t);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover { transform: translateY(-1px); }
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active { transform: translateY(0); }

.btn,
.btn-primary {
    background: var(--brand-grad-btn);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #b83535 0%, #942d2d 100%);
    box-shadow: 0 9px 22px rgba(168, 52, 52, .28);
}

/* Sekundärbutton (außerhalb des Headers) */
.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background: var(--surface-2);
    border-color: #cfc5c5;
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22, 163, 74, .28);
}
.btn-success:hover { background: linear-gradient(135deg, #1eb257 0%, #128a3f 100%); }

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .26);
}
.btn-danger:hover { background: linear-gradient(135deg, #e23b3b 0%, #c11f1f 100%); }

.btn-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #43320b;
    box-shadow: 0 8px 20px rgba(217, 119, 6, .26);
}
.btn-warning:hover { background: linear-gradient(135deg, #f5b41a 0%, #e08c05 100%); }

button:disabled,
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* ---------- Formulare ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
select,
textarea {
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder { color: var(--text-faint); }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px var(--brand-100);
    background: var(--surface);
}

label { color: var(--text); }
small { color: var(--text-muted); }

/* ---------- Karten / Flächen ---------- */
.card,
.stat-card,
.user-card,
.picklist-card,
.picklist-item,
.detail-header,
.scan-section,
.items-section,
.packages-section,
.print-section,
.sync-status,
.activities-table,
.activities-filter,
.current-pickup,
.table-window-container,
.filter-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}

.card:hover,
.stat-card:hover,
.user-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.card h2 { color: var(--text); font-weight: 700; }
.card p { color: var(--text-muted); }
.stat-card h3 { color: var(--text-muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; font-size: 12px; }
.stat-card .value { color: var(--brand-600); }

/* Listenkarten / anklickbare Elemente */
.item-card,
.picklist-card,
.picklist-item {
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
}
.item-card.clickable:hover,
.picklist-card:hover,
.picklist-item:hover {
    border-color: var(--brand-400);
    box-shadow: 0 7px 20px rgba(168, 52, 52, .12);
}
.picklist-item.active {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: 0 0 0 3px var(--brand-100);
}

/* Status-Akzente der Item-Karten (Picker/Packer) */
.item-card.open  { border-color: var(--warning); background: #fffdf5; }
.item-card.picked { border-color: var(--success); background: #f3fbf6; }
.item-card.packed { border-color: var(--success); background: #f3fbf6; }
.click-hint { color: var(--brand-500); }

/* ---------- Picklisten-Info (Picker) ---------- */
.picklist-info { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.info-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.info-box .label { color: var(--text-muted); letter-spacing: .4px; }
.info-box .value { color: var(--text); }

/* ---------- Status-Badges & Indikatoren ---------- */
.status-badge,
.status-indicator,
.badge {
    border-radius: var(--r-badge);
    font-weight: 700;
    letter-spacing: .4px;
}
.status-indicator.open,   .badge-warning, .status-badge.open   { background: var(--warning-bg); color: var(--warning-text); }
.status-indicator.picking,.badge-info,    .status-badge.picking,
.status-badge.packing { background: var(--info-bg); color: var(--info-text); }
.status-indicator.picked, .badge-success, .status-badge.picked,
.status-badge.active { background: var(--success-bg); color: var(--success-text); }
.badge-danger, .status-badge.inactive { background: var(--danger-bg); color: var(--danger-text); }
.status-badge.packed { background: #dbeafe; color: #1e40af; }
.status-badge.abgeholt { background: #ccfbf1; color: #0f766e; }

/* ---------- Tabellen ---------- */
.table,
.activities-table {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table th,
.activities-table th {
    background: var(--surface-2) !important;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 1px solid var(--border) !important;
}
.table td,
.activities-table td { border-bottom: 1px solid var(--border); color: var(--text); }
.table tr:hover,
.activities-table tbody tr:hover { background: var(--brand-50); }
.table th.sortable:hover,
.table th:hover { background: var(--surface-3) !important; }

/* Tabellen-Container */
.table-window-container { padding: 16px; }
.table-window-wrapper { border: 1px solid var(--border); border-radius: var(--r-sm); }

/* ---------- Admin-Tabs ---------- */
.admin-tabs {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0 12px;
    gap: 4px;
    overflow-x: auto;
}
.tab-button {
    color: var(--text-muted);
    font-weight: 600;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.tab-button:hover { background: var(--surface-2); color: var(--text); }
.tab-button.active { color: var(--brand-600); border-bottom-color: var(--brand-500); background: var(--brand-50); }

.section-header h2 { color: var(--text); font-weight: 700; }

/* ---------- Modals ---------- */
.modal,
.login-modal,
.warning-popup {
    background: rgba(17, 22, 38, .55) !important;
    backdrop-filter: blur(6px);
}
.modal-content,
.login-modal-content,
.warning-popup-content {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .6);
}
.modal-header,
.login-modal-header { border-bottom: 1px solid var(--border); }
.modal-header h2,
.login-modal-header h2 { color: var(--text); font-weight: 700; }
.modal-actions { border-top: 1px solid var(--border); }
.modal-close,
.login-modal-close,
.close-btn {
    border-radius: var(--r-xs);
    color: var(--text-muted);
    transition: background var(--t), color var(--t);
}
.modal-close:hover,
.login-modal-close:hover,
.close-btn:hover { background: var(--surface-3); color: var(--text); }

/* ---------- Alerts / Meldungen ---------- */
.alert { border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 500; }
.alert-success, .success-message { background: var(--success-bg); color: var(--success-text); border-color: #bbf7d0; }
.alert-error, .error-message, .login-error { background: var(--danger-bg); color: var(--danger-text); border-color: #fecaca; }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: #fde68a; }
.alert-info { background: var(--info-bg); color: var(--info-text); border-color: #a5f3fc; }
.success-message, .error-message { border-radius: var(--r-sm); border-style: solid; border-width: 1px; }

.header-success-message {
    background: var(--success-bg) !important;
    color: var(--success-text) !important;
    box-shadow: var(--shadow-md);
}

/* Scan-Feedback */
.scan-feedback { border-radius: var(--r-sm); font-weight: 600; }
.scan-feedback.success { background: var(--success-bg); color: var(--success-text); border: 1px solid #bbf7d0; }
.scan-feedback.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid #fecaca; }

/* ---------- Fortschrittsbalken ---------- */
.progress-bar { background: var(--surface-3); border-radius: var(--r-pill); }
.progress-fill { background: var(--brand-grad-btn); border-radius: var(--r-pill); }
.progress-text { color: var(--brand-600); }

/* ---------- Lade-Zustände ---------- */
.loading,
.no-selection { color: var(--text-muted); }
.loading::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    vertical-align: -4px;
    border: 2.5px solid var(--brand-100);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: pp-spin .7s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---------- Suchleisten / Sektionen ---------- */
.admin-search-section { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.scan-section { border: 1px solid var(--border); }
.package-badge {
    background: var(--brand-50);
    border: 1.5px solid var(--brand-200);
    color: var(--brand-700);
    border-radius: var(--r-pill);
}
.package-indicator.scanned { background: var(--brand-500) !important; border-color: var(--brand-500) !important; }

/* ---------- Packer-Sidebar ---------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.sidebar h2 { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; }

/* ---------- Aktivitäten ---------- */
.activities-day-header { background: var(--brand-grad) !important; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }

/* ---------- Filter-Dropdowns ---------- */
.filter-dropdown { border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); }
.filter-dropdown-footer .btn-apply { background: var(--brand-grad-btn); }
.filter-btn.has-filter { background: var(--brand-50); }

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .loading::before { animation: pp-spin 1.2s linear infinite !important; }
}