/* ============================================================================================
   mobile.css  (S182)
   --------------------------------------------------------------------------------------------
   Touch-sizing overrides for phone widths. LOADED LAST, ON PURPOSE.

   Every stylesheet in this app loads on every page, so the cascade is decided by load order far
   more often than by specificity. layout.css is third of twenty; components.css sits right after
   it and re-declares the control primitives, and sixteen page sheets follow that. A mobile rule
   written in layout.css loses to components.css at equal specificity - which is exactly what
   happened first time round: `.cc-form-control { font-size: 16px }` in a media query was
   silently overridden by `.cc-form-control { font-size: var(--cc-text-sm) }` one file later, and
   the select on the Patients page stayed at 10.5px.

   Winning by load order rather than by piling on specificity keeps these rules overridable by a
   page sheet that genuinely needs to, and avoids the !important arms race that class collisions
   caused in S174. New mobile-only rules belong in this file. Keep it phone-scoped: everything
   here sits inside a max-width query so desktop is untouched.
   ============================================================================================ */

@media (max-width: 768px) {

    /* --- Touch targets ---------------------------------------------------------------------
       30px is a mouse dimension. On glass it is a coin toss, and the person tapping is a doctor
       holding a phone in one hand between rooms. 44px is Apple's documented minimum.
       Height and hit area only - colour, weight and radius stay exactly as designed. */
    .cc-btn,
    .cc-btn-sm,
    .cc-btn-primary,
    .cc-btn-secondary {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .cc-input,
    .cc-form-control,
    .cc-select,
    .cc-textarea,
    select.cc-form-control {
        min-height: 44px;
    }

    /* The sidebar is the whole navigation on a phone - it is the off-canvas drawer, and these
       are the only way to get anywhere. They were the smallest targets on the page. */
    .cc-nav-item,
    .cc-nav-section-toggle {
        min-height: 44px;
    }

    /* 20px of topbar padding either side is 40px of a 390px screen. Four 44px touch targets
       plus a breadcrumb do not fit alongside that, and the targets matter more than the gutter. */
    .cc-topbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cc-topbar-right {
        gap: 4px;
    }

    /* Topbar controls are icon-only, so they have no text to grow them into a hittable size. */
    .cc-sidebar-toggle,
    .cc-notification-bell,
    .cc-support-trigger,
    .cc-user-menu-trigger,
    .cc-practice-signout,
    .cc-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* --- iOS zoom ------------------------------------------------------------------------
       Safari zooms the entire page in when a focused input's text is under 16px, and does not
       zoom back out afterwards. One sub-16px field is enough to leave a provider pinching their
       way back to the form after every tap. 16px is a hard threshold, not a taste preference -
       15.5px still triggers it. */
    .cc-input,
    .cc-form-control,
    .cc-select,
    .cc-textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px;
    }

    /* --- Row actions -----------------------------------------------------------------------
       Buttons inside table rows cannot take 44px of height without wrecking the row rhythm in a
       container that is already scrolling horizontally, so they get the width instead. */
    .cc-table .cc-btn,
    .cc-table .cc-btn-sm {
        min-height: 36px;
        min-width: 44px;
    }
}