*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --k:#000;--w:#fff;
  --g50:#fafafa;--g100:#f4f4f4;--g200:#e8e8e8;--g400:#999;--g600:#555;
  --r:3px;
}
html{font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;line-height:1.5;color:var(--k);background:var(--w);min-height:100vh;}
a{color:inherit;text-decoration:none}

nav{position:sticky;top:0;z-index:100;background:var(--w);border-bottom:1px solid var(--g200);height:44px;display:flex;align-items:center;padding:0 24px;gap:28px;}
.nav-brand{display:flex;align-items:center}
.nav-logo{height:20px;width:auto;display:block}
nav a{font-size:13px;color:var(--g600)}
nav a:hover,nav a.active{color:var(--k)}
.nav-logout{margin-left:auto}

.page{padding:22px 24px;max-width:1280px}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.toolbar h1{font-size:17px;font-weight:600}
.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
h1{font-size:17px;font-weight:600;margin-bottom:18px}
h2{font-size:13px;font-weight:600;margin-bottom:12px}

.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;background:var(--g200);border:1px solid var(--g200);margin-bottom:24px;}
.stat{background:var(--w);padding:14px 16px}
.stat-value{font-size:22px;font-weight:600;line-height:1}
.stat-label{font-size:11px;color:var(--g400);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

.meta{font-size:12px;color:var(--g400);margin-bottom:10px}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--g400);padding:7px 10px;border-bottom:1px solid var(--g200);white-space:nowrap;}th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:2px}th a:hover{color:var(--k)}
td{padding:7px 10px;border-bottom:1px solid var(--g100);font-size:13px}
tr:hover td{background:var(--g50)}
small{font-size:11px}
.muted{color:var(--g400)}
.link{text-decoration:underline;text-underline-offset:2px}

/* Badges — clean mono, no colors */
.badge{display:inline-block;padding:1px 7px;border-radius:2px;font-size:11px;font-weight:500;white-space:nowrap;border:1px solid var(--g200);background:var(--w);color:var(--g600)}
.badge-green,.badge-blue,.badge-gray,.badge-red{background:var(--w);border:1px solid var(--g200);color:var(--k)}

/* Actions column for invoices */
.acts{display:flex;flex-direction:column;gap:3px;align-items:flex-start}

input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  height:32px;padding:0 9px;border:1px solid var(--g200);border-radius:var(--r);font-size:13px;font-family:inherit;color:var(--k);background:var(--w);outline:none;
}
textarea{height:auto;padding:7px 9px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--k)}
.input-search{width:200px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;border:none;font-family:inherit;text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--k);color:var(--w)}
.btn-primary:hover{background:#222}
.btn-secondary{background:var(--g100);color:var(--k);border:1px solid var(--g200)}
.btn-secondary:hover{background:var(--g200)}
.btn-sm{height:26px;padding:0 9px;font-size:12px}

.pagination{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap}
.pagination a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r);font-size:13px;border:1px solid var(--g200);color:var(--g600);}
.pagination a:hover{border-color:var(--k);color:var(--k)}
.pagination .cur{background:var(--k);color:var(--w);border-color:var(--k)}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.detail-card{border:1px solid var(--g200);padding:16px;border-radius:var(--r)}
.detail-card h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--g400);margin-bottom:12px}
.detail-row{display:flex;gap:10px;margin-bottom:6px;font-size:13px}
.detail-label{color:var(--g400);min-width:100px;flex-shrink:0}
.section-head{font-size:14px;font-weight:600;margin:20px 0 10px}

.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{width:300px}
.login-brand{font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin-bottom:30px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--g600);margin-bottom:4px}
.form-group input{width:100%;height:38px;font-size:14px}
.btn-login{width:100%;height:38px;background:var(--k);color:var(--w);border:none;font-size:13px;font-weight:600;cursor:pointer;margin-top:4px;border-radius:var(--r);font-family:inherit}
.btn-login:hover{background:#222}
.error-msg{color:#c62828;font-size:12px;margin-bottom:12px}

@media(max-width:768px){nav{gap:16px}.page{padding:16px}.stats{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.input-search{width:140px}}

/* Forms — compact */
.form-grid{display:flex;flex-direction:column;gap:14px}
.form-section{border:1px solid var(--g200);border-radius:var(--r);padding:14px;position:relative}
.form-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--g400);margin-bottom:12px}
.form-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.form-row:last-child{margin-bottom:0}
.form-col{display:flex;flex-direction:column;gap:3px;min-width:120px;flex:1}
.form-col-wide{flex:2}
.form-col-full{flex:1 1 100%}
.form-col label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--g600)}
.form-col input,.form-col select,.form-col textarea{width:100%}
.checkbox-group{display:flex;flex-wrap:wrap;gap:5px 10px;padding-top:2px}
.checkbox-label{font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--k)}
.checkbox-label input{width:auto;height:auto}
.form-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.form-msg{font-size:12px;color:#c62828}
.autocomplete-list{position:relative;background:var(--w);border:1px solid var(--g200);border-radius:var(--r);margin-top:2px;z-index:50;max-height:220px;overflow-y:auto}
.autocomplete-list:empty{display:none}
.autocomplete-item{padding:7px 10px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--g100)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover{background:var(--g50)}
.autocomplete-item small{color:var(--g400)}
.selected-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;background:var(--g100);border:1px solid var(--g200);border-radius:2px;font-size:12px}
.tag button{background:none;border:none;cursor:pointer;color:var(--g400);font-size:14px;line-height:1;padding:0}
.tag button:hover{color:var(--k)}

/* Model avatar in credit note form */
.model-avatar{position:absolute;top:14px;right:14px;width:60px;height:60px;border-radius:50%;background:var(--g100);border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--g600);flex-shrink:0}