/* ==========================================================================
   Bildschirmgrößen (lädt nach site.css, multopia-theme.css, detail-page.css)
   --------------------------------------------------------------------------
   Nova ist eine Anwendung für den Schreibtisch. Sie muss aber nicht nur auf
   einem 27-Zoll-Bildschirm sitzen, sondern genauso auf einem 13-Zoll-Notebook –
   und dort ist nicht die Breite das Problem, sondern die Höhe: 1280x800,
   1366x768 oder 1920x1080 bei 150 % Skalierung (= 1280x720 CSS-Pixel).

   Diese Datei ändert kein Aussehen, sie ändert nur den Maßstab. Sie enthält
   deshalb ausschließlich Überschreibungen bestehender Regeln – keine neuen
   Klassen, keine neuen Bausteine. Wer sie entfernt, bekommt exakt den Stand
   von vorher zurück.

   Aufbau:
     1. Schutzgeländer      gelten immer, verhindern Überlauf
     2. Breitenstufen       <= 1600 / 1440 / 1280 / 1120 px
     3. Höhenstufen         <=  900 /  800 /  720 px
     4. Kombination         schmal UND flach (das echte 13-Zoll-Notebook)

   Unterhalb von 992 px übernimmt die bereits vorhandene Regel aus der site.css
   (Seitenleiste fährt aus). Mobilgeräte und Tablets sehen die Anwendung gar
   nicht erst – sie landen auf /AppInstall (siehe _Layout.cshtml und Program.cs).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schutzgeländer – größenunabhängig
   -------------------------------------------------------------------------- */

/* Die Schiebe-Dialoge trugen feste Höchstbreiten bis 1100 px. Auf einem
   1280er Bildschirm verdeckt das die ganze Anwendung und der Dialog läuft an
   der linken Kante aus dem Bild. min() lässt die große Breite stehen, solange
   Platz ist, und deckelt sie sonst am Fenster. */
.slide-overlay-panel      { max-width: min(600px,  calc(100vw - 120px)); }
.slide-overlay-panel--sm  { max-width: min(500px,  calc(100vw - 120px)); }
.slide-overlay-panel--md  { max-width: min(600px,  calc(100vw - 120px)); }
.slide-overlay-panel--lg  { max-width: min(850px,  calc(100vw - 120px)); }
.slide-overlay-panel--xl  { max-width: min(950px,  calc(100vw - 100px)); }
.slide-overlay-panel--xxl { max-width: min(1100px, calc(100vw -  80px)); }

/* Die stehende rechte Spalte der Detailseiten rechnete mit 48 px Rand, obwohl
   über ihr die Kopfzeile steht. Auf hohen Bildschirmen fällt das nicht auf,
   auf einem Notebook ragt sie unten aus dem Bild. Jetzt zieht sie die
   tatsächliche Kopfzeilenhöhe ab. */
.cd-col-side {
    height: calc(100vh - var(--header-height, 65px) - 56px);
}

/* Kein Baustein darf breiter werden als die Spalte, in der er sitzt – sonst
   schiebt eine einzelne lange Zeile die ganze Seite zur Seite. */
.data-table-card,
.table-toolbar,
.page-header {
    min-width: 0;
}

/* --- Kopfzeile: wer gibt nach, wenn es eng wird? ---------------------------
   Die drei Gruppen der Kopfzeile (links Zeitchips, Mitte Suche, rechts Knöpfe
   und Benutzer) trugen alle `min-width: 0`. Damit durfte jede unter die Breite
   ihres Inhalts gedrückt werden – und weil die rechte Gruppe rechtsbündig
   ausrichtet, wanderte ihr Inhalt beim Überlauf nach LINKS: die Zeiterfassungs-
   Knöpfe legten sich über das Developer-Abzeichen und über die Suche.

   Die Reihenfolge steht jetzt fest:
     1. die Zeitchips links geben zuerst nach (sie werden abgeschnitten),
     2. dann die Suche in der Mitte,
     3. die rechte Gruppe gibt nie nach – sie behält immer ihre Inhaltsbreite.  */
/* Auch links gilt: nicht unter die Inhaltsbreite. Die Zeitchips bringen ihren
   eigenen waagerechten Bildlauf mit (.tt-chips mit min-width: 0) und zählen
   deshalb mit null in diese Breite hinein – sie geben weiterhin als Erstes nach.
   Was übrig bleibt, sind die Schaltflächen, die die Seiten über HeaderActions
   hier einhängen; die dürfen nicht aus ihrer Gruppe herausragen. */
.header-left {
    min-width: auto;
}

.header-center {
    flex: 0 1 auto;
    min-width: 0;
}

.header-right {
    /* min-width: auto statt 0 – die Knöpfe können nicht mehr überlappen. */
    min-width: auto;
}

.erp-header .search-container {
    min-width: 0;
    max-width: 100%;
}

.erp-header .search-input-wrapper {
    min-width: 0;
}

.erp-header .search-input-wrapper input {
    min-width: 0;
}

/* Nur in der Entwicklungsfassung vorhanden; es darf als Erstes weichen. */
.erp-header .dev-badge {
    min-width: 0;
    overflow: hidden;
}

/* Rasterspalten dürfen schrumpfen. Ohne diese Angabe hält eine Spalte die
   Breite ihres längsten Inhalts (min-width: auto) und schiebt die Nachbarn
   aus dem Fenster – auf breiten Bildschirmen unsichtbar, auf schmalen nicht. */
.row > [class^="col-"] {
    min-width: 0;
}

/* Der Meilenstein-Strang auf der Unternehmensseite ist bewusst so breit wie
   sein Inhalt (min-width: max-content). Bis 1600 px passt das; darunter ragte
   er aus seiner Spalte heraus und wurde vom Layout abgeschnitten. Jetzt läuft
   er waagerecht durch. */
#milestonesOverviewContainer {
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   2. Breitenstufen
   -------------------------------------------------------------------------- */

/* ---- <= 1600 px: große Notebooks, kleine Schreibtischbildschirme --------- */
@media (max-width: 1600px) {
    :root {
        --sidebar-width: 244px;
    }

    .erp-content { padding: 28px 20px 0 28px; }
    .erp-header-container { padding: 0 20px; }
    .erp-header { padding: 0 26px; }

    .erp-header .search-container { width: 340px; }
    .erp-header .search-container:focus-within,
    .erp-header .search-container.is-open { width: 440px; }
}

/* ---- <= 1440 px: 14- und 15-Zoll-Notebooks, 1536x864 --------------------- */
@media (max-width: 1440px) {
    :root {
        --sidebar-width: 228px;
        --sidebar-collapsed-width: 74px;
        --header-height: 60px;
        --logo-container-height: 88px;
    }

    .sidebar-brand { padding: 0 12px; }
    .sidebar-brand img { height: 66px; }
    .sidebar-nav { padding: 10px 10px 20px 10px; }
    .nav-item { padding: 9px 14px; }
    .nav-text { margin-left: 13px; font-size: 0.87rem; }
    .nav-group-content .nav-item { padding-left: 32px; }
    .nav-group { margin-top: 13px; }

    .erp-content { padding: 24px 18px 0 24px; }
    .erp-header-container { padding: 0 18px; }
    .erp-header { padding: 0 20px; gap: 12px; border-radius: 18px; }
    .header-left { gap: 14px; }
    .header-right { gap: 12px; }

    .erp-header .search-container { width: 300px; }
    .erp-header .search-container:focus-within,
    .erp-header .search-container.is-open { width: 400px; }
    .erp-header .search-input-wrapper { height: 40px; }

    .avatar { width: 36px; height: 36px; font-size: 0.95rem; }
    .user-name { font-size: 0.92rem; }

    .page-header { margin-bottom: 18px; }
    .page-title { font-size: 1.55rem; }
    .page-subtitle { font-size: 0.95rem; }

    .kpi-grid { gap: 12px; margin-bottom: 28px; }
    .kpi-card { min-height: 104px; padding: 12px 14px; }

    .card { padding: 20px; }
}

/* ---- <= 1280 px: 13-Zoll-Notebooks, 1920x1080 bei 150 % ------------------ */
@media (max-width: 1280px) {
    :root {
        --sidebar-width: 210px;
        --sidebar-collapsed-width: 68px;
        --header-height: 56px;
        --logo-container-height: 76px;
        --cd-gap: 14px;
    }

    .erp-sidebar { margin: 12px 0 12px 12px; height: calc(100vh - 24px); }
    .sidebar-brand img { height: 56px; }
    .nav-item { padding: 8px 12px; margin-bottom: 3px; }
    .nav-text { margin-left: 11px; font-size: 0.85rem; }
    .nav-group-content .nav-item { padding-left: 28px; }
    .nav-group-header { padding: 6px 10px; font-size: 0.72rem; }
    .nav-icon { width: 18px; height: 18px; }

    .erp-content { padding: 18px 14px 0 18px; }
    .erp-header-container { padding: 0 14px; }
    .erp-header { padding: 0 14px; gap: 10px; border-radius: 16px; }

    .erp-header .search-container { width: 240px; }
    .erp-header .search-container:focus-within,
    .erp-header .search-container.is-open { width: 340px; }
    .erp-header .search-input-wrapper { height: 38px; padding: 0 6px 0 11px; gap: 6px; }

    /* Der Tastaturhinweis belegt 52 px im Suchfeld – mehr als ein Drittel dessen,
       was hier noch für die Eingabe übrig bleibt. Der Kniff Strg+K funktioniert
       weiter, er wird nur nicht mehr angeschrieben. */
    .erp-header .search-shortcut { display: none; }

    /* Die zweite Zeile im Kopf (E-Mail-Adresse) ist der erste Kandidat, wenn
       es eng wird – der Name bleibt stehen. */
    .header-user-info .user-email { display: none; }
    .avatar { width: 34px; height: 34px; font-size: 0.9rem; }
    .btn-icon { padding: 6px; }

    .page-header { margin-bottom: 14px; }
    .page-title { font-size: 1.4rem; }
    .page-subtitle { font-size: 0.9rem; }

    .kpi-grid { gap: 10px; margin-bottom: 20px; }
    .kpi-card { min-height: 96px; padding: 11px 13px; }

    .card { padding: 16px; }

    .table-toolbar { gap: 12px; margin-bottom: 14px; }
    .table-search { width: 220px; }
    .table-search:focus-within { width: 250px; }
    .data-table th { padding: 7px 8px; }
    .data-table td { padding: 9px 8px; font-size: 0.85rem; }

    /* Detailseiten: die Hauptspalte darf den gewonnenen Platz nutzen, die
       Randspalte wird schmaler, statt die Hauptspalte zu erdrücken. */
    .cd-col-main { max-width: 620px; }
    .cd-col-side { min-width: 280px; }
    .cd-hero { padding: 16px 18px; }
    .cd-card { padding: 16px; }
}

/* ---- <= 1200 px ----------------------------------------------------------- */
@media (max-width: 1200px) {
    /* Das Developer-Abzeichen gibt es nur in der Entwicklungsfassung. Es steht
       neben der Suche und nimmt ihr hier den letzten Platz weg – in der
       ausgelieferten Fassung ist es ohnehin nicht vorhanden.
       !important, weil die Sichtbarkeit direkt am Element gesetzt ist. */
    .erp-header .dev-badge { display: none !important; }
}

/* ---- <= 1120 px: sehr schmales Fenster am Schreibtisch ------------------- */
@media (max-width: 1120px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .cd-hero { grid-template-columns: minmax(0, 1fr); }
    .cd-hero-side { align-items: stretch; }
    .cd-hero-actions { justify-content: flex-start; margin-left: 0; }
    .cd-sketch-panel { width: 100%; align-self: center; max-width: 320px; }
    .erp-header .search-container { width: 200px; }
    .erp-header .search-container:focus-within,
    .erp-header .search-container.is-open { width: 300px; }
}

/* --------------------------------------------------------------------------
   3. Höhenstufen – der eigentliche Engpass auf einem Notebook
   -------------------------------------------------------------------------- */

/* ---- <= 900 px ----------------------------------------------------------- */
@media (max-height: 900px) {
    :root { --logo-container-height: 84px; }

    .sidebar-brand img { height: 62px; }
    .sidebar-nav { padding: 8px 10px 16px 10px; }
    .nav-item { padding: 8px 14px; margin-bottom: 3px; }
    .nav-group { margin-top: 12px; }

    .erp-content { padding-top: 20px; }
    .page-header { margin-bottom: 16px; }
    .kpi-grid { margin-bottom: 24px; }
    .kpi-card { min-height: 100px; }
    .data-table-container { min-height: 260px; }
}

/* ---- <= 800 px: 1280x800 und 1366x768 ------------------------------------ */
@media (max-height: 800px) {
    :root {
        --header-height: 56px;
        --logo-container-height: 68px;
    }

    .erp-sidebar { margin: 10px 0 10px 12px; height: calc(100vh - 20px); }
    .sidebar-brand img { height: 50px; }
    .sidebar-nav { padding: 6px 10px 14px 10px; }
    /* Die Zeilenhöhe der Anwendung (1.7) ist für Fließtext gedacht. Im Menü sind es
       einzeilige Einträge; hier kostet sie nur Platz. */
    .nav-item { padding: 7px 14px; margin-bottom: 2px; line-height: 1.35; }
    .sidebar-footer-link { line-height: 1.35; }
    .nav-group { margin-top: 10px; }
    .nav-group-header { padding: 5px 10px; }
    .sidebar-footer { padding: 6px 16px 10px; }

    .erp-content { padding-top: 16px; }
    .page-header { margin-bottom: 12px; }
    .page-title { font-size: 1.35rem; }
    .page-subtitle { font-size: 0.88rem; }

    .kpi-grid { gap: 10px; margin-bottom: 16px; }
    .kpi-card { min-height: 88px; padding: 10px 13px; }

    .data-table-container { min-height: 200px; }
    .data-table th { padding: 6px 8px; }
    .data-table td { padding: 8px 8px; }

    .slide-overlay-panel { top: 14px; bottom: 14px; }
    .cd-card { padding: 14px 16px; }
    .cd-hero { padding: 14px 18px; }

    /* Die Fußzeile steht auf jeder Seite unter dem Inhalt. Bei knapper Höhe kostet
       sie eine Tabellenzeile bzw. eine Wochenzeile im Kalender. */
    .erp-footer { padding: 12px 32px 4px 32px; }

    /* Kalender: jeder eingesparte Punkt in der Tageszelle ist eine zusätzliche
       Wochenzeile, die ohne Bildlauf sichtbar bleibt. Die Auswahl steht in der
       Calendar.cshtml und wird deshalb um eine Stufe genauer angesprochen. */
    .erp-content .nova-cal .fc { padding: 10px 12px 12px; }
    .erp-content .nova-cal .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 10px; }
    .erp-content .nova-cal .fc .fc-daygrid-day-number { padding: 3px 6px; font-size: 0.75rem; }
    .erp-content .nova-cal .fc .fc-daygrid-day-events { min-height: 20px; }
}

/* ---- <= 720 px: 1920x1080 bei 150 %, 1600x900 bei 125 % ------------------ */
@media (max-height: 720px) {
    :root {
        --header-height: 52px;
        --logo-container-height: 60px;
    }

    .sidebar-brand img { height: 42px; }
    .nav-item { padding: 6px 14px; }
    .nav-icon { width: 17px; height: 17px; }
    .nav-group { margin-top: 8px; }

    .erp-content { padding-top: 14px; }
    .page-header { margin-bottom: 10px; }
    .page-title { font-size: 1.25rem; }

    .kpi-grid { margin-bottom: 12px; }
    .kpi-card { min-height: 78px; padding: 9px 12px; }

    .data-table-container { min-height: 160px; }

    .slide-overlay-panel { top: 8px; bottom: 8px; }
}

/* --------------------------------------------------------------------------
   4. Schmal UND flach – das typische 13-Zoll-Notebook
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) and (max-height: 800px) {
    /* Bei knapper Höhe zählt jede Tabellenzeile mehr als die Kennzahlen
       darüber. Die Kacheln rücken deshalb enger zusammen. */
    .kpi-grid { gap: 9px; margin-bottom: 14px; }
    .kpi-card { min-height: 82px; }

    .cd-col-side { min-width: 270px; }
}