:root {
  --black: #0b1f3a;
  --dark: #3f3f3f;
  --line: #111;
  --soft: #efefef;
  --paper: #ffffff;
  --green: #137333;
}

/* V307: searchable single-order Supabase restore. */
.cloud-restore-one-card { width: min(760px, 100%); max-height: min(780px, calc(100vh - 40px)); overflow: hidden; }
.cloud-restore-one-search { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #aebbc9; border-radius: 9px; font: inherit; }
.cloud-restore-one-results { min-height: 100px; max-height: 480px; margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; }
.cloud-restore-order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 9px; padding: 12px; border: 1px solid #d9e1eb; border-radius: 10px; background: #f8fafc; }
.cloud-restore-order-card strong,
.cloud-restore-order-card span,
.cloud-restore-order-card small { display: block; overflow-wrap: anywhere; }
.cloud-restore-order-card span { margin-top: 3px; color: #4b596b; }
.cloud-restore-order-card small { margin-top: 5px; color: #738096; }
.cloud-restore-order-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.cloud-restore-order-actions button { padding: 8px 10px; border: 1px solid #174eb9; border-radius: 7px; background: #fff; color: #174eb9; font-weight: 750; cursor: pointer; }
.cloud-restore-order-actions button.primary { background: #174eb9; color: #fff; }
.cloud-restore-empty { padding: 24px; color: #64748b; text-align: center; }
@media (max-width: 620px) {
  .cloud-restore-order-card { grid-template-columns: 1fr; }
  .cloud-restore-order-actions { justify-content: flex-start; }
}

/* Version 300: Supabase authentication preparation only. */
.cloud-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.cloud-status { padding: 6px 9px; border: 1px solid #64748b; border-radius: 999px; color: #dce6f4; font-size: 11px; font-weight: 750; white-space: nowrap; }
.cloud-status[data-state="connected"] { border-color: #4ade80; color: #bbf7d0; }
.cloud-status[data-state="error"] { border-color: #fca5a5; color: #fecaca; }
.cloud-button { min-height: 32px; padding: 5px 9px; border: 1px solid #7183a0; border-radius: 7px; background: #142d4d; color: #fff; font-size: 11px; font-weight: 750; }
.cloud-button:hover, .cloud-button:focus-visible { border-color: #8fb8ff; background: #19385f; outline: none; }
.cloud-manual-sync { min-height: 27px; padding: 4px 8px; border-color: #38bdf8; background: #0b3f63; color: #e0f2fe; font-size: 10px; text-transform: uppercase; }
.cloud-manual-sync:hover:not(:disabled), .cloud-manual-sync:focus-visible:not(:disabled) { border-color: #7dd3fc; background: #075985; }
.cloud-manual-sync:disabled { opacity: .7; cursor: wait; }
.cloud-login-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 22px; background: rgba(15, 23, 42, .58); }
.cloud-login-modal[hidden] { display: none; }
.cloud-login-card { width: min(430px, 94vw); padding: 24px; border: 1px solid #d8e0eb; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .3); }
.cloud-login-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cloud-login-head h2 { margin: 0; color: #102a43; font-size: 22px; }
.cloud-login-head button { border: 0; background: transparent; color: #334155; font-size: 22px; }
.cloud-login-card p { color: #52606d; line-height: 1.45; }
.cloud-login-card label { display: grid; gap: 6px; margin-top: 13px; color: #334155; font-size: 13px; font-weight: 800; }
.cloud-login-card input { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid #9fb3c8; border-radius: 8px; }
.password-input-wrap { position: relative; display: block; }
.password-input-wrap input { padding-right: 50px; }
.password-visibility-toggle { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 38px; height: 34px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #52667d; font-size: 17px; cursor: pointer; }
.password-visibility-toggle:hover, .password-visibility-toggle:focus-visible, .password-visibility-toggle.is-visible { background: #eaf2ff; color: #155eef; }
.password-visibility-toggle:focus-visible { outline: 2px solid #155eef; outline-offset: 1px; }
.cloud-login-message { min-height: 22px; margin-top: 12px; color: #b00020; font-weight: 700; }
.cloud-login-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.unsaved-action-card { width: min(680px, 94vw); }
.unsaved-action-details { display: grid; gap: 7px; margin-top: 14px; padding: 14px 16px; border: 1px solid #cbd8e8; border-radius: 10px; background: #f7faff; color: #102a43; font-size: 15px; line-height: 1.4; }
.unsaved-action-details strong { color: #0b1f3a; }
.unsaved-action-details.unsaved-action-diff { max-height: min(42vh, 360px); overflow: auto; white-space: pre-wrap; }
.unsaved-action-note { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid #d97706; border-radius: 7px; background: #fff8e8; color: #553812 !important; }
.unsaved-action-actions { flex-wrap: wrap; }
.unsaved-action-actions button { min-height: 44px; padding: 10px 14px; }
.unsaved-action-actions .unsaved-continue { border-color: #d97706; background: #fff8e8; color: #92400e; font-weight: 800; }
@media (max-width: 680px) {
  .unsaved-action-actions { align-items: stretch; flex-direction: column-reverse; }
  .unsaved-action-actions button { width: 100%; }
}
@media (max-width: 1180px) { .cloud-status { display: none; } }

/* Version 301: manual backup of the currently open saved order. */
.tabs .cloud-backup-button { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 750; }
.tabs .cloud-backup-button:hover:not(:disabled), .tabs .cloud-backup-button:focus-visible:not(:disabled) { border-color: #1d4ed8; background: #dbeafe; color: #1e40af; }
.tabs .cloud-backup-button:disabled { border-color: #d0d8e5; background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.reports-menu button:disabled { cursor: not-allowed; opacity: .52; }

/* Version 209: consistent measurement typography and custom fabric-model entry. */
@media screen {
  #customerTab h3 { font-size: 15px; }
  #measurementsTable thead th { font-size: 14px; }
  #measurementsTable select[data-field="fabricModel"] { font-size: 18px; }
  .fabric-model-add-button { margin-top: 12px; border-color: var(--studio-border-strong); background: #fff; color: var(--studio-accent); font-weight: 800; }
  #customerTab .measurements-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  #customerTab .measurements-heading-row h3 { margin: 0; }
  #customerTab .sqft-button { margin: 0; padding: 8px 18px; border: 1px solid var(--glass-accent); border-radius: 999px; background: #fff; color: var(--glass-accent); font-family: var(--glass-font-ui); font-weight: 700; line-height: 1; }
  #customerTab .sqft-button.active { background: var(--glass-accent); color: #fff; box-shadow: 0 3px 9px rgba(47, 90, 240, .22); }
  #customerTab .sqft-button:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }
  .fabric-model-dialog { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px; background: rgba(16, 19, 35, .36); }
  .fabric-model-dialog[hidden] { display: none; }
  .fabric-model-dialog-card { width: min(560px, 100%); box-sizing: border-box; padding: 22px; border: 1px solid var(--studio-border); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(16, 19, 35, .2); }
  .fabric-model-dialog-card h3 { margin: 0 0 16px; color: var(--studio-text); font-size: 20px; letter-spacing: 0; text-transform: none; }
  .fabric-model-dialog-card > label, .fabric-model-size-grid label { display: grid; gap: 6px; margin-top: 12px; color: var(--studio-muted); font-size: 12px; font-weight: 800; }
  .fabric-model-dialog-card input { min-height: 42px; box-sizing: border-box; border: 1px solid var(--studio-border); border-radius: 8px; padding: 9px 11px; background: var(--studio-surface-2); color: var(--studio-text); font-size: 16px; }
  .fabric-model-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .attachment-field { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--studio-border); border-radius: 10px; background: var(--studio-surface-2, #f7f9fc); }
  .attachment-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--studio-muted, #4b5162); margin-bottom: 10px; }
  .attachment-empty button, .attachment-filled button { border: 1px solid var(--studio-border-strong); background: #fff; color: var(--studio-text, #101323); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer; margin-right: 8px; }
  .attachment-filled { display: flex; align-items: center; gap: 10px; }
  .attachment-filled span { font-weight: 700; font-size: 13.5px; }
  .fabric-model-dialog-note { margin: 15px 0 0; color: var(--studio-muted); font-size: 13px; line-height: 1.4; }
}

/* Version 139: scan upload and OCR review foundation. */
.scan-intro { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin: 18px 0; }
.scan-intro h2 { margin: 0 0 6px; font-size: 28px; }
.scan-intro p { margin: 0; color: #596678; font-size: 16px; }
.scan-safe-note { color: #267044; background: #eef8f0; border: 1px solid #b8ddc1; padding: 10px 12px; border-radius: 8px; font-weight: 700; white-space: nowrap; }
.scan-upload-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px dashed #8ba7d4; border-radius: 10px; padding: 16px; background: #f7faff; }
.scan-document-status { flex: 1; min-width: 220px; font-weight: 700; color: #334155; }
.scan-ocr-note { margin: 10px 0 0; color: #596678; font-size: 14px; }
[hidden] { display: none !important; }
.scan-review-panel { margin-top: 20px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 16px; background: #fff; }
.scan-review-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.scan-review-heading h3 { margin: 0; font-size: 20px; }
.scan-review-heading span, .scan-review-message { color: #b42318; font-weight: 700; }
.scan-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scan-review-grid label { display: grid; gap: 5px; font-weight: 800; }
.scan-review-grid input { min-height: 40px; }
.scan-measurements-wrap { margin-top: 16px; }
.scan-measurements-wrap input { width: 100%; box-sizing: border-box; min-width: 88px; }
.scan-low-confidence { border: 2px solid #c62828 !important; background: #fff6f6; color: #a61919; }
.scan-confidence-low { color: #b42318; font-weight: 800; }
.scan-review-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
@media (max-width: 720px) { .scan-intro { flex-direction: column; } .scan-safe-note { white-space: normal; } .scan-review-grid { grid-template-columns: 1fr; } .scan-review-actions { align-items: stretch; flex-direction: column; } }

* { box-sizing: border-box; }

.backup-status-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 22px; background: rgba(15, 23, 42, .42); }
.backup-status-card { width: min(720px, 96vw); max-height: 92vh; overflow: auto; padding: 24px; border: 1px solid #d8e0eb; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.backup-status-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.backup-status-head h2 { margin: 0; padding: 12px 18px; border-radius: 9px; background: #2f5bea; color: #fff; font-size: 24px; }
.backup-status-head button { border: 0; background: transparent; color: #334155; font-size: 24px; cursor: pointer; }
.backup-status-summary { display: grid; gap: 0; margin-bottom: 18px; padding: 6px 18px; border: 1px solid #cbdcf0; border-radius: 12px; background: #f3f8ff; }
.backup-status-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #d7e1ed; font-size: 16px; }
.backup-status-summary div:last-child { border-bottom: 0; }
.backup-status-summary strong { color: #26852d; text-align: right; overflow-wrap: anywhere; }
.backup-status-summary div:nth-child(4) strong { color: #2459d8; }
.backup-status-options { display: grid; gap: 12px; margin-bottom: 18px; }
.backup-status-options label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border: 1px solid #d9e1eb; border-radius: 10px; background: #fff; font-weight: 700; }
.backup-status-options label span { display: flex; align-items: center; gap: 10px; }
.backup-status-options input { width: 19px; height: 19px; accent-color: #16a12a; }
.backup-status-options small { color: #5b6470; font-weight: 500; text-align: right; }
.backup-history { margin: 0 0 18px; padding: 15px 18px; border: 1px solid #d9e1eb; border-radius: 10px; background: #f8fafc; }
.backup-history h3 { margin: 0 0 4px; color: #172033; font-size: 16px; }
.backup-history p { margin: 0 0 10px; color: #5b6470; font-size: 13px; line-height: 1.4; }
.backup-history ul { display: grid; gap: 8px; max-height: 180px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.backup-history li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #e1e7ef; font-size: 13px; }
.backup-history li strong { color: #2459d8; overflow-wrap: anywhere; }
.backup-history li span { flex: 0 0 auto; color: #5b6470; }
.backup-history .backup-history-empty { color: #687386; }
.backup-status-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.backup-status-actions button { flex: 1 1 220px; min-height: 44px; }
.backup-status-message { min-height: 20px; margin-top: 16px; padding: 12px 14px; border: 1px solid #8ac28c; border-radius: 8px; background: #eef9ef; color: #27742b; font-weight: 700; }
.backup-status-note { margin: 14px 0 0; color: #5f6874; font-size: 13px; line-height: 1.4; }
@media (max-width: 640px) { .backup-status-summary div, .backup-status-options label { align-items: flex-start; flex-direction: column; } .backup-status-summary strong, .backup-status-options small { text-align: left; } }

.workflow-input-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 22px; background: rgba(15, 23, 42, .48); }
.workflow-input-modal[hidden] { display: none; }
.workflow-input-card { width: min(440px, 94vw); padding: 24px; border: 1px solid #d8e0eb; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .28); }
.workflow-input-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workflow-input-head h2 { margin: 0; color: #102a43; font-size: 22px; }
.workflow-input-head button { border: 0; background: transparent; color: #334155; font-size: 22px; cursor: pointer; }
.workflow-input-card p { color: #52606d; line-height: 1.45; }
.workflow-input-card input { width: 100%; margin: 8px 0 8px; padding: 12px; border: 1px solid #9fb3c8; border-radius: 8px; }
.workflow-input-error { min-height: 22px; color: #b00020; font-weight: 700; }
.workflow-input-actions, .restore-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.workflow-input-actions button, .restore-choice-actions button { flex: 1 1 150px; min-height: 42px; }
.restore-choice-card { width: min(560px, 94vw); }
.restore-choice-note { margin: 12px 0; padding: 12px 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #1e3a5f; line-height: 1.45; }
.restore-choice-details { max-height: min(42vh, 380px); margin: 12px 0; overflow: auto; border: 1px solid #d8e0eb; border-radius: 10px; background: #f8fafc; }
.restore-choice-details details + details { border-top: 1px solid #d8e0eb; }
.restore-choice-details summary { position: sticky; top: 0; z-index: 1; padding: 11px 13px; background: #f1f5f9; color: #102a43; font-weight: 800; cursor: pointer; }
.restore-choice-details ol { margin: 0; padding: 4px 14px 10px 42px; }
.restore-choice-details li { padding: 7px 2px; color: #334155; line-height: 1.35; }
.restore-choice-details li + li { border-top: 1px solid #e2e8f0; }
.restore-choice-details li input { width: 18px; height: 18px; margin: 0 9px 0 0; vertical-align: -3px; accent-color: #0f4c81; }
.restore-choice-details .restore-select-all { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid #e2e8f0; background: #fff; color: #0f4c81; font-weight: 800; }
.restore-choice-details .restore-select-all input { width: 19px; height: 19px; margin: 0; accent-color: #0f4c81; }
.restore-choice-details .restore-skip-reason { display: block; color: #9f1239; font-size: 12px; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(231, 239, 250, .85), transparent 32rem),
    linear-gradient(135deg, #f8fafc 0%, #eef3f9 48%, #f8fafc 100%);
  color: #111;
}

/* Front screen: a calm app layout with a separate customer drawer. The order
   forms below deliberately retain their existing familiar layout and
   manufacturing behaviour. */
.front-shell {
  min-height: 100vh;
}

.app-content { min-width: 0; }

.app-lock {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .72);
}

.app-lock[hidden] { display: none; }

.app-lock-card {
  width: min(92vw, 420px);
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  text-align: center;
}

.app-lock-card h2 { margin: 0 0 8px; }
.app-lock-card p { color: #555; }
.app-lock-card input { width: 100%; margin: 8px 0 12px; padding: 12px; border: 1px solid #aaa; border-radius: 8px; text-align: center; }
.app-lock-card button { width: 100%; }
.app-lock-error { min-height: 22px; margin-top: 10px; color: #b00020; font-weight: 700; }

button, input, select {
  font: inherit;
}

button {
  border: 1px solid #222;
  background: #fff;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

button.primary {
  background: var(--black);
  color: #fff;
}

/* Keep every print action consistent with the app's primary black buttons. */
button[id^="print"], #downloadPaymentsPdfBtn { border-color: #222; background: #fff; color: #111; padding: 9px 12px; border-radius: 8px; font-size: inherit; line-height: normal; font-weight: 400; }
button[id^="print"]:hover, button[id^="print"]:focus-visible, #downloadPaymentsPdfBtn:hover, #downloadPaymentsPdfBtn:focus-visible { background: #f1f1f1; color: #111; }

.actions button.active-action {
  background: #155eef;
  color: #fff;
  border-color: #155eef;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 82px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid rgba(191, 202, 217, .78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 3px 18px rgba(37, 55, 80, .06);
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  overflow: visible;
}

.topbar-brand { grid-column: 1; display: flex; align-items: center; gap: 18px; min-width: 0; flex-shrink: 0; }
.topbar-navigation { grid-column: 2; position: static; transform: none; display: flex; align-items: center; gap: 10px; margin: 0; min-width: max-content; max-width: none; flex-shrink: 0; overflow: visible; white-space: nowrap; }
.topbar-navigation::-webkit-scrollbar { display: none; }
.topbar-navigation button { padding: 9px 13px; border-color: #252525; border-radius: 8px; font-size: 15px; white-space: nowrap; }
.topbar-navigation button.active-action { background: #155eef; color: #fff; border-color: #155eef; }
.topbar-navigation #saveOrderBtn { background: #fff; color: #111; border-color: #222; }
.menu-wrap { position: relative; flex: 0 0 auto; }
.menu-button { padding: 0; border: 0; color: #243044; background: transparent; font-size: 24px; line-height: 1; }
.menu-button:hover, .menu-button:focus-visible { color: #155eef; background: #eef4ff; outline: 2px solid #155eef; outline-offset: 4px; border-radius: 5px; }
.reports-menu { position: absolute; top: calc(100% + 14px); left: -12px; z-index: 120; width: 260px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 14px; border: 1px solid #cbd6e5; border-radius: 16px; background: rgba(255,255,255,.99); box-shadow: 0 18px 38px rgba(37,55,80,.22); }
.reports-menu-title { padding: 2px 8px 8px; color: #64748b; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.reports-menu-backup-title { margin-top: 16px; padding-top: 14px; border-top: 1px solid #dbe3ee; }
.reports-menu::-webkit-scrollbar { width: 12px; }
.reports-menu::-webkit-scrollbar-track { background: #eef2f7; border-radius: 999px; }
.reports-menu::-webkit-scrollbar-thumb { background: #8291a7; border: 3px solid #eef2f7; border-radius: 999px; }
.reports-menu::-webkit-scrollbar-thumb:hover { background: #5f7088; }
.reports-menu button { display: block; width: 100%; margin: 8px 0; padding: 12px 14px; border: 1px solid #d3dbe6; border-radius: 10px; background: #fff; color: #111; text-align: left; font-size: 15px; font-weight: 700; white-space: nowrap; }
.reports-menu button { box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.reports-menu button:hover, .reports-menu button:focus-visible { background: #f1f1f1; outline: 2px solid #155eef; outline-offset: 1px; }
.reports-menu .menu-payment-button, .reports-menu #pendingOrdersBtn { border-color: #b9dfc5; background: #eaf8ef; color: #176b37; }
.estimate-dashboard { padding: 28px; border: 1px solid #d8e1ec; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(15, 31, 58, .08); }
.estimate-dashboard h2 { margin: 0; color: #102a43; font-size: 28px; }
.estimate-dashboard > p { margin: 7px 0 22px; color: #617083; }
.estimate-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 540px)); gap: 18px; }
.estimate-form-card { display: grid; gap: 12px; box-sizing: border-box; width: 100%; min-height: 170px; padding: 30px 36px; border: 2px solid #b9d0ec; border-radius: 24px; background: #eaf2fd; color: #102a43; text-align: left; text-decoration: none; cursor: pointer; }
.estimate-form-card span { font-size: 21px; font-weight: 800; }
.estimate-form-card strong { font-size: 38px; line-height: 1; }
.estimate-form-card small { color: #5a6d84; font-size: 15px; font-weight: 700; }
.estimate-form-card:hover, .estimate-form-card:focus-visible { border-color: #2f6fd0; background: #dceafd; color: #102a43; outline: 3px solid rgba(47,111,208,.2); outline-offset: 2px; }
.estimate-form-viewer { position: fixed; inset: 0; z-index: 900; overflow: auto; padding: 28px; background: rgba(15, 31, 58, .68); }
.estimate-form-viewer-card { width: min(940px, 100%); margin: 0 auto; padding: 18px; border-radius: 18px; background: #eef3f9; box-shadow: 0 24px 70px rgba(15, 31, 58, .35); }
.estimate-print-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 18px 20px; border: 1px solid #d8e1ec; border-radius: 14px; background: #fff; }
.estimate-print-toolbar h2 { margin: 0; color: #102a43; font-size: 24px; }
.estimate-print-toolbar p { margin: 5px 0 0; color: #617083; }
.estimate-viewer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.estimate-print-sheet { width: min(100%, 850px); margin: 0 auto; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(15, 31, 58, .13); }
.estimate-print-sheet img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .estimate-form-grid { grid-template-columns: 1fr; } .estimate-form-viewer { padding: 10px; } .estimate-form-viewer-card { padding: 10px; } .estimate-print-toolbar { align-items: stretch; flex-direction: column; } }
@media print {
  @page { size: letter portrait; margin: 10mm; }
  #estimateTab,
  #estimateTab.printing { width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
  #estimateTab .estimate-form-viewer { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; }
  #estimateTab .estimate-form-viewer-card { width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
  #estimateTab .estimate-print-sheet { width: 100% !important; height: auto !important; margin: 0 !important; box-shadow: none !important; overflow: hidden !important; break-inside: avoid !important; page-break-inside: avoid !important; }
  #estimateTab .estimate-print-sheet img { display: block !important; width: 100% !important; height: auto !important; }
}
.other-wrap { position: relative; flex: 0 0 auto; }
.other-menu { top: calc(100% + 10px); left: 0; }

.topbar-tools { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: 0; flex-shrink: 0; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.header-icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; color: #334155; background: transparent; }
.header-icon-button:hover, .header-icon-button:focus-visible { color: #155eef; background: #eef4ff; outline: 2px solid #155eef; outline-offset: 1px; }
.header-icon-button:focus { outline: none; }
.header-icon-button:focus-visible { outline: 2px solid #155eef; outline-offset: 1px; }
.header-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-search-button { display: flex; align-items: center; gap: 10px; width: 180px; height: 38px; padding: 0 13px; border: 1px solid #d8e0eb; border-radius: 10px; background: #fff; color: #334155; cursor: pointer; font-size: 15px; text-align: left; }
.header-search-button svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-search-button span { color: #7b8797; }
.header-search-button:hover, .header-search-button:focus-visible { border-color: #155eef; box-shadow: 0 0 0 2px rgba(21,94,239,.14); outline: none; }

/* Keep the third-row labels as dark and readable as the order summary above. */
.tabs .tab { color: #101323; }
.tabs .tab.active { color: #fff; }
.tabs button:not(.tab):hover, .tabs .tab:not(.active):hover { transform: translateY(-1px); border-color: #7da2ff; background: #f3f7ff; box-shadow: 0 3px 9px rgba(37, 99, 235, .14); }
.tabs button:not(.tab), .tabs .tab { transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; }
.notification-button > span { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 99px; background: #2463eb; }
.header-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #738097; font-size: 13px; font-weight: 800; }
.header-backup-timer { min-width: 150px; margin-right: 4px; color: #111; font-size: 18px; font-weight: 800; white-space: nowrap; }
.header-backup-timer.overdue { color: #ff5a5f; }
.header-version-avatar { background: #738097; font-size: 10px; }
.header-chevron { width: 28px; }

.notification-panel {
  position: fixed;
  top: 90px;
  right: 28px;
  z-index: 300;
  width: min(360px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid #cbd6e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 30px rgba(37, 55, 80, .2);
}
.notification-panel h2 { margin: 0 0 10px; font-size: 17px; }
.notification-panel ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.notification-panel li { padding: 9px 10px; border-radius: 8px; background: #fff5f6; color: #a40020; font-size: 14px; font-weight: 700; }
.notification-panel .all-clear { margin: 0; color: #137333; font-size: 14px; font-weight: 700; }

.topbar h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.topbar p {
  display: none;
  color: #555;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid rgba(213, 222, 233, .95);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 6px 16px rgba(37, 55, 80, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.action-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; max-width: 100%; }
.action-row-order { justify-content: center; width: 100%; overflow-x: auto; padding-bottom: 4px; }
.actions button { flex: 0 0 auto; padding: 9px 13px; border-color: #252525; border-radius: 8px; box-shadow: none; font-size: 15px; white-space: nowrap; }

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 4px 18px 22px;
  align-items: start;
}

.action-area { display: none !important; }
.workspace { grid-row: 1; }
.tabs.report-hidden { display: none; }

/* The action bar always keeps the full width. Opening Customers gives the
   panel its own column only below the action bar, so it never overlaps or
   changes the action buttons. */
main.customers-open {
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "actions actions"
    "workspace customers";
}
main.customers-open .action-area { grid-area: actions; }
main.customers-open .workspace { grid-area: workspace; }
main.customers-open .workspace,
main.customers-open .customer-sheet,
main.customers-open .info-grid { min-width: 0; }
main.customers-open .workspace { overflow-x: hidden; }

.sidebar {
  position: fixed;
  top: 96px;
  right: 18px;
  bottom: 22px;
  z-index: 30;
  width: 320px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(196, 207, 222, .92);
  border-radius: 14px;
  padding: 16px;
  overflow: auto;
  box-shadow: 0 10px 28px rgba(37, 55, 80, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  transition: transform .24s ease, opacity .2s ease;
}

.sidebar.customer-search-open { z-index: 220; border-color: #155eef; box-shadow: 0 0 0 3px rgba(21, 94, 239, .16), 0 10px 28px rgba(37, 55, 80, .08); opacity: 1; pointer-events: auto; transform: translateX(0); }

main.customers-open .sidebar {
  position: relative;
  inset: auto;
  grid-area: customers;
  align-self: start;
  width: 320px;
  max-height: calc(100vh - 112px);
}

.sidebar h2 {
  margin: 0 -16px 14px;
  padding: 0 16px 14px;
  font-size: 20px;
  border-bottom: 1px solid #e3e9f1;
}

.sidebar input {
  width: 100%;
  padding: 10px;
  border: 1px solid #c5cfdb;
  border-radius: 8px;
  margin-bottom: 10px;
}

.sidebar-sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #49576b;
  font-size: 13px;
  font-weight: 700;
}
.sidebar-sort-control select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #c5cfdb;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font: inherit;
  cursor: pointer;
}
.sidebar-sort-control select:focus-visible { outline: 3px solid #8fb8ff; outline-offset: 2px; }

.order-card {
  border: 1px solid #d9e1eb;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 3px 10px rgba(37, 55, 80, .045);
}

.order-card strong { display: block; }
.order-card small { color: #555; display: block; margin-top: 3px; }
.order-card .mini-actions { display: flex; gap: 6px; margin-top: 8px; }
.order-card button { padding: 5px 7px; border-radius: 6px; font-size: 12px; }
.order-card button.downloaded { background: var(--green); color: #fff; border-color: var(--green); }
.draft-orders-section { margin:14px 0 16px; padding:12px; border:1px solid #efb866; border-radius:12px; background:#fffaf2; }
.sidebar .draft-orders-heading { display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0; font-size:18px; }
.draft-order-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#fff0d7; color:#a65300; font-size:12px; }
.order-drafts-list { display:grid; gap:8px; }
.draft-order-card { border-color:#efb866; background:#fffaf2; }
.draft-order-card > small:nth-of-type(1) { color:#a65300; font-weight:700; }
.draft-order-empty { padding:2px 0; color:#718096; font-size:13px; }
.sidebar .saved-orders-heading { margin:0 0 10px; font-size:16px; color:#46566b; }
#exportExcelBtn.downloaded { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.order-card button.export-stale { background: #c96700; color: #fff; border-color: #a95400; }
#exportExcelBtn.export-stale { background: #c96700 !important; color: #fff !important; border-color: #a95400 !important; }
.order-card button.open-active { background: #155eef; color: #fff; border-color: #155eef; }
.order-formula-deduction { margin-left: 8px; font-size: 1em; font-weight: inherit; white-space: nowrap; }
.sidebar .mini-actions { flex-wrap: wrap; }


.statement-order-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d0928;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

.small-note {
  font-size: 12px;
  color: #666;
}

.backup-timer {
  margin: 12px 0 4px;
  padding: 9px 10px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #f7f7f7;
  color: #333;
  font-weight: 700;
  text-align: center;
}

.backup-timer.overdue {
  border-color: #b00020;
  background: #fff0f2;
  color: #b00020;
}

.workspace {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.tabs {
  position: sticky;
  top: 126px;
  z-index: 89;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-top: none;
  border-bottom: 1px solid #d6e0ec;
}

.current-order-banner {
  position: sticky;
  top: 82px;
  z-index: 90;
  display: grid;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 24px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.75);
  border-bottom: none;
  margin: 0;
  color: #111;
  grid-template-columns: minmax(100px, .75fr) minmax(150px, 1.1fr) minmax(180px, 1.35fr) minmax(130px, .9fr) minmax(145px, 1fr) minmax(95px, .7fr);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-order-banner span { min-width: 0; padding: 0 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.current-order-banner span + span { border-left: 2px solid #d6e0ec; }
#measurementsTable input.measurement-invalid { color: #b00020 !important; background: #fff1f2 !important; border-color: #b00020 !important; box-shadow: inset 0 0 0 2px #b00020; }
.measurement-validation-message { margin: 8px 4px 0; color: #b00020; font-size: 14px; font-weight: 700; line-height: 1.35; }
input.required-missing { border: 2px solid #b00020 !important; background: #fff1f2 !important; }

@media (max-width: 1050px) {
  .tabs { padding-right: 0; }
  .current-order-banner { position: static; margin-left: 8px; min-width: 0; }
}

/* Highest-priority final layout cascade. */
main { gap: 0 !important; padding-top: 0 !important; }
.workspace { width: 100% !important; min-width: 0; }
.tabs { margin: 0 !important; width: 100% !important; }

/* Remove the dark row-1 boundary artifact; retain one light divider only. */
.topbar { border-bottom: 1px solid #dce4ee !important; box-shadow: none !important; }
.current-order-banner { border-top: 1px solid #dce4ee !important; box-shadow: none !important; }

/* Final width/gap correction: the tabs live inside main's padded content area,
   so they must fill that area rather than adding a second inset. */
main { padding-top: 0; }
.tabs { margin: 0; width: 100%; }

.tab.active {
  background: var(--black);
  color: #fff;
}

.tabs #saveOrderBtn {
  background: #155eef;
  color: #fff;
  border-color: #155eef;
}
.pending-order-row { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0 16px; padding: 10px 14px; border: 2px solid #ff9700; border-radius: 10px; background: #fff4e2; color: #ed4c00; cursor: pointer; }
.pending-order-row input { width: 24px; height: 24px; margin: 0; accent-color: #ed4c00; cursor: pointer; }
.pending-order-label { font-size: 16px; font-weight: 900; letter-spacing: .01em; }
.pending-order-help { margin-left: auto; color: #9b9b9b; font-size: 14px; font-weight: 600; }
.pending-order-row:hover { background: #ffeed5; }
.pending-order-row.is-pending { background: #ffe8c2; }
@media (max-width: 700px) { .pending-order-row { gap: 10px; padding: 9px 11px; } .pending-order-label { font-size: 14px; } .pending-order-help { font-size: 12px; } }

.panel { display: none; }
.panel.active { display: block; }

.data-safety-screen { max-width: 1180px; margin: 0 auto; padding: 28px; border: 1px solid #d8e1ec; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(15,31,58,.08); color: #102a43; }
.data-safety-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.data-safety-header h2 { margin: 0; font-size: 28px; }
.data-safety-header p { margin: 8px 0 0; color: #52657c; }
.data-safety-header button { padding: 11px 18px; border: 0; border-radius: 9px; background: #2863ee; color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; }
.data-safety-header button:disabled { opacity: .6; cursor: wait; }
.data-safety-status { min-height: 24px; margin: 18px 0; color: #425a77; font-weight: 600; }
.data-safety-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.data-safety-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border: 1px solid #dbe4f0; border-radius: 12px; background: #f4f8fd; }
.data-safety-card span { color: #51647a; font-size: 13px; font-weight: 700; }
.data-safety-card strong { overflow-wrap: anywhere; font-size: 20px; }
.data-safety-card small { color: #63758a; }
.data-safety-results { margin-top: 24px; }
.data-safety-results h3 { margin: 0 0 12px; }
.data-safety-issue { display: grid; gap: 5px; margin: 8px 0; padding: 13px 16px; border-left: 5px solid #d89617; border-radius: 8px; background: #fff8e7; overflow-wrap: anywhere; }
.data-safety-issue span { color: #384b60; }
.data-safety-error { border-left-color: #d43d46; background: #fff0f1; }
.data-safety-info { border-left-color: #3c78bf; background: #edf6ff; }
.data-safety-empty { padding: 16px; border-radius: 10px; background: #eaf8ef; color: #176b37; }
.data-safety-note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #dde5ef; color: #52657c; line-height: 1.5; }
@media (max-width: 800px) { .data-safety-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .data-safety-screen { padding: 18px; } .data-safety-header { flex-direction: column; } .data-safety-summary { grid-template-columns: 1fr; } }

.sheet {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(203, 213, 225, .92);
  padding: 22px 26px;
  max-width: 1220px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(37, 55, 80, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.black-title, .brand {
  background: var(--black);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  padding: 12px 14px;
  letter-spacing: .5px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 2px solid var(--line);
  border-top: 2px solid var(--line);
}

.info-grid > label {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  min-width: 0;
  min-height: 58px;
  align-items: center;
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  background: #e8e8e8;
  font-weight: 800;
  font-size: 16px;
}

.customer-pricing-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-pricing-row > label {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  min-width: 0;
  min-height: 58px;
  align-items: center;
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  background: #e8e8e8;
  font-weight: 800;
  font-size: 16px;
}

.customer-pricing-row > label:last-child { border-right: 0; }

.customer-payment-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The shipping row contains a nested checkbox label. Keep that control
   compact so it cannot stretch the grid row or collide with Order By. */
.shipping-label .checkbox-inline {
  min-height: 0;
  height: auto;
  border: 0;
  display: inline-flex;
  grid-template-columns: none;
  padding: 0 0 0 10px;
}

.info-grid input, .info-grid select {
  height: 100%;
  width: 100%;
  min-width: 0;
  border: 0;
  border-left: 2px solid var(--line);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  background: #fff;
}

.info-grid label.checkbox-field {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.info-grid label.checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: #333;
}

.shipping-address-field {
  grid-column: auto;
  display: grid;
  grid-template-columns: 210px 1fr;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  border-bottom: 2px solid var(--line);
  background: #e8e8e8;
  font-weight: 800;
}

.info-grid > label.full-address { grid-column: 1 / -1; }

/* Keep the order number entry compact while preserving the familiar label. */
.info-grid > label.order-number-field input {
  width: 50%;
  justify-self: start;
}

.info-grid > label.order-number-field input[readonly] {
  background: #e8e8e8;
  cursor: not-allowed;
}

/* Give the shipping address more typing space by moving its checkbox/label
   slightly left within the right-hand field. */
.shipping-address-field {
  grid-template-columns: 180px 1fr;
  margin-left: -165px;
  width: calc(100% + 165px);
}
.shipping-label { padding-left: 4px; }
.shipping-label .checkbox-inline { padding-left: 4px; }

.shipping-label { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 5px 10px; }
.shipping-value { display: flex; align-items: center; gap: 12px; height: 100%; border-left: 2px solid var(--line); background: #fff; }
.shipping-value > input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 8px 12px; font-weight: 700; font-size: 20px; text-align: center; }
.shipping-value > input:disabled { background: #f0f0f0; color: #666; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; white-space: nowrap; font-size: 13px; font-weight: 700; }
.checkbox-inline input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: #333; }

.builder-dialog { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(0, 0, 0, .55); }
.builder-dialog[hidden] { display: none; }
.builder-dialog-card { width: min(92vw, 520px); padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.builder-dialog-card h3 { margin-top: 0; }
.builder-dialog-card label { display: grid; gap: 5px; margin: 10px 0; font-weight: 700; }
.builder-dialog-card input { width: 100%; padding: 10px; border: 1px solid #aaa; border-radius: 7px; }
.builder-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.assign-builder-order-card { width: min(94vw, 760px); max-height: min(88vh, 760px); overflow: hidden; }
.assign-builder-order-card > p { margin: -4px 0 14px; color: #5d6b7d; }
.assign-builder-order-results { max-height: 470px; margin-top: 14px; overflow-y: auto; border: 1px solid #d8e1ec; border-radius: 10px; background: #fff; }
.assign-order-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 14px; border-bottom: 1px solid #e1e7ef; }
.assign-order-result:last-child { border-bottom: 0; }
.assign-order-result strong, .assign-order-result span, .assign-order-result small { display: block; overflow-wrap: anywhere; }
.assign-order-result span { margin-top: 3px; color: #334155; }
.assign-order-result small { margin-top: 4px; color: #718096; }
.assign-order-result button { min-width: 88px; border-color: #9ab7e6; background: #fff; color: #1d4ed8; font-weight: 800; }
.assign-order-result button:hover:not(:disabled), .assign-order-result button:focus-visible:not(:disabled) { border-color: #1d4ed8; background: #eaf2ff; color: #123d9a; }
.assign-order-empty { margin: 0; padding: 28px 16px; color: #687386; text-align: center; }
.builders-row-actions { display: flex; justify-content: center; gap: 8px; white-space: nowrap; }
.builders-manager-assign { border-color: #9ab7e6; color: #1d4ed8; background: #fff; }
.builders-manager-assign:hover, .builders-manager-assign:focus-visible { border-color: #1d4ed8; background: #eaf2ff; color: #123d9a; }
.builders-manager-delete { border-color: #efb5b5; color: #a61b1b; background: #fff; }
.builders-manager-delete:hover, .builders-manager-delete:focus-visible { background: #fff0f0; }
.builders-page-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.builders-page-toolbar label { display: grid; flex: 1 1 420px; max-width: 620px; gap: 6px; color: #132b46; font-size: 13px; font-weight: 800; }
.builders-page-toolbar input { width: 100%; padding: 11px 13px; border: 1px solid #aebdce; border-radius: 8px; background: #fff; }
.builders-summary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
.builder-summary-card { padding: 17px 19px; border: 1px solid #b8cbe2; border-radius: 13px; background: #eaf1fa; color: #132b46; }
.builder-summary-card:nth-child(2) { border-color: #acd9c3; background: #e8f7ef; }
.builder-summary-card:nth-child(3) { border-color: #d4c3e8; background: #f2edfa; }
.builder-summary-card span, .builder-summary-card strong { display: block; }
.builder-summary-card span { font-size: 13px; font-weight: 800; }
.builder-summary-card strong { margin-top: 8px; font-size: 25px; }
.builders-report-table { width: 100%; min-width: 900px; }
.builders-report-table th, .builders-report-table td { text-align: left; overflow-wrap: anywhere; }
.builders-report-table th:last-child, .builders-report-table td:last-child { width: 220px; text-align: center; }
.builders-page-empty { padding: 30px !important; color: #687386; text-align: center !important; }
.builders-page-note { margin: 16px 0 0; color: #687386; font-size: 13px; }
@media (max-width: 700px) {
  .builders-page-toolbar { align-items: stretch; flex-direction: column; }
  .builders-page-toolbar label { flex-basis: auto; }
  .builders-summary-cards { grid-template-columns: 1fr; }
}

h3 {
  margin: 24px 0 10px;
}

.table-wrap {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th {
  background: var(--dark);
  color: #fff;
  font-weight: 800;
  border: 2px solid var(--line);
  padding: 9px 5px;
  text-align: center;
}

.data-table thead .size-band th {
  background: #e8e8e8;
  color: #111;
  height: 46px;
  font-size: 18px;
}

.data-table thead .size-band .order-size-heading-value {
  display: block;
  margin-top: 4px;
  color: #111;
  font-size: 22px;
  line-height: 1;
}

#orderTab #orderTable thead .order-sqft-summary th {
  height: 34px;
  padding: 6px 16px;
  border-right: 0;
  border-bottom: 1px solid var(--studio-border);
  background: var(--studio-surface);
  color: var(--studio-text);
  text-align: left;
  font-size: 16px;
}

#orderTab #orderTable thead .order-sqft-summary strong {
  margin-left: 24px;
  color: var(--studio-text);
}

.data-table td {
  border: 2px solid var(--line);
  height: 42px;
  padding: 3px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.data-table input, .data-table select {
  width: 100%;
  height: 34px;
  border: 0;
  text-align: center;
  background: transparent;
  font-weight: 700;
}

#measurementsTable .measurement-actions-column { width: 62px; }
#measurementsTable .measurement-row-actions { position: relative; padding: 3px; }
#measurementsTable .measurement-fill-cell { position: relative; }
#measurementsTable .measurement-fill-handle {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 1px;
  left: auto;
  display: block;
  width: 40px;
  height: 4px;
  min-height: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px;
  background: #2563eb !important;
  box-shadow: none !important;
  cursor: ns-resize;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
#measurementsTable .measurement-fill-cell:focus-within .measurement-fill-handle {
  opacity: 1;
  pointer-events: auto;
}
#measurementsTable .measurement-fill-handle:hover,
#measurementsTable .measurement-fill-handle:focus-visible {
  background: #174eb9 !important;
  outline: 2px solid rgba(37, 99, 235, .22);
  outline-offset: 2px;
}
#measurementsTable .measurement-fill-target {
  background: #eaf2ff !important;
  box-shadow: inset 0 -4px #2563eb;
}
#measurementsTable .measurement-fill-cell.measurement-range-selected {
  background: #dbeafe !important;
  box-shadow: inset 0 0 0 3px #2563eb;
}
#measurementsTable .measurement-fill-cell.measurement-range-selected input {
  background: #eff6ff !important;
  caret-color: transparent;
}
#measurementsTable:has(.measurement-range-selected) {
  cursor: cell;
  user-select: none;
}
body.measurement-fill-dragging,
body.measurement-fill-dragging * { cursor: ns-resize !important; user-select: none !important; }
.measurement-row-action-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #aebccd;
  border-radius: 7px;
  background: #fff;
  color: #173b64;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.measurement-row-action-button:hover,
.measurement-row-action-button[aria-expanded="true"] { border-color: #2563eb; background: #eaf1ff; color: #174eb9; }
.measurement-row-action-menu {
  position: fixed;
  z-index: 1300;
  display: grid;
  width: 172px;
  padding: 6px;
  border: 1px solid #b8c5d5;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(8, 47, 85, .24);
}
.measurement-row-action-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #14283f;
  text-align: left;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.measurement-row-action-menu button:hover,
.measurement-row-action-menu button:focus-visible { background: #edf3fb; outline: none; }
.measurement-row-action-menu button span { width: 18px; text-align: center; font-size: 18px; line-height: 1; }
.measurement-row-action-menu .measurement-row-delete { color: #b42318; }
.measurement-row-action-menu .measurement-row-delete:hover,
.measurement-row-action-menu .measurement-row-delete:focus-visible { background: #fff0ef; }

/* Keep the Order Sheet column headings level with its measurement rows. */
#orderTab .print-table th { height: 34px; box-sizing: border-box; }

#orderTab #orderTable .fabric-change-row td {
  height: 32px;
  padding: 5px 10px;
  background: #e8edf5;
  color: #111;
  font-size: 14px;
  text-align: left;
}

#orderTab #orderTable .fabric-change-row td.fabric-change-size {
  text-align: center;
  font-weight: 800;
}

#orderTab #orderTable td.order-loc-cell {
  padding: 2px 3px;
  overflow: hidden;
}
#orderTab #orderTable .order-loc-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.02;
  text-overflow: clip;
  white-space: nowrap;
}
#orderTab #orderTable .order-loc-line.order-loc-long { font-size: 11px; }

.order-print-summary {
  display: flex;
  justify-content: flex-end;
  border: 2px solid var(--line);
  border-top: 0;
  background: #fff;
}

.order-print-summary > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  padding: 10px 14px;
  border-left: 2px solid var(--line);
}

.order-print-summary span {
  font-size: 12px;
  font-weight: 800;
}

.order-print-summary strong {
  margin-left: auto;
  font-size: 18px;
}

.order-header {
  display: grid;
  grid-template-columns: 140px 250px 140px 1fr;
  grid-template-rows: 58px 58px 58px 58px 58px;
  border: 2px solid var(--line);
  border-bottom: 0;
}

.order-header .brand {
  grid-column: 1 / -1;
  grid-row: 1;
}

/* Keep the order header fixed to the familiar six-row layout.  Explicit
   placement prevents long values from pushing Headrail, Fabric, or Size
   fields into a new row. */
.order-header .customer-label { grid-column: 1; grid-row: 2; }
.order-header .customer-value { grid-column: 2; grid-row: 2; }
.order-header .installation-header { grid-column: 3 / 5; grid-row: 2; }
.order-header .address-label { grid-column: 1; grid-row: 3; }
.order-header .address-value { grid-column: 2 / 5; grid-row: 3; }
.order-header .phone-label { grid-column: 1; grid-row: 4; }
.order-header .phone-value { grid-column: 2; grid-row: 4; }
.order-header .headrail-label { grid-column: 3; grid-row: 4; }
.order-header .headrail-value { grid-column: 4; grid-row: 4; }
.order-header .fabric-label { grid-column: 1; grid-row: 5; }
.order-header .fabric-value { grid-column: 2; grid-row: 5; }
.order-header .chain-label { grid-column: 3; grid-row: 5; }
.order-header .chain-value { grid-column: 4; grid-row: 5; }

.installation-schedule-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.installation-schedule-row label,
.print-copy-control,
.order-print-rows-control { font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.installation-schedule-row input,
.installation-schedule-row select,
.print-copy-control select,
.order-print-rows-control input { display: block; width: 100%; margin-top: 4px; height: 36px; box-sizing: border-box; }
.print-copy-control { min-width: 250px; }
.order-print-rows-control { min-width: 145px; margin-right: auto; order: -1; }
.order-print-rows-control input { padding: 7px 10px; border: 1px solid #cfd6e2; border-radius: 8px; font-weight: 700; letter-spacing: 0; }
.print-copy-options { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 5px; font-size: 11px; font-weight: 700; }
.print-copy-options label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.print-copy-options .print-copy-all { color: #2346c5; }
.legacy-print-copy { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.order-header .brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.print-copy-label { text-align: right; font-size: .72em; letter-spacing: .04em; }
.installation-header {
  display: grid;
  grid-template-columns: 1.35fr .72fr 1fr;
  min-width: 0;
  min-height: 58px;
  border-bottom: 2px solid var(--line);
}
.installation-header-item { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; border-right: 2px solid var(--line); font-weight: 700; }
.installation-header-item:last-child { border-right: 0; }
.installation-header-item b { font-size: 10px; }

.field {
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 8px;
}

.field.label {
  background: #e8e8e8;
  font-weight: 800;
}

.field.value {
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}

.order-header .address-value {
  justify-content: flex-start;
  text-align: left;
  border-right: 0;
}

.order-header .headrail-value,
.order-header .chain-value {
  border-right: 0;
}

.field.big { font-size: 26px; }

.warning { min-height: 22px; color: #9c0025; font-weight: 700; margin-top: 8px; }
.invoice-table textarea.activity-description { width: 100%; min-height: 26px; resize: vertical; box-sizing: border-box; overflow: hidden; border: 0; padding: 4px 8px; font: inherit; text-align: left; line-height: 1.25; }
.invoice-table .activity-description-print { display: none; }
.delete-activity-line { display: block; margin: 0 0 6px 8px; padding: 3px 8px; font-size: 12px; }
.invoice-table input.activity-rate, .invoice-table input.activity-amount { width: 120px; text-align: right; }

.tags-toolbar {
  max-width: 1220px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tab-action-bar,
.invoice-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

.tags-sheet {
  background: #fff;
  page: sticker-roll;
  padding: 20px;
  display: grid;
  grid-template-columns: 4in;
  gap: 0;
  justify-content: center;
}

.tag-row {
  display: grid;
  grid-template-columns: 28px 4in;
  align-items: center;
  gap: 8px;
  page-break-inside: avoid;
}

.tag-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-print-check {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
}

.tag {
  width: 4in;
  height: 1in;
  border: 1px dashed #ddd;
  display: grid;
  grid-template-columns: 14mm 1fr;
  overflow: hidden;
  background: #fff;
  page-break-inside: avoid;
}

.tag-no {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  border-right: 1px solid #111;
}

.tag-body {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .25px;
  line-height: 1.1;
  padding: 2mm;
  min-width: 0;
}

.tag-body > div { white-space: nowrap; overflow: hidden; }
.tag-split-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px; height: 100%; box-sizing: border-box; }
.tag-left-stack, .tag-right-stack { display: grid; align-content: space-between; min-width: 0; height: 100%; }
.tag-left-stack { grid-template-rows: repeat(4, auto); }
.tag-right-stack { grid-template-rows: repeat(3, auto); }
.tag-left-stack > div, .tag-right-stack > div { display: flex; align-items: center; min-height: 1em; white-space: nowrap; overflow: hidden; }
.tag-empty-line { visibility: hidden; }
.tag-name { font-size: 18px; font-weight: 900; line-height: 1; }
.tag-name.tag-name-medium { font-size: 15px; }
.tag-name.tag-name-long { font-size: 13px; }
.tag-order { font-weight: 900; line-height: 1; }
.tag-date { font-size: 1em; font-weight: 500; line-height: 1; }
.tag-operation-line { line-height: 1; }
.tag-emphasis, .tag-size-line { font-size: 14pt; font-weight: 900; line-height: 1; }
.tag-right-stack {
  min-width: 34mm;
  padding-left: 2.5mm;
  justify-items: start;
  text-align: left;
}

.invoice {
  position: relative;
  min-height: 900px;
}

.company {
  font-size: 18px;
  line-height: 1.25;
}

.bill-box {
  width: 430px;
  min-height: 130px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}

.bill-box strong {
  display: block;
  background: #e8cbd2;
  color: #a00026;
  padding: 6px;
}

.bill-box div {
  padding: 8px;
  white-space: pre-line;
}

.invoice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.invoice-row label {
  display: grid;
  grid-template-columns: 115px 1fr;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: #a00026;
  font-weight: 800;
  background: #e8cbd2;
}

.invoice-row input {
  border: 0;
  padding: 7px;
  background: #fff;
  color: #111;
  text-align: center;
}

.invoice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.invoice-table th {
  background: #e8cbd2;
  color: #a00026;
  text-align: left;
  padding: 7px;
}

.invoice-table td {
  height: 90px;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 8px;
  vertical-align: top;
}

.invoice-table th:not(:last-child),
.invoice-table td:not(:last-child) { border-right: 1px solid #ccc; }

.invoice-table th:last-child,
.invoice-table td:last-child { border-right: 0; }

.invoice-table input {
  width: 100%;
  border: 0;
  text-align: right;
}

.totals {
  margin-top: 70px;
  border-top: 2px solid #111;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  border-radius: 8px;
  overflow: hidden;
  font-size: 18px;
}

.totals div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #111;
  padding: 5px;
}

.totals input, .totals select {
  border: 0;
  border-bottom: 1px solid #999;
  padding: 2px;
  text-align: right;
}

.balance {
  font-weight: 800;
  font-size: 26px;
}

.paid-stamp {
  display: none;
  position: absolute;
  right: 80px;
  bottom: 150px;
  transform: rotate(-12deg);
  border: 4px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 10px 28px;
  opacity: .85;
}

.paid .paid-stamp { display: block; }
.paid-stamp.visible { display: block; }

.invoice-topline { display: grid; grid-template-columns: 1fr 1fr 220px; align-items: start; gap: 12px; margin-bottom: 20px; }
.invoice-topline h2 { text-align: center; margin: 8px 0 0; }
.invoice-logo-wrap { width: 210px; height: 105px; overflow: hidden; position: relative; justify-self: end; }
.invoice-logo-wrap img { position: static; width: 100%; height: 100%; max-width: 100%; left: auto; top: auto; object-fit: contain; }
.bill-ship-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18%; margin: 16px auto; max-width: 82%; }
.bill-ship-grid .bill-box { border: 1px solid #ccc; border-radius: 8px; min-height: 105px; }
.bill-ship-grid .bill-box strong { display: block; background: #e8cbd2; color: #9c0025; padding: 5px 9px; }
.bill-ship-grid .bill-box > div:last-child { padding: 8px; white-space: pre-line; }
.tax-summary { margin-top: 28px; }
.tax-summary h3 { font-weight: 400; }
.tax-summary > div { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #ccc; padding: 6px; text-align: right; }
.tax-summary > div:first-of-type { border-radius: 8px 8px 0 0; }
.tax-summary > div:last-of-type { border-radius: 0 0 8px 8px; }
.tax-summary > div:first-of-type { background: #e8cbd2; color: #9c0025; }

.statement-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
.statement-toolbar label { display: grid; gap: 5px; font-weight: 800; }
.statement-toolbar input, .statement-toolbar select { min-width: 150px; padding: 9px 10px; border: 1px solid #999; border-radius: 6px; background: #fff; }
.statement-toolbar #statementCustomerSearch { min-width: 230px; }
.statement-toolbar #statementCustomerSelect { min-width: 300px; }
.statement-customer-heading { min-height: 24px; margin: 12px 0; font-size: 18px; font-weight: 800; }
#fabricInventoryTab {
  --fi-text: #101323;
  --fi-text-2: #4b5162;
  --fi-text-3: #7a8090;
  --fi-accent: #2f5af0;
  --fi-accent-700: #1d3aa8;
  --fi-danger: #c6392a;
  --fi-ok: #1d8a4e;
  --fi-border: #e4e7ec;
  --fi-card: #fff;
  --fi-bg: #f3f5f9;
  --fi-font-ui: var(--glass-font-ui, Inter, Arial, sans-serif);
  --fi-font-mono: var(--glass-font-mono, "IBM Plex Mono", monospace);
}
#fabricInventorySheet { background: var(--fi-bg); }
.fi-wrap { margin-top: 18px; color: var(--fi-text); font-family: var(--fi-font-ui); font-size: 15px; }
.fi-wrap h1 { margin: 0 0 4px; font-size: 20px; }
.fi-sub { margin: 0 0 22px; color: var(--fi-text-2); font-size: 14px; line-height: 1.35; }
.fi-management-dashboard { margin-bottom: 18px; padding: 20px 22px; border: 1px solid var(--fi-border); border-radius: 14px; background: #fff; }
.fi-management-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.fi-management-summary article { padding: 15px 17px; border: 1px solid #b8cbe2; border-radius: 13px; background: #eaf1fa; color: #132b46; }
.fi-management-summary article:nth-child(2) { border-color: #acd9c3; background: #e8f7ef; }
.fi-management-summary article:nth-child(3) { border-color: #e7cf91; background: #fff7df; }
.fi-management-summary article:nth-child(4) { border-color: #d4c3e8; background: #f2edfa; }
.fi-management-summary article:nth-child(5) { border-color: #e8c9ad; background: #fbf0e7; }
.fi-management-summary span, .fi-management-summary strong { display: block; }
.fi-management-summary span { min-height: 30px; font-size: 11.5px; font-weight: 800; }
.fi-management-summary strong { margin-top: 6px; font-size: 22px; }
.fi-management-toolbar { display: grid; grid-template-columns: minmax(210px, 1fr) 190px 170px auto auto; align-items: end; gap: 10px; margin-bottom: 18px; }
.fi-management-toolbar label { display: grid; gap: 5px; color: var(--fi-text-3); font-size: 11px; font-weight: 800; }
.fi-management-toolbar input, .fi-management-toolbar select { min-width: 0; height: 39px; padding: 8px 10px; border: 1px solid #cbd4e0; border-radius: 8px; background: #fff; color: var(--fi-text); font: 13px var(--fi-font-ui); }
.fi-management-toolbar .fi-btn { min-height: 39px; }
.fi-management-model-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fi-management-model-card { min-width: 0; padding: 16px; border: 1px solid #b8cbe2; border-radius: 13px; background: #eaf1fa; color: #132b46; }
.fi-management-model-card.fi-management-tone-1 { border-color: #acd9c3; background: #e8f7ef; }
.fi-management-model-card.fi-management-tone-2 { border-color: #d4c3e8; background: #f2edfa; }
.fi-management-model-card.fi-management-tone-3 { border-color: #e8c9ad; background: #fbf0e7; }
.fi-management-model-card.is-archived { border-color: #cfd5dd; background: #f1f3f6; }
.fi-management-model-card.is-recovery { border-color: #efcf9b; background: #fff8e8; }
.fi-management-model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fi-management-model-head h3 { margin: 0 0 7px; overflow-wrap: anywhere; font-size: 17px; }
.fi-management-model-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #58687a; font-size: 12px; font-weight: 700; }
.fi-management-stock { margin-top: 14px; }
.fi-management-stock strong { display: block; font: 850 22px/1.1 var(--fi-font-ui); }
.fi-management-stock > span { display: block; margin-top: 3px; color: #58687a; font-size: 12px; font-weight: 700; }
.fi-management-stock .fi-stock-bar { width: 100%; height: 7px; margin-top: 9px; }
.fi-management-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fi-management-sizes label { color: #687386; font-size: 10px; font-weight: 800; }
.fi-management-sizes .fi-tiny-input { display: block; width: 100%; margin-top: 4px; background: rgba(255,255,255,.78); }
.fi-management-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.fi-management-actions .fi-btn { flex: 1 1 auto; }
.fi-management-recovery-note { min-height: 42px; margin: 14px 0 0; color: #73511d; font-size: 12px; line-height: 1.45; }
.fi-management-empty { grid-column: 1 / -1; padding: 34px; border: 1px dashed #bdc8d6; border-radius: 12px; color: #687386; text-align: center; }
.fi-card { margin-bottom: 18px; padding: 20px 22px; border: 1px solid var(--fi-border); border-radius: 14px; background: var(--fi-card); }
.fi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.fi-card h2 { margin: 0 0 14px; color: var(--fi-text-3); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fi-card h2 span { color: var(--fi-text-3); font-weight: 400; letter-spacing: 0; text-transform: none; }
.fi-card table { width: 100%; border-collapse: collapse; }
.fi-card th { padding: 0 8px 8px; border-bottom: 1px solid var(--fi-border); color: var(--fi-text-3); font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.fi-card td { padding: 11px 8px; border-bottom: 1px solid var(--fi-border); font-size: 14px; vertical-align: middle; }
.fi-num { font-family: var(--fi-font-mono); }
.fi-type-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fi-archived-model-heading td { padding: 14px; background: #eef1f6; color: #4b5162; font-family: var(--fi-font-ui); font-weight: 700; border-top: 2px solid #cbd2dc; }
.fi-discontinued-pill { background: #e5e7eb; color: #4b5563; }
.fi-hidden-list-pill { background: #fff0cc; color: #805500; }
.fi-visible-list-pill { background: #dcf5e7; color: #176b37; }
.fi-photo-column, .fi-photo-cell { width: 76px; text-align: center !important; }
.fi-photo-eye { width: 40px; height: 34px; padding: 0; border: 1px solid #cbd2dc; border-radius: 9px; background: #f7f8fa; color: #687386; cursor: pointer; font-size: 18px; line-height: 1; }
.fi-photo-eye:hover, .fi-photo-eye:focus-visible { border-color: #2f5af0; background: #eef3ff; outline: 2px solid rgba(47,90,240,.2); }
.fi-photo-eye.has-photo { border-color: #8fcaaa; background: #e8f7ef; color: #176b37; }
.fi-photo-unavailable { color: #a0a7b4; }
.fi-photo-dialog-card { width: min(680px, 92vw); }
.fi-photo-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fi-photo-dialog-head h3 { margin: 0; overflow-wrap: anywhere; }
.fi-photo-status { min-height: 22px; margin: 14px 0; color: var(--fi-text-2); text-align: center; }
.fi-photo-preview { display: block; width: 100%; max-height: 62vh; margin: 0 auto; border: 1px solid var(--fi-border); border-radius: 12px; background: #f5f6f8; object-fit: contain; }
.fi-photo-preview[hidden] { display: none; }
.fi-deleted-model-heading td { padding: 13px 14px 8px; background: #fff7e5; color: #7b4b00; font-family: var(--fi-font-ui); font-weight: 700; border-top: 2px solid #f2cc7b; }
.fi-deleted-model-row { opacity: .82; background: #fffaf1; }
.fi-deleted-model-row td { border-color: #f0dec0; }
.fi-deleted-model-pill { background: #fee2e2; color: #9f1239; }
.fi-deleted-model-note { margin-top: 5px; color: var(--fi-text-3); font-size: 11px; font-family: var(--fi-font-ui); }
.fi-type-zebra { background: rgba(47, 90, 240, .1); color: var(--fi-accent-700); }
.fi-type-roller { background: #eef1f6; color: var(--fi-text-2); }
.fi-type-honeycomb { background: rgba(198, 150, 42, .12); color: #8a5e10; }
.fi-stock-bar { width: 100px; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: #eef1f6; }
.fi-stock-bar-fill { height: 100%; background: var(--fi-accent); }
.fi-stock-low .fi-stock-bar-fill { background: var(--fi-danger); }
.fi-tiny-input { width: 64px; padding: 6px; border: 1px solid var(--fi-border, #e4e7ec); border-radius: 7px; font-family: var(--fi-font-mono, "IBM Plex Mono", monospace); font-size: 12.5px; }
.fi-btn { padding: 8px 13px; border: 1px solid var(--fi-border, #e4e7ec); border-radius: 8px; background: #fff; color: var(--fi-text, #101323); cursor: pointer; font-family: var(--fi-font-ui, Inter, Arial, sans-serif); font-size: 13px; font-weight: 600; }
.fi-btn.primary { background: var(--fi-text, #101323); color: #fff; border-color: var(--fi-text, #101323); }
.fi-btn.danger { border-color: #dc3545; color: #b42332; background: #fff7f8; }
.fi-btn.danger:hover, .fi-btn.danger:focus-visible { background: #dc3545; color: #fff; outline: none; }
.fi-btn.small { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.fi-headrail-discontinued-row td { background: #f7f8fa !important; color: #6b7280; }
.fi-headrail-discontinued-row input:disabled { opacity: .65; cursor: not-allowed; }
.fi-headrail-discontinued-pill { margin-left: 7px; background: #e5e7eb; color: #4b5563; }
.fi-add-model-btn { border-color: var(--fi-accent-700); color: var(--fi-accent-700); font-weight: 700; }
.fi-toggle-wrap { display: flex; gap: 10px; margin: 8px 0 18px; }
.fi-manage-toggle { color: var(--fi-text-2); font-weight: 600; }
.fi-order-table input,
.fi-order-table select { width: 100%; padding: 7px 8px; border: 1px solid var(--fi-border); border-radius: 7px; font-family: var(--fi-font-ui); font-size: 13.5px; }
.fi-real-order-table { border: 1px solid #111; }
.fi-real-order-table th { padding: 6px 4px; border: 1px solid #ccc; background: #edf1f5; color: var(--fi-text-3); font-size: 11px; text-align: center; }
.fi-real-order-table td { padding: 9px 6px; border: 1px solid #ccc; font-family: var(--fi-font-mono); font-size: 13.5px; font-weight: 600; text-align: center; }
.fi-assumptions { color: var(--fi-text-2); font-size: 13px; line-height: 1.7; }
.fi-assumptions code { padding: 1px 6px; border-radius: 5px; background: #eef1f6; font-family: var(--fi-font-mono); font-size: 12.5px; }
.fi-dialog-backdrop { --fi-text: #101323; --fi-text-2: #4b5162; --fi-text-3: #7a8090; --fi-border: #e4e7ec; --fi-font-ui: var(--glass-font-ui, Inter, Arial, sans-serif); --fi-font-mono: var(--glass-font-mono, "IBM Plex Mono", monospace); position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: rgba(16, 19, 35, .4); }
.fi-dialog-backdrop[hidden] { display: none; }
.fi-dialog-card { width: min(420px, 90vw); padding: 22px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(16, 19, 35, .25); font-family: var(--fi-font-ui); }
.fi-dialog-card h3 { margin: 0 0 4px; font-size: 16px; }
.fi-dialog-card p { margin: 0 0 16px; color: var(--fi-text-2); font-size: 13px; }
.fi-dialog-card label { display: block; margin: 12px 0 6px; color: var(--fi-text-2); font-size: 12.5px; font-weight: 600; }
.fi-dialog-card input,
.fi-dialog-card select { width: 100%; padding: 9px 11px; border: 1px solid var(--fi-border); border-radius: 8px; font-family: var(--fi-font-ui); font-size: 14px; }
.fi-dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fi-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.fi-dialog-actions .fi-btn.primary { min-width: 132px; }
.inventory-choice-card { width: min(500px, 92vw); }
.inventory-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.inventory-choice-actions .fi-btn { min-height: 46px; font-size: 15px; }
.fi-form-note { margin: 8px 0 0 !important; color: var(--fi-text-3) !important; font-size: 12px !important; }
.fi-confirm-text { color: var(--fi-text) !important; font-size: 14px !important; line-height: 1.6; }
@media (max-width: 1180px) {
  .fi-management-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fi-management-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-management-search { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .fi-management-dashboard { padding: 14px; }
  .fi-management-summary, .fi-management-toolbar { grid-template-columns: 1fr; }
  .fi-management-search { grid-column: auto; }
  .fi-management-model-cards { grid-template-columns: 1fr; }
}
.statement-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.statement-table th, .statement-table td { border: 1px solid #d6e0ec; padding: 10px 8px; text-align: right; }
.statement-table th { background: #f7faff; color: #111; text-align: center; }
.statement-table th:first-child, .statement-table td:first-child { text-align: left; }
.statement-table th:nth-child(3), .statement-table td:nth-child(3),
.statement-table th:nth-child(4), .statement-table td:nth-child(4),
.statement-table th:nth-child(5), .statement-table td:nth-child(5) { text-align: left; }
.statement-table tfoot td { font-weight: 800; border-top: 2px solid #d6e0ec; }
.statement-table tfoot td:first-child { text-align: left; }
.customer-notes-field { display: grid; grid-template-columns: 210px 1fr; min-height: 82px; align-items: stretch; border: 2px solid var(--line); border-top: 0; background: #e8e8e8; font-weight: 800; }
.customer-notes-field textarea { width: 100%; min-height: 78px; border: 0; border-left: 2px solid var(--line); padding: 10px 12px; resize: vertical; font-size: 20px; font-weight: 700; background: #fff; }

/* Clean glass-style workspace: entry values are deliberately larger than labels
   so customer details can be read easily during daily order entry. */
.info-grid > label > input,
.info-grid > label > select,
.shipping-value > input,
.customer-notes-field textarea {
  color: #111;
}

@media (max-width: 1160px) {
  .topbar { align-items: center; }
  .topbar-brand { min-width: auto; }
  main { grid-template-columns: minmax(0, 1fr); }
  .action-area { grid-column: 1; grid-row: 1; }
  .topbar-navigation { position: static; transform: none; margin-left: auto; margin-right: auto; }
  .workspace { grid-column: 1; grid-row: 2; }
  main.customers-open { grid-template-columns: minmax(0, 1fr); }
  main.customers-open .sidebar {
    position: static;
    grid-area: auto;
    width: auto;
    height: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .topbar { position: static; min-height: 58px; padding: 0 14px; }
  .topbar-brand { display: flex; }
  .topbar-tools { gap: 5px; }
  .header-avatar { width: 30px; height: 30px; }
  .notification-panel { right: 14px; }
  .sidebar { top: 72px; right: 12px; bottom: 12px; width: min(320px, calc(100vw - 24px)); }
  .topbar h1 { font-size: 19px; }
  .actions { align-items: stretch; width: 100%; }
  .action-row { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  main { padding: 12px; }
}

/* Keep the header stack inside the viewport on tablets and phones. The
   summary and action rows scroll internally; the page itself never grows
   wider than the device. */
@media (max-width: 1050px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .current-order-banner {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .current-order-banner span { flex: 0 0 135px; min-width: 135px !important; }
  .tabs {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tabs button { flex: 0 0 auto; }
  .tabs #exportExcelBtn { margin-left: 0; }
}

/* When the customer/search drawer opens, keep the action row in document
   flow so it cannot sit on top of the customer form. */
main.customers-open .tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
.invoice-notes { margin: 14px 0; padding: 10px; border: 1px solid #ccc; white-space: pre-line; }
.invoice-notes:empty { display: none; }
.motorized-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 18px 0; }
.motorized-toolbar label { display: grid; gap: 5px; font-weight: 800; }
.motorized-toolbar input { min-width: 160px; padding: 9px 10px; border: 1px solid #999; border-radius: 6px; background: #fff; }
.motorized-totals { display: flex; gap: 28px; margin: 12px 0 18px; font-size: 18px; font-weight: 800; }
.motorized-table th, .motorized-table td { text-align: right; }
.motorized-table th:first-child, .motorized-table td:first-child,
.motorized-table th:nth-child(3), .motorized-table td:nth-child(3),
.motorized-table th:nth-child(4), .motorized-table td:nth-child(4),
.motorized-table th:nth-child(5), .motorized-table td:nth-child(5) { text-align: left; }
.motorized-table tfoot td { font-weight: 800; border-top: 2px solid #111; }

/* V432: model-based Headrail Inventory report. */
#headrailTotals { display: block; margin: 4px 0 18px; }
.headrail-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.headrail-summary-heading strong { color: #132b46; font-size: 21px; }
.headrail-summary-heading span { color: #66758a; font-size: 12px; font-weight: 750; }
.headrail-model-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.headrail-model-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--hr-border); border-radius: 13px; background: var(--hr-bg); color: #132b46; }
.headrail-model-card.is-missing { border-color: #e5b63f; background: #fff3cf; }
.headrail-model-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.headrail-model-card-title strong { overflow-wrap: anywhere; font-size: 14px; }
.headrail-model-dot { display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%; background: var(--hr-accent); }
.is-missing .headrail-model-dot { background: #df9200; }
.headrail-model-card-values { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; }
.headrail-model-card-values strong { font-size: 23px; }
.headrail-model-card-values span { font-size: 16px; font-weight: 850; }
.headrail-summary-empty { padding: 18px; border: 1px dashed #b7c3d2; border-radius: 10px; color: #66758a; text-align: center; }
#headrailTab .glass-card:last-child { overflow-x: auto; }
.headrail-report-table { min-width: 1300px; }
.headrail-report-table th:nth-child(1) { width: 7%; }
.headrail-report-table th:nth-child(2) { width: 10%; }
.headrail-report-table th:nth-child(3) { width: 12%; }
.headrail-report-table th:nth-child(4) { width: 10%; }
.headrail-report-table th:nth-child(5) { width: 16%; }
.headrail-report-table th:nth-child(6) { width: 18%; }
.headrail-report-table th:nth-child(7) { width: 6%; }
.headrail-report-table th:nth-child(8) { width: 13%; }
.headrail-report-table th:nth-child(9) { width: 8%; }
.headrail-report-table th:nth-child(6), .headrail-report-table td:nth-child(6) { text-align: left; }
.headrail-report-table th, .headrail-report-table td { overflow-wrap: anywhere; }
.headrail-model-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border-radius: 999px; background: var(--hr-bg); color: #132b46; font-weight: 800; white-space: normal; }
.headrail-model-pill.is-missing { background: #ffedb2; color: #855900; }
.headrail-order-link { border: 0; padding: 0; background: transparent; color: #174eb9; font: inherit; font-weight: 850; text-decoration: underline; cursor: pointer; }
.headrail-order-link:hover, .headrail-order-link:focus-visible { color: #0d367e; outline: none; }
.headrail-missing-row td { background: #fff9e9; border-color: #ebc85f; }
.fabric-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.fabric-usage-summary article { padding: 16px 18px; border: 1px solid #b8cbe2; border-radius: 13px; background: #eaf1fa; color: #132b46; }
.fabric-usage-summary article:nth-child(2) { border-color: #acd9c3; background: #e8f7ef; }
.fabric-usage-summary article:nth-child(3) { border-color: #d4c3e8; background: #f2edfa; }
.fabric-usage-summary article:nth-child(4) { border-color: #e8c9ad; background: #fbf0e7; }
.fabric-usage-summary span, .fabric-usage-summary strong { display: block; }
.fabric-usage-summary span { font-size: 12px; font-weight: 800; }
.fabric-usage-summary strong { margin-top: 8px; font-size: 23px; }
.fabric-usage-model-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; }
.fabric-usage-model-card { padding: 15px 17px; border: 1px solid var(--hr-border); border-radius: 13px; background: var(--hr-bg); color: #132b46; }
.fabric-usage-model-card > div { display: flex; align-items: center; gap: 9px; }
.fabric-usage-model-card p { margin: 12px 0 3px; font-size: 22px; font-weight: 850; }
.fabric-usage-model-card small { color: #58687a; font-weight: 700; }
.fabric-usage-table { width: 100%; min-width: 980px; }
.fabric-usage-table th, .fabric-usage-table td { text-align: right; }
.fabric-usage-table th:nth-child(-n+4), .fabric-usage-table td:nth-child(-n+4) { text-align: left; }
.fabric-usage-table tfoot td { border-top: 2px solid #132b46; font-weight: 850; }
.fabric-usage-note { margin: 16px 0 0; color: #66758a; font-size: 13px; }
@media (max-width: 800px) {
  .fabric-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  /* SQFT is a screen-only helper; never include it in paper/PDF output. */
  #sqftBtn,
  .sqft-button,
  .order-sqft-summary,
  [data-sqft],
  .sqft-value,
  .sqft-total {
    display: none !important;
  }

  @page sticker-roll { size: 100mm 24mm; margin: 0; }
  @page { size: letter portrait; margin: 14mm 10mm; }
  body { background: #fff; min-height: 0 !important; height: auto !important; }
  html, .front-shell, .app-content, main, .workspace, #orderTab {
    min-height: 0 !important;
    height: auto !important;
  }
  .no-print, .sidebar, .tabs { display: none !important; }
  main { display: block; padding: 0; }
  .workspace { min-width: 0; }
  .panel { display: none !important; }
  .panel.printing { display: block !important; }
  #orderTab .order-print-source-hidden { display: none !important; }
  #orderTab #orderPrintCopies {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #orderTab .order-print-copy {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    break-inside: auto;
    page-break-inside: auto;
    break-after: auto;
    page-break-after: auto;
  }
  #orderTab .order-print-copy:not(:last-child) {
    break-after: page;
    page-break-after: always;
  }
  .sheet { box-shadow: none; border: 0; padding: 0; max-width: none; }
  #statementTab .statement-toolbar { display: none !important; }
  #statementTab .statement-sheet { width: 100%; }
  #motorizedTab .motorized-toolbar { display: none !important; }
  #motorizedTab .motorized-sheet { width: 100%; }
  #headrailTab .motorized-toolbar { display: none !important; }
  #headrailTab .motorized-sheet { width: 100%; }
  #headrailTab .glass-card { margin: 3mm 0; padding: 3mm; box-shadow: none; border-radius: 2mm; overflow: visible; }
  #headrailTab .glass-card:first-of-type { display: none !important; }
  #headrailTab .black-title { padding: 3mm 4mm; font-size: 14pt; }
  #headrailTotals { margin: 0 0 3mm; }
  #headrailTab .headrail-summary-heading { margin-bottom: 2mm; }
  #headrailTab .headrail-summary-heading strong { font-size: 11pt; }
  #headrailTab .headrail-summary-heading span { font-size: 7pt; }
  #headrailTab .headrail-model-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2mm; }
  #headrailTab .headrail-model-card { padding: 2.5mm; border-radius: 2mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #headrailTab .headrail-model-card-title { gap: 1.5mm; }
  #headrailTab .headrail-model-card-title strong { font-size: 7pt; }
  #headrailTab .headrail-model-dot { flex-basis: 2.5mm; width: 2.5mm; height: 2.5mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #headrailTab .headrail-model-card-values { margin-top: 1.5mm; }
  #headrailTab .headrail-model-card-values strong { font-size: 11pt; }
  #headrailTab .headrail-model-card-values span { font-size: 8pt; }
  #headrailTab .headrail-report-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 6.5pt; }
  #headrailTab .headrail-report-table th, #headrailTab .headrail-report-table td { padding: 1.5mm 1mm; line-height: 1.15; }
  #headrailTab .headrail-report-table thead { display: table-header-group; }
  #headrailTab .headrail-report-table tr { break-inside: avoid; }
  #headrailTab .headrail-model-pill { padding: 1mm 1.5mm; gap: 1mm; border-radius: 2mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #headrailTab .headrail-order-link { color: #111; text-decoration: none; }
  #headrailTab .headrail-missing-row td { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #fabricUsageTab .motorized-toolbar { display: none !important; }
  #fabricUsageTab .motorized-sheet { width: 100%; }
  #fabricUsageTab .glass-card { margin: 3mm 0; padding: 3mm; box-shadow: none; border-radius: 2mm; overflow: visible; }
  #fabricUsageTab .glass-card:first-of-type { display: none !important; }
  #fabricUsageTab .black-title { padding: 3mm 4mm; font-size: 14pt; }
  #fabricUsageTab .fabric-usage-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2mm; }
  #fabricUsageTab .fabric-usage-summary article { padding: 2.5mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #fabricUsageTab .fabric-usage-summary strong { font-size: 10pt; }
  #fabricUsageTab .fabric-usage-summary span { font-size: 7pt; }
  #fabricUsageTab .fabric-usage-model-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2mm; }
  #fabricUsageTab .fabric-usage-model-card { padding: 2.5mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #fabricUsageTab .fabric-usage-model-card p { font-size: 9pt; }
  #fabricUsageTab .fabric-usage-model-card small, #fabricUsageTab .fabric-usage-model-card strong { font-size: 6.5pt; }
  #fabricUsageTab .fabric-usage-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 7pt; }
  #fabricUsageTab .fabric-usage-table th, #fabricUsageTab .fabric-usage-table td { padding: 1.5mm 1mm; }
  #fabricUsageTab .fabric-usage-note { display: none; }
  #orderTab .order-header, #orderTab .print-table { width: 100%; }
  .installer-attachment-page { page-break-before: always; padding-top: 6mm; }
  .installer-attachment-page .installer-attachment-title { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
  .installer-attachment-page img { max-width: 100%; max-height: 260mm; display: block; margin-bottom: 6mm; page-break-after: always; }
  .installer-attachment-page img:last-child { page-break-after: auto; }
  .installer-attachment-fallback-note { font-size: 11px; font-style: italic; color: #555; border: 1px dashed #999; padding: 10mm; text-align: center; }
  #orderTab .print-table tbody tr.empty { display: none; }
  #orderTab .print-table tbody tr.empty.print-spacer-row { display: table-row; height: 11mm; }
  #orderTab .print-table tbody tr.empty.print-spacer-row td { height: 11mm; padding-top: 0; padding-bottom: 0; }
  #orderTab .order-customer-notes { margin-top: 5mm; padding: 0; color: #111; }
  #orderTab .order-customer-notes-label { margin-bottom: 1.5mm; font-size: 8.5pt; font-weight: 800; }
  #orderTab .order-customer-notes-value { white-space: pre-wrap; font-size: 18px; line-height: 1.3; }
  #orderTab .print-table th:first-child,
  #orderTab .print-table td:first-child { width: 28px; padding-left: 1px; padding-right: 1px; }
  #orderTab .print-table th:last-child,
  #orderTab .print-table td:last-child { display: table-cell; }
  body.printing-tags .feedback-container { display: none !important; }
  body.printing-tags #tagsSheet { display: block !important; }
  .tags-sheet { grid-template-columns: 100mm; justify-content: start; margin: 0; padding: 0; gap: 0; }
  .tag-row { display: block; width: 100mm; height: 23mm; margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; }
  .tag-row.skip-print { display: none !important; }
  .tag-select { display: none !important; }
  /* Match the selected printer paper size exactly: 100mm wide x 24mm high. */
  .tag { width: 100mm; height: 23mm; border: 0; break-inside: avoid; page-break-inside: avoid; transform: none; writing-mode: horizontal-tb; margin: 0; box-sizing: border-box; grid-template-columns: 12mm minmax(0, 1fr); }
  body.printing-tags .tag-no { font-size: 12pt; line-height: 1; }
  body.printing-tags .tag-body { min-width: 0; padding: 1mm 1.5mm; font-size: 10pt; line-height: 1.05; letter-spacing: 0; }
  body.printing-tags .tag-body > div { white-space: nowrap; overflow: hidden; text-overflow: clip; }
  body.printing-tags .tag-left-stack { grid-template-rows: repeat(4, auto); align-content: space-between; }
  body.printing-tags .tag-right-stack { grid-template-rows: repeat(3, auto); align-content: space-between; }
  body.printing-tags .tag-name { font-size: 13pt; font-weight: 900; line-height: 1; }
  body.printing-tags .tag-name.tag-name-medium { font-size: 10.5pt; }
  body.printing-tags .tag-name.tag-name-long { font-size: 9pt; }
  body.printing-tags .tag-order,
  body.printing-tags .tag-date,
  body.printing-tags .tag-operation-line { font-size: 10pt; line-height: 1; }
  body.printing-tags .tag-order { font-weight: 900; }
  body.printing-tags .tag-emphasis,
  body.printing-tags .tag-size-line { font-size: 14pt; font-weight: 900; line-height: 1; }
  body.printing-tags,
  body.printing-tags .front-shell,
  body.printing-tags .app-content,
  body.printing-tags main,
  body.printing-tags .workspace,
  body.printing-tags #tagsTab,
  body.printing-tags #tagsSheet { width: 100mm !important; min-width: 0 !important; max-width: 100mm !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; }
  body.printing-tags .tag-row:not(.skip-print) { break-before: auto !important; page-break-before: auto !important; break-after: auto !important; page-break-after: auto !important; }
}

@media print {
  /* Compact Home-tab order summary for a single readable print page. */
  #homeTab .home-sheet { padding: 8mm 6mm !important; }
  #homeTab .home-heading { margin: 0 0 5mm !important; font-size: 18pt !important; }
  #homeTab .home-table-wrap { overflow: visible !important; }
  #homeTab .home-orders-table { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }
  #homeTab .home-orders-table th,
  #homeTab .home-orders-table td { padding: 2mm 1mm !important; font-size: 7.5pt !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  #homeTab .home-orders-table th { background: #edf1f5 !important; color: #171717 !important; border-bottom: 1px solid #252525 !important; }
  #homeTab .home-orders-table td { border-bottom: 1px solid #c7c7c7 !important; }
  #homeTab .home-sort-button { color: #171717 !important; text-decoration: none !important; }
  #homeTab .home-order-link { color: #171717 !important; text-decoration: none !important; }
  #homeTab .home-col-sno { width: 4% !important; }
  #homeTab .home-col-date { width: 10% !important; }
  #homeTab .home-col-order { width: 9% !important; }
  #homeTab .home-col-view { width: 6% !important; }
  #homeTab .home-col-name { width: 13% !important; }
  #homeTab .home-col-address { width: 17% !important; }
  #homeTab .home-col-phone { width: 10% !important; }
  #homeTab .home-col-blinds { width: 6% !important; }
  #homeTab .home-col-motor { width: 9% !important; }
  #homeTab .home-col-money { width: 8% !important; }
  #homeTab .home-col-paid { width: 9% !important; }
  #homeTab .home-col-balance { width: 9% !important; }
  #homeTab .home-click-note { display: none !important; }

  #orderTab .order-date-title {
    display: inline-block;
    background: #333 !important;
    color: #fff !important;
    padding: 1mm 2mm !important;
    border-radius: 1mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

}

/* Version 144: dependable Order Sheet printing, including when the browser's
   "Background graphics" option is turned off. */
@media print {
  #orderTab #orderSheet {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #orderTab .order-print-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  #orderTab #orderPrintCopies > .order-print-copy:first-child {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  #orderTab .order-header,
  #orderTab .print-table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #orderTab .order-header {
    grid-template-columns: 27mm 55mm 27mm minmax(0, 1fr) !important;
    grid-template-rows: 15mm 15mm 15mm 15mm 15mm !important;
    border: 0.5pt solid #111 !important;
    border-bottom: 0 !important;
  }

  #orderTab .order-header .brand {
    box-sizing: border-box !important;
    background: #fff !important;
    color: #111 !important;
    border-bottom: 0.5pt solid #111 !important;
    padding: 2.5mm 3mm !important;
    font-size: 17pt !important;
    line-height: 1 !important;
  }

  /* Close the complete Customer | Name | Date | Value box at its top edge. */
  #orderTab .customer-label,
  #orderTab .customer-value,
  #orderTab .date-label,
  #orderTab .date-value {
    border-top: 0.5pt solid #111 !important;
  }

  #orderTab .field {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 15mm !important;
    height: 15mm !important;
    border-width: 0.5pt !important;
    border-color: #111 !important;
    padding: 1.5mm 2mm !important;
    overflow: hidden !important;
  }

  #orderTab .field.label {
    background: #fff !important;
    color: #111 !important;
    font-size: 9.5pt !important;
    line-height: 1.05 !important;
  }

  #orderTab .field.value,
  #orderTab .field.big {
    color: #111 !important;
    font-size: 11pt !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #orderTab .headrail-value,
  #orderTab .fabric-value,
  #orderTab .chain-value {
    font-size: 10.5pt !important;
  }

  #orderTab #orderTable .fabric-change-row td {
    height: 7.2mm !important;
    padding: 1.2mm 2mm !important;
    background: #ececec !important;
    color: #111 !important;
    font-size: 9pt !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  #orderTab #orderTable .fabric-change-row td.fabric-change-size {
    text-align: center !important;
    font-weight: 800 !important;
  }

  #orderTab .order-print-summary {
    border: 0.5pt solid #111 !important;
    border-top: 0 !important;
    break-inside: avoid;
  }

  #orderTab .order-print-summary > div {
    min-width: 42mm;
    padding: 1.5mm 2mm;
    border-left: 0.5pt solid #111 !important;
  }

  #orderTab .order-print-summary span { font-size: 8pt; }
  #orderTab .order-print-summary strong { font-size: 11pt; }

  #orderTab .print-table {
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  #orderTab .print-table th,
  #orderTab .print-table td {
    box-sizing: border-box !important;
    border: 0.5pt solid #111 !important;
    color: #111 !important;
    background: #fff !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }

  #orderTab .print-table thead th {
    border-top: 0 !important;
  }

  #orderTab .print-table th {
    padding: 1.5mm .7mm !important;
    font-size: 8pt !important;
    line-height: 1.05 !important;
  }

  #orderTab .print-table td {
    height: 11mm !important;
    padding: .8mm .5mm !important;
    font-size: 9.5pt !important;
    line-height: 1.05 !important;
  }

  #orderTab .print-table input,
  #orderTab .print-table select {
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    color: #111 !important;
    background: transparent !important;
    font-size: 9.5pt !important;
  }

  #orderTab .print-table col:nth-child(1) { width: 5% !important; }
  #orderTab .print-table col:nth-child(2) { width: 14% !important; }
  #orderTab .print-table col:nth-child(3) { width: 14% !important; }
  #orderTab .print-table col:nth-child(4) { width: 8% !important; }
  #orderTab .print-table col:nth-child(5) { width: 15% !important; }
  #orderTab .print-table col:nth-child(6) { width: 14% !important; }
  #orderTab .print-table col:nth-child(7) { width: 15% !important; }
  #orderTab .print-table col:nth-child(8) { width: 15% !important; }
}

/* Premium customer invoice -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Mrs+Saint+Delafield&display=swap');

.invoice.sheet {
  --navy: #082f55;
  --invoice-red: #df071d;
  --invoice-line: #cbd5df;
  --invoice-panel: #f5f8fa;
  --invoice-panel-head: #e9eef3;
  max-width: 980px;
  min-height: 0;
  margin: 0 auto;
  padding: 0 44px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 20px 48px rgba(21, 21, 21, .1);
  overflow: hidden;
  color: #0c2745;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.invoice.sheet > .invoice-actions,
.invoice.sheet > header,
.invoice.sheet > section,
.invoice.sheet > table,
.invoice.sheet > button,
.invoice.sheet > .paid-stamp { margin-left: 0; margin-right: 0; }
.invoice.sheet > .invoice-actions { margin-top: 30px; }
.invoice.sheet > header.invoice-header { margin-top: 34px; margin-bottom: 24px; }

.invoice-header {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .75fr);
  gap: 30px;
  align-items: center;
}

.brand-lockup {
  display: block;
}

.brand-logo-image {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.company-contact {
  justify-self: end;
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.43;
}

.company-contact strong { display: block; color: #0c2745; font-weight: 800; }

.contact-line { display: flex; align-items: center; gap: 8px; }
.contact-line svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--invoice-red); }

.service-call-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.service-call-meta, .service-call-customer { display: grid; grid-template-columns: 1fr 1fr; border-left: 2px solid var(--line); border-top: 2px solid var(--line); }
.service-call-meta label, .service-call-customer label, .service-call-installer { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; min-height: 52px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); background: #e8e8e8; font-weight: 800; }
.service-call-meta input, .service-call-customer input, .service-call-installer input { min-width: 0; width: 100%; height: 100%; border: 0; border-left: 2px solid var(--line); padding: 8px 12px; background: #fff; font-weight: 700; }
.service-call-address { grid-column: 1 / -1; }
.service-call-customer label:nth-child(3) { grid-column: 1 / -1; }
.service-call-checks, .service-call-problems { display: grid; gap: 12px; padding: 16px 0; }
.service-call-check-row, .service-call-problems { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.service-call-check-row strong, .service-call-problems strong { margin-right: 8px; }
.service-call-check-row span { color: #7d0928; font-weight: 700; }
.service-call-wide { display: grid; gap: 6px; margin: 10px 0; font-weight: 800; }
.service-call-wide textarea { width: 100%; box-sizing: border-box; min-height: 76px; padding: 10px; border: 2px solid var(--line); resize: vertical; font: inherit; }
.service-call-installer { max-width: 520px; margin-top: 12px; }
@media print {
  #serviceCallTab .black-title { background: #fff !important; color: #111 !important; border-bottom: 2px solid #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #serviceCallTab .service-call-sheet { max-width: 170mm !important; margin: 0 auto !important; padding: 8mm !important; }
  #serviceCallTab .service-call-actions { display: none !important; }
  #serviceCallTab .service-call-meta, #serviceCallTab .service-call-customer { grid-template-columns: 1fr 1fr; }
  #serviceCallTab .service-call-meta label, #serviceCallTab .service-call-customer label, #serviceCallTab .service-call-installer { min-height: 12mm; grid-template-columns: 38mm minmax(0, 1fr); font-size: 8pt; }
  #serviceCallTab .service-call-checks, #serviceCallTab .service-call-problems { gap: 5mm; padding: 4mm 0; font-size: 9pt; }
  #serviceCallTab .service-call-wide textarea { min-height: 22mm; font-size: 9pt; }
}

.home-sheet { max-width: none; padding: 38px 46px 46px; border: 0; border-radius: 0; box-shadow: none; background: #fff; backdrop-filter: none; }
.home-sheet > .black-title { display: none; }
#homeTab .home-sheet { max-width: none; }
.home-heading { margin: 0 0 16px; color: #171717; font-size: 28px; font-weight: 700; }
.home-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.home-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.home-heading-actions .home-print-button { min-width: 136px; padding: 9px 12px; border: 1px solid #222; border-radius: 8px; background: #fff; color: #111; font-size: inherit; line-height: normal; font-weight: 400; white-space: nowrap; }
.home-heading-actions .home-print-button:hover, .home-heading-actions .home-print-button:focus-visible { background: #f3f4f6; color: #111; }
.paid-orders-sync-status { color: #506071; font-size: 12px; font-weight: 600; white-space: nowrap; }
.home-filter-tabs { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 1.5rem; border-bottom: 0.5px solid #ddd; }
.home-filter-tab { background: transparent; border: none; padding: 0.75rem 0; font-size: 16px; font-weight: 600; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.home-filter-tab:hover { color: #000; }
.home-filter-tab.active { color: #000; border-bottom-color: #000; }
.home-toolbar { margin: 18px 0 14px; }
.home-print-button { border: 1px solid #222; padding: 12px 28px; border-radius: 15px; background: #050505; color: #fff; font-size: 32px; line-height: 1; font-weight: 700; cursor: pointer; }
.home-print-button:hover, .home-print-button:focus-visible { background: #333; color: #fff; }
.home-search-label { display: none; }
.home-search-row { display: flex; align-items: center; gap: 10px; }
.home-search-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #999; border-radius: 7px; font-size: 16px; }
.home-builder-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(2, minmax(140px, 1fr)) minmax(160px, 1fr) auto; align-items: end; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid #d9e2ef; border-radius: 10px; background: #f6f9ff; }
.home-builder-filters[hidden] { display: none; }
.home-builder-filters label { display: grid; gap: 6px; min-width: 0; color: #34445b; font-size: 12px; font-weight: 800; }
.home-builder-filters input, .home-builder-filters select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 11px; border: 1px solid #aebcd0; border-radius: 7px; background: #fff; color: #17243a; font: inherit; font-size: 15px; font-weight: 500; }
.home-builder-filters button { min-height: 41px; padding: 9px 14px; border: 1px solid #aebcd0; border-radius: 7px; background: #fff; color: #174eb9; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.home-builder-filters button:hover, .home-builder-filters button:focus-visible { background: #e8efff; }
@media (max-width: 980px) { .home-builder-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-builder-filters button { justify-self: start; } }
.home-sort-note, .home-click-note { margin: 8px 0 0; color: #5d6874; font-size: 13px; }
.home-table-wrap { overflow-x: auto; border: 0; border-radius: 0; }
.home-orders-table { min-width: 1650px; border: 0; border-collapse: collapse; text-align: center; }
.home-orders-table col.home-col-sno { width: 4%; }
.home-orders-table col.home-col-date { width: 10%; }
.home-orders-table col.home-col-order { width: 10%; }
.home-orders-table col.home-col-view { width: 6%; }
.home-orders-table col.home-col-name { width: 15%; }
.home-orders-table col.home-col-address { width: 17%; }
.home-orders-table col.home-col-phone { width: 12%; }
.home-orders-table col.home-col-blinds { width: 7%; }
.home-orders-table col.home-col-motor { width: 10%; }
.home-orders-table col.home-col-money { width: 6%; }
.home-orders-table col.home-col-paid { width: 8%; }
.home-orders-table col.home-col-balance { width: 8%; }
.home-orders-table col.home-col-action { width: 12%; }
.home-orders-table th, .home-orders-table td { white-space: nowrap; }
.home-orders-table th { padding: 14px 8px; border: 0 !important; border-bottom: 2px solid #252525 !important; background: #edf1f5; color: #171717; text-align: center; font-size: 15px; }
.home-orders-table td { padding: 14px 8px; border: 0 !important; border-bottom: 1px solid #d2d7dc !important; background: #fff; text-align: center; font-size: 16px; }
.home-orders-table th, .home-orders-table td { overflow: hidden; text-overflow: ellipsis; }
.home-orders-table td:nth-child(3), .home-orders-table td:nth-child(14) { font-weight: 700; }
.home-orders-table tbody tr:last-child td { border-bottom: 0 !important; }
.home-sort-button { border: 0; padding: 0; background: transparent; color: #174eb9; font: inherit; font-weight: 800; cursor: pointer; }
.home-sort-button:hover, .home-sort-button:focus-visible { text-decoration: underline; }
.home-builder-summary { margin: 4px 0 0; color: #174eb9; font-weight: 700; }
.home-search-category { display: block; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 2px 6px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; color: #174eb9; background: #e8efff; font-size: 11px; font-weight: 700; line-height: 1.2; }
.home-search-category-pending { color: #805400; background: #fff2cb; }
.home-search-category-balance { color: #8d321a; background: #ffe9e2; }
.home-search-category-paid { color: #16683e; background: #e0f5e9; }
.home-order-link { border: 0; padding: 0; background: transparent; color: #174eb9; text-decoration: underline; font-weight: 800; cursor: pointer; }
.home-order-no-cell { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.order-cloud-symbol { display: inline-grid; flex: 0 0 22px; width: 22px; height: 22px; box-sizing: border-box; place-items: center; border: 0; border-radius: 50%; color: #fff; font: 900 18px/1 Arial, sans-serif; text-decoration: none; vertical-align: middle; }
.order-cloud-symbol span { display: block; line-height: 1; transform: translateY(-.5px); }
.order-cloud-synced { background: #209e68; }
.order-cloud-waiting { background: #db8a00; font-size: 17px; }
.order-cloud-failed { margin: 0; padding: 0; background: #dc354b; cursor: pointer; }
.order-cloud-failed:hover, .order-cloud-failed:focus-visible { background: #b61f33; outline: 3px solid rgba(220, 53, 75, .25); outline-offset: 2px; }
.home-balance { color: #a51212; font-weight: 800; }
.home-paid { color: #277943; font-weight: 800; }
.home-paid-details { border: 0; padding: 7px 10px; border-radius: 8px; background: transparent; color: #277943; font: inherit; font-weight: 900; cursor: pointer; }
.home-paid-details:hover, .home-paid-details:focus-visible { background: #d9f3e2; color: #155f32; outline: 2px solid #7fc99b; }
.payment-details-card { width: min(720px, 100%); }
.payment-details-table-wrap { max-height: 340px; margin-top: 18px; overflow-y: auto; border: 1px solid #dbe3ee; border-radius: 10px; }
.payment-details-table { width: 100%; min-width: 0; }
.payment-details-table th, .payment-details-table td { padding: 12px; text-align: left; }
.payment-details-table td[data-payment-amount-cell] input[type="number"] { width: 90px; padding: 5px 6px; border: 1px solid #999; border-radius: 5px; font-size: inherit; }
.payment-edit-btn, .payment-delete-btn, [data-save-payment-edit], [data-cancel-payment-edit] { border: 1px solid #999; padding: 5px 10px; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.payment-edit-btn:hover, [data-save-payment-edit]:hover { background: #f1f1f1; }
[data-save-payment-edit] { border-color: #1f8a4c; color: #1f8a4c; }
.payment-delete-btn { border-color: #a32d2d; color: #a32d2d; }
.payment-delete-btn:hover { background: #a32d2d; color: #fff; }
.payment-details-earlier td { background: #fff7cf; color: #4f5663; font-style: italic; }
.home-payment-paid > td { background: #eaf8ef !important; }
.home-payment-partial > td { background: #fff7cf !important; }
.home-payment-unpaid > td { background: #fde8e8 !important; }
.home-orders-table tr.home-pickup-order > td { background: #e9e6fb !important; }
.home-orders-table tr.home-pickup-order > td:first-child { box-shadow: inset 5px 0 #7562c9; }
.home-pickup-badge { display: inline-block; margin: 4px 0 0 7px; padding: 3px 7px; border-radius: 5px; background: #d9d0f6; color: #403383; font-size: 11px; font-weight: 900; letter-spacing: .03em; vertical-align: middle; }
.receive-payment-button { border: 0; border-radius: 8px; padding: 8px 10px; background: #1f8a4c; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.receive-payment-button:hover, .receive-payment-button:focus-visible { background: #176b3b; outline: 2px solid #8ad1a7; }
.home-balance-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.home-action-cell { overflow: visible !important; }
.home-action-cell .home-balance-actions { margin-top: 0; }

/* V438: keep Customer, Pending Order, and Balance Payment rows the same height. */
@media screen {
  #homeOrdersRows > tr:not(.home-load-more-row) {
    height: 65px;
  }
  #homeOrdersRows > tr:not(.home-load-more-row) > td {
    height: 65px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }
  .home-action-cell .home-balance-actions {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .home-action-cell .home-balance-actions button {
    min-width: 0;
    padding: 6px 3px;
    font-size: 12px;
    line-height: 1.1;
  }
  .home-action-cell .receive-payment-button,
  .home-action-cell .review-request-button {
    display: inline-flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    overflow: hidden;
    white-space: normal;
  }
  .home-action-cell .receive-payment-button span,
  .home-action-cell .review-request-button span {
    display: block;
  }
}
.home-orders-table.home-actions-hidden .home-action-column { display: none !important; }
.move-to-customer-button { border: 0; border-radius: 8px; padding: 8px 10px; background: #2f5af0; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.move-to-customer-button:hover, .move-to-customer-button:focus-visible { background: #2147cc; outline: 2px solid #9db3ff; }
.review-request-button { border: 0; border-radius: 8px; padding: 8px 10px; background: #176b3b; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.review-request-button:hover, .review-request-button:focus-visible { background: #0f512c; outline: 2px solid #8ad1a7; }
.review-request-button:disabled { background: #d8dee7; color: #7a8493; cursor: not-allowed; opacity: .85; }
.review-request-button.review-requested { background: #174eb9; }
.review-request-card { width: min(680px, 100%); }
.review-mockup-badge { display: inline-block; margin-bottom: 5px; padding: 4px 8px; border-radius: 999px; background: #e8efff; color: #174eb9; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.review-customer-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.review-customer-details div { padding: 12px; border: 1px solid #dfe6ef; border-radius: 10px; background: #f8fafc; }
.review-customer-details span { display: block; margin-bottom: 4px; color: #687386; font-size: 11px; font-weight: 800; }
.review-customer-details strong { overflow-wrap: anywhere; }
.review-paid-status { color: #277943; }
.review-message-label { display: block; margin-top: 18px; color: #4c596b; font-size: 11px; font-weight: 800; }
.review-message-label textarea { width: 100%; min-height: 190px; margin-top: 7px; padding: 13px; resize: vertical; border: 1px solid #bdc8d6; border-radius: 10px; background: #fbfcfe; color: #101323; font: 14px/1.45 inherit; }
.review-link-setting { margin-top: 16px; }
.review-link-setting > label { color: #4c596b; font-size: 11px; font-weight: 800; }
.review-link-setting > div { display: flex; gap: 8px; margin-top: 6px; }
.review-link-setting input { flex: 1; min-width: 0; padding: 11px; border: 1px solid #bdc8d6; border-radius: 9px; font: inherit; }
.review-link-setting button { padding: 10px 14px; border: 0; border-radius: 9px; background: #174eb9; color: #fff; font-weight: 800; cursor: pointer; }
.review-link-setting small { display: block; margin-top: 5px; color: #687386; }
.review-previous-status { margin: 12px 0; padding: 10px 12px; border-radius: 9px; background: #e8efff; color: #174eb9; font-size: 12px; font-weight: 800; }
.review-method-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.review-method-actions button { padding: 10px 8px; border: 1px solid #176b3b; border-radius: 9px; background: #fff; color: #176b3b; font-weight: 800; cursor: pointer; }
.review-method-actions button:hover { background: #eaf8ef; }
.review-send-confirmation { margin-top: 14px; padding: 14px; border: 1px solid #f0c36a; border-radius: 10px; background: #fff8df; color: #4d3a00; }
.review-send-confirmation > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.review-send-confirmation button { padding: 9px 12px; border: 1px solid #bfc9d6; border-radius: 8px; background: #fff; font-weight: 800; cursor: pointer; }
.review-send-confirmation button.primary { border-color: #176b3b; background: #176b3b; color: #fff; }
.curtain-tab-button { color: #174eb9; }
.curtain-sheet { max-width: 1900px; margin: 0 auto; }
.curtain-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.curtain-title-row p { margin: 8px 0 0; color: #667085; }
.curtain-print-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.curtain-print-actions button { min-height: 39px; height: 39px; padding: 10px 14px; border: 0; border-radius: 8px; background: linear-gradient(155deg, #5b82ff, #2f5af0); color: #fff; font-family: var(--glass-font-ui); font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(47,90,240,.35); }
.curtain-customer-picker { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.curtain-customer-picker label { color: #596579; font-size: 11px; font-weight: 900; }
.curtain-customer-picker input { width: min(560px, 100%); padding: 9px 11px; border: 1px solid #9eb4d1; border-radius: 8px; background: #fff; font-size: 13px; }
.curtain-customer-picker input:focus { border-color: #174eb9; outline: 2px solid #b8cdf8; }
.curtain-customer-picker button { padding: 9px 12px; border: 1px solid #9eb4d1; border-radius: 8px; background: #fff; color: #174eb9; font-size: 12px; font-weight: 800; cursor: pointer; }
.curtain-customer-picker button.primary { border-color: #174eb9; background: #174eb9; color: #fff; }
.curtain-customer-summary { display: grid; grid-template-columns: 1.2fr .6fr 1.5fr 1fr; gap: 10px; margin: 18px 0; }
.curtain-customer-summary div { min-height: 50px; padding: 9px 10px; border: 1px solid #d6e0ec; border-radius: 9px; background: #f7faff; }
.curtain-customer-summary span { display: block; margin-bottom: 5px; color: #687386; font-size: 10px; font-weight: 900; }
.curtain-customer-summary strong { overflow-wrap: anywhere; font-size: 13px; }
.curtain-type-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.curtain-type-picker button { padding: 12px; border: 1px solid #174eb9; border-radius: 10px; background: #fff; color: #174eb9; font-weight: 850; cursor: pointer; }
.curtain-type-picker button.active { background: #12233f; color: #fff; box-shadow: 0 5px 15px rgba(18,35,63,.2); }
.curtain-add-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: #667085; font-size: 11px; }
.curtain-add-row button { padding: 9px 13px; border: 0; border-radius: 8px; background: #174eb9; color: #fff; font-size: 12px; font-weight: 850; cursor: pointer; }
.curtain-formula-note { margin: 10px 0; padding: 9px 12px; border-left: 4px solid #174eb9; background: #eef4ff; color: #12233f; font-weight: 700; }
.curtain-table-wrap { overflow-x: auto; }
.curtain-table { min-width: 1320px; table-layout: fixed; font-size: 11px; }
.curtain-table th, .curtain-table td { padding: 6px 5px; text-align: center; }
.curtain-table th { font-size: 10px; }
.curtain-table th:nth-child(2), .curtain-table td:nth-child(2) { width: 130px; }
.curtain-table th:nth-child(3), .curtain-table td:nth-child(3) { width: 190px; }
.curtain-table input, .curtain-table select { width: 100%; min-width: 65px; padding: 6px 5px; border: 1px solid #bdc8d6; border-radius: 6px; background: #fff; font-family: inherit; font-size: 12px; line-height: 1.2; }
.curtain-table td:nth-child(n+7) { background: #f4f7fb; color: #12233f; font-weight: 800; }
.curtain-split-second td { border-top: 2px solid #174eb9; background: #f8fbff; }
.curtain-split-second td:nth-child(n+7) { background: #e7effc; }
.remove-curtain-button { padding: 6px 8px; border: 1px solid #c54d4d; border-radius: 6px; background: #fff; color: #9d2727; font-size: 10px; font-weight: 800; cursor: pointer; }
.curtain-empty-row td { padding: 24px; color: #7a8493; font-size: 12px; font-weight: 700; text-align: center; }
.curtain-formulas { display: grid; gap: 5px; margin-top: 16px; padding: 14px; border-radius: 10px; background: #f7faff; color: #465269; font-size: 12px; }
@media print {
  #curtainTab,
  #curtainTab .curtain-sheet,
  #curtainTab .curtain-table-wrap { box-sizing: border-box !important; max-width: none !important; overflow: visible !important; }
  #curtainTab { width: 100% !important; }
  #curtainTab .curtain-row-unused { display: none !important; }
  #curtainTab .curtain-formulas { display: none !important; }
  #curtainTab .curtain-sheet,
  #curtainTab .curtain-table-wrap,
  #curtainTab .curtain-table { width: 260mm !important; }
  #curtainTab .curtain-table { min-width: 0 !important; table-layout: fixed !important; font-size: 7pt !important; }
  #curtainTab .curtain-table th,
  #curtainTab .curtain-table td { padding: 1.2mm .7mm !important; font-size: 7pt !important; overflow: hidden; }
  #curtainTab .curtain-table th:nth-child(1), #curtainTab .curtain-table td:nth-child(1) { width: 4%; }
  #curtainTab .curtain-table th:nth-child(2), #curtainTab .curtain-table td:nth-child(2) { width: 11%; }
  #curtainTab .curtain-table th:nth-child(3), #curtainTab .curtain-table td:nth-child(3) { width: 17%; }
  #curtainTab .curtain-table th:nth-child(4), #curtainTab .curtain-table td:nth-child(4) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(5), #curtainTab .curtain-table td:nth-child(5) { width: 7%; }
  #curtainTab .curtain-table th:nth-child(6), #curtainTab .curtain-table td:nth-child(6) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(7), #curtainTab .curtain-table td:nth-child(7) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(8), #curtainTab .curtain-table td:nth-child(8) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(9), #curtainTab .curtain-table td:nth-child(9) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(10), #curtainTab .curtain-table td:nth-child(10) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(11), #curtainTab .curtain-table td:nth-child(11) { width: 8%; }
  #curtainTab .curtain-table th:nth-child(12), #curtainTab .curtain-table td:nth-child(12) { width: 5%; }
  #curtainTab .curtain-table input,
  #curtainTab .curtain-table select { min-width: 0 !important; width: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; font-size: 7pt !important; appearance: none; -webkit-appearance: none; }

  /* Match the Order Sheet's boxed, readable production-print styling. */
  #curtainTab .curtain-sheet {
    width: 260mm !important;
    padding: 3mm !important;
    border: .5pt solid #111 !important;
    box-sizing: border-box !important;
  }
  #curtainTab .curtain-title-row { display: block !important; }
  #curtainTab .curtain-title-row > div { width: 100% !important; }
  #curtainTab .curtain-title-row .black-title {
    width: 100% !important;
    padding: 2mm 3mm !important;
    box-sizing: border-box !important;
    font-size: 14pt !important;
  }
  #curtainTab .curtain-title-row p { margin: 1.5mm 0 2mm !important; font-size: 8pt !important; }
  #curtainTab .curtain-customer-summary {
    grid-template-columns: 1.2fr .6fr 1.5fr 1fr !important;
    gap: 0 !important;
    margin: 2mm 0 !important;
    border-top: .5pt solid #111 !important;
    border-left: .5pt solid #111 !important;
  }
  #curtainTab .curtain-customer-summary div {
    min-height: 10.8mm !important;
    padding: 1mm 1.5mm !important;
    border: 0 !important;
    border-right: .5pt solid #111 !important;
    border-bottom: .5pt solid #111 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  #curtainTab .curtain-customer-summary span { margin-bottom: 1mm !important; color: #111 !important; font-size: 8.5pt !important; }
  #curtainTab .curtain-customer-summary strong { color: #111 !important; font-size: 10pt !important; line-height: 1.08 !important; }
  #curtainTab .curtain-formula-note {
    margin: 2mm 0 !important;
    padding: 1.5mm 2mm !important;
    border: .5pt solid #111 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 8.5pt !important;
  }
  #curtainTab .curtain-table-wrap,
  #curtainTab .curtain-table { width: 100% !important; }
  #curtainTab .curtain-table { border: .5pt solid #111 !important; border-collapse: collapse !important; }
  #curtainTab .curtain-table thead { display: table-header-group !important; }
  #curtainTab .curtain-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
  #curtainTab .curtain-table th {
    height: 8.1mm !important;
    padding: 1mm .5mm !important;
    border: .5pt solid #111 !important;
    font-size: 7pt !important;
    line-height: 1.05 !important;
  }
  #curtainTab .curtain-table td {
    height: 11.7mm !important;
    padding: .7mm .5mm !important;
    border: .5pt solid #111 !important;
    color: #111 !important;
    background: #fff !important;
    font-size: 11pt !important;
    line-height: 1.05 !important;
    vertical-align: middle !important;
  }
  #curtainTab .curtain-table input,
  #curtainTab .curtain-table select { font-size: 10pt !important; font-weight: 700 !important; color: #111 !important; }
  #curtainTab .curtain-table td:nth-child(4),
  #curtainTab .curtain-table td:nth-child(5),
  #curtainTab .curtain-table td:nth-child(n+7) { font-size: 12pt !important; font-weight: 700 !important; }
}
@media (max-width: 800px) { .curtain-customer-summary { grid-template-columns: 1fr 1fr; } .curtain-type-picker { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .review-customer-details, .review-method-actions { grid-template-columns: 1fr 1fr; } }
.pending-history-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; background: rgba(16,19,35,.5); padding: 24px; }
.pending-history-card { width: min(760px, 100%); max-height: 86vh; overflow: auto; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(16,19,35,.3); }
.pending-history-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pending-history-head h2 { margin: 0; color: #101323; }
.pending-history-head button { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: #667085; }
.pending-history-card p { color: #667085; }
.pending-history-table th, .pending-history-table td { padding: 10px 12px; text-align: left; }
.pending-history-empty { text-align: center !important; color: #667085; }

.bulk-order-excel-modal { position: fixed; inset: 0; z-index: 510; display: grid; place-items: center; padding: 20px; background: rgba(13,25,42,.65); }
.bulk-order-excel-modal[hidden] { display: none; }
.bulk-order-excel-card { display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(88vh, 900px); box-sizing: border-box; padding: 24px; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(13,25,42,.28); }
.bulk-order-excel-head, .bulk-order-excel-toolbar, .bulk-order-excel-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bulk-order-excel-head { align-items: flex-start; }
.bulk-order-excel-head h2 { margin: 0; color: #102846; font-size: 26px; }
.bulk-order-excel-head p { margin: 8px 0 0; color: #57677b; }
.bulk-order-excel-head > button { border: 0; background: transparent; color: #526176; font-size: 22px; cursor: pointer; }
.bulk-order-excel-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(130px, 1fr)) minmax(160px, 1fr) auto; align-items: end; gap: 12px; margin: 22px 0 16px; }
.bulk-order-excel-filters label { display: grid; gap: 6px; color: #34445b; font-size: 13px; font-weight: 700; }
.bulk-order-excel-filters input, .bulk-order-excel-filters select { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #aebcd0; border-radius: 7px; background: #fff; font: inherit; font-size: 15px; }
.bulk-order-excel-filters button, .bulk-order-excel-toolbar button, .bulk-order-excel-actions button { padding: 9px 13px; border: 1px solid #b8c5d6; border-radius: 7px; background: #fff; color: #174eb9; font: inherit; font-weight: 700; cursor: pointer; }
.bulk-order-excel-toolbar { margin-bottom: 10px; color: #34445b; font-weight: 700; }
.bulk-order-excel-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-order-excel-list { min-height: 140px; overflow-y: auto; border: 1px solid #d9e2ec; border-radius: 9px; }
.bulk-order-excel-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #e5ebf2; cursor: pointer; }
.bulk-order-excel-row:last-child { border-bottom: 0; }
.bulk-order-excel-row:hover { background: #f4f8ff; }
.bulk-order-excel-row input { flex: 0 0 auto; width: 19px; height: 19px; }
.bulk-order-excel-row-main { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 5px 13px; min-width: 0; }
.bulk-order-excel-row-main strong { color: #102846; }
.bulk-order-excel-row-main span { color: #526176; }
.bulk-order-excel-row-main em { color: #16683e; font-size: 12px; font-style: normal; font-weight: 700; }
.bulk-order-excel-empty { padding: 28px; color: #667085; text-align: center; }
.bulk-order-excel-status { min-height: 1.3em; margin: 10px 0; color: #34445b; font-size: 13px; }
.bulk-order-excel-actions { justify-content: flex-end; }
.bulk-order-excel-actions .primary { border-color: #255dec; background: #255dec; color: #fff; }
.bulk-order-excel-actions button:disabled, .bulk-order-excel-toolbar button:disabled { opacity: .55; cursor: not-allowed; }
#excelRequiredMessage { white-space: pre-line; }
@media (max-width: 760px) { .bulk-order-excel-card { max-height: 94vh; padding: 16px; } .bulk-order-excel-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bulk-order-excel-filters label:first-child { grid-column: 1 / -1; } .bulk-order-excel-filters button { justify-self: start; } .bulk-order-excel-toolbar { align-items: flex-start; flex-direction: column; } }

.payment-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 22px; background: rgba(13,25,42,.6); }
.payment-modal[hidden] { display: none; }
.payment-modal-card { width: min(620px, 100%); padding: 24px; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.28); }
.payment-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.payment-modal-head h2 { margin: 0; }
.payment-modal-head button { border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.payment-order-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.payment-order-details div { padding: 12px; border: 1px solid #dfe6ef; border-radius: 10px; background: #f8fafc; }
.payment-order-details span { display: block; margin-bottom: 4px; color: #687386; font-size: 11px; font-weight: 800; }
.payment-order-details strong { display: block; overflow-wrap: anywhere; }
.payment-entry-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.payment-entry-fields label { color: #4c596b; font-size: 11px; font-weight: 800; }
.payment-entry-fields input, .payment-entry-fields select { width: 100%; margin-top: 6px; padding: 11px; border: 1px solid #bdc8d6; border-radius: 9px; background: #fff; font: inherit; }
.payment-modal-error { min-height: 20px; margin-top: 8px; color: #b42318; font-weight: 700; }
.payment-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.payment-modal-actions button { padding: 10px 18px; border: 1px solid #bfc9d6; border-radius: 9px; background: #fff; font-weight: 800; cursor: pointer; }
.payment-modal-actions .primary { border-color: #1f8a4c; background: #1f8a4c; color: #fff; }
.payment-confirm-card { width: min(560px, 100%); }
.payment-confirm-message { margin: 0 0 16px; color: #4c596b; }
.payment-confirm-details { grid-template-columns: repeat(2, 1fr); }

.payments-sheet { max-width: 1100px; margin: 0 auto; }
.payments-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 18px 0; }
.payments-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.payments-heading-row h2 { margin: 0; }
.payments-heading-row p { margin: 5px 0 0; color: #667085; }
.payments-toolbar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.payments-toolbar label { color: #667085; font-size: 11px; font-weight: 800; }
.payments-toolbar input, .payments-toolbar button { display: block; margin-top: 5px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
.payments-total { display: flex; justify-content: space-between; margin-bottom: 14px; padding: 14px 16px; border-radius: 10px; background: #eaf8ef; color: #176b37; font-size: 18px; font-weight: 700; }
.payments-table td:nth-child(4), .payments-table th:nth-child(4) { text-align: right; }
@media (max-width: 700px) { .payment-order-details { grid-template-columns: 1fr 1fr; } .payment-entry-fields { grid-template-columns: 1fr; } .payments-heading-row, .payments-toolbar { align-items: flex-start; flex-direction: column; } }
.home-empty { padding: 24px !important; text-align: center; color: #5d6874; }
@media (max-width: 760px) {
  .home-sheet { padding: 26px 18px 34px; }
  .home-heading { font-size: 32px; margin-bottom: 20px; }
  .home-heading-actions { width: 100%; justify-content: flex-start; }
  .home-print-button { padding: 10px 18px; border-radius: 12px; font-size: 24px; }
}

.invoice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px !important; }

.invoice-document-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #b8c5d2;
  border-radius: 7px;
  background: #eef3f7;
}

.invoice-document-switch button {
  min-width: 142px;
  padding: 8px 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #0c2745;
  font: 700 13px "Inter", Arial, sans-serif;
  cursor: pointer;
}

.invoice-document-switch button.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 6px rgba(8, 47, 85, .24);
}

.invoice-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  padding: 11px 18px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: var(--navy);
  font: 700 13px "Inter", Arial, sans-serif;
  cursor: pointer;
}

.invoice-action.email { background: var(--invoice-red); }
.invoice-action.gst { background: #15803d; }
.invoice-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.invoice-action:disabled { cursor: wait; opacity: .7; }

/* Stable letter-size layout used while creating the email attachment. */
#invoiceSheet.invoice-pdf-capture {
  width: 816px !important;
  max-width: 816px !important;
  min-height: 1056px !important;
  box-sizing: border-box !important;
  padding: 32px 50px 42px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#invoiceSheet.invoice-pdf-capture .no-print { display: none !important; }
#invoiceSheet.invoice-pdf-capture > header,
#invoiceSheet.invoice-pdf-capture > section,
#invoiceSheet.invoice-pdf-capture > table,
#invoiceSheet.invoice-pdf-capture > button { margin-left: 0 !important; margin-right: 0 !important; }
#invoiceSheet.invoice-pdf-capture .invoice-banner { margin-left: -50px !important; margin-right: -50px !important; }
#invoiceSheet.invoice-pdf-capture .address-grid,
#invoiceSheet.invoice-pdf-capture .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#invoiceSheet.invoice-pdf-capture .invoice-banner-meta .banner-input::-webkit-calendar-picker-indicator { display: none !important; }
#invoiceSheet.invoice-pdf-capture textarea.activity-description { display: none !important; }
#invoiceSheet.invoice-pdf-capture .activity-description-print {
  display: block !important;
  padding: 4px 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
#invoiceSheet.invoice-pdf-capture textarea.activity-description::-webkit-resizer { display: none !important; }

.invoice-banner {
  display: grid;
  grid-template-columns: 67% 33%;
  margin: 0 0 26px;
  color: #fff;
}

.invoice-banner-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  padding: 14px 26px 14px 44px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
}

.invoice-banner-main h1 {
  margin: 0;
  padding-right: 20px;
  border-right: 2px solid rgba(255,255,255,.85);
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .5px;
}

.invoice-banner-main p {
  margin: 0;
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.invoice-banner-meta {
  display: grid;
  grid-template-columns: max-content 124px;
  column-gap: 10px;
  row-gap: 6px;
  justify-content: end;
  align-content: center;
  min-height: 68px;
  margin-left: -32px;
  padding: 12px 24px 12px 50px;
  background: var(--invoice-red);
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 15px;
}

.invoice-banner-meta div {
  display: contents;
}
.invoice-banner-meta span { font-weight: 600; white-space: nowrap; }
.banner-input {
  width: 124px;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-align: left;
}
.banner-input::-webkit-calendar-picker-indicator { filter: invert(1); }
.banner-input:focus { outline: 1px solid rgba(255,255,255,.85); outline-offset: 3px; }

.address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 24px;
}

.address-card {
  border: 1px solid var(--invoice-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--invoice-panel);
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  background: var(--invoice-panel-head);
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.card-heading svg { width: 16px; height: 16px; fill: var(--navy); }

.address-card address {
  margin: 0;
  padding: 12px 15px;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.address-card address::first-line {
  font-weight: 800;
  font-size: 17px;
}

.invoice-notes { display: none; }
.invoice-row.invoice-meta-grid { display: none; }

.invoice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 20px;
  font-size: 12px;
}

.invoice-table th,
.invoice-table td { border-right: 1px solid var(--invoice-line); border-bottom: 1px solid var(--invoice-line); }
.invoice-table th:first-child,
.invoice-table td:first-child { border-left: 1px solid var(--invoice-line); }

.invoice-table th {
  padding: 10px 12px;
  color: #fff;
  background: var(--navy);
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: left;
}

.invoice-table th:first-child { border-top-left-radius: 4px; }
.invoice-table th:last-child { border-top-right-radius: 4px; }
.invoice-table tbody tr:last-child td:first-child { border-bottom-left-radius: 4px; }
.invoice-table tbody tr:last-child td:last-child { border-bottom-right-radius: 4px; }
.invoice-table td { height: auto; padding: 6px 12px; border-top: 0; background: #fff; font-size: 13px; }
.invoice-table tbody tr:nth-child(even) td { background: #f8fafb; }

.invoice-table input,
.invoice-table textarea {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: #0c2745;
}

.invoice-col-num { width: 40px; text-align: center; }
.invoice-col-qty { width: 64px; }
.invoice-col-qty input { width: 100%; text-align: center; }
.invoice-col-money { width: 120px; text-align: right; }
.invoice-col-money input,
.activity-amount-computed { display: block; width: 100%; text-align: right; }
.activity-amount-computed { padding: 4px 0; font-weight: 700; }
.activity-line-controls { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; }

.add-activity-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px dashed var(--invoice-red);
  border-radius: 50%;
  padding: 0;
  color: var(--invoice-red);
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.add-activity-line-btn:disabled { opacity: .35; cursor: not-allowed; }

.summary-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .94fr);
  gap: 26px;
  align-items: end;
  margin-bottom: 24px;
}

.promise-block { padding-left: 4px; }

.trust-badges { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow Condensed", Arial Narrow, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.trust-badge svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--navy); fill: currentColor; }
.trust-badge:first-child svg { color: var(--invoice-red); }

.totals-box {
  border: 1px solid var(--invoice-line);
  border-radius: 4px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}

.totals-row { display: grid; grid-template-columns: 55% 45%; }
.totals-row + .totals-row { border-top: 1px solid var(--invoice-line); }
.totals-row span { padding: 10px 14px; background: var(--invoice-panel-head); }
.totals-row strong { display: block; padding: 10px 14px; text-align: right; background: var(--invoice-panel); font-size: 15px; }
.totals-row.balance span { color: #fff; background: var(--navy); font-size: 15px; }
.totals-row.balance strong { color: #fff; background: var(--invoice-red); font-size: 21px; }
.totals-row.balance.is-paid strong { background: var(--green); }

.totals-input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #0c2745;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  text-align: right;
}
.totals-input:focus { outline: 1px solid var(--invoice-red); outline-offset: 2px; }

.closing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: stretch;
  margin-bottom: 22px;
}

.notes-card {
  border: 1px solid var(--invoice-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--invoice-panel);
}

.notes-card p {
  margin: 0;
  padding: 12px 15px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.paid-stamp {
  left: 190px;
  right: auto;
  bottom: 48px;
  transform: rotate(-10deg);
  border-width: 2px;
  border-color: var(--green);
  color: var(--green);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  padding: 3px 10px;
  opacity: .8;
}


@media (max-width: 760px) {
  .invoice.sheet { padding-left: 20px; padding-right: 20px; }
  .invoice.sheet > .invoice-actions,
  .invoice.sheet > header,
  .invoice.sheet > section,
  .invoice.sheet > table,
  .invoice.sheet > button { margin-left: 0; margin-right: 0; }
  .invoice-header { grid-template-columns: 1fr; gap: 14px; }
  .company-contact { justify-self: start; }
  .invoice-banner { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; }
  .invoice-banner-main { padding-left: 20px; clip-path: none; }
  .invoice-banner-meta { margin: 0; padding: 14px 20px; min-height: auto; }
  .invoice-banner-meta { justify-content: start; }
  .address-grid, .summary-grid { grid-template-columns: 1fr; }
  .trust-badges { flex-wrap: wrap; }
}

@media print {
  @page { size: letter portrait; margin: 0; }

  .invoice.sheet {
    width: 210mm;
    max-width: 210mm;
    box-sizing: border-box;
    padding-left: 13mm;
    padding-right: 13mm;
    box-shadow: none;
  }
  .invoice.sheet > .invoice-actions,
  .invoice.sheet > header,
  .invoice.sheet > section,
  .invoice.sheet > table,
  .invoice.sheet > button { margin-left: 0 !important; margin-right: 0 !important; }
  .invoice.sheet > header.invoice-header { margin-top: 8mm !important; }
  .invoice-banner { margin-left: -13mm !important; margin-right: -13mm !important; }
  .invoice-banner-meta .banner-input::-webkit-calendar-picker-indicator { display: none !important; }
  .invoice-banner-meta input[type="date"] { appearance: none; -webkit-appearance: none; }
  #invoiceTab textarea.activity-description {
    display: none !important;
  }
  #invoiceTab .activity-description-print {
    display: block !important;
    padding: 4px 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
  #invoiceTab textarea.activity-description::-webkit-resizer { display: none !important; }
  .address-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .address-card, .invoice-table tr, .summary-grid, .closing-grid { break-inside: avoid; }
  .invoice-table thead { display: table-header-group; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Version 145: compact Order Sheet print and clean invoice typography. */
@media print {
  /* Keep the printed order border close to the content and reduce unused space. */
  #orderTab #orderSheet {
    width: 206mm !important;
    max-width: 206mm !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #orderTab .order-header,
  #orderTab .print-table {
    width: 100% !important;
    max-width: 100% !important;
  }
  #orderTab .order-header {
    grid-template-columns: 23mm 48mm 23mm minmax(0, 1fr) !important;
    grid-template-rows: 10.8mm repeat(4, 10.8mm) !important;
  }
  #orderTab .order-header .brand {
    padding: 2mm 2.5mm !important;
    font-size: 14pt !important;
  }
  #orderTab .field {
    min-height: 10.8mm !important;
    height: 10.8mm !important;
    padding: 1mm 1.5mm !important;
  }
  #orderTab .installation-header { display: none !important; }
  /* The installation block is omitted on paper. Expand the customer value
     through those columns so its bottom edge closes the full Name row. */
  #orderTab .customer-value {
    grid-column: 2 / 5 !important;
    border-right: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  #orderTab .address-label,
  #orderTab .address-value {
    border-top: 0.5pt solid #111 !important;
  }
  #orderTab .address-value { border-right: 0 !important; }
  #orderTab .installation-header-item { padding: .8mm 1mm !important; border-color: #111 !important; font-size: 8pt !important; gap: 1mm !important; }
  #orderTab .installation-header-item b { font-size: 6.5pt !important; }
  #orderTab .field.label { font-size: 8.5pt !important; }
  #orderTab .field.value,
  #orderTab .field.big,
  #orderTab .headrail-value,
  #orderTab .fabric-value,
  #orderTab .chain-value { font-size: 10pt !important; }
  #orderTab .print-table th {
    height: 8.1mm !important;
    padding: 1mm .5mm !important;
    font-size: 7pt !important;
    vertical-align: middle !important;
  }
  #orderTab .print-table td,
  #orderTab .print-table input,
  #orderTab .print-table select {
    height: 11.7mm !important;
    padding: .5mm .35mm !important;
    font-size: 16.5pt !important;
    font-weight: 700 !important;
  }
  #orderTab .print-table tbody tr:not(.fabric-change-row) td:nth-child(4),
  #orderTab .print-table tbody tr:not(.fabric-change-row) td:nth-child(6) {
    font-size: 14.85pt !important;
    font-weight: 400 !important;
  }
}

/* Version 208: Studio Clean screen refresh. Print rules above stay in charge
   when printing, so labels, order sheets, invoices, and estimate sheets are not
   redesigned by this screen-only skin. */
@media screen {
  :root {
    --studio-bg: #f6f7f9;
    --studio-surface: #ffffff;
    --studio-surface-2: #fbfbfc;
    --studio-border: #e4e7ec;
    --studio-border-strong: #d0d5dd;
    --studio-text: #101323;
    --studio-muted: #5b6270;
    --studio-soft: #8a909e;
    --studio-accent: #3550e0;
    --studio-accent-soft: #ebeffe;
    --studio-accent-dark: #1f32a6;
    --studio-danger: #d0402b;
    --studio-danger-soft: #fceae7;
    --studio-shadow: 0 1px 2px rgba(16, 19, 35, .04);
    --studio-radius: 10px;
  }

  body {
    background: var(--studio-bg);
    color: var(--studio-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }

  button {
    min-height: 36px;
    border: 1px solid var(--studio-border-strong);
    border-radius: 8px;
    background: var(--studio-surface);
    color: var(--studio-text);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--studio-shadow);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  button:not(.primary):hover {
    background: var(--studio-surface-2);
    border-color: #b8c0cc;
  }

  button.primary:not(:disabled):hover {
    color: #fff;
    filter: brightness(.9);
  }

  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid var(--studio-accent);
    outline-offset: 2px;
  }

  .topbar {
    grid-template-columns: minmax(260px, 1fr) auto minmax(360px, 1fr);
    min-height: 74px;
    padding: 0 26px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--studio-border);
    box-shadow: none;
  }

  .topbar-brand {
    gap: 14px;
  }

  .menu-button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #243044;
    font-size: 22px;
  }

  .menu-button:hover,
  .menu-button:focus-visible {
    background: var(--studio-accent-soft);
    color: var(--studio-accent-dark);
  }

  .topbar h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .topbar-navigation {
    gap: 8px;
    padding: 0 8px;
  }

  .topbar-navigation button {
    min-width: 86px;
    padding: 9px 14px;
    border-color: var(--studio-border-strong);
    font-size: 14px;
    font-weight: 600;
  }

  .topbar-navigation button.active-action {
    background: var(--studio-accent);
    color: #fff;
    border-color: var(--studio-accent);
    box-shadow: 0 1px 2px rgba(53, 80, 224, .2);
  }

  .topbar-navigation #saveOrderBtn {
    background: var(--studio-surface);
    color: var(--studio-text);
    border-color: var(--studio-border-strong);
  }

  .topbar-tools {
    gap: 13px;
  }

  .header-backup-timer {
    min-width: 142px;
    color: var(--studio-text);
    font-size: 17px;
    font-weight: 800;
  }

  .header-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #344054;
    box-shadow: none;
  }

  .header-icon-button:hover,
  .header-icon-button:focus-visible {
    color: var(--studio-accent-dark);
    background: var(--studio-accent-soft);
  }

  .header-avatar {
    width: 34px;
    height: 34px;
    background: #738097;
    font-size: 13px;
  }

  .header-version-avatar {
    background: #738097;
    font-size: 10px;
  }

  .current-order-banner {
    top: 74px;
    min-height: 46px;
    padding: 8px 32px;
    border-bottom: 1px solid var(--studio-border);
    background: #f8fafc;
    color: var(--studio-text);
    font-size: 19px;
    font-weight: 800;
    box-shadow: none;
  }

  .current-order-banner span + span {
    border-left-color: #dce4ee;
  }

  main {
    gap: 20px;
    padding: 24px 18px 28px;
    background: var(--studio-bg);
  }

  .workspace {
    width: 100%;
  }

  .tabs {
    justify-content: center;
    gap: 8px;
    margin: 0 auto 18px;
    padding: 0;
    max-width: 1400px;
  }

  .tabs button {
    min-height: 38px;
    padding: 9px 14px;
    border-color: var(--studio-border-strong);
    background: var(--studio-surface);
    font-size: 13.5px;
  }

  .tab.active {
    background: var(--black);
    border-color: var(--black);
    color: #fff;
  }

  .tabs #exportExcelBtn,
  .tabs #exportInvoicePdfBtn {
    background: var(--studio-surface);
    color: var(--studio-text);
  }

  .sheet {
    max-width: 1220px;
    padding: 22px 24px;
    border: 1px solid var(--studio-border);
    border-radius: 12px;
    background: var(--studio-surface);
    box-shadow: var(--studio-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .black-title {
    margin: -2px -2px 18px;
    border-radius: 8px;
    background: var(--black);
    font-size: 22px;
    letter-spacing: 0;
  }

  .info-grid {
    gap: 14px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 0;
  }

  .info-grid > label,
  .shipping-address-field {
    min-height: auto;
    height: auto;
    max-height: none;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    overflow: hidden;
  }

  .info-grid > label {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
  }

  .customer-pricing-row { gap: 14px 16px; }
  .customer-pricing-row > label {
    min-height: auto;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    overflow: hidden;
    grid-template-columns: 145px minmax(0, 1fr);
  }

  .info-grid > label.full-address {
    grid-column: 1 / -1;
  }

  .info-grid input,
  .info-grid select,
  .shipping-value > input {
    min-height: 44px;
    border: 0;
    border-left: 1px solid var(--studio-border);
    background: var(--studio-surface-2);
    color: var(--studio-text);
    font-size: 17px;
    font-weight: 700;
    text-align: left;
  }

  .info-grid input:focus,
  .info-grid select:focus,
  .shipping-value > input:focus,
  .installation-schedule-row input:focus,
  .installation-schedule-row select:focus,
  .customer-notes-field textarea:focus {
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--studio-accent);
  }

  .shipping-address-field {
    grid-template-columns: 170px minmax(0, 1fr);
    margin-left: 0;
    width: auto;
  }

  .shipping-label {
    gap: 3px;
    padding: 8px 12px;
  }

  .shipping-value {
    border-left: 1px solid var(--studio-border);
    background: var(--studio-surface-2);
  }

  .checkbox-inline {
    padding-left: 0;
    color: var(--studio-text);
    font-size: 12px;
    letter-spacing: 0;
  }

  /* The general form-input rule above gives inputs a 44px minimum height.
     Keep the shipping checkbox compact so its row matches the other fields. */
  .shipping-label .checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
  }

  .installation-schedule-row,
  .customer-notes-field {
    margin-top: 16px;
  }

  .installation-schedule-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .installation-schedule-row label,
  .customer-notes-field {
    display: grid;
    gap: 6px;
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
  }

  #customerTab .installation-schedule-row label {
    padding: 12px;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
  }

  .installation-schedule-row input,
  .installation-schedule-row select,
  .customer-notes-field textarea {
    min-height: 44px;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface-2);
    color: var(--studio-text);
    padding: 9px 11px;
    font-size: 16px;
    font-weight: 700;
  }

  #customerTab .customer-notes-field {
    padding: 12px;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
  }

  #customerTab .customer-notes-field textarea {
    border: 1px solid var(--studio-border);
    border-radius: 10px;
  }

  h3 {
    margin: 22px 0 10px;
    color: var(--studio-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .table-wrap {
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
  }

  .data-table th {
    border-color: var(--studio-border);
    background: #eef1f5;
    color: var(--studio-muted);
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .data-table td {
    border-color: var(--studio-border);
    background: var(--studio-surface);
  }

  .data-table input,
  .data-table select,
  .data-table textarea {
    background: var(--studio-surface-2);
    color: var(--studio-text);
    border-radius: 7px;
  }

  #measurementsTable input.measurement-invalid {
    color: var(--studio-danger) !important;
    background: var(--studio-danger-soft) !important;
    box-shadow: inset 0 0 0 2px var(--studio-danger);
  }

  input.required-missing {
    border-color: var(--studio-danger) !important;
    background: var(--studio-danger-soft) !important;
    box-shadow: inset 0 0 0 2px var(--studio-danger);
  }

  .sidebar {
    top: 88px;
    width: 340px;
    border: 1px solid var(--studio-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 36px rgba(16, 19, 35, .14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sidebar.customer-search-open {
    border-color: var(--studio-accent);
    box-shadow: 0 0 0 3px rgba(53, 80, 224, .16), 0 18px 36px rgba(16, 19, 35, .14);
  }

  .sidebar h2 {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--studio-border);
    color: var(--studio-text);
    font-size: 22px;
  }

  .sidebar input {
    border-color: var(--studio-border);
    border-radius: 8px;
    background: var(--studio-surface-2);
  }

  .order-card {
    border-color: var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
    box-shadow: var(--studio-shadow);
  }

  .order-card button.open-active,
  .actions button.active-action {
    background: var(--studio-accent);
    color: #fff;
    border-color: var(--studio-accent);
  }

  .reports-menu {
    border-color: var(--studio-border);
    background: #fff;
    box-shadow: 0 18px 36px rgba(16, 19, 35, .14);
  }

  .reports-menu-title {
    color: var(--studio-soft);
  }

  .reports-menu button {
    border-color: var(--studio-border);
    color: var(--studio-text);
  }

  .notification-panel {
    top: 84px;
    border-color: var(--studio-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(16, 19, 35, .14);
  }

  .notification-panel li {
    background: var(--studio-danger-soft);
    color: #a40020;
  }

  .home-sheet .black-title {
    margin-bottom: 14px;
  }

  .home-heading {
    color: var(--studio-text);
    font-size: 28px;
  }

  .home-search-label,
  .home-sort-note,
  .home-click-note {
    color: var(--studio-soft);
  }

  .home-search-row input {
    border: 1px solid var(--studio-border);
    border-radius: 8px;
    background: var(--studio-surface-2);
  }

  .home-orders-table th {
    background: #eef1f5;
    color: var(--studio-muted);
  }

  @media (max-width: 1180px) {
    .topbar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
    }

    .topbar-navigation {
      justify-content: center;
      overflow-x: auto;
    }

    .header-backup-timer {
      min-width: auto;
      font-size: 15px;
    }

    .current-order-banner {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 4px;
      white-space: normal;
    }
  }

  @media (max-width: 820px) {
    .topbar {
      grid-template-columns: 1fr;
      padding: 12px 16px;
      gap: 10px;
    }

    .topbar-brand,
    .topbar-navigation,
    .topbar-tools {
      grid-column: 1;
      justify-content: center;
    }

    .topbar-navigation {
      flex-wrap: wrap;
    }

    .current-order-banner {
      position: static;
      grid-template-columns: 1fr;
      text-align: center;
    }

    .current-order-banner span + span {
      border-left: 0;
      border-top: 1px solid var(--studio-border);
    }

    .info-grid,
    .installation-schedule-row,
    .customer-pricing-row {
      grid-template-columns: 1fr;
    }

    .info-grid > label,
    .customer-pricing-row > label,
    .shipping-address-field {
      grid-template-columns: 120px minmax(0, 1fr);
    }
  }
}

/* ================================================================
   Liquid Glass visual redesign — Customer Information & Order Sheet
   Screen-only. Every rule below is scoped inside @media screen so
   print output (already tested and correct) is completely untouched.
   ================================================================ */
@media screen {
  :root {
    --glass-text: #101323; --glass-text-2: #4b5162; --glass-text-3: #7a8090;
    --glass-accent: #2f5af0; --glass-accent-700: #1d3aa8;
    --glass-danger: #c6392a; --glass-danger-tint: rgba(198, 57, 42, .10);
    --glass-border: rgba(255,255,255,.75);
    --glass-bg: rgba(255,255,255,.62); --glass-bg-strong: rgba(255,255,255,.85);
    --glass-shadow: 0 8px 30px rgba(30,41,80,.10), 0 2px 8px rgba(30,41,80,.06);
    --glass-font-ui: 'Inter', Arial, sans-serif;
    --glass-font-mono: 'IBM Plex Mono', monospace;
  }

  body {
    font-family: var(--glass-font-ui);
    background:
      radial-gradient(1100px 620px at 8% -10%, #dce8ff 0%, transparent 55%),
      radial-gradient(900px 560px at 100% 0%, #e7e1ff 0%, transparent 50%),
      radial-gradient(1000px 700px at 50% 110%, #e4f1ff 0%, transparent 55%),
      #eef2f8;
  }

  /* ---------- Top bar ---------- */
  .topbar {
    margin: 14px 18px 0;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--glass-shadow);
    min-height: 72px;
  }
  .topbar h1 { font-family: var(--glass-font-ui); font-weight: 700; letter-spacing: -0.01em; }
  .topbar-navigation { background: rgba(255,255,255,.5); padding: 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); }
  .topbar-navigation button { border-radius: 999px; font-family: var(--glass-font-ui); font-weight: 600; font-size: 14.5px; border-color: transparent; background: transparent; }
  .topbar-navigation button.active-action { background: linear-gradient(155deg, #5b82ff, #2f5af0); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(47,90,240,.35); }
  .topbar-navigation #saveOrderBtn { background: rgba(255,255,255,.8); border-color: rgba(255,255,255,.9); }
  .header-backup-timer { font-family: var(--glass-font-mono); font-size: 15px; }
  .header-icon-button { border-radius: 50%; }
  .header-icon-button:hover, .header-icon-button:focus-visible { background: rgba(255,255,255,.7); }
  .header-avatar { background: linear-gradient(155deg, #2e3350, #101323); box-shadow: 0 4px 10px rgba(16,19,35,.3); }
  .header-avatar.header-version-avatar { background: rgba(255,255,255,.6); color: var(--glass-text-2); border: 1px solid rgba(255,255,255,.8); font-family: var(--glass-font-mono); }
  .reports-menu { border-radius: 16px; background: #fefeff; border-color: var(--glass-border); }

  /* ---------- Tabs strip ---------- */
  .tabs {
    margin: 16px 0 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    box-shadow: var(--glass-shadow);
    padding: 6px 8px;
  }
  .tabs .tab { border-radius: 999px; font-family: var(--glass-font-ui); font-weight: 600; font-size: 14.5px; border: none; background: transparent; color: var(--glass-text-3); }
  .tabs .tab.active { color: #fff; background: linear-gradient(155deg, #5b82ff, #2f5af0); box-shadow: 0 3px 10px rgba(47,90,240,.35); }
  .tabs #exportExcelBtn, .tabs #exportInvoicePdfBtn { border-radius: 999px; font-family: var(--glass-font-ui); font-weight: 600; }
  .tabs #exportInvoicePdfBtn { background: linear-gradient(155deg, #5b82ff, #2f5af0); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(47,90,240,.35); }

  /* ---------- Glass cards (Customer Information) ---------- */
  #customerTab .black-title {
    border-radius: 18px 18px 0 0;
    font-family: var(--glass-font-ui);
    letter-spacing: .03em;
  }
  #customerTab .glass-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 22px 24px;
    margin: 16px 0;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
  }
  #customerTab .glass-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  }
  #customerTab .glass-card h3 {
    font-family: var(--glass-font-ui); font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--glass-text-3); font-weight: 700; margin: 0 0 16px;
  }
  #customerTab .info-grid label,
  #customerTab .installation-schedule-row label,
  #customerTab .shipping-label,
  #customerTab .attachment-label {
    font-family: var(--glass-font-ui); color: var(--glass-text-2); font-weight: 600;
  }
  #customerTab .info-grid input,
  #customerTab .info-grid select,
  #customerTab .installation-schedule-row input,
  #customerTab .installation-schedule-row select,
  #customerTab .shipping-value input,
  #customerTab .customer-notes-field textarea {
    font-family: var(--glass-font-ui);
    font-size: 15.5px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.65);
  }
  #customerTab .info-grid input:focus,
  #customerTab .info-grid select:focus,
  #customerTab .installation-schedule-row input:focus,
  #customerTab .installation-schedule-row select:focus,
  #customerTab .shipping-value input:focus,
  #customerTab .customer-notes-field textarea:focus {
    outline: none; border-color: var(--glass-accent); background: #fff;
    box-shadow: 0 0 0 4px rgba(47,90,240,.14);
  }
  #customerTab .info-grid input[id="subtotal"],
  #customerTab .info-grid input[id="gstAmount"],
  #customerTab .info-grid input[id="receivePayment"],
  #customerTab .info-grid input[id="balanceDue"] {
    font-family: var(--glass-font-mono); font-weight: 600;
  }
  #customerTab .info-grid input[id="balanceDue"] {
    background: var(--glass-danger-tint); color: var(--glass-danger); font-weight: 700; border-color: transparent;
  }
  #customerTab .customer-notes-field { border: 1px solid var(--studio-border); background: var(--studio-surface); }
  #customerTab .customer-notes-field textarea { border: 1px solid var(--studio-border); border-radius: 10px; }
  #customerTab .attachment-field {
    background: rgba(255,255,255,.5); border-radius: 14px; border: 1px solid var(--glass-border); margin-top: 18px;
  }
  #customerTab .attachment-empty button,
  #customerTab .attachment-filled button {
    border-radius: 999px; font-family: var(--glass-font-ui);
  }
  #customerTab .attachment-filled .attachment-download-btn {
    background: var(--glass-accent); color: #fff; border-color: var(--glass-accent);
  }
  #customerTab .fabric-model-add-button { border-radius: 999px; font-family: var(--glass-font-ui); font-weight: 700; }
  #measurementsTable { border-radius: 12px; overflow: hidden; }

  /* ---------- Report Tabs: glass card design (Statement, Motorized, Headrail) ---------- */
  #statementTab .glass-card,
  #motorizedTab .glass-card,
  #headrailTab .glass-card,
  #fabricUsageTab .glass-card,
  #buildersTab .glass-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 22px 24px;
    margin: 16px 0;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
  }
  #statementTab .glass-card::before,
  #motorizedTab .glass-card::before,
  #headrailTab .glass-card::before,
  #fabricUsageTab .glass-card::before,
  #buildersTab .glass-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  }

  /* ---------- Order Sheet: action bar (screen controls only, print is untouched) ---------- */
  #orderTab .tab-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    box-shadow: var(--glass-shadow);
    padding: 10px 16px;
  }
  #orderTab .print-copy-control { min-width: 0; flex: 1 1 420px; font-family: var(--glass-font-ui); font-weight: 600; color: var(--glass-text-2); }
  #orderTab .print-copy-control select {
    border-radius: 999px; font-family: var(--glass-font-ui); border: 1px solid rgba(255,255,255,.9); background: #fff;
  }
  #orderTab #openLabelsBtn,
  #orderTab #printOrderBtn {
    min-height: 39px; height: 39px; padding: 10px 14px; border-radius: 8px; font-family: var(--glass-font-ui); font-weight: 700;
    flex: 0 0 auto;
    background: linear-gradient(155deg, #5b82ff, #2f5af0); color: #fff; border: none;
    box-shadow: 0 3px 10px rgba(47,90,240,.35);
  }
  #orderTab #printOrderBtn { margin-left: auto; }

  /* ---------- Order Sheet: printable content, cosmetic only (no layout/width changes) ---------- */
  #orderTab .sheet {
    border-radius: 20px; overflow: hidden; box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
  }
  #orderTab .order-header,
  #orderTab #orderTable {
    font-family: var(--glass-font-ui);
  }
  #orderTab #orderTable td, #orderTab #orderTable th { font-family: var(--glass-font-mono); }
}

/* ---------- Home: view attachment eye icon + viewer modal ---------- */
@media screen {
  .home-order-no-cell { display: flex; align-items: center; gap: 6px; justify-content: center; }
  .home-view-attachment,
  .home-view-attachment-spacer { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
  .home-view-attachment {
    border: none; background: transparent; font-size: 16px; line-height: 1; cursor: pointer;
    padding: 0; border-radius: 999px; color: var(--glass-accent, #2f5af0);
  }
  .home-view-attachment:hover { background: rgba(47,90,240,.12); }
  .home-print-preview-cell { text-align: center; }
  .home-view-print {
    min-width: 54px; padding: 6px 9px; border: 1px solid var(--glass-accent, #2f5af0);
    border-radius: 7px; background: #fff; color: var(--glass-accent, #2f5af0);
    font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer;
  }
  #homeTab .home-view-print:hover,
  #homeTab .home-view-print:focus-visible {
    background: #eaf1ff;
    border-color: #174eb9;
    color: #174eb9;
  }

  .attachment-viewer-modal {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    background: rgba(16,19,35,.5); padding: 24px;
  }
  .attachment-viewer-card {
    width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(16,19,35,.3);
  }
  .attachment-viewer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e4e7ec; font-weight: 700; font-family: var(--glass-font-ui, Arial, sans-serif);
  }
  .attachment-viewer-head-actions { display: flex; align-items: center; gap: 10px; }
  .attachment-viewer-print-btn {
    border: 1px solid #d0d5dd; background: #fff; border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--glass-font-ui, Arial, sans-serif); color: #101323;
  }
  .attachment-viewer-print-btn:hover { background: #f1f4f9; }
  .order-print-preview-modal {
    position: fixed; inset: 0; z-index: 1400; display: flex; align-items: flex-start; justify-content: center;
    overflow: auto; padding: 24px; background: rgba(16,19,35,.58);
  }
  .order-print-preview-card {
    width: min(1120px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
    overflow: hidden; border-radius: 18px; background: #f4f6fa; box-shadow: 0 30px 80px rgba(16,19,35,.35);
  }
  .order-print-preview-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px;
    background: #fff; border-bottom: 1px solid #dfe4ec;
  }
  .order-print-preview-head h2 { margin: 0; font-size: 20px; }
  .order-print-preview-head button { border: 0; background: transparent; font-size: 22px; cursor: pointer; }
  .order-print-preview-note { margin: 0; padding: 10px 20px; color: #5d6675; background: #fff; font-size: 13px; }
  .order-print-preview-body { flex: 1; overflow: auto; padding: 18px; }
  .order-print-preview-copy {
    width: min(170mm, 100%); max-width: 100%; margin: 0 auto 22px; padding: 0;
    background: #fff; border: 1px solid #d6dce6; border-radius: 8px; box-shadow: 0 8px 24px rgba(16,19,35,.12);
  }
  .order-print-preview-copy:last-child { margin-bottom: 0; }
  .order-print-preview-copy .order-header,
  .order-print-preview-copy #orderTable { width: 100%; max-width: 100%; box-sizing: border-box; }
  .order-print-preview-copy .order-header {
    grid-template-columns: 23mm 48mm 23mm minmax(0, 1fr);
    grid-template-rows: repeat(5, minmax(12mm, auto));
  }
  .order-print-preview-copy .order-header .brand {
    min-height: 0; padding: 12px 14px; gap: 8px; font-size: 18px; line-height: 1.05;
  }
  .order-print-preview-copy .order-header .brand > span:first-child { min-width: 0; flex: 1 1 auto; white-space: nowrap; }
  .order-print-preview-copy .order-header .print-copy-label { flex: 0 0 auto; white-space: nowrap; font-size: 14px; }
  .order-print-preview-copy .field { min-width: 0; min-height: 12mm; padding: 6px 8px; overflow: hidden; }
  .order-print-preview-copy .field.label { font-size: 12px; line-height: 1.1; }
  .order-print-preview-copy .field.value,
  .order-print-preview-copy .field.big { min-width: 0; font-size: 16px; line-height: 1.12; overflow-wrap: anywhere; }
  .order-print-preview-copy .installation-header { min-width: 0; min-height: 12mm; }
  .order-print-preview-copy .installation-header-item { min-width: 0; padding: 6px 5px; gap: 4px; font-size: 12px; white-space: normal; }
  .order-print-preview-copy .installation-header-item b { font-size: 9px; line-height: 1.05; white-space: normal; }
  .order-print-preview-copy .order-header { border-color: #111; }
  .order-print-preview-copy .order-header .brand { background: var(--black); color: #fff; }
  .order-print-preview-copy .order-header .field,
  .order-print-preview-copy .installation-header,
  .order-print-preview-copy .installation-header-item { border-color: #111; }
  .order-print-preview-copy #orderTable { margin-top: 16px; border-collapse: collapse; }
  .order-print-preview-copy #orderTable th,
  .order-print-preview-copy #orderTable td { border: 1px solid #111; }
  .order-print-preview-copy #orderTable tbody tr.empty { display: none; }
  .order-print-preview-copy #orderTable tbody tr.empty.print-spacer-row { display: table-row; height: 42px; }
  .order-print-preview-copy #orderTable tbody tr.empty.print-spacer-row td { height: 42px; padding-top: 0; padding-bottom: 0; }
  .order-customer-notes { margin-top: 16px; padding: 0 2px; color: #111; }
  .order-customer-notes-label { margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: .03em; }
  .order-customer-notes-value { white-space: pre-wrap; font-size: 14px; line-height: 1.35; }
  .order-print-preview-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: #fff; border-top: 1px solid #dfe4ec; }
  .order-print-preview-actions button { padding: 9px 16px; border: 1px solid #c8d1df; border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; }
  .order-print-preview-actions .primary { border-color: #2f5af0; background: #2f5af0; color: #fff; }
  .attachment-viewer-head button:not(.attachment-viewer-print-btn) { border: none; background: transparent; font-size: 16px; cursor: pointer; color: #7a8090; }
  .attachment-viewer-body { overflow: auto; padding: 16px; }
  .attachment-viewer-body img { width: 100%; border-radius: 10px; margin-bottom: 12px; display: block; }
  .attachment-viewer-body img:last-child { margin-bottom: 0; }
  .attachment-viewer-fallback { font-size: 13px; color: #666; text-align: center; padding: 30px; border: 1px dashed #ccc; border-radius: 10px; }

  .drive-picker-modal { position: fixed; top: 110px; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 22px; background: rgba(16,19,35,.5); }
  .drive-picker-card { width: min(720px, 100%); max-height: min(720px, 90vh); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(16,19,35,.3); }
  .drive-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e4e7ec; }
  .drive-picker-head h2 { margin: 0; color: var(--studio-text, #101323); font-size: 21px; }
  .drive-picker-head p { margin: 5px 0 0; color: var(--studio-muted, #687184); font-size: 13px; }
  .drive-picker-head button { border: 0; background: transparent; color: #687184; font-size: 22px; cursor: pointer; }
  .drive-picker-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; }
  .drive-picker-toolbar button { flex: 0 0 auto; min-height: 40px; padding: 9px 14px; border: 1px solid #2f5af0; border-radius: 8px; background: #2f5af0; color: #fff; font-weight: 800; cursor: pointer; }
  .drive-picker-toolbar button:disabled { opacity: .65; cursor: wait; }
  .drive-picker-toolbar input { min-width: 0; flex: 1 1 auto; min-height: 40px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }
  .drive-picker-status { min-height: 20px; padding: 0 20px 10px; color: #5d6675; font-size: 13px; }
  .drive-picker-status.error { color: #b42318; font-weight: 700; }
  .drive-file-list { min-height: 90px; overflow: auto; padding: 0 20px 14px; }
  .drive-file-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; border-top: 1px solid #edf0f4; text-align: left; }
  .drive-file-row button { min-width: 0; flex: 1; border: 0; background: transparent; color: #101323; text-align: left; cursor: pointer; }
  .drive-file-row button:hover .drive-file-name { color: #2f5af0; }
  .drive-file-icon { flex: 0 0 30px; font-size: 24px; text-align: center; }
  .drive-file-name { display: block; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .drive-file-meta { display: block; margin-top: 3px; color: #687184; font-size: 12px; }
  .drive-file-empty { padding: 20px 4px; color: #687184; text-align: center; }
  .drive-picker-actions { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid #e4e7ec; }
  .drive-picker-actions button { padding: 8px 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #101323; font-weight: 700; cursor: pointer; }
  .drive-picker-actions #loadMoreDriveFilesBtn { border-color: #2f5af0; color: #2f5af0; }
  .drive-picker-actions #loadMoreDriveFilesBtn:disabled { opacity: .6; cursor: wait; }
  @media (max-width: 560px) { .drive-picker-modal { padding: 10px; } .drive-picker-toolbar { align-items: stretch; flex-direction: column; } .drive-picker-toolbar input { width: 100%; } }
}

/* ---------- Attachment viewer: dedicated print flow ---------- */
@media screen {
  .attachment-viewer-print-area { display: none; }
}
@media print {
  body.printing-attachment-view > *:not(#attachmentViewerPrintArea) { display: none !important; }
  #attachmentViewerPrintArea { display: block !important; }
  #attachmentViewerPrintArea .attachment-viewer-print-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
  #attachmentViewerPrintArea img { width: 100%; page-break-after: always; }
  #attachmentViewerPrintArea img:last-child { page-break-after: auto; }
}

/* Order Sheet design preview: match the Customer Information glass-card
   language on screen only. The established print layout remains unchanged. */
@media screen {
  #orderTab #orderSheet { overflow: visible; }

  #orderTab .order-header {
    grid-template-columns: 145px minmax(0, 1fr) 145px minmax(0, 1fr);
    grid-template-rows: auto repeat(4, 58px);
    row-gap: 14px;
    column-gap: 0;
    padding: 22px 24px;
    border: 1px solid var(--studio-border);
    border-radius: 20px;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }

  #orderTab .order-header .brand {
    min-height: 78px;
    padding: 18px 22px;
    border: 0;
    border-radius: 18px;
    background: var(--black);
    font-family: var(--glass-font-ui);
    font-size: 26px;
    letter-spacing: .03em;
    box-shadow: 0 8px 20px rgba(16, 19, 35, .14);
  }

  #orderTab .order-header .field {
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid var(--studio-border);
    background: var(--studio-surface);
    font-family: var(--glass-font-ui);
  }

  #orderTab .order-header .field.label {
    border-right: 1px solid var(--studio-border);
    border-radius: 10px 0 0 10px;
    background: var(--studio-surface);
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .025em;
  }

  #orderTab .order-header .field.value {
    justify-content: flex-start;
    border-radius: 0 10px 10px 0;
    background: var(--studio-surface-2);
    color: var(--studio-text);
    font-size: 17px;
    font-weight: 700;
  }

  #orderTab .order-header .field.big {
    font-family: var(--glass-font-mono);
    font-size: 23px;
  }

  #orderTab .order-header .installation-header,
  #orderTab .order-header .headrail-label,
  #orderTab .order-header .chain-label { margin-left: 14px; }

  #orderTab .order-header .installation-header {
    min-height: 58px;
    overflow: hidden;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface-2);
  }

  #orderTab .installation-header-item {
    border-right: 1px solid var(--studio-border);
    color: var(--studio-text);
    font-family: var(--glass-font-ui);
    white-space: nowrap;
  }

  #orderTab .installation-header {
    grid-template-columns: 1.7fr .62fr .9fr;
  }

  #orderTab .installation-header-item b {
    color: var(--studio-muted);
    font-size: 10px;
    letter-spacing: .025em;
    white-space: nowrap;
  }

  #orderTab #orderTable {
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--studio-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    background: var(--studio-surface);
    box-shadow: var(--glass-shadow);
  }

  #orderTab #orderTable th {
    height: 42px;
    border: 0;
    border-right: 1px solid #222;
    background: var(--black);
    color: #fff;
    font-family: var(--glass-font-ui);
    font-size: 12px;
    letter-spacing: .025em;
  }

  #orderTab #orderTable thead .size-band th {
    height: 34px;
    border-right: 1px solid var(--studio-border);
    border-bottom: 1px solid var(--studio-border);
    background: var(--studio-surface);
    color: var(--studio-muted);
  }

  #orderTab #orderTable td {
    height: 42px;
    border: 0;
    border-right: 1px solid var(--studio-border);
    border-bottom: 1px solid var(--studio-border);
    background: var(--studio-surface);
    color: var(--studio-text);
  }

  #orderTab #orderTable th:last-child,
  #orderTab #orderTable td:last-child { border-right: 0; }

  #orderTab #orderTable tbody tr:last-child td { border-bottom: 0; }

  /* Match the Customer Information card scale on the editable Order Sheet. */
  #orderTab .order-header {
    grid-template-rows: 54px repeat(4, 52px);
    row-gap: 10px;
    padding: 16px 18px;
  }
  #orderTab .order-header .brand {
    min-height: 54px;
    height: 54px;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 22px;
    line-height: 1.1;
  }
  #orderTab .order-header .field,
  #orderTab .order-header .installation-header {
    min-height: 52px;
    height: 52px;
    box-sizing: border-box;
  }
  #orderTab .installation-header { grid-template-columns: 1.45fr .65fr 1fr; }
  #orderTab .installation-header-item { gap: 4px; padding: 6px 5px; font-size: 13px; }
  #orderTab .installation-header-item b { font-size: 9px; }
}

/* Feedback Container for Save/Export Messages */
.feedback-container {
  padding: 0 16px;
  margin: 12px 0;
  min-height: 20px;
}

.toast-message {
  background: #0a9a0a;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 8px;
  animation: fadeInToast 0.3s ease-out;
}

.toast-message.export {
  background: #ff9500;
}

@keyframes fadeInToast {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.last-saved-timestamp {
  font-size: 11px;
  color: #666;
  padding: 0 2px;
  text-align: right;
  min-height: 16px;
}

.last-saved-timestamp b {
  color: #2f5af0;
  font-weight: 600;
}

/* Final cascade override: inactive third-row tabs match the dark order-summary text. */
.tabs .tab:not(.active) { color: #101323 !important; }

/* Approved continuous three-row header: matching surfaces, aligned edges, no row gaps. */
@media (min-width: 1051px) {
  .topbar { margin-bottom: 0; border-radius: 24px 24px 0 0; }
  .current-order-banner { margin: 0 18px; width: calc(100% - 36px); min-height: 58px; background: var(--glass-bg-strong, rgba(255,255,255,.86)); border: 1px solid var(--glass-border, rgba(213,222,233,.95)); border-top: 0; border-radius: 0; }
  .tabs { margin: 0 18px; width: calc(100% - 36px); border-radius: 0 0 24px 24px; border-top: 0; }
}
@media (max-width: 1050px) {
  .topbar { margin-bottom: 0; }
  .current-order-banner { margin: 0 18px; width: calc(100% - 36px); background: var(--glass-bg-strong, rgba(255,255,255,.86)); border-radius: 0; }
  .tabs { margin: 0 18px; width: calc(100% - 36px); border-radius: 0 0 24px 24px; }
}

/* Final cascade override for the live three-row layout. */
main { gap: 0 !important; padding-top: 0 !important; }
.workspace { width: 100% !important; min-width: 0; }
.tabs { margin: 0 !important; width: 100% !important; }
.topbar { border-bottom: 1px solid #dce4ee !important; box-shadow: none !important; }
.current-order-banner { border-top: 1px solid #dce4ee !important; box-shadow: none !important; }

/* The three approved header rows meet with no gap or divider between them. */
.topbar { border-bottom: 0 !important; }
.current-order-banner { border-top: 0 !important; border-bottom: 0 !important; }

/* Keep the three rows in normal document flow. Their prior sticky offsets
   overlapped the form underneath and exposed its dark border as a false gap. */
.current-order-banner,
.tabs { position: relative !important; top: auto !important; }

/* One matching pair of lower corners for every screen width. */
.tabs { border-radius: 0 0 24px 24px !important; overflow: hidden; }

/* The upper rows must not end in rounded corners before the toolbar row. */
.topbar { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; overflow: visible !important; }
.current-order-banner { border-radius: 0 !important; overflow: visible !important; }

/* Fixed opaque header stack: keeps all three rows on top of the form. */
.topbar { position: sticky !important; top: 0 !important; z-index: 100 !important; background: #fff !important; }
.current-order-banner { position: sticky !important; top: 72px !important; z-index: 90 !important; background: #fff !important; }
.tabs { position: sticky !important; top: 130px !important; z-index: 89 !important; background: #fff !important; }

/* Approved visual-only toolbar styling: keep the same button behavior. */
.tabs #exportInvoicePdfBtn,
.tabs #saveOrderBtn {
  background: #fff !important;
  color: #101323 !important;
  border: 1px solid #d0d8e5 !important;
  box-shadow: none !important;
}

/* Approved V238 header preview: visual treatment only. */
:root {
  --header-navy: #0b1f3a;
  --header-navy-hover: #17375f;
  --header-blue: #2563eb;
  --header-line: #dbe3ee;
}

.topbar {
  min-height: 72px !important;
  padding: 0 26px !important;
  border-radius: 0 !important;
  background: var(--header-navy) !important;
  color: #fff !important;
}
.topbar-brand { gap: 14px; }
.topbar h1 { color: #fff; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.menu-button { color: #fff; }
.menu-button:hover, .menu-button:focus-visible { color: #fff; background: var(--header-navy-hover); outline-color: #8fb8ff; }
.topbar-navigation { align-self: stretch; gap: 2px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.topbar-navigation button {
  position: relative;
  min-width: 94px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #cbd6e6;
  font-weight: 650;
}
.topbar-navigation button:hover, .topbar-navigation button:focus-visible { background: var(--header-navy-hover); color: #fff; outline: none; }
.topbar-navigation button.active-action { background: #fff; color: var(--header-navy); }
.topbar-navigation button.active-action::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 3px; border-radius: 3px 3px 0 0; background: var(--header-blue); }
.topbar-tools { gap: 10px; }
.header-backup-timer { color: #d8e2f0; font-size: 13px; font-weight: 650; }
.header-search-button { width: 168px; border-color: #39516f; background: #142d4d; color: #fff; }
.header-search-button span { color: #b9c7d9; }
.header-search-button:hover, .header-search-button:focus-visible { border-color: #78a7ef; background: #19385f; box-shadow: none; }
.header-icon-button { color: #d8e2f0; }
.header-icon-button:hover, .header-icon-button:focus-visible { color: #fff; background: var(--header-navy-hover); }
.notification-button > span { border-color: var(--header-navy); background: #60a5fa; }
.header-version-avatar,
.header-avatar.header-version-avatar { width: auto; min-width: 48px; height: 30px; padding: 0 9px; border: 1px solid #7183a0 !important; border-radius: 6px; background: transparent !important; color: #dce6f4 !important; font-size: 11px; }

.current-order-banner {
  top: 72px !important;
  min-height: 62px !important;
  grid-template-columns: minmax(105px,.72fr) minmax(160px,1.12fr) minmax(200px,1.4fr) minmax(140px,.9fr) minmax(150px,1fr) minmax(100px,.72fr) !important;
  padding: 9px 26px !important;
  border-bottom: 1px solid var(--header-line) !important;
  background: #fff !important;
  color: #152238 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}
.current-order-banner span { padding: 0 18px; }
.current-order-banner span + span { border-left: 1px solid var(--header-line); }

.tabs {
  top: 134px !important;
  min-height: 54px;
  max-width: none !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 7px 24px !important;
  border-bottom: 1px solid var(--header-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow-x: auto !important;
}
.tabs .tab {
  position: relative;
  min-height: 39px;
  padding: 8px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.tabs .tab.active { background: transparent !important; color: var(--header-blue) !important; }
.tabs .tab.active::after { content: ""; position: absolute; right: 10px; bottom: -7px; left: 10px; height: 3px; border-radius: 3px 3px 0 0; background: var(--header-blue); }
.tabs button:not(.tab) { height: 39px; min-height: 39px; padding: 8px 12px; border: 0 !important; border-radius: 7px; background: #fff !important; color: #17243a !important; white-space: nowrap; font-size: 13px; font-weight: 700; line-height: 1; box-shadow: none !important; }
.tabs #exportExcelBtn { margin-left: auto; }
.tabs #saveOrderBtn { border: 0 !important; background: var(--header-blue) !important; color: #fff !important; }
.tabs #exportInvoicePdfBtn { border: 0 !important; }
.tabs #saveOrderBtn:hover, .tabs #saveOrderBtn:focus-visible { background: #1d4ed8 !important; }

/* V314: keep the primary restore choice readable in every pointer state. */
#restoreMergeBtn,
#restoreMergeBtn:hover,
#restoreMergeBtn:focus,
#restoreMergeBtn:focus-visible,
#restoreMergeBtn:active {
  border-color: #0b1f3a !important;
  background: #0b1f3a !important;
  color: #fff !important;
  opacity: 1 !important;
}
#restoreMergeBtn:hover,
#restoreMergeBtn:focus-visible { background: #17375f !important; }
#restoreMergeBtn:disabled {
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
  color: #475569 !important;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .header-backup-timer { display: none; }
  .header-search-button { width: 42px; padding: 0 10px; }
  .header-search-button span { display: none; }
  .current-order-banner { overflow-x: auto; justify-content: start; }
  .current-order-banner span { min-width: 135px; }
}

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto !important; padding: 0 14px !important; }
  .topbar-brand h1 { font-size: 18px; }
  .topbar-navigation { grid-column: 1 / -1; order: 3; min-height: 44px; overflow-x: auto; }
  .topbar-tools { grid-column: 2; }
  .current-order-banner, .tabs { position: relative !important; top: auto !important; }
}

/* V329: Preserve the manufacturing header at narrow screen widths. Compressing
   its labelled columns made text overlap; the sheet now scrolls horizontally
   on small screens while the separate print layout remains unchanged. */
@media screen and (max-width: 800px) {
  #orderTab #orderSheet {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #orderTab .order-header,
  #orderTab #orderTable {
    width: 760px;
    min-width: 760px;
    max-width: none;
  }

  #orderTab .installation-header-item,
  #orderTab .installation-header-item b {
    white-space: normal;
  }
}

/* Production queue — saved orders keep their existing data and receive Pending by default. */
.production-fields-card h3 { margin: 0 0 12px; color: var(--studio-text); font-size: 15px; }
.production-sheet { max-width: 1200px; margin: 0 auto; }
.production-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; }
.production-heading-row h2 { margin: 0; color: var(--studio-text); font-size: 25px; }
.production-heading-row p { margin: 5px 0 0; color: var(--studio-muted); font-weight: 700; }
.production-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #d7e1ef; border-radius: 12px; background: #f4f8ff; color: #173061; }
.production-summary strong { color: #1b6f3c; }
.production-queue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.production-list-card { overflow: hidden; border: 1px solid #d7e1ef; border-radius: 12px; background: #fff; }
.production-list-card h3 { margin: 0; padding: 14px 16px; border-bottom: 1px solid #dfe6ef; color: var(--studio-text); font-size: 16px; }
.production-order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #edf1f5; }
.production-order-row:last-child { border-bottom: 0; }
.production-order-row strong { margin-right: 9px; color: var(--studio-text); }
.production-order-row span { color: var(--studio-text); font-weight: 700; }
.production-order-row small { display: block; margin-top: 3px; color: var(--studio-muted); }
.production-order-actions { display: flex; align-items: center; gap: 9px; }
.production-order-actions button { padding: 7px 10px; border: 1px solid #cdd9e8; border-radius: 8px; background: #fff; color: var(--studio-accent); font-weight: 800; }
.production-status-pill { display: inline-block; padding: 5px 8px; border-radius: 999px; background: #fff2dd; color: #a85e00 !important; font-size: 11px; white-space: nowrap; }
.production-status-scheduled-for-today, .production-status-in-production { background: #e9f6ee; color: #19733b !important; }
.production-status-completed { background: #e8f0ff; color: #2659d9 !important; }
.production-empty { margin: 0; padding: 24px 16px; color: var(--studio-muted); text-align: center; }
@media (max-width: 760px) { .production-queue-grid { grid-template-columns: 1fr; } .production-heading-row, .production-summary { align-items: flex-start; flex-direction: column; } .production-order-row { align-items: flex-start; flex-direction: column; } }

/* Final override: opening Search adds a customer drawer beside the workspace.
   Keep the third-row toolbar in normal flow so it never covers the form. */
main.customers-open .tabs {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
main.customers-open .workspace {
  overflow: visible !important;
}

/* V303 final override: Search stays in a right-side drawer at every screen size. */
main.customers-open {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
}
main.customers-open .workspace { grid-area: auto !important; }
main.customers-open .sidebar,
.sidebar {
  position: fixed !important;
  inset: 84px 16px 16px auto !important;
  z-index: 320 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(380px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 100px) !important;
  overflow: hidden !important;
  background: #fff !important;
}
.sidebar .orders-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 4px;
}
#trashPanel:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.sidebar .order-card { padding: 11px 12px; }
.sidebar .order-card + .order-card { margin-top: 9px; }
.sidebar .order-card strong { font-size: 14px; }
.sidebar .order-card small { font-size: 12px; }
.sidebar .mini-actions { gap: 5px; }
.sidebar .mini-actions button { padding: 6px 8px; font-size: 11px; }
.sidebar .order-list-limit { display: grid; gap: 8px; text-align: center; }
.sidebar .order-list-empty { padding: 18px 10px; color: #687386; text-align: center; }
.sidebar .order-list-limit button,
.home-load-more-row button { padding: 8px 12px; border: 1px solid #9ab3d1; border-radius: 7px; background: #fff; color: #163e6f; font: inherit; font-weight: 700; cursor: pointer; }
.sidebar .order-list-limit button:hover,
.home-load-more-row button:hover { background: #eff5ff; }
.home-load-more-row td { padding: 18px !important; text-align: center; background: #f8fafc; }

/* V304: keep financial values readable and allow GST editing in Customer rows. */
@media screen {
  .home-orders-table { min-width: 1900px; }
  .home-orders-table col.home-col-money { width: 9%; }
  .home-orders-table col.home-col-paid,
  .home-orders-table col.home-col-balance { width: 10%; }
  .home-orders-table th:nth-child(n+10):nth-child(-n+14),
  .home-orders-table td:nth-child(n+10):nth-child(-n+14) {
    min-width: 130px;
    overflow: visible;
    text-overflow: clip;
  }
  .home-gst-editor {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 112px;
    padding: 4px 7px;
    border: 1px solid #9aa8ba;
    border-radius: 7px;
    background: #fff;
    color: #101323;
    font-weight: 700;
  }
  .home-gst-editor:focus-within {
    border-color: #174eb9;
    box-shadow: 0 0 0 2px rgba(23, 78, 185, .18);
  }
  .home-gst-editor input {
    width: 84px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: right;
  }
}

/* V321: fit the complete Customer table on large desktop monitors. */
@media screen and (min-width: 1600px) {
  .home-sheet { padding-right: 22px; padding-left: 22px; }
  .home-orders-table { width: 100%; min-width: 0; table-layout: fixed; }
  .home-orders-table th,
  .home-orders-table td { min-width: 0 !important; padding: 11px 4px; font-size: 15px; }
  .home-orders-table col.home-col-sno { width: 3%; }
  .home-orders-table col.home-col-date { width: 7%; }
  .home-orders-table col.home-col-order { width: 7%; }
  .home-orders-table col.home-col-view { width: 5%; }
  .home-orders-table col.home-col-name { width: 11%; }
  .home-orders-table col.home-col-address { width: 13%; }
  .home-orders-table col.home-col-phone { width: 9%; }
  .home-orders-table col.home-col-blinds { width: 5%; }
  .home-orders-table col.home-col-motor { width: 7%; }
  .home-orders-table col.home-col-money { width: 7%; }
  .home-orders-table col.home-col-paid { width: 7%; }
  .home-orders-table col.home-col-balance { width: 8%; }
  .home-orders-table col.home-col-action { width: 10%; }
  .home-gst-editor { width: 100%; min-width: 0; padding: 4px; }
  .home-gst-editor input { width: calc(100% - 14px); }
  .home-action-cell button { max-width: 100%; padding: 7px 5px; font-size: 10px; white-space: normal; }
}

/* V322: the order summary belongs only to New Order / Current Order screens. */
#currentOrderBanner[hidden] { display: none !important; }

/* V323: an empty save/export message area must not reserve a blank row. */
.feedback-container:not(:has(.toast-message:not([hidden]))):not(:has(.last-saved-timestamp:not(:empty))) {
  display: none;
}
.last-saved-timestamp:empty { display: none; }

/* V324: keep the complete order-navigation stack visible while scrolling. */
@media screen and (min-width: 761px) {
  .front-shell,
  .app-content,
  main,
  .workspace { overflow-y: visible !important; }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
  }
  #currentOrderBanner:not([hidden]) {
    position: sticky !important;
    top: 72px !important;
    z-index: 490 !important;
  }
  .tabs:not(.report-hidden) {
    position: sticky !important;
    top: 134px !important;
    z-index: 480 !important;
  }
}

/* V326: disconnected cloud access must be immediately visible. */
#supabaseLoginBtn:not([hidden]) {
  border-color: #ff9a9a !important;
  background: #b42318 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08) !important;
}
#supabaseLoginBtn:not([hidden]):hover,
#supabaseLoginBtn:not([hidden]):focus-visible {
  border-color: #ffc4c4 !important;
  background: #8f1c13 !important;
  color: #fff !important;
}

/* V424: keep security and cloud-login primary buttons readable on hover.
   The general studio button hover rule must not turn these buttons white. */
#unlockAppBtn,
#unlockAppBtn:hover,
#unlockAppBtn:focus,
#unlockAppBtn:focus-visible,
#unlockAppBtn:active,
#cloudLoginForm .cloud-login-actions button.primary,
#cloudLoginForm .cloud-login-actions button.primary:hover,
#cloudLoginForm .cloud-login-actions button.primary:focus,
#cloudLoginForm .cloud-login-actions button.primary:focus-visible,
#cloudLoginForm .cloud-login-actions button.primary:active {
  border-color: #0b2a4a !important;
  background: #0b2a4a !important;
  color: #fff !important;
  opacity: 1 !important;
}
#unlockAppBtn:hover,
#unlockAppBtn:focus-visible,
#cloudLoginForm .cloud-login-actions button.primary:hover,
#cloudLoginForm .cloud-login-actions button.primary:focus-visible {
  border-color: #245b91 !important;
  background: #173f68 !important;
}

/* V427: LOC may contain Operation and Chain Size on two compact lines. Keep
   both values inside the same printed row at Windows and macOS print scales. */
@media print {
  #orderTab .print-table td.order-loc-cell {
    padding: .45mm .25mm !important;
    overflow: hidden !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #orderTab .print-table .order-loc-line {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 8pt !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #orderTab .print-table .order-loc-line.order-loc-long { font-size: 6.8pt !important; }
}

/* V327: require an order-level Excel export before starting another order. */
.excel-required-card { width: min(650px, 94vw); }
.excel-required-actions { display: grid; gap: 10px; margin-top: 18px; }
.excel-required-actions button { min-height: 46px; padding: 10px 14px; }
.excel-required-card small { display: block; margin-top: 12px; color: #687386; }

/* V325: use a fixed header stack because sticky positioning is unreliable in
   the long order forms. The matching top padding prevents form overlap. */
@media screen and (min-width: 761px) {
  .app-content.order-workflow-active {
    padding-top: calc(var(--order-topbar-height, 72px) + var(--order-banner-height, 62px) + var(--order-tabs-height, 54px));
  }
  .order-workflow-active .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    z-index: 700 !important;
  }
  .order-workflow-active #currentOrderBanner:not([hidden]) {
    position: fixed !important;
    inset: var(--order-topbar-height, 72px) 0 auto 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 690 !important;
  }
  .order-workflow-active .tabs:not(.report-hidden) {
    position: fixed !important;
    inset: calc(var(--order-topbar-height, 72px) + var(--order-banner-height, 62px)) 0 auto 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
    z-index: 680 !important;
  }
}

.order-lock-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 24px;
  background: #fdecec;
  border-bottom: 1px solid #e0a3a3;
  color: #501313;
  font-size: 14px;
  font-weight: 600;
}
.order-lock-banner.is-unlocked {
  background: #eaf3de;
  border-bottom-color: #a9c98a;
  color: #173404;
}
#modifyOrderBtn {
  background: #082f55;
  color: #fff;
  border: 0;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.order-lock-banner.is-unlocked #modifyOrderBtn {
  background: #df071d;
}
.locked-for-edit input:not(.tag-print-check):not([data-lock-exempt]),
.locked-for-edit select:not([data-lock-exempt]),
.locked-for-edit textarea {
  pointer-events: none;
  opacity: .6;
  background: #f1efe8 !important;
}
.locked-for-edit button:not([data-lock-exempt]) {
  pointer-events: none;
  opacity: .5;
}
.locked-for-edit [data-lock-exempt] {
  pointer-events: auto;
  opacity: 1;
}

.cloud-disconnected-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 24px;
  background: #faeeda;
  border-bottom: 1px solid #ef9f27;
  color: #633806;
  font-size: 14px;
  font-weight: 600;
}
#cloudBannerLoginBtn {
  background: #082f55;
  color: #fff;
  border: 0;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cloud-last-sync {
  font-size: 12px;
  color: #fff;
  margin-left: 6px;
}

.cloud-last-sync.cloud-sync-failed {
  color: #b42318;
  font-weight: 700;
}

.cloud-sync-retry {
  border: 1px solid #ef3e2f;
  border-radius: 999px;
  background: transparent;
  color: #ff6b5f;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.cloud-sync-retry:hover { background: rgba(239, 62, 47, 0.14); }

/* Pickup uses the unused space beside Order No. without changing the shipping column. */
#customerTab .info-grid > .order-number-field {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid var(--studio-border, #dbe2eb);
  border-radius: 10px;
  background: var(--studio-surface, #fff);
}
#customerTab .order-number-entry {
  display: grid;
  grid-template-columns: minmax(94px, 145px) minmax(70px, 1fr);
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}
#customerTab .order-number-entry > span { padding-left: 12px; }
#customerTab .order-number-entry > input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: var(--studio-surface-2, #f6f7f9);
  color: var(--studio-text, #111827);
  font-size: 17px;
  font-weight: 700;
}
#customerTab .order-number-entry > input[readonly] { cursor: not-allowed; }
#customerTab .pickup-order-option {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 14px;
  white-space: nowrap;
  color: #435b78;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#customerTab .pickup-order-option > input[type="checkbox"] {
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  accent-color: #255dec;
}
@media (max-width: 760px) {
  #customerTab .order-number-entry { grid-template-columns: minmax(78px, 115px) minmax(55px, 1fr); }
  #customerTab .pickup-order-option { padding: 0 8px; font-size: 12px; }
}
.cloud-sync-retry:disabled { cursor: wait; opacity: 0.65; }
/* Quick Print reuses the order calculator but never becomes a saved order. */
.quick-field-label, .quick-print-stamp { display: none; }
.quick-print-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid #9bb8fb;
  border-radius: 16px;
  background: #eaf1ff;
  color: #102b55;
}
.quick-print-toolbar[hidden] { display: none !important; }
.quick-print-toolbar > div:first-child { display: grid; gap: 3px; }
.quick-print-toolbar strong { font-size: 20px; }
.quick-print-toolbar span { font-size: 13px; }
.quick-print-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-print-toolbar-actions button { min-height: 42px; padding: 9px 14px; border-radius: 10px; }
body.quick-print-mode #saveOrderBtn,
body.quick-print-mode #exportExcelBtn,
body.quick-print-mode #exportInvoicePdfBtn,
body.quick-print-mode .tabs .tab:not([data-tab="customer"]):not([data-tab="order"]):not([data-tab="tags"]) { display: none !important; }
body.quick-print-mode #customerTab .customer-production-card,
body.quick-print-mode #customerTab .customer-notes-card,
body.quick-print-mode #customerTab .info-grid > :not(.quick-print-field):not(.customer-pricing-row),
body.quick-print-mode #customerTab .customer-pricing-row > label:not(.quick-print-amount),
body.quick-print-mode #customerTab .customer-payment-row { display: none !important; }
body.quick-print-mode #customerTab .customer-pricing-row { grid-template-columns: 1fr; }
body.quick-print-mode #customerTab .quick-print-amount { border-right: 2px solid var(--line); }
body.quick-print-mode #customerTab .normal-field-label { display: none; }
body.quick-print-mode #customerTab .quick-field-label { display: inline; }
body.quick-print-mode .quick-print-stamp { display: inline; font-size: .72em; letter-spacing: 0; }
@media (max-width: 800px) {
  .quick-print-toolbar { align-items: stretch; flex-direction: column; }
  .quick-print-toolbar-actions button { flex: 1 1 auto; }
}
/* Admin-only Google Drive backup controls in Data Safety. */
.google-backup-panel{margin-top:18px;padding:18px;border:1px solid #cfd8e8;border-radius:14px;background:#f8faff;display:grid;gap:10px}
.google-backup-panel[hidden]{display:none}
.google-backup-panel h3,.google-backup-panel p{margin:0}
.google-backup-panel>p{font-weight:650;color:#33415f}
.google-backup-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Final customer-search drawer positioning: keep the complete panel above the
   sticky header stack and let the drawer scroll independently on narrower screens. */
main.customers-open .sidebar.customer-search-open {
  position: fixed;
  right: 18px;
  left: auto;
  z-index: 220;
  width: 340px;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, .99);
}
@media (max-width: 1160px) {
  main.customers-open .sidebar.customer-search-open {
    position: fixed;
    inset: 12px 12px 12px auto;
    z-index: 220;
    width: min(380px, calc(100vw - 24px));
    height: auto;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, .99);
  }
}

/* Customer drawer release 7: keep Customers below Home's 500 navigation.
   Current Order raises it above the 690/680 secondary rows while the 700
   primary navigation remains on top. JavaScript supplies the exact bottom
   edge of the primary navigation after every view change. */
main.customers-open .sidebar.customer-search-open {
  /* Detach the fixed drawer from the former Customers grid area. Grid's
     start alignment otherwise makes it grow to its full record height. */
  grid-area: auto !important;
  align-self: auto !important;
  min-height: 0 !important;
  position: fixed !important;
  inset: var(--customer-search-top, 72px) 12px 12px auto !important;
  z-index: 495 !important;
  width: min(380px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  transform: translateX(0) !important;
  background: rgba(255, 255, 255, .99) !important;
}
.order-workflow-active main.customers-open .sidebar.customer-search-open {
  z-index: 695 !important;
}

/* Backup window must sit above the complete fixed Current Order header stack.
   The header reaches z-index 700 on desktop, so the modal needs its own
   higher layer rather than appearing underneath the navigation rows. */
.backup-status-modal {
  z-index: 1500 !important;
}

/* Open drafts remain clearly separate from saved orders. */
.draft-order-banner { margin: 10px 20px; padding: 14px 18px; border: 1px solid #d6a943; border-radius: 12px; background: #fff8e7; color: #493609; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.draft-order-banner[hidden] { display: none; }
.draft-order-actions, .draft-navigation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.draft-navigation-details { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .draft-order-banner { margin: 8px; padding: 12px; }
  .draft-order-actions { width: 100%; }
  .draft-order-actions button, .draft-navigation-actions button { flex: 1 1 140px; white-space: normal; }
}

/* Counted Draft Orders and Trash controls stay below Saved Orders. */
.sidebar > .sidebar-section-toggle {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  margin: 6px 0 0;
  min-height: 40px;
  padding: 9px 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #172033;
  font-weight: 700;
}
.sidebar > .sidebar-section-toggle::after { content: "▾"; position: absolute; right: 14px; }
.sidebar > .sidebar-section-toggle[aria-expanded="true"]::after { content: "▴"; }
.sidebar > .sidebar-section-toggle:focus-visible { outline: 3px solid #8fb8ff; outline-offset: 2px; }
.sidebar #toggleDraftsBtn { border-color: #efb866; background: #fffaf2; }
.sidebar > .sidebar-bottom-panel[hidden] { display: none !important; }
.sidebar > .sidebar-bottom-panel:not([hidden]) {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(26dvh, 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 6px 0 0;
  padding: 10px;
  border-radius: 8px;
}
.sidebar .sidebar-bottom-panel .orders-list { flex: none !important; overflow: visible !important; }

/* Match the full-width Current Order header in Home and every other view. */
@media screen {
  .topbar {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Setup-only restore stays reviewable in short and phone-sized windows. */
.restore-choice-card { width: min(560px, calc(100vw - 44px)); min-width: 0; max-width: 100%; max-height: calc(100dvh - 44px); overflow-y: auto; box-sizing: border-box; }
.restore-setup-section { margin: 14px 0; padding: 14px; border: 1px solid #86bfa0; border-radius: 10px; background: #f0faf4; }
.restore-setup-section[hidden] { display: none; }
.restore-setup-section h3 { margin: 0 0 8px; color: #14532d; }
#restoreSetupSummary, #restoreSetupItems { white-space: pre-line; overflow-wrap: anywhere; }
#restoreSetupItems { max-height: 180px; overflow-y: auto; padding: 10px 0; }
#restoreSetupOnlyBtn { width: 100%; margin-top: 12px; white-space: normal; }

#restoreChoiceMessage { white-space: pre-line; overflow-wrap: anywhere; }

/* Row-specific headrail choices use the space saved from Operation/Chain. */
#measurementsTable .measurement-headrail-column { width: 180px; }
#measurementsTable .measurement-operation-column, #measurementsTable .measurement-chain-column { width: 110px; }
#measurementsTable select[data-field="headrail"], #measurementsTable select[data-field="operation"], #measurementsTable select[data-field="cutting"] { font-size: 12px; }
@media screen { #measurementsTable { min-width: 1000px; } }
.headrail-group-deductions { display: block; margin-top: 3px; font-size: .8em; font-weight: normal; white-space: normal; }
.tag.mixed-headrail-tag .tag-left-stack { grid-template-rows: repeat(5, auto); }
.tag.mixed-headrail-tag .tag-headrail-line { display: block; font-size: 8pt; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; }

button.builder-summary-card { text-align: left; font: inherit; cursor: pointer; width: 100%; }
button.builder-summary-card:hover { filter: brightness(.97); }
.builder-name-link { border: 0; background: transparent; padding: 0; color: #2358d5; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; text-align: left; }
.builder-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 16px 0; }

.head-tube-choice { background: transparent; color: inherit; font: inherit; padding: 2px 6px; text-decoration: underline; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; }
.head-tube-menu { position: absolute; z-index: 20; padding: 8px; background: white; color: #132b46; border: 1px solid #b8cbe2; box-shadow: 0 4px 14px #0003; }
.head-tube-menu button { display: block; margin: 4px; }
.head-tube-print-value { display: none; }
.slim-clutch-label { display: block; text-align: left; padding: 6px 12px; font-weight: bold; }
@media print { .head-tube-print-value { display: inline; } }

#orderTable .head-tube-choice, #orderTable .head-tube-choice:hover, #orderTable .head-tube-choice:focus-visible { background: transparent !important; color: #fff !important; border: 1px solid #c9d7eb !important; box-shadow: none !important; opacity: 1; transition: transform .12s ease; }
#orderTable .head-tube-choice:hover, #orderTable .head-tube-choice:focus-visible { transform: scale(1.10); }
#orderTable .head-tube-menu { position: fixed; z-index: 10050; }
#orderTable .head-tube-menu button, #orderTable .head-tube-menu button:hover { background: #fff !important; color: #132b46 !important; opacity: 1; }
#orderTable .head-tube-menu button:hover { transform: scale(1.04); }

.statement-sort-button, .statement-sort-button:hover, .statement-sort-button:focus-visible { background: transparent !important; color: #174eb9 !important; border: 0; padding: 0; font: inherit; font-weight: 800; cursor: pointer; box-shadow: none !important; }
.statement-sort-button:hover { text-decoration: underline; }
.statement-sort-arrow { white-space: nowrap; }

/* Curtain workspace: use the available desktop width without changing print sizing. */
@media screen {
  #curtainTab .curtain-sheet {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  #curtainTab .curtain-table {
    width: 100%;
  }
}

/* Per-track curtain colours: editor and production instructions. */
#curtainTab .curtain-colour-row > td { text-align: left; padding: 9px 12px; background: #f4f7fb; }
#curtainTab .curtain-colour-editor summary { cursor: pointer; font-weight: 700; padding: 5px 0; }
#curtainTab .curtain-colour-editor label { display: block; font-size: 12px; }
#curtainTab .curtain-colour-editor > label { max-width: 240px; margin: 10px 0; }
#curtainTab .curtain-colour-section { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(80px, .6fr) minmax(100px, .7fr) auto; gap: 12px; align-items: end; margin: 10px 0; }
#curtainTab .curtain-colour-editor button { padding: 8px 12px; border: 1px solid #a7b9d1; border-radius: 6px; background: #fff; color: #174eb9; }
#curtainTab .curtain-colour-help { margin-left: 12px; font-size: 12px; color: #465269; }
#curtainTab .curtain-colour-print { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; padding: 8px 0; font-size: 12px; }
@media print {
  #curtainTab .curtain-colour-row:not(.has-colour-print) { display: none !important; }
  #curtainTab .curtain-colour-row > td { text-align: left !important; font-size: 9pt !important; padding: 2mm !important; }
  #curtainTab .curtain-colour-print { font-size: 9pt !important; color: #111 !important; }
}

#curtainTab .curtain-colour-error { margin: 10px 0; color: #b42318; font-size: 13px; font-weight: 700; }
#curtainTab .curtain-colour-invalid { border: 2px solid #b42318 !important; background: #fff3f1 !important; }

/* Saved curtain-order directory; does not change the order-entry or print tables. */
#curtainOrdersTab .curtain-orders-sheet { max-width: none; }
#curtainOrdersTab .curtain-orders-search-label { display: block; margin: 16px 0 6px; font-weight: 700; }
#curtainOrdersTab .curtain-orders-search { display: flex; flex-wrap: wrap; gap: 10px; }
#curtainOrdersTab .curtain-orders-search input { flex: 1 1 260px; min-width: 0; padding: 12px; border: 1px solid #b9c9dc; border-radius: 7px; font: inherit; }
#curtainOrdersTab .curtain-orders-search button { padding: 10px 16px; border: 1px solid #b9c9dc; border-radius: 7px; background: #fff; color: #174eb9; font: inherit; }
#curtainOrdersCount { margin: 16px 0 4px; font-weight: 700; }
#curtainOrdersTab .curtain-orders-note { margin: 0 0 16px; color: #465269; font-size: 13px; }
#curtainOrdersTab .curtain-orders-table-wrap { overflow-x: auto; }
#curtainOrdersTab .curtain-orders-table { min-width: 900px; width: 100%; }
#curtainOrdersTab .curtain-orders-table td { padding: 12px 9px; overflow-wrap: anywhere; }
#curtainOrdersTab .curtain-orders-table th { padding: 12px 9px; }
#curtainOrdersTab .curtain-orders-table td:nth-child(n+5) { text-align: right; font-variant-numeric: tabular-nums; }

/* Compact Customer / Balance Payment summaries, independent of displayed row limit. */
.home-builder-summary.home-compact-summary { font-size: 13px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }

/* Fabric-label printing is an isolated, read-only utility. */
#fabricLabelsTab .fabric-labels-sheet { max-width: none; }
#fabricLabelsTab .fabric-label-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin: 16px 0; }
#fabricLabelsTab .fabric-label-toolbar label { flex: 1 1 280px; font-weight: 700; }
#fabricLabelsTab .fabric-label-toolbar input { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid #b8c8db; border-radius: 7px; font: inherit; }
#fabricLabelsTab button { padding: 9px 12px; border: 1px solid #a8bdd5; border-radius: 7px; background: #fff; color: #174eb9; font: inherit; cursor: pointer; }
#fabricLabelsTab #printFabricLabelsBtn { background: #174eb9; color: #fff; }
#fabricLabelsTab .fabric-label-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
#fabricLabelsTab .fabric-label-list { width: 100%; table-layout: auto; }
#fabricLabelsTab .fabric-label-list td, #fabricLabelsTab .fabric-label-list th { padding: 9px; overflow-wrap: anywhere; }
#fabricLabelsTab .fabric-label-list input[type="number"] { width: 80px; padding: 8px; border: 1px solid #b8c8db; border-radius: 6px; font: inherit; }
#fabricLabelsTab .fabric-label-list input[type="checkbox"] { width: 18px; height: 18px; }
#fabricLabelsTab .fabric-label-preview-button { border: 0; padding: 4px; background: transparent; text-align: left; overflow-wrap: anywhere; }
#fabricLabelsTab .fabric-label-preview-area { min-width: 0; }
#fabricLabelsTab .fabric-label-preview-area h3 { margin: 0 0 18px; font-size: 16px; }
#fabricLabelsTab .fabric-label-preview-area p { font-size: 13px; color: #465269; }
#fabricLabelPreview .fabric-print-label { width: 100mm; max-width: 100%; aspect-ratio: 100 / 24; padding: 2mm 3mm; display: flex; align-items: center; justify-content: center; text-align: center; outline: 1px solid #a1aebb; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; overflow: hidden; box-sizing: border-box; }
#fabricLabelPreview .fabric-label-stack { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; }
#fabricLabelPreview .fabric-label-code { max-width: 100%; font-size: 24pt; font-weight: 700; line-height: 1.05; white-space: nowrap; }
#fabricLabelPreview .fabric-label-hb { font-size: 28pt; }
#fabricLabelPreview .fabric-label-description { max-width: 100%; font-size: 16pt; font-weight: 600; line-height: 1.1; white-space: nowrap; }
#fabricLabelError { color: #b42318; font-weight: 700; }
@media screen and (max-width: 1000px) { #fabricLabelsTab .fabric-label-layout { grid-template-columns: minmax(0, 1fr); } }

/* Compact fabric selection cards, using the existing Fabric Usage palette. */
#fabricLabelsTab .fabric-labels-sheet { max-width: 1220px; }
#fabricLabelsTab .fabric-label-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
#fabricLabelsTab .fabric-label-bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
#fabricLabelsTab .fabric-label-bulk-actions span { font-size: 12px; color: #465269; }
#fabricLabelsTab .fabric-label-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
#fabricLabelsTab .fabric-label-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--hr-border); border-radius: 10px; background: var(--hr-bg); color: #132b46; }
#fabricLabelsTab .fabric-label-card.is-selected { box-shadow: inset 0 0 0 2px #174eb9; }
#fabricLabelsTab .fabric-label-card-heading { display: flex; gap: 7px; align-items: start; }
#fabricLabelsTab .fabric-label-card-heading input[type="checkbox"] { flex: 0 0 17px; width: 17px; height: 17px; margin: 3px 0 0; }
#fabricLabelsTab .fabric-label-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--hr-accent); }
#fabricLabelsTab .fabric-label-card .fabric-label-preview-button { min-width: 0; padding: 0; border: 0; color: #132b46; background: transparent; font-size: 13px; line-height: 1.35; font-weight: 700; text-align: left; }
#fabricLabelsTab .fabric-label-card-quantity { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; }
#fabricLabelsTab .fabric-label-card-quantity input { width: 62px; min-width: 0; padding: 5px 7px; border: 1px solid #b8c8db; border-radius: 6px; background: #fff; font: inherit; font-size: 13px; }
#fabricLabelsTab button:disabled { cursor: default; opacity: .5; }
#fabricLabelsTab .fabric-label-preview-area h3 { font-size: 13px; }
@media screen and (max-width: 1000px) { #fabricLabelsTab .fabric-label-layout { grid-template-columns: minmax(0, 1fr); } #fabricLabelsTab .fabric-label-preview-area { max-width: 280px; } }
@media screen and (max-width: 480px) { #fabricLabelsTab .fabric-label-cards { grid-template-columns: minmax(0, 1fr); } }

/* First measured headrail labels the initial cutting group on screen and paper. */
#orderTab #orderTable thead .order-first-headrail { display: block; color: #111; text-align: center; text-transform: none; letter-spacing: normal; font-size: 18px; line-height: 1.15; font-weight: 800; }

/* Row-level clutch choice sits beside Headrail without widening other controls. */
#measurementsTable .measurement-clutch-column { width: 110px; }
#measurementsTable select[data-field="headTubeWidthDeduction"] { font-size: 12px; }
@media screen { #measurementsTable { min-width: 1100px; } }

/* Curtain colour buttons and per-track measurement origin. */
#curtainTab .curtain-colour-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
#curtainTab .curtain-colour-buttons button { flex: 1 1 170px; text-align: left; }
#curtainTab .curtain-colour-buttons button span { display: block; font-size: 12px; margin-top: 5px; }
#curtainTab .curtain-colour-buttons button[aria-expanded="true"] { border: 2px solid #2563eb; background: #edf4ff; }
#curtainTab .curtain-colour-section { grid-template-columns: minmax(180px, 2fr) minmax(130px, 1fr) repeat(2, minmax(80px, .6fr)) auto; }
#curtainTab .curtain-colour-section[hidden] { display: none !important; }
@media screen {
 #curtainTab .curtain-table { min-width: 1200px; }
 #curtainTab .curtain-table th:nth-child(2), #curtainTab .curtain-table td:nth-child(2) { width: 100px; }
 #curtainTab .curtain-table th:nth-child(3), #curtainTab .curtain-table td:nth-child(3) { width: 105px; }
 #curtainTab .curtain-table th:nth-child(4), #curtainTab .curtain-table td:nth-child(4) { width: 180px; }
}
@media (max-width: 700px) { #curtainTab .curtain-colour-section { grid-template-columns: 1fr 1fr; } }
@media print {
 /* Measured From column print widths */
 #curtainTab .curtain-table th:nth-child(1), #curtainTab .curtain-table td:nth-child(1) { width: 3% !important; }
 #curtainTab .curtain-table th:nth-child(2), #curtainTab .curtain-table td:nth-child(2) { width: 7% !important; }
 #curtainTab .curtain-table th:nth-child(3), #curtainTab .curtain-table td:nth-child(3) { width: 9% !important; }
 #curtainTab .curtain-table th:nth-child(4), #curtainTab .curtain-table td:nth-child(4) { width: 14% !important; }
 #curtainTab .curtain-table th:nth-child(n+5), #curtainTab .curtain-table td:nth-child(n+5) { width: 7.44% !important; }
 #curtainTab .curtain-table td:nth-child(2), #curtainTab .curtain-table td:nth-child(3), #curtainTab .curtain-table td:nth-child(4), #curtainTab .curtain-table td:nth-child(7) { font-size: 7pt !important; }
}

/* Keep untouched curtain rows quiet; reveal choices when entering that row. */
@media screen {
 #curtainTab tr.curtain-row-unused:not(:focus-within) select[data-colour-origin],
 #curtainTab tr.curtain-row-unused:not(:focus-within) select[data-curtain-field="type"] {
   opacity: 0;
 }
}

#curtainTab .curtain-colour-move { display: flex; flex-wrap: wrap; gap: 6px; }
#curtainTab .curtain-colour-move button:disabled { opacity: .45; cursor: default; }

.excel-last-download { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: inherit; }
#exportExcelBtn { white-space: normal; }