/* Web admin layout. Patterns shared with link pages are in /s/assets/app.css. */

.jk-app { min-height: 100vh; display: flex; flex-wrap: wrap; }
jk-sidebar { display: contents; }
.jk-side { flex: 1 1 232px; box-sizing: border-box; padding: 20px 12px; display: flex; flex-direction: column; gap: 18px; background: var(--jh-bg-elev); border-right: 1px solid var(--jh-border); }
.jk-content { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.jk-side-group { display: flex; flex-direction: column; gap: 4px; }
.jk-side-group > .jh-eyebrow { padding: 0 10px; }
.jk-side-items { display: flex; flex-wrap: wrap; gap: 2px; }
.jk-side-items a { flex: 1 1 180px; min-height: 44px; box-sizing: border-box; }
.jk-side-items .jh-grow { color: inherit; }
.jk-side-scope { padding: 0 10px; display: flex; flex-direction: column; gap: 2px; }
.jk-side-user { display: flex; align-items: center; gap: 10px; padding: 12px 10px 0; border-top: 1px solid var(--jh-border); }
.jk-side-user > .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.jk-side-out { min-height: 44px; flex: none; }

.jk-main { flex: 1; min-width: 0; box-sizing: border-box; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.jk-main--narrow { max-width: 900px; }
.jk-content:has(.jk-main--alt) { background: var(--jh-bg-alt); }
.jk-paper--page { flex: 3 1 480px; min-width: 0; max-width: 760px; padding: 40px; gap: 20px; }
.jk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.jk-head > .jk-row { align-items: flex-end; }
.jk-master { flex: 1; display: flex; flex-wrap: wrap; align-items: stretch; }
.jk-master > .list { flex: 1 1 320px; min-width: 0; border-right: 1px solid var(--jh-border); display: flex; flex-direction: column; }
.jk-master > .list > header { padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--jh-border); }
.jk-master > .detail { flex: 3 1 560px; min-width: 0; box-sizing: border-box; padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 20px; }

.jk-need { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; border-bottom: 1px solid var(--jh-border); }
.jk-need:last-child { border-bottom: 0; }
.jk-need > .kind { flex: 0 0 120px; }
.jk-need > .text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.jk-toast { position: fixed; right: 16px; bottom: 16px; z-index: 10; max-width: 340px; padding: 12px 14px; border-radius: var(--jh-radius-md); background: var(--jh-fg); color: var(--jh-bg); font-size: 13px; box-shadow: var(--jh-shadow-lg); }

/* Breakpoints follow the canvas (admin mobile 390 and widescreen 1920 frames). */
.jk-side-top { display: flex; align-items: center; gap: 10px; padding: 0 10px; color: var(--jh-accent); }
.jk-side-body { display: flex; flex-direction: column; gap: 18px; }
.jk-side-toggle { display: none; margin-left: auto; min-height: 44px; }

/* The list and detail stack below this width, so the list takes the full row. */
@media (max-width: 1111px) {
  .jk-master > .list { max-width: none; border-right: 0; border-bottom: 1px solid var(--jh-border); }
}

/* Phones: the sidebar is a top bar with a Menu button, and content goes to one column. */
@media (max-width: 760px) {
  .jk-side { flex-basis: 100%; padding: 10px 12px; gap: 8px; border-right: 0; border-bottom: 1px solid var(--jh-border); }
  .jk-side-toggle { display: inline-flex; }
  .jk-side-body { display: none; }
  .jk-side-open .jk-side-body { display: flex; padding-top: 8px; }
  .jk-main, .jk-master > .detail { padding: 16px; gap: 16px; }
  .jk-paper--page { padding: 24px 20px; }
  .jk-main [style*="grid-template-columns"], .jk-master > .detail [style*="grid-template-columns"], .jk-tiles { grid-template-columns: minmax(0, 1fr) !important; }
  .jk-main table, .jk-master > .detail table { display: block; overflow-x: auto; max-width: 100%; }
  .jk-main h1.jh-h1, .jk-master h1.jh-h1 { font-size: 28px; }
}

/* Widescreen: roomier padding, and content stops stretching. Only pages with
   the sidebar get this; standalone pages keep their own padding. */
@media (min-width: 1600px) {
  .jk-content .jk-main { width: 100%; max-width: 1560px; padding: 40px 64px; }
  .jk-content .jk-main--narrow { max-width: 1040px; }
  .jk-master > .detail { padding: 40px 64px; }
  .jk-master > .detail > * { width: 100%; max-width: 1560px; }
}

/* Page styles added during the canvas audit, one section per area. Keep each
   area's rules inside its own section. */
/* == work pages == */
/* Job photos sit three across, 96px (110px on disputes), as on the canvas. */
.jk-work-media > .jk-thumbs { grid-template-columns: repeat(3, minmax(0, 96px)); }
.jk-work-media--lg > .jk-thumbs { grid-template-columns: repeat(3, minmax(0, 110px)); }
/* Common-area job, Dispute and Reopen space sections 20px apart inline; phones go to 16px like the canvas. */
@media (max-width: 760px) { jk-requests > .jk-main, jk-dispute > .jk-main, jk-reopen > .jk-main { gap: 16px !important; } }
/* == end work pages == */
/* == company and operations pages == */
/* Grid tables as the canvas draws them: the page sets --jk-co-minw, --jk-co-cols and --jk-co-pad
   on the table. On phones every row, the header too, goes to one column (canvas 760px rule). */
.jk-co-table { min-width: var(--jk-co-minw, 0); }
.jk-co-row { display: grid; grid-template-columns: var(--jk-co-cols); gap: 12px; padding: var(--jk-co-pad, 12px 20px); min-height: var(--jk-co-min, auto); box-sizing: border-box; align-items: center; border-bottom: 1px solid var(--jh-border); font-size: 13px; }
.jk-co-head { padding: var(--jk-co-head-pad, var(--jk-co-pad, 12px 20px)); min-height: 0; font-family: var(--jh-font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--jh-fg-muted); }
.jk-co-row--bad { background: var(--jh-danger-bg); }
/* Pages the canvas spaces at 20px, back to 16px on phones like the rest. */
.jk-main.jk-co-gap20 { gap: 20px; }
@media (max-width: 760px) {
  .jk-main.jk-co-gap20 { gap: 16px; }
  .jk-co-table { min-width: 0; }
  .jk-co-row { grid-template-columns: minmax(0, 1fr); }
}
/* == end company and operations pages == */
/* == providers, reports and platform pages == */
/* Applicants: the canvas list has a 280px basis and no cap, and a tighter header. */
.jk-master.jk-applicants > .list { flex-basis: 280px; max-width: none; }
.jk-master.jk-applicants > .list > header { padding: 24px 20px 14px; gap: 4px; }
.jk-master.jk-applicants > .detail { padding-bottom: 32px; }
/* With a 280px list the two columns still sit side by side down to here. */
@media (min-width: 1073px) and (max-width: 1111px) {
  .jk-master.jk-applicants > .list { border-right: 1px solid var(--jh-border); border-bottom: 0; }
}
@media (max-width: 760px) { .jk-master.jk-applicants > .detail { padding: 16px; } }
@media (min-width: 1600px) { .jk-master.jk-applicants > .detail { padding: 40px 64px; } }
/* Owner home: the canvas main takes the shared phone and widescreen rules. */
@media (max-width: 760px) {
  jk-owner-home .jk-owner { padding: 16px; gap: 16px; }
  jk-owner-home .jk-owner h1.jh-h1 { font-size: 28px; }
  jk-owner-home .jk-owner [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1600px) { jk-owner-home .jk-owner { max-width: 1560px; padding: 40px 64px; } }
/* == end providers, reports and platform pages == */

/* Wide monitors: the whole admin scales up (canvas widescreen rule, .jh-scope zoom). Zooming
   the shell rather than <body> keeps full-height layouts at exactly one screen tall. */
@media (min-width: 1600px) {
  jk-shell { display: block; zoom: 1.125; }
  jk-shell .jk-app, jk-shell .jk-center { min-height: calc(100vh / 1.125); }
  jk-shell .jk-solo { zoom: 1; }
}
@media (min-width: 2200px) {
  jk-shell { zoom: 1.25; }
  jk-shell .jk-app, jk-shell .jk-center { min-height: calc(100vh / 1.25); }
  jk-shell .jk-solo { zoom: 1; }
}