/* Just-Jame Studio System - css/v2-pages.css (v71)
   The team pages in the prototype's look (Home, Client feedback, All projects, Calendar, To-do, Search, client
   page, Clients overview). Scoped to .v2 / .jjs-proto so nothing else changes. */

/* ---------- shared bits the prototype has and the base css lacks ---------- */
.jjs-proto .hmeta { margin: 6px 0 2px; }
.jjs-proto .pcards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.jjs-proto .pcard .pnext { display: flex; align-items: center; gap: 6px; color: var(--ink2); }
.jjs-proto .pcard .row { gap: 6px; }
.jjs-proto .avs { display: flex; }
.jjs-proto .avs .tm-av { margin-left: -7px; border: 2px solid #fff; }
.jjs-proto .avs .tm-av:first-child { margin-left: 0; }
.jjs-proto .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.jjs-proto .inp { border: 1px solid var(--line2); border-radius: 12px; padding: 9px 14px; background: var(--surface); min-width: 0; font: inherit; color: var(--ink); }
.jjs-proto .inp:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.jjs-proto select.inp { cursor: pointer; }
.jjs-proto .note3 { font-size: 12.5px; color: var(--mute); margin-top: 8px; }
.jjs-proto .rcount { margin: 10px 0 0; }
.jjs-proto .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mute); margin: 10px 0 0; }
.jjs-proto .legend span { display: inline-flex; align-items: center; gap: 6px; }
.jjs-proto .linkbtn { cursor: pointer; color: inherit; }
.jjs-proto .btn .jjs-ico { width: 14px; height: 14px; }
.jjs-proto .pill .jjs-ico { width: 12px; height: 12px; }
.jjs-proto .seg .jjs-ico { width: 14px; height: 14px; }
.jjs-proto .seg button .c.bad { color: var(--bad); opacity: 1; }
.jjs-proto .jjs-seg-count.bad { color: var(--bad); }
.jjs-proto .li .jjs-ico { flex: none; color: var(--mute); }
.jjs-proto .sx-top .sub { margin-top: 6px; }
.jjs-proto .jjs-emptystate { border: 1px dashed var(--line2); border-radius: 14px; }

/* stage shade: light at Onboarding, black at Project Closed */
.s0 { --sb: #ecece8; } .s1 { --sb: #dcdcd6; } .s2 { --sb: #c6c6bf; } .s3 { --sb: #a9a9a2; } .s4 { --sb: #7d7d76; }
.s5 { --sb: #5a5a54; } .s6 { --sb: #3c3c38; } .s7 { --sb: #222220; } .s8 { --sb: #0b0b0b; }
.jjs-proto .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--sb, #ccc); border: 1px solid rgba(0,0,0,.18); flex: none; }
.jjs-proto .pill.stg { gap: 6px; }
.jjs-proto .stlegend .sw { width: 12px; height: 12px; }
.jjs-proto button.pill { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; }
.jjs-proto button.pill:hover { border-color: var(--ink); }

/* tables (All projects list) */
.jjs-proto .v2-tablecard { padding: 6px 10px; }
.jjs-proto .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.jjs-proto .tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.jjs-proto .tbl th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: left; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.jjs-proto .tbl td { padding: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: middle; }
.jjs-proto .tbl tr:last-child td { border-bottom: 0; }
.jjs-proto .tbl tr.click { cursor: pointer; }
.jjs-proto .tbl tr.click:hover td { background: var(--soft); }
.jjs-proto .tbl tr.click:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.jjs-proto .tbl td .pill { vertical-align: middle; }
.jjs-proto .v2-stagecell { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.jjs-proto .v2-hide { display: none; }
.jjs-proto .tbar { width: 96px; height: 6px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; position: relative; margin: 2px 0 3px; }
.jjs-proto .tbar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 999px; }
.jjs-proto .tbar.bad i { background: var(--bad); }
.jjs-proto .v2-projbar .inp { max-width: 240px; }
.jjs-proto .v2-projbar select.inp { max-width: 200px; }

/* by stage */
.jjs-proto .sboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.jjs-proto .scol { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jjs-proto .scol.empty { opacity: .6; }
.jjs-proto .schead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 2px 4px; }
.jjs-proto .schead .c { margin-left: auto; font-weight: 700; font-size: 11px; border: 1px solid var(--line2); border-radius: 999px; padding: 0 7px; }
.jjs-proto .scard { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 12px; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.jjs-proto .scard .cl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.6); }
.jjs-proto .scard b { font-size: 13px; line-height: 1.25; }
.jjs-proto .scard small { color: var(--ink2); font-size: 11.5px; }
.jjs-proto .scard .pill { align-self: flex-start; margin-top: 4px; }

/* Search */
.jjs-proto .sgroup { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.jjs-proto .sgroup:last-of-type { border-bottom: 0; }
.jjs-proto .sghead { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; flex-wrap: wrap; }
.jjs-proto .hitrow { display: flex; align-items: flex-start; gap: 8px; }
.jjs-proto .hitrow .hit { flex: 1; min-width: 0; }
.jjs-proto .hit { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 12px; font: inherit; color: inherit; cursor: pointer; }
.jjs-proto .hit:hover { background: var(--soft); }
.jjs-proto .hit b { font-size: 13.5px; overflow-wrap: anywhere; }
.jjs-proto .hit small { display: block; color: var(--mute); font-size: 12px; }
.jjs-proto .hit .hk { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-right: 8px; }
.jjs-proto .hit .hsnip { display: block; font-size: 12.5px; color: var(--ink2); margin-top: 2px; overflow-wrap: anywhere; }
.jjs-proto .hit mark { background: #ffe8a3; color: inherit; border-radius: 3px; padding: 0 1px; }
.jjs-proto .hatt { padding-top: 10px; flex: none; gap: 6px; }

/* the live dropdown under the top search */
.jjs-topsearch { position: relative; }
.jjs-topsearch .v2-kbd { font-size: 10.5px; border: 1px solid var(--line2); border-radius: 5px; padding: 1px 5px; color: var(--muted); font-family: inherit; }
.sdrop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.16); padding: 8px; max-height: 70vh; overflow: auto; color: var(--ink); font-size: 13.5px; }
.sdrop[hidden] { display: none; }
.sdall, .sditem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font: inherit; color: inherit; cursor: pointer; }
.sdall { font-weight: 700; flex-wrap: wrap; }
.sdall .pill { margin-left: auto; display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line2); white-space: nowrap; }
.sdall:hover, .sditem:hover { background: #f7f7f5; }
.sditem small { margin-left: auto; color: var(--muted); font-size: 12px; }
.sditem .cdot, .sdall .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.sditem mark { background: #ffe8a3; color: inherit; border-radius: 3px; padding: 0 1px; }
.sdh { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 8px 10px 2px; }
.sdtip { font-size: 11.5px; color: var(--faint); margin: 6px 10px 2px; }

/* client page header */
.jjs-proto .phead { padding: 24px; margin-top: 6px; }
.jjs-proto .phead .row.top { justify-content: space-between; align-items: flex-start; }
.jjs-proto .pacts { display: flex; gap: 8px; flex-wrap: wrap; }
.jjs-proto .pacts .jjs-menu summary { border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 13px; border: 1px solid var(--line2); background: var(--surface); }
.jjs-proto .v2-campaign .h2 { text-transform: uppercase; }

/* Clients overview: the "All" link in the sidebar */
.jjs-side-all { background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; letter-spacing: 0; text-transform: none; }
.jjs-side-all:hover, .jjs-side-all.on { background: #fff; color: #0b0b0b; border-color: #fff; }

/* Home */
.jjs-proto .v2-bystage { margin-bottom: 12px; }
.jjs-proto .htbar { margin: -4px 0 10px; gap: 8px; }
.jjs-proto .jjs-hometodo .jjs-tasklist.compact .jjs-task { padding: 8px 10px; }
.jjs-proto .stat.hot { box-shadow: 0 0 0 2px var(--bad); }

/* Client feedback */
.jjs-proto .v2-inbox .li .txt b { font-weight: 700; }
.jjs-proto .v2-inbox .li .pill { flex: none; }
.jjs-proto .v2-inbox .li .txt .pill { margin-left: 4px; vertical-align: 1px; }

/* Calendar: day panel beside the month on desktop, below on phone; active brand chip black */
.v2-cal .v2-calgrid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.v2-cal .v2-daypanel { margin-top: 0; }
.v2-cal .jjs-legend-item.on, .v2-cal button.jjs-legend-item.on { background: #0b0b0b; color: #fff; border-color: #0b0b0b; box-shadow: none; }
.v2-cal .jjs-legend-item.on > button { color: #fff; }
.v2-cal .jjs-legend-item.v2-onlyyou { border-color: transparent; background: none; color: var(--muted); gap: 4px; padding-left: 8px; }
.v2-cal .jjs-legend-item.v2-onlyyou .jjs-ico { width: 13px; height: 13px; }
.v2-cal .jjs-calchip .v2-lock { display: inline-flex; margin-right: 3px; vertical-align: -1px; } /* v72: private Board dates */
.v2-cal .jjs-calchip .v2-lock .jjs-ico { width: 11px; height: 11px; }
@media (max-width: 980px) { .v2-cal .v2-calgrid { grid-template-columns: minmax(0, 1fr); } }

/* To-do: quick add, one row of filters with "Whose tasks", groups */
.v2-todo .v2-todocard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.v2-todo .v2-todocard .jjs-taskadd { margin-bottom: 12px; }
.v2-todo .v2-todocard .jjs-taskadd input { border: 1px solid var(--line2); border-radius: 999px; padding: 10px 16px; }
.v2-todo .v2-todocard .jjs-taskadd .jjs-btn { border-radius: 999px; }
.v2-todo .jjs-todobar { margin-bottom: 4px; }
.v2-todo .v2-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.v2-todo .v2-who select { width: auto; padding: 6px 10px; border: 1px solid var(--line2); border-radius: 12px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--ink); }
.v2-todo .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.v2-todo .eyebrow.bad { color: var(--bad); }
.v2-todo .jjs-emptystate { margin-top: 12px; }

/* phone */
@media (max-width: 700px) {
  .jjs-proto .pcards { grid-template-columns: minmax(0, 1fr); }
  .jjs-proto .phead { padding: 18px; }
  .jjs-proto .phead .row.top { flex-direction: column; }
  .jjs-proto .pacts .btn { padding: 7px 12px; font-size: 12.5px; }
  .jjs-proto .v2-projbar .inp, .jjs-proto .v2-projbar select.inp { max-width: none; width: 100%; }
  .jjs-proto .tbl { min-width: 760px; }
  .jjs-proto .sboard { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .jjs-proto .hitrow { flex-wrap: wrap; }
  .jjs-proto .hatt { padding: 0 12px 8px; }
  .sdrop { min-width: 0; }
  .v2-todo .v2-todocard { padding: 14px; }
  .jjs-topsearch .v2-kbd { display: none; }
}