/* WerkPilot – verbindliches Cyan-Akzentsystem, August 2026
   Grundfarben: Weiß / Grau / Cyan. Fachliche Statusfarben bleiben erhalten. */

:root,
html body {
    --wp-cyan: #00a7c4;
    --wp-cyan-bright: #20cde0;
    --wp-cyan-strong: #007f98;
    --wp-cyan-hover: #006c82;
    --wp-cyan-border: #00677c;
    --wp-cyan-soft: #e8f8fb;
    --wp-cyan-ring: rgba(0, 143, 168, .20);
    --wp-danger: #d5001c;
    --wp-danger-dark: #b90018;

    /* Historische Akzentvariablen zeigen ab jetzt auf Cyan. */
    --primary-color: var(--wp-cyan-strong) !important;
    --header-bg: var(--wp-cyan-hover) !important;
    --info-color: var(--wp-cyan) !important;
    --wp-ui-red: var(--wp-cyan-strong) !important;
    --wp-ui-red-hover: var(--wp-cyan-hover) !important;
    --start-red: var(--wp-cyan-strong) !important;
    --production-red: var(--wp-cyan-strong) !important;
    --werkpilot-light-red: var(--wp-cyan-strong) !important;
    --planung-light-red: var(--wp-cyan-strong) !important;
    --planung-light-red-dark: var(--wp-cyan-hover) !important;
    --leergut-red: var(--wp-cyan-strong) !important;
    --leergut-red-dark: var(--wp-cyan-hover) !important;
    --wp-red: var(--wp-cyan-strong) !important;
    --wp-red-deep: var(--wp-cyan-hover) !important;

    /* Speichern und Import sind normale WerkPilot-Aktionen und daher Cyan. */
    --wp-save-matte-blue: var(--wp-cyan-strong) !important;
    --wp-save-matte-blue-hover: var(--wp-cyan-hover) !important;
    --wp-save-matte-blue-border: var(--wp-cyan-border) !important;
    --wp-import-metal-orange-top: var(--wp-cyan-bright) !important;
    --wp-import-metal-orange: var(--wp-cyan-strong) !important;
    --wp-import-metal-orange-dark: var(--wp-cyan-hover) !important;
    --wp-import-metal-orange-border: var(--wp-cyan-border) !important;
}

/* --------------------------------------------------------------------------
   Branding, Kopfzeile, Navigation und Ladefenster
   -------------------------------------------------------------------------- */
html body[data-view="login"] .wp-login-brand-word span:last-child {
    color: var(--wp-cyan-strong) !important;
}

html body[data-view="login"] .wp-login-brand-emblem,
html body.werkpilot-header-branding .modern-title-emblem {
    filter: drop-shadow(0 8px 14px rgba(0, 143, 168, .22)) !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-title-emblem::before,
html body:is([data-view="register"], [data-view="twofa"]) .modern-title-emblem::before {
    background-image: url("../assets/assistant/werkpilot-emblem-cyan.svg?v=1") !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-title-block::after,
html body[data-view="capacity"] .capacity-page-hero::before {
    background: linear-gradient(90deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 62%, transparent) !important;
    box-shadow: none !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group .header-btn.active::after {
    background: linear-gradient(90deg, var(--wp-cyan-bright), var(--wp-cyan-strong), var(--wp-cyan-bright)) !important;
    box-shadow: none !important;
}

html body.werkpilot-header-branding .modern-nav-group .header-btn.active,
html body.werkpilot-header-branding .modern-nav-group .header-btn.active :is(span, .nav-icon, svg) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body.werkpilot-header-branding .modern-today-btn,
html body[data-view="login"] .auth-primary-btn,
html body[data-view="login"] .auth-card button[type="submit"] {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 108, 130, .20) !important;
}

html body.werkpilot-header-branding .modern-today-btn:hover,
html body[data-view="login"] .auth-primary-btn:hover,
html body[data-view="login"] .auth-card button[type="submit"]:hover {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
    color: #ffffff !important;
}

html body :is(input, select, textarea):focus,
html body :is(input, select, textarea):focus-visible {
    border-color: var(--wp-cyan-strong) !important;
    box-shadow: 0 0 0 3px var(--wp-cyan-ring) !important;
    outline: none !important;
}

html body input[type="checkbox"],
html body input[type="radio"] {
    accent-color: var(--wp-cyan-strong) !important;
}

body.app-loading::after {
    border-color: #969da3 !important;
    border-top-color: var(--wp-cyan-strong) !important;
    background: linear-gradient(180deg, #f8fafb 0%, #e4e8ea 50%, #cbd1d4 100%) !important;
    color: #151515 !important;
    box-shadow: 0 18px 44px rgba(20, 24, 28, .20), 0 0 0 3px rgba(0, 143, 168, .08) !important;
}

/* --------------------------------------------------------------------------
   Start-, Hub- und Datenbankkacheln
   -------------------------------------------------------------------------- */
html body[data-view="start"] #main-view-container #start-view .start-kachel::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px auto 18px 0 !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 70%, var(--wp-cyan-hover)) !important;
    opacity: 1 !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel::after {
    content: none !important;
    display: none !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-arrow,
html body[data-view="start"] #main-view-container #start-view .start-kachel-arrow svg {
    color: var(--wp-cyan-strong) !important;
    stroke: currentColor !important;
}

html body:is([data-view="production-home"], [data-view="planning-home"], [data-view="logistics-home"]) .planning-hub-card:not(.planning-hub-status-card)::before,
html body[data-view="planning-home"] .planning-hub-card-metallic::before {
    background: linear-gradient(180deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 68%, var(--wp-cyan-hover)) !important;
}

html body:is([data-view="production-home"], [data-view="planning-home"], [data-view="logistics-home"]) .planning-hub-card:not(.planning-hub-status-card) .planning-hub-card-meta span:last-child,
html body[data-view="planning-home"] .planning-hub-card-metallic .planning-hub-card-meta span:last-child {
    color: var(--wp-cyan-strong) !important;
}

html body #database-view #db-dashboard .kachel::before {
    background: linear-gradient(180deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 68%, var(--wp-cyan-hover)) !important;
}

html body #database-view :is(.db-anlagenparameter-add-btn, .artikel-db-save-btn),
html body :is(.db-ruestmatrix-import-btn, .db-ruestmatrix-commit-btn),
html body #database-view .artikel-db-details-card .artikel-db-save-btn {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 108, 130, .20) !important;
    text-shadow: none !important;
}

html body #database-view :is(.db-anlagenparameter-add-btn, .artikel-db-save-btn):hover,
html body :is(.db-ruestmatrix-import-btn, .db-ruestmatrix-commit-btn):hover {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
}

html body :is(.db-ruestmatrix-pilot-badge, .db-ruestmatrix-summary-update) {
    border-color: rgba(0, 143, 168, .30) !important;
    background: var(--wp-cyan-soft) !important;
    color: var(--wp-cyan-hover) !important;
}

html body :is(.db-ruestmatrix-modal-kicker, .db-ruestmatrix-summary-update strong) {
    color: var(--wp-cyan-hover) !important;
}

html body .db-ruestmatrix-spinner {
    border-top-color: var(--wp-cyan-strong) !important;
}

/* --------------------------------------------------------------------------
   Einheitliche Aktionsbuttons und Werkzeug-Service
   -------------------------------------------------------------------------- */
html body button.wp-save-action,
html body .wp-import-action,
html body button.backup-import-btn,
html body #scm-gesamtliste-import-btn,
html body button[onclick="oeffneScmEinzelimport()"],
html body button.umsatz-planung-primary-btn,
html body button.fp-entry-sap-import,
html body #fp-sap-import-save,
html body .werkzeug-modern-top-btn.primary,
html body[data-view="werkzeuge"] .werkzeug-actions button.primary,
html body[data-view="werkzeuge"] .werkzeuge-open-btn {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 108, 130, .20) !important;
    text-shadow: none !important;
}

html body button.wp-save-action:hover:not(:disabled),
html body .wp-import-action:hover:not(:disabled),
html body[data-view="werkzeuge"] .werkzeug-actions button.primary:hover:not(:disabled),
html body .werkzeug-modern-top-btn.primary:hover:not(:disabled) {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
}

html body[data-view="werkzeuge"] .werkzeug-toggle-btn.active i,
html body[data-view="werkzeuge"] .werkzeug-toggle-btn.active i::after,
html body[data-view="werkzeuge"] .werkzeug-editor-status-btn.active {
    border-color: var(--wp-cyan-strong) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Heatmap / Kapazität
   -------------------------------------------------------------------------- */
html body[data-view="capacity"] .capacity-page-hero {
    background: linear-gradient(145deg, #ffffff 0%, #eef1f3 100%) !important;
    border-color: #d2d6d9 !important;
}

html body[data-view="capacity"] :is(
    .capacity-mode-switch button.active,
    .capacity-action-btn.is-active,
    .capacity-quarter-btn.is-active
) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px var(--wp-cyan-ring) !important;
}

html body[data-view="capacity"] :is(.capacity-week-head.is-selected, .capacity-cell.is-selected) {
    border-color: var(--wp-cyan-strong) !important;
    box-shadow: inset 0 0 0 1px var(--wp-cyan-strong) !important;
}

/* --------------------------------------------------------------------------
   Planung, Blockansicht und Anlagenboard
   -------------------------------------------------------------------------- */
html body.production-area-light[data-view="bereich"] #admin-bereich-controls :is(.bkz-notes-btn, .bkz-excel-btn, .bkz-add-btn),
html body.planning-edit-light[data-view="admin-edit"] :is(.add-entry-btn, .planning-notes-actions .primary),
html body :is(.planer-excel-btn, .bereich-excel-btn) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 108, 130, .20) !important;
    text-shadow: none !important;
}

html body.production-area-light[data-view="bereich"] #admin-bereich-controls :is(.bkz-notes-btn, .bkz-excel-btn, .bkz-add-btn):hover,
html body.planning-edit-light[data-view="admin-edit"] :is(.add-entry-btn, .planning-notes-actions .primary):hover {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
    color: #ffffff !important;
}

html body :is(
    .bereich-planungswerkzeug-option.is-active,
    .bereich-planungswerkzeug-option[aria-pressed="true"],
    .planning-tool-option.is-active,
    .planning-tool-option[aria-pressed="true"],
    .anlagen-layout-option.active
) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(0, 108, 130, .20) !important;
}

html body :is(
    .anlagenboard-save-btn,
    .anlagenboard-excel-btn,
    .anlagenboard-primary-btn,
    .anlagenboard-machine-save-btn
) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(0, 108, 130, .22) !important;
    text-shadow: none !important;
}

html body :is(
    .anlagenboard-save-btn,
    .anlagenboard-excel-btn,
    .anlagenboard-primary-btn,
    .anlagenboard-machine-save-btn
):hover:not(:disabled) {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
    color: #ffffff !important;
}

html body .anlagenboard-kw-target:is(.is-current, .is-hover-target) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 5px 12px rgba(0, 108, 130, .20) !important;
}

html body .anlagenboard-machine-zoom-btn:hover,
html body .anlagenboard-machine-zoom-btn:focus-visible {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Leergut: allgemeine Aktionen Cyan, Abschluss fachlich Grün
   -------------------------------------------------------------------------- */
html body[data-view="leergut"] :is(.leergut-main-tabs button.active, .leergut-area-tabs button.active),
html body[data-view="logistics-home"] :is(.leergut-main-tabs button.active, .leergut-area-tabs button.active) {
    background: var(--wp-cyan-strong) !important;
}

html body[data-view="leergut"] .leergut-page-head::before,
html body[data-view="logistics-home"] .leergut-page-head::before {
    background: var(--wp-cyan-strong) !important;
}

html body :is(.leergut-page-emblem, .leergut-page-head small) {
    color: var(--wp-cyan-hover) !important;
}

html body .leergut-btn.primary {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

html body .leergut-btn.primary:hover:not(:disabled) {
    background: var(--wp-cyan-hover) !important;
}

html body #leergut-submit-order,
html body .leergut-logistics-modal .leergut-order-complete-action {
    border-color: #4e7657 !important;
    background: #5f7f66 !important;
    color: #ffffff !important;
}

html body .leergut-logistics-modal .leergut-order-print-action {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   WerkPilot-Assistent: gleiche Figur und Animation, neue Cyan-Akzente
   -------------------------------------------------------------------------- */
.werkpilot-login-assistant,
.wp-assistant-note-overlay {
    --wp-red: var(--wp-cyan-strong) !important;
    --wp-red-deep: var(--wp-cyan-hover) !important;
}

.wp-assistant-speech,
.wp-assistant-speech::before {
    border-color: rgba(0, 143, 168, .55) !important;
}

.wp-assistant-toggle:focus-visible,
.wp-assistant-chat-close:focus-visible,
.wp-assistant-conversation-actions button:focus-visible,
.wp-assistant-quick-actions button:focus-visible,
.wp-assistant-form textarea:focus-visible,
.wp-assistant-form button:focus-visible {
    outline-color: rgba(0, 143, 168, .30) !important;
}

.werkpilot-login-assistant.is-compact.is-notifying .wp-assistant-speech strong::before,
.wp-assistant-context::before,
.wp-assistant-notes-count,
.wp-assistant-note-tabs button.is-active,
.wp-assistant-note-actions .primary {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(0, 108, 130, .20) !important;
}

.wp-assistant-chat-close:hover,
.wp-assistant-conversation-actions button:hover:not(:disabled),
#wp-assistant-notes-open,
.wp-assistant-quick-actions button:hover,
.wp-assistant-note-tabs button:hover,
.wp-assistant-note-tabs button:focus-visible,
.wp-assistant-note-card-actions button:hover,
.wp-assistant-note-card-actions button:focus-visible {
    border-color: rgba(0, 143, 168, .40) !important;
    background: var(--wp-cyan-soft) !important;
    color: var(--wp-cyan-hover) !important;
}

#wp-assistant-notes-open:hover:not(:disabled) {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

.wp-assistant-message-user .wp-assistant-message-content,
.wp-assistant-form button {
    border-color: var(--wp-cyan-border) !important;
    background: linear-gradient(145deg, var(--wp-cyan-bright), var(--wp-cyan-strong)) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(0, 108, 130, .20) !important;
}

.wp-assistant-messages {
    background: radial-gradient(circle at 100% 0, rgba(0, 167, 196, .05), transparent 34%), #ffffff !important;
}

.wp-assistant-form textarea:focus,
.wp-assistant-note-body :is(textarea, input):focus {
    border-color: var(--wp-cyan-strong) !important;
    box-shadow: 0 0 0 3px rgba(0, 143, 168, .12) !important;
}

.wp-assistant-note-dialog {
    border-top-color: var(--wp-cyan-strong) !important;
}

.wp-assistant-note-head {
    box-shadow: inset 4px 0 0 var(--wp-cyan-strong) !important;
}

.wp-assistant-note-head small,
.wp-assistant-message.is-loading .wp-assistant-message-content::after {
    color: var(--wp-cyan-hover) !important;
}

.wp-assistant-note-card:not(.is-due) {
    border-left-color: var(--wp-cyan-strong) !important;
}

/* --------------------------------------------------------------------------
   Fachliche Farben – bewusst NICHT auf Cyan umstellen
   -------------------------------------------------------------------------- */
html body .modern-user-avatar[data-user-status="offline"],
html body .planning-hub-status-card.is-inactive {
    --werkpilot-hub-kachel-akzent: var(--wp-danger) !important;
    --werkpilot-hub-pfeilfarbe: var(--wp-danger) !important;
}

html body .modern-user-avatar[data-user-status="offline"] {
    background: var(--wp-danger) !important;
}

html body .modern-production-card.inaktiv {
    --werkpilot-produktionsbereich-statusstrich: var(--wp-danger) !important;
}

html body .anlage-card.inaktiv {
    --werkpilot-anlage-statusstrich: var(--wp-danger) !important;
}

html body .anlage-card.inaktiv .anlage-status-badge {
    color: var(--wp-danger) !important;
}

html body :is(
    .modern-card-delete,
    .anlage-delete-btn,
    .anlagenboard-danger-btn,
    .db-anlagenparameter-remove-btn,
    .db-param-row-remove,
    .messages-delete-btn,
    .werkzeug-mini-btn.danger,
    .leergut-order-close-action
) {
    border-color: #b84c54 !important;
    background: #b84c54 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.planning-edit-light[data-view="admin-edit"] .planung-entry-actions :is(
    [onclick*="entferne"],
    [onclick*="Entfern"],
    [onclick*="loesche"]
),
#wp-assistant-conversation-delete,
.wp-assistant-note-card-actions button[data-action="delete"] {
    border-color: rgba(213, 0, 28, .35) !important;
    background: #fff1f3 !important;
    color: var(--wp-danger) !important;
    -webkit-text-fill-color: var(--wp-danger) !important;
    box-shadow: none !important;
}

#wp-assistant-conversation-delete:hover:not(:disabled),
.wp-assistant-note-card-actions button[data-action="delete"]:hover {
    border-color: var(--wp-danger) !important;
    background: var(--wp-danger) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #database-view #db-table-body td:last-child button:last-child,
html body #database-view .artikel-db-table-wrap td:last-child button:last-child {
    border-color: rgba(213, 0, 28, .34) !important;
    background: #fff1f3 !important;
    color: var(--wp-danger) !important;
}

html body .leergut-tile-badge,
html body .modern-notification.has-leergut-notification .modern-admin-request-badge,
html body .messages-thread-badge {
    background: var(--wp-danger) !important;
    color: #ffffff !important;
}

html body .leergut-logistics-shell .leergut-order-card.is-open {
    border-left-color: #c33e47 !important;
}

html body .leergut-required-message-window {
    border-top-color: var(--wp-danger) !important;
}

.werkpilot-login-assistant :is(
    .wp-assistant-reminder-indicator.is-due,
    .wp-assistant-reminder-confirm,
    .is-reminder-alert .wp-assistant-speech strong::before
),
.wp-assistant-note-status.is-due {
    border-color: var(--wp-danger) !important;
    background: var(--wp-danger) !important;
    color: #ffffff !important;
}

.wp-assistant-note-empty.is-error,
.wp-assistant-note-inline-error,
.wp-assistant-note-error {
    color: var(--wp-danger) !important;
}

/* --------------------------------------------------------------------------
   Cyan-Kontrast v37: fließende Konturen, Produktionshub und Admin
   -------------------------------------------------------------------------- */

/* Kopfzeile: Cyan nur abschnittsweise in der Kontur, die Flächen bleiben hell. */
html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group {
    border: 1px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(112deg,
            rgba(0, 167, 196, .92) 0%,
            rgba(32, 205, 224, .44) 14%,
            #c8d2d6 36%,
            #e2e7e9 50%,
            #c2ccd0 66%,
            #c2ccd0 100%) border-box !important;
    border-right-width: 1px !important;
    box-shadow:
        0 9px 22px rgba(20, 24, 28, .08),
        inset 1px 0 0 rgba(139, 151, 158, .16),
        inset 0 1px 0 rgba(139, 151, 158, .16),
        inset 0 -1px 0 rgba(139, 151, 158, .16) !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-period-group {
    border: 1px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(112deg,
            rgba(0, 167, 196, .92) 0%,
            rgba(32, 205, 224, .44) 14%,
            #c8d2d6 36%,
            #e2e7e9 50%,
            #c2ccd0 66%,
            rgba(0, 167, 196, .58) 100%) border-box !important;
    box-shadow: 0 9px 22px rgba(20, 24, 28, .08), 0 0 0 1px rgba(139, 151, 158, .16) inset !important;
}

/* Hauptnavigation: links und rechts identischer Innenabstand.
   Dadurch bleiben erste und letzte Navigationskachel gleich weit von der Außenkontur entfernt. */
html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) :is(
    .modern-notification,
    .modern-user-group,
    .modern-power-btn
) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(180deg, #f5f7f8 0%, #e8ecee 100%) padding-box,
        linear-gradient(122deg,
            rgba(0, 167, 196, .76) 0%,
            #d8e0e3 34%,
            #eef1f2 50%,
            #cbd1d5 67%,
            rgba(0, 167, 196, .48) 100%) border-box !important;
    box-shadow: 0 7px 18px rgba(20, 24, 28, .07), 0 0 0 1px rgba(139, 151, 158, .14) inset !important;
}

/* Die beiden zentralen Produktionsmodule erhalten zuverlässig ihren Cyan-Strich. */
html body[data-view="production-home"] #production-home-view .planning-hub-card.leergut-module-hub-card::before {
    background: linear-gradient(180deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 68%, var(--wp-cyan-hover)) !important;
    box-shadow: none !important;
}

html body[data-view="production-home"] #production-home-view .planning-hub-card.leergut-module-hub-card .planning-hub-card-meta span:last-child {
    color: var(--wp-cyan-strong) !important;
    -webkit-text-fill-color: var(--wp-cyan-strong) !important;
}

/* Kompaktes Assistentenportal: letzte rote Reflexion durch neutrales Weiß ersetzen. */
.werkpilot-login-assistant.is-compact .wp-assistant-portal-back::before {
    border-color: rgba(241, 245, 247, .94) !important;
    background: radial-gradient(ellipse at center,
        #f8fafb 0%,
        #dfe4e7 18%,
        #747c82 44%,
        #30363b 67%,
        #111519 100%) !important;
    box-shadow:
        0 0 12px rgba(255, 255, 255, .78),
        inset 0 0 10px rgba(255, 255, 255, .58),
        inset 0 -5px 8px rgba(12, 16, 19, .58) !important;
}

/* Admin: Weiß/Grau/Cyan mit derselben teilweise verlaufenden Kontur. */
html body #admin-users-view .admin-modern-page-head {
    border: 1px solid transparent !important;
    background:
        linear-gradient(112deg, #ffffff 0%, #ffffff 63%, #eef2f3 100%) padding-box,
        linear-gradient(116deg,
            rgba(0, 167, 196, .88) 0%,
            rgba(255, 255, 255, .98) 34%,
            #cbd1d5 66%,
            rgba(0, 167, 196, .56) 100%) border-box !important;
}

html body #admin-users-view .admin-modern-page-head::before {
    background: linear-gradient(180deg, var(--wp-cyan-bright), var(--wp-cyan-strong) 70%, var(--wp-cyan-hover)) !important;
}

html body #admin-users-view :is(.admin-modern-metric, .admin-modern-panel) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, #ffffff 0%, #fafbfb 58%, #f0f3f4 100%) padding-box,
        linear-gradient(124deg,
            rgba(0, 167, 196, .66) 0%,
            rgba(255, 255, 255, .98) 27%,
            #d2d7da 67%,
            rgba(0, 167, 196, .42) 100%) border-box !important;
}

html body #admin-users-view .admin-modern-footer,
html body :is(.admin-detail-window, .admin-invite-detail-window) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, #ffffff, #f2f5f6) padding-box,
        linear-gradient(120deg,
            rgba(0, 167, 196, .74) 0%,
            rgba(255, 255, 255, .98) 32%,
            #cbd1d5 70%,
            rgba(0, 167, 196, .46) 100%) border-box !important;
}

html body #admin-users-view :is(
    .admin-modern-metric-icon,
    .admin-modern-panel-title > span,
    .admin-panel-head-plain-icon,
    .admin-row-icon
) {
    border-color: rgba(0, 127, 152, .24) !important;
    background: linear-gradient(145deg, #ffffff, var(--wp-cyan-soft)) !important;
    color: var(--wp-cyan-strong) !important;
}

html body #admin-users-view .admin-modern-metric-inbox strong {
    color: var(--wp-cyan-strong) !important;
}

html body #admin-users-view .admin-modern-metric-inbox .admin-modern-metric-icon {
    border-color: rgba(0, 127, 152, .24) !important;
    background: linear-gradient(145deg, #ffffff, var(--wp-cyan-soft)) !important;
    color: var(--wp-cyan-strong) !important;
}

html body #admin-users-view :is(
    .admin-top-refresh,
    .admin-add-user-btn,
    .admin-security-btn:not(.admin-security-btn-secondary),
    .admin-inbox-refresh-btn
),
html body .admin-invite-detail-window .admin-security-btn:not(.admin-security-btn-secondary) {
    border-color: var(--wp-cyan-border) !important;
    background: linear-gradient(180deg, var(--wp-cyan), var(--wp-cyan-strong)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 17px rgba(0, 108, 130, .18), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html body #admin-users-view :is(
    .admin-top-refresh,
    .admin-add-user-btn,
    .admin-security-btn:not(.admin-security-btn-secondary),
    .admin-inbox-refresh-btn
):hover,
html body .admin-invite-detail-window .admin-security-btn:not(.admin-security-btn-secondary):hover {
    border-color: var(--wp-cyan-hover) !important;
    background: var(--wp-cyan-hover) !important;
}

html body #admin-users-view .admin-security-btn-secondary,
html body .admin-invite-detail-window .admin-security-btn-secondary {
    border-color: #cbd0d4 !important;
    background: linear-gradient(180deg, #ffffff, #eceff1) !important;
    color: #30353a !important;
    -webkit-text-fill-color: #30353a !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
}

html body #admin-users-view :is(.admin-mini-select, .admin-form-group input, .admin-form-group select):focus,
html body .admin-invite-detail-window .admin-form-group :is(input, select):focus {
    border-color: var(--wp-cyan-strong) !important;
    box-shadow: 0 0 0 3px var(--wp-cyan-ring) !important;
}

html body #admin-users-view :is(.admin-system-row, .admin-preview-row):hover {
    border-color: rgba(0, 127, 152, .34) !important;
    background: linear-gradient(135deg, #ffffff, var(--wp-cyan-soft)) !important;
}

html body #admin-users-view .admin-chevron,
html body #admin-users-view .admin-all-show-btn:hover {
    color: var(--wp-cyan-strong) !important;
}

html body #admin-users-view .admin-all-show-btn:hover {
    border-color: rgba(0, 127, 152, .34) !important;
    background: var(--wp-cyan-soft) !important;
}

html body #admin-users-view .admin-role-pill:is(
    .role-admin,
    .role-planung,
    .role-logistik,
    .role-logistikleitung
) {
    border-color: rgba(0, 127, 152, .32) !important;
    background: var(--wp-cyan-soft) !important;
    color: var(--wp-cyan-hover) !important;
}

html body #admin-users-view .admin-role-pill.role-admin,
html body #admin-users-view .admin-role-pill.role-logistikleitung {
    border-color: var(--wp-cyan-border) !important;
    background: var(--wp-cyan-strong) !important;
    color: #ffffff !important;
}

html body #admin-users-view .admin-you-pill {
    border-color: rgba(0, 127, 152, .30) !important;
    background: var(--wp-cyan-soft) !important;
    color: var(--wp-cyan-hover) !important;
}

html body .admin-invite-detail-window {
    border-top: 4px solid var(--wp-cyan-strong) !important;
}

html body .admin-invite-detail-window .admin-modern-panel-title > span {
    border-color: rgba(0, 127, 152, .28) !important;
    background: var(--wp-cyan-soft) !important;
    color: var(--wp-cyan-strong) !important;
}

/* Excel-Übersicht: Schwarz auf Weiß mit Cyan-Rahmen. */
html body.excel-overview-light[data-view="excel"] .excel-plan-title,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline span,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}

html body.excel-overview-light[data-view="excel"] .excel-druck-buttons .bkz-print-btn,
html body.excel-overview-light[data-view="excel"] :is(.excel-layout-tool-btn, .excel-idle-toggle-btn) {
    border-color: var(--wp-cyan) !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 8px 18px rgba(20, 24, 28, .08) !important;
}

html body.excel-overview-light[data-view="excel"] .excel-druck-buttons .bkz-print-btn:hover,
html body.excel-overview-light[data-view="excel"] :is(.excel-layout-tool-btn, .excel-idle-toggle-btn):hover {
    border-color: var(--wp-cyan-strong) !important;
    background: var(--wp-cyan-soft) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body.excel-overview-light[data-view="excel"] .excel-plan-title-box::before {
    background: var(--wp-cyan) !important;
}