/* Web theme layer. PDF templates and historical Augustin Werkzeuge pages do not load it. */
:root,
:root[data-theme="light"] {
    color-scheme: light;
    --brand-blue: #00a0f5;
    --brand-orange: #f07300;
    --bg-page: #f7f9fa;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #f3f7fa;
    --bg-surface-elevated: #ffffff;
    --bg-control: #ffffff;
    --bg-control-muted: #edf3f7;
    --text-primary: #102a43;
    --text-secondary: #536779;
    --text-placeholder: #718396;
    --border-color: #e4ebf0;
    --border-strong: #a9b9c7;
    --interactive-primary: #0757a6;
    --interactive-primary-hover: #064a8e;
    --interactive-primary-soft: #eaf6fd;
    --accent-text: #b65300;
    --surface-hover: #f8fbfe;
    --surface-selected: #eaf6fd;
    --overlay-color: rgb(49 72 94 / 48%);
    --shadow-color: rgb(16 42 67 / 12%);
    --shadow-elevation: 0 5px 24px rgb(16 42 67 / 4%);
    --shadow-dialog: 0 28px 80px rgb(16 42 67 / 28%);
    --success-text: #256f46;
    --success-surface: #e8f5ec;
    --success-border: #b8d8c5;
    --warning-text: #805600;
    --warning-surface: #fff4dc;
    --warning-border: #e4cea2;
    --error-text: #a83232;
    --error-surface: #fdebec;
    --error-border: #e8bdbd;
    --info-text: #1d63a8;
    --info-surface: #e8f2fc;
    --info-border: #bdd5ec;
    --signature-canvas: #ffffff;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-blue: #00a0f5;
    --brand-orange: #f07300;
    --bg-page: #0f1720;
    --bg-surface: #17212b;
    --bg-surface-secondary: #202c38;
    --bg-surface-elevated: #1b2733;
    --bg-control: #111c26;
    --bg-control-muted: #1c2834;
    --text-primary: #f4f7fa;
    --text-secondary: #a8b7c6;
    --text-placeholder: #718293;
    --border-color: rgb(255 255 255 / 9%);
    --border-strong: #526678;
    --interactive-primary: #00a0f5;
    --interactive-primary-hover: #33b5ff;
    --interactive-primary-soft: rgb(0 160 245 / 15%);
    --accent-text: #ff9c52;
    --surface-hover: #223342;
    --surface-selected: rgb(0 160 245 / 15%);
    --overlay-color: rgb(3 9 15 / 74%);
    --shadow-color: rgb(0 0 0 / 32%);
    --shadow-elevation: 0 10px 30px rgb(0 0 0 / 18%);
    --shadow-dialog: 0 32px 90px rgb(0 0 0 / 55%);
    --success-text: #72d59d;
    --success-surface: rgb(50 170 101 / 17%);
    --success-border: rgb(114 213 157 / 30%);
    --warning-text: #ffd075;
    --warning-surface: rgb(224 164 39 / 17%);
    --warning-border: rgb(255 208 117 / 28%);
    --error-text: #ff9b9b;
    --error-surface: rgb(224 79 79 / 17%);
    --error-border: rgb(255 155 155 / 28%);
    --info-text: #7ec8ff;
    --info-surface: rgb(0 143 231 / 17%);
    --info-border: rgb(126 200 255 / 28%);
    --signature-canvas: #f8fafc;
}

body.app-ui {
    --app-primary: var(--interactive-primary);
    --app-primary-hover: var(--interactive-primary-hover);
    --app-primary-soft: var(--interactive-primary-soft);
    --app-brand-blue: var(--brand-blue);
    --app-accent: var(--brand-orange);
    --app-accent-ink: var(--accent-text);
    --app-canvas: var(--bg-page);
    --app-surface: var(--bg-surface);
    --app-soft: var(--bg-surface-secondary);
    --app-line: var(--border-color);
    --app-input-line: var(--border-strong);
    --app-ink: var(--text-primary);
    --app-muted: var(--text-secondary);
    --app-success: var(--success-text);
    --app-success-soft: var(--success-surface);
    --app-warning: var(--warning-text);
    --app-warning-soft: var(--warning-surface);
    --app-error: var(--error-text);
    --app-error-soft: var(--error-surface);
    --app-info: var(--info-text);
    --app-info-soft: var(--info-surface);
    --app-shadow: var(--shadow-elevation);
    background: var(--bg-page);
    color: var(--text-primary);
    transition: background-color .2s ease, color .2s ease;
}

/* Header control */
.app-ui .app-theme-toggle {
    position: relative;
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface-secondary);
    color: var(--text-secondary);
    box-shadow: none;
}
.app-ui .app-theme-toggle:hover:not(:disabled) {
    border-color: rgb(0 160 245 / 42%);
    background: var(--interactive-primary-soft);
    color: var(--brand-blue);
}
.app-ui .app-theme-toggle:focus-visible { outline-color: var(--brand-blue); }
.app-ui .app-theme-icon { display: grid; place-items: center; }
.app-ui .app-theme-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-theme="light"] .app-theme-icon-moon,
:root[data-theme="dark"] .app-theme-icon-sun { display: none; }

/* Shared surfaces and navigation */
.app-ui .app-sidebar,
.app-ui .app-header,
.app-ui .app-footer,
.app-ui .dropdown-menu,
.app-ui :is(.form-section, .card, .updates-page, .update-card, .updates-modal-card) {
    border-color: var(--border-color);
}
.app-ui .app-sidebar,
.app-ui .dropdown-menu,
.app-ui :is(.form-section, .card, .update-card, .updates-modal-card) { background: var(--bg-surface); }
.app-ui .app-header { background: var(--bg-page); }
.app-ui .app-rail-brand { background: var(--interactive-primary-soft); color: var(--brand-blue); }
.app-ui .app-rail-brand .app-brand-image {
    display: grid;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: inherit;
}
.app-ui .app-brand-image img {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Enlarge the artwork's generous outer padding without editing the PNGs. */
    transform: scale(1.35);
}
.app-ui .app-brand-image .app-brand-image-dark { display: none; }
:root[data-theme="dark"] .app-ui .app-brand-image .app-brand-image-light { display: none; }
:root[data-theme="dark"] .app-ui .app-brand-image .app-brand-image-dark { display: block; }
.app-ui .app-rail-link:hover { background: var(--interactive-primary-soft); color: var(--brand-blue); }
.app-ui .app-rail-link.is-current { background: var(--brand-blue); color: #ffffff; }
.app-ui .app-header :is(.updates-nav-btn, .logout-btn):hover,
.app-ui .app-header :is(.updates-nav-btn, .logout-btn):focus-visible {
    background: rgb(240 115 0 / 15%);
    color: var(--brand-orange);
}
.app-ui .app-nav-backdrop { background: var(--overlay-color); }
:root[data-theme="dark"] .app-ui .app-header-logo img[src$="/img/LOGO.png"] { filter: invert(1) grayscale(1) brightness(1.35); }

/* Controls, browser states and dropdowns */
.app-ui :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])),
.app-ui .form-group :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])),
.app-ui .repair-form :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"])),
.app-ui .logistics-form :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])),
.app-ui .logistics-form .logistics-type-select .tourplan-select,
.app-ui .return-form :is(input, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) {
    border-color: var(--border-strong);
    background: var(--bg-control) !important;
    color: var(--text-primary);
}
.app-ui :is(input, textarea)::placeholder { color: var(--text-placeholder); opacity: 1; }
.app-ui select option { background: var(--bg-surface-elevated); color: var(--text-primary); }
.app-ui :is(input, select, textarea):disabled,
.app-ui :is(input, textarea)[readonly] {
    border-color: var(--border-color);
    background: var(--bg-control-muted) !important;
    color: var(--text-secondary);
}
.app-ui :is(input, select, textarea)[aria-invalid="true"],
.app-ui :is(input, select, textarea).is-invalid,
.app-ui .form-group:has(> .errorlist) > :is(input, select, textarea),
.app-ui .repair-form .repair-upload-section:has(> .errorlist) input[type="file"],
.app-ui .logistics-form .form-group:has(> .errorlist) > :is(input, select, textarea),
.app-ui .return-form .form-group:has(> .errorlist) > input {
    border-color: var(--error-text);
    background: var(--error-surface) !important;
}
.app-ui input[type="file"]::file-selector-button,
.app-ui .repair-form #main-input-group input[type="file"]::file-selector-button,
.app-ui .return-form #main-input-group input[type="file"]::file-selector-button {
    border-color: var(--border-strong);
    background: var(--bg-surface-secondary);
    color: var(--interactive-primary);
}
.app-ui input[type="file"]::file-selector-button:hover,
.app-ui .repair-form #main-input-group input[type="file"]:hover::file-selector-button,
.app-ui .return-form #main-input-group input[type="file"]:hover::file-selector-button {
    border-color: var(--brand-blue);
    background: var(--interactive-primary-soft);
}
:root[data-theme="dark"] .app-ui :is(input, textarea):-webkit-autofill,
:root[data-theme="dark"] .app-ui :is(input, textarea):-webkit-autofill:hover,
:root[data-theme="dark"] .app-ui :is(input, textarea):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: 0 0 0 1000px var(--bg-control) inset;
    caret-color: var(--text-primary);
}
.app-ui .dropdown-menu { box-shadow: 0 16px 38px var(--shadow-color); }
.app-ui .dropdown-menu a { color: var(--text-primary); }
.app-ui .dropdown-menu a:hover { background: var(--interactive-primary-soft); color: var(--interactive-primary); }

/* Radio cards and selectable groups */
.app-ui .logistics-form .form-group label:has(input[type="radio"]) {
    border-color: var(--border-strong);
    background: var(--bg-control);
    color: var(--text-primary);
}
.app-ui .logistics-form .form-group label:has(input[type="radio"]:checked) {
    border-color: var(--brand-blue);
    background: var(--interactive-primary-soft);
    color: var(--interactive-primary);
}

/* Tables, compact mobile rows and fullscreen view */
.app-ui table { color: var(--text-primary); }
.app-ui table :is(th, td) { border-color: var(--border-color); }
.app-ui table th,
.app-ui .order-overview .order-table th { background: var(--bg-surface-secondary); color: var(--text-secondary); }
.app-ui table td,
.app-ui .order-overview .order-table :is(th, td) { background: var(--bg-surface); color: var(--text-primary); }
.app-ui .order-overview { --order-row-hover: var(--surface-hover); }
.app-ui .order-overview .order-table tbody tr:hover td { background: var(--surface-hover); }
.app-ui .order-overview .order-table tbody tr:focus-within td { background: var(--surface-selected); }
.app-ui .order-overview .order-table :is(td a[target="_blank"], .action-btn) {
    border-color: var(--border-color);
    background: var(--bg-surface-secondary) !important;
    color: var(--interactive-primary) !important;
}
.app-ui .order-overview .order-table :is(td a[target="_blank"], .action-btn):hover {
    border-color: rgb(0 160 245 / 42%);
    background: var(--interactive-primary-soft) !important;
}
.app-ui .order-toolbar .filter-select-wrapper button.filter-reset-btn:hover {
    background: var(--interactive-primary-soft) !important;
    color: var(--interactive-primary) !important;
}
.app-ui :is(#status_filter, #status_filter_reparatur) option {
    background: var(--bg-surface-elevated) !important;
    color: var(--text-primary) !important;
}
.app-ui .order-overview .is-fullscreen,
.app-ui .table-fullscreen-wrapper.is-fullscreen { background: var(--bg-page); }
.app-ui .return-form .return-articles .col-md-6,
.app-ui .return-form .return-articles td input[type="number"],
.app-ui .return-form .return-articles tbody tr { background: var(--bg-surface); }

/* Statuses and feedback */
.app-ui :is(.status-eingegangen, .status-befundet),
.app-ui select:is(.status-eingegangen, .status-befundet) { color: var(--info-text); background-color: var(--info-surface); }
.app-ui :is(.status-in_bearbeitung, .status-beauftragt),
.app-ui select:is(.status-in_bearbeitung, .status-beauftragt) { color: var(--warning-text); background-color: var(--warning-surface); }
.app-ui :is(.status-abgeschlossen, .status-fertig),
.app-ui select:is(.status-abgeschlossen, .status-fertig) { color: var(--success-text); background-color: var(--success-surface); }
.app-ui :is(.status-storniert, .status-verschrotten),
.app-ui select:is(.status-storniert, .status-verschrotten) { color: var(--error-text); background-color: var(--error-surface); }
.app-ui .alert-success { color: var(--success-text); background: var(--success-surface); border-color: var(--success-border); }
.app-ui .alert-info { color: var(--info-text); background: var(--info-surface); border-color: var(--info-border); }
.app-ui .alert-warning { color: var(--warning-text); background: var(--warning-surface); border-color: var(--warning-border); }
.app-ui :is(.alert-error, .alert-danger) { color: var(--error-text); background: var(--error-surface); border-color: var(--error-border); }

/* Order tabs and order creation dialog */
.app-ui .order-overview .order-tab-group { background: var(--bg-surface-secondary); }
.app-ui .order-overview #tabs .order-tab-group > label { color: var(--text-secondary); }
.app-ui .order-overview #tabs .order-tab-group > label:hover { background: var(--surface-hover); color: var(--interactive-primary); }
.app-ui .order-overview #tabs .order-tab-group > input:checked + label { background: var(--brand-blue); color: #ffffff; }
.app-ui .order-overview .order-tab-count { background: rgb(127 147 166 / 16%); }
.app-ui .order-overview {
    --order-modal-ink: var(--text-primary);
    --order-modal-muted: var(--text-secondary);
    --order-modal-soft: var(--bg-surface-secondary);
}
.app-ui .new-order-modal-backdrop { background: var(--overlay-color); }
.app-ui .new-order-modal-card {
    border-color: var(--border-color);
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-dialog);
}
.app-ui .new-order-modal-close { background: var(--bg-surface-secondary); color: var(--text-secondary); }
.app-ui .new-order-modal-close:hover { background: var(--interactive-primary-soft); color: var(--brand-blue); }
.app-ui .new-order-type-tabs { background: var(--bg-surface-secondary); }
.app-ui .new-order-type-tab { color: var(--text-secondary); }
.app-ui .new-order-type-tab.is-active { background: var(--brand-blue); color: #ffffff; }
.app-ui .new-order-company-card {
    border-color: transparent;
    background: var(--bg-surface-secondary);
    color: var(--text-primary);
}
.app-ui .new-order-company-card:hover {
    border-color: rgb(0 160 245 / 40%);
    background: var(--surface-hover);
    box-shadow: 0 12px 28px var(--shadow-color);
}
.app-ui .new-order-company-initial { background: var(--interactive-primary-soft); color: var(--interactive-primary); }
.app-ui .new-order-company-initial-return { background: rgb(240 115 0 / 16%); color: var(--brand-orange); }
.app-ui .new-order-company-arrow { color: var(--interactive-primary); }

/* Existing dialogs */
.app-ui :is(.termin-modal, .updates-modal) { background: var(--overlay-color); }
.app-ui :is(.termin-card, .updates-modal-card, .updates-modal-item) {
    border-color: var(--border-color);
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
}
.app-ui .termin-card { border: 1px solid var(--border-color); box-shadow: var(--shadow-dialog); }
.app-ui .updates-modal-card { box-shadow: var(--shadow-dialog); }
.app-ui .updates-modal-item { border-color: var(--border-color); }
:root[data-theme="dark"] .app-ui :is(.updates-modal-item, .update-card).is-important {
    border-color: rgb(240 115 0 / 45%);
    background: rgb(240 115 0 / 9%);
}
:root[data-theme="dark"] .app-ui #app-content .update-card.is-important {
    border-color: rgb(240 115 0 / 45%);
    background: rgb(240 115 0 / 9%);
}
.app-ui :is(.updates-modal-item, .update-card) p { color: var(--text-primary); }
.app-ui .update-meta span { background: var(--bg-surface-secondary); color: var(--text-secondary); }
.app-ui #app-content .update-card.is-important .update-meta span:nth-child(3) {
    background: rgb(240 115 0 / 16%);
    color: var(--accent-text);
}

/* Form cards, media previews and signature canvases */
.app-ui :is(.repair-form, .logistics-form, .return-form, .login-card, .detail-section, .detail-summary) {
    border-color: var(--border-color);
    background: var(--bg-surface);
    box-shadow: var(--shadow-elevation);
}
:root[data-theme="dark"] .app-ui #app-content .login-card { box-shadow: var(--shadow-dialog); }
.app-ui :is(.repair-form .repair-upload-area, .return-form .return-upload-card, .return-form > .return-note) {
    border-color: var(--border-color);
    background: var(--bg-surface-secondary);
}
.app-ui :is(.repair-form, .return-form) :is(#remove-main-image, .delete-single-image),
.app-ui .repair-form .image-preview-wrapper,
.app-ui .return-form #image-preview-container .image-preview-wrapper {
    border-color: var(--border-color);
    background: var(--bg-surface-elevated);
}
.app-ui .repair-form :is(.remove-existing-image, #remove-main-image):hover:not(:disabled) {
    background: var(--error-surface);
    color: var(--error-text);
}
.app-ui #app-content .detail-section > img { background: var(--bg-surface-secondary); }
.app-ui .signature-pad,
.app-ui .repair-form .signature-pad,
.app-ui .logistics-form #signature-section .signature-pad,
.app-ui .return-form .return-signatures .signature-pad { background: var(--signature-canvas); }
.app-ui .signature-pad canvas { background: var(--signature-canvas); }

/* Pagination is styled when a page supplies the existing conventional markup. */
.app-ui :is(.pagination, .paginator) { color: var(--text-secondary); }
.app-ui :is(.pagination, .paginator) :is(a, button, .page-link) {
    border-color: var(--border-color);
    background: var(--bg-surface);
    color: var(--interactive-primary);
}
.app-ui :is(.pagination, .paginator) :is(a, button, .page-link):hover { background: var(--interactive-primary-soft); }
.app-ui :is(.pagination, .paginator) :is(.active, [aria-current="page"]) { background: var(--brand-blue); color: #ffffff; }

@media (max-width: 960px) {
    .app-ui .app-theme-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

@media (max-width: 600px) {
    .app-ui .app-theme-toggle { border-radius: 10px; }
    .app-ui .app-theme-icon svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    body.app-ui { transition: none; }
}