/* ==========================================================================
   SLM.Mobile.css -- Mobile layout and component overrides
   All rules scoped to the mobile layout shell or @media (max-width: 639px).
   ========================================================================== */

/* --- Mobile layout shell --- */

.slm-mobile-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--v2-page-bg, #f5f5f5);
    color: var(--v2-text, #222);
}

/* --- Top bar --- */

.slm-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 4px;
    background: var(--v2-panel-bg, #fff);
    border-bottom: 1px solid var(--v2-border, #ddd);
    z-index: 100;
    gap: 4px;
}

.slm-mobile-topbar__left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.slm-mobile-topbar__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.slm-mobile-topbar__username {
    font-size: 0.6rem;
    color: var(--v2-label-color, #b71c1c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.slm-mobile-topbar__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
}

.slm-mobile-topbar__breadcrumb {
    font-size: 0.6rem;
    color: var(--v2-text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.slm-mobile-topbar__logo {
    display: flex;
    align-items: center;
}

/* --- Body (scrollable page content) --- */

.slm-mobile-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
}

/* iOS Safari fix: position: fixed is broken inside overflow: auto containers.
   When a DFormLoader dialog overlay is present inside the body, temporarily
   disable the scroll container so position: fixed works relative to the viewport.
   :has() is supported in iOS Safari 15.4+ (March 2022). */
.slm-mobile-body:has(.slm-dform-overlay--fixed) {
    overflow: visible !important;
}

/* --- Mobile button bar border (FieldsMenuV2 rendered directly in layout) --- */

.slm-mobile-layout > .slm-fields-menu-v2 {
    border-bottom: 1px solid var(--v2-border, #ddd);
    padding: 2px 4px;
}

/* --- Drawer (slide-in overlay from left) --- */

.slm-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
}

.slm-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--v2-panel-bg, #fff);
    z-index: 201;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}

.slm-mobile-drawer__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--v2-border, #ddd);
}

.slm-mobile-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Mobile StatusBar + Footer (compact, no scroll needed) --- */

.slm-mobile-layout .SLM-statusbar {
    flex: 0 0 auto;
    font-size: 0.6rem;
    gap: 6px !important;
    padding: 2px 8px !important;
    border-top: 1px solid var(--v2-border, #ddd);
}

.slm-mobile-layout .SLM-statusbar strong {
    font-weight: 600;
}

.slm-mobile-layout .SLM-footer {
    flex: 0 0 auto;
    padding: 2px 8px !important;
    font-size: 0.6rem;
}

/* --- Mobile media query overrides for shared components --- */

@media (max-width: 639px) {
    /* Touch targets: minimum 44px on interactive elements */
    .slm-field-wrapper input,
    .slm-field-wrapper select,
    .slm-field-wrapper textarea,
    .slm-field-btn {
        min-height: 44px;
    }

    /* Full-width fields */
    .slm-field-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* DGrid tables: horizontal scroll */
    .slm-dgrid-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Home page panels: reorder and stack single-column */
    .home-panel-center { order: 1; flex: 1 1 100% !important; }
    .home-panel-workflow { order: 2; flex: 1 1 100% !important; }
    .home-panel-events { order: 3; flex: 1 1 100% !important; }
}

/* --- AccountRegisterPage mobile overrides --- */

.gl-reg--mobile {
    position: relative;
    inset: unset;
    z-index: auto;
    flex-direction: column;
    height: 100%;
}

.gl-reg__mobile-summary {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gl-reg__mobile-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gl-reg__mobile-summary-header h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gl-reg__mobile-card {
    border: 1px solid var(--v2-border, #ddd);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    background: var(--v2-panel-bg, #fff);
}

.gl-reg__mobile-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--v2-text, #222);
}

.gl-reg__mobile-card-inst {
    font-size: 0.72rem;
    color: var(--v2-text-muted, #888);
    margin-bottom: 0.3rem;
}

.gl-reg__mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.15rem 0;
}

.gl-reg__mobile-card-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--v2-label-color, var(--v2-text-muted, #888));
}

.gl-reg__mobile-card-value {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--slm-font-mono, 'Cascadia Code', 'Consolas', monospace);
    color: var(--v2-text, #222);
}

.gl-reg__mobile-card-value--primary {
    font-weight: 700;
    font-size: 0.95rem;
}

/* ==========================================================================
   DFormLoader mobile overrides
   Makes the DForm dialog full-screen, removes group chrome, and forces
   field wrappers to full-width (except checkbox and fixed-width columns).
   Workstation layout is completely unaffected.
   ========================================================================== */

@media (max-width: 639px) {
    /* --- Dialog: full-screen on mobile --- */
    .slm-dform-dialog--fixed {
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 8px !important;
    }

    /* --- Groups: remove border/padding/radius, keep bottom margin --- */
    .slm-dform-group {
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- Field wrappers: full-width by default --- */
    .slm-dform-field-wrap {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- Fixed-width columns: respect their defined width --- */
    .slm-dform-field-wrap--fixed {
        flex: 0 1 auto !important;
        width: auto !important;
    }

    /* --- Checkbox: shrink-wrap, not full-width --- */
    .slm-dform-field-wrap--checkbox {
        flex: 0 1 auto !important;
        width: fit-content !important;
    }
}

/* ==========================================================================
   Calendar -- mobile overrides
   Switches month/week from 7-column grids to single-column vertical stacks.
   Hides out-of-month padding days. Compacts day cells for touch.
   ========================================================================== */

@media (max-width: 639px) {

    /* --- Header: outer bar wraps its child group divs --- */
    .slm-cal-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .slm-cal-header__spacer {
        display: none;
    }

    /* --- Title bar: wrap and allow date picker to shrink --- */
    .slm-cal-month-label {
        flex-wrap: wrap !important;
    }

    /* --- Principal info: hide verbose text on mobile --- */
    .slm-cal-header + div > div[style*="opacity:0.8"] {
        display: none;
    }

    /* --- Month grid: single column instead of 7 --- */
    .slm-cal-monthgrid {
        border-radius: 4px;
    }

    .slm-cal-monthgrid__grid {
        display: flex;
        flex-direction: column;
    }

    .slm-cal-monthgrid__week {
        display: flex;
        flex-direction: column;
    }

    /* --- Hide out-of-month days entirely --- */
    .slm-cal-day--out {
        display: none !important;
    }

    /* --- Day cell: compact full-width card --- */
    .slm-cal-day {
        min-height: 0;
        padding: 6px 10px;
        border-right: none;
    }

    /* --- Day header: inline date + DOW on one line --- */
    .slm-cal-day__head {
        margin-bottom: 4px;
        min-height: 32px;
    }

    .slm-cal-day__num {
        font-size: 0.95rem;
    }

    .slm-cal-day__dow {
        font-size: 0.75rem;
    }

    /* --- Empty day placeholder: minimal height --- */
    .slm-cal-day__empty {
        display: none;
    }

    /* --- Event chips: slightly larger touch targets --- */
    .slm-cal-eventchip {
        min-height: 36px;
        padding: 4px 8px;
    }

    /* --- Footnote: smaller on mobile --- */
    .slm-cal-footnote {
        font-size: 0.7rem;
        padding: 4px 0;
    }

    /* --- Week view: hide desktop table, show mobile vertical --- */
    .slm-cal-weektable {
        display: none !important;
    }

    .slm-cal-weekmobile {
        display: flex !important;
    }
}