/* ============================================================================
   JAT application shell — vertical sidebar, from the client's Figma redesign.

   Scoped entirely under .jat-shell so it cannot leak into the ~98 pages still
   rendering the legacy horizontal navbar. Values come from
   css/jat-figma-tokens.css; nothing here hardcodes a colour or a size that the
   token sheet already names.

   Requires: css/jat-figma-tokens.css (loaded before this in styles.view.php).
   ============================================================================ */

.jat-shell {
    display: flex;
    min-height: 100vh;
    background: var(--jat-bg);
    font-family: var(--jat-font);
    color: var(--jat-black);
    font-size: var(--jat-fs-body);
    /* Body copy is 1.5x its size throughout the guide (§03 Text Hierarchy). */
    line-height: var(--jat-lh-body);
}

/* --- Sidebar ------------------------------------------------------------- */
.jat-sidebar {
    width: calc(var(--jat-sidebar-w) + var(--jat-sidebar-pad) * 2);
    flex: 0 0 auto;
    background: var(--jat-white);
    padding: var(--jat-sidebar-pad);
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-right: 1px solid #ececed;
}

.jat-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jat-brand img { height: 46px; width: auto; }
.jat-brand-toggle {
    background: none; border: 0; padding: 4px;
    color: var(--jat-gray); font-size: 22px; cursor: pointer; line-height: 1;
}

.jat-nav-group + .jat-nav-group { margin-top: 8px; }
.jat-nav-label {
    color: var(--jat-gray);
    font-size: var(--jat-fs-label);
    letter-spacing: var(--jat-label-tracking);
    font-weight: 500;
    text-transform: uppercase;
    padding: 12px 0;
    margin: 0;
}

.jat-nav-item {
    display: flex;
    align-items: center;
    gap: var(--jat-nav-gap);
    padding: var(--jat-nav-pad-y) var(--jat-nav-pad-x);
    border-radius: var(--jat-radius);
    font-size: var(--jat-fs-nav);
    font-weight: 500;
    color: var(--jat-black);
    text-decoration: none;
    border: 1px solid transparent;
}
.jat-nav-item .ti { font-size: var(--jat-icon); flex: 0 0 auto; }
.jat-nav-item:hover { background: #f2f2f3; color: var(--jat-black); text-decoration: none; }
.jat-nav-item.is-active,
.jat-nav-item.is-active:hover {
    background: var(--jat-black);
    border-color: var(--jat-gray);
    color: var(--jat-white);
}
/* Collapsible group (the admin sidebar's Master Data list).

   Rendered as a <button> so it is reachable and operable from the keyboard for
   free; these resets stop the UA button styling from showing through. The list it
   controls is toggled with [hidden] rather than display, so a closed group is
   also out of the accessibility tree. */
.jat-nav-toggle {
    width: 100%;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.jat-nav-caret {
    margin-left: auto;
    font-size: 16px !important;
    transition: transform .15s ease;
}
.jat-nav-toggle.is-open .jat-nav-caret { transform: rotate(180deg); }

.jat-nav-sub {
    display: flex;
    flex-direction: column;
    /* Aligns the child labels under the parent's label rather than its icon. */
    margin-left: calc(var(--jat-nav-pad-x) + var(--jat-icon) / 2);
    padding-left: calc(var(--jat-nav-gap) / 2);
    border-left: 1px solid #ececed;
}
.jat-nav-sub .jat-nav-item {
    font-size: var(--jat-fs-body);
    padding-top: 10px;
    padding-bottom: 10px;
}
.jat-nav-sub .jat-nav-item .ti { font-size: 20px; }

/* Survey-closed lock: visible but inert, matching the legacy navbar's behaviour. */
.jat-nav-item.is-locked {
    color: var(--jat-gray);
    pointer-events: none;
    cursor: default;
}

/* --- Main column --------------------------------------------------------- */
.jat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.jat-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 32px;
    flex-wrap: wrap;
}
.jat-page-title { font-size: var(--jat-fs-page-title); font-weight: 700; margin: 0; line-height: var(--jat-lh-heading); }

.jat-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.jat-user-name { white-space: nowrap; }
.jat-user-name b { font-weight: 700; }

.jat-role-pill {
    font-size: 13px; font-weight: 600; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px;
    background: var(--jat-role-super-bg); color: var(--jat-role-super-fg);
}
.jat-role-pill.is-client { background: var(--jat-role-client-bg); color: var(--jat-role-client-fg); }

/* Style guide §07 Components, Avatar (376:18842): a mint circle carrying either
   a picture, an initial, or an icon — all in white.

   White on mint is 2.11:1, the same measurement that made the edit CHIP take a
   dark glyph. It is kept white here because this avatar is decorative: the name
   it belongs to is spelled out immediately to its left, so the glyph is not the
   only thing conveying the information and 1.4.11 does not apply. */
.jat-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--jat-mint); color: var(--jat-white);
    display: inline-grid; place-items: center; font-size: 22px;
    font-weight: 600;
}
/* Client logo variant: contain (not cover) so a wide wordmark is not cropped. */
.jat-avatar.has-logo { background: var(--jat-white); overflow: hidden; }
.jat-avatar.has-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    padding: 3px;
    box-sizing: border-box;
}

.jat-content { padding: 0 32px 48px; flex: 1 1 auto; }

/* The admin theme still pins its footer with `position: absolute; bottom: 0`,
   which is survivable in the legacy full-width layout but floats it over the
   table once the footer sits inside the shell's flex column. The client copy of
   main.css was switched to position:relative in an earlier pass; correct it here
   instead of editing admin/css/main.css, which 119 unconverted pages still use. */
.jat-shell #footer { position: relative; margin-top: 0; }

/* The survey/report tree legend is pinned with `position: absolute; bottom: 37px;
   left: 0; width: 100%`, measured against the old full-width page. Inside the
   shell that anchors it to the viewport, where it lies across the sidebar. It is
   emitted just before the footer, so putting it back in flow lands it exactly
   where it belongs — under the tree it explains. */
.jat-shell .main_suggestion {
    position: relative;
    bottom: auto;
    margin-top: 24px;
    padding: 0 4px;
    border-radius: var(--jat-radius);
}
.jat-shell .main_suggestion::after { content: ""; display: block; clear: both; }

/* --- Surfaces used by converted page bodies ------------------------------ */
.jat-card {
    background: var(--jat-white);
    border-radius: var(--jat-radius-lg);
    box-shadow: var(--jat-shadow);
    margin-bottom: var(--jat-card-gap);
}
.jat-card > .jat-card-head {
    display: flex; align-items: center; gap: 10px;
    padding: var(--jat-card-pad);
    font-size: var(--jat-fs-card-title); font-weight: 700;
    border-bottom: 1px solid #ececed;
}
.jat-card > .jat-card-body { padding: var(--jat-card-pad); }

/* ----------------------------------------------------------------------------
   Bridge for legacy page bodies.

   The converted pages still emit .widget / .head / .tableStatic markup from the
   original theme. Rather than rewriting eleven page bodies up front, give those
   structures the new card treatment so the shell swap alone already looks right.
   Scoped under .jat-shell so unconverted pages are untouched.
   ---------------------------------------------------------------------------- */
.jat-shell fieldset.fluid .widget {
    background: var(--jat-white);
    border: 0;
    border-radius: var(--jat-radius-lg);
    box-shadow: var(--jat-shadow);
    margin-bottom: var(--jat-card-gap);
}
/* Card header — the design's "Filter" / "Client Surveys" bar: white, bold 20px,
   generous padding, one hairline beneath.

   ⚠️ THIS WAS SCOPED `.widget > .head` AND THEREFORE NEVER APPLIED. The real
   markup nests the header at `.widget > form > fieldset.search > .head`, so what
   actually rendered was the legacy strip — main.css:1666 `.head { background:
   #fafafa; border-top/bottom: 1px solid #d5d5d5 }` with `.widget .head h5 {
   font-weight: normal; float: left }` — a grey band with small grey text. Match
   it as a DESCENDANT.

   The accordion widgets on index.php give every collapsible panel its own
   `.head`, so they are excluded; otherwise each panel of the Getting Started
   guide would turn into a card header. The :not() chain also lifts specificity
   above the legacy `.widget .head h5`, which would otherwise tie and win on
   order in some sheets. */
.jat-shell .widget:not(.acc_que):not(.accordian):not(.acc_branch_cmp) .head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px var(--jat-card-pad);
    min-height: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid #ececed;
}
.jat-shell .widget:not(.acc_que):not(.accordian):not(.acc_branch_cmp) .head h5,
.jat-shell .widget:not(.acc_que):not(.accordian):not(.acc_branch_cmp) .head .iList {
    font-size: var(--jat-fs-card-title);
    font-weight: 700;
    color: var(--jat-black);
    line-height: var(--jat-lh-heading);
    margin: 0;
    padding: 0;
    float: none;
    background-image: none;
}
/* The design puts the header's action (a collapse chevron; here the Export
   button) at the far right of that bar. */
.jat-shell .widget .head .submitForm { margin-left: auto; float: none; }

/* --- Responsive ----------------------------------------------------------
   Below 1100px the sidebar becomes a horizontal strip above the content rather
   than eating half the viewport. */
@media (max-width: 1100px) {
    .jat-shell { flex-direction: column; }
    .jat-sidebar {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #ececed;
        padding: 16px 20px;
    }
    .jat-sidebar nav { display: flex; flex-wrap: wrap; gap: 6px; }
    .jat-nav-group { display: contents; }
    .jat-nav-label { display: none; }
    .jat-nav-item { padding: 12px 14px; font-size: var(--jat-fs-body); }
    /* The group items become a wrapping row, so a sub-list has to claim its own
       line instead of being stretched by the row's flex sizing. */
    .jat-nav-toggle { width: auto; }
    .jat-nav-caret { margin-left: 4px; }
    .jat-nav-sub {
        flex: 0 0 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    .jat-topbar, .jat-content { padding-left: 20px; padding-right: 20px; }
}

/* Collapsed state — toggled by the button in the brand row, remembered in
   localStorage so it survives navigation. */
@media (min-width: 1101px) {
    .jat-shell.is-collapsed .jat-sidebar { width: auto; }
    .jat-shell.is-collapsed .jat-nav-label,
    .jat-shell.is-collapsed .jat-nav-item span,
    .jat-shell.is-collapsed .jat-brand img { display: none; }
    .jat-shell.is-collapsed .jat-nav-item { justify-content: center; }
    /* Icons only: a caret has nothing left to disclose, and an indented sub-list
       has no room. The group reopens with the sidebar. */
    .jat-shell.is-collapsed .jat-nav-caret,
    .jat-shell.is-collapsed .jat-nav-sub { display: none; }
}

@media print {
    .jat-sidebar, .jat-topbar { display: none !important; }
    .jat-content { padding: 0 !important; }
}