/* The shift handover page, "ส่งมอบงาน" (lean-rollout ticket 261). Every colour, size, radius, weight and duration
   below is a token from finance_app/static/tokens.css; this sheet defines none of its own and holds no literal but
   the 1px hairline the rest of the app uses.

   Everything is scoped to #handover-panel or to an `ho-` class this page owns, so nothing here lands on another
   page of the shell. The four dialogs borrow the shell's `.app-modal` family and override only what this page
   needs. One thing leads: the current shift, at the heading step, with its one main action beside it. The
   accounts table changes shape by the width of its own region, not of the window, because the sidebar still
   takes width at 1024 and the same table is drawn inside a dialog. */

#handover-panel{display:block}

/* --- heading, freshness and the company ------------------------------------------------- */
.ho-heading{margin-block-end:var(--space-16)}
.page-heading>.ho-heading-side{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-8)}
.ho-freshness{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--space-8);margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
#handover-panel[data-handover-state=ready] .ho-freshness .status-dot{background:var(--color-feedback-success-text)}
#handover-panel:is([data-handover-state=stale],[data-handover-state=error]) .ho-freshness{color:var(--color-feedback-error-text)}
#handover-panel:is([data-handover-state=stale],[data-handover-state=error]) .ho-freshness .status-dot{background:var(--color-feedback-error-text)}
.ho-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
.ho-company{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4) var(--space-12);max-inline-size:none;
  margin:0 0 var(--space-20);padding:var(--space-12) var(--space-16);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-inline-start:var(--size-marker) solid var(--color-action-primary);
  border-radius:var(--radius-card)}
.ho-company-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.ho-company-name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.ho-company-note{font-size:var(--text-xs);color:var(--color-text-secondary)}

/* --- the notice: what just happened ------------------------------------------------------- */
.ho-notice{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16);margin:0 0 var(--space-20);
  padding:var(--space-12) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card);
  background:var(--color-surface-sunken);color:var(--color-text-primary)}
.ho-notice p{flex:1 1 var(--size-280);margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.ho-notice[data-tone=success]{background:var(--color-feedback-success-bg);border-color:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.ho-notice[data-tone=error]{background:var(--color-feedback-error-bg);border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.ho-notice button{min-height:var(--size-36);font-size:var(--text-sm)}
.ho-notice-close{color:var(--color-text-primary);background:var(--color-surface-card)}

/* --- the three regions ---------------------------------------------------------------------- */
.ho-body{display:grid;gap:var(--space-24)}
.ho-shift,.ho-check,.ho-history{padding:var(--space-24);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm)}
.ho-quiet-state{margin:0;padding:var(--space-24) var(--space-16);text-align:center;color:var(--color-text-secondary);max-width:none}
.ho-help{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-width:none}
.ho-small{display:block;margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-secondary);max-width:none}
.ho-warning{color:var(--color-feedback-hold-text)}

/* --- the current shift: it leads ------------------------------------------------------------ */
.ho-shift{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-16) var(--space-24)}
.ho-shift-main{display:flex;flex-direction:column;gap:var(--space-4);flex:1 1 calc(var(--size-280) + var(--size-150));min-inline-size:0}
.ho-label{margin:0;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.ho-shift-name{margin:0;font-size:var(--text-xl);line-height:var(--leading-snug);overflow-wrap:anywhere}
.ho-shift-name:focus{outline:none}
.ho-shift-meta,.ho-shift-end{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-width:none}
.ho-window{margin:var(--space-8) 0 0;padding-block-start:var(--space-8);border-block-start:1px solid var(--color-border-subtle);
  font-size:var(--text-sm);color:var(--color-text-primary);max-width:none}
.ho-shift-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12);flex:0 1 auto}
.ho-shift-actions button{display:inline-flex;align-items:center;gap:var(--space-8)}
.ho-readonly{height:auto;min-height:var(--size-28)}

/* --- the checklist ------------------------------------------------------------------------------ */
.ho-check,.ho-dialog-view{display:flex;flex-direction:column;gap:var(--space-20);container:ho-region / inline-size}
.ho-check-head{display:flex;flex-direction:column;gap:var(--space-4)}
.ho-check-head h2{margin:0}
.ho-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-12);margin-block-end:var(--space-12)}
.ho-section-head h3{margin:0;font-size:var(--text-md)}
.ho-accounts{display:flex;flex-direction:column;gap:var(--space-8)}
.ho-accounts>.ho-go{align-self:flex-start}
.ho-table-wrap{max-inline-size:100%;overflow-x:auto;background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ho-table{inline-size:100%;min-inline-size:0;border-collapse:collapse}
.ho-table th,.ho-table td{padding:var(--space-12);text-align:start;vertical-align:top;border-block-end:1px solid var(--color-border-subtle);font-size:var(--text-sm)}
.ho-table thead th{padding-block:var(--space-10);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary);background:var(--color-surface-sunken);white-space:nowrap}
.ho-table tbody tr:last-child>*{border-block-end:0}
.ho-table .number{text-align:end;font-variant-numeric:tabular-nums}
.ho-table td.number>*+*{margin-block-start:var(--space-4)}
.ho-table td.number .badge{margin-inline-start:auto}
.ho-cell-label{display:none}
.ho-figure{display:block;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary);white-space:nowrap}
.ho-figure[data-current=false]{color:var(--color-text-secondary)}
.ho-account-cell{min-inline-size:calc(var(--size-150) + var(--size-24))}
.ho-account-id{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);min-inline-size:0}
.ho-account-id .bank-account{min-inline-size:0}
.ho-account-id .bank-icon{min-inline-size:var(--size-36);block-size:var(--size-36);font-size:var(--text-sm)}
.ho-account-id .bank-mark{position:absolute;inset:0;padding:var(--space-4)}
.ho-difference .badge{display:inline-flex;height:auto;min-height:var(--size-24);white-space:normal;text-align:start}
#handover-panel tr[data-result=differs]>td:first-child,.ho-dialog tr[data-result=differs]>td:first-child{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
#handover-panel tr:is([data-result=no_current_figure],[data-result=no_ledger_balance])>td:first-child,
.ho-dialog tr:is([data-result=no_current_figure],[data-result=no_ledger_balance])>td:first-child{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-review-text)}
.ho-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--size-280) - var(--size-24)),1fr));gap:var(--space-12);margin:0;padding:0;list-style:none}
.ho-item{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-16);background:var(--color-surface-page);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ho-item[data-open=true]{border-inline-start:var(--size-marker) solid var(--color-badge-review-text)}
.ho-item-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);margin-block-end:var(--space-4)}
.ho-item-head h4{margin:0;font-size:var(--text-sm)}
.ho-item-line{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);max-width:none;font-variant-numeric:tabular-nums}
.ho-go{display:inline-flex;align-items:center;gap:var(--space-6);align-self:flex-start;margin-block-start:var(--space-8);min-height:var(--size-44);
  padding-inline:var(--space-12);font-size:var(--text-sm)}
.ho-covers{padding-block-start:var(--space-12);border-block-start:1px solid var(--color-border-subtle)}
@container ho-region (max-width: 639px){
  .ho-table,.ho-table tbody{display:block}
  .ho-table thead{display:none}
  .ho-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8) var(--space-12);
    padding:var(--space-14) var(--space-16);border-block-end:1px solid var(--color-border-subtle)}
  .ho-table tbody tr:last-child{border-block-end:0}
  .ho-table td{display:block;padding:0;border:0;text-align:start}
  .ho-table td.number{text-align:start}
  .ho-table .ho-account-cell{grid-column:1 / -1;min-inline-size:0}
  .ho-table .ho-difference{grid-column:1 / -1}
  .ho-table td.number .badge{margin-inline-start:0}
  .ho-cell-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-caption)}
  .ho-figure{white-space:normal;overflow-wrap:anywhere}
  #handover-panel tr[data-result=differs],.ho-dialog tr[data-result=differs]{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
  #handover-panel tr:is([data-result=no_current_figure],[data-result=no_ledger_balance]),
  .ho-dialog tr:is([data-result=no_current_figure],[data-result=no_ledger_balance]){box-shadow:inset var(--size-marker) 0 0 var(--color-badge-review-text)}
  #handover-panel tr[data-result]>td:first-child,.ho-dialog tr[data-result]>td:first-child{box-shadow:none}
  .ho-items{grid-template-columns:minmax(0,1fr)}
}

/* --- the day's history ------------------------------------------------------------------------- */
.ho-history{display:flex;flex-direction:column;gap:var(--space-16)}
.ho-history-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12)}
.ho-history-head h2{margin:0}
.ho-history-head h2:focus{outline:none}
.ho-day-nav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8)}
.ho-day-step{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-44);font-size:var(--text-sm)}
.ho-day-label{display:block;flex:0 1 auto}
.ho-day-label input{inline-size:auto;font-size:var(--text-sm)}
.ho-history-empty{margin:0;padding:var(--space-24) var(--space-16);text-align:center;color:var(--color-text-secondary);max-width:none;
  background:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ho-history-items{display:grid;gap:0;margin:0;padding:0;list-style:none;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
.ho-history-item{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8) var(--space-16);
  padding:var(--space-14) var(--space-16);border-block-end:1px solid var(--color-border-subtle)}
.ho-history-item:last-child{border-block-end:0}
.ho-history-item[data-voided=true]{background:var(--color-surface-sunken);box-shadow:inset var(--size-marker) 0 0 var(--color-badge-failed-text)}
.ho-history-words{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0;flex:1 1 var(--size-280)}
.ho-history-name{overflow-wrap:anywhere}
.ho-history-side{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-12)}
.ho-row-button{display:inline-flex;align-items:center;gap:var(--space-6);min-height:var(--size-44);padding-inline:var(--space-12);font-size:var(--text-sm)}

/* --- the dialogs ---------------------------------------------------------------------------- */
.ho-dialog .app-modal-head h2:focus{outline:none}
.ho-dialog{inline-size:min(calc(var(--space-64)*9),calc(100vw - var(--space-32)))}
.ho-dialog-wide{inline-size:min(calc(var(--space-64)*13),calc(100vw - var(--space-32)))}
.ho-dialog .app-modal-body label{flex:0 0 auto}
.ho-dialog textarea{inline-size:100%;min-inline-size:0;font-size:var(--text-md);resize:vertical}
.ho-form-fields{display:flex;flex-direction:column;gap:var(--space-16)}
/* The shell's `form` rule lays a form out as a row aligned to its end; this one is the dialog's column. */
.ho-dialog form.ho-start-form{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--space-16);inline-size:auto;padding:0}
.ho-field{display:flex;flex-direction:column;gap:var(--space-6)}
.ho-field-name{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8);color:var(--color-text-primary);font-weight:var(--weight-semibold)}
.ho-optional{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ho-hint{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-secondary)}
.ho-dialog .app-modal-body label :is(input,select,textarea)[aria-invalid=true]{border-color:var(--color-action-destructive)}
.ho-form-error{margin:0;padding:var(--space-10) var(--space-14);border-radius:var(--radius-control);background:var(--color-feedback-error-bg);
  color:var(--color-feedback-error-text);font-size:var(--text-sm);max-width:none}
.ho-changed{background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.ho-taken{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary);max-width:none}
.ho-fresh{display:grid;gap:var(--space-4);margin:0;padding:var(--space-12) var(--space-12) var(--space-12) var(--space-32);
  background:var(--color-surface-page);border-radius:var(--radius-control);font-size:var(--text-sm);color:var(--color-text-secondary)}
.ho-fresh:empty{display:none}
.ho-ticks{display:grid;gap:var(--space-8);margin:0;padding:var(--space-12) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-control)}
.ho-ticks legend{padding-inline:var(--space-4);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.ho-dialog .app-modal-body label.ho-tick{display:flex;flex-direction:row;align-items:center;gap:var(--space-10);min-height:var(--size-44);
  font-size:var(--text-md);color:var(--color-text-primary);cursor:pointer}
/* As specific as the shell's `.app-modal-body label :is(input,select)`, which would stretch the box across the row. */
.ho-dialog .app-modal-body label.ho-tick input{flex:0 0 auto;inline-size:var(--size-24);block-size:var(--size-24);min-height:var(--size-24);
  margin:0;padding:0;accent-color:var(--color-action-primary)}
.ho-tick:has(input:focus-visible){outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.ho-allowed{margin:0;padding:var(--space-12) var(--space-14);background:var(--color-surface-sunken);border-radius:var(--radius-control);
  font-size:var(--text-sm);color:var(--color-text-primary);max-width:none}
.ho-view-meta{display:flex;flex-direction:column;gap:var(--space-12)}
.ho-facts{display:grid;gap:var(--space-8);margin:0;padding:var(--space-12) var(--space-16);background:var(--color-surface-page);border-radius:var(--radius-control)}
.ho-fact{display:grid;grid-template-columns:minmax(0,calc(var(--size-150) + var(--size-48))) minmax(0,1fr);gap:var(--space-4) var(--space-12)}
.ho-fact dt{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-secondary)}
.ho-fact dd{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere;white-space:pre-line}
.ho-voided{display:grid;gap:var(--space-4);padding:var(--space-12) var(--space-16);background:var(--color-feedback-error-bg);
  border:1px solid var(--color-border-danger);border-radius:var(--radius-control);color:var(--color-feedback-error-text)}
.ho-voided p{margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.ho-voided-line{font-weight:var(--weight-semibold)}
.ho-voided-reason{overflow-wrap:anywhere}
.ho-free-label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold)}
.ho-dialog .app-modal-actions button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6)}

/* --- a phone ---------------------------------------------------------------------------------- */
@media (max-width: 700px){
  .page-heading>.ho-heading-side{flex:1 1 100%;align-items:stretch}
  .ho-shift,.ho-check,.ho-history{padding:var(--space-16)}
  .ho-shift-actions{flex:1 1 100%;flex-direction:column;align-items:stretch}
  .ho-shift-actions button{justify-content:center}
  .ho-history-side{flex:1 1 100%}
  .ho-history-side .ho-row-button{flex:1 1 100%;justify-content:center}
  .ho-day-nav{flex:1 1 100%}
  .ho-day-label{order:-1;flex:1 1 100%}
  .ho-day-label input{inline-size:100%}
  .ho-day-step{flex:1 1 0;justify-content:center}
  .ho-fact{grid-template-columns:minmax(0,1fr)}
  .ho-dialog,.ho-dialog-wide{inline-size:100%;max-inline-size:100%;max-block-size:100vh;margin:0;border-radius:0;border:0}
  .ho-dialog .app-modal-body{padding:var(--space-20)}
  .ho-dialog .app-modal-actions{flex-direction:column-reverse;align-items:stretch;margin-inline:calc(var(--space-20) * -1);padding:var(--space-16) var(--space-20)}
  .ho-dialog .app-modal-actions button{inline-size:100%}
}
@media (prefers-reduced-motion: reduce){
  #handover-panel :is(button,input,select,textarea),.ho-dialog :is(button,input,select,textarea){transition:none}
}

/* --- TICKET 268 (the owner's mockup, approved 19 ต.ค. 2026) -------------------------------------------------------
   The company is the shell's (its top bar); here it is one quiet line under the heading rather than a card. The
   current shift is the mockup's banner: the label, the shift, its line and the window on the left, "เริ่มกะ" (and,
   kept beside it, "บันทึกส่งมอบงานโดยไม่เริ่มกะ") on the right; on a phone the buttons go under it, full width. */
#handover-panel .ho-company{display:flex;align-items:baseline;gap:var(--space-4) var(--space-8);margin:calc(var(--space-8) * -1) 0 var(--space-16);
  padding:0;background:transparent;border:0;border-radius:0}
#handover-panel .ho-company-label{font-size:var(--text-xs);font-weight:var(--weight-regular);letter-spacing:normal;text-transform:none;color:var(--color-text-secondary)}
#handover-panel .ho-company-name{font-size:var(--text-sm);font-weight:var(--weight-semibold)}
#handover-panel .ho-shift{align-items:center;flex-wrap:nowrap}
#handover-panel .ho-shift-main{flex:1 1 auto}
#handover-panel .ho-label{font-weight:var(--weight-regular);letter-spacing:normal;text-transform:none;color:var(--color-text-secondary)}
#handover-panel .ho-shift-actions{flex:0 0 auto;justify-content:flex-end}
#handover-panel .ho-no-shift{margin-block-start:var(--space-4);font-size:var(--text-xs)}
#handover-panel .ho-window{font-size:var(--text-xs);color:var(--color-text-secondary)}
@media (max-width: 860px){
  #handover-panel .ho-shift{flex-wrap:wrap}
  #handover-panel .ho-shift-actions{flex:1 1 100%;justify-content:flex-start}
}
@media (max-width: 700px){
  #handover-panel .ho-shift-actions button{flex:1 1 100%;justify-content:center;min-height:var(--size-44)}
}
/* The open work under the accounts, as the mockup's quiet line of counts rather than four cards: one list, an item a
   row -- its name and its count, its lines, and where it is fixed -- so the accounts stay the card's lead. The kept
   picture's dialog draws the same items as before. */
#handover-checklist .ho-items{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--color-border-default);border-radius:var(--radius-card)}
#handover-checklist .ho-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) calc(var(--size-150) + var(--size-72));align-items:center;column-gap:var(--space-16);row-gap:0;
  padding:var(--space-10) var(--space-16);background:transparent;border:0;border-radius:0;border-block-end:1px solid var(--color-border-subtle)}
#handover-checklist .ho-item:last-child{border-block-end:0}
#handover-checklist .ho-item[data-open=true]{box-shadow:inset var(--size-marker) 0 0 var(--color-badge-review-text)}
#handover-checklist .ho-item>.ho-item-head{grid-column:1;grid-row:1 / span 8;align-self:center;justify-content:flex-start;margin:0}
#handover-checklist .ho-item>:is(.ho-item-line,.ho-small){grid-column:2;margin-block:var(--space-2) 0}
#handover-checklist .ho-item>.ho-go{grid-column:3;grid-row:1 / span 8;align-self:center;justify-self:end;margin:0}
@container ho-region (max-width: 639px){
  #handover-checklist .ho-item{grid-template-columns:minmax(0,1fr);padding:var(--space-12) var(--space-14)}
  #handover-checklist .ho-item>:is(.ho-item-head,.ho-item-line,.ho-small,.ho-go){grid-column:1;grid-row:auto}
  #handover-checklist .ho-item>.ho-item-head{margin-block-end:var(--space-4)}
  #handover-checklist .ho-item>.ho-go{justify-self:start;margin-block-start:var(--space-6)}
}