:root {
  --aaa-green: #82f500;
  --aaa-green-dark: #59a900;
  --ink: #172027;
  --muted: #64727d;
  --line: #dfe5e9;
  --soft: #f4f7f8;
  --surface: #ffffff;
  --danger: #c73737;
  --warning: #b87800;
  --info: #1769aa;
  --success: #208348;
  --shadow: 0 18px 42px rgba(20, 31, 38, 0.12);
  --radius: 18px;
  --topbar-height: calc(76px + env(safe-area-inset-top));
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { background: #edf2f3; color: var(--ink); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(130,245,0,.22), transparent 34%),
    linear-gradient(145deg, #11191e 0%, #253039 55%, #11191e 100%);
}
.login-shell {
  width: min(100%, 1040px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  overflow: hidden;
  border-radius: 28px;
  background: white;
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
}
.brand-panel {
  min-height: 610px;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(160deg, var(--aaa-green), #b6ff58 72%, white 72%);
}
.brand-panel h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.15; margin: 8px 0 20px; }
.brand-panel p { font-size: 1.08rem; max-width: 520px; }
.login-logo { width: 180px; height: 180px; object-fit: contain; background: white; border-radius: 24px; box-shadow: var(--shadow); }
.eyebrow { letter-spacing: .08em; font-weight: 900; margin: 0; }
.login-card { padding: 54px 42px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.card-heading h2 { margin: 0; font-size: 2rem; }
.card-heading p { color: var(--muted); margin: 6px 0 12px; }
.field { display: grid; gap: 8px; font-weight: 700; }
.field input, .field select, .field textarea, .control {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cfd8dc;
  border-radius: 12px;
  padding: 10px 13px;
  background: white;
  color: var(--ink);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus, .control:focus {
  border-color: var(--aaa-green-dark);
  box-shadow: 0 0 0 4px rgba(130,245,0,.18);
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 50px; }
.password-wrap .icon-button { position: absolute; right: 6px; top: 5px; }
.check-row { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.demo-accounts { border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); }
.demo-accounts summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.demo-grid { display: grid; gap: 8px; margin-top: 12px; }
.demo-grid button { border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 9px; text-align: left; }

.button {
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 9px 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.button.primary { background: var(--aaa-green); color: #101810; }
.button.primary:hover { background: #70d900; }
.button.secondary { background: #1e2a31; color: white; }
.button.ghost { background: #eef3f4; color: var(--ink); }
.button.danger { background: var(--danger); color: white; }
.button.danger-outline { color: var(--danger); background: white; border: 1px solid #e5b7b7; }
.button.success { background: var(--success); color: white; }
.button.warning { background: #ffe5ad; color: #714800; }
.button.small { min-height: 36px; padding: 7px 11px; font-size: .88rem; }
.button.full { width: 100%; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; }
.icon-button:hover { background: var(--soft); }

.app-view { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 258px 1fr; grid-template-rows: var(--topbar-height) 1fr; }
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) 10px calc(22px + env(safe-area-inset-left));
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.top-brand { display: flex; align-items: center; gap: 12px; }
.top-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; }
.top-brand strong, .top-brand small { display: block; }
.top-brand strong { font-size: 1.04rem; }
.top-brand small { color: var(--muted); margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 13px; }
.user-chip > span { width: 34px; height: 34px; border-radius: 50%; background: var(--aaa-green); display: grid; place-items: center; font-weight: 900; }
.user-chip strong, .user-chip small { display: block; }
.user-chip small { color: var(--muted); }
.menu-button { display: none; border: 0; background: var(--soft); border-radius: 10px; width: 42px; height: 42px; font-size: 1.3rem; }
.sidebar {
  grid-row: 2;
  background: #172127;
  color: white;
  padding: 24px 14px;
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 20;
}
.main-nav { display: grid; gap: 8px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #c9d2d7; padding: 13px 14px; border-radius: 12px; display: flex; align-items: center; gap: 11px; text-align: left; font-weight: 800; }
.nav-item:hover { background: #26343c; color: white; }
.nav-item.active { background: var(--aaa-green); color: #172127; }
.sidebar-note { background: #25333b; border-radius: 14px; padding: 14px; font-size: .9rem; }
.sidebar-note p { color: #bcc7cc; margin-bottom: 0; line-height: 1.55; }
.workspace { grid-column: 2; grid-row: 2; padding: 28px; min-width: 0; }
.page { display: none; }
.page.active-page { display: block; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.15rem); }
.page-head p { margin: 5px 0 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 9px; }
.grid { display: grid; gap: 18px; }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card, .panel, .category-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(24,36,43,.05);
}
.stat-card { padding: 20px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -24px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(130,245,0,.12); }
.stat-card .label { color: var(--muted); font-weight: 700; }
.stat-card .value { font-size: 2rem; font-weight: 900; margin-top: 8px; }
.stat-card .hint { font-size: .87rem; color: var(--muted); margin-top: 7px; }
.panel { padding: 20px; }
.panel h2 { margin: 0 0 14px; }
.two-col { grid-template-columns: 1.2fr .8fr; }
.category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.category-card { padding: 18px; border-left: 5px solid var(--aaa-green); }
.category-card h3 { margin: 0 0 6px; }
.category-card p { margin: 0; color: var(--muted); }
.category-card .category-number { font-size: 1.5rem; font-weight: 900; margin-top: 14px; }

.category-explorer { overflow: visible; }
.category-explorer-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.category-explorer-head h2 { margin-bottom: 4px; }
.category-explorer-head p { margin: 0; color: var(--muted); }
.category-caret { font-size: .75rem; margin-left: 4px; }
.category-menu { margin-top: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #f5f8f4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.category-menu-item { border: 1px solid transparent; border-radius: 12px; background: white; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; color: var(--ink); }
.category-menu-item:hover { border-color: var(--aaa-green-dark); background: #f9fff2; }
.category-menu-item.selected { border-color: var(--aaa-green-dark); box-shadow: inset 4px 0 0 var(--aaa-green); }
.category-menu-item strong, .category-menu-item small { display: block; }
.category-menu-item small { color: var(--muted); margin-top: 2px; }
.category-menu-value { color: var(--muted); font-weight: 800; white-space: nowrap; }
.selected-category-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 0 12px; }
.selected-category-head h3 { margin: 3px 0 0; font-size: 1.35rem; }
.eyebrow-label { color: var(--muted); font-size: .82rem; font-weight: 800; }
.selected-category-summary { display: grid; grid-template-columns: auto auto; gap: 2px 9px; align-items: baseline; text-align: right; }
.selected-category-summary strong { font-size: 1.1rem; }
.selected-category-summary span { color: var(--muted); font-size: .82rem; }
.category-stock-table table { min-width: 1120px; }
.empty-state.compact { padding: 26px 18px; }
.category-prompt { margin-top: 14px; border: 1px dashed #cbd5d9; border-radius: 14px; background: #fafcfc; }
.approval-balance-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-left: 5px solid var(--success); background: #edf8f1; border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.approval-balance-banner.has-shortage { border-left-color: var(--danger); background: #fff0f0; }
.approval-balance-banner strong, .approval-balance-banner span { display: block; }
.approval-balance-banner span { color: var(--muted); margin-top: 2px; }
.approval-check-icon { width: 36px; height: 36px; border-radius: 50%; background: white; display: grid !important; place-items: center; color: var(--success) !important; font-weight: 900; font-size: 1.15rem; flex: 0 0 auto; }
.approval-balance-banner.has-shortage .approval-check-icon { color: var(--danger) !important; }
.approval-table table { min-width: 1060px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 9px; flex: 1; }
.filter-row input, .filter-row select { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: white; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: white; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
th { background: #f4f7f8; font-size: .88rem; color: #45545d; position: sticky; top: 0; }
tbody tr:hover { background: #fbfdfd; }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.total-row td { font-weight: 900; background: #f7faf5; }
.balance-negative { color: var(--danger); font-weight: 900; }
.balance-low { color: var(--warning); font-weight: 900; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: .82rem; font-weight: 900; white-space: nowrap; }
.status-draft { background: #e7edf0; color: #45535c; }
.status-pending { background: #fff0c9; color: #805700; }
.status-approved { background: #dff3e6; color: #1d6f3e; }
.status-rejected { background: #fae1e1; color: #9b2929; }
.status-cancelled { background: #ece7f6; color: #60488c; }
.empty-state { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 5px; }

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.form-section { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.form-section h2 { margin: 0 0 16px; }
.item-builder { display: grid; grid-template-columns: minmax(260px, 2fr) 120px 120px auto; gap: 10px; align-items: end; }
.autocomplete { position: relative; }
.suggestions { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 25; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; }
.suggestion { display: block; width: 100%; padding: 10px 12px; border: 0; background: white; text-align: left; }
.suggestion:hover { background: #f2f8ed; }
.suggestion strong, .suggestion small { display: block; }
.suggestion small { color: var(--muted); margin-top: 2px; }
.selected-material-note { font-size: .87rem; color: var(--muted); margin-top: 6px; min-height: 20px; }
.line-items { margin-top: 14px; }
.line-item-actions { display: flex; gap: 6px; }
.summary-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 14px; padding: 13px 15px; background: #f5f8f4; border-radius: 12px; }
.summary-bar strong { font-size: 1.15rem; }

.timeline { display: grid; gap: 12px; }
.timeline-item { display: grid; grid-template-columns: 15px 1fr; gap: 10px; }
.timeline-dot { width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; background: var(--aaa-green-dark); }
.timeline-content { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.timeline-content p { margin: 3px 0; color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(10,18,22,.58); display: grid; place-items: center; padding: 20px; z-index: 100; }
.modal { width: min(100%, 880px); max-height: 90vh; overflow: hidden; background: white; border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; }
.modal-body { padding: 20px; overflow-y: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.detail-box { background: var(--soft); border-radius: 12px; padding: 12px; }
.detail-box small, .detail-box strong { display: block; }
.detail-box small { color: var(--muted); margin-bottom: 4px; }

.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: grid; gap: 10px; width: min(92vw, 390px); }
.toast { background: #162229; color: white; border-left: 5px solid var(--aaa-green); border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-left-color: #ff6262; }
.toast.warning { border-left-color: #ffbd42; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

.code-block { background: #122027; color: #d9e7eb; border-radius: 12px; padding: 14px; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }
.info-banner { border-left: 5px solid var(--info); background: #e9f4fc; border-radius: 12px; padding: 13px 15px; margin-bottom: 16px; }
.warning-banner { border-left: 5px solid var(--warning); background: #fff6e5; border-radius: 12px; padding: 13px 15px; margin-bottom: 16px; }

@media (max-width: 1080px) {
  .stat-grid, .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-menu { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .item-builder { grid-template-columns: 1fr 100px 100px; }
  .item-builder .add-item { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { min-height: 260px; padding: 30px; flex-direction: row; align-items: center; gap: 22px; background: linear-gradient(145deg, var(--aaa-green), #b6ff58); }
  .login-logo { width: 112px; height: 112px; }
  .brand-panel h1 { font-size: 2rem; }
  .login-card { padding: 32px 24px; }
  .app-view { display: block; }
  .topbar { padding: 10px 12px; }
  .menu-button { display: grid; place-items: center; }
  .top-brand { flex: 1; margin-left: 9px; }
  .top-brand img { display: none; }
  .top-brand small { display: none; }
  .user-chip div { display: none; }
  .sidebar { position: fixed; top: var(--topbar-height); left: 0; width: 270px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 30px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .workspace { padding: 20px 14px; }
  .page-head { flex-direction: column; }
  .category-explorer-head, .selected-category-head { align-items: stretch; flex-direction: column; }
  .category-explorer-head .button { width: 100%; }
  .selected-category-summary { text-align: left; justify-content: start; }
  .form-grid { grid-template-columns: 1fr; }
  .col-12, .col-8, .col-6, .col-4, .col-3 { grid-column: auto; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .brand-panel { display: block; }
  .brand-panel p { display: none; }
  .brand-panel h1 { font-size: 1.6rem; }
  .login-logo { width: 90px; height: 90px; margin-bottom: 15px; }
  .stat-grid, .category-grid { grid-template-columns: 1fr; }
  .top-brand strong { font-size: .9rem; }
  .top-actions { gap: 6px; }
  .button.small { padding: 6px 8px; }
  .item-builder { grid-template-columns: 1fr 1fr; }
  .item-builder .autocomplete, .item-builder .add-item { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: white; }
  .topbar, .sidebar, .page-head .actions, .toolbar, .button, .no-print { display: none !important; }
  .app-view, .workspace { display: block; padding: 0; }
  .page { display: none !important; }
  .page.active-page { display: block !important; }
  .panel, .table-wrap { box-shadow: none; border: 0; }
  table { min-width: 0; font-size: 10pt; }
  th, td { padding: 6px; }
}

/* v1.2 — correction workflow and stock receiving */
.nav-text { flex: 1; }
.nav-count {
  min-width: 25px;
  height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffcf56;
  color: #4d3500;
  display: inline-grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 900;
}
.nav-item.active .nav-count { background: #172127; color: white; }
.status-revision { background: #ffe6c5; color: #8b4d00; }
.revision-banner {
  border-left: 5px solid #e28a16;
  background: #fff3e2;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.revision-banner strong, .revision-banner small { display: block; }
.revision-banner p { margin: 5px 0; line-height: 1.6; }
.revision-banner small { color: var(--muted); }
.revision-reason-cell { min-width: 260px; max-width: 430px; line-height: 1.5; }
.stock-entry-layout { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.stock-preview {
  background: #f3f8ef;
  border: 1px solid #dce9d2;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.stock-preview > div { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.stock-preview small, .stock-preview strong, .stock-preview > span { display: block; }
.stock-preview small, .stock-preview > span { color: var(--muted); }
.stock-preview strong { margin-top: 4px; font-size: 1.05rem; }

@media (max-width: 1080px) {
  .stock-entry-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .stock-preview { grid-template-columns: 1fr; }
}


/* v1.3 — single-page material management, live balance preview, mobile/iOS PWA */
.material-management-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  margin-bottom: 18px;
}
.compact-management-card { height: 100%; }
.compact-management-card h2 { margin-bottom: 2px; }
.compact-management-card p { margin: 0; color: var(--muted); }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.step-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; background: #effbdc; color: #477b00; font-size: .8rem; font-weight: 900; white-space: nowrap; }
.compact-form { gap: 11px; }
.form-submit-row { justify-content: flex-end; margin-top: 2px; }
.materials-table-panel { margin-top: 0; }
.receipt-history { margin-top: 18px; }
.receipt-history .toolbar h2 { margin: 0 0 3px; }
.receipt-history .toolbar p { margin: 0; color: var(--muted); }
.row-actions { display: flex; flex-wrap: nowrap; gap: 6px; }
.compact-stock-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.selected-balance-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #d7e7ca;
  border-left: 5px solid var(--success);
  border-radius: 14px;
  background: #f3f9ef;
  display: grid;
  grid-template-columns: minmax(210px, 1.25fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
}
.selected-balance-card > div { padding: 10px 12px; border-radius: 11px; background: white; border: 1px solid var(--line); }
.selected-balance-card small, .selected-balance-card strong, .selected-balance-card span { display: block; }
.selected-balance-card small, .selected-balance-card span { color: var(--muted); }
.selected-balance-card strong { margin-top: 3px; font-size: 1.05rem; }
.selected-balance-card.empty { display: block; border-left-color: var(--info); background: #eef7fd; }
.selected-balance-card.empty > div { border: 0; background: transparent; padding: 2px; }
.selected-balance-card.has-shortage { border-left-color: var(--danger); background: #fff1f1; }
.selected-balance-title strong { font-size: 1.08rem; }

.install-guide { text-align: center; max-width: 560px; margin: 0 auto; }
.install-guide-icon { width: 96px; height: 96px; object-fit: contain; border-radius: 18px; box-shadow: 0 12px 28px rgba(20,31,38,.14); }
.install-guide h3 { margin: 14px 0 8px; }
.install-guide ol { text-align: left; line-height: 1.8; padding-left: 24px; }
.install-guide p { line-height: 1.7; }

@supports (padding: max(0px)) {
  .sidebar { padding-left: max(14px, env(safe-area-inset-left)); }
  .workspace { padding-right: max(28px, env(safe-area-inset-right)); padding-left: max(28px, env(safe-area-inset-left)); }
  .toast-region { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .modal-backdrop { padding-top: max(20px, env(safe-area-inset-top)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: max(20px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); }
}

@media (max-width: 1080px) {
  .material-management-grid { grid-template-columns: 1fr; }
  .selected-balance-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selected-balance-title { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .workspace { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .page-head .actions { width: 100%; }
  .page-head .actions .button { flex: 1 1 auto; }
  #installButton { min-height: 38px; padding: 6px 10px; font-size: .78rem; }
  .row-actions { position: sticky; right: 0; background: white; padding: 3px; }
}

@media (max-width: 620px) {
  .selected-balance-card, .compact-stock-preview { grid-template-columns: 1fr; }
  .selected-balance-title { grid-column: auto; }
  .section-title-row { flex-direction: column; }
  .form-submit-row .button { flex: 1 1 100%; }
  .top-actions .danger-outline { min-width: 42px; font-size: 0; padding: 7px; }
  .top-actions .danger-outline::after { content: "ออก"; font-size: .78rem; }
  .top-brand { min-width: 0; }
  .top-brand strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  #installButton { max-width: 96px; white-space: normal; line-height: 1.1; }
}

@media (hover: none) and (pointer: coarse) {
  .button, .nav-item, .icon-button, .menu-button { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 820px) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
  .login-view { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}


/* v1.4.1 — draft deletion integrity and mobile-safe actions */
.field { min-width: 0; }
.field > span { line-height: 1.35; overflow-wrap: anywhere; }
.field input, .field select, .field textarea { min-width: 0; }
.compact-management-card { min-width: 0; overflow: hidden; }
.quick-material-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.quick-material-name { grid-column: 1 / -1; }
.quick-material-category { grid-column: span 1; }
.quick-material-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 2px; }
.system-code-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f9fa;
}
.system-code-note span { color: var(--muted); font-weight: 700; }
.system-code-note strong { font-variant-numeric: tabular-nums; }

@media (max-width: 1320px) {
  .quick-material-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-material-name, .quick-material-actions { grid-column: 1 / -1; }
  .quick-material-category { grid-column: span 1; }
}

@media (max-width: 820px) {
  .material-management-grid { gap: 14px; }
  .compact-management-card { padding: 16px; }
  .quick-material-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-material-name, .quick-material-actions { grid-column: 1 / -1; }
  .quick-material-category { grid-column: span 1; }
  .modal { width: min(100%, 760px); }
  .modal-body { padding: 16px; }
  .approval-table table { min-width: 820px; }
}

@media (max-width: 620px) {
  .info-banner, .warning-banner, .revision-banner { font-size: .92rem; line-height: 1.55; }
  .quick-material-form { grid-template-columns: minmax(0, 1fr); }
  .quick-material-name, .quick-material-category, .quick-material-actions { grid-column: auto; }
  .quick-material-actions { display: grid; grid-template-columns: 1fr; }
  .quick-material-actions .button { width: 100%; }
  .compact-management-card { padding: 14px; border-radius: 16px; }
  .section-title-row { gap: 8px; margin-bottom: 14px; }
  .section-title-row h2 { font-size: 1.25rem; }
  .modal-backdrop {
    padding: max(8px, env(safe-area-inset-top)) 0 0;
    place-items: end center;
  }
  .modal {
    width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    border-radius: 20px 20px 0 0;
  }
  .modal-header { padding: 14px 16px; }
  .modal-header h2 { font-size: 1.25rem; line-height: 1.35; }
  .modal-body { padding: 14px 12px max(16px, env(safe-area-inset-bottom)); }
  .detail-grid { grid-template-columns: 1fr; }
  .modal .actions { width: 100%; }
  .modal .actions .button { flex: 1 1 100%; width: 100%; }
  .system-code-note { align-items: flex-start; flex-direction: column; }
  .table-wrap { border-radius: 12px; }
  .approval-table table { min-width: 760px; }
  .page-head { margin-bottom: 16px; }
  .workspace { padding-top: 16px; }
}

@media (max-width: 390px) {
  .workspace { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .compact-management-card, .panel { padding: 12px; }
  .top-brand strong { max-width: 125px; }
}

/* v1.5 — Multi-Project / House Inventory */
.project-switcher {
  min-width: 260px;
  display: grid;
  gap: 2px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f8fbf5;
}
.project-switcher > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1;
}
.project-switcher select {
  min-width: 0;
  max-width: 310px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  padding: 0;
}
.project-switcher.project-closed { background: #f4f1fa; border-color: #d8cce9; }
.project-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 17px;
  margin-bottom: 18px;
  border: 1px solid #d9eacb;
  border-left: 5px solid var(--aaa-green-dark);
  border-radius: 14px;
  background: #f5fbef;
}
.project-context-banner.closed { border-left-color: #715596; border-color: #ddd3e9; background: #f7f4fb; }
.project-context-banner span,
.project-context-banner strong,
.project-context-banner small { display: block; }
.project-context-banner > div > span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.project-context-banner > div > strong { font-size: 1.15rem; margin-top: 2px; }
.project-context-banner > div > small { color: var(--muted); margin-top: 3px; }
.scope-toggle { display: inline-flex; gap: 6px; padding: 4px; border-radius: 13px; background: #e9eef0; }
.scope-toggle .button { min-height: 36px; }
.project-create-panel { margin-bottom: 0; }
.project-clone-option {
  padding: 12px 14px;
  border: 1px solid #dbe8d2;
  border-radius: 12px;
  background: #f6fbf2;
  color: var(--ink);
}
.active-project-row { background: #f6ffe9; box-shadow: inset 5px 0 0 var(--aaa-green); }
.active-project-row:hover { background: #f1ffdc; }
.project-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.project-card h3 { margin: 5px 0; }
.project-card p { color: var(--muted); margin: 0; }
.project-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.project-card-stats > div { background: var(--soft); border-radius: 10px; padding: 10px; }
.project-card-stats small, .project-card-stats strong { display: block; }
.project-card-stats small { color: var(--muted); }

@media (max-width: 1280px) {
  .top-actions { gap: 8px; }
  .project-switcher { min-width: 210px; }
  .project-switcher select { max-width: 230px; }
  .user-chip { max-width: 220px; }
  .project-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --topbar-height: calc(126px + env(safe-area-inset-top)); }
  .topbar { flex-wrap: wrap; align-content: center; row-gap: 8px; }
  .top-brand { flex: 1; }
  .top-actions { width: 100%; order: 3; }
  .project-switcher { flex: 1; min-width: 0; }
  .project-switcher select { max-width: none; width: 100%; }
  .project-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --topbar-height: calc(138px + env(safe-area-inset-top)); }
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .menu-button { grid-column: 1; grid-row: 1; }
  .top-brand { grid-column: 2; grid-row: 1; }
  .top-actions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .project-switcher { min-width: 0; }
  .project-switcher select { font-size: .9rem; }
  .project-context-banner { align-items: flex-start; }
  .project-create-panel .col-6,
  .project-create-panel .col-3 { grid-column: span 12; }
}

@media (max-width: 620px) {
  :root { --topbar-height: calc(184px + env(safe-area-inset-top)); }
  .top-actions { grid-template-columns: 1fr auto auto; }
  .project-switcher { grid-column: 1 / -1; }
  #installButton { grid-column: 1; max-width: none; }
  .user-chip { grid-column: 2; max-width: 155px; }
  #logoutButton { grid-column: 3; }
  .project-context-banner { flex-direction: column; }
  .scope-toggle { width: 100%; }
  .scope-toggle .button { flex: 1; }
  .project-create-panel { padding: 14px; }
}

@media (max-width: 390px) {
  :root { --topbar-height: calc(190px + env(safe-area-inset-top)); }
  .top-actions { gap: 6px; }
  .user-chip { max-width: 135px; }
  .user-chip small { display: none; }
  .project-switcher { padding: 5px 8px; }
}

/* v1.6 Cloud / Push status */
.cloud-status{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:#fff3d6;color:#8a5a00;font-size:.78rem;font-weight:800;white-space:nowrap}
.cloud-status.online{background:#e7f8ed;color:#14783b}
.cloud-status.online::before{content:"";width:8px;height:8px;border-radius:50%;background:#20a653;box-shadow:0 0 0 3px rgba(32,166,83,.14)}
.config-warning{padding:14px 16px;border-radius:14px;border-left:5px solid #d79400;background:#fff4da;color:#6d4800;display:flex;flex-direction:column;gap:4px}
.config-warning span{font-size:.9rem;line-height:1.45}
#pushButton[data-push-active="1"]{background:#e8f8ee;border-color:#b8e3c7;color:#14783b}
@media (max-width: 720px){.cloud-status{order:5;width:100%;justify-content:center}.top-actions #pushButton{flex:1}.top-actions #installButton{flex:1}}

/* v1.6 top bar responsive refinement */
.user-chip[role="button"]{cursor:pointer}
.user-chip[role="button"]:focus-visible{outline:3px solid rgba(130,245,0,.35);outline-offset:2px}
@media (max-width:1280px){.cloud-status{display:none}.top-actions{min-width:0}.project-switcher{max-width:290px}}
@media (max-width:980px){.project-switcher{max-width:none}}
@media (max-width:820px){
  .top-actions{grid-template-columns:minmax(0,1fr) auto auto auto}
  .project-switcher{grid-column:1 / -1;grid-row:1}
  #pushButton{grid-column:1;grid-row:2;min-width:0}
  #installButton{grid-column:2;grid-row:2}
  .user-chip{grid-column:3;grid-row:2}
  #logoutButton{grid-column:4;grid-row:2}
}
@media (max-width:620px){
  .top-actions{grid-template-columns:minmax(0,1fr) auto auto}
  #pushButton{grid-column:1;grid-row:2}
  #installButton{display:none!important}
  .user-chip{grid-column:2;grid-row:2}
  #logoutButton{grid-column:3;grid-row:2}
}


/* v1.6.4 — Actual stock visibility upgrade */
.stock-actual-head {
  background: #e9f8ef;
  color: #0b6b35;
  font-weight: 950;
  box-shadow: inset 3px 0 0 #20a653, inset -3px 0 0 rgba(32, 166, 83, .18);
  min-width: 108px;
}
.stock-actual-cell {
  background: linear-gradient(180deg, rgba(235, 249, 240, .72), rgba(255, 255, 255, .96));
  box-shadow: inset 3px 0 0 rgba(32, 166, 83, .12), inset -3px 0 0 rgba(32, 166, 83, .08);
  min-width: 108px;
}
.stock-actual-value,
.stock-actual-total span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.08rem;
  line-height: 1;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.stock-actual-cell.stock-ok .stock-actual-value {
  color: #087038;
  background: #dcf6e6;
  border-color: #a9dfbd;
  box-shadow: 0 3px 9px rgba(8, 112, 56, .12);
}
.stock-actual-cell.stock-low .stock-actual-value {
  color: #8a5700;
  background: #fff0c7;
  border-color: #f2cf76;
  box-shadow: 0 3px 9px rgba(138, 87, 0, .12);
}
.stock-actual-cell.stock-out .stock-actual-value {
  color: #a52222;
  background: #fde3e3;
  border-color: #efb3b3;
  box-shadow: 0 3px 9px rgba(165, 34, 34, .12);
}
tbody tr:hover .stock-actual-cell {
  background: #f0fbf4;
}
.stock-actual-total {
  background: #ddf4e6 !important;
  box-shadow: inset 3px 0 0 #20a653, inset -3px 0 0 rgba(32, 166, 83, .18);
}
.stock-actual-total span {
  color: #075f30;
  background: #c8edd6;
  border-color: #8fd1a7;
}
@media (max-width: 720px) {
  .stock-actual-head,
  .stock-actual-cell { min-width: 96px; }
  .stock-actual-value,
  .stock-actual-total span { font-size: 1rem; min-width: 52px; min-height: 32px; }
}
@media print {
  .stock-actual-head,
  .stock-actual-cell,
  .stock-actual-total { background: #fff !important; box-shadow: none !important; }
  .stock-actual-value,
  .stock-actual-total span { color: #000 !important; background: #fff !important; border-color: #777 !important; box-shadow: none !important; }
}


/* v1.6.6 — Labor & Service Cost Module */
.cost-summary-strip {
  margin-top: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid #cde9d8;
  background: linear-gradient(135deg, #f1fbf4, #fbfff4); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  box-shadow: 0 10px 26px rgba(20, 90, 48, .07);
}
.cost-summary-strip > div { display: grid; gap: 2px; min-width: 160px; }
.cost-summary-strip span { color: var(--muted); font-size: .86rem; font-weight: 700; }
.cost-summary-strip strong { font-size: 1.16rem; color: #126b3c; }
.cost-summary-strip .button { margin-left: auto; }
.cost-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.boq-summary-card {
  margin: 18px 0; padding: 18px 20px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  border: 1px solid #cde2d3; border-radius: 18px; background: linear-gradient(135deg, #0e3017, #1e5631); color: white; box-shadow: var(--shadow);
}
.boq-summary-card > div { display: grid; gap: 4px; min-width: 210px; }
.boq-summary-card span { color: #cfe6d5; font-size: .88rem; }
.boq-summary-card strong { font-size: 1.45rem; }
.boq-summary-card .boq-plus, .boq-summary-card .boq-equals { font-size: 1.8rem; font-weight: 900; color: var(--aaa-green); }
.boq-summary-card .boq-total { padding: 10px 16px; border-radius: 13px; background: rgba(130,245,0,.13); }
.costs-table-panel { margin-top: 0; }
.cost-filter-grid { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cost-table-wrap table { min-width: 1780px; }
.cost-type-badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: .8rem; font-weight: 900; white-space: nowrap; }
.cost-type-labor { background: #e8f2ff; color: #175a99; }
.cost-type-service { background: #f3eaff; color: #70439a; }
.cost-type-transport { background: #fff0d4; color: #8b5900; }
.cost-type-labor_service { background: #e4f6e9; color: #17693a; }
.cost-status-unpaid { background: #eceff1; color: #52616a; }
.cost-status-partial { background: #fff0c9; color: #805700; }
.cost-status-paid { background: #dff3e6; color: #1d6f3e; }
.cost-paid-cell { color: #1769aa; font-weight: 800; }
.cost-remaining-cell { color: #9b5d00; background: #fffaf0; }
.cost-remaining-cell.is-paid { color: #1d6f3e; background: #effaf2; }
.cost-row-actions { flex-wrap: nowrap; }
.payment-item-summary { display: grid; gap: 5px; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; background: #eef8f1; border-left: 5px solid var(--success); }
.payment-item-summary span { color: var(--muted); }
.payment-voided { opacity: .62; text-decoration: line-through; }

@media (max-width: 1120px) {
  .cost-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cost-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cost-summary-strip > div { min-width: 0; }
  .cost-summary-strip .button { grid-column: 1 / -1; width: 100%; margin-left: 0; }
  .cost-stat-grid, .cost-filter-grid { grid-template-columns: 1fr; }
  .boq-summary-card { align-items: stretch; justify-content: flex-start; gap: 10px; }
  .boq-summary-card > div { min-width: 100%; }
  .boq-summary-card .boq-plus, .boq-summary-card .boq-equals { display: none; }
}


/* v1.6.6.1 — Professional Withdrawal Print Layout Fix */
.print-root { display: none; }

@media print {
  @page { size: A4 landscape; margin: 8mm; }

  body.withdrawal-print-mode {
    margin: 0 !important;
    background: #fff !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.withdrawal-print-mode > *:not(#printRoot) { display: none !important; }
  body.withdrawal-print-mode #printRoot {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .withdrawal-print-sheet,
  .withdrawal-print-sheet * { box-sizing: border-box; }
  .withdrawal-print-sheet {
    width: 100%;
    min-height: 190mm;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #111;
    font-family: Tahoma, "Noto Sans Thai", Arial, sans-serif;
    font-size: 9pt;
    line-height: 1.35;
  }
  .withdrawal-print-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10mm;
    align-items: center;
    padding: 0 0 4mm;
    border-bottom: 2px solid #123b20;
  }
  .withdrawal-print-brand { display: flex; align-items: center; gap: 4mm; }
  .withdrawal-print-brand img { width: 19mm; height: 19mm; object-fit: contain; border-radius: 3mm; }
  .withdrawal-print-brand div { display: grid; gap: 1mm; }
  .withdrawal-print-brand strong { font-size: 15pt; letter-spacing: .04em; color: #123b20; }
  .withdrawal-print-brand span { color: #52616a; font-size: 8.5pt; }
  .withdrawal-print-title { text-align: right; display: grid; justify-items: end; gap: 1.2mm; }
  .withdrawal-print-title h1 { margin: 0; font-size: 18pt; color: #111; }
  .withdrawal-print-title div { font-size: 9.5pt; }
  .withdrawal-print-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28mm;
    padding: 1.3mm 3mm;
    border-radius: 99mm;
    border: 1px solid #9aa5aa;
    font-weight: 800;
    font-size: 8.5pt;
  }
  .withdrawal-print-status.is-approved { background: #e3f5e8; border-color: #72bc87; color: #176b36; }
  .withdrawal-print-status.is-pending { background: #fff3d3; border-color: #e2bd55; color: #745000; }
  .withdrawal-print-status.is-revision { background: #fff0dc; border-color: #e5a74b; color: #7c4e00; }
  .withdrawal-print-status.is-rejected,
  .withdrawal-print-status.is-cancelled { background: #fde8e8; border-color: #db8585; color: #932c2c; }

  .withdrawal-print-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2mm;
    margin: 4mm 0 3mm;
  }
  .withdrawal-print-meta > div {
    min-height: 13mm;
    padding: 2.2mm 3mm;
    border: 1px solid #cbd4d8;
    border-radius: 2mm;
    display: grid;
    align-content: center;
    gap: .8mm;
    background: #f8faf9;
  }
  .withdrawal-print-meta .print-meta-wide { grid-column: span 2; }
  .withdrawal-print-meta span { color: #66747b; font-size: 7.5pt; }
  .withdrawal-print-meta strong { font-size: 9pt; overflow-wrap: anywhere; }

  .withdrawal-print-alert {
    margin: 0 0 3mm;
    padding: 2.2mm 3mm;
    border-left: 1.5mm solid #d18b18;
    background: #fff8e9;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 3mm;
    align-items: center;
    border-radius: 1.5mm;
  }
  .withdrawal-print-alert.is-danger { border-left-color: #b63b3b; background: #fff0f0; }
  .withdrawal-print-alert small { color: #66747b; white-space: nowrap; }

  .withdrawal-print-table-wrap { width: 100%; overflow: visible !important; border: 1px solid #89969c; border-radius: 0; }
  .withdrawal-print-table { width: 100%; min-width: 0 !important; border-collapse: collapse; table-layout: fixed; font-size: 8.5pt; }
  .withdrawal-print-table .col-seq { width: 5%; }
  .withdrawal-print-table .col-code { width: 10%; }
  .withdrawal-print-table .col-category { width: 15%; }
  .withdrawal-print-table .col-item { width: 27%; }
  .withdrawal-print-table .col-qty { width: 8%; }
  .withdrawal-print-table .col-unit { width: 8%; }
  .withdrawal-print-table .col-price { width: 13%; }
  .withdrawal-print-table .col-total { width: 14%; }
  .withdrawal-print-table thead { display: table-header-group; }
  .withdrawal-print-table tfoot { display: table-row-group; }
  .withdrawal-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  .withdrawal-print-table th,
  .withdrawal-print-table td {
    padding: 2mm 2.2mm;
    border: 1px solid #aab4b8;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }
  .withdrawal-print-table th { background: #e8f2eb !important; color: #153d23; text-align: center; font-weight: 900; }
  .withdrawal-print-table tfoot td { background: #f1f5f2 !important; font-size: 9.5pt; font-weight: 900; }
  .withdrawal-print-table tfoot td:first-child { text-align: right; }
  .withdrawal-print-table .print-code { font-family: Consolas, monospace; font-size: 8pt; }
  .print-center { text-align: center !important; }
  .print-number { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

  .withdrawal-print-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2mm;
    min-height: 11mm;
    margin: 3mm 0;
    padding: 2.2mm 3mm;
    border: 1px solid #cbd4d8;
    border-radius: 2mm;
  }
  .withdrawal-print-signatures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5mm;
    margin-top: 7mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .withdrawal-print-signatures > div { min-height: 27mm; text-align: center; display: grid; align-content: end; gap: 1mm; }
  .withdrawal-print-signatures .signature-line { border-top: 1px solid #222; margin: 0 4mm 1.5mm; }
  .withdrawal-print-signatures strong { font-size: 8.5pt; }
  .withdrawal-print-signatures span { font-size: 8pt; min-height: 4mm; }
  .withdrawal-print-signatures small { color: #4e5b61; font-size: 7.5pt; }
  .withdrawal-print-footer {
    display: flex;
    justify-content: space-between;
    gap: 10mm;
    margin-top: 5mm;
    padding-top: 2mm;
    border-top: 1px solid #b8c1c5;
    color: #6a767c;
    font-size: 7pt;
  }
}

/* v1.7.0 Controlled New Material Request */
.material-request-form{margin-top:18px}.urgent-note{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;background:#fff1e8;color:#b54708;font-size:12px;font-weight:800}.revision-callout{margin-top:16px;padding:14px 16px;border-left:5px solid #f59e0b;background:#fff7e6;border-radius:10px}.revision-callout p,.note-box p{margin:6px 0 0}.note-box{margin-top:14px;padding:14px 16px;background:#f7faf8;border:1px solid #dce9df;border-radius:10px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-grid>div{padding:12px;background:#f8faf9;border-radius:10px}.detail-grid span{display:block;font-size:12px;color:#63756a;margin-bottom:4px}@media(max-width:700px){.detail-grid{grid-template-columns:1fr}}


/* v1.7.1 Material Request UX Polish */
.material-request-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.request-stat{appearance:none;border:1px solid #d7e5db;background:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;color:#263d30;transition:.18s ease;box-shadow:0 4px 14px rgba(23,54,35,.05)}.request-stat:hover,.request-stat.active{border-color:#63cc2f;background:#f2ffe9;transform:translateY(-1px)}.request-stat span{font-weight:800}.request-stat strong{font-size:22px;color:#13813c}.material-request-toolbar{gap:16px;align-items:flex-end}.toolbar-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.toolbar-controls .search-box{min-width:320px}.toolbar-controls select{height:42px;border:1px solid #d5e2d8;border-radius:10px;padding:0 12px;background:#fff;color:#1f3428}.status-badge.status-pending{background:#fff4cc;color:#8a6200}.status-badge.status-revision{background:#e7f1ff;color:#1b5ca8}.status-badge.status-approved{background:#dcf7e6;color:#16733a}@media(max-width:900px){.material-request-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar-controls{width:100%}.toolbar-controls .search-box{min-width:0;flex:1 1 220px}}@media(max-width:520px){.material-request-stats{grid-template-columns:1fr 1fr}.request-stat{padding:11px 12px}.request-stat strong{font-size:18px}}


/* v1.7.2a Production UI Polish */
.card-heading h2 { margin-bottom: 0; }
.admin-version-badge { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid #cfe3d2; border-radius:14px; background:#f2faf3; color:#31543a; }
.admin-version-badge span { font-size:.78rem; }
.admin-version-badge strong { font-size:1rem; color:#0e3017; }

/* v1.8.0 Phase 1 — approval center, project search, mobile-first foundation */
.project-switcher{display:grid;grid-template-columns:minmax(190px,1fr) minmax(170px,1fr);gap:8px;align-items:end}
.project-switcher>span{grid-column:1/-1}
.project-search-input{min-width:220px;border:1px solid #cfd9d1;border-radius:10px;padding:9px 11px;font:inherit;background:#fff}
.approval-center-withdrawals{margin-bottom:18px;border-left:4px solid #1f6a36}
.balance-negative,.stock-out .stock-actual-value{color:#b42318!important;font-weight:800}
@media (max-width: 820px){
  .topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .top-actions{gap:8px}.project-switcher{grid-template-columns:1fr;width:100%}.project-switcher>span{grid-column:auto}.project-search-input,.project-switcher select{width:100%;min-width:0;font-size:16px}
  .workspace{padding:14px 12px calc(90px + env(safe-area-inset-bottom))}.page-head{align-items:stretch}.page-head .actions{width:100%}.page-head .actions .button{flex:1;min-height:44px}
  input,select,textarea{font-size:16px!important}.modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0;margin:0;padding-bottom:env(safe-area-inset-bottom)}
  .modal-body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.modal .actions{position:sticky;bottom:0;background:#fff;padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:5}
  .table-wrap{border-radius:12px}.button{min-height:44px}.nav-item{min-height:48px}
}

/* ============================================================
   AAA HOUSE ERP v2.1.0 — Project Package / Excel Table Edition
   ============================================================ */
.project-package-panel{margin-top:18px}
.project-package-info-grid{margin-bottom:16px}
.package-source-panel{background:#f5f9f2;border:1px solid #dce8d5;border-radius:18px;padding:16px;margin:10px 0 18px}
.package-source-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.package-source-title span{color:var(--muted,#6d7d75);font-size:.9rem}
.package-source-actions{display:flex;flex-wrap:wrap;gap:10px}
.package-source-detail{display:flex;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed #c9d9c3}
.package-source-detail select{min-width:320px;max-width:100%}
.package-source-detail span{color:#607067;word-break:break-all}
.package-table-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:18px 0 10px}
.package-table-head h3{margin:0 0 4px}.package-table-head p{margin:0;color:var(--muted,#6d7d75)}
.project-package-table-wrap{border:1px solid #dce5df;border-radius:16px;max-height:560px;background:#fff}
.project-package-table{min-width:1460px;border-collapse:separate;border-spacing:0}
.project-package-table thead th{position:sticky;top:0;z-index:3;background:#f1f5f3}
.project-package-table tfoot td{position:sticky;bottom:0;z-index:2;background:#f3faed;border-top:2px solid #b8d99f}
.project-package-table td{padding:7px 6px;vertical-align:middle}
.package-row-number{text-align:center;font-weight:700;color:#53635b}
.package-cell{width:100%;min-width:110px;border:1px solid #d6e0da;border-radius:8px;padding:9px 10px;background:#fff;font:inherit}
.package-cell:focus{outline:2px solid #79d400;outline-offset:1px;border-color:#79d400}
.package-code{min-width:120px}.package-name{min-width:330px}.package-number{min-width:110px;text-align:right}
.package-row-total{font-weight:700;white-space:nowrap}
.project-package-submit{justify-content:flex-end;margin-top:16px}
.project-package-note{margin-top:14px}
.revision-package-panel{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#fff6dc;border:1px solid #efcc6c;border-radius:16px;padding:14px 16px;margin-top:18px}
.revision-package-panel p{margin:4px 0 0;color:#796224}.revision-package-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.project-approval-policy{margin-top:18px}
.project-package-approval-table{max-height:440px;border:1px solid #dde7e1;border-radius:14px}
.project-package-approval-table thead th{position:sticky;top:0;background:#f1f5f3;z-index:2}

@media(max-width:900px){
  .package-source-title,.package-table-head,.revision-package-panel{align-items:stretch;flex-direction:column}
  .package-source-detail{align-items:stretch;flex-direction:column}
  .package-source-detail select{min-width:0;width:100%}
  .revision-package-list{justify-content:flex-start}
}


/* AAA HOUSE ERP v2.1.1 — Custom Category Hotfix */
.package-category-input,
input[list$="CategorySuggestions"],
input[list="projectPackageCategorySuggestions"] {
  min-width: 170px;
}
.package-category-input::placeholder,
input[list$="CategorySuggestions"]::placeholder {
  color: #7a8781;
}


/* ============================================================
   AAA HOUSE ERP v2.1.7 — Negative Stock Approval
   ============================================================ */
.project-switcher{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3px;
  min-width:330px;
  max-width:430px;
  overflow:visible;
}
.project-switcher>span{grid-column:auto}
.project-combobox{position:relative;min-width:0}
.project-search-input{
  width:100%;
  min-width:0;
  height:40px;
  padding:8px 44px 8px 12px;
  border:1px solid #bfcfc3;
  border-radius:11px;
  outline:none;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:800;
  text-overflow:ellipsis;
}
.project-search-input:focus{border-color:var(--aaa-green);box-shadow:0 0 0 3px rgba(114,238,0,.16)}
.project-search-toggle{
  position:absolute;
  top:4px;
  right:4px;
  width:34px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  cursor:pointer;
}
.project-search-toggle:hover,.project-search-toggle[aria-expanded="true"]{background:#edf6e8}
.project-search-dropdown{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  right:0;
  z-index:3000;
  display:grid;
  gap:4px;
  max-height:min(340px,60vh);
  overflow-y:auto;
  padding:7px;
  border:1px solid #d5e1d7;
  border-radius:13px;
  background:#fff;
  box-shadow:0 16px 40px rgba(18,38,27,.22);
}
.project-search-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:0;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.project-search-option:hover,.project-search-option.is-highlighted{background:#effbe8}
.project-search-option.is-active{background:#e8ffd8;box-shadow:inset 4px 0 0 var(--aaa-green)}
.project-search-option-main{min-width:0;display:grid;gap:2px}
.project-search-option-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.project-search-option-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.72rem}
.project-search-option-status{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:#eef3ef;color:#52675a;font-size:.68rem;font-weight:800}
.project-search-option-status.is-closed{background:#f2edf8;color:#72578a}
.project-search-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:.86rem}
@media(max-width:1280px){.project-switcher{min-width:280px;max-width:340px}}
@media(max-width:820px){
  .project-switcher{width:100%;min-width:0;max-width:none}
  .project-search-input{font-size:16px}
  .project-search-dropdown{position:fixed;top:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-height:55vh;border-radius:16px;box-shadow:0 18px 52px rgba(9,28,17,.3)}
  .project-search-option{min-height:48px}
}


/* ============================================================
   AAA HOUSE ERP v2.1.8 — Project Package Category Workspace
   ============================================================ */
.package-view-toolbar{display:grid;grid-template-columns:minmax(240px,360px) minmax(260px,1fr) auto auto;gap:12px;align-items:end;background:#f6faf4;border:1px solid #dce8d5;border-radius:14px;padding:12px 14px;margin:0 0 12px}
.package-view-filter{display:grid;gap:6px}.package-view-filter>span{font-weight:700;color:#34433b;font-size:.9rem}.package-view-filter select{width:100%;min-height:42px}
.package-zero-filter{display:flex;align-items:center;gap:9px;min-height:42px;font-weight:600;color:#405047}.package-zero-filter input{width:18px;height:18px;accent-color:#66cc00}
.package-view-actions{display:flex;gap:8px;flex-wrap:wrap}.package-view-summary{white-space:nowrap;color:#607067;padding-bottom:9px}.package-view-summary strong{color:#102029}
.package-category-group-row td{padding:0!important;background:#edf7e7;border-top:1px solid #cfe3c4;border-bottom:1px solid #cfe3c4}
.package-category-toggle{width:100%;border:0;background:transparent;display:grid;grid-template-columns:24px minmax(220px,1fr) auto auto;align-items:center;gap:12px;padding:11px 14px;text-align:left;cursor:pointer;color:#17321f;font:inherit}
.package-category-toggle:hover{background:#e5f3dc}.package-category-chevron{font-size:1.2rem;color:#4c8d2b}.package-category-toggle>span:nth-of-type(2){color:#617068;font-size:.88rem}.package-category-total{font-weight:800;color:#087333!important;white-space:nowrap}
.project-package-table tbody tr[data-package-row]:hover td{background:#fbfdf9}

@media(max-width:1100px){
  .package-view-toolbar{grid-template-columns:1fr 1fr}.package-view-actions{justify-content:flex-start}.package-view-summary{text-align:right}
}
@media(max-width:700px){
  .package-view-toolbar{grid-template-columns:1fr}.package-view-summary{text-align:left;padding-bottom:0}.package-category-toggle{grid-template-columns:22px minmax(150px,1fr) auto}.package-category-total{grid-column:2/4}.package-zero-filter{align-items:flex-start}
}

/* AAA HOUSE v2.1.9 — Smart Excel BOQ import */
#packageExcelPanel{flex-wrap:wrap;align-items:center}
.excel-import-hint{width:100%;color:#607480;font-size:.88rem;margin-top:2px}
.excel-import-summary{width:100%;display:grid;gap:4px;margin-top:8px;padding:12px 14px;border-radius:14px;border:1px solid #b9dec4;background:#effaf2;color:#174d2a}
.excel-import-summary.warning{border-color:#efd28a;background:#fff8e6;color:#70510a}
.excel-import-summary>strong{font-weight:900}
.excel-import-summary>span{line-height:1.55}
.excel-import-summary>small{color:#65756c;line-height:1.45}
@media(max-width:760px){.excel-import-summary{font-size:.9rem}.excel-import-hint{font-size:.82rem}}


/* AAA HOUSE v2.1.9.2 — Fast Excel progress */
.excel-import-progress{width:100%;display:grid;gap:8px;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid #b7d9c1;background:#f4fbf6;color:#153c24}
.excel-import-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.excel-import-progress-head strong{font-weight:900}.excel-import-progress-head span{font-weight:800;color:#08733a;white-space:nowrap}
.excel-import-progress-track{height:10px;overflow:hidden;border-radius:999px;background:#dfece3}.excel-import-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#51c900,#168d4b);transition:width .22s ease}
.excel-import-progress small{color:#617269;line-height:1.45}
@media(max-width:760px){.excel-import-progress-head{align-items:flex-start}.excel-import-progress{font-size:.88rem}}