/*
 * Controls sized for a finger.
 *
 * The pad of an adult finger covers roughly 10mm, which is about 44 CSS
 * pixels. Below that people miss — they hit the control beside the one they
 * meant, and on a header where four icons sit in a row, the miss is somebody
 * opening notifications when they wanted to clock in.
 *
 * Measured on a real phone viewport before writing any of this: the header
 * controls render at 38x38, the attendance tabs at 28px tall, the bulk-action
 * buttons at 34px. Nothing here is a guess.
 *
 * Two decisions worth stating:
 *
 * Everything is scoped to `(pointer: coarse)` or a phone-width media query, so
 * the desktop header keeps the compact proportions it was designed with. A
 * mouse is precise; it does not need 44px, and forcing it there would make the
 * desktop chrome look clumsy for no gain.
 *
 * Where a control's *visual* size is deliberate — a small pill, a text button —
 * the hit area is grown with a pseudo-element rather than by inflating the box.
 * The thing stays the size it was drawn, and the region that responds to a
 * finger is larger than the thing. That is how the platform does it, and it
 * avoids relaying out a header to fix a tap.
 */

/* ==========================================================================
   The header: four icons in a row, each one 38px
   ========================================================================== */

@media (pointer: coarse), (max-width: 991.98px) {

    /*
     * These are the icon buttons across the top — hamburger, attendance,
     * search, notifications. They are 38x38 with 8px of padding, so the icon
     * inside is around 22px. Growing the box to 44 keeps the icon where it is
     * and adds the missing 3px to each edge.
     */
    .dash-head-link,
    .cp-trigger,
    .notif-trigger,
    .dash-h-item > a,
    .dash-h-item > button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The row has to stay on one line once its children are wider. */
    .dash-h-list,
    .navbar-nav.ms-auto {
        gap: 2px;
    }
}

/* ==========================================================================
   Small pills and text buttons
   ========================================================================== */

@media (pointer: coarse), (max-width: 991.98px) {

    /*
     * The month tabs on the dashboard are 28px tall and read as a segmented
     * control — making them 44px would turn a quiet row of pills into three
     * large buttons. So the pill keeps its height and takes an invisible
     * 44px-tall hit area centred on it.
     */
    .ov-att-tab,
    .bulk-bar__clear,
    .crm-pager__link,
    .row-acts button,
    .tp-menu__btn {
        position: relative;
    }

    .ov-att-tab::after,
    .bulk-bar__clear::after,
    .crm-pager__link::after,
    .row-acts button::after,
    .tp-menu__btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 44px;
        min-width: 44px;
        /* Sits above the element's own background but below its text, and
           takes the tap on the element's behalf. */
        z-index: 0;
    }

    /*
     * The pseudo-element above catches the tap, but it does not change the
     * element's own box — so a checker measuring the button still sees 28px,
     * and so does a browser deciding whether two controls overlap. For the
     * ones that sit in a row with neighbours, the box itself has to grow.
     *
     * These keep their padding and their visual weight; they just stop being
     * shorter than a fingertip.
     */
    .ov-att-tab,
    .bulk-bar__clear,
    .bulk-bar__btn,
    .btn-sm,
    .btn.btn-sm,
    .ov-act,
    .crm-pager__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* An icon-only action is square, not a strip. */
    .ov-act--icon {
        min-width: 44px;
    }
}

/* ==========================================================================
   Rows and links in lists
   ========================================================================== */

@media (pointer: coarse), (max-width: 991.98px) {

    /*
     * A sidebar link at 43px is one pixel short — not a real miss, but the
     * row is the target here and there is no reason for it to be tight.
     */
    .dash-link,
    .dash-item > a {
        min-height: 46px;
    }

    /* The star and copy icons on a client row are 24px and sit next to each
       other, which is the worst case: small *and* adjacent. */
    .client-table .row-acts button,
    .client-table td button {
        min-width: 40px;
        min-height: 40px;
    }

    .client-table .row-acts {
        gap: 4px;
    }
}

/* ==========================================================================
   Text that has to be read on a phone
   ========================================================================== */

/*
 * 10px is below what anyone reads comfortably at arm's length, and it was
 * being used for seventeen labels on every screen. 11.5px was being used for
 * table cells. On a phone these become 12 and 12.5 — still quiet, still
 * clearly secondary, but legible.
 */
/*
 * These are the exact classes measured on a phone, not a guess at what might
 * be small. `.rt` carries timestamps and amounts and appears 52 times on the
 * dashboard alone; `.k` labels every stat tile; `.d` is the comparison line
 * under each figure. All of them are secondary information, which is why they
 * were set small — but secondary is not the same as unreadable, and 10.5px on
 * a phone held at arm's length is unreadable.
 *
 * 12px is the floor. They stay quieter than the numbers above them because
 * colour and weight do that work, not size.
 */
@media (max-width: 767.98px) {
    .ov-row .rt,
    .ov-row .mt,
    .ov-stat .k,
    .ov-stat .d,
    .ov-card .k,
    .ov-card .d,
    .notif-item-time,
    .breadcrumb-item,
    .breadcrumb-item a,
    .muted-sm,
    .small,
    small,
    .text-muted {
        font-size: 12px;
    }

    /* The comparison line wraps onto two lines at this size; a little less
       leading keeps the tile the same height it was. */
    .ov-stat .d,
    .ov-card .d {
        line-height: 1.35;
    }

    .client-table tbody td,
    .client-table .muted-sm {
        font-size: 12.5px;
    }
}

/*
 * Two things stay small on purpose: the ⌘K hint is a keyboard affordance that
 * nobody reads on a phone, and the notification count is a badge whose size
 * is its shape. Growing either would make the header worse, not better.
 */

/* ==========================================================================
   The attendance pill says nothing on a phone
   ========================================================================== */

/*
 * app-shell.css hides the label under 767px, leaving a bare coloured dot in
 * the header. The dot alone carries no meaning — seen on a real phone, it is
 * a grey circle among five icons, and nobody would guess it is the difference
 * between clocked in and not.
 *
 * The word came out originally because the header was crowded. It is less
 * crowded now that the hero's duplicate bell is gone, so the state gets to say
 * what it is again. When a break is running the elapsed minutes matter more
 * than the word, so the timer keeps its place either way.
 */
@media (max-width: 767.98px) {
    .hdr-break-label {
        display: inline;
        font-size: 11.5px;
        font-weight: 650;
        /* A long status must not push the icons off the row. */
        max-width: 8ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .hdr-break .dash-head-link {
        padding-inline: 8px;
        gap: 5px;
    }

    /* On the narrowest phones only the running timer earns the room. */
    @media (max-width: 390px) {
        .hdr-break:not(.is-break) .hdr-break-label { display: none; }
    }
}

/* ==========================================================================
   The consent banner
   ========================================================================== */

/*
 * On a phone the banner covers the login form, including the submit button —
 * verified by a browser that could not click through it. Nobody signing in on
 * a phone can get past it without dismissing it first, and it is the first
 * thing they meet.
 *
 * Keeping it, but as a bar at the bottom that leaves the form reachable.
 */
/*
 * The banner is `#cm.cloud`, positioned by the consent library as a centred
 * card. On a 390px phone it lands at 546-828 — directly over the login form's
 * submit button at 560-608. Verified with elementFromPoint: the element on
 * top of the button is the banner's title, so a tap on "Sign in" hits the
 * consent notice instead.
 *
 * Anchoring it to the bottom of the screen keeps the notice — it is still the
 * first thing anyone sees and still has to be answered — while leaving the
 * form it sits in front of usable.
 */
@media (max-width: 767.98px) {
    #cm.cloud,
    #cm {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        /*
         * Anchoring it to the bottom was not enough on its own: the card is
         * 260px tall, so it still reached up over the submit button at 560.
         * A consent notice is a sentence and two buttons — it does not need a
         * third of the screen, and on a phone that third is the third the
         * form is using.
         */
        max-height: 34vh !important;
        overflow-y: auto;
        padding: 12px 16px !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
    }

    #cm #c-inr,
    #cm #c-inr-i { padding: 0 !important; }

    #cm #c-ttl {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    #cm #c-txt {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        /* The long explanation is the part that made it tall. Two lines is
           enough to say what it is; the rest is a link away. */
        max-height: 3em;
        overflow: hidden;
    }

    #cm #c-bns {
        display: flex !important;
        gap: 8px;
        margin-top: 10px !important;
    }

    #cm #c-bns button { flex: 1; min-height: 44px; }
}

/* ==========================================================================
   A shift somebody closed by hand
   ==========================================================================

   When the power went out and everyone left without punching, fifteen shifts
   had to be closed from the admin side. The clock-out on those rows is real,
   but it was typed rather than punched — and with nothing on screen to say
   so, the row is indistinguishable from a normal end of shift. Nobody
   reading it later could tell why fifteen people all finished at 1:00 AM.

   The badge says the row was touched; the line beneath says why. Quiet
   enough not to read as an error, plain enough not to be missed. */

.at-closed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    background: var(--ds-warn-soft, #FFF4E0);
    color: var(--ds-warn, #875400);
    white-space: nowrap;
}

.at-closed i { font-size: 12px; }

.at-closed-why {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--ds-warn, #C77700);
    border-radius: 0 6px 6px 0;
    background: var(--ds-warn-soft, #FFF4E0);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ds-ink-2, #3D4759);
}

.at-closed-why i {
    flex: none;
    margin-top: 1px;
    color: var(--ds-warn, #C77700);
}

:root[data-theme="dark"] .at-closed,
:root[data-theme="dark"] .at-closed-why {
    background: var(--ds-warn-soft);
    color: var(--ds-ink-2);
}

@media (max-width: 575.98px) {
    .at-closed { font-size: 11px; padding: 2px 6px; }
    .at-closed-why { font-size: 12px; padding: 7px 10px; }
}