/* =========================================================================
 * SchulBuchManager — Base-Styles
 * Reset, Variablen, Typografie, Forms, Buttons, Utilities
 * ========================================================================= */

:root {
    /* Markenfarben */
    --sbm-primary:        #1F3C5B;
    --sbm-primary-soft:   #2F547D;
    --sbm-primary-dark:   #152A40;
    --sbm-secondary:      #2A5D67;
    --sbm-secondary-dark: #6BC7D1;

    /* Neutrale Grautöne */
    --sbm-gray-50:  #F7F8FA;
    --sbm-gray-100: #EEF1F5;
    --sbm-gray-200: #DDE2EA;
    --sbm-gray-300: #C2CAD5;
    --sbm-gray-400: #94A1B2;
    --sbm-gray-500: #6B7888;
    --sbm-gray-600: #4E5969;
    --sbm-gray-700: #38424F;
    --sbm-gray-800: #222B36;
    --sbm-gray-900: #121820;

    /* Statusfarben */
    --sbm-success:   #227A4B;
    --sbm-success-bg:#E6F4EC;
    --sbm-warning:   #A86500;
    --sbm-warning-bg:#FBF1DA;
    --sbm-danger:    #B3261E;
    --sbm-danger-bg: #FBE7E6;
    --sbm-info:      #1F558E;
    --sbm-info-bg:   #E3EEF9;

    /* Layout-Tokens */
    --sbm-radius-sm: 4px;
    --sbm-radius:    8px;
    --sbm-radius-lg: 12px;

    --sbm-shadow-1: 0 1px 2px rgba(18, 24, 32, 0.04), 0 1px 3px rgba(18, 24, 32, 0.06);
    --sbm-shadow-2: 0 2px 4px rgba(18, 24, 32, 0.05), 0 4px 12px rgba(18, 24, 32, 0.08);

    /* Spacing-Tokens sind bewusst um ~10 % kompakter kalibriert als
       klassische Material/Bootstrap-Werte, damit 100 %-Browserzoom auf
       Full-HD ohne gefühlt zu grosse Flächen auskommt. */
    --sbm-space-1: 4px;
    --sbm-space-2: 7px;
    --sbm-space-3: 11px;
    --sbm-space-4: 14px;
    --sbm-space-5: 20px;
    --sbm-space-6: 28px;
    --sbm-space-8: 42px;

    --sbm-font:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sbm-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--sbm-font);
    /* Base-Font 13.5 px entspricht ~90 % der klassischen 15 px — dadurch
       wirkt das Admin-Portal bei 100 %-Browserzoom wie vorher bei 90 %. */
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sbm-gray-800);
    background: var(--sbm-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sbm-space-3);
    font-weight: 600;
    color: var(--sbm-gray-900);
    line-height: 1.25;
}
h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14.5px; }

p  { margin: 0 0 var(--sbm-space-3); }

a  {
    color: var(--sbm-primary);
    text-decoration: none;
    transition: color 120ms ease;
}
a:hover { color: var(--sbm-primary-soft); text-decoration: underline; }

small { font-size: 13px; color: var(--sbm-gray-500); }

code {
    font-family: var(--sbm-font-mono);
    font-size: 0.92em;
    padding: 1px 6px;
    border-radius: var(--sbm-radius-sm);
    background: var(--sbm-gray-100);
}

/* ----- Forms ----- */
label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--sbm-gray-700);
    margin-bottom: var(--sbm-space-1);
}

.form-group { margin-bottom: var(--sbm-space-4); }

.form-group .help {
    font-size: 13px;
    color: var(--sbm-gray-500);
    margin-top: var(--sbm-space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--sbm-gray-300);
    border-radius: var(--sbm-radius);
    background: #fff;
    font: inherit;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--sbm-primary);
    box-shadow: 0 0 0 3px rgba(31, 60, 91, 0.15);
}

input[readonly],
input[disabled] {
    background: var(--sbm-gray-100);
    color: var(--sbm-gray-500);
    cursor: not-allowed;
}

textarea { min-height: 90px; resize: vertical; }

/* ----- Buttons ----- */
/* Kompakte Buttons nach Single-Tenant-Vorbild: fixe Höhe statt padding-basiert
   → konsistent neben Inputs, keine springenden Abstände. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--sbm-radius);
    background: var(--sbm-gray-100);
    color: var(--sbm-gray-800);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:hover    { background: var(--sbm-gray-200); text-decoration: none; }
.btn:active   { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--sbm-primary);
    border-color: var(--sbm-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--sbm-primary-soft); border-color: var(--sbm-primary-soft); color: #fff; }

.btn-secondary {
    background: #fff;
    border-color: var(--sbm-gray-300);
    color: var(--sbm-gray-700);
}
.btn-secondary:hover { border-color: var(--sbm-gray-400); background: var(--sbm-gray-50); }

.btn-danger {
    background: var(--sbm-danger);
    border-color: var(--sbm-danger);
    color: #fff;
}
.btn-danger:hover { background: #8a1e17; border-color: #8a1e17; color: #fff; }

.btn-ghost {
    background: transparent;
    color: var(--sbm-gray-600);
}
.btn-ghost:hover { background: var(--sbm-gray-100); color: var(--sbm-gray-900); }

/* Größen-Modifier */
.btn-sm    { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--sbm-radius-sm); gap: 5px; }
.btn-lg    { height: 42px; padding: 0 22px; font-size: 14.5px; }
.btn-icon  { height: 36px; width: 36px; padding: 0; }
.btn-block { width: 100%; }
.btn svg   { flex-shrink: 0; }

/* ----- Alerts / Banner ----- */
.alert {
    padding: 12px 16px;
    border-radius: var(--sbm-radius);
    margin-bottom: var(--sbm-space-4);
    font-size: 14px;
    border: 1px solid transparent;
}
.alert-success { background: var(--sbm-success-bg); color: var(--sbm-success); border-color: #B4DCC6; }
.alert-warning { background: var(--sbm-warning-bg); color: var(--sbm-warning); border-color: #ECD5A1; }
.alert-danger  { background: var(--sbm-danger-bg);  color: var(--sbm-danger);  border-color: #EDBFBB; }
.alert-info    { background: var(--sbm-info-bg);    color: var(--sbm-info);    border-color: #B8CEE4; }

/* ----- Cards ----- */
.card {
    background: #fff;
    border: 1px solid var(--sbm-gray-200);
    border-radius: var(--sbm-radius-lg);
    box-shadow: var(--sbm-shadow-1);
    padding: var(--sbm-space-5);
    margin-bottom: var(--sbm-space-5);
}
.card-header {
    margin: calc(-1 * var(--sbm-space-5));
    margin-bottom: var(--sbm-space-5);
    padding: var(--sbm-space-4) var(--sbm-space-5);
    border-bottom: 1px solid var(--sbm-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sbm-space-3);
}
.card-header h2, .card-header h3 { margin: 0; }

/* ----- Tables ----- */
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
table.data th,
table.data td {
    text-align: left;
    padding: 9px 11px;
    border-bottom: 1px solid var(--sbm-gray-200);
}
table.data th {
    background: var(--sbm-gray-50);
    font-weight: 600;
    color: var(--sbm-gray-600);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
table.data tbody tr:hover { background: var(--sbm-gray-50); }

/* Sortierbare Spaltenköpfe — Markup `<th data-sort>` reicht, Logik in
   sbm.js (SBM.initTableSort). Der Sortier-Indikator ist bewusst subtil. */
table.data th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px;
    transition: background 120ms ease;
}
table.data th[data-sort]:hover { background: var(--sbm-gray-100); }
table.data th[data-sort]::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0.35;
}
table.data th[data-sort].sort-asc::after  { content: '↑'; opacity: 1; color: var(--sbm-primary); }
table.data th[data-sort].sort-desc::after { content: '↓'; opacity: 1; color: var(--sbm-primary); }

/* Zeile von Live-Suche ausgeblendet. */
tr.is-search-hidden { display: none; }
.search-no-results {
    text-align: center;
    padding: 32px 20px;
    color: var(--sbm-gray-500);
    font-style: italic;
}

/* ----- Badges / Pills ----- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--sbm-gray-200);
    color: var(--sbm-gray-700);
}
.badge-success { background: var(--sbm-success-bg); color: var(--sbm-success); }
.badge-warning { background: var(--sbm-warning-bg); color: var(--sbm-warning); }
.badge-danger  { background: var(--sbm-danger-bg);  color: var(--sbm-danger); }
.badge-info    { background: var(--sbm-info-bg);    color: var(--sbm-info); }

/* ----- Utilities ----- */
.text-muted  { color: var(--sbm-gray-500); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-mono   { font-family: var(--sbm-font-mono); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sbm-space-2); }
.mt-3 { margin-top: var(--sbm-space-3); }
.mt-4 { margin-top: var(--sbm-space-4); }
.mt-5 { margin-top: var(--sbm-space-5); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sbm-space-2); }
.mb-3 { margin-bottom: var(--sbm-space-3); }
.mb-4 { margin-bottom: var(--sbm-space-4); }
.mb-5 { margin-bottom: var(--sbm-space-5); }

.flex       { display: flex; }
.flex-gap-2 { gap: var(--sbm-space-2); }
.flex-gap-3 { gap: var(--sbm-space-3); }
.flex-gap-4 { gap: var(--sbm-space-4); }
.flex-items-center { align-items: center; }
.flex-between      { justify-content: space-between; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
 * Detail-Grid (2–3 Info-Karten nebeneinander)
 * ========================================================================= */
.sbm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.sbm-detail-grid .card { margin-bottom: 0; }

/* =========================================================================
 * Definition-List für Info-Blöcke
 * ========================================================================= */
.sbm-dl {
    display: grid;
    grid-template-columns: minmax(130px, auto) 1fr;
    column-gap: 16px;
    row-gap: 8px;
    margin: 0;
    font-size: 14px;
}
.sbm-dl dt {
    color: var(--sbm-gray-500);
    font-weight: 500;
    font-size: 13px;
}
.sbm-dl dd { margin: 0; color: var(--sbm-gray-800); word-break: break-word; }

/* =========================================================================
 * Modal
 * ========================================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    z-index: 900;
    overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
body.modal-open { overflow: hidden; }

.modal {
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: var(--sbm-radius-lg);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    animation: sbmModalIn 160ms ease-out;
}
.modal-lg  { max-width: 780px; }
.modal-xl  { max-width: 960px; }

@keyframes sbmModalIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sbm-gray-200);
}
.modal-header h2, .modal-header h3 { margin: 0; }

.modal-body   { padding: 20px; }
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--sbm-gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--sbm-gray-50);
}

.btn-icon {
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--sbm-gray-500);
}
.btn-icon:hover { background: var(--sbm-gray-100); color: var(--sbm-gray-800); }

/* =========================================================================
 * Icon-Action-Buttons in Tabellen (32px-Slots, analog BuchManager)
 * ========================================================================= */
.btn-icon-action {
    width: 32px; height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sbm-radius-sm);
    color: var(--sbm-gray-500);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-icon-action:hover {
    background: var(--sbm-gray-100);
    color: var(--sbm-gray-800);
    border-color: var(--sbm-gray-200);
}
.btn-icon-action.is-primary:hover { color: var(--sbm-primary); border-color: var(--sbm-primary); }
.btn-icon-action.is-danger:hover  { color: var(--sbm-danger); border-color: var(--sbm-danger); background: var(--sbm-danger-bg); }
.btn-icon-action.is-warning:hover { color: var(--sbm-warning); border-color: var(--sbm-warning); background: var(--sbm-warning-bg); }
.btn-icon-action.is-success:hover { color: var(--sbm-success); border-color: var(--sbm-success); background: var(--sbm-success-bg); }
.btn-icon-spacer { display: inline-block; width: 32px; height: 32px; }

.btn-icon-actions {
    display: inline-flex;
    gap: 4px;
}

/* =========================================================================
 * Form-Row (zweispaltiges Formular-Layout)
 * ========================================================================= */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    .form-row { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Toast
 * ========================================================================= */
.sbm-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sbm-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: var(--sbm-radius);
    background: var(--sbm-gray-900);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.sbm-toast.sbm-toast-show { opacity: 1; transform: translateY(0); }
.sbm-toast-success { background: var(--sbm-success); }
.sbm-toast-error   { background: var(--sbm-danger); }
.sbm-toast-warning { background: var(--sbm-warning); }
.sbm-toast-info    { background: var(--sbm-info); }

/* =========================================================================
 * Cookie-Hinweis-Banner (global, via templates/cookie-notice.php)
 * ========================================================================= */
.cookie-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 9000;
    background: #fff;
    border: 1px solid var(--sbm-gray-200);
    border-radius: var(--sbm-radius-lg);
    box-shadow: 0 12px 36px -8px rgba(18, 24, 32, 0.22),
                0 4px 12px rgba(18, 24, 32, 0.08);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}
.cookie-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cookie-notice[hidden] { display: none; }

.cookie-notice-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cookie-notice-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sbm-gray-700);
}
.cookie-notice-text strong {
    color: var(--sbm-primary);
    font-weight: 600;
}
.cookie-notice-text a {
    color: var(--sbm-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-notice-text a:hover {
    color: var(--sbm-primary);
}

.cookie-notice-btn {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--sbm-primary);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cookie-notice-btn:hover { background: var(--sbm-primary-dark); }
.cookie-notice-btn:focus-visible {
    outline: 2px solid var(--sbm-secondary-dark);
    outline-offset: 2px;
}

@media (max-width: 620px) {
    .cookie-notice { left: 10px; right: 10px; bottom: 10px; }
    .cookie-notice-inner {
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .cookie-notice-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-notice { transition: none; transform: none; }
    .cookie-notice.is-visible { transform: none; }
}

/* =========================================================================
 * SBM.confirm() — Overlay-Dialog statt window.confirm
 * ========================================================================= */
.sbm-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 24, 32, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9500;
    opacity: 0;
    transition: opacity 160ms ease;
}
.sbm-confirm-overlay.is-open { opacity: 1; }

.sbm-confirm-box {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: var(--sbm-radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    padding: 24px;
    transform: translateY(10px) scale(0.98);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sbm-confirm-overlay.is-open .sbm-confirm-box { transform: none; }

.sbm-confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sbm-gray-900);
    margin-bottom: 8px;
}
.sbm-confirm-msg {
    font-size: 14.5px;
    color: var(--sbm-gray-700);
    line-height: 1.55;
    margin-bottom: 20px;
}
.sbm-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .sbm-confirm-overlay,
    .sbm-confirm-box { transition: none; transform: none; }
}

/* =========================================================================
 * Upload-Dropzone — eleganter Wrapper um <input type="file">
 * ========================================================================= */
.sbm-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 22px;
    border: 2px dashed var(--sbm-gray-300);
    border-radius: var(--sbm-radius-lg);
    background: var(--sbm-gray-50);
    color: var(--sbm-gray-600);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    text-align: center;
}
.sbm-dropzone:hover {
    border-color: var(--sbm-primary-soft);
    background: #fff;
    color: var(--sbm-gray-800);
}
.sbm-dropzone.is-dragover {
    border-color: var(--sbm-primary);
    background: rgba(31, 60, 91, 0.04);
    color: var(--sbm-primary);
}
.sbm-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.sbm-dropzone-icon {
    width: 36px;
    height: 36px;
    opacity: 0.7;
}
.sbm-dropzone-text {
    font-size: 14px;
    font-weight: 500;
}
.sbm-dropzone-hint {
    font-size: 12px;
    color: var(--sbm-gray-500);
    line-height: 1.4;
}
.sbm-dropzone-status {
    font-size: 13px;
    font-weight: 500;
    color: var(--sbm-gray-500);
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--sbm-gray-200);
    border-radius: 6px;
    min-height: 28px;
    box-sizing: border-box;
}
.sbm-dropzone-status.has-file {
    color: var(--sbm-primary);
    background: rgba(31, 60, 91, 0.04);
    border-color: var(--sbm-primary-soft);
}
.sbm-dropzone-status:empty { display: none; }
.sbm-dropzone-preview {
    margin-top: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--sbm-gray-200);
    border-radius: 8px;
}
.sbm-dropzone-preview img {
    max-width: 200px;
    max-height: 80px;
    display: block;
    margin: 0 auto;
}