/* ==========================================================================
   ProcureFlow UI – Layout + Sidebar (v3.6)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --brand: #2563eb;
  --brand-600:#1e40af;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f6f8fc;
  --surface:#ffffff;
  --border:#e6e8ef;
  --shadow:0 1px 2px rgba(2,6,23,.05),0 6px 16px rgba(2,6,23,.06);

  --nav-w: 232px;
  --nav-w-collapsed: 64px;
  --nav-z: 40;

  --radius-lg:12px; --radius-md:10px; --radius-sm:8px;
}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

/* ---------- App layout ---------- */
.app{min-height:100vh}
main#content{margin-left:var(--nav-w);padding:16px;transition:margin-left .2s ease}
.app.nav-collapsed main#content{margin-left:var(--nav-w-collapsed)}

/* ---------- Sidebar shell ---------- */
#sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--nav-w);
  background:var(--surface); border-right:1px solid var(--border);
  z-index:var(--nav-z); display:flex; flex-direction:column;
}
#sidebar.collapsed{width:var(--nav-w-collapsed)}

/* Brand row */
#sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border);
  position:relative;
}
#sidebar .brand .dot{
  width:24px;height:24px;border-radius:6px;background:var(--brand);
  box-shadow:inset 0 -10px 24px rgba(255,255,255,.35);
}
#sidebar .brand .title{font-weight:800;letter-spacing:.2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:#1f2937}
.app.nav-collapsed #sidebar .brand .title{opacity:0;pointer-events:none}

/* Collapse button */
#navCollapse{
  position:absolute; right:10px; top:10px;
  width:28px;height:28px;border-radius:999px;border:1px solid var(--border);
  display:grid; place-items:center; background:#f8fafc; cursor:pointer;
}
#navCollapse:focus-visible{outline:3px solid rgba(37,99,235,.2)}

/* ---------- Navigation ---------- */
#sidebar nav{padding:8px}
#sidebar .section-label{padding:10px 12px 6px;color:var(--muted);font-size:12px}

/* Section header (parent) */
.nav-section{margin:2px 0}
.nav-parent{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; color:var(--ink);
  background:transparent; border:0; cursor:pointer; text-align:left;
  position:relative;
}
.nav-parent:hover{background:#f4f6fb}
.nav-section[aria-expanded="true"] .nav-parent{background:#eef4ff}
.nav-parent .icon{width:20px;height:20px;display:inline-grid;place-items:center;opacity:.95}
.nav-parent .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Chevron indicator drawn by CSS */
.nav-parent{padding-right:28px}
.nav-parent::after{
  content:""; position:absolute; right:12px; top:50%; width:8px;height:8px;
  margin-top:-5px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(-45deg);
  transition:transform .18s ease;
}
.nav-section[aria-expanded="true"] .nav-parent::after{transform:rotate(45deg)}
.app.nav-collapsed #sidebar .nav-parent::after{display:none}

/* Child links */
.nav-children{overflow:hidden; max-height:0; transition:max-height .18s ease}
.nav-children.open{max-height:420px}
.nav-children a{
  display:flex; align-items:center; gap:10px;
  padding:7px 12px 7px 38px; margin:2px 0;
  border-radius:8px; text-decoration:none; color:var(--ink);
}
.nav-children a:hover{background:#f4f6fb}
.nav-children a.active{background:#e8efff;color:#0b4cf0}

/* Items in the main list that are leaf links (no children) */
.nav .nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; color:var(--ink); text-decoration:none;
}
.nav .nav-item:hover{background:#f4f6fb}
.nav .nav-item.active{background:#e8efff;color:#0b4cf0}
.nav .nav-item .icon{width:20px;height:20px;display:inline-grid;place-items:center;opacity:.95}
.nav .nav-item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Collapsed rail */
.app.nav-collapsed #sidebar .label{display:none}
.app.nav-collapsed #sidebar .nav .nav-item{justify-content:center}
.app.nav-collapsed #sidebar .nav-parent{justify-content:center}

/* Collapsed sub-menu flyout */
.app.nav-collapsed #sidebar .nav-section.has-children:hover .nav-children{
  display:block; position:fixed; left:var(--nav-w-collapsed);
  top:48px; min-width:220px; max-height:none;
  background:var(--surface); border:1px solid var(--border);
  border-left:none; border-radius:8px; padding:6px; box-shadow:var(--shadow);
  z-index:calc(var(--nav-z) + 3); pointer-events:auto;
}

/* ---------- Cards, tables and forms (unchanged core styles) ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.section-title{margin:0 0 6px 0;font-weight:700}

input,select,textarea{width:100%;height:32px;padding:6px 10px;border:1px solid var(--border);border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:#bcd3ff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}

.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:#f9fafb;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-weight:600}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-600)}
.toast{position:fixed;right:14px;bottom:14px;background:#111827;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:.15s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{background:#7f1d1d}

/* Tables used by PR/PO line items */
.tbl-slim{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.tbl-slim thead th{background:#f8fafc;text-align:left;font-weight:600;padding:10px;border-bottom:1px solid var(--border);color:var(--muted)}
.tbl-slim tbody td{padding:8px 10px;border-top:1px solid var(--border)}
.tbl-slim .col-line{width:80px}.tbl-slim .col-unit{width:70px}.tbl-slim .col-qty{width:90px}.tbl-slim .col-price{width:120px}.tbl-slim .col-money{width:120px;text-align:right}.tbl-slim .col-date{width:150px}.tbl-slim .col-actions{width:110px}