/* ============================================================
   TimeSecPlan – Mobile-Optimierung
   Wird NACH style.css geladen und überschreibt gezielt die
   Regeln, die auf Smartphones und Tablets Probleme machen.
   ============================================================ */

/* --- Grundlagen für alle Bildschirmgrößen --- */
html {
    -webkit-text-size-adjust: 100%;
}

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

/* Lange E-Mails, Loginnamen und User-Agents dürfen den Kasten nicht sprengen */
.card,
.modal-content,
.object-card,
.menu-box {
    overflow-wrap: anywhere;
}

/* Feste Feldbreiten (400px) dürfen nie breiter als ihr Container werden */
.input-wrapper,
.select-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   KLEINE LAPTOPS
   ============================================================ */
@media (max-width: 1200px) {

    .container,
    .header-container {
        max-width: 95%;
    }
}

/* ============================================================
   TABLETS UND MOBILES MENÜ (ab hier greift der Hamburger)
   ============================================================ */
@media (max-width: 992px) {

    header.main-header {
        padding: 0 12px;
    }

    .header-container {
        max-width: 100%;
        padding: 0;
        height: 60px;
        flex: 1 1 auto;
    }

    /* Menü öffnet immer direkt unter dem Header – unabhängig von dessen Höhe.
       Die feste Angabe top:65px lag sonst mitten im Header. */
    .nav-bar {
        top: 100%;
    }

    /* Die Höhenangaben aus der Desktop-Navigation (height:100%) beziehen sich
       mobil auf den 60px hohen Header. Dadurch wurde das aufgeklappte Menü auf
       Header-Höhe abgeschnitten – es muss mit seinem Inhalt wachsen. */
    .nav-bar,
    .nav-menu,
    .nav-menu>li,
    .nav-menu>li>a,
    .dropdown-trigger {
        height: auto;
    }

    /* Untermenü gehört unter seinen Eintrag, nicht daneben:
       die Listenpunkte sind auf dem Desktop Flex-Zeilen. */
    .nav-menu>li {
        flex-direction: column;
        align-items: stretch;
    }

    /* width:100% plus 4px Rahmen ergäbe sonst 4px Überbreite */
    .dropdown-menu {
        box-sizing: border-box;
    }

    /* Rolle und Logout bleiben kompakt neben dem Hamburger stehen */
    .user-status-zone {
        width: auto;
        padding: 0;
        margin-left: auto;
        gap: 8px;
        flex-shrink: 0;
    }

    .btn-logout {
        padding: 6px 10px;
        font-size: 13px;
    }

    .container {
        max-width: 100%;
        margin: 16px auto;
        padding: 0 14px;
    }
}

/* ============================================================
   SMARTPHONES
   ============================================================ */
@media (max-width: 768px) {

    /* iOS zoomt beim Antippen in jedes Feld mit weniger als 16px hinein */
    input,
    select,
    textarea,
    button,
    .modal-content input,
    .modal-content select,
    .form-control,
    .filter-select {
        font-size: 16px;
    }

    .container {
        margin: 12px auto;
        padding: 0 12px;
    }

    .card {
        padding: 16px;
        margin-bottom: 18px;
        border-radius: 6px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 19px;
    }

    h3 {
        font-size: 17px;
    }

    /* --- Tabellen ---
       Die Tabelle wird selbst zur Scroll-Fläche. Dadurch verrutscht
       nicht mehr die ganze Seite, wenn eine Spalte zu breit ist.
       Der Schatten am rechten Rand zeigt an, dass es seitlich weitergeht. */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        background:
            linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)) left center,
            linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)) right center,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right center;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Schmale, immer sichtbare Scrollleiste unter der Tabelle */
    table::-webkit-scrollbar {
        height: 6px;
    }

    table::-webkit-scrollbar-track {
        background: #eef1f5;
        border-radius: 3px;
    }

    table::-webkit-scrollbar-thumb {
        background: #b8c2cc;
        border-radius: 3px;
    }

    th,
    td {
        padding: 10px 8px;
        font-size: 14px;
    }

    /* Aktions-Symbole groß genug zum Antippen (mind. ~40px Trefferfläche) */
    td a[title] {
        display: inline-block;
        padding: 8px 6px;
        font-size: 19px;
        line-height: 1;
        text-decoration: none;
    }

    /* Überschrift und ➕ nebeneinander, ohne dass der Titel den Button wegdrückt */
    .card>div[style*="display: flex"] {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    /* --- Formulare --- */
    .input-wrapper,
    .select-wrapper {
        width: 100%;
        margin-top: 18px;
    }

    /* Auswahlfelder genauso breit wie die Eingabefelder – sonst bleibt
       die Trefferfläche so schmal wie der längste Eintrag */
    .input-wrapper select,
    .modal-content select {
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .inline-form,
    .filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group,
    .filter-input-group {
        width: 100%;
        min-width: 0;
    }

    .filter-form-wrapper {
        max-width: 100%;
    }

    .filter-flex-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* --- Modale Fenster --- */
    .modal {
        padding: 10px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-content {
        padding: 20px;
        max-height: calc(100vh - 20px);
        border-radius: 6px;
    }

    .modal-content h3 {
        font-size: 18px;
        margin-bottom: 18px;
    }

    /* Untereinander statt nebeneinander – in der Reihenfolge des Formulars,
       damit Tastatur und Screenreader dieselbe Abfolge sehen */
    .modal-actions {
        flex-direction: column;
        gap: 10px;
    }

    .modal-actions button {
        width: 100%;
        padding: 14px;
    }

    /* --- Buttons --- */
    #exportBtn,
    .submit-btn,
    .object-submit-button {
        width: 100%;
        margin: 15px 0 0 0;
        box-sizing: border-box;
    }

    .btn-reset {
        display: block;
    }

    /* --- Karten-Raster einspaltig --- */
    .menu-grid,
    .object-grid,
    .slot-grid,
    .calendar-grid,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .menu-box,
    .object-card {
        padding: 22px 16px;
    }

    /* --- Kennzahlen --- */
    .stats-container {
        flex-direction: column;
        gap: 12px;
    }

    .stats-box {
        padding: 14px 16px;
    }

    /* --- Schicht- und Kalenderlisten --- */
    .day-list-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .day-title-shift {
        min-width: 0;
    }

    .shift-badge-sub {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .shift-info-meta {
        gap: 10px;
    }

    .actions-and-status {
        justify-content: space-between;
        width: 100%;
    }

    .navigator-wrapper {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .navigator-current {
        margin: 0;
    }

    /* --- Objekt-Schichtzuweisung --- */
    .header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
    }

    .header-bar h1 {
        font-size: 20px;
    }

    .info-panel {
        padding: 15px;
    }

    .info-panel h2 {
        font-size: 18px;
    }

    /* --- Login --- */
    .login-body {
        height: auto;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
    }

    .login-card {
        width: 100%;
        max-width: 340px;
        padding: 25px;
        box-sizing: border-box;
    }
}

/* ============================================================
   SEHR SCHMALE GERÄTE (iPhone SE und ähnlich)
   ============================================================ */
@media (max-width: 400px) {

    .container {
        padding: 0 10px;
    }

    .card {
        padding: 14px 12px;
    }

    .header-logo {
        font-size: 15px;
    }

    .user-badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    .btn-logout {
        padding: 5px 8px;
        font-size: 12px;
    }

    .modal-content {
        padding: 16px;
    }
}