/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: #2c1a0e; background: #f0ebe3; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#sidebar { width: 210px; flex-shrink: 0; background: #161616; display: flex; flex-direction: column; overflow-y: auto; }
#logo { display: flex; align-items: center; justify-content: center; padding: 22px 16px 20px; }
#logo-img { width: 130px; height: auto; display: block; }
#nav { padding: 6px 0 10px; flex: 1; }
#sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid #2a2a2a; gap: 8px; }
.nav-divider { margin: 8px 14px; border: none; border-top: 1px solid #2a2a2a; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: #8a8a8a; text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 400; transition: background 0.12s, color 0.12s; border-radius: 6px; margin: 1px 6px; }
.nav-item:hover { background: #242424; color: #e0e0e0; }
.nav-item.active { background: #c87941; color: #fff; font-weight: 600; }
.nav-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }

/* ── Main ──────────────────────────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 60px; background: #fff; border-bottom: 1px solid #e8ddd0; flex-shrink: 0; }
#page-title { font-size: 18px; font-weight: 700; color: #2c1a0e; }
#topbar-actions { display: flex; gap: 10px; align-items: center; }
#content { flex: 1; overflow-y: auto; padding: 24px 28px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; padding: 20px; margin-bottom: 20px; }
.card-title { font-size: 13px; font-weight: 700; color: #7a6050; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; padding: 18px 20px; }
.stat-label { font-size: 11px; font-weight: 600; color: #9a7a62; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: 700; color: #2c1a0e; line-height: 1; }
.stat-sub { font-size: 11px; color: #9a7a62; margin-top: 4px; }
.stat-card.accent { border-left: 3px solid #c87941; }
.stat-card.success { border-left: 3px solid #4a7c59; }
.stat-card.danger { border-left: 3px solid #c04040; }
.stat-card.info { border-left: 3px solid #3a6b8a; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; transition: opacity 0.15s, background 0.15s; text-decoration: none; white-space: nowrap; }
.btn:hover { opacity: 0.88; }
.btn-primary { background: #c87941; color: #fff; }
.btn-secondary { background: #f0e8de; color: #5c3d2e; border: 1px solid #d4b896; }
.btn-success { background: #4a7c59; color: #fff; }
.btn-danger { background: #c04040; color: #fff; }
.btn-ghost { background: transparent; color: #7a6050; border: 1px solid #d4b896; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 5px; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; overflow: hidden; }
.table-toolbar { display: flex; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #f0e8de; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; padding: 7px 12px; min-width: 200px; }
.search-box input { border: none; background: transparent; outline: none; font-size: 13px; color: #2c1a0e; width: 100%; }
.search-box input::placeholder { color: #aaa; }
.toolbar-filter { padding: 7px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 13px; color: #444; background: #fff; cursor: pointer; }
.toolbar-filter:focus { outline: none; border-color: #c87941; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.4px; background: #fff; border-bottom: 1px solid #eee; white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid #f3f3f3; font-size: 13px; color: #222; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }
.td-actions { display: flex; gap: 5px; justify-content: flex-end; }
.no-data { text-align: center; padding: 48px; color: #9a7a62; }
.no-data-icon { font-size: 36px; margin-bottom: 10px; }
/* Staff avatar circles */
.avatar-group { display: flex; gap: -4px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; margin-right: -6px; border: 2px solid #fff; flex-shrink: 0; }
.avatar-mb { background: #2e9e7d; }
.avatar-pl { background: #7c5cbf; }
.avatar-rf { background: #d05050; }
.avatar-default { background: #888; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.badge-enquiry   { background: #e9e4de; color: #5c4a3a; }
.badge-quoted    { background: #fef3c7; color: #92400e; }
.badge-confirmed { background: #dbeafe; color: #1e40af; }
.badge-in_progress { background: #ede9fe; color: #5b21b6; }
.badge-completed { background: #d1fae5; color: #065f46; }
.badge-invoiced  { background: #f1f5f9; color: #475569; }
.badge-draft     { background: #f1f5f9; color: #64748b; }
.badge-sent      { background: #dbeafe; color: #1e40af; }
.badge-accepted  { background: #d1fae5; color: #065f46; }
.badge-rejected  { background: #fee2e2; color: #991b1b; }
.badge-paid      { background: #d1fae5; color: #065f46; }
.badge-overdue   { background: #fee2e2; color: #991b1b; }
.badge-scheduled { background: #dbeafe; color: #1e40af; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-hardwood  { background: #fef3c7; color: #92400e; }
.badge-softwood  { background: #d1fae5; color: #065f46; }
.badge-sheet     { background: #ede9fe; color: #5b21b6; }
.badge-low       { background: #fee2e2; color: #991b1b; }
.badge-normal    { background: #f1f5f9; color: #475569; }
.badge-high      { background: #fef3c7; color: #92400e; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 12px; font-weight: 600; color: #7a6050; text-transform: uppercase; letter-spacing: 0.3px; }
input, select, textarea { width: 100%; padding: 8px 11px; border: 1px solid #d4b896; border-radius: 7px; font-size: 13px; color: #2c1a0e; background: #fff; outline: none; transition: border-color 0.15s; font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: #c87941; box-shadow: 0 0 0 3px rgba(200,121,65,0.12); }
textarea { resize: vertical; min-height: 70px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0e8de; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
#modal-overlay { position: fixed; inset: 0; background: rgba(26,13,6,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
#modal-overlay.hidden { display: none; }
#modal { background: #fff; border-radius: 12px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
#modal.modal-wide { max-width: 860px; }
#modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #f0e8de; flex-shrink: 0; }
#modal-title { font-size: 16px; font-weight: 700; color: #2c1a0e; }
#modal-close { background: none; border: none; cursor: pointer; font-size: 18px; color: #9a7a62; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; }
#modal-close:hover { background: #f0e8de; }
#modal-body { padding: 22px; overflow-y: auto; flex: 1; }

/* ── Quote / Invoice builder ────────────────────────────────────────────────── */
.line-items-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.line-items-table th { text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 700; color: #9a7a62; background: #faf6f0; border-bottom: 1px solid #e8ddd0; text-transform: uppercase; letter-spacing: 0.3px; }
.line-items-table td { padding: 5px 4px; border-bottom: 1px solid #f5f0ea; vertical-align: middle; }
.line-items-table input, .line-items-table select { padding: 6px 8px; font-size: 13px; border-radius: 5px; }
.line-items-table .td-desc input { width: 100%; }
.line-items-table .td-qty input { width: 65px; }
.line-items-table .td-unit select { width: 75px; }
.line-items-table .td-price input { width: 90px; }
.line-items-table .td-total { text-align: right; font-weight: 600; color: #5c3d2e; white-space: nowrap; min-width: 80px; }
.line-items-table .td-del button { background: none; border: none; cursor: pointer; color: #c04040; font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.line-items-table .td-del button:hover { background: #fee2e2; }
.line-items-table .td-move { width: 24px; padding: 2px 2px; }
.line-items-table .td-move button { display: block; background: none; border: none; cursor: pointer; color: #b09a88; font-size: 10px; padding: 0 4px; line-height: 1.4; border-radius: 3px; }
.line-items-table .td-move button:hover:not(:disabled) { background: #f0e8de; color: #5c3d2e; }
.line-items-table .td-move button:disabled { opacity: 0.25; cursor: default; }
.totals-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 12px 0; border-top: 1px solid #e8ddd0; margin-top: 4px; }
.totals-row { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.totals-row .label { color: #7a6050; width: 120px; text-align: right; }
.totals-row .value { font-weight: 600; color: #2c1a0e; width: 90px; text-align: right; }
.totals-row.grand .label { font-weight: 700; font-size: 14px; color: #2c1a0e; }
.totals-row.grand .value { font-size: 18px; font-weight: 800; color: #c87941; }
.totals-row select { padding: 4px 8px; font-size: 13px; width: 80px; }
.add-line-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f0e8de; color: #7a5030; border: 1px dashed #c8a880; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.15s; }
.add-line-btn:hover { background: #e8ddd0; }

/* ── Schedule ──────────────────────────────────────────────────────────────── */
/* ── Calendar (Schedule) ───────────────────────────────────────────────────── */
.cal-wrap { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; overflow: hidden; }
.cal-header-row { padding: 14px 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; }
.cal-week-label { font-size: 16px; font-weight: 700; color: #2c1a0e; }
.cal-grid { display: flex; overflow-x: auto; }
.cal-gutter { flex-shrink: 0; width: 56px; border-right: 1px solid #eee; }
.cal-gutter-top { height: 52px; border-bottom: 1px solid #eee; }
.cal-hour-label { height: 64px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 4px 8px 0 0; font-size: 11px; color: #aaa; border-bottom: 1px solid #f3f3f3; box-sizing: border-box; white-space: nowrap; }
.cal-day-col { flex: 1; min-width: 110px; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.cal-day-col:last-child { border-right: none; }
.cal-today-col { background: #fffbf5; }
.cal-day-header { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #eee; gap: 2px; }
.cal-day-name { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cal-day-num { font-size: 18px; font-weight: 600; color: #333; line-height: 1; }
.cal-today-hdr { background: #fffbf5; }
.cal-today-num { background: #c87941; color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cal-day-body { position: relative; cursor: pointer; }
.cal-hour-slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid #f3f3f3; box-sizing: border-box; }
.cal-hour-slot:hover { background: #fdf7f0; }
.cal-event { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 4px 6px; cursor: pointer; overflow: hidden; transition: opacity 0.15s; z-index: 1; }
.cal-event:hover { opacity: 0.85; }
.cal-event-title { font-size: 12px; font-weight: 600; line-height: 1.3; }
.cal-event-sub { font-size: 10px; opacity: 0.8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* legacy list-view classes kept for dashboard week preview */
.week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.week-nav h3 { font-size: 15px; font-weight: 700; color: #2c1a0e; flex: 1; }
.day-block { margin-bottom: 16px; }
.day-header { font-size: 12px; font-weight: 700; color: #9a7a62; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0 6px; border-bottom: 1px solid #e8ddd0; margin-bottom: 8px; }
.day-header.today-hdr { color: #c87941; }
.sched-item { display: flex; gap: 12px; padding: 10px 14px; background: #fff; border-radius: 8px; border: 1px solid #e8ddd0; margin-bottom: 6px; align-items: flex-start; cursor: pointer; transition: border-color 0.15s; }
.sched-item:hover { border-color: #c87941; }
.sched-time { font-size: 11px; color: #9a7a62; white-space: nowrap; width: 90px; flex-shrink: 0; padding-top: 2px; font-weight: 600; }
.sched-body { flex: 1; }
.sched-title { font-size: 13px; font-weight: 600; color: #2c1a0e; }
.sched-meta { font-size: 11px; color: #9a7a62; margin-top: 2px; }
.sched-team { font-size: 11px; color: #7a5030; font-weight: 600; }
.sched-empty { padding: 8px 0; color: #b09070; font-size: 12px; font-style: italic; }

/* ── Sub-tabs ──────────────────────────────────────────────────────────────── */
.sub-tabs { display: flex; gap: 2px; padding: 12px 16px 0; border-bottom: 1px solid #eee; background: #fff; border-radius: 10px 10px 0 0; flex-wrap: wrap; }
.sub-tab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #888; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; display: flex; align-items: center; gap: 6px; border-radius: 0; background: none; border-top: none; border-left: none; border-right: none; }
.sub-tab:hover { color: #444; }
.sub-tab.active { color: #c87941; border-bottom-color: #c87941; font-weight: 600; }
.sub-tab-count { background: #f0f0f0; color: #666; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.sub-tab.active .sub-tab-count { background: #fde8d4; color: #c87941; }

/* ── Reports ───────────────────────────────────────────────────────────────── */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; color: #9a7a62; text-transform: uppercase; background: #faf6f0; border-bottom: 1px solid #e8ddd0; }
.report-table td { padding: 9px 12px; border-bottom: 1px solid #f5f0ea; font-size: 13px; }
.report-table tr:last-child td { border-bottom: none; }
.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar-bg { flex: 1; height: 8px; background: #f0e8de; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: #c87941; border-radius: 4px; }

/* ── Detail view ───────────────────────────────────────────────────────────── */
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 20px; }
.detail-title h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.detail-meta { font-size: 12px; color: #9a7a62; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.detail-section { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; padding: 18px 20px; }
.detail-section h3 { font-size: 12px; font-weight: 700; color: #9a7a62; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.detail-field { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #f5f0ea; font-size: 13px; }
.detail-field:last-child { border-bottom: none; }
.detail-field .field-label { color: #9a7a62; }
.detail-field .field-value { font-weight: 500; text-align: right; color: #2c1a0e; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; color: #9a7a62; font-size: 13px; cursor: pointer; margin-bottom: 16px; }
.back-btn:hover { color: #c87941; }

/* ── Print layout for quotes/invoices ──────────────────────────────────────── */
.doc-preview { background: #fff; border-radius: 10px; border: 1px solid #e8ddd0; padding: 40px; max-width: 700px; }
.doc-header { display: flex; justify-content: space-between; margin-bottom: 32px; }
.doc-from { font-size: 13px; line-height: 1.6; color: #5c3d2e; }
.doc-from strong { font-size: 18px; font-weight: 800; color: #c87941; display: block; margin-bottom: 4px; }
.doc-meta { text-align: right; font-size: 13px; line-height: 1.8; }
.doc-meta .doc-num { font-size: 20px; font-weight: 700; color: #2c1a0e; }
.doc-to { margin-bottom: 28px; }
.doc-to .doc-to-label { font-size: 11px; font-weight: 700; color: #9a7a62; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.doc-to .doc-to-name { font-size: 15px; font-weight: 600; }
.doc-items { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.doc-items th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; color: #9a7a62; border-bottom: 2px solid #e8ddd0; text-transform: uppercase; }
.doc-items td { padding: 10px 10px; border-bottom: 1px solid #f5f0ea; font-size: 13px; }
.doc-items .td-right { text-align: right; }
.doc-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 16px; }
.doc-total-row { display: flex; gap: 40px; font-size: 13px; }
.doc-total-row .dl { color: #7a6050; width: 100px; text-align: right; }
.doc-total-row .dv { width: 90px; text-align: right; font-weight: 600; }
.doc-total-row.grand .dl { font-weight: 700; font-size: 14px; color: #2c1a0e; }
.doc-total-row.grand .dv { font-size: 16px; font-weight: 800; color: #c87941; }
.doc-notes { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e8ddd0; font-size: 12px; color: #7a6050; line-height: 1.6; }
.doc-terms { margin-top: 12px; font-size: 11px; color: #9a7a62; }

/* ── Misc ───────────────────────────────────────────────────────────────────── */
.loading { text-align: center; padding: 60px; color: #9a7a62; font-size: 14px; }
.section-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: #f0e8de; padding: 4px; border-radius: 8px; width: fit-content; }
.tab-btn { padding: 6px 16px; border: none; background: transparent; border-radius: 6px; font-size: 13px; font-weight: 600; color: #7a6050; cursor: pointer; transition: background 0.15s, color 0.15s; }
.tab-btn.active { background: #fff; color: #2c1a0e; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; background: #f0e8de; border-radius: 10px; font-size: 11px; color: #7a5030; }

/* ── Toasts ─────────────────────────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 18px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.2); pointer-events: all; animation: slideIn 0.25s ease; max-width: 320px; }
.toast-success { background: #4a7c59; }
.toast-error { background: #c04040; }
.toast-info { background: #3a6b8a; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Pricelist Overlay ──────────────────────────────────────────────────────── */
#pl-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(26,13,6,0.6); }
#pl-overlay.hidden { display:none; }
#pl-panel { background:#fff; border-radius:12px; width:100%; max-width:780px; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.35); }
#pl-panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #f0e8de; flex-shrink:0; }
#pl-panel-header h2 { font-size:16px; font-weight:700; color:#2c1a0e; }
#pl-panel-body { padding:18px 22px; overflow-y:auto; flex:1; }

/* ── To Do List ─────────────────────────────────────────────────────────────── */
.todo-row { display:flex; align-items:flex-start; gap:12px; padding:11px 4px; border-bottom:1px solid #f5f0ea; transition:background 0.1s; }
.todo-row:last-child { border-bottom:none; }
.todo-row:hover { background:#fdf9f5; border-radius:8px; }
.todo-done { opacity:0.45; }
.todo-overdue .todo-title { color:#c04040; }
.todo-check { font-size:20px; cursor:pointer; flex-shrink:0; padding-top:1px; color:#c87941; transition:transform 0.1s; user-select:none; }
.todo-check:hover { transform:scale(1.2); }
.todo-done .todo-check { color:#4a7c59; }
.todo-body { flex:1; min-width:0; }
.todo-title { font-size:13px; font-weight:600; color:#2c1a0e; margin-bottom:2px; }
.todo-done .todo-title { text-decoration:line-through; }
.todo-desc { font-size:12px; color:#7a6050; margin-bottom:5px; }
.todo-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.todo-actions { display:flex; gap:6px; flex-shrink:0; opacity:0; transition:opacity 0.15s; }
.todo-row:hover .todo-actions { opacity:1; }

/* ── Dashboard Stat Cards ───────────────────────────────────────────────────── */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.dash-stat-card { background: #fff; border-radius: 8px; border: 1px solid #e8e0d8; padding: 20px 22px; border-left-width: 4px; }
.dash-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #9a7a62; margin-bottom: 6px; }
.dash-stat-value { font-size: 26px; font-weight: 700; color: #2c1a0e; line-height: 1.1; }
.dash-stat-sub { font-size: 12px; color: #9a7a62; margin-top: 4px; }
.dash-stat-orange { border-left-color: #c87941; }
.dash-stat-blue   { border-left-color: #4a7fa5; }
.dash-stat-green  { border-left-color: #4a8c6a; }
.dash-stat-grey   { border-left-color: #8a9aaa; }
@media (max-width: 900px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .dash-stats { grid-template-columns: 1fr; } }

/* ── Pipeline Board ─────────────────────────────────────────────────────────── */
.pipeline-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.pipeline-stage { background: #fff; border-radius: 8px; border: 1px solid #e8e0d8; overflow: hidden; display: flex; flex-direction: column; }
.pipeline-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid #e8e0d8; }
.pipeline-count { background: rgba(0,0,0,0.08); border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.stage-blue   { background: #f0f4ff; color: #3a5a9a; }
.stage-amber  { background: #fdf8ee; color: #7a5a1a; }
.stage-purple { background: #f5f2ff; color: #5a3a9a; }
.stage-green  { background: #f0faf4; color: #2a6a4a; }
.stage-orange { background: #fff8f0; color: #8a4a1a; }
.stage-red    { background: #fff0f0; color: #8a1a1a; }
.pipeline-items { padding: 8px; flex: 1; overflow-y: auto; max-height: 360px; }
.pipeline-item { padding: 9px 10px; border-radius: 5px; border: 1px solid #ede8e0; margin-bottom: 6px; cursor: pointer; background: #fff; transition: border-color 0.12s, box-shadow 0.12s; }
.pipeline-item:hover { border-color: #b08060; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.pi-title { font-size: 12px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-sub { font-size: 11px; color: #9a7a62; margin-bottom: 6px; }
.pi-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.pipeline-empty { padding: 20px 0; text-align: center; font-size: 12px; color: #b8a898; }
.pipeline-more { text-align: center; font-size: 11px; color: #9a7a62; padding: 6px 0; cursor: pointer; }
@media (max-width: 1400px) { .pipeline-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .pipeline-board { grid-template-columns: 1fr 1fr; } }

/* ── Mobile / Tablet ─────────────────────────────────────────────────────────
   Breakpoints:
     768px  — tablet portrait & mobile landscape
     480px  — mobile portrait
──────────────────────────────────────────────────────────────────────────── */

/* Hamburger button (hidden on desktop) */
#menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #2c1a0e; flex-shrink: 0; }

/* Sidebar overlay backdrop */
#sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199; }
#sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {
  /* ── Sidebar slides in as a drawer ── */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    transform: translateX(-100%); transition: transform 0.25s ease;
    width: 230px;
  }
  #sidebar.open { transform: translateX(0); }

  /* ── Main takes full width ── */
  #main { width: 100%; }

  /* ── Topbar ── */
  #topbar { padding: 0 14px; height: 54px; gap: 10px; }
  #page-title { font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topbar-actions { gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  #topbar-actions .btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  #menu-toggle { display: flex; }

  /* ── Content padding ── */
  #content { padding: 14px; }

  /* ── Cards ── */
  .card { padding: 14px; }

  /* ── Stats grid: 2 columns ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 22px; }

  /* ── Pipeline: single column scroll ── */
  .pipeline-board { grid-template-columns: 1fr; gap: 10px; }
  .pipeline-items { max-height: 200px; }

  /* ── Tables: horizontal scroll ── */
  .table-wrap { border-radius: 8px; }
  .table-toolbar { padding: 10px 12px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 10px; }

  /* ── Sub-tabs scroll horizontally ── */
  .sub-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
  .sub-tab { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }

  /* ── Detail grid: single column ── */
  .detail-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }

  /* ── Forms: single column ── */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .form-group.full { grid-column: 1; }

  /* ── Modals: full screen on mobile ── */
  #modal-overlay { padding: 0; align-items: flex-end; }
  #modal { max-width: 100%; max-height: 95vh; border-radius: 16px 16px 0 0; }
  #pl-overlay { padding: 0; align-items: flex-end; }
  #pl-panel { max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }

  /* ── Quote/invoice builder: stack line items ── */
  .line-items-table { font-size: 12px; }
  .line-items-table input { padding: 5px 6px; font-size: 12px; }
  .line-items-table .td-qty input { width: 50px; }
  .line-items-table .td-price input { width: 72px; }

  /* ── Doc preview ── */
  .doc-preview { padding: 20px; }
  .doc-header { flex-direction: column; gap: 16px; }
  .doc-meta { text-align: left; }

  /* ── Calendar: narrow columns ── */
  .cal-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-day-col { min-width: 80px; }
  .cal-gutter { width: 44px; }
  .cal-hour-label { font-size: 9px; padding: 3px 4px 0 0; }
  .cal-week-label { font-size: 13px; }

  /* ── Topbar actions: hide secondary buttons, keep primary ── */
  #topbar-actions .btn-ghost { display: none; }
  #topbar-actions .btn-secondary:not(:last-of-type) { display: none; }

  /* ── Touch-friendly buttons ── */
  .btn { min-height: 36px; }
  .btn-xs { min-height: 28px; padding: 4px 10px; }
  .nav-item { padding: 11px 14px; }

  /* ── Toasts ── */
  #toasts { bottom: 12px; right: 12px; left: 12px; }
  .toast { max-width: 100%; }
}

@media (max-width: 480px) {
  /* ── Stats: single column on small phones ── */
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Topbar actions: only show primary button ── */
  #topbar-actions .btn-secondary { display: none; }

  /* ── Hide lower-priority table columns ── */
  table th:nth-child(5), table td:nth-child(5),
  table th:nth-child(6), table td:nth-child(6),
  table th:nth-child(7), table td:nth-child(7) { display: none; }

  /* ── Form actions stack ── */
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* ── Content ── */
  #content { padding: 10px; }
  .card { padding: 12px; }
}

@media print {
  @page { margin: 0; size: A4; }
  #sidebar, #topbar, #topbar-actions, .btn, .no-print, #menu-toggle, #sidebar-backdrop { display: none !important; }
  #main { overflow: visible; }
  #content { padding: 20mm 20mm 15mm; }
  .doc-preview { border: none; padding: 0; box-shadow: none; }
}

/* ── Maintenance ───────────────────────────────────────────────────────────── */
.maint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.maint-card { background: #fff; border: 1px solid #e8ddd0; border-radius: 10px; padding: 18px 20px; }
.maint-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #f0e8de; }
.maint-machine-name { font-size: 15px; font-weight: 700; color: #2c1a0e; }
.maint-machine-desc { font-size: 12px; color: #9a7a62; margin-top: 2px; }
.maint-checks { display: flex; flex-direction: column; gap: 8px; }
.maint-check { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 7px; background: #faf6f0; border: 1px solid #e8ddd0; }
.maint-check-alert { background: #fff7ed; border-color: #fdba74; }
.maint-freq { font-size: 13px; font-weight: 600; color: #5c3d2e; }
.maint-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.maint-ok      { background: #dcfce7; color: #166534; }
.maint-due     { background: #fef9c3; color: #854d0e; }
.maint-overdue { background: #fee2e2; color: #991b1b; }