/* ============================================================
   DentalFlow App — jedinstveni dizajn sustav
   Isti tokeni kao skrimsystems.com landing page
   ============================================================ */

:root{
  --ink: #16241F;
  --ink-soft: #3E4B44;
  --muted: #6A776F;
  --bg: #FAF8F4;
  --surface: #F1ECE1;
  --white: #FFFFFF;
  --border: #E3DDCE;

  --brand: #1F4A3D;
  --brand-dark: #14332A;
  --brand-tint: #E7EFE9;

  --accent: #C4883B;
  --accent-dark: #9C6B2A;
  --accent-tint: #F6EBDA;

  --blue: #2857C9;
  --blue-tint: #E4EBFB;
  --grey: #5B6660;
  --grey-tint: #EBE8E0;
  --red: #B3261E;
  --red-tint: #FBEAE8;
  --orange: #B4611E;
  --orange-tint: #FBEEE1;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow: 0 2px 14px rgba(20,51,42,0.05);
}

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }

html, body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; }
button, input, select, textarea{ font-family: var(--sans); }

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 500;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}

/* Kicker labels — kvieta verzija, ne shouting-caps */
.eyebrow{
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* ============================================================
   APP SHELL — sidebar + topbar + content
   ============================================================ */

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

.app-sidebar{
  width: 250px;
  background:
    radial-gradient(circle at 15% 0%, rgba(196,136,59,0.10), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.04), transparent 45%),
    var(--brand-dark);
  color: #fff;
  padding: 26px 18px;
  display:flex;
  flex-direction:column;
  gap: 30px;
  position: sticky; top:0; height:100vh; flex-shrink:0;
}

.sidebar-brand{ display:flex; align-items:center; gap:12px; padding: 0 6px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand-mark, .brand-logo-mark{
  width:42px; height:42px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
  flex-shrink:0;
}
.brand-text h2{ font-family: var(--serif); font-size:19px; font-weight:600; color:#fff; margin:0; letter-spacing:-0.01em; }
.brand-text span{ font-size:10px; color: var(--accent); text-transform:uppercase; letter-spacing:0.12em; font-weight:700; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:14px;
  padding: 11px 14px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,0.58);
  text-decoration:none;
  font-size:14px; font-weight:500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-item:hover{ background: rgba(255,255,255,0.05); color:#fff; }
.nav-item.active{
  background: rgba(196,136,59,0.14);
  border-left-color: var(--accent);
  color:#fff;
  font-weight:600;
}
.nav-item.active .nav-icon{ stroke: var(--accent); }
.nav-icon{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:1.75; flex-shrink:0; }

.sidebar-footer{ display:flex; flex-direction:column; gap:6px; border-top:1px solid rgba(255,255,255,0.08); padding-top:16px; }
.user-mini{ display:flex; align-items:center; gap:10px; padding: 6px; }
.user-mini-avatar{
  width:36px; height:36px; border-radius:10px;
  background:#fff; color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex-shrink:0;
}
.user-mini-text{ display:flex; flex-direction:column; line-height:1.25; }
.user-mini-text strong{ font-size:13px; color:#fff; }
.user-mini-text span{ font-size:11px; color: rgba(255,255,255,0.55); }
.logout-item{ margin-top:4px; }

.app-main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.app-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:20;
}
.topbar-label{ font-family: var(--serif); font-size:19px; color: var(--brand-dark); }
.topbar-actions{ display:flex; align-items:center; gap:16px; }

.topbar-search{
  display:flex; align-items:center; gap:8px;
  background: var(--bg);
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  width: 260px;
}
.topbar-search input{ border:none; background:none; outline:none; font-size:14px; flex:1; color:var(--ink); }
.search-svg{ width:16px; height:16px; stroke: var(--muted); fill:none; stroke-width:2; flex-shrink:0; }

.topbar-user{ display:flex; align-items:center; gap:10px; }
.topbar-avatar{
  width:36px; height:36px; border-radius:10px;
  background: var(--brand-tint); color: var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex-shrink:0;
}
.topbar-user strong{ display:block; font-size:13px; }
.topbar-user span{ display:block; font-size:11px; color: var(--muted); }

.app-content{ padding: 30px 32px 60px; flex:1; }

/* ============================================================
   PAGE HERO
   ============================================================ */

.clinic-hero, .lead-profile-hero{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 24px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.clinic-hero h1, .lead-profile-hero h1{ font-size: 30px; margin-bottom:6px; }
.clinic-hero p, .lead-profile-hero p{ color: var(--muted); font-size:14px; max-width:52ch; }

.hero-date{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  text-align:right;
  min-width: 130px;
}
.hero-date span{ display:block; font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.hero-date strong{ display:block; font-family: var(--serif); font-size:26px; color: var(--brand-dark); }
.hero-date small{ font-size:11px; color: var(--muted); }

.back-link{ display:inline-block; margin-bottom:10px; font-size:13px; color: var(--brand); text-decoration:none; font-weight:600; }
.back-link:hover{ text-decoration:underline; }

/* ============================================================
   CONTROL PANEL (clinic filter)
   ============================================================ */

.control-panel{
  display:flex; justify-content:space-between; align-items:center;
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 20px; margin-bottom:22px; flex-wrap:wrap; gap:12px;
}
.clinic-filter-form{ display:flex; align-items:center; gap:10px; }
.clinic-filter-form label{ font-size:13px; color: var(--muted); font-weight:600; }
.clinic-filter-form select{
  padding:8px 12px; border:1px solid var(--border); border-radius: var(--radius-sm);
  font-size:14px; background: var(--bg); color: var(--ink);
}
.control-meta{ font-size:13px; color: var(--muted); }
.control-meta strong{ color: var(--brand-dark); }

/* ============================================================
   OVERVIEW / STAT CARDS
   ============================================================ */

.overview-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:16px;
}
.overview-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; display:flex; justify-content:space-between; align-items:flex-start;
}
.overview-card.primary{ background: var(--brand); border-color: var(--brand); }
.overview-card.primary span, .overview-card.primary strong{ color:#fff; }
.overview-card span{ display:block; font-size:12px; color: var(--muted); font-weight:600; margin-bottom:8px; }
.overview-card strong{ font-family: var(--serif); font-size:30px; color: var(--brand-dark); }
.overview-card small{ font-size:12px; color: var(--muted); align-self:flex-end; }
.card-icon{ font-size:18px; color: rgba(255,255,255,0.7); }

.secondary-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:30px;
}
.mini-stat{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.mini-stat span{ display:block; font-size:11px; color: var(--muted); margin-bottom:6px; }
.mini-stat strong{ font-size:20px; color: var(--brand-dark); }
.mini-stat.warning strong{ color: var(--orange); }
.mini-stat.danger strong{ color: var(--red); }

/* ============================================================
   PANELS (generic container)
   ============================================================ */

.panel{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px; box-shadow: var(--shadow);
}
.panel-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; gap:16px; flex-wrap:wrap; }
.panel-header.simple{ margin-bottom:20px; }
.panel-header h2{ font-size:18px; display:flex; align-items:center; gap:8px; }
.panel-header h2 span{ font-family: var(--sans); font-size:12px; font-weight:700; background: var(--surface); color: var(--muted); padding:2px 9px; border-radius:999px; }
.panel-header p{ font-size:13px; color: var(--muted); margin-top:4px; }

.workspace-grid{ display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; }
.side-panel{ display:flex; flex-direction:column; gap:16px; }
.small-panel h3{ font-size:15px; margin-bottom:6px; }
.small-panel p{ font-size:13px; color: var(--muted); margin-bottom:8px; }
.side-link{ font-size:13px; color: var(--brand); font-weight:600; text-decoration:none; }
.side-link:hover{ text-decoration:underline; }

.export-btn{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--brand-tint); color: var(--brand-dark);
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.export-btn:hover{ background: var(--brand); color:#fff; }

/* ============================================================
   TABLE
   ============================================================ */

.table-wrap{ overflow-x:auto; }
.premium-table{ width:100%; border-collapse: collapse; }
.premium-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em;
  color: var(--muted); font-weight:700; padding: 10px 12px; border-bottom:1px solid var(--border);
}
.premium-table td{ padding: 13px 12px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.premium-table tbody tr:hover{ background: var(--bg); }
.patient-link{ color: var(--brand-dark); font-weight:600; text-decoration:none; }
.patient-link:hover{ text-decoration:underline; }
.muted-cell{ color: var(--muted); font-size:13px; }
.actions-cell{ display:flex; gap:8px; white-space:nowrap; }

.btn-view{
  background: var(--brand-tint); color: var(--brand-dark);
  padding:6px 12px; border-radius: 8px; font-size:12px; font-weight:700; text-decoration:none;
}
.btn-view:hover{ background: var(--brand); color:#fff; }
.btn-delete{
  background: var(--red-tint); color: var(--red);
  border:none; padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer;
}
.btn-delete:hover{ background: var(--red); color:#fff; }

.dashboard-leads-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; margin-top:6px; border-top:1px solid var(--border);
  font-size:13px; color: var(--muted);
}
.dashboard-leads-footer a{ color: var(--brand); font-weight:600; text-decoration:none; }
.dashboard-leads-footer a:hover{ text-decoration:underline; }

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status{
  display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:700;
}
.status.novi{ background: var(--brand-tint); color: var(--brand-dark); }
.status.kontaktiran{ background: var(--accent-tint); color: var(--accent-dark); }
.status.rezerviran{ background: var(--blue-tint); color: var(--blue); }
.status.zavrsen, .status.završen{ background: var(--grey-tint); color: var(--grey); }
.status.otkazano{ background: var(--red-tint); color: var(--red); }
.status.nedolasci{ background: var(--orange-tint); color: var(--orange); }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state{ text-align:center; padding: 50px 20px; }
.empty-icon{ font-size:34px; margin-bottom:12px; }
.empty-state h3{ font-size:16px; margin-bottom:6px; }
.empty-state p{ font-size:13px; color: var(--muted); margin-bottom:16px; }
.clear-filter-btn{
  display:inline-block; background: var(--brand); color:#fff;
  padding: 9px 18px; border-radius: var(--radius-sm); text-decoration:none; font-size:13px; font-weight:600;
}

/* ============================================================
   TOOLBAR / SEARCH / STATUS TABS
   ============================================================ */

.toolbar-clean{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.search-clean{ display:flex; align-items:center; gap:8px; }
.search-clean input{
  padding: 9px 14px; border:1px solid var(--border); border-radius: var(--radius-sm);
  font-size:13px; width:240px; background: var(--bg);
}
.search-clean button{
  background: var(--brand); color:#fff; border:none; padding:9px 16px;
  border-radius: var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer;
}
.search-clean button:hover{ background: var(--brand-dark); }
.clear-link{ font-size:13px; color: var(--muted); text-decoration:none; }
.clear-link:hover{ color: var(--brand); }

.status-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.status-tabs a{
  padding:7px 14px; border-radius:999px; font-size:12px; font-weight:600;
  color: var(--muted); text-decoration:none; border:1px solid var(--border);
}
.status-tabs a.active, .status-tabs a:hover{ background: var(--brand); color:#fff; border-color: var(--brand); }

.panel-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.secondary-action{
  display:inline-flex; align-items:center; padding: 9px 16px;
  border:1px solid var(--border); border-radius: var(--radius-sm);
  font-size:13px; font-weight:600; color: var(--brand-dark); text-decoration:none;
}
.secondary-action:hover{ background: var(--surface); }

/* ============================================================
   FORMS (settings, novi lead, clinics)
   ============================================================ */

.settings-layout{ display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; }
.settings-main{ display:flex; flex-direction:column; gap:16px; }
.settings-section-head{ margin-bottom:16px; }
.settings-section-head h2{ font-size:17px; }
.settings-section-head p{ font-size:13px; color: var(--muted); margin-top:4px; }

.form-grid{ display:grid; gap:14px; margin-bottom:14px; }
.form-grid.two{ grid-template-columns: 1fr 1fr; }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-field label{ font-size:12px; font-weight:700; color: var(--brand-dark); }
.form-field input, .form-field select, .form-field textarea{
  padding: 11px 14px; border:1px solid var(--border); border-radius: var(--radius-sm);
  font-size:14px; background: var(--bg); color: var(--ink); resize:vertical;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.premium-form input:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color: var(--accent);
}

.settings-side{ display:flex; flex-direction:column; gap:16px; }
.settings-save-card, .settings-tip-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md); padding:20px;
}
.settings-save-card h3, .settings-tip-card h3{ font-size:15px; margin-bottom:6px; }
.settings-save-card p, .settings-tip-card p{ font-size:13px; color: var(--muted); margin-bottom:14px; }

.primary-action{
  background: var(--brand); color:#fff; border:none; padding: 11px 20px;
  border-radius: var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer;
}
.primary-action:hover{ background: var(--brand-dark); }
.primary-action.full{ width:100%; }

.danger-panel{ border-color: var(--red-tint); }
.danger-action{
  width:100%; background: var(--red-tint); color: var(--red); border:1px solid var(--red-tint);
  padding: 11px; border-radius: var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer;
}
.danger-action:hover{ background: var(--red); color:#fff; }

/* Clinics page */
.clinic-admin-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; margin-bottom:26px; }
.premium-form{ display:flex; flex-direction:column; }
.admin-info-panel h3{ font-size:16px; margin: 8px 0 10px; }
.admin-info-panel p{ font-size:13px; color: var(--muted); margin-bottom:18px; }
.info-list{ display:flex; flex-direction:column; gap:10px; }
.info-list div{ display:flex; justify-content:space-between; padding: 10px 0; border-top:1px solid var(--border); font-size:13px; }
.info-list span{ color: var(--muted); }
.info-list strong{ color: var(--brand-dark); }

.clinic-cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.clinic-card{ border:1px solid var(--border); border-radius: var(--radius-md); padding:20px; }
.clinic-card-top{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.clinic-avatar{
  width:42px; height:42px; border-radius:12px; background: var(--brand-tint); color: var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.clinic-card-top h3{ font-size:15px; }
.clinic-card-top p{ font-size:12px; color: var(--muted); }
.clinic-meta{ display:flex; justify-content:space-between; margin-bottom:14px; }
.clinic-meta span{ display:block; font-size:11px; color: var(--muted); }
.clinic-meta strong{ font-size:13px; }
.clinic-link-box{
  background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom:14px; display:flex; justify-content:space-between; font-size:12px;
}
.clinic-link-box a{ color: var(--brand); font-weight:600; text-decoration:none; }
.clinic-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.clinic-actions form{ display:flex; flex:1; min-width:0; }
.clinic-actions .secondary-action,
.clinic-actions .clinic-delete-btn{
  flex:1;
  min-width: 0;
  justify-content:center;
  white-space:nowrap;
  padding-left: 10px;
  padding-right: 10px;
}
.clinic-delete-btn{
  display:inline-flex; align-items:center;
  width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--red-tint);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
}
.clinic-delete-btn:hover{ background: var(--red); border-color: var(--red); color:#fff; }

/* ============================================================
   LEAD DETAIL
   ============================================================ */

.lead-status-card{ text-align:right; }
.lead-status-card span{ display:block; font-size:11px; color: var(--muted); margin-bottom:6px; }

.lead-info-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:22px; }
.lead-info-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-sm); padding:16px;
}
.lead-info-card span{ display:block; font-size:11px; color: var(--muted); margin-bottom:6px; }
.lead-info-card strong{ font-size:15px; }
.lead-info-card a{ color: var(--brand); text-decoration:none; }

.lead-detail-layout{ display:grid; grid-template-columns: 1fr 300px; gap:20px; align-items:start; }
.lead-main{ display:flex; flex-direction:column; gap:16px; }
.lead-section-head{ margin-bottom:14px; }
.lead-section-head h2{ font-size:17px; }
.lead-message-box{
  background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; font-size:14px; line-height:1.6; white-space:pre-wrap;
}

.note-form-premium{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.note-form-premium textarea{
  padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-sm);
  min-height:80px; font-size:14px; resize:vertical;
}
.notes-list-premium{ display:flex; flex-direction:column; gap:10px; }
.note-card{ background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-sm); padding:14px; }
.note-card-head{ display:flex; justify-content:space-between; margin-bottom:6px; }
.note-card-head span{ font-size:11px; color: var(--muted); }
.note-delete{ background:none; border:none; color: var(--red); font-size:12px; font-weight:600; cursor:pointer; }
.empty-note-state{ text-align:center; padding: 26px 0; color: var(--muted); font-size:13px; }

.lead-side{ display:flex; flex-direction:column; gap:16px; }
.lead-action-panel h3, .lead-contact-panel h3{ font-size:15px; margin-bottom:6px; }
.lead-action-panel p{ font-size:13px; color: var(--muted); margin-bottom:14px; }
.status-form-premium{ display:flex; flex-direction:column; gap:10px; }
.status-form-premium select{
  padding: 10px 12px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:14px;
}
.contact-row{ display:flex; justify-content:space-between; padding: 10px 0; border-top:1px solid var(--border); font-size:13px; }
.contact-row a{ color: var(--brand); text-decoration:none; font-weight:600; }

/* ============================================================
   ANALYTICS / STATISTIKE
   ============================================================ */

.analytics-metrics{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom:20px; }
.analytics-card{ background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md); padding:20px; }
.analytics-card span{ display:block; font-size:12px; color: var(--muted); margin-bottom:8px; }
.analytics-card strong{ font-family: var(--serif); font-size:28px; color: var(--brand-dark); }
.analytics-card small{ display:block; font-size:11px; color: var(--muted); margin-top:6px; }

.analytics-layout{ display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; }
.analytics-main{ display:flex; flex-direction:column; gap:16px; }
.analytics-side{ display:flex; flex-direction:column; gap:16px; }
.analytics-panel-head{ margin-bottom:14px; }
.analytics-panel-head h2{ font-size:17px; }
.analytics-panel-head p{ font-size:13px; color: var(--muted); margin-top:4px; }
.chart-canvas-wrap{ width:100%; }

.premium-services-list{ display:flex; flex-direction:column; gap:14px; }
.usluga-item{ display:flex; flex-direction:column; gap:6px; }
.usluga-header{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; }
.usluga-bar-wrap{ height:6px; background: var(--surface); border-radius:999px; overflow:hidden; }
.usluga-bar{ height:100%; background: var(--brand); border-radius:999px; }

.donut-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; }
.legend-item{ display:flex; align-items:center; gap:8px; font-size:12px; }
.legend-dot{ width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.legend-label{ flex:1; color: var(--ink-soft); }
.legend-val{ font-weight:700; }
.legend-pct{ color: var(--muted); font-weight:500; font-size:11px; }

.insight-panel h3{ font-size:15px; margin-bottom:6px; }
.insight-panel p{ font-size:13px; color: var(--muted); }

/* ============================================================
   LOGIN
   ============================================================ */

.login-body{ background: var(--bg); }
.login-page{ display:grid; grid-template-columns: 1.1fr 0.9fr; min-height:100vh; }

.login-left{
  padding: 64px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(circle at 15% 20%, rgba(31,74,61,0.08), transparent 30%),
    var(--bg);
}
.login-brand-premium{ display:flex; align-items:center; gap:14px; }
.login-brand-badge{
  width:44px; height:44px; border-radius:12px; background: var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px;
}
.login-brand-premium h1{ font-size:20px; }
.login-brand-premium span{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:0.08em; }

.login-copy{ max-width:480px; }
.login-copy h2{ font-size:38px; margin: 14px 0 12px; }
.login-copy p{ color: var(--muted); font-size:15px; line-height:1.6; }

.login-feature-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.login-feature-grid div{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-md); padding:18px;
}
.login-feature-grid span{ display:block; font-family: var(--serif); color: var(--accent-dark); font-size:16px; margin-bottom:10px; }
.login-feature-grid strong{ display:block; font-size:14px; margin-bottom:6px; }
.login-feature-grid p{ font-size:12px; color: var(--muted); }

.login-right{ display:flex; align-items:center; justify-content:center; background: var(--white); border-left:1px solid var(--border); padding: 40px; }
.login-card-premium{ width:100%; max-width:380px; }
.login-card-head{ margin-bottom:24px; }
.login-card-icon{ font-size:26px; margin-bottom:12px; }
.login-card-head h2{ font-size:22px; margin-bottom:6px; }
.login-card-head p{ font-size:13px; color: var(--muted); }

.login-error{
  background: var(--red-tint); color: var(--red); padding:10px 14px; border-radius: var(--radius-sm);
  font-size:13px; margin-bottom:16px;
}

.login-form-premium{ display:flex; flex-direction:column; gap:16px; }
.login-field{ display:flex; flex-direction:column; gap:6px; }
.login-field label{ font-size:12px; font-weight:700; color: var(--brand-dark); }
.login-field input{
  padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:14px; background: var(--bg);
}
.login-field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.login-form-premium button{
  background: var(--brand); color:#fff; border:none; padding:13px; border-radius: var(--radius-sm);
  font-size:15px; font-weight:700; cursor:pointer;
}
.login-form-premium button:hover{ background: var(--brand-dark); }
.login-footer-note{ margin-top:20px; font-size:12px; color: var(--muted); text-align:center; }
.login-footer-note strong{ color: var(--brand-dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px){
  .overview-grid, .secondary-grid{ grid-template-columns: repeat(2,1fr); }
  .workspace-grid, .settings-layout, .lead-detail-layout, .analytics-layout, .clinic-admin-grid{ grid-template-columns: 1fr; }
  .analytics-metrics{ grid-template-columns: repeat(2,1fr); }
  .lead-info-grid{ grid-template-columns: repeat(2,1fr); }
  .login-page{ grid-template-columns: 1fr; }
  .login-left{ padding: 36px; }
}

@media (max-width: 760px){
  .app-sidebar{ display:none; }
  .app-content{ padding: 20px; }
  .topbar-search{ display:none; }
  .form-grid.two{ grid-template-columns: 1fr; }
  .overview-grid, .secondary-grid, .analytics-metrics, .lead-info-grid{ grid-template-columns: 1fr; }
  .login-feature-grid{ grid-template-columns: 1fr; }
}