/* The balance photos page, "รูปยอดรอตรวจ" (lean-rollout ticket 264), as the owner's mockup draws it (page
   `balancephotos`). 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 #balance-photos-panel or to a `bp-` class this page owns. One thing leads: the photo
   being checked, its figure at the display step. The queue is a narrow column beside it on a wide screen and a
   disclosure above it on a phone, where the photo leads. */

#balance-photos-panel{display:block}

/* --- heading, freshness, the company and the notice ------------------------------------------ */
.bp-heading{margin-block-end:var(--space-16)}
.page-heading>.bp-heading-side{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-8)}
.bp-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)}
#balance-photos-panel[data-balance-photos-state=ready] .bp-freshness .status-dot{background:var(--color-feedback-success-text)}
#balance-photos-panel:is([data-balance-photos-state=stale],[data-balance-photos-state=error]) .bp-freshness{color:var(--color-feedback-error-text)}
#balance-photos-panel:is([data-balance-photos-state=stale],[data-balance-photos-state=error]) .bp-freshness .status-dot{background:var(--color-feedback-error-text)}
.bp-retry{min-height:var(--size-36);padding-inline:var(--space-12);font-size:var(--text-sm)}
.bp-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)}
.bp-company-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.bp-company-name{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.bp-company-note{font-size:var(--text-xs);color:var(--color-text-secondary)}
.bp-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)}
.bp-notice p{flex:1 1 var(--size-280);margin:0;max-width:none;color:inherit;font-size:var(--text-sm)}
.bp-notice[data-tone=success]{background:var(--color-feedback-success-bg);border-color:var(--color-feedback-success-bg);color:var(--color-feedback-success-text)}
.bp-notice[data-tone=error]{background:var(--color-feedback-error-bg);border-color:var(--color-border-danger);color:var(--color-feedback-error-text)}
.bp-notice button{min-height:var(--size-36);font-size:var(--text-sm)}
.bp-notice-close{color:var(--color-text-primary);background:var(--color-surface-card)}

/* --- the count and the view ------------------------------------------------------------------- */
.bp-body{display:grid;gap:var(--space-20)}
.bp-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12)}
.bp-count{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text-primary);max-width:none}
#balance-photos-panel .bp-view{display:inline-flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--space-8);
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
#balance-photos-panel .bp-view select{inline-size:auto;min-height:var(--size-44)}

/* --- the queue beside the photo ---------------------------------------------------------------- */
.bp-layout{display:grid;grid-template-columns:minmax(calc(var(--size-150) + var(--size-26)),.6fr) minmax(0,1.7fr);gap:var(--space-20);align-items:start}
.bp-queue{padding:var(--space-16);background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg)}
.bp-queue>summary{cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary);min-height:var(--size-28)}
.bp-queue-list{display:grid;gap:var(--space-8);margin-block-start:var(--space-16)}
.bp-queue-item{display:grid;gap:var(--space-8);box-sizing:border-box;inline-size:100%;min-inline-size:0;padding:var(--space-16);
  text-align:start;white-space:normal;font:inherit;font-weight:var(--weight-regular);color:inherit;
  background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card);cursor:pointer;
  height:auto;min-height:var(--size-44)}
.bp-queue-item:hover{background:var(--color-surface-sunken)}
.bp-queue-item:active,.bp-queue-item[aria-pressed=true]{background:var(--color-surface-selected)}
.bp-queue-item[aria-pressed=true]{border-color:var(--color-action-primary)}
.bp-queue-item:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}
.bp-queue-line{font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bp-queue-item small{font-size:var(--text-sm);color:var(--color-text-secondary)}

/* --- the photo being checked: it leads ---------------------------------------------------------- */
.bp-review{display:grid;gap:var(--space-20);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);min-inline-size:0}
.bp-review-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12)}
.bp-review-head h2{margin:0}
.bp-review-head h2:focus{outline:none}
.bp-review-head .badge{height:auto;min-height:var(--size-24);white-space:normal}
.bp-label{margin:0;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-caption)}
.bp-evidence{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20);align-items:start}
.bp-proof{display:grid;gap:var(--space-12);padding:var(--space-24);background:var(--color-surface-sunken);border-radius:var(--radius-card);overflow-wrap:anywhere}
.bp-picture{display:grid;place-items:center;min-block-size:var(--size-150);background:var(--color-surface-card);border:1px solid var(--color-border-default);
  border-radius:var(--radius-card);color:var(--color-text-secondary);overflow:hidden}
.bp-picture img{grid-area:1 / 1;max-inline-size:100%;max-block-size:calc(var(--size-280) + var(--size-150));object-fit:contain}
.bp-picture svg{grid-area:1 / 1}
.bp-picture img:not([hidden])+svg,.bp-picture:has(img:not([hidden])) svg{display:none}
.bp-proof-where{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);max-width:none}
.bp-proof-label{font-size:var(--text-sm);color:var(--color-text-secondary)}
.bp-proof-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8);font-size:var(--text-display-sm);line-height:var(--leading-snug);
  font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.bp-unit{font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.bp-edited{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-feedback-hold-text)}
.bp-proof-time{font-size:var(--text-sm);color:var(--color-text-secondary)}
.bp-edit{display:inline-flex;align-items:center;gap:var(--space-8);justify-self:start;min-height:var(--size-44)}
.bp-form{display:grid;gap:var(--space-16);min-inline-size:0}
.bp-field{display:grid;gap:var(--space-8);min-inline-size:0;font-size:var(--text-sm);color:var(--color-text-primary)}
.bp-field select,.bp-field input{inline-size:100%;min-inline-size:0;min-height:var(--size-44)}
.bp-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-8) var(--space-16);margin:0;font-size:var(--text-sm)}
.bp-facts dt{color:var(--color-text-secondary)}
.bp-facts dd{margin:0;text-align:end;font-weight:var(--weight-semibold);color:var(--color-text-primary);overflow-wrap:anywhere}
.bp-reasons{margin:0;padding-inline-start:var(--space-20);font-size:var(--text-sm);color:var(--color-text-secondary)}
.bp-notice-line{margin:0;padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);font-size:var(--text-sm);max-width:none;
  background:var(--color-badge-review-bg);color:var(--color-badge-review-text)}
.bp-notice-line[data-tone=neutral]{background:var(--color-surface-sunken);color:var(--color-text-primary)}

/* --- the day before, worked back --------------------------------------------------------------- */
.bp-equation-box{display:grid;gap:var(--space-12)}
.bp-equation-box h3{margin:0;font-size:var(--text-md)}
.bp-equation-box .badge{justify-self:start}
.bp-equation{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-12);font-size:var(--text-md)}
.bp-equation strong{font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.bp-equation [data-term=result] strong{font-size:var(--text-lg)}
.bp-small{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);max-width:none}

/* --- the history, the actions, the foot -------------------------------------------------------- */
.bp-history>summary{cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold);min-height:var(--size-28)}
.bp-timeline{display:grid;gap:var(--space-16);margin:var(--space-16) 0 0;padding:0;list-style:none}
.bp-timeline>li{display:grid;gap:var(--space-4);padding-inline-start:var(--space-16);border-inline-start:var(--space-2) solid var(--color-border-default);font-size:var(--text-sm)}
.bp-reason{margin:0;font-size:var(--text-sm);color:var(--color-text-primary);max-width:none;overflow-wrap:anywhere}
.bp-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-12)}
.bp-actions button{display:inline-flex;align-items:center;gap:var(--space-8);min-height:var(--size-44)}
.bp-foot{margin:0;font-size:var(--text-xs);color:var(--color-text-secondary);max-width:none}

/* --- the states: no right, reading, failed, empty ----------------------------------------------- */
.bp-state{display:grid;gap:var(--space-16);justify-items:start;padding:var(--space-40) var(--space-24);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg)}
.bp-state h2,.bp-state p{margin:0}
.bp-state p{color:var(--color-text-secondary);max-width:none}

/* --- the correction dialog ---------------------------------------------------------------------- */
.bp-dialog .app-modal-body{display:grid;gap:var(--space-16)}
.bp-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12)}
.bp-error{margin:0;min-block-size:var(--size-24);font-size:var(--text-sm);color:var(--color-feedback-error-text);max-width:none}

@media (max-width:65rem){.bp-evidence{grid-template-columns:minmax(0,1fr)}.bp-proof-figure{font-size:var(--text-xxl)}}
@media (max-width:48rem){
  .bp-layout,.bp-evidence,.bp-when{grid-template-columns:minmax(0,1fr)}
  .bp-review{padding:var(--space-16)}
  .bp-proof{padding:var(--space-16)}
  .bp-actions>*{flex:1 1 100%}
  .page-heading>.bp-heading-side{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){#balance-photos-panel *{transition:none}}