*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#0F6E56;--primary-dark:#085041;--primary-light:#E1F5EE;
  --bg:#F8F7F4;--bg2:#FFFFFF;--border:#E5E4DF;
  --text:#1A1A18;--muted:#6B6B67;--radius:8px;--radius-lg:12px;
  --blue:#185FA5;--blue-bg:#E6F1FB;--red:#993C1D;--red-bg:#FAECE7;
}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);text-decoration:none;font-size:15px}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-link{color:var(--muted);text-decoration:none;font-size:14px;padding:4px 0}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active{border-bottom:2px solid var(--primary)}
.btn-new{background:var(--primary);color:#fff;padding:6px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;text-decoration:none;transition:background .15s}
.btn-new:hover{background:var(--primary-dark)}

/* LAYOUT */
.main{max-width:1120px;margin:0 auto;padding:2rem 1.5rem}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.page-header h1{font-size:22px;font-weight:600}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.form-layout{display:grid;grid-template-columns:1fr 310px;gap:1.25rem;align-items:start}
.catalog-layout{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start}
@media(max-width:768px){.form-layout,.catalog-layout{grid-template-columns:1fr}}
.sticky-card{position:sticky;top:64px}
.form-main,.form-side{min-width:0}

/* STATS */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:1.5rem}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.875rem 1rem}
.stat-card.wide{grid-column:span 2}
.stat-label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.stat-val{display:block;font-size:24px;font-weight:600}
.stat-val.green{color:var(--primary)}
.stat-val.blue{color:var(--blue)}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1rem;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 1rem;border-bottom:1px solid var(--border);background:var(--bg)}
.card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.card-body{padding:1rem}

/* TABLE */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.table th{padding:9px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}
.table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:#F5F4F0}
.center{text-align:center}

/* FIELDS */
.field{margin-bottom:.75rem}.field:last-child{margin-bottom:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr auto auto;gap:12px}
.flex2{grid-column:span 1}
label:not(.svc-row):not(.svc-item){display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);
  font-family:inherit;font-size:13px;background:var(--bg2);color:var(--text);outline:none;transition:border-color .15s
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,110,86,.1)}
textarea{resize:vertical}

/* SERVICES IN FORM */
.cat-group{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem;padding:12px}
.cat-group:last-child{margin-bottom:0}
.cat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;padding:0 4px}
.svc-row{display:flex;align-items:flex-start;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:8px;transition:all .15s}
.svc-row:last-child{margin-bottom:0}
.svc-row:hover{border-color:#b5d5cb}
.svc-row.selected{border-color:var(--primary);background:var(--primary-light)}
.svc-info{flex:1;min-width:0}
.svc-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.svc-name{font-size:14px;font-weight:500;color:#4a4a48}
.svc-row.selected .svc-name{color:var(--primary-dark)}
.svc-desc{font-size:12px;color:var(--muted);line-height:1.4}
.svc-right{flex-shrink:0}
.svc-price{font-size:14px;font-weight:700;color:var(--primary)}
.svc-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;letter-spacing:.02em}
.svc-badge-blue{background:var(--blue-bg);color:var(--blue)}
.svc-badge-red{background:var(--red-bg);color:var(--red)}
.svc-chk{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;margin-top:2px}

/* ITEMS IN SUMMARY */
.item-row-edit{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border)}
.item-row-edit:last-child{border-bottom:none}
.item-edit-info{flex:1;min-width:0}
.item-edit-name{font-size:13px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-edit-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.empty-items{padding:8px 0}

/* SUMMARY */
.sum-row{display:flex;justify-content:space-between;padding:2px 0}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}

/* BADGES */
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px}

/* BUTTONS */
.btn-primary{display:inline-block;padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s;text-align:center}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary.full{display:block;width:100%}
.btn-outline{display:inline-block;padding:7px 12px;border:1px solid var(--border);background:var(--bg2);border-radius:var(--radius);font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;text-decoration:none}
.btn-outline:hover{background:var(--bg)}
.btn-outline.full{display:block;width:100%;text-align:center}
.icon-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:none;display:inline-block;line-height:1.5;font-family:inherit}
.icon-btn:hover{background:var(--bg);color:var(--text)}
.icon-btn.danger:hover{border-color:#d85a30;color:#d85a30}
.icon-btn.sm{padding:2px 6px;font-size:12px}
.toggle-row{display:flex;gap:4px}
.tgl{padding:4px 10px;font-size:12px;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;color:var(--muted);font-family:inherit}
.tgl.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* DOC */
.doc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:740px;margin:0 auto;overflow:hidden}
.doc-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem;border-bottom:1px solid var(--border);background:var(--bg)}
.doc-brand{font-size:18px;font-weight:700;color:var(--primary)}
.doc-num{font-size:16px;font-weight:600;font-family:'DM Mono',monospace}
.doc-meta{display:flex;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}
.doc-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.doc-table{width:100%;border-collapse:collapse}
.doc-table th{padding:8px 1.5rem;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg)}
.doc-table td{padding:10px 1.5rem;border-bottom:1px dashed var(--border)}
.doc-table tr:last-child td{border-bottom:none}
.doc-totals{padding:1rem 1.5rem;background:var(--bg);border-top:1px solid var(--border)}
.doc-total-line{display:flex;justify-content:space-between;padding:3px 0;font-size:13px}
.doc-total-line.grand{font-size:17px;font-weight:600}
.doc-notes{padding:1rem 1.5rem;border-top:1px solid var(--border)}
.doc-footer{padding:.75rem 1.5rem;border-top:1px solid var(--border);background:var(--bg);text-align:center;font-size:11px}

/* MISC */
.div{border:none;border-top:1px solid var(--border)}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:'DM Mono',monospace}
.fw{font-weight:500}
.full{width:100%}
.green{color:var(--primary)}
.blue{color:var(--blue)}
.red{color:var(--red)}
.link{color:var(--primary);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}
.actions-cell{white-space:nowrap;text-align:right}
.empty{text-align:center;padding:4rem 2rem;color:var(--muted)}

/* Flash messages */
.flash-wrap { padding: 0 2rem; margin-top: 0; }
.flash { padding: 10px 1rem; margin: 8px 0; border-radius: var(--radius); font-size: 13px; border: 1px solid; }
.flash-success { background: var(--primary-light); color: var(--primary-dark); border-color: #9ADCC8; }
.flash-error   { background: #FAECE7; color: #993C1D; border-color: #F5C4B5; }

/* User pill in nav */
.user-pill { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px 3px 8px; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text); }
.role-badge { font-size: 10px; font-weight: 600; background: var(--primary-light); color: var(--primary); border-radius: 10px; padding: 1px 6px; }
.logout-btn { font-size: 12px; color: var(--muted); text-decoration: none; padding-left: 4px; border-left: 1px solid var(--border); margin-left: 2px; }
.logout-btn:hover { color: var(--red); }

/* Filter bar */
.filter-bar{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
.filter-bar input[type=text]{min-width:160px}
.filter-bar input[type=date]{width:140px}
.filter-bar select{width:160px}
.icon-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}