/* users module styles — owned by the users module (js/users.js); use the variables from css/app.css only. Dark mode follows the variables. */
/* app look (2026-09-25): Classic keeps its exact colours; under data-skin="dawgwalk" they come from the theme variables (css/theme-dawgwalk.css).
   --us-on-accent = text on an --indigo fill, --us-on-amber = text on --amber, --us-rule-h = hover border (Dawg Walk: --on-accent / --amber-ink / --rule-hi) */
:root{--us-on-accent:var(--on-accent,#fff);--us-on-amber:#2a1d00;--us-rule-h:#c9c9d6}
:root[data-skin=dawgwalk]{--us-on-accent:var(--on-accent,var(--paper));--us-on-amber:var(--amber-ink,color-mix(in srgb,var(--amber) 18%,#000));--us-rule-h:var(--rule-hi,color-mix(in srgb,var(--ink3) 50%,var(--rule)))}
/* sub-tabs + toolbar */
.us-tabs{align-items:center} .us-tabs .sp{flex:1} .us-tabs .n{margin-left:6px;font-weight:500;font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.us-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px} .us-top .sp{flex:1} .us-sum{font-size:12.5px;color:var(--ink2)}
/* people table: compact inputs, staged (unsaved) rows in amber, inactive people dimmed */
.us-in{width:100%;min-width:90px;padding:3px 6px;font-size:12.5px;border-radius:5px}
.us-pin{width:84px;min-width:70px;font-family:var(--mono);letter-spacing:.15em}
table.mt tr.us-dirty td,table.mt tbody tr.us-dirty:hover td{background:var(--amber-l)}
table.mt tr.us-inactive td{color:var(--ink3)} table.mt tr.us-inactive td .us-in{color:var(--ink3)}
.us-line{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--rule2);font-size:13px} .us-line:last-child{border-bottom:0} .us-line .faint{font-size:12px;text-align:right}
.us-outlist{max-height:30vh;overflow:auto;margin-bottom:6px}
/* month calendar */
.us-cal{background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh);overflow:hidden}
.us-cal-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--paper2);flex-wrap:wrap}
.us-cal-head h3{margin:0 8px;font-size:15px;min-width:160px} .us-cal-head .sp{flex:1} .us-cal-head .legend{margin:0}
.us-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--paper2);border-bottom:1px solid var(--rule)}
.us-dow div{padding:6px 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.us-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.us-day{min-height:96px;border-right:1px solid var(--rule2);border-bottom:1px solid var(--rule2);padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.us-day:nth-child(7n){border-right:0} .us-day:hover{background:var(--hover)}
.us-day.wknd{background:var(--bg)} .us-day.other{opacity:.45} .us-day.hol{background:var(--amber-l)}
.us-day .n{font-family:var(--mono);font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;align-items:center} .us-day .n span{font-size:11px;color:var(--ink3)}
.us-day.today .n b{background:var(--indigo);color:var(--us-on-accent);border-radius:10px;padding:0 6px}
.us-chip{display:block;font-size:11px;line-height:1.5;padding:1px 6px;border-radius:4px;background:var(--grey-l);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;max-width:100%}
.us-chip.hol{background:var(--amber);color:var(--us-on-amber)} .us-chip.more{background:transparent;color:var(--ink3);font-weight:500}
/* who is out this week */
.us-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px}
.us-wd{background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:8px 10px;min-height:84px;box-shadow:var(--sh);cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.us-wd:hover{border-color:var(--us-rule-h)} .us-wd.wknd{background:var(--bg)} .us-wd.today{border-color:var(--indigo);box-shadow:0 0 0 2px var(--indigo-l)}
.us-wd .h{font-size:11.5px;font-weight:700;color:var(--ink2);display:flex;justify-content:space-between;margin-bottom:2px} .us-wd .h .faint{font-family:var(--mono);font-weight:500}
.us-wd .av{font-size:11px;color:var(--ink3);margin-top:auto;padding-top:4px;font-family:var(--mono)}
/* who am I picker */
.us-who{max-height:52vh;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:8px;min-width:min(720px,88vw)}
.us-who button{text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:1px}
.us-who button:hover{background:var(--hover);border-color:var(--us-rule-h)} .us-who button.on{background:var(--indigo-l);border-color:var(--indigo);color:var(--indigo)} .us-who button .faint{font-size:11.5px}
@media (max-width:1100px){.us-week{grid-template-columns:repeat(4,1fr)}} @media (max-width:900px){.us-week{grid-template-columns:repeat(2,1fr)} .us-day{min-height:64px}}

/* role status select (UI.statusSelect) + home-cell select tinted with the cell's area colour */
table.mt td .mt-status-sel{min-width:118px}
.us-cellsel{border-left:5px solid var(--cc,var(--rule));background:color-mix(in srgb,var(--cc,transparent) 13%,var(--field))}
.us-cell{display:inline-block;padding:1px 8px 1px 6px;border-left:4px solid var(--cc,var(--rule));border-radius:4px;background:color-mix(in srgb,var(--cc,transparent) 13%,transparent);font-weight:600;font-size:12.5px}
/* totals row: people per role */
.us-rcs{display:flex;flex-wrap:wrap;gap:3px;font-family:var(--font)}
.us-rc{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:0 6px;border-radius:4px;white-space:nowrap}
.us-tot{font-family:var(--font);font-size:11.5px;color:var(--ink2)}
/* time off: whole day(s) / hours toggle */
.us-tof-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.us-tof[data-mode=days] .us-hrs{display:none} .us-tof[data-mode=hours] .us-days{display:none}
.us-tof .fields input[type=time]{font-family:var(--mono)}
.us-tof .fields input[type=number]{width:100%}
/* part-day chips are lighter than whole-day chips */
.us-chip.full{display:inline-block}
.us-chip.part{background:transparent;border:1px dashed var(--grey);color:var(--ink2);font-weight:600}
td .us-chip.part,.us-line .us-chip.part{display:inline-block;vertical-align:1px}
.us-line b .us-chip{margin-left:4px}
.legend i.us-lg.full{background:var(--grey-l)}
.legend i.us-lg.part{background:transparent;border:1px dashed var(--grey)}
.us-wd-n{display:inline-flex;gap:6px} .us-partn{font-family:var(--mono);font-weight:500;color:var(--ink3);font-style:italic}

/* round 5: work cells (several per person, the first is the main one = home_cell) as chips + a checklist popover; module access overrides */
.us-cells{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-width:150px}
.us-cc{display:inline-flex;align-items:center;gap:3px;padding:0 4px 0 5px;border-left:4px solid var(--cc,var(--rule));border-radius:4px;background:color-mix(in srgb,var(--cc,transparent) 14%,transparent);font-weight:600;font-size:11.5px;line-height:1.7;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.us-cc.main{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cc,var(--ink3)) 55%,transparent)} .us-cc .st{font-size:11px;color:var(--ink3)}
.us-cc button{border:0;background:transparent;color:var(--ink3);cursor:pointer;padding:0 2px;font:inherit;font-size:12px;line-height:1} .us-cc button:hover{color:var(--red)}
.us-cc[data-cmain]{cursor:pointer}
.us-cadd{border:1px dashed var(--rule);background:transparent;color:var(--ink2);border-radius:4px;font:inherit;font-size:11.5px;line-height:1.5;padding:0 6px;cursor:pointer} .us-cadd:hover{border-color:var(--indigo);color:var(--indigo)}
.us-cpop{position:absolute;z-index:3000;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:8px 10px;max-height:60vh;overflow:auto;min-width:260px;font-size:12.5px}
.us-cpop h5{margin:8px 0 3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)} .us-cpop h5:first-of-type{margin-top:2px}
.us-cpop label{display:flex;align-items:center;gap:6px;padding:2px 4px;border-radius:5px;cursor:pointer} .us-cpop label:hover{background:var(--hover)}
.us-cpop label i{width:9px;height:9px;border-radius:2px;flex:none} .us-cpop .xs{margin-top:6px}
.us-acc{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap} .us-acc .pill{font-size:11px}
.us-accm{min-width:min(720px,88vw)} .us-accm table{width:100%;border-collapse:collapse;font-size:12.5px} .us-accm td{padding:3px 6px;border-bottom:1px solid var(--rule2)} .us-accm td:first-child{font-weight:600}
.us-accm select{padding:2px 6px;font-size:12px} .us-accm .d{color:var(--ink3);font-size:11.5px} .us-accm .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:800px){.us-accm .grid2{grid-template-columns:1fr}}
.us-accm tr.ov td{background:var(--amber-l)}
.us-nucells{display:flex;flex-wrap:wrap;gap:4px 12px;max-height:150px;overflow:auto;border:1px solid var(--rule2);border-radius:8px;padding:6px 8px;font-size:12.5px} .us-nucells label{display:flex;gap:5px;align-items:center;white-space:nowrap}

/* js/access.js — sidebar modules hidden by role / work cells, the top-bar chip, the "not in your modules" notice, the Labels banner, the info modal */
nav.nav .acc-off{display:none!important}
.acc-chip{white-space:nowrap} .acc-chip.warn,#whoBtn.acc-pick{background:var(--amber-l);border-color:color-mix(in srgb,var(--amber) 60%,transparent);color:var(--ink)}
.acc-deny{max-width:760px;margin:30px auto;padding:18px 22px} .acc-deny h3{margin-top:0} .acc-deny .row{gap:8px;flex-wrap:wrap}
.acc-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--amber-l);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:8px;padding:6px 10px;margin:0 0 10px;font-size:12.5px}
.acc-note.on{background:var(--indigo-xl);border-color:color-mix(in srgb,var(--indigo) 30%,transparent)} .acc-note .btn{margin-left:auto}
.acc-who{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin:0 0 6px} .acc-who b{color:var(--ink)}
.acc-cs{display:flex;flex-wrap:wrap;gap:4px;min-width:min(640px,86vw)}
.acc-c{font-size:12px;padding:1px 8px;border-radius:5px;white-space:nowrap} .acc-c.on{background:var(--green-l);color:var(--ink);font-weight:600} .acc-c.off{background:var(--grey-l);color:var(--ink3);text-decoration:line-through}

/* round 10 (U12): one-line rows — work centers as home + "+N" (a button for admins), access as one button with at most 2 pills, Save only when edited */
button.us-cells{border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 5px;min-height:28px;font:inherit;cursor:pointer;flex-wrap:nowrap;min-width:0;max-width:170px}
button.us-cells:hover,button.us-cells:focus-visible{border-color:var(--rule);background:var(--paper)}
.us-cells{flex-wrap:nowrap;min-width:0;overflow:hidden}
.us-cmore{font-size:11.5px;font-weight:600;color:var(--ink3);white-space:nowrap}
.us-cpop .us-home{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink3)}
.us-cpop .us-mkhome{margin-left:auto;border:0;background:none;color:var(--link,var(--indigo));font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:0 2px}
.us-accb{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 5px;min-height:28px;font:inherit;font-size:12px;cursor:pointer;flex-wrap:nowrap;color:var(--ink2)}
.us-accb:hover,.us-accb:focus-visible{border-color:var(--rule);background:var(--paper)}
.us-acc{flex-wrap:nowrap}
.us-save:disabled{visibility:hidden}
.us-si{max-width:720px}
/* R10 fix: the People table fits 1440 px (Shift · lead, Sign-in PIN and Notes are hidden by default; ⋮ shows them) */
html #usTbl .mst-sel{min-width:112px}
#usTbl .mt-wrap.dense table.mt td{padding:4px 6px} #usTbl .mt-wrap.dense table.mt th{padding:6px 6px}
#usTbl button.us-cells{max-width:150px}