/* ===== Renhe ERP — module styles (extends styles.css design system) ===== */

/* nav */
.nav-badge{margin-left:auto;background:rgba(255,255,255,.16);border-radius:10px;padding:1px 7px;font-size:11px}

/* data table */
.view{padding:18px 24px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th{background:#f7f9fc;color:var(--muted);font-weight:600;text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.grid td{padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.grid tr:hover td{background:#f9fbfe}
table.grid tr:last-child td{border-bottom:0}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
.row-link{cursor:pointer}
.row-link:hover td:first-child{color:var(--brand)}
.grid-wrap{overflow-x:auto}
.empty{padding:60px 20px;text-align:center;color:var(--faint)}

/* pagination */
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 6px;color:var(--muted);font-size:13px}
.pager button{background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:8px}
.pager button:disabled{opacity:.4;cursor:default}

/* status badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.6}
.b-draft{background:#eef1f6;color:#5d6b7e}.b-submitted{background:#fff5e6;color:#c9791b}
.b-approved{background:var(--ok-bg);color:var(--ok)}.b-returned{background:var(--danger-bg);color:var(--danger)}
.b-none{background:#eef1f6;color:#94a1b2}.b-partial{background:#fff5e6;color:#c9791b}.b-done{background:var(--ok-bg);color:var(--ok)}
.b-open{background:#fde7e9;color:var(--danger)}.b-closed{background:var(--ok-bg);color:var(--ok)}
.b-posted{background:var(--ok-bg);color:var(--ok)}.b-reviewed{background:#e8f0ff;color:var(--brand)}
.b-low{background:var(--danger-bg);color:var(--danger)}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kpi .klabel{color:var(--muted);font-size:13px;margin-bottom:6px}
.kpi .kval{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi .kval.neg{color:var(--danger)}.kpi .kval.pos{color:var(--ok)}
.kpi .ksub{color:var(--faint);font-size:12px;margin-top:3px}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);margin-bottom:16px}
.panel-card h3{margin:0 0 12px;font-size:15px}

/* drawer form */
.drawer-panel{display:flex;flex-direction:column}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.drawer-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form-grid .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:5px}
.fld label{font-size:12.5px;color:var(--muted);font-weight:600}
.fld input,.fld select,.fld textarea{padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,95,209,.1)}
.fld.chk{flex-direction:row;align-items:center;gap:8px}
.fld.chk input{width:16px;height:16px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}

/* buttons */
.btn{padding:9px 16px;border-radius:9px;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:var(--panel)}
.btn:hover{background:#f4f7fc}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.primary:hover{background:var(--brand-d)}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn.warn{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn.danger{color:var(--danger);border-color:#f3c2c7}.btn.danger:hover{background:var(--danger-bg)}
.btn.sm{padding:6px 11px;font-size:12.5px}

/* document editor overlay */
.doc-editor{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;flex-direction:column;overflow:hidden}
.de-head{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.de-title{font-size:17px;font-weight:800}
.de-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.de-body{flex:1;overflow-y:auto;padding:20px 22px 60px}
.de-section{max-width:1200px;margin:0 auto 18px}

/* item grid (editable) */
.items-tbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.items-tbl th{background:#f7f9fc;color:var(--muted);font-weight:600;padding:9px 8px;text-align:left;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}
.items-tbl td{padding:5px 6px;border-bottom:1px solid var(--line2);vertical-align:middle}
.items-tbl td.num{text-align:right}
.items-tbl input,.items-tbl select{width:100%;padding:6px 7px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13px}
.items-tbl input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 2px rgba(31,95,209,.08)}
.items-tbl input.ro{color:var(--muted);background:#f7f9fc}
.items-tbl input.num{text-align:right;font-variant-numeric:tabular-nums}
.it-prod{min-width:190px;font-weight:600;cursor:pointer;color:var(--ink)}
.it-del{color:var(--danger);cursor:pointer;text-align:center;font-weight:700}
.it-add{margin-top:10px}
.de-tot{display:flex;gap:26px;justify-content:flex-end;padding:14px 6px;font-size:14px}
.de-tot b{font-size:18px;color:var(--brand-ink)}

/* picker */
.picker-search{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px}
.picker-list{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.picker-item{padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;display:flex;gap:10px;align-items:baseline}
.picker-item:hover{border-color:var(--brand);background:#f4f7fc}
.picker-item b{font-size:13px}.picker-item small{color:var(--muted)}
.qf-card{width:min(560px,94vw)}

/* dashboard extras */
.kpi .kicon{font-size:20px;margin-bottom:4px}
.alerts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.al-chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
.al-chip.warn{color:var(--warn);border-color:#f0d9b5}
.al-chip.danger{color:var(--danger);border-color:#f3c2c7}
.al-chip:hover{filter:brightness(.97)}
.dash-2col{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.quick-acts{display:flex;flex-wrap:wrap;gap:8px}
.legend{display:flex;align-items:center;gap:16px;margin-top:8px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* CSS bar chart (crisp, responsive — replaces distorted SVG) */
.bars{display:flex;align-items:flex-end;gap:12px;height:180px;padding:6px 2px 0;border-bottom:1px solid var(--line)}
.bar-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.bar-pair{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:0}
.bar{width:30%;max-width:22px;min-height:3px;border-radius:4px 4px 0 0;transition:.2s}
.bar.s{background:#1f5fd1}.bar.p{background:#bcd0ee}
.bar-pair:hover .bar.s{background:var(--brand-d)}
.bar-x{text-align:center;font-size:11px;color:var(--faint);padding-top:6px}

/* nav search + collapsible groups */
.nav-search{width:calc(100% - 24px);margin:6px 12px 4px;padding:8px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;font-size:13px}
.nav-search::placeholder{color:rgba(255,255,255,.5)}
.nav-search:focus{outline:0;border-color:var(--brand2);background:rgba(255,255,255,.14)}
.nav-title{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
.nav-caret{font-size:9px;opacity:.55;transition:.15s}
.nav-group.collapsed .nav-item{display:none!important}
.nav-group.collapsed .nav-caret{transform:rotate(-90deg)}

/* entity lookup field */
.lookup-wrap{display:flex;gap:6px}
.lookup-wrap input{flex:1}
.lookup-wrap .btn{white-space:nowrap}

@media(max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .view{padding:14px 12px 40px}
  .de-body{padding:14px 10px 60px}
  .dash-2col{grid-template-columns:1fr}
}