:root{color:#1f2937;--brand:#ea580c;--brand-dark:#c2410c;--brand-soft:#fff2e8;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--surface:#fff;--radius:14px;--shadow-sm:0 1px 2px #1118270f;--shadow-md:0 6px 20px #11182712;background-color:#f4f6f8;font-family:Inter,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;line-height:1.5}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;background:radial-gradient(1100px 500px at 15% -10%,#ea580c17,#0000 60%),#f4f6f8;min-height:100vh;margin:0}.page{text-align:left;grid-template-columns:14.5rem minmax(0,1fr);align-items:start;gap:1.5rem;max-width:1320px;margin:0 auto;padding:1.75rem 1.5rem 3rem;display:grid}.page-main{min-width:0}.sidebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);flex-direction:column;gap:1.1rem;padding:1.15rem .85rem;display:flex;position:sticky;top:1.25rem}.menu-toggle{display:none}.sidebar .brand{letter-spacing:-.01em;color:var(--brand);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:.5rem;padding:.15rem .4rem .75rem;font-size:1rem;font-weight:800;display:flex}@media (width<=900px){.page{grid-template-columns:1fr;gap:1rem;padding:1rem .85rem 2.5rem}.sidebar{z-index:20;gap:.6rem;padding:.75rem;position:sticky;top:0}.menu-toggle{background:var(--brand-soft);color:var(--brand-dark);border:1px solid #fed7aa;align-items:center;gap:.35rem;padding:.4rem .7rem;font-size:.85rem;display:inline-flex}.sidebar .brand{border-bottom:none;padding-bottom:0}.sidebar .views{border-top:1px solid var(--line);flex-direction:column;gap:.35rem;padding-top:.6rem;display:none}.sidebar.menu-open .views{display:flex}.nav-button{width:100%;padding:.7rem .8rem}}@media (width<=720px){header{flex-direction:column;align-items:stretch;gap:.6rem;padding:.9rem 1rem}h1{font-size:1.15rem}.search{width:100%}.account{justify-content:space-between}.supplier-form{grid-template-columns:1fr;padding:1rem}.material-row{grid-template-columns:1fr 1fr;gap:.5rem}.material-row .material-actions{grid-column:1/-1}.location-row{flex-wrap:wrap}.location-row input{flex:100%}.form-actions button,.location-row button{flex:auto}.records-scroll,.report-scroll{max-height:60vh}.map{height:260px}.report-filters{grid-template-columns:1fr 1fr}.report-charts{grid-template-columns:1fr}.user-admin{padding:.9rem}.user-table{table-layout:auto;min-width:46rem}.user-tables-scroll{overflow-x:auto}button,input,select{font-size:16px}.records-table .row-actions button,.user-table .row-actions button{font-size:.8rem}}header{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:1rem 1.25rem;display:flex}h1{letter-spacing:-.02em;color:var(--ink);margin:0;font-size:1.4rem}.search{width:280px}input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #d6dae1;border-radius:9px;padding:.5rem .7rem;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px #ea580c26}.account{color:#55607a;align-items:center;gap:.6rem;font-size:.85rem;display:flex}.read-only-note{background:var(--brand-soft);color:#9a3412;border:1px solid #fed7aa;border-radius:10px;margin:0 0 1.25rem;padding:.7rem 1rem;font-size:.85rem}.login-page{justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{background:var(--surface);border:1px solid var(--line);width:350px;max-width:100%;box-shadow:var(--shadow-md);text-align:left;border-radius:18px;flex-direction:column;gap:.75rem;padding:2rem;display:flex}.login-card h1{font-size:1.4rem}.login-card label{flex-direction:column;gap:.3rem;font-size:.85rem;display:flex}.login-hint{color:#55607a;margin:0;font-size:.85rem}.supplier-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end;gap:.85rem;margin-bottom:1.5rem;padding:1.25rem;display:grid}.supplier-form h2{letter-spacing:-.01em;border-bottom:1px solid var(--line);grid-column:1/-1;margin:0 0 .15rem;padding-bottom:.6rem;font-size:1.05rem}.supplier-form label{color:#4b5563;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;display:flex}.supplier-form label input,.supplier-form label select{color:var(--ink);font-weight:400}.supplier-form label.wide,.supplier-form fieldset.wide{grid-column:1/-1}.supplier-form label.new-row{grid-column-start:1}.location-row{gap:.5rem;display:flex}.location-row input{flex:1}.location-row button{white-space:nowrap}.form-actions{grid-column:1/-1;align-items:end;gap:.5rem;display:flex}button{background:var(--brand);color:#fff;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:9px;padding:.5rem 1rem;font-weight:600;transition:background .15s,box-shadow .15s,border-color .15s}button:hover{background:var(--brand-dark)}button.secondary{color:#374151;background:#fff;border-color:#d6dae1;font-weight:500}button.secondary:hover{background:var(--brand-soft);color:#9a3412;border-color:#fdba74}button.danger{background:#dc2626}button.danger:hover{background:#b91c1c}.hint{color:#6b7280;font-size:.75rem}.pac-container{z-index:10}.error{color:#dc2626;grid-column:1/-1;margin:0;font-size:.85rem}.map{border:1px solid var(--line);border-radius:var(--radius);width:100%;height:360px;box-shadow:var(--shadow-sm);margin-bottom:1.5rem;overflow:hidden}table{border-collapse:collapse;width:100%}.records-scroll{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);max-height:28rem;box-shadow:var(--shadow-sm);margin-bottom:1.5rem;overflow:auto}.records-scroll table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%}.records-table .col-company{width:12rem}.records-table .col-branch{width:9rem}.records-table .col-contact{width:8rem}.records-table .col-email{width:12rem}.records-table .col-phone{width:8rem}.records-table .col-location{width:17rem}.records-table .col-material{width:12rem}.records-table .col-index{width:3rem}.photo-field .photo-controls{align-items:center;gap:.6rem;display:flex}.photo-preview{object-fit:contain;background:#f8fafc;border:1px solid #e2e5ea;border-radius:8px;max-width:14rem;max-height:9rem;margin-top:.5rem}.records-table .row-index,.records-table .col-index-head{text-align:right;color:#6b7280;font-variant-numeric:tabular-nums;white-space:nowrap}.records-table .col-tonnes{width:6.5rem}.records-table .col-tier,.records-table .col-created-by{width:9rem}.records-table .col-actions{width:8rem}.records-table td.created-by{color:var(--muted);font-size:.82rem}.records-table td{overflow-wrap:anywhere}.records-table thead th{white-space:normal;overflow-wrap:break-word}.records-table td.numeric{white-space:nowrap}.records-scroll thead th{z-index:2;text-transform:uppercase;letter-spacing:.04em;color:#7c2d12;background:#fdf6f1;border-bottom:1px solid #fed7aa;font-size:.75rem;position:sticky;top:0}.records-scroll tfoot td{z-index:2;background:#f8fafc;border-top:1px solid #e2e5ea;position:sticky;bottom:0}tbody tr{cursor:pointer}tbody tr.selected{background:var(--brand-soft)}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #e2e5ea;padding:.6rem .5rem;font-size:.9rem}th{white-space:nowrap;color:#374151}tbody tr:hover{background:#fafafa}tbody tr:nth-child(2n){background:#fcfcfd}tbody tr:nth-child(2n):hover{background:#fafafa}.company{font-weight:600}td.location{font-weight:700}.numeric{text-align:right;font-variant-numeric:tabular-nums}tfoot td{border-bottom:none;font-weight:600}.row-actions{text-align:right;white-space:nowrap}.row-actions button+button{margin-left:.4rem}.records-table .row-actions{z-index:1;text-align:center;vertical-align:top;background:#fff;border-left:1px solid #e2e5ea;padding:.5rem .6rem;position:sticky;right:0}.records-table thead th:last-child,.records-table tfoot td:last-child{z-index:3;background:#f8fafc;border-left:1px solid #e2e5ea;position:sticky;right:0}.records-table tr.selected .row-actions{background:var(--brand-soft)}.records-table .row-actions button{padding:.25rem .6rem;font-size:.8rem;line-height:1.4}.empty{text-align:center;color:#6b7280;padding:1.5rem}.notice{color:#15803d;font-size:.9rem}.link-button{color:var(--brand);cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem}.user-admin{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:1.25rem;padding:1rem 1.25rem}.user-admin h3{margin:1.25rem 0 .5rem;font-size:1rem}.user-table{border-collapse:collapse;table-layout:fixed;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;overflow:hidden}.user-table thead th{letter-spacing:.04em;text-transform:uppercase;color:#7c4a24;background:#fdf6f1;font-size:.72rem}.user-table td,.user-table th{overflow-wrap:anywhere;vertical-align:middle}.user-table .col-user-name{width:16%}.user-table .col-user-email{width:24%}.user-table .col-user-dept{width:15%}.user-table .col-user-phone{width:14%}.user-table .col-user-role{width:17%}.user-table .col-user-actions{width:14%}.user-table td.nowrap{white-space:nowrap}.user-table input,.user-table select{width:100%;min-width:0;padding:.35rem .45rem;font-size:.85rem}.user-table .row-actions{text-align:right}.user-table .row-actions button{border-radius:7px;padding:.28rem .6rem;font-size:.78rem}.role-badge{white-space:nowrap;border:1px solid #0000;border-radius:999px;padding:.15rem .55rem;font-size:.75rem;display:inline-block}.role-badge.role-admin{background:var(--brand-soft);color:#9a3412;border-color:#fed7aa}.role-badge.role-procurement{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.role-badge.role-marketing{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}.views{flex-direction:column;gap:.4rem;display:flex}.nav-button{color:#374151;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:.6rem;width:100%;padding:.6rem .75rem;font-size:.92rem;font-weight:600;transition:background .15s,color .15s;display:flex}.nav-button:hover{color:#9a3412;background:#ffedd5}.nav-button.active{border-color:var(--brand-dark);color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 4px 12px #ea580c47}.nav-button.active:hover{color:#fff}.nav-icon{font-size:1rem;line-height:1}.reports{gap:1.25rem;display:grid}.report-header{justify-content:space-between;align-items:center;display:flex}.report-cards{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;display:grid}.report-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);color:#6b7280;gap:.25rem;padding:.9rem 1rem;font-size:.85rem;display:grid}.report-value{color:#111827;font-size:1.5rem;font-weight:700}.report-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:.75rem 1.25rem 1.25rem}.report-block h3{margin:.75rem 0 .25rem;font-size:1rem}.report-dimensions{flex-wrap:wrap;gap:1rem;padding:.25rem 0 .5rem;display:flex}.report-dimensions .checkbox{flex-direction:row;align-items:center;gap:.4rem;font-size:.9rem;display:flex}.report-dimensions .checkbox input{width:auto;margin:0}.report-filters{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:end;gap:.75rem;padding-bottom:.5rem;display:grid}.report-filters label{color:#4b5563;flex-direction:column;gap:.3rem;font-size:.85rem;display:flex}.report-filters select{width:100%}.report-block table th.numeric,.report-block table td.numeric{width:7rem}.report-scroll{border:1px solid var(--line);background:var(--surface);border-radius:12px;max-height:30rem;overflow:auto}.breakdown-table{border-collapse:separate;border-spacing:0;min-width:100%}.breakdown-table th,.breakdown-table td{white-space:nowrap}.breakdown-table thead th{z-index:2;color:#7c2d12;text-transform:uppercase;letter-spacing:.04em;background:#fdf6f1;border-bottom:1px solid #fed7aa;font-size:.75rem;position:sticky;top:0}.breakdown-table tfoot td{background:#f8fafc;font-weight:600;position:sticky;bottom:0}.report-block tbody tr:nth-child(2n){background:#f9fafb}.report-block tbody tr{cursor:default}.report-charts{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem;display:grid}.report-charts figure{background:#fff;border:1px solid #e2e5ea;border-radius:8px;margin:0;padding:.75rem}.report-charts figcaption{color:#4b5563;margin-bottom:.4rem;font-size:.8rem}.report-charts svg{width:100%;height:auto}.chart-axis{fill:#6b7280;font-size:10px}.chart-value{fill:#374151;font-size:10px}.chart-centre{fill:#1b1f27;font-size:15px;font-weight:600}.chart-with-legend{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.chart-with-legend svg{flex:none;width:14rem}.chart-legend{color:#374151;margin:0;padding:0;font-size:.78rem;list-style:none}.chart-legend li{align-items:center;gap:.35rem;margin-bottom:.2rem;display:flex}.chart-legend strong{margin-left:auto;padding-left:.5rem}.chart-swatch{border-radius:2px;width:10px;height:10px;display:inline-block}.report-actions{justify-content:flex-end;gap:.5rem;padding-bottom:1rem;display:flex}.report-map{height:22rem;margin-bottom:.5rem}.supplier-form .materials{border:1px solid var(--line);background:#fcfcfd;border-radius:12px;gap:.75rem;margin-top:1.25rem;padding:.5rem 1rem 1rem;display:grid}.supplier-form .materials legend{text-transform:uppercase;letter-spacing:.04em;color:var(--brand-dark);padding:0 .35rem;font-size:.85rem;font-weight:700}.material-row{grid-template-columns:11rem 9rem 10rem auto;justify-content:start;align-items:end;gap:.75rem;display:grid}.material-row>label{min-width:0}.material-row>label select,.material-row>label input,.material-row>label .tonnage-input{width:100%;min-width:0}.material-actions{gap:.35rem;display:flex}.material-actions button{white-space:nowrap;border-radius:7px;padding:.3rem .55rem;font-size:.78rem}.material-grades{border:1px dashed #e5d3c6;border-left:3px solid var(--brand);background:#fffaf6;border-radius:10px;flex-direction:column;grid-column:1/-1;align-items:flex-start;gap:.5rem;margin-left:1rem;padding:.6rem .85rem;display:flex}.material-grades .grades-label{color:#374151;font-size:.85rem;font-weight:600}.grade-row{align-items:center;gap:.35rem;display:flex}.tonnage-input{display:block;position:relative}.tonnage-input input{width:100%;padding-right:1.8rem}.tonnage-input .unit{color:#6b7280;pointer-events:none;font-size:.85rem;position:absolute;top:50%;right:.6rem;transform:translateY(-50%)}.grade-tonnes{flex:none;width:8rem}.add-grade{align-self:flex-start;width:auto;padding:.15rem .5rem;font-size:.75rem;line-height:1.2}.grade-row select{flex:none;width:8rem;min-width:0}.mat-line{white-space:nowrap;text-overflow:ellipsis;height:1.5rem;line-height:1.5rem;overflow:hidden}.mat-line.grade-line{color:#6b7280;font-size:.8rem}.records-table td .mat-block+.mat-block{border-top:1px dashed #eceff3}.records-count{background:var(--brand-soft);color:#9a3412;border:1px solid #fed7aa;border-radius:999px;margin:0 0 .6rem;padding:.25rem .7rem;font-size:.8rem;font-weight:600;display:inline-block}.mat-line.grade-name{padding-left:.6rem}.row-total{border-top:1px solid #e2e5ea;margin-top:.2rem;padding-top:.2rem;font-weight:600}.map-legend{text-transform:capitalize;flex-wrap:wrap;gap:.5rem 1rem;margin:.5rem 0 0;padding:0;font-size:.8rem;list-style:none;display:flex}.map-legend li{align-items:center;gap:.35rem;display:flex}.legend-dot{border-radius:50%;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;margin-right:.35rem;font-size:.8rem;line-height:1;display:inline-flex}