@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}.project-card{display:block;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s}.project-card:hover{transform:translateY(-2px);border-color:#b9d5c9;box-shadow:0 12px 28px #173c2d12}.project-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.project-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--green-pale);color:var(--green);font-size:21px}.project-card h2{font:700 18px Manrope,sans-serif;margin:8px 0}.project-card p,.project-controls p{font-size:13px;color:var(--muted);margin:0 0 16px}.project-card .text-link{font-size:13px;font-weight:700}.project-info{color:var(--muted);font-size:13px;margin-left:auto}.project-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.project-controls h2{font:700 19px Manrope,sans-serif;margin:5px 0}.project-controls p{margin:0}.project-controls form{display:flex;align-items:end;gap:10px}.qty-control{display:flex;align-items:center;gap:10px}.qty-control input{width:130px}.qty-control span{color:var(--muted);font-size:13px}.project-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.project-status{font-size:22px!important}.project-status.good{color:var(--green)}.project-note{padding:13px 16px;margin:0 0 16px;border-radius:11px;background:#eef4f0;color:#49665b;font-size:13px}.bom-table{min-width:1000px}.bom-table .refs-cell{max-width:220px;white-space:normal;font-size:12px;color:#64736c}.bom-table .part-title{min-width:170px}.back-link{display:block;margin:0 0 10px;color:var(--green);font:600 13px 'DM Sans',sans-serif;text-decoration:none}.project-map-modal{max-width:560px}.project-part-results{max-height:340px;overflow:auto;display:grid;gap:7px;margin-top:12px}.project-part-option{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:11px 12px;text-align:left;cursor:pointer;color:var(--ink)}.project-part-option:hover{border-color:var(--green);background:#f7fbf8}.project-part-option span{font-size:12px;color:var(--muted)}

:root {
  font-family: 'DM Sans', sans-serif;
  color: #182723;
  background: #f4f6f4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #14251f;
  --green: #28745e;
  --green-dark: #205b4a;
  --green-pale: #e6f0ea;
  --muted: #7b8983;
  --line: #e5eae6;
  --panel: #fff;
  --nav: #11241e;
  --nav-muted: #8ca098;
  --shadow: 0 5px 18px rgb(21 47 36 / 3.5%);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.sidebar {
  width: 252px; position: fixed; inset: 0 auto 0 0; z-index: 5;
  display: flex; flex-direction: column; padding: 27px 16px 18px;
  color: #ecf3ef; background: var(--nav);
}
.brand {
  display: flex; align-items: center; gap: 11px; padding: 0 7px;
  color: #f5f8f6; text-decoration: none; font: 800 19px Manrope, sans-serif;
  letter-spacing: -.75px;
}
.brand-mark {
  width: 37px; height: 37px; display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / 16%); border-radius: 11px;
  color: #eff8f2; background: #2c7960; font-size: 20px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
}
.brand small { display: block; margin-top: 2px; color: #90a79b; font: 700 8px 'DM Sans', sans-serif; letter-spacing: 1.45px; }
.workspace {
  display: flex; align-items: center; gap: 9px; margin: 31px 0 29px;
  padding: 11px 10px; border: 1px solid #2a3c35; border-radius: 9px;
  color: #d0dbd5; background: #1a2e27; font-size: 11px; font-weight: 600;
}
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #6fc39a; box-shadow: 0 0 0 3px rgb(111 195 154 / 12%); }
.chevron { margin-left: auto; color: #84978e; }
.nav-label { margin: 0 10px 10px; color: #788d83; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav a {
  height: 41px; display: flex; align-items: center; gap: 12px;
  padding: 0 11px; border: 1px solid transparent; border-radius: 8px;
  color: #a8b7af; text-decoration: none; font-size: 11px; font-weight: 500;
  transition: color .16s, background .16s, border-color .16s;
}
.sidebar nav a:hover { color: #f1f6f3; background: #1b3028; }
.sidebar nav a > span { width: 18px; color: #91a69a; font-size: 17px; text-align: center; }
.sidebar nav a.active { border-color: #345647; color: #f5faf6; background: #254638; font-weight: 700; }
.sidebar nav a.active > span { color: #8dd0aa; }
.nav-count { margin-left: auto; padding: 3px 7px; border-radius: 20px; color: #bdcec4; background: #344b40; font-size: 9px; }
.master-label { margin-top: 30px; }
.sidebar-bottom {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding: 16px 3px 0; border-top: 1px solid #2a3b34; font-size: 10px;
}
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3c5c4c; border-radius: 50%; color: #d5eee0; background: #294637; font-size: 9px; font-weight: 700; }
.sidebar-bottom strong { color: #e0e9e4; font-weight: 600; }
.sidebar-bottom small { display: block; margin-top: 3px; color: #8da097; font-size: 9px; }
.icon-button { margin-left: auto; border: 0; color: #91a49a; background: transparent; font-size: 16px; cursor: pointer; }

.main { min-height: 100vh; margin-left: 252px; }
.topbar {
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 38px; border-bottom: 1px solid var(--line); background: #fff;
}
.breadcrumbs { color: #95a099; font-size: 10px; }
.breadcrumbs span { padding: 0 9px; color: #c8d0cb; }
.breadcrumbs strong { color: #3d4d45; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.connected { color: #75837c; font-size: 10px; }
.connected i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #59ac7e; }
.date-chip { color: #78867f; font-size: 10px; }
.mobile-menu { display: none; }
.content { max-width: 1490px; margin: auto; padding: 35px 38px 58px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.eyebrow { margin-bottom: 8px; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.page-heading h1 { margin: 0; color: var(--ink); font: 750 27px Manrope, sans-serif; letter-spacing: -1px; }
.page-heading p { margin: 7px 0 0; color: #84918a; font-size: 11px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 35px; padding: 8px 13px; border: 1px solid #dfe6e1;
  border-radius: 7px; color: #3d4d45; background: #fff; font-size: 10px;
  font-weight: 600; cursor: pointer; transition: .16s ease;
}
.button:hover { transform: translateY(-1px); border-color: #a9c4b5; box-shadow: 0 3px 9px rgb(31 81 58 / 8%); }
.button.primary { border-color: var(--green); color: white; background: var(--green); box-shadow: 0 3px 8px rgb(40 116 94 / 16%); }
.button.primary:hover { border-color: var(--green-dark); background: var(--green-dark); }
.button.small { min-height: 27px; padding: 5px 9px; font-size: 9px; }
.actions { display: flex; gap: 8px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric, .card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.metric { position: relative; min-height: 111px; padding: 17px 18px 15px; overflow: hidden; }
.metric::after { position: absolute; right: -18px; bottom: -39px; width: 86px; height: 86px; border: 1px solid #f0f4f1; border-radius: 50%; content: ''; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #77857e; font-size: 10px; font-weight: 500; }
.metric-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #36745b; background: #ebf3ee; font-size: 14px; }
.metric-value { margin: 9px 0 2px; color: #1d3027; font: 750 25px Manrope, sans-serif; letter-spacing: -.9px; }
.metric-foot { color: #98a39d; font-size: 9px; }
.grid-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .9fr); gap: 15px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 13px; }
.card-head h2 { margin: 0; color: #2a3932; font-size: 12px; font-weight: 700; }
.card-head p { margin: 5px 0 0; color: #929e97; font-size: 9px; }
.text-link { color: var(--green); font-size: 9px; font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--green-dark); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 10px 14px; border-top: 1px solid #eff2ef; border-bottom: 1px solid #eff2ef; color: #98a39d; background: #fafcfb; font-size: 8px; font-weight: 700; letter-spacing: .75px; text-align: left; }
td { padding: 12px 14px; border-bottom: 1px solid #f0f3f1; color: #59675f; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfdfb; }
.part-title { color: #2d3c34; font-weight: 600; }
.subtext { display: block; margin-top: 3px; color: #99a49e; font-size: 9px; font-weight: 400; }
.pill { display: inline-flex; padding: 4px 8px; border-radius: 20px; color: #428163; background: #eaf3ed; font-size: 8px; font-weight: 700; }
.pill.low { color: #ba783b; background: #fff2e5; }
.pill.draft { color: #938047; background: #f5f2e7; }
.pill.posted { color: #43866a; background: #e8f3ee; }
.stock-cell { color: #34463c; font-weight: 700; }
.stock-cell.low { color: #bd783a; }
.summary-list { padding: 0 18px 11px; }
.summary-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #eff2ef; }
.summary-badge { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #bb793e; background: #fff3e8; font-weight: 700; }
.summary-row strong { display: block; color: #35443c; font-size: 10px; }
.summary-row small { color: #98a39d; font-size: 9px; }
.summary-row .value { margin-left: auto; color: #3b4a41; font-size: 10px; font-weight: 700; text-align: right; }
.section-gap { margin-top: 16px; }
.toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.search { position: relative; min-width: 210px; flex: 1; }
.search::before { position: absolute; top: 7px; left: 11px; color: #91a098; content: '⌕'; font-size: 17px; }
.search input, .field input, .field select, .field textarea {
  width: 100%; padding: 10px 11px; outline: none; border: 1px solid #e0e7e2;
  border-radius: 7px; color: #35443c; background: #fff; font-size: 11px;
}
.search input { padding-left: 32px; }
.search input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #83af97; box-shadow: 0 0 0 3px #eaf3ed; }
.filter-button { color: #718078; }
.empty { padding: 35px; color: #98a39d; font-size: 11px; text-align: center; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { color: #6f7d75; font-size: 9px; font-weight: 600; }
.field.full { grid-column: 1 / -1; }
.field textarea { min-height: 70px; resize: vertical; }
.dialog-title { margin: 0; color: var(--ink); font: 750 18px Manrope, sans-serif; letter-spacing: -.4px; }
.dialog-sub { margin: 6px 0 19px; color: #89968f; font-size: 10px; }
.modal-card { width: min(780px, calc(100vw - 30px)); max-height: 90vh; overflow: auto; padding: 25px; border: 0; border-radius: 13px; box-shadow: 0 22px 80px rgb(17 36 30 / 24%); }
.modal-card::backdrop { background: rgb(17 36 30 / 46%); backdrop-filter: blur(3px); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; }
.line-editor { display: grid; grid-template-columns: 2fr 1fr 1.5fr 36px; align-items: center; gap: 7px; margin-top: 8px; }
.line-editor select, .line-editor input { width: 100%; padding: 9px 7px; border: 1px solid #e0e7e2; border-radius: 6px; font-size: 10px; }
.ocr-hint { display:block; margin:4px 2px 0; color:#87958d; font-size:9px; line-height:1.4; }
.scan-upload { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; margin-bottom:14px; padding:13px; border:1px dashed #cbd9ce; border-radius:9px; background:#f8fbf8; }
.scan-upload label { display:block; margin-bottom:7px; color:#53645a; font-size:10px; font-weight:700; }
.scan-upload input { display:block; max-width:100%; font-size:10px; }
.scan-upload small { display:block; margin-top:5px; color:#87958d; font-size:9px; }
.receipt-preview { width:72px; height:66px; object-fit:cover; border-radius:6px; }
.ocr-result { margin:0 0 14px; color:#53645a; font-size:10px; }
.ocr-result pre { max-height:110px; overflow:auto; white-space:pre-wrap; padding:10px; border-radius:6px; background:#f5f7f5; font:10px/1.5 monospace; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 20; padding: 11px 16px; transform: translateY(8px); border-radius: 8px; color: white; background: #214f3e; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translateY(0); opacity: 1; }
.loading { padding: 100px; color: #87948c; font-size: 12px; text-align: center; }
[hidden] { display: none !important; }
.user-chip { padding: 6px 10px; border: 1px solid #e8ede9; border-radius: 20px; color: #53655a; background: #f8faf8; font-size: 9px; font-weight: 600; }
.user-actions { display: flex; gap: 6px; }
.role-card { overflow: hidden; }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid #eff2ef; background: #eff2ef; }
.role-grid > div { display: grid; align-content: start; gap: 7px; min-height: 123px; padding: 16px 18px; background: #fff; }
.role-grid strong { color: #35443c; font-size: 10px; }
.role-grid small { max-width: 240px; color: #8d9a92; font-size: 9px; line-height: 1.55; }
.role-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; }
.role-mark.admin { color: #35765b; background: #eaf3ed; }
.role-mark.editor { color: #8e7840; background: #f5f1e4; }
.role-mark.viewer { color: #627b93; background: #ecf1f5; }
.password-hint { color: #87958d; font-size: 9px; }
.auth-screen { background: radial-gradient(ellipse at 20% 20%, #e6efe9 0, transparent 38%), #f3f6f4; }
.auth-screen .main { margin-left: 0; }
.auth-screen .content { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid #e4ebe6; border-radius: 15px; background: #fff; box-shadow: 0 20px 70px rgb(18 48 35 / 9%); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 37px; color: #1a2a23; font: 800 19px Manrope, sans-serif; letter-spacing: -.7px; }
.login-brand small { display: block; margin-top: 2px; color: #91a097; font: 700 8px 'DM Sans', sans-serif; letter-spacing: 1.45px; }
.login-card .eyebrow { margin-bottom: 8px; }
.login-card h1 { margin: 0; color: var(--ink); font: 750 25px Manrope, sans-serif; letter-spacing: -.8px; }
.login-card > p { margin: 8px 0 22px; color: #849189; font-size: 11px; line-height: 1.6; }
.login-card form { display: grid; gap: 14px; }
.login-card .field { gap: 7px; }
.login-card .field span { color: #5c6b62; font-size: 10px; font-weight: 600; }
.login-card .field input { min-height: 41px; padding: 11px 12px; font-size: 11px; }
.login-submit { width: 100%; min-height: 41px; justify-content: space-between; margin-top: 4px; padding: 0 14px; font-size: 11px; }
.login-foot { display: flex; align-items: center; gap: 7px; margin-top: 25px; padding-top: 17px; border-top: 1px solid #eff2ef; color: #8b9890; font-size: 9px; }
.login-foot .status-dot { width: 6px; height: 6px; }
.login-error { margin: -10px 0 16px; padding: 9px 11px; border: 1px solid #f1d9d0; border-radius: 7px; color: #a45137; background: #fff5f1; font-size: 10px; }

@media (max-width: 1000px) {
  .sidebar { width: 226px; }
  .main { margin-left: 226px; }
  .content { padding: 29px 24px 48px; }
  .topbar { padding: 0 24px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-two { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .role-grid > div { min-height: auto; }
}
@media (max-width: 620px) {
  .sidebar { width: 252px; transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 24px rgb(17 36 30 / 18%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .topbar { height: 55px; padding: 0 15px; }
  .date-chip, .connected { display: none; }
  .mobile-menu { display: block; border: 0; color: #52645a; background: none; font-size: 19px; cursor: pointer; }
  .content { padding: 23px 14px 40px; }
  .page-heading { align-items: flex-start; gap: 12px; }
  .page-heading h1 { font-size: 23px; }
  .page-heading p { max-width: 260px; line-height: 1.5; }
  .page-heading .button { flex: 0 0 auto; padding: 8px 10px; font-size: 9px; }
  .metrics { gap: 9px; }
  .metric { min-height: 96px; padding: 13px; }
  .metric-value { font-size: 22px; }
  .toolbar { flex-wrap: wrap; }
  .search { min-width: 100%; order: 0; }
  .filter-button { order: 1; }
  .grid-two { gap: 11px; }
  .card-head { padding: 14px; }
  td, th { padding: 11px 10px; }
  .breadcrumbs { font-size: 10px; }
  .user-chip { display: none; }
  #logout { display: inline-flex; min-height: 28px; padding: 5px 8px; font-size: 9px; }
  .modal-card { padding: 20px; }
  .line-editor { grid-template-columns: 1.4fr .8fr 1.4fr 32px; gap: 5px; }
  .scan-upload { grid-template-columns:1fr auto; }
  .scan-upload img { display:none; }
}

@media(max-width:760px){.project-controls{align-items:stretch;flex-direction:column}.project-controls form{align-items:stretch;flex-direction:column}.project-controls form .button{width:100%}.project-metrics{grid-template-columns:1fr}.project-info{display:none}.project-card{padding:18px}.bom-table{min-width:930px}}

.project-actions{display:flex;gap:7px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}.button.danger{color:#a94442;border-color:#f0d4d2}.button.danger:hover{background:#fff5f4;border-color:#dda9a6}.bom-actions{white-space:nowrap}.bom-actions .button{margin:2px}

.project-actions-controls{display:flex;align-items:end;gap:8px}.production-button{background:#e6f0ea;color:#205b4a;border-color:#c6dbd0}.production-button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:760px){.project-actions-controls{display:grid;grid-template-columns:1fr 1fr}.project-actions-controls .button{width:100%}}
.part-actions{display:flex;gap:6px;align-items:center}.part-actions .button{white-space:nowrap}.project-blocked-note{margin-top:12px;padding:11px 14px;border:1px solid #f0dfc9;border-radius:8px;color:#77542b;background:#fffaf3;font-size:10px}