/* Business screens. Builds on the tokens in styles.css and platform.css. */

body.biz { min-height: 100vh; }

/* Header. Every flex child may shrink (min-width: 0) and rows wrap, so nothing
   needs the page to clip sideways at 390px. */
.biz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.biz-top > * { min-width: 0; max-width: 100%; }
.biz-identity { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; min-width: 0; }
.biz-logo { display: block; height: 44px; width: auto; max-width: 100%; object-fit: contain; }
.biz-brand { display: flex; flex-direction: column; min-width: 0; }
.biz-product { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.biz-company { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.biz-session { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; min-width: 0; }
.biz-user { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.biz-role { font-size: .8rem; color: var(--muted); }
#user-role { font-weight: 600; color: var(--ink); }

/* Staging banner (only when the server says 'staging'): full width above the header, wraps on a phone. */
.biz-env-banner {
  margin: 0; padding: .45rem clamp(16px, 3vw, 32px); background: var(--charcoal); color: #fff;
  border-bottom: 3px solid var(--warn); font-size: .88rem; font-weight: 700; letter-spacing: .02em;
  text-align: center; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box;
}
.biz-header-link { min-height: 40px; }
.biz-header-link[hidden] { display: none; }
.biz-header-link[aria-current=page] { font-weight: 600; border-color: var(--ink); }

/* Navigation and shell notes */
.biz-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.biz-note { margin: 0; padding: .45rem clamp(16px, 3vw, 32px); font-size: .84rem; color: var(--muted); background: #f6f7f9; border-bottom: 1px solid var(--line); }
.biz-shell-message:empty { display: none; }
.biz-shell-message { margin: 8px clamp(16px, 3vw, 32px) 0; }

/* Main area */
.biz-main { display: block; padding: 16px clamp(16px, 3vw, 32px) 32px; max-width: 1200px; }
.biz-view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.biz-view > h1, .biz-signin > h1 { margin: 0 0 .3rem; }
.biz-main h1:focus { outline: none; }
.biz-main h1:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }
.biz-empty-text { margin: 0; }
.biz-error { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }

/* Controls: at least 40px tap targets */
.biz button, .biz .btn, .biz input, .biz select, .biz textarea { min-height: 40px; }
.biz button.link { min-height: 40px; }
.biz-input { font: inherit; font-size: .95rem; width: 100%; padding: .5rem .6rem; border: 1px solid #8c96a1; border-radius: 8px; background: #fff; color: var(--ink); }
.biz-input[aria-invalid=true] { border-color: var(--error); }
textarea.biz-input { resize: vertical; }

/* Forms */
.biz-form { display: flex; flex-direction: column; gap: .8rem; }
.biz-field { display: flex; flex-direction: column; gap: .25rem; }
.biz-field .field-label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.biz-required { font-weight: 400; color: var(--muted); }
.biz-field-error { margin: 0; font-size: .84rem; color: var(--error); }
.biz-field-error:empty { display: none; }
.biz-form-error:empty { display: none; }
.biz-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Create forms in a native disclosure, closed at first. The summary is the tap target
   (at least 40px), operable by keyboard natively, with a visible focus ring. */
.biz-disclosure > summary {
  display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .6rem;
  border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--accent); list-style: none;
}
.biz-disclosure > summary::-webkit-details-marker { display: none; }
.biz-disclosure > summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; line-height: 1;
}
.biz-disclosure[open] > summary::before { content: "\2212"; }
.biz-disclosure > summary:hover { background: #f6f7f9; }
.biz-disclosure > summary:focus { outline: none; }
.biz-disclosure > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.biz-disclosure-body { padding: .6rem .2rem .2rem; }
.biz-disclosure-note { margin: 0 0 .6rem; }
.biz-disclosure .biz-form { max-width: 36rem; } /* the same width as a full-width field, so rows line up */
.biz-disclosure .biz-input { max-width: 36rem; }
.biz-create { padding-top: .4rem; padding-bottom: .4rem; }
/* Wide screens: short fields share a row; name, address, notes, errors and buttons span the form. */
@media (min-width: 900px) {
  .biz-disclosure .biz-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem 1rem; }
  .biz-disclosure .biz-form > * { grid-column: 1 / -1; }
  .biz-disclosure .biz-form > .biz-field-half { grid-column: span 3; }
  .biz-disclosure .biz-form > .biz-field-third { grid-column: span 2; }
}

/* Sign-in and change password */
.biz-signin { max-width: 420px; margin: 24px auto; }
.biz-password > p { margin: 0 0 .6rem; }
.biz-field-rule { margin: 0; }

/* Tables: money right-aligned. Below 640px each row becomes a stacked block (see the end of this file). */
.biz table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.biz th, .biz td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.biz th.num, .biz td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.biz .table-wrap { overflow-x: auto; max-width: 100%; position: relative; } /* positioned, so visually hidden text inside a table is clipped with it */
.biz-row-link { display: inline-flex; align-items: center; min-height: 40px; overflow-wrap: break-word; }
.biz td { overflow-wrap: break-word; }

/* Customer screens */
.biz-section h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.biz-subform { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.biz-subform h3 { margin: 0 0 .5rem; }
.biz-facts { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.biz-facts dt { font-weight: 600; color: var(--muted); font-size: .88rem; }
.biz-facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.biz-status:empty { display: none; }
.biz-status { margin: 0; scroll-margin: 96px 0 24px; } /* focused after an action: clear of the sticky header */
.biz-status:focus { outline: none; }
.biz-status:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Dialog: always inside the viewport (390 px phones included); long content scrolls inside it. */
.biz-dialog { box-sizing: border-box; max-width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overflow-wrap: anywhere; }
.biz-dialog .biz-field { margin-bottom: .6rem; }
.biz-dialog-body { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
.biz-dialog-body p { margin: 0; }

/* Opportunity screen */
.biz-form-error .biz-error-action { margin-left: .4rem; }
.biz-estimate-state[data-saved=true] { font-weight: 600; }
.biz-stage { font-weight: 600; }
#estimates-table button { white-space: normal; text-align: left; }
/* The row's actions: "Open in estimator" (main) and, until saved, "Confirm estimate for proposal". */
.biz-estimate-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#estimates-table a.btn { display: inline-flex; align-items: center; min-height: 40px; white-space: normal; max-width: 100%; }
.biz-estimate-ident, .biz-estimate-label, .biz-estimate-created { display: block; }
.biz-estimate-number { font-weight: 600; }
.biz-estimate-name { overflow-wrap: anywhere; }

/* Proposal revisions */
.biz-revision-status { font-weight: 600; }
.biz-revision-status[data-revision-status=superseded], .biz-revision-status[data-revision-status=declined] { font-weight: 400; color: var(--muted); }
/* "Made from an earlier version of the estimate": a small warning pill under the status (dark text for contrast). */
.biz-older-estimate {
  display: inline-block; margin-top: .25rem; padding: .1rem .5rem; border: 1px solid var(--warn); border-left-width: 4px;
  border-radius: 999px; background: #fff8e6; color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box;
}
.biz-accepted-final { margin: .6rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--warn); background: #fff8e6; color: var(--ink); }
.biz-date-lines { display: flex; flex-direction: column; gap: .2rem; }
.biz-row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
#revisions-table button { white-space: normal; text-align: left; }
.biz-revision-create { flex-direction: column; align-items: flex-start; margin-top: .6rem; }
.biz-revision-create button { white-space: normal; text-align: left; max-width: 100%; }
.biz-button-detail { font-weight: 400; }
#revisions-panel > .biz-status { margin-bottom: .6rem; }

/* Jobs */
.biz-job-status { font-weight: 600; }
.biz-job-name { font-weight: 500; overflow-wrap: anywhere; }
#job-title { overflow-wrap: anywhere; }
.biz-draft-label { display: inline-block; align-self: flex-start; margin: 0 0 .6rem; }
.biz-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.biz-job-links { margin: .6rem 0; }
#job-contract h3 { margin: .8rem 0 .4rem; font-size: 1rem; }
.biz tfoot th, .biz tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; text-align: left; }
.biz tfoot td.num { text-align: right; }

/* Tables on a phone (below 640px). Each body row is a block; each cell is a two-column grid:
   its column's name (from data-label, set by dataTable) and its value. The header row is
   hidden visually but stays available to assistive technology. A footer (Total) row stays
   one weighted line. At 640px and above the rules above apply unchanged. */
@media (max-width: 639.98px) {
  .biz .table-wrap > table,
  .biz .table-wrap > table > tbody,
  .biz .table-wrap > table > tfoot,
  .biz .table-wrap > table > tbody > tr { display: block; width: 100%; }
  .biz .table-wrap > table > .biz-table-head { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .biz .table-wrap > table > tbody > tr { padding: .35rem 0; border-bottom: 1px solid var(--line); }
  .biz .table-wrap > table > tbody > tr > td {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .15rem .8rem; align-items: start;
    padding: .3rem .2rem; border-bottom: 0; white-space: normal; overflow-wrap: break-word; word-break: normal;
  }
  .biz .table-wrap > table > tbody > tr > td::before {
    content: attr(data-label); grid-column: 1; align-self: center;
    font-size: .84rem; font-weight: 600; color: var(--muted); text-align: left; font-variant-numeric: normal;
  }
  /* dataTable puts each value in one span.biz-cell-value; hand-built tables may hold other children. */
  .biz .table-wrap > table > tbody > tr > td > * { grid-column: 2; min-width: 0; justify-self: start; }
  .biz .table-wrap > table > tbody > tr > td > .biz-cell-value { display: block; max-width: 100%; }
  .biz .table-wrap > table > tbody > tr > td.num { text-align: right; }
  .biz .table-wrap > table > tbody > tr > td.num > * { justify-self: end; }
  .biz .table-wrap > table > tfoot > tr {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem;
    padding: .55rem .2rem; border-top: 2px solid var(--line); font-weight: 700;
  }
  .biz .table-wrap > table > tfoot > tr > th,
  .biz .table-wrap > table > tfoot > tr > td { display: block; padding: 0; border: 0; }
  .biz .table-wrap > table > tfoot > tr > td:empty,
  .biz .table-wrap > table > tfoot > tr > td.biz-cell-blank { display: none; }
}

@media (max-width: 480px) {
  .biz-top { padding: .6rem 16px; }
  .biz-session { width: 100%; justify-content: space-between; }
  .biz-signin { margin: 8px 0; }
}