@media (max-width: 767px) {
    .workspace, .main-content, .auth-shell, .panel, .card, form { min-width: 0; }
    .main-content, .auth-shell { max-width: 100%; }
    .main-content :is(input, select, textarea), .auth-shell :is(input, select, textarea) {
        max-width: 100%;
        box-sizing: border-box;
    }
    .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-content :is(.row, .d-flex) > *, .auth-shell :is(.row, .d-flex) > * { min-width: 0; }
    input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

.mobile-datetime-open { overflow: hidden; }
.mobile-datetime-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
    background: rgb(15 23 42 / 55%);
}
.mobile-datetime-sheet {
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 10px 10px;
    background: #f7f8fb;
    color: #17243a;
    box-shadow: 0 12px 40px rgb(0 0 0 / 22%);
    box-sizing: border-box;
}
.mobile-datetime-sheet:focus { outline: none; }
.mobile-datetime-sheet h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.35; text-align: center; }
.mobile-datetime-fields { display: grid; gap: 12px; }
.mobile-wheel-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    padding: 6px;
    border-radius: 15px;
    background: #fff;
}
.mobile-month-wheels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-time-wheels.has-seconds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mobile-wheel-column { min-width: 0; }
.mobile-wheel-label { display: block; margin: 3px 0 7px; color: #667085; font-size: 12px; font-weight: 600; text-align: center; }
.mobile-wheel {
    height: 220px;
    padding: 88px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fff 0%, #fff9 30%, #f0f4fa 40%, #f0f4fa 60%, #fff9 70%, #fff 100%);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.mobile-wheel::-webkit-scrollbar { display: none; }
.mobile-wheel-option {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 2px;
    scroll-snap-align: center;
    border: 0;
    background: transparent;
    color: #667085;
    font: inherit;
    font-size: 17px;
    text-align: center;
    white-space: nowrap;
}
.mobile-wheel-option.selected { color: #17243a; font-size: 20px; font-weight: 700; }
.mobile-wheel:focus-visible { outline: 2px solid #0870ff; outline-offset: 2px; }
.mobile-datetime-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.mobile-datetime-field input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #17243a;
    font-size: 16px;
    box-sizing: border-box;
}
.mobile-datetime-error { min-height: 20px; margin: 8px 0; color: #b42318; font-size: 13px; }
.mobile-datetime-actions { display: flex; gap: 8px; }
.mobile-datetime-actions button {
    flex: 1;
    min-height: 44px;
    padding: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #17243a;
    font-size: 14px;
    font-weight: 600;
}
.mobile-datetime-actions .mobile-datetime-save { border-color: #0870ff; background: #0870ff; color: #fff; }