:root {
  --ink: #172431;
  --muted: #667789;
  --line: #dbe3e9;
  --page: #f3f6f8;
  --panel: #ffffff;
  --nav: #12364b;
  --nav-deep: #0c2737;
  --green: #18794e;
  --green-soft: #e7f5ed;
  --blue: #2563a8;
  --blue-soft: #e9f2fb;
  --gold: #b8831f;
  --gold-soft: #fff6df;
  --red: #b42318;
  --red-soft: #fcebea;
  --shadow: 0 10px 30px rgba(21, 43, 57, .08);
}

.pos-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:20px}.pos-scan{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:18px 0}.pos-scan label{margin:0}.pos-product-list{display:grid;gap:8px;max-height:420px;overflow:auto}.pos-product{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.pos-product:hover{border-color:var(--green);background:#f7fbf8}.pos-product span{display:grid;gap:3px}.pos-product span:last-child{text-align:right}.pos-product small,.pos-cart-line small{color:var(--muted)}.low-stock{color:#b45309!important;font-weight:700}.pos-cart-lines{display:grid;gap:10px;min-height:180px}.pos-cart-line{display:grid;grid-template-columns:1fr auto minmax(90px,auto);align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.pos-cart-line>div:first-child{display:grid;gap:3px}.quantity-control{display:flex;align-items:center;gap:9px}.quantity-control button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.pos-total{display:flex;justify-content:space-between;align-items:center;margin:18px 0;padding:16px 0;border-top:2px solid var(--ink);font-size:1.15rem}.pos-total strong{font-size:1.45rem}.pos-checkout{width:100%;margin-top:14px}.pos-history{margin-top:20px}.receipt{width:min(360px,80vw);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#111}.receipt h2,.receipt p{text-align:center}.receipt hr{border:0;border-top:1px dashed #555;margin:14px 0}.receipt-line,.receipt-total{display:flex;justify-content:space-between;gap:18px;margin:8px 0}.receipt-total{font-size:1.2rem}.compact{grid-template-columns:1fr 1fr}
.warehouse-summary{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:12px;margin:18px 0 24px}.warehouse-summary article{display:grid;gap:4px;padding:15px;border:1px solid var(--line);border-radius:12px;background:#f8faf9}.warehouse-summary article span{color:var(--muted);font-size:.82rem}.warehouse-summary article strong{font-size:1.55rem}.warehouse-summary>small{grid-column:1/-1;color:var(--muted)}.warehouse-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.warehouse-company{min-width:0}.warehouse-company-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.warehouse-company-head h3,.warehouse-company-head p{margin:0}.warehouse-card{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden}.warehouse-card summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px;cursor:pointer}.warehouse-card summary>span:first-child{display:grid;gap:4px}.warehouse-card summary small{color:var(--muted)}.warehouse-locations{display:grid;gap:8px;padding:0 14px 14px}.warehouse-location{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:start;padding:10px;border-radius:9px;background:#f7f9f8}.warehouse-location>div{display:grid;gap:2px}.warehouse-location small{color:var(--muted);overflow-wrap:anywhere}.location-type{text-transform:uppercase;font-size:.68rem;font-weight:800;color:var(--green)}
.payroll-actions,.payroll-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.payroll-actions input{width:auto}.payroll-guard{padding:12px 14px;border-radius:10px;background:#edf7f0;color:#27563a;margin:16px 0}.payroll-summary{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin:16px 0}.payroll-summary article{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:10px}.payroll-summary span{color:var(--muted);font-size:.8rem}.payroll-summary strong{font-size:1.2rem}.payroll-toolbar{justify-content:flex-end;margin-bottom:14px}.payroll-table{min-width:1180px}.payroll-table td:first-child,.payroll-table td:nth-child(2){min-width:180px}.payroll-table td:first-child,.payroll-table td:nth-child(2){display:table-cell}.payroll-table td:first-child small,.payroll-table td:nth-child(2) small{display:block;color:var(--muted);margin-top:3px}.payroll-table input{width:90px;padding:8px}
@media(max-width:900px){.pos-grid,.warehouse-directory{grid-template-columns:1fr}.pos-product-list{max-height:300px}.warehouse-summary,.payroll-summary{grid-template-columns:1fr}.payroll-actions{align-items:stretch}.payroll-actions>*{flex:1}}
@media print{body *{visibility:hidden!important}#posReceiptDialog,#posReceiptDialog *{visibility:visible!important}#posReceiptDialog{position:absolute;inset:0;border:0;margin:0;padding:16px}body.printing-payslip #posReceiptDialog,body.printing-payslip #posReceiptDialog *{visibility:hidden!important}body.printing-payslip #payslipDialog,body.printing-payslip #payslipDialog *{visibility:visible!important}body.printing-payslip #payslipDialog{position:absolute;inset:0;width:100%;max-width:none;max-height:none;border:0;margin:0;padding:0}.no-print{display:none!important}}

.trip-live-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.trip-live-grid article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #f8fbfa;
}

.trip-live-grid span { display: block; color: var(--muted); font-size: .78rem; }
.trip-live-grid strong { display: block; margin-top: 6px; font-size: 1rem; }
.trip-route-canvas { width: 100%; height: 240px; border: 1px solid var(--line); border-radius: 14px; background: #f4f8f7; }
.trip-event-list { display: grid; gap: 8px; margin-top: 14px; max-height: 320px; overflow: auto; }
.trip-event { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.tracking-warning { color: #9a6700; font-weight: 700; }
.gap-estimate { margin-top: 14px; padding: 12px; border: 1px solid #e5c56d; border-radius: 10px; background: var(--gold-soft); }
.gap-estimate strong, .gap-estimate span { display: block; }
.gap-estimate span { margin-top: 4px; color: var(--muted); font-size: .84rem; }

@media (max-width: 760px) {
  .trip-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-event { grid-template-columns: 1fr; }
  .trip-route-canvas { height: 190px; }
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  background: linear-gradient(135deg, var(--nav-deep), var(--nav));
}
.login-brand {
  max-width: 700px;
  align-self: center;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 64px;
  color: #fff;
}
.login-brand h1 { margin: 6px 0 14px; font-size: clamp(34px, 5vw, 64px); line-height: 1; }
.login-brand p { max-width: 560px; color: rgba(255,255,255,.76); font-size: 18px; line-height: 1.6; }
.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-brand .eyebrow { color: #89d3ad; }
.bridge-mark {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  background: rgba(255,255,255,.1);
  font-weight: 800;
  letter-spacing: -.04em;
}
.bridge-mark.small { width: 42px; height: 42px; flex-basis: 42px; border-radius: 11px; }
.login-card {
  align-self: center;
  width: min(440px, calc(100% - 48px));
  display: grid;
  gap: 20px;
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.login-card h2 { margin-top: 5px; }
label { display: grid; gap: 7px; color: #334454; font-size: 13px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cbd7df;
  border-radius: 7px;
  outline: none;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,168,.12);
}
textarea { min-height: 92px; resize: vertical; }
button.primary, button.secondary, a.secondary {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 700;
}
button.danger { padding: 10px 14px; border: 1px solid #d98780; border-radius: 7px; color: #fff; background: var(--red); font-weight: 800; }
button.danger:hover { background: #8f1d15; }
button.primary { color: #fff; background: var(--green); }
button.primary:hover { background: #12683f; }
button[aria-busy="true"] { cursor: progress; opacity: .75; }
button.command-done, button.command-done:disabled { color: #fff; background: #166534; border-color: #166534; cursor: default; opacity: 1; }
button.secondary, a.secondary {
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
  text-decoration: none;
}
button.secondary:hover, a.secondary:hover { background: #f7f9fa; }
button.full { width: 100%; }
.form-message { min-height: 20px; color: var(--red); font-size: 13px; }
.demo-help { color: var(--muted); font-size: 12px; line-height: 1.5; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--nav), var(--nav-deep));
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 26px; }
.brand strong, .brand span { display: block; }
.brand span { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 11px; }
nav { display: grid; gap: 6px; }
.nav {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border: 0;
  border-radius: 7px;
  color: rgba(255,255,255,.72);
  background: transparent;
  text-align: left;
}
.nav:hover, .nav.active { color: #fff; background: rgba(255,255,255,.11); }
.nav-icon { width: 20px; color: #8ed2ae; font-size: 18px; text-align: center; }
.sidebar-status {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 14px 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font-size: 12px;
}
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #7c8992; }
.dot.connected { background: #67d597; box-shadow: 0 0 0 3px rgba(103,213,151,.14); }

main { min-width: 0; padding: 26px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.topbar h1 { margin-top: 4px; font-size: 28px; letter-spacing: -.02em; }
.topbar p { margin-top: 5px; color: var(--muted); font-size: 13px; }
.session { display: flex; align-items: center; gap: 10px; }
.session strong { display: block; font-size: 13px; }
.role-badge {
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 800;
}
.link-button { padding: 2px 0; border: 0; color: var(--muted); background: none; font-size: 11px; }
.view { display: none; }
.view.active { display: block; }
.notice { margin-bottom: 16px; padding: 12px 14px; border: 1px solid #b9dfca; border-radius: 7px; color: #135f3b; background: var(--green-soft); }
.notice.error { border-color: #efc1bd; color: var(--red); background: var(--red-soft); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.summary-card, .panel, .connection-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.summary-card { padding: 18px; border-top: 3px solid var(--blue); }
.summary-card.accent { border-top-color: var(--green); }
.summary-card.warning { border-top-color: var(--gold); }
.summary-card span, .summary-card small { display: block; color: var(--muted); }
.summary-card span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.summary-card strong { display: block; margin: 9px 0 4px; font-size: 32px; }
.summary-card small { font-size: 11px; }
.panel { overflow: hidden; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 17px; }
.panel-head p, .materials-head p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.request-list { display: grid; }
.request-card {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 1.6fr) minmax(130px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.request-card:last-child { border-bottom: 0; }
.request-card:hover { background: #f9fbfc; }
.request-card strong, .request-card span { display: block; }
.request-card small { display: block; margin-top: 4px; color: var(--muted); }
.empty { padding: 42px 20px; color: var(--muted); text-align: center; }
.status {
  display: inline-block;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: 11px;
  font-weight: 800;
}
.status.ready, .status.fulfilled { color: var(--green); background: var(--green-soft); }
.status.approved, .status.issued, .status.confirmed, .status.completed { color: var(--green); background: var(--green-soft); }
.status.pending, .status.awaiting_logistics, .status.awaiting_auditor, .status.awaiting_manager, .status.supplied, .status.awaiting_jep_acknowledgement, .status.awaiting_controller, .status.awaiting_bill_auditor, .status.awaiting_bill_manager { color: var(--gold); background: var(--gold-soft); }
.status.integration_error, .status.controller_error, .status.receiving_error { color: var(--red); background: var(--red-soft); }
.status.rejected { color: var(--red); background: var(--red-soft); }
.status.sync_error { color: var(--red); background: var(--red-soft); }
.status.draft { color: var(--muted); background: #eef2f4; }

.filters { display: flex; align-items: center; gap: 8px; }
.filters input { width: 280px; }
.filters select { width: 170px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 840px; border-collapse: collapse; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: #f8fafb; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
td { font-size: 13px; }
tr:last-child td { border-bottom: 0; }
.table-action { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--blue); background: #fff; font-weight: 700; }
.finance-warning {
  padding: 12px 20px;
  border-bottom: 1px solid #ead9a7;
  color: #725417;
  background: var(--gold-soft);
  font-size: 12px;
  line-height: 1.5;
}
.reconciliation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 20px; }
.reconciliation-summary article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.reconciliation-summary span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.reconciliation-summary strong { display: block; margin-top: 5px; color: var(--nav); font-size: 20px; }
.reconciliation-time { padding: 0 20px 14px; color: var(--muted); font-size: 12px; }
.status.reconciliation-reconciled, .status.reconciliation-balanced { color: var(--green); background: var(--green-soft); }
.status.reconciliation-draft_review, .status.reconciliation-not_forwarded { color: var(--gold); background: var(--gold-soft); }
.status.reconciliation-payment_difference, .status.reconciliation-amount_difference, .status.reconciliation-missing { color: var(--red); background: var(--red-soft); }
.reconciliation-summary + .reconciliation-time + .table-wrap small { display: block; margin-top: 3px; color: var(--muted); }
.payment-state {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: capitalize;
}
.inventory-company-buttons { display: flex; gap: 7px; }
.inventory-company-buttons button.active { color: #fff; border-color: var(--green); background: var(--green); }
.inventory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px; }
.inventory-summary article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.inventory-summary span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.inventory-summary strong { display: block; margin-top: 5px; color: var(--nav); font-size: 20px; }
.location-breakdown { display: grid; gap: 5px; min-width: 220px; }
.location-breakdown span { display: block; color: var(--ink); font-size: 11px; }
.location-breakdown em { display: block; margin-top: 2px; color: var(--muted); font-style: normal; }
.fuel-form { padding-bottom: 20px; }
.fuel-calculation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 20px 18px; }
.fuel-calculation article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.fuel-calculation span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.fuel-calculation strong { display: block; margin-top: 5px; color: var(--nav); font-size: 18px; }
#vehicleDialog { width: min(900px, calc(100% - 32px)); }
#stationDialog { width: min(760px, calc(100% - 32px)); }

.request-form { padding-bottom: 20px; }
.step-label { color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.form-grid .wide { grid-column: span 2; }
.materials-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 20px;
  padding: 18px 0 12px;
  border-top: 1px solid var(--line);
}
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.line-list { display: grid; gap: 9px; padding: 0 20px; }
.material-line {
  display: grid;
  grid-template-columns: 1fr 2fr .7fr .7fr auto;
  gap: 9px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafcfd;
}
.material-line select { min-width: 0; }
.loan-quotation-line,.loan-controller { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:#f8fbfc; }
.loan-quotation-line .remove-line { align-self:end; }
.loan-controller { grid-template-columns:repeat(4,minmax(0,1fr)); }
.loan-controller button { min-height:44px; }
.loan-quote { margin:10px 0;padding-left:20px; }
.loan-stock-availability { grid-column:1 / -1; }
.form-search-button { align-self:end;min-height:44px; }
@media (max-width: 760px){.loan-quotation-line,.loan-controller{grid-template-columns:1fr;}}
.remove-line { width: 38px; height: 40px; border: 0; border-radius: 6px; color: var(--red); background: var(--red-soft); }
.stock-availability { grid-column: 1 / -1; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.stock-availability.unknown { color: var(--muted); background: #eef2f4; }
.stock-availability.available { color: var(--green); background: var(--green-soft); }
.stock-availability.shortage { color: var(--red); background: var(--red-soft); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 20px 0; }

.connection-grid { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; gap: 16px; margin-bottom: 18px; }
.connection-card { padding: 22px; }
.connection-title { display: flex; gap: 13px; align-items: center; }
.connection-title h2 { font-size: 17px; }
.connection-title p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.system-logo { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-weight: 800; }
.system-logo.jep { background: var(--nav); }
.system-logo.jungle { background: var(--green); }
.connection-result { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.55; }
.bridge-line { color: var(--muted); text-align: center; font-size: 11px; }
.bridge-line::before, .bridge-line::after { content: ""; display: block; height: 1px; margin: 8px 0; background: var(--line); }

dialog {
  width: min(850px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 100px rgba(0,0,0,.3);
}
dialog::backdrop { background: rgba(10,27,38,.58); }
.action-note-dialog { width: min(560px,calc(100vw - 28px)); }
.action-note-dialog form { display: grid; gap: 16px; padding: 24px; }
.action-note-dialog h3 { color: var(--green); font-size: 21px; }
.action-note-summary { padding: 11px 13px; border-left: 4px solid var(--green); border-radius: 7px; color: #26473e; background: #eef8f4; font-size: 12px; font-weight: 800; line-height: 1.5; }
.action-note-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.petty-cash-review-dialog { width: min(920px,calc(100vw - 28px)); }
.petty-cash-review-dialog .dialog-head p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.petty-cash-review-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 20px; background: #f7faf9; }
.petty-cash-review-details article { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.petty-cash-review-details article.wide { grid-column: span 2; }
.petty-cash-review-details article.full { grid-column: 1/-1; }
.petty-cash-review-details span,.petty-cash-review-details small { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; }
.petty-cash-review-details span { margin-bottom: 5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.petty-cash-review-details strong { display: block; color: #173f34; overflow-wrap: anywhere; }
.petty-cash-review-details small { margin-top: 4px; }
.petty-cash-review-details a { color: var(--green); font-weight: 800; }
.petty-cash-review-comment { margin: 18px 20px 0; }
#pettyCashReviewMessage { margin: 0 20px; }
.petty-cash-review-actions { justify-content: flex-end; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin-top: 4px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: #f0f4f6; font-size: 22px; }
.detail-block { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.detail-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.timeline { display: grid; gap: 12px; }
.timeline-item { padding-left: 14px; border-left: 2px solid var(--line); }
.timeline-item strong { display: block; font-size: 13px; }
.timeline-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
#acceptDialog { width: min(520px, calc(100% - 32px)); }
#acceptDialog form > p, #acceptDialog form > label { margin: 18px 20px 0; }
#userDialog { width: min(820px, calc(100% - 32px)); }
.user-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-active { align-self: end; display: flex; flex-direction: row; align-items: center; gap: 9px; min-height: 40px; }
.account-active input { width: auto; }
.permission-section { margin: 0 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.permission-section h3 { margin-bottom: 12px; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.permission-grid label { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fafcfd; }
.permission-grid input { width: auto; }
.permission-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-tags span { padding: 3px 6px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 700; }
#userFormMessage { padding: 0 20px; }
.payroll-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.payroll-tabs button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; color: var(--muted); font-size: 12px; }
.attendance-legend span { padding: 5px 9px; border-radius: 999px; background: #f2f6f8; }
.attendance-table { min-width: max-content; border-collapse: separate; border-spacing: 0; }
.attendance-table th:first-child, .attendance-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; background: #fff; box-shadow: 1px 0 var(--line); }
.attendance-table thead th:first-child { z-index: 3; background: #f6f9fa; }
.attendance-cell { min-width: 44px; padding: 4px !important; text-align: center; }
.attendance-cell select { width: 38px; min-width: 38px; padding: 5px 2px; border-radius: 5px; }
.attendance-cell span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; font-weight: 800; }
.status-L span { color: #17603a; background: #dff5e8; }
.status-E span { color: #735000; background: #fff0c8; }
.status-A select { color: #a32d2d; background: #fde7e7; }
.status-P select { color: #17603a; background: #e4f5ea; }
.absence-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(340px, 1.3fr); gap: 24px; }
.absence-form { display: grid; align-content: start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfd; }
.absence-card { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.absence-card p { margin: 5px 0; }
.absence-actions { display: flex; align-items: center; gap: 7px; }
.roster-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 12px 0 18px; }
.roster-summary article { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fafcfd; }
.roster-summary span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.roster-summary strong { display: block; margin-top: 4px; font-size: 22px; }
.employee-company { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.employee-company-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.employee-company-head h4, .employee-company-head p { margin: 0; }
.employee-company-head p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.employee-company-head > span { padding: 5px 9px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 800; }
.payroll-company-warning { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #efcf89; border-radius: 8px; color: #704f08; background: #fff7df; }
.form-help { margin: -4px 0 2px; color: var(--muted); font-size: 12px; }
.salary-credit-card small { display: block; margin-top: 4px; }
.request-workspace { display: grid; gap: 20px; }
.jep-petty-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: 22px 24px; border: 1px solid #bcd7cd; border-left: 5px solid var(--gold); border-radius: 12px; background: linear-gradient(100deg,#f4fbf8 0%,#e8f5ef 70%,#fff8e8 100%); }
.jep-petty-hero span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.jep-petty-hero h2 { margin: 3px 0 4px; color: #0d4436; font-size: clamp(28px,4vw,44px); line-height: 1; letter-spacing: -.035em; }
.jep-petty-hero p { color: var(--muted); font-size: 13px; }
.jep-petty-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.jep-request-dialog { width: min(700px,calc(100vw - 40px)); max-width: none; max-height: 92vh; margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 16px; color: var(--ink); background: transparent; }
.jep-request-dialog::backdrop { background: rgba(10,34,41,.72); backdrop-filter: blur(7px); }
.jep-request-modal-card { max-height: 92vh; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 20px 70px rgba(0,0,0,.28); }
.jep-request-modal-head,.jep-request-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: #fbfcfc; }
.jep-request-modal-head { position: sticky; z-index: 3; top: 0; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.jep-request-modal-head p { margin: 0 0 5px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.jep-request-modal-head h2 { margin: 0; color: #17333d; font-size: 20px; letter-spacing: -.02em; }
.jep-request-modal-head button { border: 0; padding: 0 4px; color: #3f5258; background: none; font-size: 24px; }
.jep-request-form-grid.form-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 22px 24px; }
.jep-request-form-grid > label { color: #4e6269; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jep-request-form-grid > label.wide,.jep-request-form-grid > .wide { grid-column: 1/-1; }
.jep-request-form-grid input,.jep-request-form-grid select { min-height: 42px; margin-top: 6px; border-color: #d1dde0; border-radius: 9px; font-size: 11.5px; }
.jep-request-form-grid textarea { display: block; width: 100%; margin-top: 6px; padding: 11px; border: 1px solid #d1dde0; border-radius: 9px; color: var(--ink); line-height: 1.55; resize: vertical; }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.petty-activity-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border: 1px solid #c9ddd5; border-radius: 12px; background: #f5faf8; }
.petty-activity-choice legend { padding: 0 7px; color: #31574b; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.petty-activity-choice label { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #d7e3df; border-radius: 10px; background: #fff; cursor: pointer; }
.petty-activity-choice label.selected { border-color: #16805e; background: #edf8f4; box-shadow: 0 0 0 2px rgba(22,128,94,.12); }
.petty-activity-choice input { width: auto; height: auto; margin: 3px 0 0; accent-color: #16805e; }
.petty-activity-choice b,.petty-activity-choice small { display: block; }
.petty-activity-choice b { color: #173d34; font-size: 11px; }
.petty-activity-choice small { margin-top: 4px; color: #71817c; font-size: 8.5px; line-height: 1.45; }
.petty-activity-choice .petty-activity-loan { grid-column: 1/-1; border-color: #d7c68f; background: #fffaf0; }
.petty-activity-choice .petty-activity-loan.selected { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 2px rgba(184,131,31,.12); }
.lookup-message { padding: 11px 12px; border: 1px solid #d5e2dd; border-radius: 9px; color: #466159; background: #f7faf8; font-size: 9px; line-height: 1.45; }
.lookup-message b { color: #173d34; }
.lookup-message label { margin-top: 7px; color: #4e6269; font-size: 9px; font-weight: 800; }
.lookup-message small { display: block; margin-top: 6px; color: #7a6650; }
.petty-route-choice { border-color: #e8c9c4; background: #fff3f1; }
.jep-request-modal-foot { position: sticky; z-index: 3; bottom: 0; justify-content: flex-end; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.jep-petty-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.jep-petty-summary article { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(21,43,57,.04); }
.jep-petty-summary span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.jep-petty-summary strong { color: var(--green); font-size: 22px; }
.jep-petty-request-panel { margin-bottom: 14px; overflow: hidden; border: 1px solid #bcd7cd; border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.jep-petty-request-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; color: #0d4436; background: #f4faf7; cursor: pointer; list-style: none; }
.jep-petty-request-panel > summary::-webkit-details-marker { display: none; }
.jep-petty-request-panel > summary span:first-child { display: grid; gap: 3px; }
.jep-petty-request-panel > summary span:last-child { color: var(--green); font-size: 22px; font-weight: 900; }
.jep-petty-request-panel[open] > summary span:last-child { transform: rotate(45deg); }
.jep-petty-request-panel summary small { color: var(--muted); font-weight: 400; }
.jep-petty-request-panel .request-form { border-top: 1px solid var(--line); }
.petty-route-note { margin: 18px 20px 0; padding: 11px 13px; border-left: 4px solid var(--gold); color: #6a4c10; background: var(--gold-soft); font-size: 12px; }
.jep-petty-register { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.jep-petty-register-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.jep-petty-register-head h3 { color: #0d4436; font-size: 17px; }
.jep-petty-register-head p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.jep-petty-filters { display: flex; gap: 8px; }
.jep-petty-filters input { width: min(320px,32vw); }
.jep-petty-filters select { width: 190px; }
.jep-petty-column-head,.jep-petty-row { display: grid; grid-template-columns: minmax(125px,.9fr) minmax(120px,.9fr) minmax(150px,1.1fr) minmax(180px,1.5fr) minmax(95px,.65fr) minmax(120px,.8fr) minmax(155px,1.05fr) minmax(125px,.9fr); gap: 14px; }
.jep-petty-column-head { padding: 10px 17px; color: #567064; background: #f2f7f5; font-size: 10px; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.jep-petty-row { align-items: start; padding: 17px; border-bottom: 1px solid var(--line); }
.jep-petty-row:last-child { border-bottom: 0; }
.jep-petty-row:hover { background: #fbfdfc; }
.jep-petty-row > div { min-width: 0; }
.jep-petty-row > div > strong,.jep-petty-row > div > small { display: block; overflow-wrap: anywhere; }
.jep-petty-row > div > strong { color: #173f34; font-size: 12px; }
.jep-petty-row > div > small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.petty-request-cell > strong { color: #0d4436 !important; font-size: 13px !important; }
.petty-odoo-pill { display: grid; gap: 3px; padding: 9px 10px; border-radius: 9px; color: #175d48; background: #e8f6ef; overflow-wrap: anywhere; }
.petty-odoo-pill strong { font-size: 11px; }
.petty-odoo-pill small { color: #558172; font-size: 9px; }
.petty-amount { color: var(--green); font-size: 15px; font-weight: 900; }
.petty-stage { color: #75520b; }
.petty-approval-checks { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.petty-approval-checks li { display: grid; grid-template-columns: 16px 1fr; gap: 5px; align-items: start; color: var(--green); font-size: 10px; }
.petty-approval-checks li.pending { color: #8a9892; }
.petty-approval-checks strong,.petty-approval-checks small { display: block; }
.petty-approval-checks small { margin-top: 1px; color: currentColor; font-size: 9px; font-weight: 400; overflow-wrap: anywhere; }
.petty-status-cell { display: grid; gap: 8px; justify-items: stretch; }
.petty-status-cell button { width: 100%; padding: 7px 8px; font-size: 10px; }
.jep-petty-status { color: var(--gold); font-size: 12px; line-height: 1.25; }
.jep-petty-status.complete { color: var(--green); }
.jep-petty-status.error { color: var(--red); }
.jep-petty-more { grid-column: 1/-1; margin-top: 0; border-top: 1px dashed #c9d7d1; }
.jep-petty-more > summary { padding: 11px 0 0; color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; }
.jep-petty-more[open] > summary { margin-bottom: 12px; }
.petty-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.petty-timeline { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.petty-timeline li { display: grid; gap: 4px; min-height: 58px; padding: 10px; border-left: 4px solid var(--green); border-radius: 8px; background: #eef8f4; }
.petty-timeline li.pending { border-left-color: #b4c1bd; background: #f4f6f5; color: var(--muted); }
.petty-timeline span { font-size: 11px; line-height: 1.4; }
.petty-controller { margin-top: 16px; padding: 16px; border: 1px solid #9dd1c1; border-radius: 10px; background: #f2fbf7; }
.petty-controller h4 { margin: 0 0 12px; color: var(--green); }
.petty-controller:focus { outline: 3px solid rgba(10,107,83,.2); outline-offset: 3px; }
.petty-controller-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 12px; }
.petty-controller-heading h4 { margin-bottom: 5px; }
.petty-controller-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.petty-controller-total { min-width: 210px; padding: 12px 14px; border-radius: 9px; background: var(--green); color: white; text-align: right; }
.petty-controller-total span,.petty-controller-total small { display: block; opacity: .85; font-size: 10px; }
.petty-controller-total strong { display: block; margin: 3px 0; font-size: 20px; }
.petty-odoo-counts { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.petty-odoo-counts span { padding: 5px 8px; border: 1px solid #b9ddd1; border-radius: 999px; background: white; color: var(--green); font-size: 10px; font-weight: 800; }
.petty-vendor-balance { display: grid; gap: 12px; padding: 14px; border: 1px solid #b9ddd1; border-radius: 12px; background: #fff; }
.petty-vendor-balance p { margin: 0; }
.petty-vendor-balance-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.petty-vendor-balance-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.petty-vendor-balance-head span,.petty-vendor-balance-head small,.petty-vendor-application span { color: var(--muted); font-size: 11px; }
.petty-vendor-balance-head strong { overflow-wrap: anywhere; }
.petty-vendor-balance-total { flex: 0 0 auto; min-width: 170px; padding: 10px 12px; border-radius: 9px; color: #fff; background: var(--green); text-align: right; }
.petty-vendor-balance-total span,.petty-vendor-balance-total strong { display: block; color: inherit; }
.petty-vendor-balance-total strong { margin-top: 3px; font-size: 18px; }
.petty-vendor-application { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.petty-vendor-application article { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf9; }
.petty-vendor-application article.complete { border-color: #b9ddd1; background: var(--green-soft); }
.petty-vendor-application article.warning { border-color: #efc78b; background: #fff8e8; }
.petty-vendor-bills { display: grid; gap: 8px; margin-top: 10px; }
.petty-vendor-bills > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.petty-vendor-bills span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.petty-vendor-bills b { white-space: nowrap; color: var(--green); }
.petty-controller .primary { margin-top: 12px; }
.petty-exports { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.odoo-links a { color: var(--green); font-weight: 800; }

@media (max-width: 1200px) {
  .jep-petty-column-head { display: none; }
  .jep-petty-row { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px; border: 1px solid var(--line); border-radius: 10px; }
  .jep-petty-row:last-child { border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .petty-controller-heading { display: grid; }
  .petty-controller-total { min-width: 0; text-align: left; }
  .petty-vendor-balance-head { display: grid; }
  .petty-vendor-balance-total { min-width: 0; text-align: left; }
  .petty-vendor-application { grid-template-columns: 1fr; }
  .petty-vendor-bills > div { grid-template-columns: 1fr; }
  .petty-vendor-bills b { white-space: normal; }
}

.payslip-credit { color: #704f08; background: #fff8e8; }
.payslip-credit small { display: block; margin-top: 2px; color: #826a35; }
#payslipDialog { width: min(780px, calc(100% - 32px)); }
.payslip { padding: 30px; color: #15232c; background: #fff; }
.payslip header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid var(--green); }
.payslip h2, .payslip p { margin: 4px 0 0; }
.payslip-brand { color: var(--green); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.payslip-reference { display: grid; align-content: start; justify-items: end; gap: 3px; text-align: right; }
.payslip-reference span, .payslip-employee span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.payslip-employee { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 20px 0; }
.payslip-employee div { display: grid; gap: 3px; }
.payslip-table { width: 100%; border-collapse: collapse; }
.payslip-table th, .payslip-table td { padding: 10px 12px; border: 1px solid #d9e0e3; }
.payslip-table th:last-child, .payslip-table td:last-child { text-align: right; }
.payslip-total { font-weight: 800; background: #f4f7f8; }
.payslip-net { color: #fff; background: var(--green); font-size: 17px; font-weight: 900; }
.payslip-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 54px; }
.payslip-signatures div { padding-top: 7px; border-top: 1px solid #60717b; }
.payslip-signatures span, .payslip footer { color: var(--muted); font-size: 10px; }
.payslip footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e0e5e7; text-align: center; }

@media (max-width: 1000px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-card { grid-template-columns: 1fr 1.5fr auto; }
  .request-card > :nth-child(3) { display: none; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-line { grid-template-columns: 1fr 2fr .8fr; }
  .material-line label:nth-child(4) { grid-column: 1 / 2; }
  .connection-grid { grid-template-columns: 1fr; }
  .bridge-line { display: none; }
}
@media (max-width: 760px) {
  button { min-height: 44px; }
  .login-screen { grid-template-columns: 1fr; padding: 24px; }
  .login-brand { display: none; }
  .login-card { justify-self: center; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { min-height: auto; padding: 12px; }
  .brand { padding-bottom: 10px; }
  .sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav { justify-content: center; padding: 9px 5px; font-size: 11px; }
  .nav-icon { display: block; width: 18px; font-size: 15px; }
  .sidebar-status { display: none; }
  main { padding: 16px; }
  .topbar { align-items: flex-start; }
  .topbar p { display: none; }
  .session strong { display: none; }
  .session button { min-width: 84px; }
  .icon-button { min-width: 44px; width: 44px; height: 44px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; flex-direction: column; }
  .filters input, .filters select { width: 100%; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .material-line { grid-template-columns: 1fr; }
  .material-line label:nth-child(4) { grid-column: auto; }
  .request-card { grid-template-columns: 1fr auto; }
  .request-card > :nth-child(2), .request-card > :nth-child(3) { display: none; }
  .permission-grid { grid-template-columns: 1fr; }
  .inventory-summary { grid-template-columns: 1fr; }
  .reconciliation-summary { grid-template-columns: 1fr 1fr; }
  .fuel-calculation { grid-template-columns: 1fr 1fr; }
  .inventory-company-buttons { width: 100%; flex-direction: column; }
  .payroll-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .absence-layout { grid-template-columns: 1fr; }
  .roster-summary { grid-template-columns: 1fr; }
  .absence-card { align-items: flex-start; flex-direction: column; }
  .jep-petty-column-head { display: none; }
  .jep-petty-row { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px; border: 1px solid var(--line); border-radius: 10px; }
  .jep-petty-row:last-child { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .jep-petty-hero,.jep-petty-register-head { align-items: stretch; flex-direction: column; }
  .jep-petty-hero-actions button { flex: 1; }
  .jep-petty-summary { grid-template-columns: 1fr 1fr; }
  .jep-petty-filters { flex-direction: column; width: 100%; }
  .jep-petty-filters input,.jep-petty-filters select { width: 100%; }
  .jep-petty-row { grid-template-columns: 1fr; }
  .jep-request-dialog { width: calc(100vw - 20px); }
  .jep-request-form-grid.form-grid,.petty-activity-choice { grid-template-columns: 1fr; }
  .jep-request-form-grid > label.wide,.jep-request-form-grid > .wide,.petty-activity-choice .petty-activity-loan { grid-column: auto; }
  .jep-request-modal-head,.jep-request-modal-foot,.jep-request-form-grid.form-grid { padding: 18px; }
}

/* Personal work planning */
#todosView > .panel { padding: 22px; }
#todosView > .panel > .panel-head { padding: 0 0 18px; }
#todosView .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
#todosView .filters input { flex: 1; min-width: 180px; }
#todoSummary { padding: 14px 16px; margin: 14px 0; border-radius: 12px; background: #e9f3ef; color: #235842; font-weight: 600; }
#todoList { display: grid; gap: 14px; }
#todoList > article { padding: 16px; border: 1px solid #dce5e9; border-left: 4px solid #5f8e80; border-radius: 12px; background: #fff; }
#todoList .panel-head { padding: 0; align-items: flex-start; }
#todoList p { white-space: pre-wrap; line-height: 1.5; margin: 8px 0; }
#todoList small { display: block; line-height: 1.6; }
#todoDialog { width: min(660px, calc(100vw - 24px)); }
#todoForm { padding: 24px; display: grid; gap: 16px; }
#todoForm > label { display: grid; gap: 7px; }
#todoForm .dialog-head { padding: 0; }
#todoForm textarea { min-height: 110px; resize: vertical; }
#todoForm .dialog-actions { padding: 0; }
@media (max-width: 600px) { #todosView > .panel, #todoForm { padding: 16px; } #todoList .panel-head { flex-direction: column; gap: 12px; } }

.work-history-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.work-history-summary>div{padding:15px;background:#f0f6f5;border:1px solid #dce9e6;border-radius:12px}.work-history-summary strong{display:block;font-size:24px;color:#164b40}.work-history-summary span{font-size:13px;color:#526a64}.work-history-list{display:grid;gap:14px;margin:20px 0}.work-history-entry{border:1px solid #dce5e2;border-left:4px solid #2e806b;border-radius:12px;padding:18px;overflow-wrap:anywhere}.work-history-entry h3{margin:6px 0}.work-history-entry small{color:#597169}.work-history-details,.work-progress-note{white-space:pre-wrap;overflow-wrap:anywhere}.work-progress-note{background:#f1f7f5;padding:12px;border-radius:9px}@media(max-width:640px){.work-history-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.work-history-entry{padding:14px}}

.work-history-panel .work-history-summary,.work-history-panel .work-history-list{margin:20px}.work-history-panel>p{margin:16px 20px}.work-history-panel>#moreWorkHistory{margin:0 20px 20px}

/* Fluid workspace: desktop sidebar, compact tablet/phone menu, contained tables. */
.navigation-toggle,.mobile-login-brand{display:none}
@media screen {
 html{min-width:320px;scrollbar-gutter:stable}
 body{font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
 button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
 button:focus-visible,a:focus-visible,.table-wrap:focus-visible{outline:3px solid #70b6ed;outline-offset:3px}
 .app-shell{grid-template-columns:244px minmax(0,1fr);align-items:start}
 .sidebar{position:sticky;top:0;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 16px}
 .sidebar .brand{font-size:13px;line-height:1.35;padding-bottom:24px}
 .sidebar nav{min-width:0;gap:5px}
 .sidebar .nav{min-height:44px;border-radius:10px;font-size:13px;line-height:1.35}
 .sidebar-status{margin-top:28px;flex-shrink:0}
 main{width:100%;max-width:1800px;margin-inline:auto;padding:clamp(18px,2.3vw,38px);min-width:0}
 .topbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,auto);align-items:start;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}
 .topbar>div,.session,.session>div{min-width:0}
 .topbar h1{font-size:clamp(23px,2.2vw,32px);line-height:1.2;overflow-wrap:anywhere;outline:none}
 .topbar p{max-width:70ch;line-height:1.55}
 .session{max-width:460px;justify-self:end;gap:12px;align-items:flex-start}
 .session>div:last-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px}
 .session strong{display:block;flex-basis:100%;text-align:right;overflow-wrap:anywhere;line-height:1.4}
 .session .role-badge{flex-shrink:0;margin-top:2px}
 .session .link-button{font-size:12px;min-height:34px;padding:5px 2px}
 .session #jobAlarmToggle{font-size:12px;padding:7px 10px;min-height:36px}
 .summary-card,.panel,.connection-card{border-radius:14px;box-shadow:0 4px 20px rgba(21,43,57,.045);min-width:0}
 .summary-card{padding:20px;overflow-wrap:anywhere}
 .panel-head,.materials-head,.form-actions,.dialog-actions{flex-wrap:wrap}
 .panel-head>div,.filters>*{min-width:0}
 .panel-head p{line-height:1.6;max-width:80ch}
 .filters{flex-wrap:wrap;gap:10px}
 .filters input{flex:1 1 220px;min-width:0}
 .filters select{width:auto;max-width:100%;flex:0 1 210px}
 input,select,textarea{max-width:100%;min-width:0;border-radius:9px;min-height:44px}
 label{min-width:0;line-height:1.45}
 button.primary,button.secondary,a.secondary{min-height:42px;border-radius:9px;line-height:1.35}
 .table-wrap{width:100%;max-width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
 .table-wrap table{width:100%;min-width:640px}
 .table-wrap .payroll-table{min-width:1180px}
 table th{font-size:11px;letter-spacing:.055em;line-height:1.5}
 table td{line-height:1.55}
 .table-wrap .table-action{white-space:normal}
 .form-grid,.detail-grid,.pos-grid,.warehouse-directory,.loan-controller,.loan-quotation-line{min-width:0}
 .form-grid>*,.pos-grid>*,.warehouse-directory>*{min-width:0}
 dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border-radius:16px}
 dialog .dialog-head{position:sticky;top:0;background:#fff;z-index:2}
 .login-screen{grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);gap:clamp(16px,3vw,52px);padding:clamp(20px,4vw,64px)}
 .login-brand{padding:0;max-width:750px}
 .login-card{width:100%;max-width:460px;justify-self:center;padding:clamp(24px,3vw,38px);border:1px solid #e1e9ec;border-radius:20px}
 .login-brand h1{font-size:clamp(34px,4.2vw,62px);line-height:1.06}
}
@media screen and (max-width:1100px){
 .topbar{grid-template-columns:1fr}.session{justify-self:stretch;max-width:none;justify-content:space-between}.session>div:last-child{justify-content:flex-end}.session strong{flex-basis:auto;margin-right:auto;text-align:left}
 .pos-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:1024px){
 .app-shell{grid-template-columns:minmax(0,1fr)}
 .sidebar{position:relative;height:auto;overflow:visible;padding:14px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
 .sidebar .brand{padding:0;font-size:13px}.sidebar .brand strong{max-width:290px}.sidebar .brand span{font-size:10px}
 .navigation-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid #ffffff40;border-radius:10px;color:white;background:#ffffff12;font-weight:650}
 .sidebar nav{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));max-height:65dvh;overflow:auto;padding-top:10px;border-top:1px solid #ffffff20}
 .sidebar:not(.nav-open) nav{display:none}
 .sidebar .nav{justify-content:flex-start;padding:11px 12px;font-size:13px}.sidebar .nav-icon{flex-shrink:0}
 .sidebar-status{display:none}.topbar{margin-bottom:20px}
}
@media screen and (max-width:640px){
 .sidebar{padding:12px 16px}.sidebar .brand{gap:10px}.bridge-mark.small{width:36px;height:36px;flex-basis:36px;border-radius:10px}
 .sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .nav{font-size:12px;padding:10px 8px;gap:8px}
 main{padding:20px 14px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 .topbar{gap:16px;padding-bottom:16px}.topbar p{display:block;font-size:12px}.topbar .eyebrow{font-size:10px;letter-spacing:.1em}
 .session{display:flex;flex-wrap:wrap;gap:10px;width:100%}.session>div:last-child{flex:1 1 240px;justify-content:flex-start;gap:6px 14px}.session strong{flex-basis:100%;font-size:12px}.session button{min-width:0}.session .link-button{min-height:38px}
 .session .role-badge{font-size:11px;padding:6px 9px}.summary-grid{gap:10px}.summary-card{padding:15px}.summary-card strong{font-size:26px}.summary-card p{font-size:11px}
 .panel-head{padding:16px;gap:12px}.panel-head h2{font-size:16px}.panel-head>button{max-width:100%}
 .filters{align-items:stretch}.filters input,.filters select{flex-basis:auto;width:100%}
 input,select,textarea{font-size:16px}.form-grid{padding:16px;gap:14px}.materials-head{margin:0 16px}.line-list{padding:0 16px}
 .form-actions,.dialog-actions{gap:10px}.form-actions>button{flex:1 1 auto}
 .warehouse-summary,.payroll-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-scan{grid-template-columns:minmax(0,1fr)}.pos-cart-line{grid-template-columns:minmax(0,1fr) auto}.pos-cart-line>strong{grid-column:1/-1;text-align:right}
 .table-wrap table{min-width:600px}dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}dialog .dialog-head{padding:16px}
 .login-screen{min-height:100dvh;padding:24px 16px;grid-template-columns:minmax(0,1fr)}.login-card{width:100%;gap:18px;padding:26px 22px}.login-brand{display:none}.mobile-login-brand{display:block;color:var(--nav);font-size:15px;font-weight:800;letter-spacing:.02em;border-bottom:1px solid var(--line);padding-bottom:18px}.mobile-login-brand span{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0}
}
@media screen and (max-width:900px){
 .login-screen{min-height:100dvh;grid-template-columns:minmax(0,1fr);place-items:center;padding:clamp(18px,5vw,42px)}
 .login-brand{display:none}.login-card{width:min(100%,500px);max-width:500px}.mobile-login-brand{display:block;color:var(--nav);font-size:16px;font-weight:800;letter-spacing:.02em;border-bottom:1px solid var(--line);padding-bottom:18px}.mobile-login-brand span{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0}
}
@media screen and (max-width:1024px){
 .sidebar{position:sticky;top:0;z-index:50;overflow:visible;box-shadow:0 6px 24px rgba(7,28,40,.18)}
 .sidebar.nav-open nav{position:absolute;top:100%;left:12px;right:12px;z-index:60;max-height:min(68dvh,560px);padding:12px;border:1px solid #ffffff2b;border-radius:0 0 14px 14px;background:linear-gradient(180deg,var(--nav),var(--nav-deep));box-shadow:0 18px 40px rgba(5,24,35,.34)}
 .navigation-toggle{touch-action:manipulation}
}
@media screen and (max-width:640px){
 button,.table-action,.navigation-toggle{min-height:48px;touch-action:manipulation}
 .sidebar.nav-open nav{grid-template-columns:minmax(0,1fr);left:8px;right:8px;padding:10px}.sidebar .nav{min-height:48px;font-size:13px}
 .panel,.connection-card,.summary-card{border-radius:12px}.notice{line-height:1.55}
 .mobile-card-table{overflow:visible}.responsive-table{display:block;width:100%;min-width:0!important}.responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.responsive-table tbody{display:grid;gap:12px;padding:12px}.responsive-table tr{display:block;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(21,43,57,.05)}.responsive-table td{display:grid;grid-template-columns:minmax(92px,.4fr) minmax(0,.6fr);gap:12px;align-items:start;width:100%;padding:10px 2px;border-bottom:1px dashed var(--line);text-align:left;overflow-wrap:anywhere}.responsive-table td:last-child{border-bottom:0}.responsive-table td::before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.045em;line-height:1.45;text-transform:uppercase}.responsive-table td[data-label=""]{display:block}.responsive-table td[data-label=""]::before{content:none}.responsive-table td .table-action{width:100%;margin:3px 0;white-space:normal}
 dialog .dialog-actions{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;box-shadow:0 -8px 22px rgba(21,43,57,.08)}dialog .dialog-actions>button,dialog .jep-request-modal-foot>button{flex:1 1 140px;min-height:48px}
 .jep-request-modal-head h2,.dialog-head h2{font-size:18px}.jep-request-modal-head button{min-width:48px;min-height:48px}.jep-request-modal-foot{padding-bottom:max(18px,env(safe-area-inset-bottom))}
 .petty-actions,.material-actions,.payroll-toolbar{display:grid;grid-template-columns:minmax(0,1fr);width:100%}.petty-actions button,.material-actions button,.payroll-toolbar button{width:100%}
 .petty-cash-review-details{grid-template-columns:minmax(0,1fr);padding:14px}.petty-cash-review-details article.wide,.petty-cash-review-details article.full{grid-column:auto}.petty-cash-review-comment{margin:14px}.petty-cash-review-actions{display:grid;grid-template-columns:1fr}.petty-cash-review-actions button{width:100%}
}
@media screen and (max-width:420px){
 .summary-grid,.jep-petty-summary,.warehouse-summary,.payroll-summary,.reconciliation-summary,.fuel-calculation{grid-template-columns:minmax(0,1fr)}
 .responsive-table td{grid-template-columns:minmax(78px,.38fr) minmax(0,.62fr);gap:9px}.topbar h1{font-size:22px}
}

/* User-adjustable workspace. Automatic phone/tablet rules remain the safety net. */
.view,.view>*{min-width:0;max-width:100%}
.screen-adjust-button{white-space:nowrap}
body[data-workspace-width="centered"] main{max-width:1600px}
body[data-workspace-width="full"] main{max-width:none}
body[data-display-size="compact"]{font-size:13px}
body[data-display-size="compact"] main{padding:clamp(14px,1.6vw,26px)}
body[data-display-size="compact"] .panel-head,
body[data-display-size="compact"] .form-grid{padding:14px 16px}
body[data-display-size="compact"] .summary-card{padding:15px}
body[data-display-size="compact"] input,
body[data-display-size="compact"] select,
body[data-display-size="compact"] textarea{min-height:38px}
body[data-display-size="compact"] button.primary,
body[data-display-size="compact"] button.secondary,
body[data-display-size="compact"] a.secondary{min-height:38px;padding-block:7px}
body[data-display-size="compact"] table th,
body[data-display-size="compact"] table td{padding:9px 12px}
body[data-display-size="large"]{font-size:16px}
body[data-display-size="large"] main{padding:clamp(22px,2.8vw,46px)}
body[data-display-size="large"] .topbar h1{font-size:clamp(27px,2.5vw,36px)}
body[data-display-size="large"] .panel-head h2{font-size:19px}
body[data-display-size="large"] input,
body[data-display-size="large"] select,
body[data-display-size="large"] textarea{min-height:50px;font-size:16px}
body[data-display-size="large"] button.primary,
body[data-display-size="large"] button.secondary,
body[data-display-size="large"] a.secondary,
body[data-display-size="large"] .table-action{min-height:48px;font-size:14px}
body[data-display-size="large"] table th,
body[data-display-size="large"] table td{padding:15px 18px}
.display-settings-dialog{width:min(760px,calc(100vw - 28px))}
.display-settings-dialog .dialog-head p{max-width:58ch;margin-top:6px;color:var(--muted);line-height:1.5}
.display-settings-dialog form{display:grid}
.display-choice-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 20px 0;padding:0;border:0;min-width:0}
.display-choice-group+ .display-choice-group{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px}
.display-choice-group legend{grid-column:1/-1;margin-bottom:2px;color:var(--ink);font-size:13px;font-weight:800}
.display-choice{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.display-choice:has(input:checked){border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 2px rgba(27,123,88,.1)}
.display-choice input{width:18px;min-width:18px;height:18px;min-height:18px;margin:2px 0 0;accent-color:var(--green)}
.display-choice span,.display-choice strong,.display-choice small{display:block;min-width:0}
.display-choice small{margin-top:4px;color:var(--muted);font-weight:400;line-height:1.45}
.display-settings-dialog .form-message{margin:14px 20px 0}
@media screen and (max-width:640px){
 body[data-display-size="compact"] main,body[data-display-size="large"] main{padding:20px 14px;padding-bottom:max(24px,env(safe-area-inset-bottom))}
 body[data-display-size="compact"] input,body[data-display-size="compact"] select,body[data-display-size="compact"] textarea,
 body[data-display-size="compact"] button.primary,body[data-display-size="compact"] button.secondary,body[data-display-size="compact"] a.secondary{min-height:48px}
 .screen-adjust-button{flex:1 1 130px}
 .display-choice-group,.display-choice-group+ .display-choice-group{grid-template-columns:minmax(0,1fr);margin:16px 14px 0}
 .display-settings-dialog .form-message{margin-inline:14px}
}
@media screen and (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Keep workflow controls inside the visible register at every workspace width. */
@media screen {
 .jep-petty-column-head{display:none}
 .jep-petty-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .petty-status-cell{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:12px}
 .petty-status-cell button{width:auto;min-height:40px;font-size:13px;padding:9px 16px}
 .petty-status-cell .petty-exports{display:flex;flex-wrap:wrap}
 @media(max-width:1000px){.jep-petty-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:600px){.jep-petty-row{grid-template-columns:minmax(0,1fr)}}
}

.petty-material-line{min-width:0;border:1px solid var(--line);border-radius:10px;padding:16px;margin:12px 0}.petty-material-reference{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.petty-material-total{font-weight:700}

#controllerProcessingDialog{width:min(1080px,calc(100vw - 24px));max-height:92dvh;overflow:auto}#controllerProcessingDialog .petty-controller{border:0;padding:0}.controller-request-summary{padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:16px}.controller-request-summary p{margin:8px 0}.controller-supporting-details{white-space:pre-line;overflow-wrap:anywhere}.controller-vendor-confirm{display:flex;align-items:center;gap:10px}.controller-vendor-confirm input{width:auto;min-height:20px}.controller-process-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.controller-process-actions button{min-height:44px}

.odoo-choice-search{position:relative;min-width:0;width:100%;margin:6px 0}.odoo-choice-search[hidden],.odoo-choice-results[hidden]{display:none}.odoo-choice-search>input{width:100%;min-height:42px}.odoo-choice-results{position:relative;z-index:5;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff;margin-top:5px;overscroll-behavior:contain}.odoo-choice-results>button{display:block;width:100%;min-height:40px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:white;color:var(--ink);text-align:left;padding:10px 12px;white-space:normal;overflow-wrap:anywhere;font:inherit;text-transform:none;letter-spacing:normal}.odoo-choice-results>button.active,.odoo-choice-results>button:hover{background:#e9f5f0}.odoo-choice-results>button:disabled{opacity:.6;cursor:not-allowed}.odoo-choice-status{display:block;min-height:16px;font-size:11px;line-height:1.4;color:var(--muted);margin:4px 0;text-transform:none;letter-spacing:normal;font-weight:400}@media print{.odoo-choice-search{display:none}}