/* AutoSmile — panel craft layer.
   Brand idea: "Quiet Precision" — calm surfaces, exact spacing, restraint over decoration.
   Loaded after dashboard.css/admin.css in both panel.html and admin.html. */

/* ============ dark mode tokens ============ */
:root[data-theme="dark"]{
  --canvas:#0c1014;
  --surface:#141a21;
  --surface-2:#111820;
  --line:#232c36;
  --text:#e8eaf0;
  --muted:#98a2b0;
  --muted-2:#6e7a89;
  --teal-soft:#3a1b22;
  --amber-soft:#2c2312;
  --blue-soft:#141f33;
  --violet-soft:#3a1b22;
  --shadow:0 20px 50px rgba(0,0,0,.42);
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] html{background:var(--canvas)}
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .clinic-card,
:root[data-theme="dark"] .wizard-panel,
:root[data-theme="dark"] .automation-card{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .metric-card.accent-card{background:#1b2430;border-color:#243040}
:root[data-theme="dark"] .quiet-button,
:root[data-theme="dark"] .field-row input,
:root[data-theme="dark"] .field-row select,
:root[data-theme="dark"] .day-hours-row input[type=time]{background:var(--surface-2);border-color:var(--line);color:var(--text)}
:root[data-theme="dark"] .primary-button{background:var(--teal);color:#0b0f14}
:root[data-theme="dark"] .primary-button:hover{background:var(--teal-dark);color:#fff}
:root[data-theme="dark"] .gray-tag{background:#1d242d;color:var(--muted)}
:root[data-theme="dark"] .status-draft{background:#1d242d;color:var(--muted)}
:root[data-theme="dark"] .empty-state{border-color:var(--line)}
:root[data-theme="dark"] .topbar{background:rgba(12,16,20,.82);border-color:var(--line)}
:root[data-theme="dark"] table thead th{color:var(--muted-2)}
:root[data-theme="dark"] .mini-list-row,
:root[data-theme="dark"] .automation-toggle-row,
:root[data-theme="dark"] .check-row{border-color:var(--line)}

/* dashboard.css hardcodes #fff on many surfaces; remap them all in one pass rather than
   editing each rule, so the light theme stays byte-identical. */
:root[data-theme="dark"] .mobile-menu,
:root[data-theme="dark"] .global-search,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .notification-popover,
:root[data-theme="dark"] .dashboard-site-back,
:root[data-theme="dark"] .dashboard-lang,
:root[data-theme="dark"] .period-control select,
:root[data-theme="dark"] .action-list button,
:root[data-theme="dark"] .inbox-shell,
:root[data-theme="dark"] .list-toolbar button,
:root[data-theme="dark"] .conversation,
:root[data-theme="dark"] .conversation-detail>header,
:root[data-theme="dark"] .message.ai>div,
:root[data-theme="dark"] .reply-box,
:root[data-theme="dark"] .calendar-header button,
:root[data-theme="dark"] .week-strip button,
:root[data-theme="dark"] .data-toolbar button,
:root[data-theme="dark"] .table-footer button,
:root[data-theme="dark"] .automation-summary,
:root[data-theme="dark"] .search-results,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .modal>header button,
:root[data-theme="dark"] .tour-card,
:root[data-theme="dark"] .tour-prev,
:root[data-theme="dark"] .role-badge,
:root[data-theme="dark"] .report-history-list button,
:root[data-theme="dark"] .plan-manage,
:root[data-theme="dark"] .danger-button,
:root[data-theme="dark"] .conversation-tabs.standalone-tabs,
:root[data-theme="dark"] .take-over-btn,
:root[data-theme="dark"] .settings-save{background:var(--surface);border-color:var(--line);color:var(--text)}
:root[data-theme="dark"] .danger-button{color:var(--danger);border-color:rgba(220,100,100,.45)}
:root[data-theme="dark"] .global-search input{color:var(--text)}
:root[data-theme="dark"] .conversation{border-bottom-color:var(--line)}
:root[data-theme="dark"] .conversation:hover,
:root[data-theme="dark"] .conversation.active{background:var(--surface-2)}
:root[data-theme="dark"] .attention-rail,
:root[data-theme="dark"] .handoff-banner,
:root[data-theme="dark"] .slot-alert{background:#241d0f;border-color:#3a2f18}
:root[data-theme="dark"] .toggle i{background:#e8eaf0}
:root[data-theme="dark"] .decision-icon{background:var(--surface-2)}
:root[data-theme="dark"] .system-card{background:rgba(246,124,150,.08);border-color:rgba(246,124,150,.18)}

/* ============ real clinic panel: canonical brand tokens ============
   2026-08-31, direct request: "marka kitabı sayfamızı kullanabilirsin" (marka.html /
   BRAND-IDENTITY.md). dashboard.css predates the finalized brand system and never got synced —
   its --teal/--teal-dark tokens are a made-up pink (#f67c96/#d65873), nothing close to the
   approved Brand Rose (#E11D48, the FILL colour) and Accent Ink (#B3123B, the only accent value
   that clears WCAG AA as TEXT — see marka.html §05). Every dashboard.css rule already reads colour
   through these variables, so remapping them here is enough to bring the whole real panel back in
   line with the canonical palette without editing dashboard.css itself (admin.html/dashboard.html
   demo keep their current look — this is scoped to .panel-real only). Values taken verbatim from
   assets/styles.css's :root, the same tokens marka.html itself renders from. */
.panel-real{
  --obsidian:#0E0C11;                     /* Obsidian */
  --teal:#E11D48;                         /* Brand Rose — fill only, never body text */
  --teal-dark:#B3123B;                    /* Accent Ink — the accessible TEXT variant */
  --teal-soft:rgba(225,29,72,.10);        /* Accent soft wash */
  --text:#17151A;                         /* Ink */
  --muted:#54505C;                        /* Ink Soft */
  --muted-2:#726E7C;                      /* Ink Faint */
  --line:rgba(25,22,23,.10);
  --line-dark:rgba(255,255,255,.12);
  --radius:16px;
  --shadow:0 1px 2px rgba(25,22,23,.04),0 6px 18px -10px rgba(25,22,23,.16);
  --danger:#B3123B;                       /* red status text and Rose are the same family in this brand */
}
.panel-real .red-tag{background:rgba(225,29,72,.10);color:#B3123B}

/* 2026-08-31, direct question: "kırmızı rengi çok fazla kullanmayı panelde tercih etmek sağlıklı
 * mı bilmiyorum" — fair, and the brand book agrees with the instinct (marka.html §05: "the default
 * visual rhythm is white ... with controlled Brand Rose fields", never a wash). Two separate
 * problems fixed together here:
 *  1. A real bug: dashboard.css has ~20 places that hardcode the OLD teal literally as
 *     rgba(35,199,183,X) — never routed through the --teal variable at all, so the token remap a
 *     few turns ago could not touch them. Several sit right next to the new rose (e.g. a rose icon
 *     stroke on a leftover cyan-teal background) — a visible colour clash, not a matter of taste.
 *  2. Genuine overuse: once those are fixed to route through brand tokens, most of them are
 *     ambient washes (focus glows, hover borders, a persistent sidebar card background) rather than
 *     the "controlled fields" (a button, a badge, a single active-state mark) the brand book means.
 *     Those go neutral ink-grey instead of rose — rose stays only where it is actually a deliberate
 *     accent: the active nav indicator, small count badges, and genuine positive/selected states. */
.panel-real :focus-visible{outline-color:rgba(25,22,23,.35)}
.panel-real .clinic-switcher:hover{border-color:rgba(255,255,255,.22)}
.panel-real .system-card{border-color:var(--line);background:var(--surface-2)}
.panel-real .pulse-dot,.panel-real .status-pip{background:var(--positive,#3FBE87)}
.panel-real .global-search:focus-within{border-color:var(--line);box-shadow:0 0 0 3px rgba(25,22,23,.06)}
.panel-real .metric-head>i{background:var(--surface-2);color:var(--muted)}
.panel-real .metric-head>i.mint-icon,.panel-real .metric-head>i.blue-icon,.panel-real .metric-head>i.amber-icon{color:inherit}
/* New module-accent icon variants for Overview's real stat cards — colours taken directly from
   marka.html §05's product-accent table (Calendar #6366F1) and the positive/status pair
   (#3FBE87), not invented, so the "richer" card design still routes through brand tokens. */
.panel-real .metric-head>i.indigo-icon{background:rgba(99,102,241,.12);color:#6366F1}
.panel-real .metric-head>i.positive-icon{background:rgba(63,190,135,.14);color:#107A57}
.panel-real .metric-card.accent-card .metric-foot em{background:rgba(255,255,255,.14);color:#fff}
.panel-real .week-strip button.active i{background:rgba(255,255,255,.16);color:#fff}
.panel-real .field-row input:focus,.panel-real .field-row select:focus{border-color:var(--line);box-shadow:0 0 0 3px rgba(25,22,23,.07)}
/* "Connected" is a positive/success state, not a brand-accent one — it was borrowing the old teal
   by coincidence, not by design. */
.panel-real .gcal-connect.connected{border-color:rgba(63,190,135,.35);background:rgba(63,190,135,.06)}
.panel-real .tour-trigger{border-color:var(--line);background:var(--surface-2);color:var(--text)}
.panel-real .tour-trigger:hover{background:var(--surface);border-color:rgba(25,22,23,.18)}
.panel-real .tour-highlight{border-color:rgba(25,22,23,.5)}
.panel-real .tour-highlight::before{border-color:rgba(25,22,23,.28)}

/* Typography: dashboard.css hardcodes "Manrope" and "IBM Plex Mono" by name in every individual
   rule (not via a variable), so there is no single selector to redirect — instead the font NAMES
   themselves are redefined for this document only, to the brand book's actual Plus Jakarta Sans
   (display) and JetBrains Mono (technical/eyebrows/counters). @font-face is global to the page it's
   declared on, never scoped to a class, which is exactly why this lives inline in panel.html rather
   than here — admin.html loads its own real Manrope/IBM Plex Mono and is unaffected. See the <style>
   block in panel.html's <head>. */

.theme-toggle{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--muted);font-size:14px;transition:.15s}
.theme-toggle:hover{color:var(--text);border-color:var(--teal)}

/* ============ skeleton loading ============ */
.sk{position:relative;overflow:hidden;background:var(--line);border-radius:7px;display:block}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sk-sweep 1.4s infinite}
:root[data-theme="dark"] .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes sk-sweep{100%{transform:translateX(100%)}}
.sk-line{height:11px;margin-bottom:8px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
.sk-card{min-height:120px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

/* ============ empty states, upgraded ============ */
.empty-state{display:grid;justify-items:center;gap:2px;padding:44px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.empty-state .es-glyph{width:44px;height:44px;margin-bottom:10px;display:grid;place-items:center;border-radius:13px;
  background:var(--teal-soft);color:var(--teal-dark);font-size:19px}
.empty-state strong{display:block;color:var(--text);font:700 13px Manrope,sans-serif;letter-spacing:-.01em}
.empty-state span.es-body{max-width:340px;font-size:10.5px;line-height:1.65;color:var(--muted)}
.empty-state .es-action{margin-top:12px;height:34px;padding:0 14px;border:1px solid var(--line);background:var(--surface);
  border-radius:9px;color:var(--text);font:600 10px Inter,sans-serif;transition:.15s}
.empty-state .es-action:hover{border-color:var(--teal);color:var(--teal-dark)}

/* ============ view transition ============ */
.view.active{animation:view-rise .26s cubic-bezier(.22,.61,.36,1)}
@keyframes view-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ micro-interactions ============ */
.nav-item{transition:background .15s,color .15s,box-shadow .18s}
.primary-button,.quiet-button,.danger-button,.es-action{transition:transform .12s,box-shadow .18s,background .15s,border-color .15s,color .15s}
.primary-button:active,.quiet-button:active,.danger-button:active{transform:translateY(1px)}
.clinic-card:focus-visible,.nav-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.tag,.status-pill{transition:background .15s}

/* ============ command palette ============ */
.cmdk-backdrop{position:fixed;inset:0;z-index:4000;background:rgba(11,15,20,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:grid;place-items:start center;padding-top:14vh}
.cmdk{width:min(540px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px rgba(11,15,20,.28);overflow:hidden;animation:cmdk-in .16s cubic-bezier(.22,.61,.36,1)}
@keyframes cmdk-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.cmdk-input-row{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line)}
.cmdk-input-row>span{color:var(--muted-2);font-size:14px}
.cmdk-input-row input{width:100%;border:0;background:transparent;outline:0;color:var(--text);font-size:13px}
.cmdk-input-row kbd{padding:3px 6px;border:1px solid var(--line);border-radius:5px;color:var(--muted-2);font:500 8px IBM Plex Mono,monospace}
.cmdk-list{max-height:330px;overflow-y:auto;padding:7px}
.cmdk-group{margin:8px 10px 4px;color:var(--muted-2);font:500 8px IBM Plex Mono,monospace;letter-spacing:.11em}
.cmdk-item{width:100%;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 11px;
  border:0;background:transparent;border-radius:9px;text-align:left;color:var(--text);font-size:11.5px}
.cmdk-item i{font-style:normal;color:var(--muted);font-size:13px;text-align:center}
.cmdk-item small{color:var(--muted-2);font-size:9px}
.cmdk-item.active,.cmdk-item:hover{background:var(--teal-soft);color:var(--teal-dark)}
.cmdk-item.active i,.cmdk-item:hover i{color:var(--teal-dark)}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted-2);font-size:10.5px}

/* ============ clinic card refinement ============ */
.clinic-card{display:grid;gap:16px;align-content:space-between}
.clinic-card-head{align-items:center}
.clinic-card-head h3{font-size:14.5px}
.clinic-card-head p{margin:3px 0 0}
.clinic-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:13px;border-top:1px solid var(--line)}
.plan-tag{color:var(--muted);font:500 9px IBM Plex Mono,monospace;letter-spacing:.04em}

/* ============ admin: usage meters ============ */
.usage-cell{min-width:130px;padding:4px 12px 4px 0}
.usage-track{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.usage-track i{display:block;height:100%;border-radius:6px;background:var(--teal)}
.usage-track i.near{background:var(--amber)}
.usage-track i.over{background:var(--danger)}
.usage-cell small{display:block;margin-top:4px;color:var(--muted-2);font:500 8px IBM Plex Mono,monospace}

/* ============ admin: health triage ============ */
.triage-row{display:grid;grid-template-columns:10px 1fr auto;gap:13px;align-items:center;padding:14px 16px;margin-bottom:8px;
  border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;transition:border-color .15s}
.triage-row:hover{border-color:var(--teal)}
.triage-dot{width:9px;height:9px;border-radius:50%}
.triage-row.tone-green .triage-dot{background:var(--teal)}
.triage-row.tone-amber .triage-dot{background:var(--amber)}
.triage-row.tone-red .triage-dot{background:var(--danger)}
.triage-row strong{display:block;font-size:11.5px}
.triage-row small{color:var(--muted);font-size:9.5px}
.triage-score{font:700 15px Manrope,sans-serif;color:var(--muted)}
.triage-row.tone-red .triage-score{color:var(--danger)}
.triage-row.tone-green .triage-score{color:var(--teal-dark)}

/* ============ admin: clinic detail action bar ============ */
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:18px}
.inline-field{display:grid;gap:5px}
.inline-field span{color:var(--muted-2);font:600 8px IBM Plex Mono,monospace;letter-spacing:.06em}
.inline-field select{height:38px;padding:0 11px;border:1px solid var(--line);background:var(--surface);
  border-radius:9px;color:var(--text);font-size:10px}

/* ============ ROI hero ============ */
.roi-hero{padding:26px 28px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}
.roi-hero h3{margin:8px 0 8px;max-width:640px;font:600 20px/1.4 Manrope,sans-serif;letter-spacing:-.025em}
.roi-hero h3 strong{color:var(--teal-dark);font-weight:700}
.roi-hero p{margin:0;max-width:560px;color:var(--muted);font-size:10px;line-height:1.65}
:root[data-theme="dark"] .roi-hero{background:var(--surface);border-color:var(--line)}

/* ============ clinic-side automations list ============ */
[data-automation-real-list]{display:block}
.automation-summary-row{display:flex;align-items:center;gap:28px;margin-bottom:14px;padding:16px 20px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}
.automation-summary-row strong{display:block;font:700 24px/1 Manrope,sans-serif;letter-spacing:-.04em}
.automation-summary-row span{color:var(--muted-2);font:500 8px IBM Plex Mono,monospace;letter-spacing:.1em}
.automation-summary-row p{margin:0 0 0 auto;max-width:290px;color:var(--muted);font-size:9.5px;text-align:right}
.automation-list{display:grid;gap:8px}
.automation-row{display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;padding:14px 16px;
  border:1px solid var(--line);background:var(--surface);border-radius:13px;transition:border-color .15s}
.automation-row:hover{border-color:rgba(246,124,150,.4)}
.automation-row .ar-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:#f1f2f5;color:var(--muted-2);font-size:15px}
.automation-row.is-on .ar-icon{background:var(--teal-soft);color:var(--teal-dark)}
.automation-row strong{display:block;font-size:12px;letter-spacing:-.01em}
.automation-row small{color:var(--muted);font-size:9.5px}
:root[data-theme="dark"] .automation-summary-row,
:root[data-theme="dark"] .automation-row{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .automation-row .ar-icon{background:var(--surface-2)}
@media (max-width:720px){
  .automation-summary-row{flex-wrap:wrap;gap:18px}
  .automation-summary-row p{margin-left:0;text-align:left;max-width:none}
}

/* ============ onboarding progress ring ============ */
.progress-ring{width:38px;height:38px;flex:none;position:relative;display:grid;place-items:center}
.progress-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:3.5}
.progress-ring .ring-track{stroke:var(--line)}
.progress-ring .ring-fill{stroke:var(--teal);stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1)}
.progress-ring b{font:700 9px IBM Plex Mono,monospace;color:var(--muted)}
.clinic-card.is-live .progress-ring .ring-fill{stroke:var(--teal-dark)}

@media (prefers-reduced-motion: reduce){
  .view.active{animation:none}
  .cmdk{animation:none}
  .sk::after{animation:none}
  .progress-ring .ring-fill{transition:none}
}

/* ============ call log ============
   Rebuilt 2026-08-31 after real-test feedback ("çok karışık görünüyor" / "transkriptler çok
   karışık") — the old version ran head, tag, duration, summary and transcript together with no
   visual separation. Now: a clear two-line header, tag+duration pinned to their own row, summary
   called out as its own tinted block, and the transcript rendered as labelled speaker turns
   instead of one dumped paragraph. */
.calls-summary{display:flex;gap:28px;margin-bottom:14px;padding:16px 20px;max-width:720px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}
.calls-summary div{display:grid;gap:2px}
.calls-summary strong{font:700 22px/1 Manrope,sans-serif;letter-spacing:-.03em}
.calls-summary span{color:var(--muted-2);font:500 8px IBM Plex Mono,monospace;letter-spacing:.08em}
.calls-toolbar{margin-bottom:14px;max-width:720px}
.calls-list{display:grid;gap:14px;max-width:720px}
.call-card{padding:18px 20px;border-radius:14px}
.call-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.call-card-head>div{flex:1 1 auto;min-width:120px}
.call-card-head strong{display:block;font-size:12.5px;letter-spacing:-.01em}
.call-card-head small{color:var(--muted);font-size:9.5px}
.call-card-head .tag{margin-left:auto}
.call-duration{color:var(--muted-2);font:500 9.5px IBM Plex Mono,monospace;white-space:nowrap}
.call-summary{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:10.5px;line-height:1.6;color:var(--text)}
.call-summary strong{display:block;margin-bottom:3px;color:var(--muted);font:600 8px IBM Plex Mono,monospace;letter-spacing:.08em;text-transform:uppercase}
.call-card-audio{margin-top:12px}
.call-card-audio .hint{margin:0;color:var(--muted-2);font-size:9.5px}
.call-card-audio audio{width:100%;border-radius:8px}
.call-card-audio .quiet-button{font-weight:600}
.call-transcript{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.call-transcript summary{cursor:pointer;color:var(--accent-ink,var(--teal-dark));font-size:9.5px;font-weight:600;list-style:none}
.call-transcript summary::-webkit-details-marker{display:none}
.call-transcript summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.call-transcript[open] summary::before{transform:rotate(90deg)}
.transcript-body{margin-top:10px;max-height:340px;overflow-y:auto;display:grid;gap:8px;padding-right:4px}
.t-row{display:grid;gap:2px;padding:8px 10px;border-radius:9px;background:var(--surface-2)}
.t-row.t-ai{background:var(--teal-soft)}
.t-row b{color:var(--muted);font:700 8px IBM Plex Mono,monospace;letter-spacing:.06em;text-transform:uppercase}
.t-row.t-ai b{color:var(--teal-dark)}
.t-row p{margin:0;font-size:10.5px;line-height:1.55;color:var(--text)}

/* ============ integrations catalog ============ */
.integrations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.integration-card{padding:18px 20px;border-radius:13px}
.integration-card.is-soon{opacity:.75}
.integration-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.integration-card-head strong{font-size:13px;letter-spacing:-.01em}
.integration-card p.hint{margin:8px 0 0}
.integration-card small{display:block;margin-top:10px;color:var(--muted-2);font-size:9px}

@media (max-width:720px){
  .integrations-grid{grid-template-columns:1fr}
}

/* ============ patients: select + bulk delete, wider search ============
   2026-08-31, direct request: "seç butonu getir ve seçip silebilme olsun, ayrıca arama butonu
   bitişik ve boyutu küçük". The search field was the same cramped 330px/38px box dashboard.css
   defines for every data-toolbar; widened and given breathing room here without touching that
   shared rule (admin.html/dashboard.html keep the original size). */
.data-toolbar .search-field{width:380px;height:44px;padding:0 14px;gap:9px}
.data-toolbar .search-field span{font-size:14px;color:var(--muted-2)}
.data-toolbar .search-field input{font-size:11px}
@media (max-width:700px){.data-toolbar .search-field{width:100%}}
th.select-col,td.select-col{width:34px;padding-right:0}
th.select-col[hidden],td.select-col[hidden]{display:none}
[data-patient-select-toggle].active{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.danger-inline{border-color:rgba(220,100,100,.4)!important;color:var(--danger)!important}
.danger-inline:hover{background:rgba(220,100,100,.08)!important}

/* ============ real clinic panel: light sidebar ============
   2026-08-31, direct request: "panelin solundaki karanlık bölümü de aydınlık yap" — replace the
   inherited-from-the-marketing-demo dark (--obsidian) sidebar with a light one for the real clinic
   panel, closer to the reference screenshot the user attached. Scoped to .panel-real only —
   admin.html (internal staff tool) keeps the dark sidebar untouched. Overrides colors dashboard.css
   hardcodes rather than editing that shared file, same approach as the dark-mode block above. */
.panel-real .sidebar{background:#fff;color:var(--text);border-right:1px solid var(--line)}
.panel-real .brand-row .sidebar-close{color:var(--muted)}
.panel-real .clinic-switcher{border-color:var(--line);background:var(--surface-2);color:var(--text)}
.panel-real .clinic-switcher:hover{border-color:rgba(214,88,115,.35)}
.panel-real .clinic-switcher small{color:var(--muted)}
.panel-real .chevron{color:var(--muted-2)}
.panel-real .primary-nav>p{color:var(--muted-2)}
.panel-real .nav-item{color:var(--muted)}
.panel-real .nav-item:hover{color:var(--text);background:var(--surface-2)}
.panel-real .nav-item.active{color:var(--text);background:var(--teal-soft);box-shadow:inset 3px 0 0 var(--teal-dark)}
.panel-real .nav-item em{background:rgba(214,88,115,.14);color:var(--teal-dark)}
.panel-real .system-card{background:var(--teal-soft);border-color:rgba(214,88,115,.18)}
.panel-real .system-card strong{color:var(--text)}
.panel-real .system-card p{color:var(--muted)}
.panel-real .system-card>small{color:var(--muted-2)}
.panel-real .system-meter{background:rgba(214,88,115,.14)}
.panel-real .profile-row{color:var(--text)}
.panel-real .profile-row:hover{background:var(--surface-2)}
.panel-real .profile-avatar{background:var(--teal-soft);color:var(--teal-dark)}
.panel-real .profile-row small{color:var(--muted-2)}
.panel-real .profile-more{color:var(--muted-2)}
:root[data-theme="dark"] .panel-real .sidebar{background:var(--surface);border-right-color:var(--line)}
:root[data-theme="dark"] .panel-real .clinic-switcher{background:var(--surface-2)}

/* ============ real clinic panel: general design polish ============
   2026-08-31, direct request: "panelin tasarımını geliştir" — layout/depth/spacing only, colors
   untouched (a brand-pink recolor pass here was explicitly rejected and reverted — see below).
   dashboard.css was written for the marketing demo first and the real panel inherited it as-is:
   flat cards with no depth, a plain utilitarian topbar. This adds a soft, neutral (not brand-
   colored) shadow for a touch of the "quiet precision" this file's own header comment promises,
   without touching dashboard.css itself — admin.html keeps its current look untouched. */
.panel-real .panel,
.panel-real .metric-card,
.panel-real .automation-card,
.panel-real .settings-card,
.panel-real .clinic-card{box-shadow:0 1px 2px rgba(28,20,21,.03),0 14px 32px rgba(66,31,39,.05);transition:box-shadow .2s ease}
.panel-real .call-card:hover,
.panel-real .integration-card:hover,
.panel-real .automation-row:hover{box-shadow:0 1px 2px rgba(28,20,21,.04),0 10px 24px rgba(66,31,39,.08)}

/* 2026-08-31, direct correction: "önceki markamızın renkleri daha iyiydi geri döndür... renkleri
   değil" — the brand-pink recolor above (buttons, accent card, week-strip) was reverted; only the
   shape/depth/spacing polish below stays. Original --obsidian buttons, unchanged. */
.panel-real table thead th{background:var(--surface-2)}
:root[data-theme="dark"].panel-real table thead th,
.panel-real[data-theme="dark"] table thead th{background:var(--surface-2)}

/* Topbar search: same wider, more legible treatment already applied to the toolbars. */
.panel-real .global-search{width:290px;height:44px;border-radius:11px}
.panel-real .global-search input{font-size:11.5px}
@media (max-width:960px){.panel-real .global-search{width:220px}}

/* Empty states already exist (panel-craft.css above) but sat on a flat --teal-soft glyph badge
   everywhere; a hair more contrast and rounding reads calmer against the new light sidebar. */
.panel-real .empty-state{padding:52px 24px;border-radius:20px}
.panel-real .empty-state .es-glyph{width:48px;height:48px;border-radius:14px;font-size:21px}

/* Consistent, slightly larger corner radius across the panel's own surfaces for a softer, less
   boxy feel — kept modest (20px vs. the shared 18px) so nothing looks out of family. */
.panel-real{--radius:20px}
.panel-real .nav-item.active{border-radius:11px}

/* 2026-08-31, direct request: "genel olarak panel gözüme hoş gelmiyor... her açıdan beğendir" —
   a proper sidebar icon set replaced the unicode-glyph placeholders (⌂◫□◎✓↩↯↗◈◆), which was the
   single biggest "unfinished prototype" tell (see panel.html — every nav item and three of the
   five overview metric icons). This adds the breathing room a considered SaaS surface needs —
   dashboard.css's original 17px card padding was written for a dense admin-tool feel, not a
   product a clinic owner opens every morning. */
.panel-real .metric-card{padding:22px 22px 20px}
.panel-real .metric-card>strong{margin-top:20px}
.panel-real .welcome-row,.panel-real .page-heading{margin-bottom:28px}

/* ============ real clinic panel: mobile containment and touch layout ============ */
body.panel-real{max-width:100%;overflow-x:clip}
.panel-real .app-shell,
.panel-real .main-shell,
.panel-real .workspace-content,
.panel-real .view,
.panel-real .panel,
.panel-real .page-heading>*,
.panel-real .welcome-row>*{min-width:0;max-width:100%}
.panel-real img,.panel-real svg,.panel-real canvas,.panel-real video{max-width:100%}
.panel-real input,.panel-real select,.panel-real textarea{min-width:0;max-width:100%}
.panel-real .data-wrap,
.panel-real .table-wrap,
.panel-real .table-shell{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  .panel-real .sidebar{width:min(86vw,320px);max-width:320px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .panel-real .sidebar-backdrop{width:100vw;max-width:none}
  .panel-real .main-shell{width:100%;margin-left:0}
  .panel-real .topbar{width:100%;min-width:0;padding-right:max(14px,env(safe-area-inset-right));padding-left:max(14px,env(safe-area-inset-left))}
  .panel-real .topbar-title,.panel-real .topbar-actions{min-width:0}
  .panel-real .topbar-title>div{min-width:0}
  .panel-real .topbar h1{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .panel-real .workspace-content{width:100%;padding-right:max(16px,env(safe-area-inset-right));padding-left:max(16px,env(safe-area-inset-left))}
  .panel-real .page-heading,.panel-real .welcome-row{width:100%}
  .panel-real .notification-popover{max-width:calc(100vw - 24px)}
  .panel-real .modal-shell{padding:16px}
  .panel-real .modal{width:min(100%,560px);max-height:calc(100dvh - 32px);overflow:auto}
  .panel-real .toast{max-width:calc(100vw - 28px)}
}

@media (max-width:600px){
  .panel-real .topbar{height:64px;gap:8px}
  .panel-real .topbar-actions{gap:6px}
  .panel-real .dashboard-site-back,
  .panel-real .global-search,
  .panel-real .theme-toggle,
  .panel-real .role-badge,
  .panel-real .dashboard-lang,
  .panel-real .tour-trigger{display:none!important}
  .panel-real .mobile-menu,
  .panel-real .icon-button,
  .panel-real .quick-action{width:40px;height:40px;min-width:40px;border-radius:11px}
  .panel-real .topbar h1{max-width:calc(100vw - 158px);font-size:16px}
  .panel-real .workspace-content{padding-top:18px;padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(48px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left))}
  .panel-real .welcome-row,.panel-real .page-heading{margin-bottom:18px;gap:12px}
  .panel-real .welcome-row h2,.panel-real .page-heading h2{font-size:clamp(24px,8vw,31px);overflow-wrap:anywhere}
  .panel-real .metric-grid,.panel-real .settings-grid,.panel-real .role-legend-grid,.panel-real .sk-grid,.panel-real .integrations-grid{grid-template-columns:1fr!important}
  .panel-real .metric-card{min-height:148px}
  .panel-real .attention-rail{padding:13px;grid-template-columns:34px minmax(0,1fr)}
  .panel-real .attention-rail button{grid-column:2}
  .panel-real .panel,.panel-real .settings-card,.panel-real .roi-hero{border-radius:16px}
  .panel-real .performance-panel,.panel-real .appointments-panel,.panel-real .automation-panel,.panel-real .working-panel,.panel-real .settings-card,.panel-real .roi-hero{padding-right:16px;padding-left:16px}
  .panel-real .panel-head,.panel-real .page-heading-actions,.panel-real .data-toolbar,.panel-real .detail-header-actions,.panel-real .gcal-connect,.panel-real .channel-strip{align-items:stretch;flex-direction:column}
  .panel-real .panel-head.compact{align-items:flex-start}
  .panel-real .page-heading-actions,.panel-real .period-control{width:100%}
  .panel-real .period-control select,.panel-real .gcal-btn,.panel-real .channel-select{width:100%;margin-left:0}
  .panel-real .channel-icons{width:100%}
  .panel-real .conversation-detail>header{align-items:flex-start;flex-wrap:wrap;height:auto;min-height:74px}
  .panel-real .detail-header-actions{width:100%;gap:6px}
  .panel-real .take-over-btn,.panel-real .state-badge{width:100%;justify-content:center}
  .panel-real .reply-box{grid-template-columns:minmax(0,1fr) auto}
  .panel-real .conversation-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .panel-real .conversation-tabs::-webkit-scrollbar{display:none}
  .panel-real .conversation-tabs button{white-space:nowrap}
  .panel-real .week-strip{max-width:100%;overflow-x:auto;scroll-snap-type:x proximity}
  .panel-real .week-strip button{scroll-snap-align:start}
  .panel-real .funnel-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;overflow:visible}
  .panel-real .funnel-stage{min-width:0;width:100%}
  .panel-real .funnel-conv{width:34px}
  .panel-real .funnel-stage:last-child{grid-column:1/-1}
  .panel-real .automation-summary-row{align-items:flex-start;flex-direction:column}
  .panel-real .automation-summary-row p{margin:0;text-align:left}
  .panel-real .automation-row{grid-template-columns:38px minmax(0,1fr);align-items:start}
  .panel-real .automation-row>.toggle{grid-column:1/-1;justify-self:end}
  .panel-real .settings-card{padding:20px 18px}
  .panel-real .hours-row{gap:10px;flex-wrap:wrap}
  .panel-real .hours-row>span:first-child{width:auto;min-width:76px}
  .panel-real .hours-row time{min-width:110px;text-align:right}
  .panel-real .locations-list>div,.panel-real .notify-row{gap:10px}
  .panel-real .call-card audio{width:100%}
  .panel-real .role-popover{position:fixed;right:12px;bottom:12px;left:12px;width:auto;max-width:none}
  .panel-real .cmdk-backdrop{padding:10vh 12px 0}
  .panel-real .cmdk{width:100%}
  .panel-real .modal>header,.panel-real .modal form{padding-right:18px;padding-left:18px}
  .panel-real .modal form footer{align-items:stretch;flex-direction:column-reverse}
  .panel-real .modal form footer button{width:100%;min-height:44px}
}

@media (max-width:360px){
  .panel-real .topbar{padding-right:10px;padding-left:10px}
  .panel-real .topbar-title{gap:8px}
  .panel-real .mobile-menu,.panel-real .icon-button,.panel-real .quick-action{width:38px;height:38px;min-width:38px}
  .panel-real .topbar h1{max-width:calc(100vw - 148px);font-size:15px}
  .panel-real .workspace-content{padding-right:10px;padding-left:10px}
}

/* ============ 2026-09-01 — clinic operations desk ============
   Visual synthesis from the supplied Molar AI, Chartline, LimeCare and appointment-calendar
   references. This is intentionally a final scoped layer: it preserves every existing data hook
   and only changes the real clinic panel's composition and visual hierarchy. */
.panel-real{
  --sidebar:238px;
  --ops-canvas:#f4f4f6;
  --ops-panel:#fff;
  --ops-border:#e7e5e8;
  --ops-ink:#17151a;
  --ops-red:#e11d48;
  --ops-red-dark:#9f1239;
  --ops-plum:#2a101b;
}
.panel-real .app-shell{background:var(--ops-canvas)}
.panel-real .sidebar{width:var(--sidebar);padding:18px 14px 14px;background:#fbfbfc;border-right:1px solid var(--ops-border)}
.panel-real .brand-row{height:42px;padding:0 8px 12px;border-bottom:1px solid var(--ops-border)}
.panel-real .brand-logo{width:132px;height:auto}
.panel-real .clinic-switcher{margin:14px 0 16px;padding:10px;border:1px solid var(--ops-border);background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(23,21,26,.03)}
.panel-real .clinic-avatar{background:#f7e8ec;color:var(--ops-red-dark)}
.panel-real .primary-nav{padding:0 2px}
.panel-real .primary-nav>p{margin:18px 9px 7px;color:#a09ca4;font-size:7px;letter-spacing:.11em}
.panel-real .nav-item{min-height:38px;margin:2px 0;padding:0 10px;border:1px solid transparent;border-radius:10px;color:#6d6872;font-size:10px}
.panel-real .nav-item:hover{background:#f5f3f5;color:var(--ops-ink)}
.panel-real .nav-item.active{border-color:var(--ops-border);background:#fff;color:var(--ops-ink);box-shadow:0 2px 7px rgba(23,21,26,.05)}
.panel-real .nav-item.active::before{width:3px;left:-1px;background:var(--ops-red);border-radius:0 4px 4px 0}
.panel-real .nav-symbol{width:22px;height:22px;background:transparent;color:#8b8790;font-size:15px}
.panel-real .nav-item.active .nav-symbol{background:#fbe8ed;color:var(--ops-red-dark)}
.panel-real .system-card{padding:11px;border-radius:11px;background:#fff}
.panel-real .main-shell{margin-left:var(--sidebar);background:var(--ops-canvas)}
.panel-real .topbar{height:72px;padding:0 24px;background:rgba(255,255,255,.93);border-bottom:1px solid var(--ops-border);-webkit-backdrop-filter:blur(16px)}
.panel-real .topbar-title h1{font-size:16px;backdrop-filter:blur(16px)}
.panel-real .topbar-title h1{font-size:16px;letter-spacing:-.025em}
.panel-real .topbar-title p{font-size:7px;color:#a09ca4}
.panel-real .topbar-actions{gap:8px}
.panel-real .dashboard-site-back,.panel-real .role-badge,.panel-real .dashboard-lang,.panel-real .tour-trigger,.panel-real .global-search,.panel-real .icon-button{height:36px;border-color:var(--ops-border);background:#fff;border-radius:10px;box-shadow:none}
.panel-real .global-search{width:246px;background:#f7f6f8}
.panel-real .quick-action{height:38px;padding:0 16px;border-radius:10px;background:var(--ops-ink);box-shadow:none}
.panel-real .quick-action:hover{background:#302d33;transform:none}
.panel-real .workspace-content{width:min(1540px,100%);padding:24px 24px 56px}

.panel-real .view.active[data-view-section="overview"]{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:16px;align-items:start;animation:view-in .28s ease}
.panel-real [data-view-section="overview"]>.welcome-row,
.panel-real [data-view-section="overview"]>.ai-command-strip,
.panel-real [data-view-section="overview"]>.attention-rail,
.panel-real [data-view-section="overview"]>.metric-grid,
.panel-real [data-view-section="overview"]>.funnel-panel,
.panel-real [data-view-section="overview"]>.overview-grid,
.panel-real [data-view-section="overview"]>.insights-panel,
.panel-real [data-view-section="overview"]>.lower-grid{grid-column:1}
.panel-real .welcome-row{margin-bottom:14px;align-items:center}
.panel-real .welcome-row h2{margin:4px 0 3px;font-size:26px;letter-spacing:-.04em}
.panel-real .welcome-row p{max-width:720px;font-size:10px;line-height:1.55}
.panel-real .period-control select{height:36px;border-color:var(--ops-border);border-radius:10px}

.panel-real .ai-command-strip{min-height:116px;margin-bottom:12px;padding:14px;display:grid;grid-template-columns:52px minmax(190px,1.15fr) minmax(330px,1fr);gap:13px;align-items:center;overflow:hidden;position:relative;border:1px solid #451327;border-radius:15px;background:linear-gradient(112deg,#211018 0%,#401326 58%,#64152d 100%);color:#fff;box-shadow:0 14px 30px -22px rgba(98,12,44,.65)}
.panel-real .ai-command-strip::after{content:"";position:absolute;width:210px;height:210px;right:20%;top:-154px;border-radius:50%;background:rgba(255,255,255,.07)}
.panel-real .ai-command-mark{width:50px;height:50px;display:grid;place-items:center;position:relative;z-index:1;border-radius:50%;background:linear-gradient(145deg,#f24468,#a80f38);box-shadow:0 0 0 8px rgba(255,255,255,.055),0 10px 25px rgba(0,0,0,.22)}
.panel-real .ai-command-copy{display:grid;gap:6px;position:relative;z-index:1}
.panel-real .ai-command-copy>span{display:flex;align-items:center;gap:6px;color:#f7b8c7;font:500 7px IBM Plex Mono,monospace;letter-spacing:.09em}
.panel-real .ai-command-copy>span i{width:6px;height:6px;border-radius:50%;background:#56d59b;box-shadow:0 0 0 4px rgba(86,213,155,.1)}
.panel-real .ai-command-copy>strong{max-width:280px;font:700 13px/1.25 Manrope,sans-serif;letter-spacing:-.02em}
.panel-real .ai-command-pills{display:flex;gap:6px;flex-wrap:wrap}
.panel-real .ai-command-pills span{padding:4px 8px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:rgba(255,255,255,.76);font-size:7px;line-height:1}
.panel-real .ai-command-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;position:relative;z-index:1}
.panel-real .ai-command-stats>div{min-height:82px;padding:10px;display:grid;align-content:center;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.075);-webkit-backdrop-filter:blur(8px)}
.panel-real .ai-command-stats small{color:rgba(255,255,255,.52);backdrop-filter:blur(8px)}
.panel-real .ai-command-stats small{color:rgba(255,255,255,.52);font:500 6px IBM Plex Mono,monospace;letter-spacing:.08em}
.panel-real .ai-command-stats strong{margin-top:5px;font:700 21px/1 Manrope,sans-serif}
.panel-real .ai-command-stats span{margin-top:3px;color:rgba(255,255,255,.54);font-size:7px}

.panel-real .attention-rail{min-height:60px;margin-bottom:12px;padding:10px 12px;border-color:#f1dfb7;background:#fffaf0;border-radius:12px}
.panel-real .attention-mark{width:32px;height:32px;border-radius:9px}
.panel-real .metric-grid{gap:10px;margin-bottom:12px}
.panel-real .metric-card{min-height:122px!important;padding:15px;border-color:var(--ops-border);border-radius:14px;box-shadow:0 1px 2px rgba(23,21,26,.025)}
.panel-real .metric-card.accent-card{background:#fff;border-color:var(--ops-border);color:var(--ops-ink)}
.panel-real .metric-card.accent-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--ops-red);border-radius:14px 0 0 14px}
.panel-real .metric-card.accent-card .metric-head>span{color:#788581}
.panel-real .metric-card.accent-card .metric-head>i{background:#fbe8ed;color:var(--ops-red-dark)}
.panel-real .metric-card.accent-card .metric-foot em{background:#fbe8ed;color:var(--ops-red-dark)}
.panel-real .metric-card>strong{margin-top:13px;font-size:28px}
.panel-real .metric-head>i{width:30px;height:30px;border-radius:9px}
.panel-real .overview-grid{grid-template-columns:minmax(0,1.3fr) minmax(340px,.9fr);gap:12px;margin-bottom:12px}
.panel-real .performance-panel[style*="display: none"] + .action-panel{grid-column:1/-1}
.panel-real .panel{border-color:var(--ops-border);border-radius:14px;box-shadow:0 1px 2px rgba(23,21,26,.025)}
.panel-real .action-panel{min-height:370px;padding:17px}
.panel-real .action-list article{padding:10px 0}
.panel-real .lower-grid{grid-template-columns:1.15fr .85fr;gap:12px}
.panel-real .appointments-panel,.panel-real .automation-panel{padding:17px}

.panel-real .ai-assistant-rail{grid-column:2;grid-row:1 / span 10;min-height:590px;position:sticky;top:88px;overflow:hidden;border:1px solid var(--ops-border);border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(23,21,26,.04)}
.panel-real .ai-assistant-rail>header{height:64px;padding:0 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ops-border)}
.panel-real .assistant-orb{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#ef3159,#a80f38);box-shadow:0 7px 18px -9px rgba(177,18,59,.75)}
.panel-real .ai-assistant-rail header>div{display:grid;gap:3px}
.panel-real .ai-assistant-rail header strong{font:700 11px Manrope,sans-serif}
.panel-real .ai-assistant-rail header small{display:flex;align-items:center;gap:5px;color:#88838c;font-size:7px}
.panel-real .ai-assistant-rail header small i{width:6px;height:6px;border-radius:50%;background:#3fbe87}
.panel-real .assistant-brief{margin:14px;padding:16px;border-radius:13px;background:#f8f6f8}
.panel-real .assistant-brief>span,.panel-real .assistant-shortcuts>span{color:#9a959e;font:500 7px IBM Plex Mono,monospace;letter-spacing:.1em}
.panel-real .assistant-brief>strong{display:block;margin-top:14px;font:700 15px/1.25 Manrope,sans-serif;letter-spacing:-.025em}
.panel-real .assistant-brief>p{margin:7px 0 0;color:#77717b;font-size:8px;line-height:1.65}
.panel-real .assistant-shortcuts{padding:6px 14px 14px;display:grid;gap:7px}
.panel-real .assistant-shortcuts>span{margin:0 2px 3px}
.panel-real .assistant-shortcuts button{min-height:46px;padding:0 10px;display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;border:1px solid var(--ops-border);border-radius:11px;background:#fff;color:var(--ops-ink);text-align:left;transition:.18s ease}
.panel-real .assistant-shortcuts button:hover{border-color:#e8a7b8;background:#fff9fa;transform:translateY(-1px)}
.panel-real .assistant-shortcuts i{font:500 7px IBM Plex Mono,monospace;color:var(--ops-red-dark);font-style:normal}
.panel-real .assistant-shortcuts b{font-size:8px;font-weight:600}
.panel-real .assistant-shortcuts em{font-style:normal;color:#aaa5ad}
.panel-real .assistant-trust{margin:8px 14px 14px;padding:12px;display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;border-top:1px solid var(--ops-border)}
.panel-real .assistant-trust>span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#eaf8f2;color:#107a57;font-size:10px}
.panel-real .assistant-trust p{display:grid;gap:2px;margin:0}
.panel-real .assistant-trust strong{font-size:8px}
.panel-real .assistant-trust small{color:#918c94;font-size:7px;line-height:1.4}

/* Calendar and patient-list surfaces borrow the references' dense operational rhythm. */
.panel-real [data-view-section="appointments"] .appointment-layout{grid-template-columns:minmax(0,1.55fr) minmax(300px,.55fr);gap:14px}
.panel-real [data-view-section="appointments"] .calendar-panel{padding:18px;border-radius:15px}
.panel-real [data-view-section="appointments"] .week-strip{gap:4px;padding:5px;border:1px solid var(--ops-border);border-radius:13px;background:#f8f7f9}
.panel-real [data-view-section="appointments"] .week-strip button{min-height:66px;border-color:transparent;background:transparent;border-radius:9px}
.panel-real [data-view-section="appointments"] .week-strip button.active{background:var(--ops-ink);box-shadow:0 6px 16px -10px rgba(23,21,26,.55)}
.panel-real [data-view-section="appointments"] .day-agenda{margin-top:14px;border:1px solid var(--ops-border);border-radius:13px;background:#fff}
.panel-real [data-view-section="appointments"] .agenda-event{border-left-color:var(--ops-red);background:#fcecf0}
.panel-real [data-view-section="appointments"] .agenda-event small{color:var(--ops-red-dark)}
.panel-real [data-view-section="appointments"] .day-summary{border-radius:15px}
.panel-real [data-view-section="patients"] .data-panel{border-radius:15px}
.panel-real [data-view-section="patients"] .data-toolbar{padding:14px 16px;background:#fff}
.panel-real [data-view-section="patients"] .data-toolbar label{height:40px;border-color:var(--ops-border);background:#f8f7f9;border-radius:11px}
.panel-real [data-view-section="patients"] th{height:46px;background:#f7f6f8;color:#8c8790}
.panel-real [data-view-section="patients"] td{height:64px;border-top-color:#efedf0}
.panel-real [data-view-section="patients"] tbody tr:hover{background:#fff9fa}

@media(max-width:1320px){
  .panel-real .view.active[data-view-section="overview"]{grid-template-columns:minmax(0,1fr) 260px}
  .panel-real .ai-command-strip{grid-template-columns:50px minmax(180px,1fr) minmax(315px,.95fr)}
}
@media(max-width:1120px){
  .panel-real .view.active[data-view-section="overview"]{display:block}
  .panel-real .ai-assistant-rail{min-height:0;position:static;margin-top:12px}
  .panel-real .assistant-shortcuts{grid-template-columns:repeat(2,1fr)}
  .panel-real .assistant-shortcuts>span{grid-column:1/-1}
}
@media(max-width:900px){
  .panel-real{--sidebar:224px}
  .panel-real .main-shell{margin-left:0}
  .panel-real .sidebar{width:min(86vw,320px)}
  .panel-real .workspace-content{padding:20px 16px 48px}
}
@media(max-width:700px){
  .panel-real .ai-command-strip{padding:15px;grid-template-columns:40px 1fr}
  .panel-real .ai-command-mark{width:40px;height:40px}
  .panel-real .ai-command-stats{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel-real .ai-command-stats>div{min-height:68px;padding:9px}
  .panel-real .ai-command-stats strong{font-size:19px}
  .panel-real .assistant-shortcuts{grid-template-columns:1fr}
  .panel-real .assistant-shortcuts>span{grid-column:1}
}

/* ============ 2026-09-01 — full panel UI fidelity pass ============ */
.panel-real .dashboard-site-back,
.panel-real .dashboard-lang,
.panel-real .tour-trigger{display:none}
.panel-real .topbar-actions{margin-left:auto}
.panel-real .role-badge{padding:0 12px;background:#fff;color:#302c32}
.panel-real .icon-button{width:38px}
.panel-real .workspace-content>.view:not([data-view-section="overview"]){max-width:1260px;margin:0 auto}
.panel-real .page-heading{margin-bottom:20px;align-items:flex-end}
.panel-real .page-heading h2{margin:6px 0 4px;font-size:30px;line-height:1.05;letter-spacing:-.045em}
.panel-real .page-heading p{max-width:620px;font-size:10px;line-height:1.55}
.panel-real .page-heading .primary-button{height:40px;padding:0 15px;border-radius:10px;background:#17151a;box-shadow:0 9px 22px -14px rgba(23,21,26,.55)}
.panel-real .section-kicker{color:#8b858e;font-size:7px}
.panel-real .section-kicker>i{background:var(--ops-red)}

/* Card language shared by schedules, tables, reports, settings and empty states. */
.panel-real .panel,
.panel-real .settings-card,
.panel-real .automation-card,
.panel-real .integration-card,
.panel-real .role-legend-card,
.panel-real .report-hero{border:1px solid var(--ops-border);border-radius:15px;background:#fff;box-shadow:0 1px 2px rgba(23,21,26,.025),0 14px 34px -32px rgba(23,21,26,.35)}
.panel-real .panel-head h3{font-size:15px}
.panel-real .quiet-button,
.panel-real .gcal-btn,
.panel-real .data-toolbar button,
.panel-real .conversation-tabs button{border-color:var(--ops-border);border-radius:9px;background:#fff}
.panel-real .quiet-button:hover,
.panel-real .data-toolbar button:hover{border-color:#d7a3b1;background:#fff9fa;color:var(--ops-red-dark)}
.panel-real .empty-state{min-height:132px;align-content:center;border-color:#dedbe0;background:#fbfafb}
.panel-real .empty-state .es-glyph{background:#f9e7ec;color:var(--ops-red-dark)}

/* Overview follows the supplied Molar composition: agent strip, four KPIs, queue and schedule. */
.panel-real [data-view-section="overview"]>.welcome-row{order:1}
.panel-real [data-view-section="overview"]>.ai-command-strip{order:2}
.panel-real [data-view-section="overview"]>.metric-grid{order:3}
.panel-real [data-view-section="overview"]>.attention-rail{order:4}
.panel-real [data-view-section="overview"]>.funnel-panel{order:5}
.panel-real [data-view-section="overview"]>.overview-grid{order:6}
.panel-real [data-view-section="overview"]>.insights-panel{order:7}
.panel-real [data-view-section="overview"]>.lower-grid{order:8}
.panel-real [data-view-section="overview"]>.ai-assistant-rail{order:9}
.panel-real .metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.panel-real .metric-card{background:#fff}
.panel-real .metric-card .sk{background:#ece9ed}
.panel-real .attention-rail{box-shadow:0 1px 2px rgba(23,21,26,.025)}
.panel-real .appointments-panel .schedule-list{margin-top:10px}
.panel-real .schedule-row{min-height:54px;border-color:#efedf0}

/* Dense table rhythm from Chartline and LimeCare references. */
.panel-real .data-panel{overflow:hidden}
.panel-real .data-toolbar{min-height:64px;padding:12px 14px;background:#fff}
.panel-real .data-toolbar label,
.panel-real .search-field,
.panel-real .calls-toolbar label{width:min(420px,100%);height:40px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ops-border);border-radius:11px;background:#f8f7f9;color:#8c8790}
.panel-real .data-toolbar input,
.panel-real .search-field input,
.panel-real .calls-toolbar input{width:100%;border:0;outline:0;background:transparent;color:var(--ops-ink);font:500 9px Inter,sans-serif}
.panel-real .data-toolbar label:focus-within,
.panel-real .search-field:focus-within,
.panel-real .calls-toolbar label:focus-within{border-color:#d79aaa;background:#fff;box-shadow:0 0 0 3px rgba(225,29,72,.07)}
.panel-real table th{height:44px;background:#f8f7f9;color:#8f8992;font-size:7px;letter-spacing:.08em}
.panel-real table td{height:62px;border-top-color:#efedf0;font-size:9px}
.panel-real tbody tr{transition:background .16s ease,transform .16s ease}
.panel-real tbody tr:hover{background:#fff9fa}
.panel-real .table-footer{background:#fff}
.panel-real .conversation-tabs.standalone-tabs{width:max-content;max-width:100%;margin-bottom:12px;padding:4px;border:1px solid var(--ops-border);border-radius:11px;background:#fff}
.panel-real .conversation-tabs.standalone-tabs button{border:0;background:transparent}
.panel-real .conversation-tabs.standalone-tabs button.active{background:#17151a;color:#fff;box-shadow:none}

/* Calls were visually unfinished: give the real data renderer a full operations surface. */
.panel-real [data-view-section="calls"]{position:relative}
.panel-real .calls-summary{max-width:none;margin-bottom:12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;background:transparent}
.panel-real .calls-summary>div{min-height:102px;padding:16px;align-content:center;border:1px solid var(--ops-border);border-radius:14px;background:#fff}
.panel-real .calls-summary strong{font-size:28px}
.panel-real .calls-summary span{margin-top:5px}
.panel-real .calls-toolbar{max-width:none;margin-bottom:12px;padding:12px 14px;border:1px solid var(--ops-border);border-radius:14px;background:#fff}
.panel-real .calls-list{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel-real .call-card{min-height:170px;padding:17px;border:1px solid var(--ops-border);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(23,21,26,.025)}
.panel-real .call-card:hover{border-color:#e4bbc5;transform:translateY(-2px);box-shadow:0 16px 28px -24px rgba(23,21,26,.35)}
.panel-real .calls-list:empty{min-height:300px;display:grid;place-items:center;border:1px dashed #dedbe0;border-radius:15px;background:#fbfafb}
.panel-real .calls-list:empty::after{content:"Çağrı kayıtları yüklendiğinde burada görünecek.";color:#8d8790;font-size:10px}

/* Appointment board: framed week controls and calmer operational depth. */
.panel-real .gcal-connect{min-height:62px;margin-bottom:12px;padding:10px 12px;border:1px solid var(--ops-border);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(23,21,26,.025)}
.panel-real .calendar-header{min-height:44px}
.panel-real .calendar-header button{border-color:var(--ops-border);border-radius:10px}
.panel-real .day-agenda{background-image:linear-gradient(to bottom,transparent 55px,#f0eef1 56px);background-size:100% 56px}
.panel-real .day-summary{padding:18px}
.panel-real .next-appointment{border-color:#e5dfe3;background:#faf8fa}

/* Settings and management screens use the same column logic as the operational screens. */
.panel-real .automation-grid,
.panel-real .integrations-grid,
.panel-real .role-legend-grid{gap:12px}
.panel-real .automation-card,
.panel-real .integration-card,
.panel-real .role-legend-card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.panel-real .automation-card:hover,
.panel-real .integration-card:hover,
.panel-real .role-legend-card:hover{border-color:#e2b7c2;transform:translateY(-2px);box-shadow:0 18px 32px -27px rgba(23,21,26,.38)}

/* Motion: restrained, fast and meaningful. */
@keyframes panel-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes panel-card-enter{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:none}}
@keyframes assistant-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.panel-real .view.active{animation:panel-enter .34s cubic-bezier(.22,.8,.25,1)}
.panel-real .view.active[data-view-section="overview"]{animation:panel-enter .34s cubic-bezier(.22,.8,.25,1)}
.panel-real .view.active>.page-heading,
.panel-real .view.active>.panel,
.panel-real .view.active>.gcal-connect,
.panel-real .view.active>.appointment-layout,
.panel-real .view.active>.conversation-tabs,
.panel-real .view.active>.calls-summary,
.panel-real .view.active>.calls-toolbar,
.panel-real .view.active>.calls-list,
.panel-real .view.active>.automation-grid,
.panel-real .view.active>.integrations-grid{animation:panel-card-enter .42s cubic-bezier(.22,.8,.25,1) both}
.panel-real .view.active>:nth-child(2){animation-delay:.035s}
.panel-real .view.active>:nth-child(3){animation-delay:.07s}
.panel-real .view.active>:nth-child(4){animation-delay:.105s}
.panel-real .view.active[data-view-section="overview"]>.ai-command-strip,
.panel-real .view.active[data-view-section="overview"]>.metric-grid,
.panel-real .view.active[data-view-section="overview"]>.attention-rail,
.panel-real .view.active[data-view-section="overview"]>.overview-grid,
.panel-real .view.active[data-view-section="overview"]>.lower-grid{animation:panel-card-enter .42s cubic-bezier(.22,.8,.25,1) both}
.panel-real .view.active[data-view-section="overview"]>.metric-grid{animation-delay:.05s}
.panel-real .view.active[data-view-section="overview"]>.attention-rail{animation-delay:.09s}
.panel-real .view.active[data-view-section="overview"]>.overview-grid{animation-delay:.13s}
.panel-real .view.active[data-view-section="overview"]>.lower-grid{animation-delay:.17s}
.panel-real .ai-command-mark{animation:assistant-breathe 3.6s ease-in-out infinite}
.panel-real .nav-item{transition:background .17s ease,color .17s ease,border-color .17s ease,transform .17s ease,box-shadow .17s ease}
.panel-real .nav-item:hover{transform:translateX(2px)}
.panel-real button{transition:background-color .17s ease,border-color .17s ease,color .17s ease,transform .17s ease,box-shadow .17s ease}

@media(max-width:900px){
  .panel-real .page-heading h2{font-size:28px}
  .panel-real .calls-list{grid-template-columns:1fr}
  .panel-real .calls-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .panel-real .page-heading h2{font-size:26px}
  .panel-real .page-heading{align-items:stretch}
  .panel-real .calls-summary{grid-template-columns:1fr}
  .panel-real .calls-summary>div{min-height:82px}
  .panel-real .metric-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .panel-real .view.active,
  .panel-real .view.active>*,
  .panel-real .ai-command-mark{animation:none!important}
  .panel-real .nav-item:hover,
  .panel-real .call-card:hover,
  .panel-real .automation-card:hover,
  .panel-real .integration-card:hover,
  .panel-real .role-legend-card:hover{transform:none}
}

/* ============ 2026-09-01 — demo overview restoration ============
   The real clinic panel keeps its light sidebar and real data, while the overview returns to the
   earlier dashboard's clear hierarchy: greeting, priority rail, KPI row, activity + queue, and
   today's operations. Red is reserved for brand actions; navigation feedback stays neutral. */
.panel-real .nav-item,
.panel-real .nav-item:hover,
.panel-real .nav-item.active{transform:none!important}
.panel-real .nav-item:focus-visible{outline:2px solid #bbb8c0;outline-offset:2px}
.panel-real .nav-item:hover{border-color:transparent;background:#f2f2f4;color:#242126;box-shadow:none}
.panel-real .nav-item.active{border-color:#e4e3e6;background:#fff;color:#17151a;box-shadow:0 2px 7px rgba(23,21,26,.05)}
.panel-real .nav-item.active::before{content:none!important;display:none!important}
.panel-real .nav-item .nav-symbol,
.panel-real .nav-item:hover .nav-symbol,
.panel-real .nav-item.active .nav-symbol{background:transparent!important;color:#77727c!important;box-shadow:none!important}
.panel-real .nav-item em{background:#eeedf0;color:#69646e}

.panel-real .view.active[data-view-section="overview"]{display:block;max-width:1460px;margin:0 auto}
.panel-real [data-view-section="overview"]>.ai-command-strip,
.panel-real [data-view-section="overview"]>.ai-assistant-rail{display:none!important}
.panel-real [data-view-section="overview"]>.welcome-row{margin-bottom:22px;align-items:flex-end}
.panel-real [data-view-section="overview"]>.welcome-row h2{margin:8px 0 4px;font-size:clamp(28px,3vw,36px)}
.panel-real [data-view-section="overview"]>.welcome-row p{max-width:880px;font-size:12px}
.panel-real [data-view-section="overview"]>.attention-rail{min-height:72px;margin-bottom:16px;padding:12px 14px}
.panel-real [data-view-section="overview"]>.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.panel-real [data-view-section="overview"] .metric-card{min-height:156px!important;padding:18px;border-radius:16px}
.panel-real [data-view-section="overview"] .metric-card>strong{margin-top:18px;font-size:34px}
.panel-real [data-view-section="overview"] .metric-card.accent-card{border-color:#0e0c11;background:#0e0c11;color:#fff}
.panel-real [data-view-section="overview"] .metric-card.accent-card::before{content:none}
.panel-real [data-view-section="overview"] .metric-card.accent-card .metric-head>span{color:#8e8992}
.panel-real [data-view-section="overview"] .metric-card.accent-card .metric-head>i{background:rgba(255,255,255,.08);color:#d7d4da}
.panel-real [data-view-section="overview"] .metric-card.accent-card .metric-foot em{background:rgba(255,255,255,.1);color:#fff}
.panel-real [data-view-section="overview"]>.overview-grid{grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);gap:12px;margin-bottom:12px}
.panel-real [data-view-section="overview"] .performance-panel[style*="display: none"] + .action-panel{grid-column:auto}
.panel-real [data-view-section="overview"] .activity-panel{min-height:410px;padding:20px 22px}
.panel-real [data-view-section="overview"] .action-panel{min-height:410px;padding:20px 18px 12px}
.panel-real [data-view-section="overview"]>.lower-grid{grid-template-columns:1.3fr 1fr;gap:12px}

.panel-real .overview-activity-list{margin-top:16px;border-top:1px solid #efedf0}
.panel-real .overview-activity-list article{min-height:66px;padding:10px 0;display:grid;grid-template-columns:36px minmax(0,1fr) auto 42px;gap:10px;align-items:center;border-bottom:1px solid #efedf0}
.panel-real .overview-activity-list article:last-child{border-bottom:0}
.panel-real .overview-activity-list .person-avatar{width:34px;height:34px}
.panel-real .overview-activity-list article>div{min-width:0}
.panel-real .overview-activity-list strong{display:block;font-size:10px}
.panel-real .overview-activity-list p{margin:2px 0;color:#5f5a64;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-real .overview-activity-list small{display:block;color:#9b969f;font-size:7px}
.panel-real .overview-activity-list .tag{white-space:nowrap}
.panel-real .overview-activity-list time{color:#7b7680;font:500 8px IBM Plex Mono,monospace;text-align:right}

@media(max-width:1180px){
  .panel-real [data-view-section="overview"]>.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-real [data-view-section="overview"]>.overview-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .panel-real [data-view-section="overview"]>.welcome-row{align-items:flex-start}
  .panel-real [data-view-section="overview"]>.metric-grid{grid-template-columns:1fr!important}
  .panel-real [data-view-section="overview"] .metric-card{min-height:142px!important}
  .panel-real [data-view-section="overview"]>.lower-grid{display:block}
  .panel-real [data-view-section="overview"] .automation-panel{margin-top:12px}
  .panel-real .overview-activity-list article{grid-template-columns:34px minmax(0,1fr) auto}
  .panel-real .overview-activity-list time{grid-column:2;text-align:left}
}