/* Universal3/app_live/assets/css/main.css */
/* ==========================================================================
   ZENTRALE DESIGN-TOKEN (CSS-Variablen)
   ========================================================================== */
:root {
  /* Farben */
  --theme-color-primary: #0369a1; /* Fallback: Himmelblau 700 */
  --theme-color-primary-dark: #075985; /* Fallback: Himmelblau 800 */
  --theme-color-secondary: #475569; /* Fallback: Schiefergrau 600 */
  --theme-color-secondary-dark: #334155; /* Fallback: Schiefergrau 700 */
  --theme-color-accent: #15803d;  /* Fallback: Grün 700 */
  --theme-color-accent-dark: #166534; /* Fallback: Grün 800 */
  --theme-color-danger: #dc2626;   /* Fallback: Rot 600 */
  --theme-color-danger-dark: #b91c1c;    /* Fallback: Rot 700 */

  /* Text- und Hintergrundfarben */
  --theme-color-text-base: #334155;
  --theme-color-text-header: #111827;
  --theme-color-text-light: #64748b;
  --theme-color-text-on-primary: #ffffff;
  --theme-color-background-body: #f1f5f9;
  --theme-color-background-card: #ffffff;
  --theme-color-background-card-hover: #f8fafc;
  --theme-color-border: #e2e8f0;
  --theme-color-input-border: #d1d5db;

  /* Layout */
  --theme-border-radius: 0.75rem;
  --theme-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Zusammengeführte und bereinigte Stile
   ========================================================================== */

/* --- GRUNDLAGEN --- */
body {
  background-color: var(--theme-color-background-body);
  color: var(--theme-color-text-base);
}

.bg-white {
    background-color: var(--theme-color-background-card);
}
.border-slate-200 {
    border-color: var(--theme-color-border);
}
.shadow-lg {
    box-shadow: var(--theme-card-shadow);
}
.rounded-xl {
    border-radius: var(--theme-border-radius);
}

/* --- GRUNDLEGENDE TAB-STILE --- */
.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-btn.active, .tab-link.active {
    border-color: var(--theme-color-primary);
    color: var(--theme-color-primary-dark);
    background-color: var(--theme-color-background-card-hover);
}

/* --- FOKUS-STILE FÜR BARRIEREFREIHEIT --- */
:is(a, button, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color-primary) 50%, transparent);
    transition: box-shadow 0.1s ease-in-out;
}

/* --- HTML5 AKKORDEON (DETAILS/SUMMARY) STILE --- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(180deg); }

/* --- TOAST-BENACHRICHTIGUNGEN --- */
#toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 10px;
}
.toast {
    display: flex; align-items: center; padding: 12px 20px; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: var(--theme-color-text-on-primary); font-weight: 500;
    opacity: 0; transform: translateX(100%); transition: all 0.4s ease;
    min-width: 300px; max-width: 400px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { background-color: var(--theme-color-accent); }
.toast.error { background-color: var(--theme-color-danger); }
.toast.info { background-color: var(--theme-color-primary); }

/* ==========================================================================
   BUTTON STYLES (Standard & Kompakt)
   ========================================================================== */

#app .icon-button, #admin-app .icon-button {
    position: relative; display: inline-flex; align-items: center;
    gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.375rem;
    font-weight: 600; color: var(--theme-color-text-on-primary);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: all 0.15s ease-in-out;
    cursor: pointer; border: 1px solid transparent; min-height: 44px; font-size: 1rem;
}
#app .icon-button > svg, #admin-app .icon-button > svg { flex-shrink: 0; width: 20px; height: 20px; }
#app .icon-button > span, #admin-app .icon-button > span { white-space: nowrap; }

/* Spezifische Button-Farben */
#app #take-over-calculation-btn,
#app #load-calculation-btn,
#app #print-btn,
#app #print-hinweise-btn,
#app #print-anleitung-btn,
#admin-app label[for="load-config-rechner"].icon-button {
    background-color: var(--theme-color-primary);
}
#app #take-over-calculation-btn:hover,
#app #load-calculation-btn:hover,
#app #print-btn:hover,
#app #print-hinweise-btn:hover,
#app #print-anleitung-btn:hover,
#admin-app label[for="load-config-rechner"].icon-button:hover {
    background-color: var(--theme-color-primary-dark);
}

#app #load-qr-code-btn {
    background-color: var(--theme-color-text-header);
}
#app #load-qr-code-btn:hover {
    background-color: #000;
}

#app #save-calculation-btn,
#admin-app #save-as-config-btn {
    background-color: var(--theme-color-secondary);
}
#app #save-calculation-btn:hover,
#admin-app #save-as-config-btn:hover {
    background-color: var(--theme-color-secondary-dark);
}

#app #reset-calculation-btn {
    background-color: var(--theme-color-danger);
}
#app #reset-calculation-btn:hover {
    background-color: var(--theme-color-danger-dark);
}

#admin-app #save-config-btn {
    background-color: var(--theme-color-accent);
}
#admin-app #save-config-btn:hover {
    background-color: var(--theme-color-accent-dark);
}

/* --- Responsive & Kompakt-Modi --- */

/* Standard (Responsiv) */
@media (max-width: 768px) {
    body.button-style-standard-responsive .icon-button > span {
        display: none;
    }
    body.button-style-standard-responsive .icon-button {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
}

/* Kompakt-Modi (Immer kompakt) */
body.button-style-compact-color .icon-button,
body.button-style-compact-transparent .icon-button {
    width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0;
}
body.button-style-compact-color .icon-button > svg,
body.button-style-compact-transparent .icon-button > svg {
    width: 24px; height: 24px;
}
body.button-style-compact-color .icon-button > span,
body.button-style-compact-transparent .icon-button > span {
    display: none !important;
}
body.button-style-compact-color .icon-button:hover::after,
body.button-style-compact-transparent .icon-button:hover::after {
    content: attr(title); position: absolute; left: 50%; top: calc(100% + 8px);
    transform: translateX(-50%); background-color: var(--theme-color-text-header);
    color: var(--theme-color-text-on-primary); padding: 5px 10px; border-radius: 0.25rem;
    font-size: 0.8rem; white-space: nowrap; z-index: 10; pointer-events: none;
}

/* Kompakt & Transparent */
body.button-style-compact-transparent .icon-button {
    background-color: transparent !important; border-color: transparent !important;
    box-shadow: none !important; color: var(--theme-color-secondary) !important;
}
body.button-style-compact-transparent .icon-button:hover {
    background-color: var(--theme-color-border) !important;
}

/* --- VALIDIERUNG --- */
.validation-error-message { 
    display: none; 
    color: var(--theme-color-danger); 
    font-size: 0.875rem; 
    margin-top: 0.25rem; 
}
.input-invalid, input.input-invalid, textarea.input-invalid { 
    border-color: var(--theme-color-danger) !important; 
}
.input-invalid-flash { 
    animation: flash-red 0.6s ease-out; 
}

@keyframes flash-red {
  0% { border-color: var(--theme-color-danger); }
  100% { border-color: var(--theme-color-input-border); }
}

/* --- QR-CODE --- */
.qr-code-caption { 
    font-size: 0.60rem; 
    color: var(--theme-color-text-light); 
    margin-top: 0.25rem; 
    letter-spacing: -0.025em; 
}
.qr-video-container { 
    position: relative; 
    width: 100%; 
    max-width: 400px; 
    margin: 0 auto; 
    background-color: var(--theme-color-text-header); 
}
#qr-video { 
    width: 100%; 
    height: auto; 
    display: block; 
}
#qr-enlarged-modal.hidden { 
    display: none; 
}