/* =========================================================
   Dentaris — tasarım sistemi
   ========================================================= */
:root{
  --font: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bg:        #f2f4f5;
  --surface:   #ffffff;
  --surface-2: #f7f9f9;
  --surface-3: #eceff0;
  --line:      #dfe4e6;
  --line-soft: #eaeef0;
  --text:      #12181b;
  --text-2:    #4b565c;
  --text-3:    #7b878e;

  --accent:      #0e7c6b;
  --accent-hov:  #0a6152;
  --accent-soft: #e2f2ef;
  --accent-line: #b7ded6;
  --on-accent:   #ffffff;

  --ok:   #1c7a4b;  --ok-soft:   #e3f4ea;
  --warn: #9a6206;  --warn-soft: #fdf0da;
  --dang: #a52a26;  --dang-soft: #fbe6e5;
  --info: #1e5f9e;  --info-soft: #e5eff9;
  --mute-soft: #eceff1;

  --shadow-1: 0 1px 2px rgba(16,24,28,.06), 0 1px 1px rgba(16,24,28,.04);
  --shadow-2: 0 4px 16px rgba(16,24,28,.10), 0 1px 3px rgba(16,24,28,.06);
  --shadow-3: 0 18px 48px rgba(16,24,28,.18), 0 2px 8px rgba(16,24,28,.08);

  --r-sm: 5px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --sb-w: 232px; --sb-w-collapsed: 60px; --top-h: 52px;
}

html[data-theme="dark"]{
  --bg:        #0d1113;
  --surface:   #14191c;
  --surface-2: #191f22;
  --surface-3: #202729;
  --line:      #262e32;
  --line-soft: #1e2528;
  --text:      #e7ecee;
  --text-2:    #a4b0b6;
  --text-3:    #75838a;

  --accent:      #35bda7;
  --accent-hov:  #4bd0ba;
  --accent-soft: #10312c;
  --accent-line: #1c4b44;
  --on-accent:   #04201c;

  --ok:   #4fc98a;  --ok-soft:   #102b1e;
  --warn: #e0a94a;  --warn-soft: #33260f;
  --dang: #f0736c;  --dang-soft: #351a19;
  --info: #63a8e8;  --info-soft: #12283b;
  --mute-soft: #212a2e;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 18px rgba(0,0,0,.45);
  --shadow-3: 0 20px 56px rgba(0,0,0,.6);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 13.5px/1.5 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit }
a{ color:var(--accent); text-decoration:none }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em }
::selection{ background:var(--accent-soft); color:var(--text) }
[hidden]{ display:none !important }

::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; border:3px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover{ background:var(--text-3); background-clip:content-box }
::-webkit-scrollbar-track{ background:transparent }

.num{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1 }
.muted{ color:var(--text-2) }
.dim{ color:var(--text-3) }
.right{ text-align:right }
.center{ text-align:center }
.nowrap{ white-space:nowrap }
.grow{ flex:1 }
.row{ display:flex; align-items:center; gap:8px }
.col{ display:flex; flex-direction:column; gap:8px }
.wrap{ flex-wrap:wrap }
.mt{ margin-top:14px } .mb{ margin-bottom:14px }
.sep{ height:1px; background:var(--line); margin:12px 0 }
svg{ display:block }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, box-shadow .12s, color .12s;
  box-shadow:var(--shadow-1);
}
.btn:hover{ background:var(--surface-2); border-color:var(--text-3) }
.btn:active{ transform:translateY(.5px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent) }
.btn--primary:hover{ background:var(--accent-hov); border-color:var(--accent-hov) }
.btn--danger{ color:var(--dang); border-color:var(--line) }
.btn--danger:hover{ background:var(--dang-soft); border-color:var(--dang) }
.btn--ghost{ background:transparent; box-shadow:none; border-color:transparent; color:var(--text-2) }
.btn--ghost:hover{ background:var(--surface-3); color:var(--text) }
.btn--sm{ height:26px; padding:0 9px; font-size:12.5px }
.btn--lg{ height:38px; padding:0 16px; font-size:14px }
.btn svg{ width:15px; height:15px; opacity:.85 }
.btn[disabled]{ opacity:.45; pointer-events:none }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; color:var(--text-2); cursor:pointer; position:relative;
  transition:background .12s,color .12s;
}
.iconbtn:hover{ background:var(--surface-3); color:var(--text) }
.iconbtn svg{ width:17px; height:17px }
.iconbtn--badge .dot{ position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:99px; background:var(--dang); box-shadow:0 0 0 2px var(--surface) }

kbd{
  font:500 10.5px/1 var(--mono); color:var(--text-3);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:4px;
  padding:3px 5px; background:var(--surface-2);
}

/* ---------------- Form ---------------- */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.field > label{ font-size:11.5px; font-weight:600; color:var(--text-2); letter-spacing:.02em }
.input, .select, .textarea{
  height:32px; padding:0 9px; width:100%;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); transition:border-color .12s, box-shadow .12s;
}
html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .textarea{ background:var(--surface-2) }
.textarea{ height:auto; padding:7px 9px; min-height:64px; resize:vertical; line-height:1.5 }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.input::placeholder,.textarea::placeholder{ color:var(--text-3) }
.select{ appearance:none; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237b878e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.check{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; user-select:none }
.check input{ width:15px; height:15px; accent-color:var(--accent); margin:0 }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.span2{ grid-column:span 2 }

/* ---------------- Chips / badges ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px;
  border-radius:99px; font-size:11.5px; font-weight:600; letter-spacing:.01em;
  background:var(--mute-soft); color:var(--text-2); white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.75 }
.badge--plain::before{ display:none }
.badge--ok{ background:var(--ok-soft); color:var(--ok) }
.badge--warn{ background:var(--warn-soft); color:var(--warn) }
.badge--dang{ background:var(--dang-soft); color:var(--dang) }
.badge--info{ background:var(--info-soft); color:var(--info) }
.badge--accent{ background:var(--accent-soft); color:var(--accent) }

.chipbar{ display:flex; gap:6px; flex-wrap:wrap }
.chip{
  height:28px; padding:0 11px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); color:var(--text-2); font-size:12.5px; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:.12s;
}
.chip:hover{ border-color:var(--text-3); color:var(--text) }
.chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent) }
.chip .cnt{ font-size:11px; color:var(--text-3) }

/* ---------------- Layout ---------------- */
.app{ display:flex; height:100vh; overflow:hidden }
.sidebar{
  width:var(--sb-w); flex:none; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; transition:width .16s ease;
}
.app.collapsed .sidebar{ width:var(--sb-w-collapsed) }
.app.collapsed .nav__label,.app.collapsed .sidebar__brand,.app.collapsed .nav__item kbd,.app.collapsed .nav__cnt{ display:none }
.app.collapsed .sidebar__head{ justify-content:center; padding:0 }
.app.collapsed .brand__mark{ display:none }
.app.collapsed .sidebar__collapse{ margin-left:0; width:32px; height:32px }
.app.collapsed .nav__item{ justify-content:center; padding:0 }
.app.collapsed .nav__group{ text-align:center; font-size:0 }

.sidebar__head{ display:flex; align-items:center; gap:9px; height:var(--top-h); padding:0 12px; border-bottom:1px solid var(--line-soft); flex:none }
.brand__mark{ width:26px; height:26px; flex:none; border-radius:7px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center }
.brand__mark svg{ width:16px; height:16px }
.brand__name{ font-weight:650; font-size:14px; letter-spacing:-.02em; line-height:1.2 }
.brand__sub{ font-size:10.5px; color:var(--text-3); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px }
.sidebar__collapse{ margin-left:auto; width:26px; height:26px }
.sidebar__collapse svg{ width:15px; height:15px }

.nav{ flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:1px }
.nav__group{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:14px 8px 5px }
.nav__item{
  display:flex; align-items:center; gap:10px; height:33px; padding:0 9px; width:100%;
  border:0; background:transparent; color:var(--text-2); border-radius:var(--r-sm);
  font-size:13px; font-weight:500; cursor:pointer; text-align:left; transition:background .1s,color .1s;
}
.nav__item:hover{ background:var(--surface-3); color:var(--text) }
.nav__item.active{ background:var(--accent-soft); color:var(--accent); font-weight:600 }
.nav__ico{ display:grid; place-items:center; width:18px; flex:none }
.nav__ico svg{ width:17px; height:17px }
.nav__label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nav__cnt{ font-size:11px; font-weight:600; color:var(--text-3); background:var(--surface-3); border-radius:99px; padding:1px 6px }
.nav__item.active .nav__cnt{ background:var(--surface); color:var(--accent) }
.sidebar__foot{ padding:8px; border-top:1px solid var(--line-soft) }

.main{ flex:1; min-width:0; display:flex; flex-direction:column }
.topbar{
  height:var(--top-h); flex:none; display:flex; align-items:center; gap:8px; padding:0 14px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.topbar__spacer{ flex:1 }
.topbar__date{ font-size:12.5px; color:var(--text-2); padding-right:6px; border-right:1px solid var(--line); margin-right:4px; height:20px; display:flex; align-items:center }
.search{
  display:flex; align-items:center; gap:8px; height:31px; width:min(360px, 42vw); padding:0 9px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  color:var(--text-3); cursor:pointer; text-align:left; transition:.12s;
}
.search:hover{ border-color:var(--text-3); background:var(--surface) }
.search__ico svg{ width:15px; height:15px }
.search__ph{ flex:1; font-size:13px }
.user{ display:flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 4px; border:0; background:transparent; border-radius:var(--r-sm); cursor:pointer }
.user:hover{ background:var(--surface-3) }
.avatar{
  width:27px; height:27px; flex:none; border-radius:99px; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.02em; background:var(--accent-soft); color:var(--accent);
}
.user__meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25 }
.user__name{ font-size:12.5px; font-weight:600 }
.user__role{ font-size:10.5px; color:var(--text-3) }

.view{ flex:1; overflow-y:auto; overflow-x:hidden }
.page{ padding:18px 20px 60px; max-width:1560px; margin:0 auto }
.page__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; flex-wrap:wrap }
.page__title{ font-size:20px; font-weight:650; letter-spacing:-.02em }
.page__sub{ font-size:12.5px; color:var(--text-2); margin-top:2px }
.page__actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.only-mobile{ display:none }

/* ---------------- Card / panel ---------------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1); overflow:hidden }
.card__head{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-soft) }
.card__title{ font-size:13.5px; font-weight:600 }
.card__sub{ font-size:11.5px; color:var(--text-3) }
.card__actions{ margin-left:auto; display:flex; gap:6px; align-items:center }
.card__body{ padding:14px }
.card__body--flush{ padding:0 }
.card__foot{ padding:9px 14px; border-top:1px solid var(--line-soft); background:var(--surface-2); font-size:12px; color:var(--text-2) }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:14px }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; box-shadow:var(--shadow-1); position:relative; overflow:hidden }
.stat__label{ font-size:11.5px; font-weight:600; color:var(--text-3); letter-spacing:.02em; display:flex; align-items:center; gap:6px }
.stat__label svg{ width:14px; height:14px }
.stat__value{ font-size:23px; font-weight:650; letter-spacing:-.025em; margin-top:7px; line-height:1.1 }
.stat__foot{ font-size:11.5px; color:var(--text-2); margin-top:5px; display:flex; align-items:center; gap:5px }
.trend{ font-weight:600 } .trend--up{ color:var(--ok) } .trend--down{ color:var(--dang) }

/* ---------------- Table ---------------- */
.tablewrap{ overflow-x:auto }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px }
.tbl th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface-2); position:sticky; top:0; z-index:1;
}
.tbl th.sortable{ cursor:pointer; user-select:none }
.tbl th.sortable:hover{ color:var(--text) }
.tbl td{ padding:8px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle }
.tbl tbody tr{ transition:background .1s }
.tbl tbody tr:hover{ background:var(--surface-2) }
.tbl tbody tr.clickable{ cursor:pointer }
.tbl tbody tr:last-child td{ border-bottom:0 }
.tbl .col-actions{ width:1%; white-space:nowrap; text-align:right }
.tbl tbody tr .rowacts{ opacity:0; transition:opacity .12s }
.tbl tbody tr:hover .rowacts{ opacity:1 }
.tbl tfoot td{ padding:9px 12px; border-top:1px solid var(--line); font-weight:600; background:var(--surface-2) }
.cellmain{ font-weight:550 }
.cellsub{ font-size:11.5px; color:var(--text-3) }

.empty{ padding:44px 20px; text-align:center; color:var(--text-3) }
.empty svg{ width:30px; height:30px; margin:0 auto 10px; opacity:.5 }
.empty__t{ font-size:14px; font-weight:600; color:var(--text-2); margin-bottom:3px }
.empty__d{ font-size:12.5px; max-width:340px; margin:0 auto }

/* ---------------- Modal / drawer ---------------- */
.overlay{ position:fixed; inset:0; background:rgba(10,16,19,.42); backdrop-filter:blur(2px); z-index:80; display:grid; place-items:center; padding:22px; animation:fade .14s ease }
html[data-theme="dark"] .overlay{ background:rgba(0,0,0,.6) }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:none} }
@keyframes slidein{ from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1} }
.modal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); width:min(620px, 96vw); max-height:90vh; display:flex; flex-direction:column;
  animation:pop .16s cubic-bezier(.2,.8,.3,1);
}
.modal--wide{ width:min(960px,96vw) }
.modal--sm{ width:min(430px,96vw) }
.modal__head{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line) }
.modal__title{ font-size:15px; font-weight:600 }
.modal__sub{ font-size:12px; color:var(--text-3); margin-top:1px }
.modal__body{ padding:16px; overflow-y:auto }
.modal__foot{ display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg) }
.modal__foot .grow{ flex:1 }

.toasts{ position:fixed; right:16px; bottom:16px; z-index:120; display:flex; flex-direction:column; gap:8px; align-items:flex-end }
.toast{
  display:flex; align-items:center; gap:9px; padding:10px 13px; min-width:230px; max-width:380px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); box-shadow:var(--shadow-2); font-size:13px; animation:slidein .18s ease;
}
.toast svg{ width:16px; height:16px; flex:none; color:var(--accent) }
.toast--ok{ border-left-color:var(--ok) } .toast--ok svg{ color:var(--ok) }
.toast--warn{ border-left-color:var(--warn) } .toast--warn svg{ color:var(--warn) }
.toast--err{ border-left-color:var(--dang) } .toast--err svg{ color:var(--dang) }

/* ---------------- Command palette ---------------- */
.palette{ position:fixed; inset:0; background:rgba(10,16,19,.4); backdrop-filter:blur(2px); z-index:110; display:flex; justify-content:center; padding-top:12vh; animation:fade .12s }
.palette__box{ width:min(620px,94vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3); overflow:hidden; height:fit-content; animation:pop .16s }
.palette__input{ width:100%; height:48px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:0 16px; font-size:15px; outline:none }
.palette__list{ max-height:min(52vh,420px); overflow-y:auto; padding:6px }
.palette__foot{ padding:7px 12px; border-top:1px solid var(--line); background:var(--surface-2); font-size:11px; color:var(--text-3); display:flex; gap:5px; align-items:center }
.pitem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer }
.pitem[aria-selected="true"]{ background:var(--accent-soft) }
.pitem svg{ width:16px; height:16px; color:var(--text-3) }
.pitem[aria-selected="true"] svg{ color:var(--accent) }
.pitem__t{ font-size:13.5px; font-weight:500 }
.pitem__s{ font-size:11.5px; color:var(--text-3) }
.pitem__k{ margin-left:auto }
.psection{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding:10px 10px 4px }

/* ---------------- Login ---------------- */
.login{ display:grid; grid-template-columns:minmax(340px,440px) 1fr; height:100vh }
.login__panel{ padding:44px 40px; display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line) }
.login__brand{ display:flex; align-items:center; gap:11px; margin-bottom:34px }
.login__brand .brand__mark{ width:36px; height:36px; border-radius:9px } .login__brand .brand__mark svg{ width:21px; height:21px }
.login__brand .brand__name{ font-size:18px } .login__brand .brand__sub{ font-size:12px; max-width:none }
.login__hint{ font-size:13px; color:var(--text-2); margin:0 0 14px }
.login__users{ display:flex; flex-direction:column; gap:8px }
.luser{
  display:flex; align-items:center; gap:11px; padding:11px 12px; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); cursor:pointer; transition:.12s;
}
.luser:hover{ border-color:var(--accent); background:var(--accent-soft) }
.luser .avatar{ width:34px; height:34px; font-size:12px }
.luser__n{ font-size:14px; font-weight:600 } .luser__r{ font-size:12px; color:var(--text-3) }
.luser__go{ margin-left:auto; color:var(--text-3) } .luser__go svg{ width:16px; height:16px }
.login__foot{ margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--text-3) }
.login__side{ background:var(--bg); display:grid; place-items:center; padding:32px; position:relative; overflow:hidden }
.login__side::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(900px 420px at 70% 15%, var(--accent-soft), transparent 60%); opacity:.85 }
.login__sidecard{ position:relative; width:min(520px,100%) }
.login__stat{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:900px){ .login{ grid-template-columns:1fr } .login__side{ display:none } }

/* ---------------- Calendar (randevu) ---------------- */
.calbar{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.calnav{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-1) }
.calnav button{ width:30px; height:30px; border:0; background:transparent; cursor:pointer; color:var(--text-2); display:grid; place-items:center }
.calnav button:hover{ background:var(--surface-3); color:var(--text) }
.calnav button svg{ width:15px; height:15px }
.calnav .today{ width:auto; padding:0 11px; font-size:12.5px; font-weight:500; border-left:1px solid var(--line); border-right:1px solid var(--line) }
.calday{ font-size:15px; font-weight:600; letter-spacing:-.01em }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-1) }
.seg button{ height:30px; padding:0 12px; border:0; background:transparent; font-size:12.5px; font-weight:500; color:var(--text-2); cursor:pointer }
.seg button + button{ border-left:1px solid var(--line) }
.seg button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent); font-weight:600 }

.cal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1); overflow:hidden }
.cal__scroll{ overflow:auto; max-height:calc(100vh - 210px) }
.cal__grid{ display:grid }
.cal__col{ border-left:1px solid var(--line-soft); position:relative; min-width:0 }
.cal__col:first-child{ border-left:0 }
.cal__head{ position:sticky; top:0; z-index:3; background:var(--surface); border-bottom:1px solid var(--line); display:grid }
.cal__hcell{ padding:8px 10px; border-left:1px solid var(--line-soft); font-size:12.5px; display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden }
.cal__hcell:first-child{ border-left:0 }
.cal__hcell .dotc{ width:8px; height:8px; border-radius:99px; flex:none }
.cal__hcell b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cal__hcell span{ color:var(--text-3); font-size:11px; white-space:nowrap; flex:none }
.cal__times{ position:sticky; left:0; z-index:2; background:var(--surface); border-right:1px solid var(--line); width:62px; min-width:62px }
.cal__time{ height:var(--slot-h,44px); font-size:11px; color:var(--text-3); padding:2px 8px 0; text-align:right; border-top:1px solid var(--line-soft); font-variant-numeric:tabular-nums }
.cal__time:first-child{ border-top:0 }
.cal__slot{ height:var(--slot-h,44px); border-top:1px solid var(--line-soft); cursor:pointer; transition:background .1s }
.cal__slot:first-child{ border-top:0 }
.cal__slot:hover{ background:var(--accent-soft) }
.cal__slot.off{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px); cursor:default }
.cal__slot.off:hover{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px) }
.appt{
  position:absolute; left:3px; right:3px; border-radius:6px; padding:4px 7px; overflow:hidden; cursor:grab;
  border-left:3px solid var(--c,#0e7c6b); background:var(--cs,#e2f2ef); color:var(--text);
  font-size:11.5px; line-height:1.32; z-index:2; box-shadow:var(--shadow-1);
  transition:box-shadow .12s, transform .12s;
}
.appt:hover{ box-shadow:var(--shadow-2); z-index:4 }
.appt.dragging{ opacity:.45 }
.appt__t{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.appt__s{ color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.appt__acts{ display:flex; gap:2px; margin-top:3px }
.appt__acts button{
  flex:1; min-width:0; height:16px; padding:0 3px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text-2);
  font:600 9.5px/1 var(--font); letter-spacing:.01em; overflow:hidden; white-space:nowrap;
}
.appt__acts button:hover{ background:var(--surface-3); color:var(--text); border-color:var(--text-3) }
.appt__acts button[aria-pressed="true"][data-quick="geldi"]{ background:var(--warn); border-color:var(--warn); color:#fff }
.appt__acts button[aria-pressed="true"][data-quick="gelmedi"]{ background:var(--dang); border-color:var(--dang); color:#fff }
.appt__acts button[aria-pressed="true"][data-quick="iptal"]{ background:var(--text-3); border-color:var(--text-3); color:var(--surface) }
.tbl .appt__acts{ margin:0; justify-content:flex-end; gap:3px }
.tbl .appt__acts button{ flex:none; height:22px; padding:0 8px; font-size:11px }
.appt.st-gelmedi{ opacity:.62; text-decoration-color:var(--dang) }
.appt.st-iptal{ opacity:.45 }
.appt.st-tamamlandi::after{ content:"✓"; position:absolute; right:5px; top:3px; font-size:10px; color:var(--ok); font-weight:800 }
.cal__now{ position:absolute; left:0; right:0; height:0; border-top:1.5px solid var(--dang); z-index:5; pointer-events:none }
.cal__now::before{ content:""; position:absolute; left:-4px; top:-4px; width:7px; height:7px; border-radius:99px; background:var(--dang) }

.wkgrid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line-soft) }
.wkday{ background:var(--surface); min-height:150px; padding:7px }
.wkday__h{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px }
.wkday__n{ font-size:12px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em }
.wkday__d{ font-size:15px; font-weight:650 }
.wkday.today .wkday__d{ color:var(--accent) }
.wkday.other{ background:var(--surface-2) }
.wkitem{ font-size:11.5px; padding:3px 6px; border-radius:4px; margin-bottom:3px; cursor:pointer; border-left:3px solid var(--c); background:var(--cs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ---------------- Diş şeması ---------------- */
.chart{ display:flex; flex-direction:column; gap:6px; align-items:center; padding:6px 0 }
.chart__row{ display:flex; gap:14px }
.chart__q{ display:flex; gap:3px }
.chart__q--r{ flex-direction:row-reverse }
.tooth{ width:34px; border:0; background:transparent; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:5px }
.tooth:hover .tooth__box{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) }
.tooth__n{ font-size:9.5px; color:var(--text-3); font-variant-numeric:tabular-nums }
.tooth__box{ width:28px; height:34px; border:1px solid var(--line); border-radius:5px 5px 8px 8px; background:var(--surface); display:grid; place-items:center; position:relative; transition:.12s }
.chart__row--low .tooth{ flex-direction:column-reverse }
.chart__row--low .tooth__box{ border-radius:8px 8px 5px 5px }
.tooth__box svg{ width:20px; height:24px }
.tooth.sel .tooth__box{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) }
.tooth__badge{ position:absolute; right:-3px; top:-3px; width:12px; height:12px; border-radius:99px; border:1.5px solid var(--surface); font-size:7px; display:grid; place-items:center; color:#fff; font-weight:800 }
.legend{ display:flex; flex-wrap:wrap; gap:5px 12px; font-size:11.5px; color:var(--text-2) }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; border:1px solid rgba(0,0,0,.12) }

/* ---------------- Tabs ---------------- */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto }
.tab{
  height:34px; padding:0 12px; border:0; background:transparent; cursor:pointer; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--text) }
.tab[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600 }
.tab .cnt{ font-size:11px; color:var(--text-3); margin-left:4px }

/* ---------------- Misc ---------------- */
.split{ display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start }
.split--wide{ grid-template-columns:1fr 400px }
@media(max-width:1080px){ .split,.split--wide{ grid-template-columns:1fr } }
.kv{ display:grid; grid-template-columns:120px 1fr; gap:7px 12px; font-size:13px }
.kv dt{ color:var(--text-3); font-size:12.5px } .kv dd{ margin:0 }
.timeline{ position:relative; padding-left:20px }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line) }
.tl{ position:relative; padding:0 0 14px }
.tl::before{ content:""; position:absolute; left:-18px; top:5px; width:9px; height:9px; border-radius:99px; background:var(--surface); border:2px solid var(--accent) }
.tl__d{ font-size:11.5px; color:var(--text-3) }
.tl__t{ font-size:13px; font-weight:550 }
.progress{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden }
.progress > i{ display:block; height:100%; background:var(--accent); border-radius:99px }
.hbar{ display:flex; align-items:center; gap:9px }
.hbar__t{ height:8px; border-radius:99px; background:var(--surface-3); flex:1; overflow:hidden }
.hbar__f{ height:100%; border-radius:99px; background:var(--accent) }
.filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px }
.filters .input,.filters .select{ height:31px; width:auto; min-width:130px }
.filters .search-input{ min-width:250px }
.pill-list{ display:flex; flex-direction:column; gap:1px }
.lrow{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; transition:background .1s }
.lrow:hover{ background:var(--surface-2) }
.lrow > svg, .lrow > span:not([class]) > svg{ width:17px; height:17px; flex:none; color:var(--text-3) }
.lrow > span:not([class]){ display:flex; flex:none }
.lrow__m{ flex:1; min-width:0 }
.lrow__t{ font-size:13px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.lrow__s{ font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.time-pill{ font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums; background:var(--surface-3); border-radius:5px; padding:3px 6px; color:var(--text-2) }
.dropdown{ position:absolute; z-index:90; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-3); padding:5px; min-width:190px; animation:pop .12s }
.dropdown button{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 9px; border:0; background:transparent; border-radius:var(--r-sm); cursor:pointer; font-size:13px; text-align:left; color:var(--text) }
.dropdown button:hover{ background:var(--surface-3) }
.dropdown button.danger{ color:var(--dang) }
.dropdown button svg{ width:15px; height:15px; opacity:.8 }
.dropdown hr{ border:0; border-top:1px solid var(--line-soft); margin:4px 0 }
.tag{ font-size:11px; padding:1.5px 7px; border-radius:99px; background:var(--surface-3); color:var(--text-2); font-weight:500 }
.filedrop{ border:1.5px dashed var(--line); border-radius:var(--r); padding:20px; text-align:center; color:var(--text-3); font-size:12.5px; cursor:pointer }
.filedrop:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px }
.thumb{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface-2); cursor:pointer }
.thumb img{ width:100%; height:96px; object-fit:cover; display:block }
.thumb__ph{ height:96px; display:grid; place-items:center; color:var(--text-3) } .thumb__ph svg{ width:26px; height:26px }
.thumb__m{ padding:7px 8px; border-top:1px solid var(--line-soft) }
.thumb__t{ font-size:12px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.thumb__d{ font-size:11px; color:var(--text-3) }
.msgbox{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; font-size:13px; line-height:1.55; white-space:pre-wrap }
.note{ display:flex; gap:9px; padding:10px 12px; border-radius:var(--r); background:var(--info-soft); color:var(--info); font-size:12.5px; align-items:flex-start }
.note svg{ width:16px; height:16px; flex:none; margin-top:1px }
.note--warn{ background:var(--warn-soft); color:var(--warn) }
.printonly{ display:none }

.scrim{ position:fixed; inset:0; background:rgba(10,16,19,.4); z-index:69; display:none }
@media(max-width:820px){
  .app.mobile-open .scrim{ display:block }
  .sidebar{ position:fixed; z-index:70; height:100vh; transform:translateX(-100%); transition:transform .18s; box-shadow:var(--shadow-3) }
  .app.collapsed .sidebar{ width:var(--sb-w) }
  .app.collapsed .nav__label,.app.collapsed .sidebar__brand,.app.collapsed .nav__cnt{ display:revert }
  .app.collapsed .brand__mark{ display:grid }
  .app.collapsed .nav__item{ justify-content:flex-start; padding:0 9px }
  .app.mobile-open .sidebar{ transform:none }
  .only-mobile{ display:inline-flex }
  .topbar__date{ display:none }
  .search{ width:34px; flex:none; justify-content:center; padding:0 }
  .search__ph, .search kbd{ display:none }
  .page__head{ gap:10px }
  .page__actions{ width:100%; margin-left:0 }
  .cal__scroll{ max-height:none }
  .grid2,.grid3,.grid4{ grid-template-columns:1fr }
  .page{ padding:14px 12px 50px }
  .user__meta{ display:none }
}
@media print{
  .sidebar,.topbar,.page__actions,.tabs,.no-print{ display:none !important }
  .app{ height:auto; display:block } .view{ overflow:visible }
  body{ background:#fff } .card{ box-shadow:none; break-inside:avoid }
  .printonly{ display:block }
}