/* ============================================================================
   YM — Responsive layer
   ----------------------------------------------------------------------------
   The app was built at a fixed desktop width: an 80px icon rail, a content area
   hard-offset by 80px, and page grids with fixed column counts. Nothing adapted
   below roughly 1280px, and the rail itself could not scroll when its items were
   taller than the viewport.

   This file is loaded LAST in the <head> of every layout, so it overrides the
   inline <style> blocks in the Blade views without editing 14k lines of markup.
   It is plain CSS served straight from /public — no build step, so deploying is
   just uploading the file.

   Breakpoints
     1280px  wide desktop  → side-by-side panels get narrower
     1024px  small desktop → two-column page layouts stack
      900px  tablet        → rail becomes a slide-out drawer, top bar appears
      640px  phone         → single column, tighter padding, full-width dialogs

   Anything using repeat(auto-fill, minmax(...)) is already fluid and is left
   alone on purpose.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0. Global guards
   Nothing may push the document sideways — a single overflowing table used to
   add a horizontal scrollbar to the whole page.
   ------------------------------------------------------------------------ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video, canvas, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Long unbroken strings (URLs, tokens, emails) must not stretch their box. */
p, span, td, th, li, h1, h2, h3, h4, h5, h6, .card-url, .ws-item-name {
    overflow-wrap: break-word;
}

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and is the usual cause of a blown-out layout.
   Deliberately scoped to grid/row children only — a blanket `.ym-main *` would
   also wipe the intentional min-widths on tables and calendars. */
[class*="-grid"] > *,
[class*="-row"] > * {
    min-width: 0;
}


/* ---------------------------------------------------------------------------
   1. The sidebar rail — scrolling
   THE BUG: .ym-sidebar is fixed top:0 bottom:0 with no overflow, and .ym-nav is
   flex:1 (i.e. flex-shrink:1). On a short screen the nav was squashed and its
   overflowing items were simply unreachable — no scrolling, on any device.

   Fix: let the nav keep its natural height (no shrinking) and let the rail
   itself scroll. Applies at every screen size, desktop included.
   ------------------------------------------------------------------------ */
.ym-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    /* Momentum scrolling on touch devices. */
    -webkit-overflow-scrolling: touch;
    /* The rail is narrow; a visible scrollbar would eat most of it. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ym-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* grow, but never shrink below the height of the items */
.ym-nav {
    flex: 1 0 auto !important;
}

/* Keep the avatar/settings cluster pinned under the nav rather than floating. */
.ym-bottom {
    margin-top: auto;
    flex-shrink: 0;
}

/* The workspace switcher must not scroll away out of reach either. */
.ym-logo {
    flex-shrink: 0;
}


/* ---------------------------------------------------------------------------
   2. Mobile chrome — top bar, drawer scrim
   Hidden on desktop; the layouts always render the markup so no page needs to
   know about it.
   ------------------------------------------------------------------------ */
.ym-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 60;
}

.ym-burger {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    background: #F3F4F6;
    border-radius: 11px;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ym-burger:active {
    background: #E5E7EB;
}

.ym-topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ym-topbar-ws {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1D4ED8, #3B82F6);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    letter-spacing: .3px;
}

.ym-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 49;
    opacity: 0;
    transition: opacity .22s ease;
}

body.ym-nav-open .ym-scrim {
    opacity: 1;
}


/* ---------------------------------------------------------------------------
   3. ≤1280px — wide desktop
   Side panels that were fixed at 320–380px get proportional instead, so the
   main column keeps a usable width.
   ------------------------------------------------------------------------ */
@media (max-width: 1280px) {
    .fn-grid2 {
        grid-template-columns: minmax(0, 1fr) 280px !important;
    }

    .is-cols {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }

    .ep-two-col {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }
}


/* ---------------------------------------------------------------------------
   4. ≤1024px — small desktop / landscape tablet
   Two-column page layouts stack; four-across card grids drop to two.
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .fn-grid2,
    .is-cols,
    .ep-two-col,
    .st-two-col {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .clients-grid,
    .emp-grid,
    .ep-stats,
    .am-stats,
    .emp-row3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Page gutters tighten before the drawer kicks in. */
    .cl-page, .clients-page, .di-page, .emp-page, .ep-page, .fn-page,
    .if-page, .is-page, .pi-page, .st-page, .vt-page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* ---------------------------------------------------------------------------
   5. ≤900px — tablet / phone: the rail becomes a drawer
   The 80px icon rail is poor on touch, so below this width it slides in as a
   proper 252px drawer with full-width, icon+label rows.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .ym-topbar {
        display: flex;
    }

    .ym-scrim {
        display: block;
        pointer-events: none;
    }

    body.ym-nav-open .ym-scrim {
        pointer-events: auto;
    }

    /* Off-canvas until opened. */
    .ym-sidebar {
        width: 252px;
        align-items: stretch;
        padding: 14px 12px;
        background: #fff;
        box-shadow: 0 0 40px rgba(0, 0, 0, .16);
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4, 0, .2, 1);
        z-index: 70;
    }

    body.ym-nav-open .ym-sidebar {
        transform: translateX(0);
    }

    /* Content reclaims the full width and clears the fixed top bar. */
    .ym-main {
        margin-left: 0 !important;
        padding-top: 56px;
    }

    /* Nav rows: icon beside label, comfortable tap targets. */
    .ym-nav {
        align-items: stretch;
        gap: 2px;
        padding: 0;
    }

    .nav-item {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 5px 8px;
        border-radius: 12px;
        min-height: 48px;
    }

    .nav-item.active {
        background: #EEF2FF;
    }

    .nav-box {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .nav-label {
        font-size: 13.5px;
        font-weight: 600;
        text-align: left;
        line-height: 1.2;
    }

    /* Header cluster inside the drawer. */
    .ym-logo {
        width: 100%;
        height: 46px;
        border-radius: 12px;
        justify-content: flex-start;
        padding: 0 14px;
        margin-bottom: 14px;
    }

    .ym-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 6px 4px;
        margin-top: 12px;
        border-top: 1px solid #F1F5F9;
    }

    .ym-bottom .nav-item {
        flex: 1;
    }

    /* The workspace panel is anchored to the rail's old x-offset; inside the
       drawer it must sit under the switcher instead of off-screen. */
    .ws-panel {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 66px;
        width: auto;
    }

    /* Calendars keep seven columns — they scroll sideways instead of wrapping,
       which would destroy the week structure. */
    .pl-month-hdr,
    .pl-month-week,
    .tm-cal-grid {
        min-width: 640px;
    }

    .pl-month, .pl-cal, .tm-cal, [class*="cal-wrap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Wide data tables scroll within their card rather than stretching it.
       Scoped to .ym-main so the standalone PDF/print views are untouched. */
    .ym-main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------------------------
   6. ≤640px — phone
   Everything is one column; dialogs become sheets.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
    .clients-grid,
    .emp-grid,
    .ep-stats,
    .am-stats,
    .fn-stats,
    .emp-row2,
    .emp-row3,
    .emp-stats,
    .fg,
    .field-group,
    .if-row,
    .is-row2,
    .st-two-col,
    .vm-two,
    .am-mrow,
    .agent-suggestions,
    .auth-two,
    .st-biz-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Income/expense style toggles stay side by side — stacking them reads as
       two separate buttons rather than one control. */
    .fn-type-toggle {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cl-page, .clients-page, .di-page, .emp-page, .ep-page, .fn-page,
    .if-page, .is-page, .pi-page, .st-page, .vt-page {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 18px !important;
    }

    /* Page headers that were one row become two. */
    .pi-header,
    .emp-topbar,
    .fn-topbar,
    [class*="-topbar"],
    [class*="-header"] {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Dialogs: fit the screen instead of overflowing it.
       Only the maximums are forced — setting an explicit width would break
       overlays that also hold absolutely-positioned children like a close X. */
    .np-box,
    .emp-modal,
    .modal-sm,
    .modal-overlay > *,
    .np-overlay > *,
    .emp-modal-overlay > *,
    [class*="-overlay"] > * {
        max-width: calc(100vw - 24px) !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }

    /* Named dialog shells do get full width — they were pinned to 490–520px. */
    .np-box,
    .emp-modal,
    .modal-sm {
        width: 100% !important;
    }

    [class*="-overlay"] {
        padding: 12px !important;
        align-items: flex-end !important;
    }

    /* Tab strips scroll horizontally rather than wrapping into a tall block. */
    .fn-tab-bar,
    [class*="-tab-bar"],
    [class*="-tabs"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fn-tab-bar::-webkit-scrollbar,
    [class*="-tab-bar"]::-webkit-scrollbar,
    [class*="-tabs"]::-webkit-scrollbar {
        display: none;
    }

    .fn-tab,
    [class*="-tab"] {
        flex-shrink: 0;
    }

    /* 16px prevents iOS Safari zooming the page when a field is focused. */
    input, select, textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* Cards and panels that were pinned to a pixel width. */
    .fn-card,
    [class*="-card"],
    [class*="-panel"],
    [class*="-box"] {
        max-width: 100%;
    }

    /* Headline sizes step down so titles don't wrap awkwardly. */
    .fn-h1 { font-size: 19px !important; }
    .emp-title, .pi-title { font-size: 17px !important; }
}


/* ---------------------------------------------------------------------------
   7. ≤380px — very small phones
   ------------------------------------------------------------------------ */
@media (max-width: 380px) {
    .cl-page, .clients-page, .di-page, .emp-page, .ep-page, .fn-page,
    .if-page, .is-page, .pi-page, .st-page, .vt-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ym-sidebar {
        width: 88vw;
    }
}


/* ---------------------------------------------------------------------------
   8. Landscape phones
   Very little vertical room — the drawer especially must stay scrollable.
   ------------------------------------------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
    .ym-sidebar {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-item {
        min-height: 40px;
    }

    [class*="-overlay"] > * {
        max-height: 92vh !important;
    }
}


/* ---------------------------------------------------------------------------
   8.5  Page-level layouts — the fixed side panes
   ----------------------------------------------------------------------------
   Several pages are a flex ROW holding a pinned-width pane next to a fluid one:

     agent            .agent-wrap    → .agent-convos     290px
     employee msgs    .ep-msg-wrap   → .ep-msg-sidebar   280px
     planner (both)   .pl-body       → .pl-sidebar       268px
     client detail    .cl-layout     → .cl-left          252px
     employee detail  .emp-layout    → .emp-left         260px
     task modal       .tm-body       → .tm-right         220–240px
     finance drawer   .fn-drawer                         400px

   Each pane also sets min-width equal to its width, so BOTH have to be undone
   or the pane refuses to shrink and squeezes its neighbour to nothing — that is
   what reduced the Agent chat to one letter per line.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {

    /* Full-height pages sit below the 56px top bar; plain 100vh overflows it. */
    .agent-wrap,
    .ep-msg-wrap,
    .kb-page,
    .de-page {
        height: calc(100vh - 56px) !important;
    }

    /* — Chat-style pages: list on top, conversation fills the rest — */
    .agent-wrap,
    .ep-msg-wrap {
        flex-direction: column;
    }

    .agent-convos,
    .ep-msg-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 34vh;
        flex-shrink: 0;
        overflow-y: auto;
        border-right: none !important;
        border-bottom: 1px solid #E5E7EB;
    }

    .agent-chat {
        flex: 1;
        min-height: 0;
    }

    /* — Planner: let the page scroll instead of locking to the viewport — */
    .pl-page {
        height: auto !important;
        min-height: calc(100vh - 56px);
        overflow: visible !important;
    }

    .pl-body {
        flex-direction: column;
        overflow: visible !important;
    }

    .pl-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 42vh;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    /* — Detail pages: the sticky profile rail becomes a normal top block — */
    .cl-layout,
    .emp-layout {
        flex-direction: column;
    }

    .cl-left,
    .emp-left {
        width: 100% !important;
        min-width: 0 !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    /* — Task modal: the meta column drops under the description — */
    .tm-body {
        flex-direction: column;
        overflow-y: auto !important;
    }

    .tm-right {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* — Finance slide-over covers the screen rather than 400px of it — */
    .fn-drawer {
        width: min(400px, 100vw) !important;
    }

    /* Chat gutters: 24px each side is a lot of a phone's width. */
    .agent-messages-inner,
    .agent-composer-inner,
    .emp-panel-msgs-inner,
    .agent-welcome {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 640px) {
    /* The suggestion tiles on the Agent welcome screen. */
    .agent-suggestions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Full-bleed drawer on a phone. */
    .fn-drawer {
        width: 100vw !important;
    }

    /* Two-pane pickers inside dialogs. */
    .modal-left,
    .modal-right {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Search fields pinned to a pixel width. */
    .if-search input,
    input[type="search"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Chat bubbles must be able to wrap mid-word (long URLs, no spaces). */
    .msg, .emp-msg, .msg-body, .emp-msg-body {
        overflow-wrap: anywhere;
    }

    /* Kanban columns keep their own width and the board scrolls sideways —
       82vw leaves the next column peeking, which signals it is scrollable. */
    .kb-col {
        width: 82vw !important;
        min-width: 82vw !important;
        max-width: 300px;
    }

    /* Toolbar search that declared `flex: 1 1 260px` — the 260px basis plus a
       260px floor made it overflow narrow toolbars. */
    .vt-search {
        min-width: 0 !important;
        flex-basis: 100% !important;
    }

    /* Absolutely-positioned dropdown panels must stay inside the viewport. */
    .de-link-panel,
    [class*="-panel"][style*="absolute"],
    .ctx-menu,
    .pi-ctx {
        max-width: calc(100vw - 32px) !important;
    }

    /* Fluid auto-fill grids whose minimum track (240–290px) can still exceed a
       small phone's content box — pin them to one column so nothing overflows. */
    .fn-wallet-grid,
    .fn-debt-grid,
    .fn-bud-grid,
    .if-grid,
    .di-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* ---------------------------------------------------------------------------
   9. Accessibility / print
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .ym-sidebar,
    .ym-scrim {
        transition: none !important;
    }
}

@media print {
    .ym-sidebar,
    .ym-topbar,
    .ym-scrim {
        display: none !important;
    }

    .ym-main {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}
