:root {
  font-family: Inter, system-ui, sans-serif;
  color: #18212f;
  background: #f4f7fb;
}

/* Kontrol Foto: mengikuti lebar tabel tab lain, tanpa minimum lebar 900px pada desktop. */
.photo-report-panel .photo-team-section { padding: 14px; }
.photo-root { width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.photo-root, #app:has(.photo-root) { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.photo-root { padding: 20px; }
.wrap > .photo-root { max-width: none; padding: 0; margin: 0; }
.photo-root > .photo-report-panel { width: 100%; box-sizing: border-box; }
.photo-report-panel .table-scroll { overflow-x: auto; }
.photo-report-panel .photo-report-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 12px; }
.photo-report-panel .photo-report-table th, .photo-report-panel .photo-report-table td { padding: 6px 5px; }
.photo-report-panel .photo-report-table th:nth-child(1) { width: 9%; }
.photo-report-panel .photo-report-table th:nth-child(2) { width: 9%; }
.photo-report-panel .photo-report-table th:nth-child(3), .photo-report-panel .photo-report-table th:nth-child(4), .photo-report-panel .photo-report-table th:nth-child(5), .photo-report-panel .photo-report-table th:nth-child(6), .photo-report-panel .photo-report-table th:nth-child(7), .photo-report-panel .photo-report-table th:nth-child(8) { width: 10.5%; }
.photo-report-panel .photo-report-table th:nth-child(9) { width: 20%; }
.photo-report-panel .photo-report-table input { min-width: 0; min-height: 32px; padding: 5px 6px; font-size: 11px; }
.photo-report-panel .photo-report-table td:first-child { min-width: 0; }
@media (max-width: 900px) {
  .photo-report-panel .photo-report-table { min-width: 900px; table-layout: auto; }
  .photo-report-panel .photo-report-table input { min-width: 74px; }
}
.photo-team-section { margin-top: 24px; padding: 18px; border: 1px solid #dbe5f3; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(30,64,175,.06); }
.photo-team-heading, .photo-history-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.photo-team-heading h3, .photo-history-heading h3 { margin:0; color:#123b7a; }
.photo-team-heading span { color:#64748b; font-size:13px; }
.photo-history { margin-top:28px; padding:18px; border:2px solid #c7d8f5; border-radius:14px; background:#f8fbff; }
.photo-history-form { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:end; }
.photo-history-form label { display:grid; gap:5px; font-size:12px; color:#475569; }
.photo-history-table { min-width:1200px; }
.photo-history-table td, .photo-history-table th { white-space:nowrap; }
.photo-report-table input { min-width:98px; }
.photo-report-table th { background:#1f5fd1; color:#fff; letter-spacing:.02em; }
.photo-report-table td { vertical-align:middle; }
.photo-report-table td:first-child { min-width:130px; background:#f7fbff; }
.photo-personnel { min-width:125px; font-weight:600; color:#334155; }
.photo-report-table input { width:100%; min-height:38px; border:2px solid #d9e2ef; border-radius:8px; padding:7px 9px; background:#fff; }
.photo-report-table input.photo-missing { border-color:#e8798b; background:#fff1f3; }
.photo-report-table input.photo-filled { border-color:#86c98d; background:#effbf0; }
.photo-report-table input.photo-alert { border-color:#e0a23b; background:#fff8df; }
.photo-status { display:block; margin-top:5px; padding:4px 7px; border-radius:999px; font-size:11px; font-weight:700; text-align:center; }
.photo-status-incomplete { color:#9f1239; background:#ffe1e7; }
.photo-status-complete { color:#166534; background:#dcfce7; }
.photo-save-button { position:sticky; right:12px; z-index:3; }
@media (max-width:900px) { .photo-history-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .photo-team-heading { align-items:stretch; flex-direction:column; } .photo-team-heading button { width:100%; } }

/* Operational report totals: make coordinator and all-team totals easy to scan. */
.report-team-total { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.report-team-total span { padding:5px 8px; border:1px solid #bfdbfe; border-radius:7px; background:#fff; color:#1e3a8a; font-size:11px; }
.report-team-total b { display:block; margin-top:2px; color:#172554; font-size:15px; }
.report-summary strong small { font-size:11px; text-transform:uppercase; letter-spacing:.04em; opacity:.9; }
.photo-report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:14px;border-bottom:1px solid #e2e8f0}.photo-report-head h2{margin-bottom:6px}.photo-report-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.photo-report-controls label{display:flex;flex-direction:column;gap:4px;color:#475569;font-size:12px;font-weight:600}.photo-report-controls input,.photo-report-controls select{width:auto;min-width:140px;margin:0}.photo-report-controls button{white-space:nowrap}.photo-report-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}.photo-report-title h3{margin:0;color:#173f7a}.photo-report-title span{color:#64748b;font-size:12px}.photo-report-title button{margin-left:auto}.photo-report-table-wrap{border:1px solid #b9c5d5;border-radius:9px}.photo-report-table{min-width:900px;border-collapse:collapse;background:#fff;font-size:12px}.photo-report-table th,.photo-report-table td{border:1px solid #b9c5d5;padding:7px 8px;text-align:center}.photo-report-table thead tr:first-child th{background:#fff38a;color:#101b4b;font-size:13px}.photo-report-table thead tr:first-child th:first-child{background:#b9f4f0}.photo-report-table thead tr:nth-child(2) th{background:#f5d7dc;color:#101b4b;font-size:14px}.photo-report-table thead tr:nth-child(3) th{background:#f5d7dc;color:#101b4b}.photo-report-table td:first-child,.photo-report-table td:nth-child(2){font-weight:600;text-align:left;color:#173f7a}.photo-report-table tbody tr:nth-child(even){background:#fffafb}.photo-report-table td input{width:100%;min-width:74px;margin:0;border:0;border-radius:4px;background:transparent;text-align:center;font-weight:600}.photo-report-table td.photo-filled{background:#e2f5e8;color:#17633a}.photo-report-table td.photo-missing{background:#fff1bd;color:#8a5a00}.photo-report-table td.photo-alert{background:#ffe0e0;color:#9b1c1c}.photo-report-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:11px;color:#64748b;font-size:12px}.photo-report-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}.photo-legend-filled{background:#e2f5e8}.photo-legend-missing{background:#fff1bd}.photo-legend-alert{background:#ffe0e0}
.report-history{margin:16px 0;padding:14px;border-color:#bfdbfe;background:#f8fbff}.report-history-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.report-history-heading h3{margin:0 0 4px;color:#173f7a}.report-history-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;margin:12px 0}.report-history-form label{font-size:12px;font-weight:600;color:#475569}.report-history-form input,.report-history-form select{margin-top:5px;width:100%;box-sizing:border-box}.report-history-actions{display:flex;align-items:end}.report-history-results{margin-top:12px}.report-history-results table{min-width:900px}.report-history-results tbody tr:nth-child(even){background:#fff}.report-history-results td{vertical-align:middle}

/* Report controls: keep primary labels readable on the light date toolbar. */
.report-date-picker button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.report-date-picker button.primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.team-backup-summary-visible { margin: 10px 0 14px; padding: 10px 14px; border: 1px solid #b9d2f5; border-left: 5px solid #1d63d5; border-radius: 10px; background: #eaf3ff; color: #123c7a; font-size: 14px; line-height: 1.5; }
.team-backup-summary-visible strong { color: #0f3f8c; }
.team-backup-summary-visible, .team-backup-help { display: none !important; }
.team-backup-help { margin: -7px 0 12px; color: #64748b; font-size: 12px; }
.team-backup-off-summary { margin: -8px 0 12px; padding: 8px 12px; border: 1px solid #b9d2f5; border-left: 5px solid #1d63d5; border-radius: 8px; background: #eaf3ff; color: #123c7a; font-size: 13px; }
.placement-coverage-warning { margin: -8px 0 12px; padding: 8px 12px; border-left: 5px solid #d97706; border-radius: 8px; background: #fff7ed; color: #92400e; font-size: 13px; line-height: 1.45; }
.placement-unassigned-warning { margin: 12px 0; padding: 8px 12px; border-left: 5px solid #d97706; border-radius: 8px; background: #fff7ed; color: #92400e; font-size: 13px; line-height: 1.45; }
.employee-search-select { min-width: 120px; }
.schedule-group-row th { padding: 9px 8px; background: #eaf3ff; color: #123c7a; border-top: 1px solid #b9d2f5; border-bottom: 1px solid #b9d2f5; text-align: left; }
.outlet-group-row th { padding: 10px 8px; background: #eaf3ff; color: #123c7a; border-top: 2px solid #1d63d5; border-bottom: 1px solid #b9d2f5; text-align: left; font-size: 14px; }
.settings-group-row th { padding: 9px 8px; background: #eaf3ff; color: #123c7a; border-top: 2px solid #1d63d5; border-bottom: 1px solid #b9d2f5; text-align: left; font-size: 14px; }
.employee-group-row th { position: static !important; display: table-cell; width: auto !important; min-width: 0 !important; padding: 9px 12px; background: #dbeafe; color: #123c7a; border-top: 2px solid #1d63d5; border-bottom: 1px solid #7aa7e8; text-align: left; font-size: 14px; font-weight: 750; letter-spacing: .02em; box-shadow: none; }
.employee-group-row th::before { content: '▰'; display: inline-block; margin-right: 8px; color: #1d63d5; font-size: 12px; }
.employee-group-row + tr td { border-top: 0; }
.employee-group-row { width: 100% !important; }

/* Compact table rows for a simpler, denser layout. */
.table-scroll th,
.table-scroll td { padding: 6px 7px; line-height: 1.15; }
.table-scroll input,
.table-scroll select { margin: 2px 0 3px; padding: 7px 8px; }
.table-scroll .outlet-id-label { margin-top: -5px !important; margin-bottom: 3px !important; }
.placement-guide-table th,
.placement-guide-table td { vertical-align: middle; }
.placement-guide-table .outlet-id-label { display: inline-block; color: #64748b; font-size: 11px; white-space: nowrap; }
.weekday-checks { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.weekday-checks label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

@media (max-width: 800px) {
  .table-scroll th,
  .table-scroll td { padding: 5px 6px; }
  .table-scroll input,
  .table-scroll select { margin: 1px 0 2px; padding: 7px; }
  .table-scroll th:first-child,
  .table-scroll td:first-child { min-width: 78px; width: 78px; white-space: nowrap; }
  .placement-guide-table th:first-child,
  .placement-guide-table td:first-child { min-width: 42px; width: 42px; }
  .placement-guide-table th:nth-child(2),
  .placement-guide-table td:nth-child(2) { min-width: 76px; width: 76px; }
}

/* Trace visit harian dan timeline masalah per gerai. */
.visit-trace-panel { padding: 0; overflow: hidden; }
.visit-trace-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:20px 22px; border-bottom:1px solid #dbe5f3; background:linear-gradient(135deg,#f8fbff,#fff); }
.visit-trace-head h2 { margin:0 0 5px; color:#173f7a; }
.visit-trace-head p { margin:0; }
.visit-date-badge { min-width:150px; padding:9px 12px; border:1px solid #c7d8f5; border-radius:10px; background:#eaf3ff; color:#526782; font-size:12px; }
.visit-date-badge strong { display:block; margin-top:3px; color:#1d4ed8; font-size:15px; }
.visit-trace-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 22px; background:#f8fbff; border-bottom:1px solid #dbe5f3; }
.visit-trace-summary > div { padding:10px 12px; border:1px solid #dbe5f3; border-radius:10px; background:#fff; }
.visit-trace-summary small { display:block; color:#64748b; }
.visit-trace-summary b { display:block; margin-top:2px; color:#173f7a; font-size:21px; }
.text-danger { color:#b91c1c !important; }.text-success { color:#047857 !important; }
.visit-trace-toolbar { display:grid; grid-template-columns:180px auto minmax(220px,1fr); gap:10px; align-items:end; padding:16px 22px; border-bottom:1px solid #e2e8f0; }
.visit-trace-toolbar label { display:grid; gap:4px; color:#475569; font-size:12px; font-weight:600; }.visit-trace-toolbar input { margin:0; }.visit-search { margin-left:auto; }
.visit-trace-groups { padding:20px 22px 0; }.visit-coordinator-group { margin-bottom:22px; padding:14px; border:1px solid #dbe5f3; border-radius:12px; background:#fff; box-shadow:0 3px 12px rgba(15,23,42,.04); }
.visit-coordinator-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }.visit-coordinator-title h3 { margin:0; color:#173f7a; }.visit-coordinator-title span { color:#64748b; font-size:12px; }
.visit-trace-table { min-width:1040px; }.visit-trace-table th { background:#2463cf; color:#fff; }.visit-trace-table td { vertical-align:middle; }.visit-trace-table td:first-child strong,.visit-trace-table td:first-child small { display:block; }.visit-trace-table td:first-child small { margin-top:3px; color:#64748b; font-size:11px; }.visit-trace-table input,.visit-trace-table select { margin:0; min-width:125px; }.visit-trace-table td:last-child { white-space:nowrap; }.visit-trace-table td:last-child button { margin:2px 4px 2px 0; padding:7px 9px; font-size:12px; }.visit-trace-table tr.trace-selected td { background:#eef5ff; }
.visit-trace-detail { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:16px; padding:0 22px 24px; }.trace-history-card,.issue-entry-card { box-shadow:none; }.detail-title { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.detail-title h3 { margin:0 0 4px; color:#173f7a; }.detail-title p { margin:0; }
.issue-trace-item { margin-top:14px; padding:14px; border:1px solid #dbe5f3; border-left:4px solid #ef5b22; border-radius:9px; background:#fffaf7; }.issue-trace-main { display:flex; justify-content:space-between; gap:12px; }.issue-trace-main strong { color:#172554; }.issue-timeline { display:grid; gap:10px; margin:14px 0; }.issue-timeline > div { display:grid; grid-template-columns:86px 1fr; gap:10px; padding-bottom:10px; border-bottom:1px dashed #dbe5f3; }.issue-timeline > div:last-child { border-bottom:0; padding-bottom:0; }.issue-timeline time { color:#64748b; font-size:12px; font-weight:700; }.issue-timeline p { margin:0; color:#475569; font-size:13px; }.issue-timeline a { grid-column:2; color:#1d4ed8; font-size:12px; }.empty-trace { padding:18px; border:1px dashed #b9cbe7; border-radius:9px; background:#f8fbff; color:#64748b; }.issue-entry-card h3 { margin-top:0; color:#173f7a; }.issue-entry-card form { margin-top:12px; }.issue-entry-card .grid { grid-template-columns:repeat(3,1fr); gap:10px; }.issue-entry-card label { display:block; color:#475569; font-size:12px; font-weight:600; }.issue-entry-card textarea { min-height:90px; }.issue-entry-card input[type=file] { background:#f8fbff; }
.badge.warning { background:#fff7ed; color:#b45309; }.issue-trace-item .badge { vertical-align:middle; }
@media (max-width:800px) { .visit-trace-head { flex-direction:column; }.visit-date-badge { width:100%; }.visit-trace-summary { grid-template-columns:repeat(2,1fr); }.visit-trace-toolbar { grid-template-columns:1fr; }.visit-search { margin-left:0; }.visit-trace-detail { grid-template-columns:1fr; padding:0 12px 16px; }.visit-trace-groups { padding:14px 12px 0; }.issue-entry-card .grid { grid-template-columns:1fr; } }
.issue-focus-toolbar { display:grid; grid-template-columns:150px 190px minmax(220px,1fr) auto 150px auto; gap:10px; align-items:end; padding:16px 22px; border-bottom:1px solid #dbe5f3; background:#fff; }
.visit-trace-detail { grid-template-columns:minmax(0,1fr); }
.issue-entry-card { width:min(100%,960px); justify-self:center; box-sizing:border-box; }
.issue-entry-card form { max-width:900px; margin:14px auto 0; }
.issue-entry-card form > label { margin-bottom:12px; }
.issue-entry-card form button.primary { display:block; min-width:190px; margin:16px auto 0; }
.issue-focus-toolbar label { display:grid; gap:4px; color:#475569; font-size:12px; font-weight:600; }
.issue-focus-toolbar input,.issue-focus-toolbar select { margin:0; }
.issue-focus-content { padding:20px 22px 0; }
.issue-queue-card { border:1px solid #dbe5f3; border-radius:12px; background:#fff; padding:16px; box-shadow:0 3px 12px rgba(15,23,42,.04); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.section-heading h3 { margin:0 0 4px; color:#173f7a; }
.section-heading p { margin:0; }
.issue-queue-table { min-width:980px; }
.issue-queue-table th { background:#245fc5; color:#fff; }
.issue-queue-table td { vertical-align:middle; }
.issue-queue-table td small { color:#64748b; }
.issue-queue-table tr:hover td { background:#f4f8ff; }
.optional-visits { padding-top:18px; }
@media (max-width:1000px) { .issue-focus-toolbar { grid-template-columns:1fr 1fr; }.issue-focus-search { grid-column:1/-1; } }
@media (max-width:800px) { .issue-focus-toolbar { grid-template-columns:1fr; padding:14px 12px; }.issue-focus-search { grid-column:auto; }.issue-focus-content { padding:14px 12px 0; }.section-heading { flex-direction:column; } }

.share-preview-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0f172acc; }
.share-preview-card { width: min(900px, 100%); max-height: 94vh; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 18px 60px #0006; }
.share-preview-head, .share-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-preview-head strong { color: #123c7a; }
.share-preview-body { overflow: auto; padding: 8px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f4f7fb; text-align: center; }
.share-preview-body img { display: block; max-width: 100%; height: auto; margin: auto; }
.share-preview-actions { justify-content: flex-end; }
@media (max-width: 800px) {
  .share-preview-backdrop { padding: 8px; }
  .share-preview-card { max-height: 96vh; padding: 10px; }
  .share-preview-actions button { flex: 1; }
}

* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; overflow-x: hidden; }
body { min-width: 320px; }
.wrap { width: 100%; max-width: 1280px; margin: auto; padding: 20px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.brand { font-weight: 800; font-size: 22px; color: #123c7a; }
.muted { color: #64748b; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card, .panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; box-shadow: 0 4px 16px #17365d0b; }
.kpi b { font-size: 28px; display: block; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.tabs button, .primary, button { border: 0; border-radius: 9px; padding: 10px 14px; cursor: pointer; }
.tabs button { background: #e8eef7; }
.tabs button.active, .primary { background: #1d63d5; color: #fff; }
button.secondary { background: #e7edf5; color: #1e293b; }
.edit-date-picker { display: inline-flex; align-items: end; gap: 8px; padding: 8px 10px; border: 1px solid #d8e2ef; border-radius: 10px; background: #f8fbff; }
.edit-date-picker label { font-size: 12px; color: #64748b; }
.edit-date-picker input { margin: 2px 0 0; width: auto; }
.team-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.team-last-saved { margin-top: 8px; color: #64748b; font-size: 13px; }
.team-row-actions { display: flex; gap: 8px; align-items: center; }
.history-card { margin: 12px 0; }
.history-actions { display: flex; align-items: end; gap: 8px; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { padding: 9px; border-bottom: 1px solid #edf1f5; text-align: left; font-size: 14px; }
th { color: #64748b; font-size: 12px; text-transform: uppercase; }
input, select, textarea { width: 100%; padding: 9px; border: 1px solid #cbd5e1; border-radius: 8px; margin: 4px 0 10px; }
textarea { min-height: 70px; }
.table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.badge { padding: 4px 8px; border-radius: 99px; background: #e8f1ff; color: #1d4ed8; font-size: 12px; }
.danger { background: #fff0f0; color: #b91c1c; }
.placement-guide-table tr.placement-row-critical td { background: #fff0e8 !important; border-bottom-color: #f7b28d; }
.placement-guide-table tr.placement-row-critical td:first-child { border-left: 5px solid #ef5b22; color: #9a3412; font-weight: 800; }
.placement-guide-table tr.placement-row-critical input,
.placement-guide-table tr.placement-row-critical select { border-color: #f59e0b; background: #fffdf8; }
.placement-guide-table tr.placement-row-double-on-duty:not(.placement-row-critical) td { background: #dcfce7 !important; border-bottom-color: #86efac; }
.placement-guide-table tr.placement-row-double-on-duty:not(.placement-row-critical) td:first-child { border-left: 5px solid #16a34a; color: #166534; font-weight: 800; }
.placement-guide-table tr.placement-row-double-on-duty:not(.placement-row-critical) input,
.placement-guide-table tr.placement-row-double-on-duty:not(.placement-row-critical) select { border-color: #4ade80; background: #f0fdf4; }
.success { background: #ecfdf5; color: #047857; }
.login { max-width: 420px; margin: 12vh auto; }
.employee-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.employee-toolbar .card { box-shadow: none; }
.employee-toolbar h3 { margin-top: 0; }
.employee-search-actions { display: flex; gap: 8px; margin-top: 4px; }
.employee-search-actions button { flex: 1; }
.login h1 { margin-top: 0; }

.report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:14px;border-bottom:1px solid #e2e8f0}.report-head h2{margin-bottom:6px}.report-date-picker{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.report-date-picker label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#475569}.report-date-picker input{width:auto;margin:0}.report-date-picker button{border:1px solid #d7e0ef;background:#fff;color:#27446f}.report-date-picker button.primary{border-color:#2563eb;color:#fff}.report-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:8px;margin:16px 0;padding:0;border:0;background:transparent}.report-summary strong,.report-summary span{display:flex;flex-direction:column;justify-content:center;min-height:58px;padding:10px 12px;border:1px solid #dbe5f5;border-radius:10px;background:#fff;color:#475569;font-size:12px;box-shadow:0 2px 8px rgba(30,64,175,.05)}.report-summary strong{background:linear-gradient(135deg,#1d4ed8,#2563eb);border-color:#1d4ed8;color:#fff;font-size:14px}.report-summary span b{margin-top:3px;color:#172554;font-size:18px}.report-summary .report-incomplete{background:#fff1f2;border-color:#fecdd3;color:#9f1239}.report-summary .report-incomplete b{color:#be123c}.report-legend{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 18px;font-size:12px}.report-legend span{padding:6px 10px;border-radius:999px;font-weight:600}.legend-sales{background:#ffe4e6;color:#9f1239}.legend-chicken{background:#ffedd5;color:#9a3412}.legend-rice{background:#fef9c3;color:#854d0e}.report-team{margin-top:24px;padding:14px;border:1px solid #dbe5f5;border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.05)}.team-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-14px -14px 12px;padding:12px 14px;border-bottom:1px solid #dbe5f5;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#eff6ff,#f8fbff)}.team-heading h3{margin:0;color:#173f7a;font-size:18px}.team-report-date{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:600}.team-heading-actions{display:flex;align-items:center;gap:10px}.report-team-total{padding:8px 10px;border:1px solid #bfdbfe;border-radius:9px;background:#eff6ff;color:#1e3a8a;font-size:12px;white-space:nowrap}.report-table{margin:0}.report-table thead th{background:#f8fafc;color:#475569;border-bottom:2px solid #cbd5e1}.report-table tbody tr:nth-child(even){background:#fbfdff}.report-table tbody tr:hover{background:#f0f7ff}.report-table td{vertical-align:middle}.report-table input{min-width:100px;margin:0}.report-table td:first-child{font-weight:600;color:#172554}.report-number{transition:background .15s}.report-missing-ayam_terjual{background:#fff1f2!important}.report-missing-sisa_ayam{background:#fff3e8!important}.report-missing-sisa_nasi{background:#fffbe0!important}.report-missing input{border-color:currentColor;background:transparent}.report-missing-ayam_terjual input{color:#9f1239}.report-missing-sisa_ayam input{color:#9a3412}.report-missing-sisa_nasi input{color:#854d0e}

@media (max-width: 800px) {
  .wrap { padding: 12px 10px; }
  .top { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .brand { font-size: 20px; }
  .top button { align-self: flex-start; }
  .grid { grid-template-columns: 1fr; }
  .employee-toolbar { grid-template-columns: 1fr; }
  .card, .panel { padding: 12px; border-radius: 12px; }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tabs button { width: 100%; min-height: 52px; padding: 8px 6px; font-size: 13px; line-height: 1.2; }
  .tabs .edit-date-picker { grid-column: 1 / -1; }
  .edit-date-picker { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; }
  .edit-date-picker input { width: 100%; min-width: 0; margin: 0; }
  .edit-date-picker button { white-space: nowrap; padding: 10px 12px; }
  .team-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .team-actions > .primary { width: 100%; }
  .team-row-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .team-row-actions button { width: 100%; padding: 9px 5px; font-size: 12px; }
  .report-head { flex-direction: column; }
  .report-date-picker { justify-content: flex-start; }
  .report-date-picker button { width: auto; min-height: 40px; }
  .report-summary { gap: 6px; }
  .report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-summary strong { grid-column: 1 / -1; }
  .team-heading { align-items: stretch; flex-direction: column; }
  .team-heading button { width: 100%; }
  .team-heading-actions { align-items: stretch; flex-direction: column; }
  .report-team-total { white-space: normal; }
  .history-actions { flex-direction: column; align-items: stretch; }
  input, select, textarea { font-size: 16px; }
  .table-scroll { position: relative; padding-bottom: 4px; border: 1px solid #edf1f5; border-radius: 10px; background: #fff; }
  .table-scroll::before { content: 'Geser ke samping untuk kolom lainnya'; display: block; padding: 7px 10px; color: #64748b; background: #f8fbff; border-bottom: 1px solid #edf1f5; font-size: 11px; text-align: right; }
  table { min-width: 680px; }
  th, td { padding: 8px 6px; font-size: 13px; }
  th { font-size: 11px; white-space: nowrap; }
  th:first-child, td:first-child { position: sticky; left: 0; z-index: 2; min-width: 40px; width: 40px; background: #fff; }
  th:first-child { background: #f8fbff; }
  td:nth-child(2), th:nth-child(2) { min-width: 145px; }
  td:nth-child(3), th:nth-child(3) { min-width: 155px; }
  td:nth-child(4), th:nth-child(4) { min-width: 105px; }
  td:nth-child(5), th:nth-child(5) { min-width: 145px; }
  td:nth-child(6), th:nth-child(6) { min-width: 145px; }
}