:root{
  --accent:#0067C0;
  --accent-light:#E5F1FB;
  --accent-dark:#004E8C;
  --bg:#F3F3F3;
  --surface:#FFFFFF;
  --surface-2:#FAFAFA;
  --border:#E1E1E1;
  --text:#1B1B1B;
  --text-secondary:#5C5C5C;
  --text-muted:#8A8A8A;
  --green:#0F7B0F;
  --green-bg:#DFF6DD;
  --blue:#0067C0;
  --blue-bg:#E5F1FB;
  --amber:#9D5D00;
  --amber-bg:#FFF4CE;
  --red:#C42B1C;
  --red-bg:#FDE7E9;
  --gray-bg:#F0F0F0;
  --radius:6px;
  --radius-lg:8px;
  --sidebar-w:232px;
  --topbar-h:56px;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI Variable","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:12px 8px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px 20px;
}
.brand .mark{
  width:30px;height:30px;border-radius:6px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
}
.brand .name{font-size:15px;font-weight:600;}
.brand .sub{font-size:11px;color:var(--text-muted);display:block;margin-top:-2px;}

.nav-group-label{
  font-size:11px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:14px 12px 6px;
}

.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;
  border-radius:var(--radius);
  color:var(--text-secondary);
  font-size:13.5px;
  cursor:pointer;
  margin-bottom:2px;
}
.nav-item i{font-size:17px;width:18px;text-align:center;}
.nav-item:hover{background:var(--gray-bg);color:var(--text);}
.nav-item.active{
  background:var(--accent-light);
  color:var(--accent-dark);
  font-weight:600;
  position:relative;
}
.nav-item.active::before{
  content:"";
  position:absolute;left:-8px;top:8px;bottom:8px;
  width:3px;border-radius:3px;background:var(--accent);
}

.sidebar-footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:8px;
}
.user-chip{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius);
}
.user-chip:hover{background:var(--gray-bg);}
.avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-light);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
}
.user-chip .who{font-size:12.5px;}
.user-chip .who .name{font-weight:600;display:block;}
.user-chip .who .role{color:var(--text-muted);font-size:11.5px;}

/* Main area */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
  height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;
  padding:0 20px;
  gap:16px;
}
.topbar h1{font-size:16px;font-weight:600;margin:0;flex-shrink:0;}
.search{
  position:relative;flex:1;max-width:320px;
}
.search i{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:15px;
}
.search input{
  width:100%;padding:7px 10px 7px 32px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface-2);font-size:13px;
}
.search input:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}

.icon-btn{
  width:34px;height:34px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:16px;cursor:pointer;
}
.icon-btn:hover{background:var(--gray-bg);}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
}
.btn:hover{background:var(--gray-bg);}
.btn-primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.btn-primary:hover{background:var(--accent-dark);}

.content{padding:20px 24px 32px;flex:1;overflow:auto;}

.select{
  padding:7px 30px 7px 10px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--surface);
  font-size:13px;color:var(--text);
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%235C5C5C" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat;background-position:right 8px center;
}

/* Cards */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:20px;
}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 18px;
}
.kpi-card .label{font-size:12.5px;color:var(--text-secondary);margin:0 0 8px;}
.kpi-card .value{font-size:26px;font-weight:600;margin:0;}
.kpi-card .trend{font-size:12px;margin-top:6px;display:flex;align-items:center;gap:4px;}
.trend.up{color:var(--green);}
.trend.down{color:var(--red);}

.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px;
}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.panel-header h2{font-size:14.5px;font-weight:600;margin:0;}
.panel-header .link{font-size:12.5px;color:var(--accent);font-weight:600;cursor:pointer;}

.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}

.legend{
  display:flex;align-items:center;gap:16px;
  font-size:12px;color:var(--text-secondary);margin-bottom:12px;
}
.legend .dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
thead td, thead th{
  padding:9px 18px;color:var(--text-secondary);font-weight:600;
  font-size:12px;text-align:left;background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
tbody td{padding:11px 18px;border-bottom:1px solid var(--border);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.num{text-align:right;}
td.sub{color:var(--text-secondary);}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:600;
}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-blue{background:var(--blue-bg);color:var(--blue);}
.badge-amber{background:var(--amber-bg);color:var(--amber);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-gray{background:var(--gray-bg);color:var(--text-secondary);}

.owner-dot{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:6px;}
.owner-frontdesk{background:var(--blue);}
.owner-billing{background:var(--green);}
.owner-ar{background:var(--amber);}
.owner-auto{background:var(--text-muted);}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;}
.tab{
  padding:9px 4px;margin-right:20px;font-size:13.5px;color:var(--text-secondary);
  cursor:pointer;position:relative;font-weight:500;
}
.tab.active{color:var(--text);font-weight:600;}
.tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.field-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.field-row label{font-size:12px;color:var(--text-secondary);font-weight:600;}
.field-row input, .field-row select, .field-row textarea{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 10px;font-size:13px;font-family:inherit;background:var(--surface);
}
.field-row input:focus, .field-row select:focus, .field-row textarea:focus{
  outline:none;border-color:var(--accent);
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.day-col{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:10px;min-height:360px;
}
.day-col .day-head{font-size:12.5px;font-weight:600;color:var(--text-secondary);padding:4px 4px 10px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.appt-card{
  background:var(--blue-bg);border-left:3px solid var(--blue);border-radius:4px;
  padding:8px 10px;margin-bottom:8px;font-size:12px;
}
.appt-card .time{font-weight:600;color:var(--blue);display:block;margin-bottom:2px;}
.appt-card.done{background:var(--green-bg);border-left-color:var(--green);}
.appt-card.done .time{color:var(--green);}

.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.settings-row:last-child{border-bottom:none;}
.settings-row .label{font-size:13.5px;font-weight:500;}
.settings-row .desc{font-size:12px;color:var(--text-secondary);margin-top:2px;}

.switch{
  width:38px;height:22px;border-radius:100px;background:var(--border);
  position:relative;cursor:pointer;flex-shrink:0;
}
.switch.on{background:var(--accent);}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:.15s;
}
.switch.on::after{left:18px;}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.role-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:100px;font-size:12px;font-weight:600;
  border:1px solid var(--border);
}