/* Native roster panels — scope all styles to the two new views. */
#view-roster-v1,#view-attendance-v1{min-width:0}
#view-roster-v1 .panel,#view-attendance-v1 .panel{max-width:100%;min-width:0}
.v1-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.v1-controls label{min-width:105px;flex:0 1 auto}
.v1-controls input,.v1-controls select{min-width:100px;width:100%;font-size:14px;padding:10px}
.v1-controls #rv-pattern{min-width:190px}.v1-controls #rv-employee{min-width:170px}
.v1-draft{background:#f1f7f2;border:1px solid #dbe7dc;padding:15px;margin:16px 0}
.v1-draft h4{margin:0 0 14px;font-size:14px}.v1-draft .v1-controls{margin-bottom:0}
.v1-message{font-size:12px;margin:11px 0}
.v1-grid-scroll{overflow-x:auto;max-width:100%;margin-top:16px;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:7px}
.v1-grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px}
.v1-grid th,.v1-grid td{font-size:12px;min-width:40px;text-align:center;padding:10px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:normal;text-transform:none}
.v1-grid thead th{position:sticky;top:0;background:#eaf1ed;z-index:2;color:var(--ink)}
.v1-grid th:first-child,.v1-grid td:first-child{position:sticky;left:0;width:120px;min-width:120px;max-width:120px;box-sizing:border-box;overflow:hidden;text-overflow:clip;white-space:nowrap;text-align:left;padding-left:8px;padding-right:6px;background:var(--panel);z-index:1}
.v1-grid thead th:first-child{z-index:3;background:#eaf1ed}
.v1-grid .shift2{background:#ffefba}.v1-grid .shift4{background:#d7ecfc}
.v1-grid .off{background:#e9ddf7}.v1-grid .ot{background:#ffe0dc}
.v1-grid .leave{background:#f6ddea;color:#6e355a}
.v1-grid .overtime{background:#ffddab;color:#744a0f}
.v1-grid .v1-editable{cursor:pointer;box-shadow:inset 0 -2px #ba9a59}
.v1-grid .v1-editable:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.v1-grid .v1-editable:hover{filter:brightness(.96)}
.v1-grid .v1-confirm{padding:7px 9px;font-size:11px}
.v1-grid .v1-pill{display:inline-block;padding:5px 8px;background:#e7efea;border-radius:6px;font-size:11px}
@media(max-width:720px){.v1-controls{gap:10px}.v1-controls label{min-width:95px;flex:1 1 100px}.v1-controls #rv-pattern,.v1-controls #rv-employee{min-width:0}.v1-grid th:first-child,.v1-grid td:first-child{width:112px;min-width:112px;max-width:112px;padding-left:6px;padding-right:4px}.v1-grid td,.v1-grid th{padding:9px 5px;min-width:35px}}

/* 2026-10-29 mobile form fix: prevent long Thai labels and native iOS date inputs overlapping. */
#view-roster-v1 .v1-draft{min-width:0;max-width:100%;overflow:hidden}
#view-roster-v1 .v1-draft .v1-controls{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:end;gap:16px;
}
#view-roster-v1 .v1-draft .v1-controls > label{
  display:grid;grid-template-columns:minmax(0,1fr);
  min-width:0;max-width:100%;width:100%;gap:8px;
  line-height:1.55;overflow-wrap:anywhere;
}
#view-roster-v1 .v1-draft .v1-controls > label:nth-of-type(4){grid-column:1/-1}
#view-roster-v1 .v1-draft .v1-controls > label :is(input,select){
  min-width:0;max-width:100%;width:100%;box-sizing:border-box;
  font-size:16px;min-height:46px;
}
#view-roster-v1 .v1-draft .v1-controls > #rv-create{
  grid-column:1/-1;justify-self:start;min-width:145px;
}
@media(max-width:820px){
  #view-roster-v1 .v1-draft .v1-controls{grid-template-columns:minmax(0,1fr);gap:14px}
  #view-roster-v1 .v1-draft .v1-controls > label:nth-of-type(4){grid-column:auto}
  #view-roster-v1 .v1-draft .v1-controls > #rv-create{grid-column:auto;width:100%;justify-self:stretch}
  #view-roster-v1 .v1-draft{padding:16px}
}
@media(max-width:420px){
  #view-roster-v1 > .panel > .v1-controls,
  #view-attendance-v1 > .panel > .v1-controls{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;gap:12px;
  }
  #view-roster-v1 > .panel > .v1-controls > label,
  #view-attendance-v1 > .panel > .v1-controls > label{min-width:0;max-width:100%;width:100%}
  #view-roster-v1 > .panel > .v1-controls :is(input,select),
  #view-attendance-v1 > .panel > .v1-controls :is(input,select){min-width:0;max-width:100%;font-size:16px}
  #view-roster-v1 > .panel > .v1-controls > button,
  #view-attendance-v1 > .panel > .v1-controls > button{grid-column:1/-1;width:100%}
}

/* Inline spreadsheet-style editing for the Owner. */
.v1-grid .v1-cell-input{
 display:block;width:100%;min-width:42px;max-width:100%;height:34px;
 padding:4px 2px;border:2px solid var(--green);border-radius:4px;
 background:#fffefa;text-align:center;color:var(--ink);
 font:700 16px/1.2 Tahoma,'Noto Sans Thai',system-ui,sans-serif;
 outline:none;box-shadow:0 0 0 2px rgba(23,108,91,.1);
}
.v1-grid .v1-save-pending{opacity:.6;position:relative}
.v1-grid .v1-save-pending::after{content:'•';color:var(--green);position:absolute;top:0;right:2px}
.v1-grid .v1-save-error{outline:2px solid #b44834;outline-offset:-2px}
.v1-grid .v1-editable{min-width:46px;touch-action:manipulation;user-select:none}
@media(max-width:720px){
 .v1-grid .v1-cell-input{font-size:16px;height:40px;min-width:42px;padding:6px 2px}
 .v1-grid .v1-editable{min-width:48px}
}

/* Clipboard tools are part of the existing admin shell, including on iPhone. */
#view-roster-v1 .v1-clipboard-tools[hidden]{display:none!important}
#view-roster-v1 .v1-clipboard-tools{
 display:flex;flex-wrap:wrap;align-items:center;gap:10px;
 margin:12px 0 3px;padding:12px;border:1px solid #dae7de;
 border-radius:8px;background:#f7faf8;
}
#view-roster-v1 .v1-clipboard-tools button{font-size:13px;min-height:42px}
#view-roster-v1 .v1-clipboard-tools small{flex:1 1 220px;line-height:1.5}
.v1-grid .v1-selected-cell{outline:2px solid #227e62;outline-offset:-2px}
@media(max-width:580px){
 #view-roster-v1 .v1-clipboard-tools button{flex:1 1 135px}
 #view-roster-v1 .v1-clipboard-tools small{flex-basis:100%}
}

/* Inclusive range editor: dates are equal-weight inputs with full-width pattern. */
#view-roster-v1 .v1-draft #rv-range-help{margin:10px 0 18px;line-height:1.65}
#view-roster-v1 .v1-draft #rv-pattern{width:100%;min-width:0}
#view-roster-v1 .v1-draft #rv-from,
#view-roster-v1 .v1-draft #rv-to{color-scheme:light;min-width:0}
#view-roster-v1 .v1-draft #rv-create{min-height:45px}

/* Date range composer: employee on own row, dates paired, pattern full-width. */
#view-roster-v1 .v1-draft .v1-controls > label:first-child{grid-column:1/-1}
#view-roster-v1 .v1-draft .v1-controls > label:nth-of-type(4){grid-column:1/-1}
@media(max-width:820px){
  #view-roster-v1 .v1-draft .v1-controls > label:first-child,
  #view-roster-v1 .v1-draft .v1-controls > label:nth-of-type(4){grid-column:auto}
}

/* Per-employee status actions: reversible full-row clear and one-step undo. */
#view-roster-v1 .v1-grid td.v1-row-actions{min-width:158px;padding:6px 8px;background:#fffdf8}
#view-roster-v1 .v1-row-actions-inner{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#view-roster-v1 .v1-row-actions .v1-pill{font-size:10px;padding:6px 8px;min-width:69px;text-align:center;flex-shrink:0}
#view-roster-v1 .v1-row-icon{
  width:36px;height:36px;min-width:36px;min-height:36px;display:inline-flex;
  align-items:center;justify-content:center;padding:0;border:1px solid #dce5de;
  border-radius:9px;background:#f7faf8;color:#276f58;transition:background .15s,border-color .15s;
}
#view-roster-v1 .v1-row-icon:hover:not(:disabled){background:#e4f2e9;border-color:#78a48e}
#view-roster-v1 .v1-row-clear{color:#a34235;background:#fff5f2;border-color:#f0d6ce}
#view-roster-v1 .v1-row-clear:hover:not(:disabled){color:#8e3026;background:#ffe8e2;border-color:#dca89f}
#view-roster-v1 .v1-row-icon:disabled{opacity:.32;cursor:not-allowed}
#view-roster-v1 .v1-row-icon svg{width:17px;height:17px;pointer-events:none}
@media(max-width:720px){
 #view-roster-v1 .v1-grid td.v1-row-actions{min-width:148px;padding:5px 6px}
 #view-roster-v1 .v1-row-actions-inner{gap:4px}
 #view-roster-v1 .v1-row-icon{width:37px;height:37px;min-width:37px;min-height:37px}
 #view-roster-v1 .v1-row-actions .v1-pill{min-width:60px;padding:6px 5px;font-size:10px}
}

/* Read-only COUNTIF-style headcounts displayed immediately after last staff row. */
#view-roster-v1 .v1-grid tfoot.v1-shift-totals tr th,
#view-roster-v1 .v1-grid tfoot.v1-shift-totals tr td,
#view-roster-v1 .v1-grid tfoot#rv-shift-totals tr th,
#view-roster-v1 .v1-grid tfoot#rv-shift-totals tr td{
  border-top:1px solid #ccdcd4;
  padding-top:9px;padding-bottom:9px;
  font-size:12px;font-weight:750;
  font-variant-numeric:tabular-nums;
  box-shadow:none;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals tr:first-child > *{
  border-top:2px solid #9cbfa9;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals .v1-shift-total-day > *{
  background:#fff5da;color:#675324;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals .v1-shift-total-night > *{
  background:#e6f2fc;color:#284d70;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals th:first-child{
  position:sticky;left:0;z-index:2;
  box-sizing:border-box;width:120px;min-width:120px;max-width:120px;
  font-size:10.5px;line-height:1.4;
  text-align:left;white-space:nowrap;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals .v1-shift-total-count{
  text-align:center;font-size:13px;font-weight:800;
  cursor:default;user-select:text;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals .v1-shift-total-zero{
  color:#94a49d;font-weight:500;
}
#view-roster-v1 .v1-grid tfoot#rv-shift-totals .v1-shift-total-end{
  font-size:10px;font-weight:600;color:#778980;
}
#view-roster-v1 .v1-shift-totals-help{
  margin:9px 0 0;line-height:1.6;font-size:11px;
}
@media(max-width:720px){
  #view-roster-v1 .v1-grid tfoot#rv-shift-totals th:first-child{
    width:112px;min-width:112px;max-width:112px;
    font-size:10px;padding-left:6px;padding-right:3px;
  }
  #view-roster-v1 .v1-grid tfoot#rv-shift-totals tr td{
    padding-left:5px;padding-right:5px;
  }
}

.v1-draft-assessment{box-shadow:inset 0 -2px 0 #c59142}
.v1-row-actions-inner .v1-confirm{white-space:nowrap;font-size:12px;padding:6px 9px}

/* Confirmed attendance cells mirror the roster shift palette, irrespective
   of attendance status. The status text still shows discrepancies. */
#view-attendance-v1 .v1-grid td.v1-shift-color.shift2{background:#ffefba;color:#332a13}
#view-attendance-v1 .v1-grid td.v1-shift-color.shift4{background:#d7ecfc;color:#173449}
#view-attendance-v1 .v1-grid td.v1-shift-color.off{background:#e9ddf7;color:#45305d}
#view-attendance-v1 .v1-grid td.v1-shift-color.leave{background:#f6ddea;color:#6e355a}
#view-attendance-v1 .v1-grid td.v1-shift-color.overtime{background:#ffddab;color:#744a0f}
#view-attendance-v1 .v1-grid td.v1-shift-color.ot{background:#ffe0dc;color:#702b23}

/* Owner decisions on pending Telegram leave cells. */
#view-attendance-v1 .v1-grid td.v1-leave-review-cell{cursor:pointer;outline:2px dashed #9b751f;outline-offset:-3px}
#view-attendance-v1 .v1-grid td.v1-leave-review-cell:hover{filter:brightness(.96)}
#view-attendance-v1 .v1-grid td.v1-leave-review-cell:focus-visible{outline:3px solid #176c5b}
.v1-leave-decision-dialog{border:1px solid #d1d8d1;border-radius:12px;padding:22px;max-width:min(94vw,480px);box-shadow:0 18px 60px #0004;color:#21332a;background:#fff}
.v1-leave-decision-dialog::backdrop{background:#0008}
.v1-leave-decision-dialog h3{margin:0 0 12px;font-size:17px}
.v1-leave-decision-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px}
.v1-leave-decision-dialog [role=alert]{color:#a32222}