:root {
  --ink: #292520;
  --muted: #756d63;
  --paper: #f6f1e8;
  --cream: #fcfaf5;
  --white: #fff;
  --line: #e6dccd;
  --gold: #a88449;
  --gold-soft: #eee1c9;
  --wine: #6f2638;
  --wine-dark: #3c2228;
  --green: #356b4d;
  --amber: #a56b21;
  --red: #a5433c;
  --shadow: 0 14px 36px rgba(69, 53, 34, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, #f7f2e9 0, #fbf8f2 360px, #f6f1e8 100%);
  color: var(--ink);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:not(.authenticated) header,
body:not(.authenticated) main { display: none; }
button, input, select, textarea { font: inherit; }
button, .btn, select { touch-action: manipulation; }

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px max(24px, calc((100% - 1240px) / 2));
  color: #fff;
  background: rgba(48, 31, 34, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px);
}
.brand {
  font: 600 23px/1.1 Georgia, "Times New Roman", serif;
  letter-spacing: .12em;
}
.brand small {
  display: block;
  margin-top: 4px;
  color: #d9c5b1;
  font: 10px/1.2 Inter, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.header-actions { display: flex; align-items: center; gap: 9px; }
.header-actions .btn { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .22); text-decoration: none; }
.header-actions .btn.primary { background: #a4834c; border-color: #a4834c; }
.user-chip { max-width: 190px; color: #e9ddd1; font-size: 12px; }
.notice-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  padding: 0 5px;
  place-items: center;
  border-radius: 10px;
  color: #3c2228;
  background: #ead3a8;
  font-size: 10px;
}

main { max-width: 1240px; margin: 0 auto; padding: 42px 24px 64px; }
.toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 25px;
}
.toolbar h1 {
  margin: 4px 0 2px;
  font: 500 clamp(32px, 4vw, 48px)/1.08 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}
.toolbar p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 750; letter-spacing: .16em; }

.btn {
  display: inline-flex;
  min-height: 44px;
  padding: 10px 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.btn:hover { filter: brightness(.98); transform: translateY(-1px); }
.btn:disabled { cursor: wait; opacity: .65; transform: none; }
.btn.primary { color: #fff; background: var(--wine); border-color: var(--wine); box-shadow: 0 8px 18px rgba(111, 38, 56, .16); }
.whatsapp-button { color: #225f40; border-color: #bcd7c6; background: #edf7f0; }
.text-button { min-height: 40px; border: 0; color: var(--wine); background: none; font-weight: 700; cursor: pointer; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 14px;
}
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d9cdbd;
  border-radius: 9px;
  outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 132, 73, .12); }
input:disabled, select:disabled, textarea:disabled, input[readonly] { color: #81786e; background: #f0ece5; cursor: not-allowed; }
textarea { min-height: 86px; resize: vertical; }
.filters input, .filters select { width: auto; min-width: 185px; }
.filters input { flex: 1; min-width: 240px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 26px;
}

.global-search-trigger {
  display: flex;
  width: min(360px, 32vw);
  min-height: 44px;
  padding: 8px 10px 8px 16px;
  align-items: center;
  justify-content: space-between;
  color: #e9ddd1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  cursor: pointer;
}
.global-search-trigger kbd { padding: 4px 7px; color: #d9c5b1; background: rgba(255,255,255,.08); border-radius: 6px; font: 10px Inter, sans-serif; }
.quick-actions { display: flex; gap: 9px; margin: -8px 0 18px; overflow-x: auto; padding: 4px 1px; }
.quick-actions button { min-width: max-content; min-height: 44px; padding: 9px 15px; color: var(--wine); background: #fffdf9; border: 1px solid var(--line); border-radius: 99px; font-weight: 700; cursor: pointer; }
.weekly-panel, .activity-panel { margin-bottom: 24px; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 14px; gap: 8px; overflow-x: auto; }
.week-day { min-width: 118px; min-height: 135px; padding: 14px; text-align: left; color: var(--ink); background: #fbf7f0; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.week-day:hover { border-color: var(--gold); transform: translateY(-2px); }
.week-day span, .week-day small { display: block; }
.week-day span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.week-day strong { display: block; margin: 4px 0 10px; font: 500 28px Georgia, serif; }
.week-day small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.workload-card { width: 100%; text-align: left; border: 1px solid var(--line); cursor: pointer; }
.workload-card strong { font-size: 18px; }
.workload-card em { display: inline-block; margin-top: 9px; padding: 4px 8px; border-radius: 99px; font-size: 10px; font-style: normal; font-weight: 750; }
.workload-available { color: var(--green); background: #e9f3ec; }
.workload-balanced { color: #7b632e; background: #f7efd9; }
.workload-busy, .workload-overloaded { color: var(--red); background: #f8e5e1; }
.next-action { margin-top: 5px!important; color: var(--wine)!important; font-weight: 700; }
.queue-button { width: 100%; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; }
.activity-list { padding: 4px 20px 12px; }
.activity-item { display: grid; width: 100%; grid-template-columns: 10px 1fr auto; gap: 12px; padding: 14px 0; align-items: center; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.activity-item i { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.activity-item strong, .activity-item small { display: block; }
.activity-item small, .activity-item time { color: var(--muted); font-size: 10px; }
.media-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.photo-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.gallery-photo { position: relative; padding: 0; overflow: hidden; background: #eee; border: 0; border-radius: 10px; cursor: zoom-in; aspect-ratio: 1; }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery-photo span { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; color: #fff; background: #301f22cc; border-radius: 7px; font-size: 9px; text-transform: capitalize; }
.attachment-list { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.attachment-link { min-height: 42px; padding: 10px 12px; color: var(--wine); background: #fff; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; }
.qr-card { display: flex; margin: 20px 0; padding: 14px; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.qr-card img { width: 96px; height: 96px; }
.qr-card b, .qr-card span { display: block; }
.qr-card span { margin-top: 4px; color: var(--muted); }
.signature-pad { width: 100%; height: 190px; background: #fff; border: 1px solid #d9cdbd; border-radius: 12px; touch-action: none; }
.stat, .panel {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.stat { min-height: 118px; padding: 17px; }
.stat label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.stat strong { display: block; margin: 4px 0; font: 500 29px Georgia, serif; }
.stat span { color: var(--muted); font-size: 11px; }

.panel { overflow: hidden; }
.panel-head {
  display: flex;
  min-height: 70px;
  padding: 18px 21px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 2px 0 0; font: 500 20px Georgia, serif; }
.panel-head > span, .panel-head > div + span { color: var(--muted); font-size: 12px; }

.urgent-panel { margin-bottom: 24px; border-top: 3px solid var(--wine); }
.urgent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.urgent-card {
  position: relative;
  min-height: 134px;
  padding: 17px;
  text-align: left;
  color: var(--ink);
  background: #fcf8f0;
  border: 1px solid #eadcc8;
  border-radius: 12px;
  cursor: pointer;
}
.urgent-card:hover { border-color: var(--gold); }
.urgent-card.is-overdue { background: #fff4f1; border-color: #e7c5bf; }
.urgent-card strong, .urgent-card span, .urgent-card small { display: block; }
.urgent-card strong { margin-top: 12px; font: 500 18px Georgia, serif; }
.urgent-card > span:not(.urgent-date) { margin-top: 3px; color: var(--muted); }
.urgent-card small { margin-top: 12px; color: var(--muted); }
.urgent-date { display: inline-block !important; padding: 4px 8px; color: var(--wine); background: #f4e5df; border-radius: 20px; font-size: 10px; font-weight: 750; text-transform: uppercase; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-bottom: 24px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th { padding: 13px 19px; text-align: left; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
td { padding: 15px 19px; border-bottom: 1px solid #eee6db; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.overdue-row td { background: #fff9f6; }
.client { font-weight: 700; }
.sub { margin-top: 3px; color: var(--muted); font-size: 11px; }
.warn { color: var(--red); font-weight: 700; }
.priority { display: inline-block; padding: 3px 7px; border-radius: 12px; font-size: 10px; font-weight: 750; }
.smart-badge { display: inline-block; padding: 5px 9px; border: 1px solid transparent; border-radius: 99px; font-size: 10px; font-weight: 800; line-height: 1.1; }
.alert-red { color: #8f2f2b; background: #fbe7e3; border-color: #ecc7c0; }
.alert-orange { color: #985418; background: #faeddc; border-color: #ecd2b2; }
.alert-yellow { color: #796018; background: #faf3cf; border-color: #eadf9e; }
.alert-purple { color: #68436f; background: #f1e7f3; border-color: #dbc6df; }
.alert-green { color: #285f42; background: #e7f3eb; border-color: #c6decf; }
.detail-alert { margin-bottom: 8px; }
.p-urgent { color: #963b35; background: #f8e5e1; }
.p-event-date { color: #8a5d20; background: #f8eed9; }
.p-normal { color: #35644a; background: #e9f3ec; }
.progress { height: 4px; margin-top: 8px; overflow: hidden; background: #eee7dd; border-radius: 5px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--wine), var(--gold)); }
.row-action { min-height: 44px; padding: 8px 10px; color: var(--wine); background: transparent; border: 0; font-weight: 750; cursor: pointer; }

.queue { padding: 8px 18px; }
.queue-item { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.queue-item:last-child { border-bottom: 0; }
.queue-dot { width: 8px; height: 8px; margin-top: 7px; flex: none; background: var(--gold); border-radius: 50%; }
.queue-item strong { display: block; font-size: 13px; }
.queue-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }

.process-board { margin-bottom: 24px; }
.process-columns { display: grid; grid-template-columns: repeat(8, minmax(155px, 1fr)); overflow-x: auto; }
.process-column { min-height: 145px; padding: 14px; border-right: 1px solid var(--line); }
.process-column:last-child { border-right: 0; }
.process-column h3 { margin: 0 0 10px; font: 600 13px Georgia, serif; }
.process-column h3 span { float: right; color: var(--muted); font: 11px Inter, sans-serif; }
.process-card { display: block; width: 100%; min-height: 58px; margin-top: 7px; padding: 9px; text-align: left; color: var(--ink); background: #faf6ef; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.process-card b, .process-card span { display: block; }
.process-card b { font-size: 11px; }
.process-card span, .process-empty { margin-top: 3px; color: var(--muted); font-size: 10px; }

.operations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.tailor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
.tailor-grid .stat { box-shadow: none; }
.insights-panel { margin-bottom: 24px; }
.insights-panel .tailor-grid { grid-template-columns: repeat(4, 1fr); }
.reminder-list { padding: 8px 18px; }
.reminder-item {
  display: flex;
  width: 100%;
  min-height: 60px;
  gap: 11px;
  padding: 12px 0;
  align-items: flex-start;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.reminder-item:last-child { border-bottom: 0; }
.reminder-mark { width: 8px; height: 8px; margin-top: 6px; flex: none; background: var(--wine); border-radius: 50%; }
.reminder-item strong, .reminder-item small { display: block; }
.reminder-item small { margin-top: 3px; color: var(--muted); line-height: 1.35; }

dialog {
  width: min(900px, calc(100% - 28px));
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--cream);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(34, 23, 21, .3);
}
dialog::backdrop { background: rgba(40, 29, 27, .62); backdrop-filter: blur(3px); }
.modal-head { position: sticky; top: 0; z-index: 3; display: flex; padding: 19px 24px; align-items: center; justify-content: space-between; gap: 16px; background: rgba(252, 250, 245, .97); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 2px 0 0; font: 500 23px Georgia, serif; }
.close { width: 44px; height: 44px; color: var(--ink); background: transparent; border: 0; border-radius: 50%; font-size: 26px; cursor: pointer; }
.close:hover { background: #eee7dd; }
.form, .details, .edit-card-form { padding: 23px 24px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.full { grid-column: 1 / -1; }
label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.field-help { margin-top: 5px; color: var(--muted); font-size: 11px; }
.section-label { margin: 24px 0 11px; font: 500 17px Georgia, serif; }
.modal-actions { display: flex; margin-top: 22px; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sticky-actions { position: sticky; bottom: -23px; z-index: 2; margin: 24px -24px -23px; padding: 14px 24px; background: rgba(252, 250, 245, .96); border-top: 1px solid var(--line); }
.detail-actions { align-items: center; }
.thermal-controls { margin-top: 20px; padding: 16px; background: #f9f4ec; border: 1px dashed #cdbb9f; border-radius: 13px; }
.thermal-controls > b { display: block; margin-bottom: 10px; font: 500 17px Georgia, serif; }
.thermal-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.thermal-help { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.edit-section { margin-bottom: 20px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.edit-section h3 { margin: 0 0 15px; font: 500 18px Georgia, serif; }
.form-status { display: none; margin-bottom: 15px; padding: 11px 13px; border-radius: 9px; }
.form-status:not(:empty) { display: block; }
.form-status.success { color: #285c3e; background: #e9f4ed; border: 1px solid #c7dfcf; }
.form-status.error { color: #8b312d; background: #fae9e6; border: 1px solid #e8c8c3; }

.card-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.card-summary div { padding: 12px; background: #faf5ed; border: 1px solid var(--line); border-radius: 10px; }
.card-summary b, .detail-grid b, .measurement-meta b, .measurement-summary b { display: block; color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.card-summary span, .detail-grid span, .measurement-meta span { display: block; margin-top: 4px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 23px; }
.detail-grid div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.whatsapp { margin-top: 8px; padding: 12px; color: #2f6245; background: #eaf4ed; border: 1px solid #cce0d2; border-radius: 10px; font-size: 12px; }
.job-card-box { margin: 20px 0; padding: 18px; background: #faf6ef; border: 1px solid var(--line); border-radius: 14px; }
.job-card-box h3 { margin: 0 0 13px; font: 500 19px Georgia, serif; }
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.note-card { padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.note-card h4 { margin: 0 0 9px; font: 600 14px Georgia, serif; }
.note-entry + .note-entry { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.note-entry p { margin: 0; white-space: pre-wrap; }
.note-entry small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.structured-note-field { padding: 12px; background: #faf7f1; border: 1px solid var(--line); border-radius: 10px; }
.structured-note-field > small { display: block; margin-top: 4px; color: var(--muted); }
.structured-note-field details { margin-top: 8px; }
.structured-note-field summary { color: var(--wine); cursor: pointer; font-size: 11px; font-weight: 700; }
.timing-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.timing-summary div { padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.timing-summary b, .timing-summary span { display: block; }
.timing-summary b { color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.timing-summary span { margin-top: 4px; font-weight: 750; }
.stage-time-list > div { position: relative; display: flex; min-height: 52px; gap: 12px; }
.stage-time-list > div:not(:last-child)::after { position: absolute; top: 17px; bottom: 0; left: 5px; content: ""; border-left: 1px solid var(--line); }
.stage-time-list i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; flex: none; background: var(--wine); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--wine); }
.stage-time-list b, .stage-time-list small { display: block; }
.stage-time-list small { margin-top: 2px; color: var(--muted); }
.tailor-view .management-only,
.tailor-view .finance-sensitive,
.tailor-view .report-access,
.qc-view .finance-sensitive,
.qc-view .report-access { display: none !important; }
.tailor-view .operations-grid { grid-template-columns: 1fr; }
.measurement-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.measurement-meta div { padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.measurement-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.measurement-summary div { padding: 10px; background: rgba(255, 255, 255, .65); border-bottom: 1px solid var(--line); border-radius: 6px; }
.measurement-summary span { display: block; margin-top: 3px; font-weight: 650; }
.measurements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.measurements label { margin: 0; }
.measurements input { margin-top: 4px; }
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.type-grid label, .checklist label { display: flex; min-height: 40px; margin: 0; padding: 7px; align-items: center; gap: 7px; color: var(--ink); background: #faf7f1; border: 1px solid var(--line); border-radius: 8px; font-weight: 500; }
.type-grid input, .checklist input { width: auto; min-height: auto; }
.checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tracker { display: grid; grid-template-columns: repeat(8, 1fr); margin: 20px 0 27px; }
.track-step { position: relative; padding: 0 3px; text-align: center; }
.track-step:not(:last-child)::after { position: absolute; z-index: 0; top: 10px; left: 55%; width: 90%; height: 2px; content: ""; background: var(--line); }
.track-step i { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; margin: auto; place-items: center; color: var(--muted); background: #fff; border: 2px solid var(--line); border-radius: 50%; font-size: 10px; font-style: normal; }
.track-step.active i, .track-step.done i { color: #fff; background: var(--wine); border-color: var(--wine); }
.track-step.done::after { background: var(--wine); }
.track-step span { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.update-box { padding-top: 20px; border-top: 1px solid var(--line); }
.timeline { margin: 14px 0; }
.timeline-item { position: relative; padding: 0 0 15px 24px; font-size: 12px; }
.timeline-item::before { position: absolute; top: 5px; left: 6px; width: 9px; height: 9px; content: ""; background: var(--gold); border-radius: 50%; }
.timeline-item:not(:last-child)::after { position: absolute; top: 14px; left: 10px; height: calc(100% - 7px); content: ""; border-left: 1px solid var(--line); }
.timeline-item span { display: block; color: var(--muted); font-size: 11px; }
.photo-list, .photo-preview, .qr-label { margin-top: 8px; }
.photo-list { color: var(--muted); font-size: 11px; }
.photo-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-preview img { width: 74px; height: 74px; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; }
.qr-label { display: inline-block; padding: 9px; border: 1px dashed var(--line); font: 600 14px monospace; letter-spacing: .1em; }

.notification-tools { padding: 13px 24px 0; }
.notifications { padding: 8px 24px 22px; }
.notification { display: block; width: 100%; min-height: 72px; padding: 14px 0; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.notification strong, .notification span, .notification small { display: block; }
.notification span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.notification small { margin-top: 7px; color: var(--gold); }
.notification.is-read { cursor: default; opacity: .8; }
.login { max-width: 420px; }
.login .form { padding: 28px; }
.login-intro { color: var(--muted); }
.empty { grid-column: 1 / -1; padding: 36px 20px; text-align: center; color: var(--muted); }
.empty.compact { padding: 24px 10px; }
.toast { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: 390px; padding: 13px 16px; color: #fff; background: var(--green); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.warning { background: var(--amber); }

.kpi-card { width: 100%; color: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(42, 29, 28, .11); }
.kpi-card:focus-visible { outline: 3px solid rgba(111, 38, 56, .22); outline-offset: 2px; }
.kpi-detail-dialog { width: min(980px, calc(100% - 28px)); max-width: 980px; }
.kpi-detail-tools, .report-filters { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, .45fr); gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.kpi-results { display: grid; gap: 11px; max-height: 62vh; padding: 18px 20px; overflow-y: auto; }
.kpi-result-card { display: grid; grid-template-columns: minmax(210px, 1.2fr) 2fr auto; gap: 16px; padding: 15px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.kpi-result-card h3, .report-card h3 { margin: 8px 0 3px; font: 600 17px Georgia, serif; }
.kpi-result-card p, .report-card p { margin: 0; color: var(--muted); }
.kpi-result-card dl, .report-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.kpi-result-card dl div, .report-card dl div { min-width: 0; }
.kpi-result-card dt, .report-card dt { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.kpi-result-card dd, .report-card dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 12px; }
.kpi-close-actions { position: sticky; bottom: 0; margin: 0; padding: 12px 20px; background: #fff; border-top: 1px solid var(--line); }
.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; margin: 18px 0; }
.report-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)); margin-bottom: 14px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.report-filters input, .report-filters select { width: 100%; min-width: 0; }
.report-meta { margin: 8px 0 13px; color: var(--muted); font-size: 12px; }
.report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-card { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.report-card .btn { width: 100%; margin-top: auto; min-height: 44px; }
.report-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }

@media (max-width: 980px) {
  .header-actions .user-chip { display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .urgent-grid { grid-template-columns: repeat(2, 1fr); }
  .layout, .operations-grid { grid-template-columns: 1fr; }
  .insights-panel .tailor-grid { grid-template-columns: repeat(2, 1fr); }
  .tracker { grid-template-columns: repeat(8, 88px); overflow-x: auto; padding-bottom: 8px; }
  .week-grid { grid-template-columns: repeat(7, 130px); }
  .global-search-trigger { flex: 1; }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  header { position: static; padding: 15px 16px; align-items: flex-start; }
  .global-search-trigger { order: 3; width: 100%; flex-basis: 100%; }
  .header-actions { justify-content: flex-end; flex-wrap: wrap; }
  .header-actions .btn { min-height: 42px; padding: 8px 10px; font-size: 11px; }
  .header-actions .reminder-button, .header-actions .primary { display: inline-flex; }
  .header-actions a.btn, .header-actions button:nth-of-type(2) { display: none; }
  main { padding: 27px 14px 50px; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar .btn { width: 100%; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters input, .filters select { width: 100%; min-width: 0; }
  .filters input { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat { min-height: 105px; padding: 14px; }
  .urgent-grid, .tailor-grid, .insights-panel .tailor-grid { grid-template-columns: 1fr; }
  .panel-head { min-height: 64px; padding: 15px 16px; }
  .panel-head > span { display: none; }
  .fields, .detail-grid, .card-summary, .measurement-meta, .measurement-summary, .measurements, .notes-grid, .timing-summary { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
  .type-grid, .checklist { grid-template-columns: repeat(2, 1fr); }
  .form, .details, .edit-card-form { padding: 18px 16px; }
  .edit-section { margin: 0 -2px 15px; padding: 14px; }
  .sticky-actions { bottom: -18px; margin: 20px -16px -18px; padding: 12px 16px; }
  .sticky-actions .btn, .detail-actions .btn { flex: 1 1 100%; }
  .thermal-action-row .btn { flex: 1 1 100%; }
  .modal-head { padding: 15px 16px; }
  .toast { right: 14px; bottom: 14px; left: 14px; max-width: none; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .activity-item { grid-template-columns: 8px 1fr; }
  .activity-item time { grid-column: 2; }
  .media-actions .btn { flex: 1 1 100%; }
  .kpi-detail-tools, .report-filters { grid-template-columns: 1fr; }
  .kpi-results { max-height: none; padding: 14px; }
  .kpi-result-card { grid-template-columns: 1fr; }
  .kpi-result-card .btn { width: 100%; }
  .report-grid { grid-template-columns: 1fr; }
  .report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Responsive application layer: deliberately excluded from print stylesheets. */
@media (max-width: 820px) {
  body { font-size: 14px; }

  .btn,
  .row-action,
  .text-button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    width: 100%;
    font-size: 16px;
  }

  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 9px;
  }

  .quick-actions button {
    min-width: 0;
    width: 100%;
    border-radius: 12px;
  }

  .table-wrap {
    overflow: visible;
  }

  .table-wrap table {
    min-width: 0;
  }

  .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td {
    display: block;
    width: 100%;
  }

  .table-wrap tr {
    margin: 12px;
    width: calc(100% - 24px);
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(44, 32, 31, .06);
  }

  .table-wrap td {
    min-height: 0;
    padding: 6px 0;
    border: 0;
  }

  .table-wrap td:last-child {
    padding-top: 11px;
  }

  .table-wrap td:last-child .row-action,
  .table-wrap td:last-child button {
    width: 100%;
    min-height: 44px;
  }

  .table-wrap td.empty {
    padding: 22px 10px;
    text-align: center;
  }

  .overdue-row td { background: transparent; }
  .overdue-row { border-left: 4px solid var(--red) !important; }

  .modal-actions,
  .detail-actions,
  .media-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .modal-actions .btn,
  .detail-actions .btn,
  .media-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .detail-actions.operational-actions {
    grid-template-columns: 1fr;
  }

  .notifications,
  .staff-management-body,
  .details,
  .form {
    overscroll-behavior: contain;
  }

  .notification-item,
  .staff-row,
  .activity-item {
    min-height: 56px;
  }

  .photo-gallery img {
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .signature-pad {
    width: 100%;
    height: auto;
    max-height: 220px;
  }
}

@media (max-width: 680px) {
  header { position: sticky; top: 0; align-items: center; }
  .global-search-trigger { order: initial; flex-basis: auto; }
  .toolbar { margin-bottom: 17px; }
  .toolbar h1 { font-size: clamp(25px, 8vw, 34px); }
  .toolbar p { font-size: 14px; }

  .stats .stat {
    min-height: 92px;
    padding: 12px;
  }

  .stat strong { font-size: 23px; }
  .stat label,
  .stat span { font-size: 11px; }

  .tailor-view .urgent-panel { order: 3; }
  .tailor-view .layout { order: 4; }
  .tailor-view .stats { order: 2; }

  .panel {
    border-radius: 14px;
  }

  .urgent-card,
  .queue > *,
  .reminder-list > * {
    min-height: 56px;
  }

  .modal-actions,
  .detail-actions,
  .media-actions {
    grid-template-columns: 1fr;
  }

  .sticky-actions {
    position: sticky;
    bottom: 0;
    margin: 20px -16px -18px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  dialog:not(.login) .details,
  dialog:not(.login) .form,
  .staff-management-body {
    padding-bottom: max(82px, calc(64px + env(safe-area-inset-bottom)));
  }

  .empty {
    padding: 24px 14px;
  }
}

@media (max-width: 380px) {
  main { padding-inline: 10px; }
  .filters { grid-template-columns: 1fr; }
  .filters input { grid-column: auto; }
  .stats { gap: 7px; }
  .stat { padding: 10px; }
  .type-grid,
  .checklist { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 520px) {
  dialog:not(.login) .modal-head { min-height: 54px; padding-block: 7px; }
  .saas-sidebar { padding-block: 10px; }
  .sidebar-brand { min-height: 50px; padding-bottom: 9px; }
}