/**
 * Einheitliches UI-Design (angelehnt an VLAN-Design-App)
 * Buttons, Eingabefelder und Steuerelemente app-weit einheitlich.
 */

/* ========== Buttons (VLAN-Stil: klar, Pill-Form, einheitlich) ========== */
.btn,
button.btn {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    box-shadow: none;
}

.btn:before {
    display: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--primary-color);
    color: #fff !important;
    border-color: transparent;
}

.btn-primary:hover {
    background: var(--primary-dark, #4338ca);
    color: #fff !important;
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
}

.btn-secondary:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-color) !important;
}

.btn-outline {
    background: transparent;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: #fff !important;
}

.btn-link {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-link:hover {
    text-decoration: underline;
    color: var(--primary-dark, var(--primary-color)) !important;
}

.btn-danger {
    background: var(--danger-color);
    color: #fff !important;
    border-color: transparent;
}

.btn-danger:hover {
    background: #dc2626;
    color: #fff !important;
}

/* Kleine Buttons */
.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
}

/* ========== Eingabefelder (VLAN-Stil: abgerundet, klare Kontur) ========== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Form-Gruppen (Abstand, Labels) */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    max-width: 100%;
}

/* Admin-Filter (gleicher Stil wie globale Inputs) */
.admin-filter-select,
.admin-filter-input {
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-size: 0.95rem !important;
}

.admin-filter-select:focus,
.admin-filter-input:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Checkbox/Radio (sichtbar, Akzentfarbe) */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    max-width: none;
    accent-color: var(--primary-color);
}

/* ========== Dark Mode ========== */
[data-theme="dark"] .btn-secondary {
    background: var(--bg-secondary);
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .admin-filter-select,
[data-theme="dark"] .admin-filter-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ========== Alle Apps: gleiche Buttons wie VLAN-Design (Pill, einheitliche Farben) ========== */
/* Primary-Buttons (Antwort prüfen, Berechnen, Prüfen, Lösung prüfen, etc.) */
.view .vlan-btn-primary,
.view .dmz-btn-primary,
.view .vs-btn-primary,
.view .sv-btn-primary,
.view .calculate-btn,
.view .check-btn,
.view .submit-btn,
.view .next-btn,
.view .new-task-btn,
.view .new-values-btn,
.view .start-btn,
.view .action-btn.primary,
.view .btn-primary,
.view .btn.btn-primary,
.view .poe-check-btn,
.view #poe-check-btn,
.view #vlan-check-btn,
.view #dmz-check-btn,
.view #vs-check-btn,
.view #ipv4-vlsm-check-btn,
.view .bandbreite-btn-new,
.calculator-container .btn-primary,
.calculator-container .btn.btn-primary,
.calculator-container .calculate-btn,
.calculator-container .check-btn,
#exercises-content .action-btn.primary,
#exercises-content .calculate-btn,
#exercises-content .check-btn,
#exercises-content .start-btn,
.view .start-btn,
.vlan-app .vlan-btn-primary,
.dmz-design-container .dmz-btn-primary,
.video-surv-app .vs-btn-primary,
.ipv4-vlsm-card .btn-primary,
.wlan-app .btn-primary,
.poe-standards-container .poe-check-btn,
button[id$="-check-btn"],
button[id$="-check-btn"].btn,
button[id$="-check-btn"].btn-primary {
    padding: 0.5rem 1.1rem !important;
    min-width: 160px !important;
    border-radius: 999px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    background: var(--primary-color, #2563eb) !important;
    color: #fff !important;
    transition: background 0.2s ease, transform 0.15s ease;
}
.view .vlan-btn-primary:hover,
.view .dmz-btn-primary:hover,
.view .vs-btn-primary:hover,
.view .calculate-btn:hover,
.view .check-btn:hover,
.view .submit-btn:hover,
.view .next-btn:hover,
.view .start-btn:hover,
.view .action-btn.primary:hover,
.view .btn-primary:hover,
.calculator-container .btn-primary:hover,
.calculator-container .calculate-btn:hover,
.calculator-container .check-btn:hover,
.vlan-app .vlan-btn-primary:hover,
.dmz-design-container .dmz-btn-primary:hover,
.video-surv-app .vs-btn-primary:hover,
.ipv4-vlsm-card .btn-primary:hover,
.wlan-app .btn-primary:hover,
button[id$="-check-btn"]:hover {
    background: var(--primary-dark, #4338ca) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Secondary-Buttons (Zurücksetzen, Neue Aufgabe, etc.) */
.view .vlan-btn-secondary,
.view .dmz-btn-secondary,
.view .vs-btn-secondary,
.view .action-btn:not(.primary),
.view .action-btn.secondary,
.view .btn-secondary,
.view .btn.btn-secondary,
.view .poe-new-task-btn,
.view #poe-new-task-btn,
.view #vlan-reset-btn,
.view #dmz-reset-btn,
.view #vs-new-btn,
.view #ipv4-vlsm-new-btn,
.calculator-container .btn-secondary,
.calculator-container .btn.btn-secondary,
.calculator-container .new-values-btn,
#exercises-content .action-btn:not(.primary),
.vlan-app .vlan-btn-secondary,
.dmz-design-container .dmz-btn-secondary,
.video-surv-app .vs-btn-secondary,
.ipv4-vlsm-card .btn-secondary,
.wlan-app .btn-secondary,
.poe-standards-container .poe-new-task-btn,
button[id$="-new-task-btn"],
button[id$="-reset-btn"],
button[id$="-new-btn"],
button.new-values-btn {
    padding: 0.5rem 1.1rem !important;
    min-width: 160px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    background: var(--bg-primary, #fff) !important;
    color: var(--primary-color, #2563eb) !important;
    border: 1px solid var(--primary-color, #2563eb) !important;
    margin-left: 0.35rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.view .vlan-btn-secondary:hover,
.view .dmz-btn-secondary:hover,
.view .vs-btn-secondary:hover,
.view .btn-secondary:hover,
.view .action-btn:not(.primary):hover,
.calculator-container .btn-secondary:hover,
.calculator-container .new-values-btn:hover,
.vlan-app .vlan-btn-secondary:hover,
.dmz-design-container .dmz-btn-secondary:hover,
.video-surv-app .vs-btn-secondary:hover,
.ipv4-vlsm-card .btn-secondary:hover,
.wlan-app .btn-secondary:hover,
button.new-values-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--primary-color, #2563eb) !important;
    border-color: var(--primary-color, #2563eb) !important;
    transform: translateY(-1px);
}

/* Eingabefelder in Apps: gleicher Stil wie VLAN-Design (abgerundet, klare Kontur) */
.view input[type="text"],
.view input[type="number"],
.view input[type="email"],
.view select,
.view textarea,
.calculator-container input[type="text"],
.calculator-container input[type="number"],
.calculator-container select,
.calculator-container textarea,
.vlan-port-table input[type="text"],
.vlan-port-table select,
.exercise-input,
.input-container input,
.input-container select,
.task-container input,
.task-container select,
.input-group input,
.input-group select,
#exercises-content input[type="text"],
#exercises-content input[type="number"],
#exercises-content select {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color, #d1d5db) !important;
    background: var(--bg-primary, #fff) !important;
    color: var(--text-primary, #1e293b) !important;
    font-size: 0.95rem !important;
    font-family: inherit !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.view input:focus,
.view select:focus,
.view textarea:focus,
.calculator-container input:focus,
.calculator-container select:focus,
.calculator-container textarea:focus,
.exercise-input:focus,
.vlan-port-table input:focus,
.vlan-port-table select:focus {
    outline: none !important;
    border-color: var(--primary-color, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Feedback-Zustände (richtig/falsch) wie bei VLAN */
.view .vlan-input-ok,
.view .input-ok,
.calculator-container .vlan-input-ok,
.calculator-container .input-ok,
.input-ok {
    border-color: #16a34a !important;
    background: rgba(22, 163, 74, 0.05) !important;
}
.view .vlan-input-wrong,
.view .input-wrong,
.calculator-container .vlan-input-wrong,
.calculator-container .input-wrong,
.input-wrong {
    border-color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.05) !important;
}

/* Dark Mode: App-Buttons und -Inputs */
[data-theme="dark"] .view .btn-secondary,
[data-theme="dark"] .view .vlan-btn-secondary,
[data-theme="dark"] .view .dmz-btn-secondary,
[data-theme="dark"] .view .vs-btn-secondary,
[data-theme="dark"] .calculator-container .btn-secondary,
[data-theme="dark"] .vlan-app .vlan-btn-secondary,
[data-theme="dark"] .dmz-design-container .dmz-btn-secondary,
[data-theme="dark"] .video-surv-app .vs-btn-secondary,
[data-theme="dark"] .ipv4-vlsm-card .btn-secondary,
[data-theme="dark"] button.new-values-btn {
    background: var(--bg-secondary, #1e293b) !important;
    color: var(--primary-color, #93c5fd) !important;
    border-color: var(--primary-color, #60a5fa) !important;
}
[data-theme="dark"] .view input[type="text"],
[data-theme="dark"] .view input[type="number"],
[data-theme="dark"] .view select,
[data-theme="dark"] .calculator-container input,
[data-theme="dark"] .calculator-container select,
[data-theme="dark"] .exercise-input,
[data-theme="dark"] .vlan-port-table input,
[data-theme="dark"] .vlan-port-table select {
    background: var(--bg-secondary, #0f172a) !important;
    border-color: var(--border-color, #475569) !important;
    color: var(--text-primary, #e2e8f0) !important;
}

/* Number-Inputs: Spinner (Pfeile hoch/runter) in Apps ausblenden – einheitliches Textfeld */
.view input[type="number"],
.calculator-container input[type="number"],
.energie-amortisation-app input[type="number"],
.input-grid input[type="number"],
#ea-input-section input[type="number"],
#ea-ealt-input,
#ea-eneu-input,
#ea-kalt-input,
#ea-kneu-input,
#ea-einspar-input,
#ea-amort-input,
.exercise-input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.view input[type="number"]::-webkit-outer-spin-button,
.view input[type="number"]::-webkit-inner-spin-button,
.calculator-container input[type="number"]::-webkit-outer-spin-button,
.calculator-container input[type="number"]::-webkit-inner-spin-button,
.energie-amortisation-app input[type="number"]::-webkit-outer-spin-button,
.energie-amortisation-app input[type="number"]::-webkit-inner-spin-button,
.input-grid input[type="number"]::-webkit-outer-spin-button,
.input-grid input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    appearance: none !important;
}

/* Netzteil-Dimensionierung: alle Buttons gleiche Größe, in einer Linie */
#netzteil-dimensionierung-view .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
#netzteil-dimensionierung-view .button-container .btn-secondary,
#netzteil-dimensionierung-view .button-container .check-btn,
#netzteil-dimensionierung-view .button-container .next-btn {
    min-width: 160px !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 2.5rem !important;
    box-sizing: border-box !important;
}

/* Hardware: RAID-Rechner – Buttons in einer Linie, gleicher Stil wie restliche Apps */
#raid-calculator-view .raid-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}
#raid-calculator-view .raid-controls .btn-primary,
#raid-calculator-view .raid-controls .btn-secondary,
#raid-calculator-view #check-raid-answer,
#raid-calculator-view #new-raid-task {
    min-width: 160px !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Hardware-Quiz: Submit/Next in einer Linie, gleiche Größe */
#hardware-quiz-view .quiz-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
#hardware-quiz-view .quiz-controls .submit-btn,
#hardware-quiz-view .quiz-controls .next-btn {
    min-width: 160px !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ohmsches Gesetz & Leistung: Überprüfen-Button wie restliches Design (Pill, einfarbig, dezenter Hover) */
.ohms-law-app #check-calculation-btn,
.ohms-law-app .btn.btn-success,
#electric-formula-assignment-app-container .btn.btn-success {
    padding: 0.5rem 1.1rem !important;
    min-width: 160px !important;
    border-radius: 999px !important;
    border: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    background: var(--primary-color, #2563eb) !important;
    color: #fff !important;
    transition: background 0.2s ease, transform 0.15s ease;
}
.ohms-law-app #check-calculation-btn:hover,
.ohms-law-app .btn.btn-success:hover,
#electric-formula-assignment-app-container .btn.btn-success:hover {
    background: var(--primary-dark, #4338ca) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.ohms-law-app #new-calculation-task-btn,
.ohms-law-app .btn.btn-primary,
#electric-formula-assignment-app-container .btn.btn-primary {
    padding: 0.5rem 1.1rem !important;
    min-width: 160px !important;
    border-radius: 999px !important;
    margin-left: 0.35rem !important;
}

/* Mobile: Buttons dürfen schmaler sein */
@media (max-width: 768px) {
    .view .vlan-btn-primary,
    .view .dmz-btn-primary,
    .view .vs-btn-primary,
    .view .calculate-btn,
    .view .check-btn,
    .view .submit-btn,
    .view .next-btn,
    .view .new-task-btn,
    .view .new-values-btn,
    .view .start-btn,
    .view .action-btn.primary,
    .view .btn-primary,
    .view .btn.btn-primary,
    .calculator-container .btn-primary,
    .calculator-container .calculate-btn,
    .calculator-container .check-btn,
    .view .vlan-btn-secondary,
    .view .dmz-btn-secondary,
    .view .vs-btn-secondary,
    .view .btn-secondary,
    .view .btn.btn-secondary,
    .calculator-container .btn-secondary,
    .calculator-container .new-values-btn,
    button[id$="-check-btn"],
    button[id$="-new-task-btn"],
    button[id$="-reset-btn"],
    button[id$="-new-btn"],
    button.new-values-btn,
    #netzteil-dimensionierung-view .button-container .btn-secondary,
    #netzteil-dimensionierung-view .button-container .check-btn,
    #netzteil-dimensionierung-view .button-container .next-btn,
    .ohms-law-app #check-calculation-btn,
    .ohms-law-app .btn.btn-success,
    .ohms-law-app .btn.btn-primary,
    #raid-calculator-view .raid-controls .btn-primary,
    #raid-calculator-view .raid-controls .btn-secondary,
    #raid-calculator-view #check-raid-answer,
    #raid-calculator-view #new-raid-task,
    #hardware-quiz-view .quiz-controls .submit-btn,
    #hardware-quiz-view .quiz-controls .next-btn {
        min-width: auto !important;
    }
}