/* --------------------------------------------------------------------------
   1. PREVENT iOS FONT INFLATION
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* --------------------------------------------------------------------------
   2. PREVENT LAYOUT BLOWOUT
      Long words/URLs in table cells can push the page wider than the
      viewport on mobile. This stops that without changing desktop layout.
   -------------------------------------------------------------------------- */
td, th {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* --------------------------------------------------------------------------
   3. iOS SAFE-AREA (notch / home indicator)
   -------------------------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}


/* --------------------------------------------------------------------------
   4. NAVBAR — tablet (≤ 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .navbar-brand {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #navbarSupportedContent {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Action button group: left-align under nav links, allow wrapping */
    .navbar .btn-group[role="group"] {
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 0.5rem;
        margin-left: 0 !important;
        justify-content: flex-start;
    }
}

@media (max-width: 400px) {
    .navbar-brand {
        font-size: 0.875rem;
        max-width: 50vw;
    }

    .navbar .btn-group .btn {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.8rem;
    }
}


/* --------------------------------------------------------------------------
   5. CONTAINERS
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* --------------------------------------------------------------------------
   6. TABLES — horizontal scroll
      The existing .table-responsive-xl only activates at xl breakpoint.
      These rules make ALL responsive wrappers scroll on every small screen.
   -------------------------------------------------------------------------- */
.table-responsive,
.table-responsive-xl,
.table-responsive-lg,
.table-responsive-md,
.table-responsive-sm,
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table.small,
    .table.table-sm {
        font-size: 0.78rem;
    }

    /* Allow header cells to wrap so columns don't force overflow */
    .table th {
        white-space: normal;
    }

    /* Admin / log tables: force block + scroll */
    #admin-writers,
    #log {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .table td,
    .table th {
        padding: 0.3rem 0.35rem;
        font-size: 0.75rem;
    }

    td.no-good, td.red,
    td.full-time, td.green,
    td.part-time, td.yellow {
        font-size: 0.72rem;
    }
}


/* --------------------------------------------------------------------------
   7. FILTER / DROPDOWN CONTROLS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .dropdown-menu {
        width: 100% !important;
        min-width: unset;
    }

    .multiselect-container,
    .btn-group.multiselect-btn-group {
        width: 100% !important;
    }

    .multiselect-container > .dropdown-menu {
        width: 100% !important;
    }

    #character-container,
    #log-filter-group {
        flex-wrap: wrap;
        gap: 4px;
    }
}


/* --------------------------------------------------------------------------
   8. FORMS — prevent iOS zoom on focus
      iOS zooms in whenever an input has font-size < 16px.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    input[type="number"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}

@media (max-width: 575.98px) {
    .daterangepicker.show-ranges .ranges,
    .daterangepicker.show-ranges .drp-calendar {
        float: none;
        display: block;
        width: 100%;
    }

    .multiselect-container.dropdown-menu {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* --------------------------------------------------------------------------
   9. MODALS
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg {
        margin: 0;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
    }

    .modal-content {
        border: none;
        border-radius: 0;
        min-height: 100vh;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 70vh;
    }

    #sim-modal-content {
        font-size: 0.9rem;
        line-height: 1.65;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog.modal-xl {
        max-width: 95vw;
        margin: 1rem auto;
    }
}


/* --------------------------------------------------------------------------
   10. CALENDAR
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .calendar-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.calendar {
        min-width: 340px;
        font-size: 0.65em;
    }

    td.day {
        min-height: 48px;
        max-height: 48px;
        height: 48px;
        padding: 2px;
    }

    td.day .btn {
        font-size: 0.6em;
        padding: 1px 3px;
    }

    .monthname {
        font-size: 1rem;
        padding: 4px;
    }
}


/* --------------------------------------------------------------------------
   11. TABS (Bootstrap pills / tabs)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .nav-pills,
    .nav-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }

    .nav-pills .nav-link,
    .nav-tabs .nav-link {
        font-size: 0.82rem;
        padding: 0.35rem 0.6rem;
    }
}


/* --------------------------------------------------------------------------
   12. PRINT
   -------------------------------------------------------------------------- */
@media print {
    .navbar,
    .spinner,
    #feedback-button,
    #favs-button,
    #prefs-button,
    #dark-mode-toggle,
    #login-button {
        display: none !important;
    }

    body {
        font-size: 10pt;
        color: #000;
        background: #fff;
    }

    table {
        page-break-inside: avoid;
    }
}