/*
 * RefBase global design foundation.
 *
 * Diese Datei enthält ausschließlich projektweite Grundlagen:
 * Theme-Umschaltung, Seitenbasis, Typografie, gemeinsame Form-/Buttonzustände,
 * Modals, Fokusführung und wenige universelle Hilfsklassen.
 * Bereichsspezifische Komponenten liegen in den jeweiligen CSS-Dateien.
 */

/* =========================================================
   ACTIVE THEME TOKENS – LIGHT MODE
   ========================================================= */
:root,
body[data-theme="light"]{
    color-scheme: light;

    --app-page-bg: var(--theme-page-bg-light);
    --app-surface: var(--theme-surface-light);
    --app-surface-muted: var(--theme-surface-muted-light);
    --app-surface-elevated: var(--theme-surface-elevated-light);
    --app-text: var(--theme-text-light);
    --app-text-muted: var(--theme-text-muted-light);
    --app-border: var(--theme-border-light);
    --app-input-bg: var(--theme-input-bg-light);
    --app-input-border: var(--theme-input-border-light);
    --app-action-primary: var(--theme-action-primary-light);
    --app-action-primary-text: var(--theme-action-primary-text-light);
    --app-action-secondary: var(--theme-action-secondary-light);
    --app-action-secondary-text: var(--theme-action-secondary-text-light);
    --app-action-hover: var(--theme-action-hover-light);
    --app-navbar-bg: var(--theme-navbar-bg-light);
    --app-navbar-text: var(--theme-navbar-text-light);
    --app-table-head: var(--theme-table-head-light);
    --app-table-row: var(--theme-table-row-light);
    --app-table-row-alt: var(--theme-table-row-alt-light);
    --app-overlay: var(--theme-overlay-light);
    --app-shadow: var(--theme-shadow-light);
    --app-focus-ring: var(--theme-focus-ring-light);
    --app-link: var(--theme-link-light);
    --app-link-hover: var(--theme-link-hover-light);
    --app-badge-bg: var(--theme-badge-bg-light);
    --app-badge-text: var(--theme-badge-text-light);
    --app-disabled-bg: var(--theme-disabled-bg-light);
    --app-disabled-text: var(--theme-disabled-text-light);

    --app-navbar-border: color-mix(in srgb, var(--app-navbar-text) 22%, var(--app-navbar-bg));
    --app-navbar-hover-bg: color-mix(in srgb, var(--app-action-primary) 16%, var(--app-navbar-bg));
    --app-navbar-hover-text: var(--app-navbar-text);
    --app-navbar-chip-bg: color-mix(in srgb, var(--app-action-primary) 11%, var(--app-navbar-bg));
    --app-navbar-chip-text: var(--app-navbar-text);
    --app-dropdown-hover-bg: color-mix(in srgb, var(--app-action-primary) 13%, var(--app-surface-elevated));
    --app-dropdown-hover-text: var(--app-text);
}

/* =========================================================
   ACTIVE THEME TOKENS – DARK MODE
   ========================================================= */
body[data-theme="dark"]{
    color-scheme: dark;

    --app-page-bg: var(--theme-page-bg-dark);
    --app-surface: var(--theme-surface-dark);
    --app-surface-muted: var(--theme-surface-muted-dark);
    --app-surface-elevated: var(--theme-surface-elevated-dark);
    --app-text: var(--theme-text-dark);
    --app-text-muted: var(--theme-text-muted-dark);
    --app-border: var(--theme-border-dark);
    --app-input-bg: var(--theme-input-bg-dark);
    --app-input-border: var(--theme-input-border-dark);
    --app-action-primary: var(--theme-action-primary-dark);
    --app-action-primary-text: var(--theme-action-primary-text-dark);
    --app-action-secondary: var(--theme-action-secondary-dark);
    --app-action-secondary-text: var(--theme-action-secondary-text-dark);
    --app-action-hover: var(--theme-action-hover-dark);
    --app-navbar-bg: var(--theme-navbar-bg-dark);
    --app-navbar-text: var(--theme-navbar-text-dark);
    --app-table-head: var(--theme-table-head-dark);
    --app-table-row: var(--theme-table-row-dark);
    --app-table-row-alt: var(--theme-table-row-alt-dark);
    --app-overlay: var(--theme-overlay-dark);
    --app-shadow: var(--theme-shadow-dark);
    --app-focus-ring: var(--theme-focus-ring-dark);
    --app-link: var(--theme-link-dark);
    --app-link-hover: var(--theme-link-hover-dark);
    --app-badge-bg: var(--theme-badge-bg-dark);
    --app-badge-text: var(--theme-badge-text-dark);
    --app-disabled-bg: var(--theme-disabled-bg-dark);
    --app-disabled-text: var(--theme-disabled-text-dark);

    --app-navbar-border: color-mix(in srgb, var(--app-navbar-text) 24%, var(--app-navbar-bg));
    --app-navbar-hover-bg: color-mix(in srgb, var(--app-action-primary) 22%, var(--app-navbar-bg));
    --app-navbar-hover-text: var(--app-navbar-text);
    --app-navbar-chip-bg: color-mix(in srgb, var(--app-action-primary) 16%, var(--app-navbar-bg));
    --app-navbar-chip-text: var(--app-navbar-text);
    --app-dropdown-hover-bg: color-mix(in srgb, var(--app-action-primary) 18%, var(--app-surface-elevated));
    --app-dropdown-hover-text: var(--app-text);
}

/* Statusfarben sind für alle Modi semantisch identisch benannt. */
:root{
    --app-status-success: var(--theme-status-success);
    --app-status-warning: var(--theme-status-warning);
    --app-status-danger: var(--theme-status-danger);
    --app-status-info: var(--theme-status-info);
    --app-status-pending: var(--theme-status-pending);
    --app-status-accepted: var(--theme-status-accepted);
    --app-status-rejected: var(--theme-status-rejected);
    --app-status-removed: var(--theme-status-removed);
    --app-status-released: var(--theme-status-released);
    --app-status-selectable: var(--theme-status-selectable);
    --app-status-replacement: var(--theme-status-replacement);
    --app-status-new-assignment: var(--theme-status-new-assignment);
    --app-status-appointment: var(--theme-status-appointment);

    /* Kompatibilitätsbrücke für noch nicht migrierte gemeinsame Helfer. */
    --VRMS_Background: var(--app-page-bg);
    --VRMS_background: var(--app-page-bg);
    --VRMS_foreground: var(--app-text);
    --VRMS_infoText: var(--app-text-muted);
    --VRMS_button-bg: var(--app-action-primary);
    --VRMS_button-font: var(--app-action-primary-text);
    --VRMS_button-font-hover: var(--app-action-primary-text);
    --VRMS-navbar-bg: var(--app-navbar-bg);
    --VRMS-navbar-text: var(--app-navbar-text);
    --VRMS_table-bg: var(--app-table-row);
    --VRMS_table-striped: var(--app-table-row-alt);
}

/* =========================================================
   DOCUMENT FOUNDATION
   ========================================================= */
*,
*::before,
*::after{
    box-sizing: border-box;
}

html{
    min-height: 100%;
    background: var(--app-page-bg);
}

body{
    min-height: 100vh;
    margin: 0;
    background: var(--app-page-bg);
    color: var(--app-text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

a{
    color: var(--app-link);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

a:hover{
    color: var(--app-link-hover);
}

img,
svg{
    max-width: 100%;
}

button,
input,
select,
textarea{
    font: inherit;
}

::selection{
    background: var(--app-action-primary);
    color: var(--app-action-primary-text);
}

:focus-visible{
    outline: var(--app-focus-ring);
    outline-offset: .15rem;
}

.text-muted{
    color: var(--app-text-muted) !important;
}

.d-none{
    display: none !important;
}

[hidden]{
    display: none !important;
}

.content-container{
    width: 100%;
    min-width: 0;
    color: var(--app-text);
}

.alert-container{
    top: 4.75rem;
    z-index: 21000;
}

/* =========================================================
   COMMON FORM FOUNDATION
   ========================================================= */
.form-control,
.form-select,
.vrms-form-control,
.vrms-form-select{
    border-color: var(--app-input-border);
    background-color: var(--app-input-bg);
    color: var(--app-text);
}

.form-control::placeholder,
.vrms-form-control::placeholder{
    color: var(--app-text-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.vrms-form-control:focus,
.vrms-form-select:focus{
    border-color: var(--app-action-primary);
    background-color: var(--app-input-bg);
    color: var(--app-text);
    box-shadow: none;
    outline: var(--app-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly]{
    border-color: var(--app-border);
    background: var(--app-disabled-bg);
    color: var(--app-disabled-text);
    opacity: 1;
}

/* =========================================================
   COMMON ACTION FOUNDATION
   ========================================================= */
/*
 * Projektweit einheitlicher Standard-Aktionsbutton.
 * Bereichs-CSS darf nur noch Layoutangaben wie Breite oder Anordnung ergänzen,
 * jedoch keine eigene Button-Optik definieren.
 */
.vrms-action-btn,
.btn.vrms-action-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.625rem;
    max-width: 100%;
    padding: .5rem .9rem;
    border: 1px solid color-mix(in srgb, var(--app-action-primary) 38%, var(--app-border));
    border-radius: var(--app-radius-md);
    background: var(--app-action-secondary);
    color: var(--app-action-secondary-text);
    box-shadow: none;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.vrms-action-btn:hover,
.vrms-action-btn:focus-visible,
.btn.vrms-action-btn:hover,
.btn.vrms-action-btn:focus-visible{
    border-color: var(--app-action-primary);
    background: var(--app-action-primary);
    color: var(--app-action-primary-text);
    box-shadow: none;
    text-decoration: none;
    transform: translateY(-1px);
}

.vrms-action-btn:active,
.btn.vrms-action-btn:active{
    border-color: var(--app-action-primary);
    background: var(--app-action-hover);
    color: var(--app-text);
    transform: translateY(0);
}

.vrms-action-btn:disabled,
.vrms-action-btn.disabled,
.vrms-action-btn[aria-disabled="true"],
.btn.vrms-action-btn:disabled,
.btn.vrms-action-btn.disabled,
.btn.vrms-action-btn[aria-disabled="true"]{
    border-color: var(--app-border);
    background: var(--app-disabled-bg);
    color: var(--app-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .7;
    pointer-events: none;
    transform: none;
}

.vrms-action-btn > i,
.btn.vrms-action-btn > i{
    flex: 0 0 auto;
}

.vrms-btn-primary{
    border-color: var(--app-action-primary);
    background: var(--app-action-primary);
    color: var(--app-action-primary-text);
}

.vrms-btn-secondary,
.vrms-secondary-btn,
.vrms-action-secondary{
    border-color: var(--app-border);
    background: var(--app-action-secondary);
    color: var(--app-action-secondary-text);
}

.vrms-btn-primary:hover,
.vrms-btn-secondary:hover,
.vrms-secondary-btn:hover,
.vrms-action-secondary:hover{
    border-color: var(--app-action-primary);
    background: var(--app-action-hover);
    color: var(--app-text);
}

button:disabled,
.btn:disabled,
[aria-disabled="true"]{
    cursor: not-allowed;
    opacity: .65;
}

/* =========================================================
   COMMON PANEL / EMPTY STATE FOUNDATION
   ========================================================= */
.vrms-panel{
    min-width: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.vrms-panel-header-between{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--app-space-4);
}

.vrms-panel-kicker{
    color: var(--app-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vrms-panel-title{
    margin: 0;
    color: var(--app-text);
}

.vrms-panel-subtitle{
    margin: .35rem 0 0;
    color: var(--app-text-muted);
}

.vrms-empty-state{
    padding: var(--app-space-5);
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
}

/* =========================================================
   COMMON TABLE FOUNDATION
   ========================================================= */
.vrms-table-responsive,
.vrms-datatable-wrap{
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.vrms-export-table,
.vrms-accounting-table{
    width: 100%;
    color: var(--app-text);
}

.table,
table.dataTable{
    --bs-table-bg: var(--app-table-row);
    --bs-table-striped-bg: var(--app-table-row-alt);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
}

.table thead th,
table.dataTable thead th{
    background: var(--app-table-head);
    color: var(--app-text);
}

/* =========================================================
   COMMON MODAL / DROPDOWN FOUNDATION
   ========================================================= */
.modal{
    z-index: 20001 !important;
}

.modal-content,
.vrms-modal-content{
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface-elevated);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

.modal-header,
.modal-body,
.modal-footer,
.vrms-modal-header,
.vrms-modal-body,
.vrms-modal-footer{
    border-color: var(--app-border);
    background: var(--app-surface-elevated);
    color: var(--app-text);
}

.dropdown-menu{
    border-color: var(--app-border);
    background: var(--app-surface-elevated);
    color: var(--app-text);
}

.dropdown-item{
    color: var(--app-text);
}

.dropdown-item:hover,
.dropdown-item:focus{
    background: var(--app-action-hover);
    color: var(--app-text);
}

@media (max-width: 768px) {
    .vrms-panel-header-between{
        display: grid;
    }
}


/* =========================================================
   GLOBAL STATUS SYSTEM
   Eine Statusbedeutung verwendet projektweit immer dieselbe
   semantische Farbe. Bereichs-CSS darf nur Layout ergänzen.
   ========================================================= */
.vrms-status-badge,
.vrms-status-surface{
    --vrms-status-color: var(--app-status-info);
}

.vrms-status-pending,
.is-pending{ --vrms-status-color: var(--app-status-pending); }
.vrms-status-accepted,
.is-accepted,
.is-active{ --vrms-status-color: var(--app-status-accepted); }
.vrms-status-rejected,
.is-rejected{ --vrms-status-color: var(--app-status-rejected); }
.vrms-status-removed,
.is-removed,
.is-disabled{ --vrms-status-color: var(--app-status-removed); }
.vrms-status-released,
.is-released{ --vrms-status-color: var(--app-status-released); }
.vrms-status-selectable,
.is-selectable{ --vrms-status-color: var(--app-status-selectable); }
.vrms-status-replacement,
.is-replacement{ --vrms-status-color: var(--app-status-replacement); }
.vrms-status-new-assignment,
.is-new-assignment{ --vrms-status-color: var(--app-status-new-assignment); }
.vrms-status-appointment,
.is-appointment{ --vrms-status-color: var(--app-status-appointment); }
.vrms-status-success,
.is-success{ --vrms-status-color: var(--app-status-success); }
.vrms-status-warning,
.is-warning{ --vrms-status-color: var(--app-status-warning); }
.vrms-status-danger,
.is-danger{ --vrms-status-color: var(--app-status-danger); }
.vrms-status-info,
.is-info{ --vrms-status-color: var(--app-status-info); }

.vrms-status-badge{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .28rem .62rem;
    border: 1px solid color-mix(in srgb, var(--vrms-status-color) 58%, var(--app-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--vrms-status-color) 15%, var(--app-surface));
    color: var(--app-text);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.vrms-status-badge::before{
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--vrms-status-color);
    box-shadow: 0 0 0 .14rem color-mix(in srgb, var(--vrms-status-color) 20%, transparent);
    content: "";
}

.vrms-status-surface{
    border-color: color-mix(in srgb, var(--vrms-status-color) 62%, var(--app-border));
    border-top-color: var(--vrms-status-color);
}