/* EK Call Takip · EkipPanel tasarım dili, turkuaz vurgu */
:root {
  --bg: 246 246 243;
  --side: 255 255 255;
  --surface: 255 255 255;
  --surface-2: 243 243 239;
  --surface-3: 232 232 226;
  --border: 226 226 219;
  --fg: 20 21 24;
  --muted: 92 97 107;
  --subtle: 138 142 150;
  --accent: 45 212 191;
  --accent-fg: 4 32 28;
  --accent-ink: 13 128 112;
  --good: 22 150 90;
  --bad: 214 64 50;
  --warn: 190 118 20;
  --info: 110 86 220;
  --idle: 214 104 30;
  --off: 112 118 130;
  color-scheme: light;
}
.dark {
  --bg: 14 15 18;
  --side: 11 12 15;
  --surface: 22 24 29;
  --surface-2: 27 30 36;
  --surface-3: 38 42 51;
  --border: 36 39 47;
  --fg: 236 237 239;
  --muted: 155 161 173;
  --subtle: 112 118 130;
  --accent: 45 212 191;
  --accent-fg: 4 32 28;
  --accent-ink: 94 234 212;
  --good: 74 222 128;
  --bad: 255 138 122;
  --warn: 242 178 92;
  --info: 176 156 255;
  --idle: 251 146 60;
  --off: 140 147 160;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font: 14px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: rgb(var(--accent) / .35); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: rgb(var(--accent-ink)); text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: "Bricolage Grotesque", "Geist", system-ui, sans-serif; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.display { font-family: "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.02em; }
.muted { color: rgb(var(--muted)); }
.subtle { color: rgb(var(--subtle)); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.stack > * + * { margin-top: 12px; }
.hidden { display: none !important; }
.section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--muted)); }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.anim { animation: in .22s ease-out both; }
input[type='date']::-webkit-calendar-picker-indicator, input[type='time']::-webkit-calendar-picker-indicator { filter: invert(.55); }

/* ---- butonlar ve form ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid rgb(var(--border));
  background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s, transform .1s, filter .15s, border-color .15s;
}
.btn:hover { background: rgb(var(--surface-2)); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.primary { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.soft { background: rgb(var(--surface-2)); border-color: transparent; }
.btn.soft:hover { background: rgb(var(--surface-3)); }
.btn.danger { background: rgb(var(--bad) / .14); color: rgb(var(--bad)); border-color: transparent; }
.btn.danger:hover { background: rgb(var(--bad) / .24); }
.btn.danger.solid { background: rgb(var(--bad)); color: #fff; }
.btn.ghost { border-color: transparent; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 34px; }
.btn.block { width: 100%; }
input, select, textarea {
  height: 42px; padding: 0 12px; border-radius: 12px; background: rgb(var(--surface-2));
  border: 1px solid rgb(var(--border)); outline: none; min-width: 0; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 10px 12px; resize: none; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: rgb(var(--subtle)); }
input:focus, select:focus, textarea:focus { border-color: rgb(var(--accent) / .7); box-shadow: 0 0 0 3px rgb(var(--accent) / .18); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: rgb(var(--accent)); padding: 0; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: rgb(var(--muted)); }
label.field > input, label.field > select, label.field > textarea { color: rgb(var(--fg)); font-weight: 400; }
label.field .small { font-weight: 400; color: rgb(var(--subtle)); }
.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 500; }

.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 18px; padding: 18px; }
.card.pad0 { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px 12px; }
.error { color: rgb(var(--bad)); font-size: 13px; }
.notice { padding: 12px 14px; border-radius: 14px; background: rgb(var(--warn) / .12); border: 1px solid rgb(var(--warn) / .25); font-size: 13.5px; }
.notice.info { background: rgb(var(--accent) / .1); border-color: rgb(var(--accent) / .25); }
.notice.bad { background: rgb(var(--bad) / .1); border-color: rgb(var(--bad) / .25); }
.notice a { font-weight: 600; }

/* ---- rozetler ---- */
.badge {
  --c: var(--off);
  display: inline-flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: rgb(var(--c) / .14); color: rgb(var(--c)); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.nodot::before { display: none; }
.st-mesaide, .st-approved { --c: var(--good); }
.st-molada, .st-pending { --c: var(--warn); }
.st-asim, .st-gelmedi, .st-rejected, .st-revoked { --c: var(--bad); }
.st-masada_degil, .st-cevrimdisi { --c: var(--idle); }
.st-izinli { --c: var(--info); }
.st-cikti, .st-bekleniyor { --c: var(--off); }
.st-mesaide::before { box-shadow: 0 0 0 3px rgb(var(--good) / .25); }
.st-asim::before { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---- tablo ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgb(var(--border)); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--subtle)); white-space: nowrap; background: rgb(var(--surface)); }
th.sort { cursor: pointer; user-select: none; }
th.sort:hover { color: rgb(var(--fg)); }
tr:last-child td { border-bottom: none; }
tr.click { cursor: pointer; transition: background .12s; }
tr.click:hover td { background: rgb(var(--surface-2)); }
td.r, th.r { text-align: right; }
td:first-child { white-space: nowrap; }
.bad-txt { color: rgb(var(--bad)); font-weight: 600; }
.warn-txt { color: rgb(var(--warn)); font-weight: 600; }
.ok-txt { color: rgb(var(--good)); }

/* ---- avatar ---- */
.av { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none;
  background: hsl(var(--h, 170) 45% 50% / .16); color: hsl(var(--h, 170) 60% 62%); font-family: "Bricolage Grotesque", sans-serif; }
:root:not(.dark) .av { color: hsl(var(--h, 170) 55% 36%); }
.person { display: flex; align-items: center; gap: 10px; }
.person b { font-weight: 600; }

/* ---- modal / toast ---- */
.modal-bg { position: fixed; inset: 0; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fade .15s ease-out; }
.modal { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 22px; padding: 22px; width: 100%; max-width: 440px; box-shadow: 0 24px 64px -12px rgb(0 0 0 / .5); max-height: 90vh; overflow: auto; animation: up .22s cubic-bezier(.2,.8,.2,1); }
.modal h2 { margin-bottom: 16px; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: rgb(var(--fg)); color: rgb(var(--bg)); padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 500; box-shadow: 0 16px 48px -12px rgb(0 0 0 / .45); max-width: 90vw; animation: up .2s ease-out; }
.toast.bad { background: rgb(var(--bad)); color: #fff; }

/* ---- marka ---- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 34px; height: 34px; border-radius: 11px; background: rgb(var(--accent)); color: rgb(var(--accent-fg)); display: grid; place-items: center; }
.brand .logo svg { width: 20px; height: 20px; }
.brand .name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; }
.brand .name small { display: block; font-family: "Geist", sans-serif; font-weight: 500; font-size: 11.5px; color: rgb(var(--subtle)); letter-spacing: 0; }

/* ---- giriş ---- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--accent) / .16), transparent 65%); top: -160px; right: -120px; pointer-events: none; }
.auth .card { width: 100%; max-width: 380px; padding: 28px; position: relative; box-shadow: 0 24px 64px -24px rgb(0 0 0 / .45); animation: in .25s ease-out; }
.auth h2 { font-size: 22px; }
.devline { font-size: 12.5px; color: rgb(var(--muted)); border-top: 1px solid rgb(var(--border)); padding-top: 14px; margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; }
.devline svg { flex: none; margin-top: 1px; color: rgb(var(--subtle)); }

/* ================= PERSONEL (kompakt) ================= */
.staff { max-width: 460px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.staff header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 6px; gap: 10px; }
.staff header .who { display: flex; align-items: center; gap: 10px; }
.staff header .who .av { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; }
.staff .clock { font-size: 12.5px; color: rgb(var(--muted)); }
.staff main { flex: 1; padding: 10px 16px 96px; animation: in .22s ease-out; }
.staff nav.tabs {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 436px; display: flex; padding: 6px; gap: 4px;
  background: rgb(var(--surface) / .92); backdrop-filter: blur(12px); border: 1px solid rgb(var(--border)); border-radius: 18px;
  box-shadow: 0 16px 48px -12px rgb(0 0 0 / .45); z-index: 20;
}
.staff nav.tabs button { flex: 1; background: none; border: none; height: 50px; border-radius: 13px; font-size: 11.5px; font-weight: 600; color: rgb(var(--subtle)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; transition: background .15s, color .15s; }
.staff nav.tabs button.on { color: rgb(var(--accent-ink)); background: rgb(var(--accent) / .12); }
.staff nav.tabs svg { width: 20px; height: 20px; }
.dot { position: absolute; top: 5px; right: calc(50% - 20px); min-width: 17px; height: 17px; border-radius: 9px; background: rgb(var(--bad)); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.hero { position: relative; overflow: hidden; text-align: center; padding: 26px 18px 18px; border-radius: 22px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); }
.hero::before { content: ""; position: absolute; inset: auto -40% 55% -40%; height: 220px; background: radial-gradient(closest-side, rgb(var(--hc, var(--accent)) / .18), transparent); pointer-events: none; }
.hero > * { position: relative; }
.hero .label { font-size: 13.5px; font-weight: 600; color: rgb(var(--muted)); }
.hero .big { font-family: "Bricolage Grotesque", sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; margin: 10px 0 8px; }
.hero .sub { font-size: 13px; color: rgb(var(--muted)); }
.hero.molada { --hc: var(--warn); border-color: rgb(var(--warn) / .35); }
.hero.molada .big { color: rgb(var(--warn)); }
.hero.asim { --hc: var(--bad); border-color: rgb(var(--bad) / .45); }
.hero.asim .big { color: rgb(var(--bad)); }
.hero.izinli { --hc: var(--info); }
.hero.open { --hc: var(--accent); border-color: rgb(var(--accent) / .45); }
.hero.open .big { color: rgb(var(--accent-ink)); }
.mainbtn { width: 100%; height: 56px; font-size: 16px; border-radius: 16px; margin-top: 18px; }
.mainbtn.open { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent) / .5); } 50% { box-shadow: 0 0 0 10px rgb(var(--accent) / 0); } }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot { border: 1px solid rgb(var(--border)); border-radius: 14px; padding: 10px 8px; text-align: center; background: rgb(var(--surface)); }
.slot .t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.slot .t svg { width: 13px; height: 13px; color: rgb(var(--warn)); }
.slot .s { font-size: 11.5px; color: rgb(var(--subtle)); margin-top: 2px; }
.slot.taken { background: rgb(var(--good) / .1); border-color: rgb(var(--good) / .25); }
.slot.taken .s { color: rgb(var(--good)); }
.slot.taken.over { background: rgb(var(--bad) / .1); border-color: rgb(var(--bad) / .3); }
.slot.taken.over .s { color: rgb(var(--bad)); }
.slot.active { background: rgb(var(--warn) / .12); border-color: rgb(var(--warn) / .5); }
.slot.open { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .12); }
.slot.open .s { color: rgb(var(--accent-ink)); font-weight: 600; }
.slot.missed { opacity: .55; }
.slot.missed .t { text-decoration: line-through; }
.slot.outside { opacity: .35; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 16px; padding: 12px 14px; }
.stat .v { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .k { font-size: 12px; color: rgb(var(--muted)); }

/* takvim (personel) */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .hd { text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--subtle)); padding: 4px 0; }
.cal .day { min-height: 50px; border-radius: 12px; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); padding: 6px; font-size: 12.5px; cursor: pointer; position: relative; transition: border-color .12s; }
.cal .day:hover { border-color: rgb(var(--accent) / .6); }
.cal .day.past { opacity: .4; cursor: default; }
.cal .day.past:hover { border-color: rgb(var(--border)); }
.cal .day.today { border-color: rgb(var(--accent)); }
.cal .day.empty { background: transparent; border: none; cursor: default; }
.cal .day .n { font-weight: 700; }
.cal .day .c { position: absolute; bottom: 4px; right: 6px; font-size: 10px; color: rgb(var(--subtle)); }
.cal .day.mine-approved { background: rgb(var(--good) / .14); border-color: rgb(var(--good) / .5); }
.cal .day.mine-pending { background: rgb(var(--warn) / .12); border: 1px dashed rgb(var(--warn)); }
.cal .day.mine-rejected { background: rgb(var(--bad) / .1); }
.cal .day.full .c { color: rgb(var(--bad)); font-weight: 700; }

.list-item { padding: 13px 16px; border-bottom: 1px solid rgb(var(--border)); }
.list-item:last-child { border-bottom: none; }
.list-item.unread { background: rgb(var(--accent) / .07); box-shadow: inset 3px 0 0 rgb(var(--accent)); }

/* ================= ADMIN ================= */
.admin { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.admin aside { background: rgb(var(--side)); border-right: 1px solid rgb(var(--border)); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.admin aside .brand { padding: 2px 8px 20px; }
.admin aside a { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 12px; color: rgb(var(--muted)); font-weight: 500; font-size: 14px; transition: background .12s, color .12s; }
.admin aside a:hover { background: rgb(var(--surface-2)); color: rgb(var(--fg)); }
.admin aside a.on { background: rgb(var(--accent) / .12); color: rgb(var(--accent-ink)); font-weight: 600; }
.admin aside a svg { width: 18px; height: 18px; flex: none; }
.admin aside a .cnt { margin-left: auto; background: rgb(var(--accent)); color: rgb(var(--accent-fg)); border-radius: 99px; font-size: 11px; height: 20px; min-width: 20px; display: grid; place-items: center; padding: 0 6px; font-weight: 700; }
.admin aside .sep { font-size: 11px; font-weight: 600; color: rgb(var(--subtle)); padding: 18px 12px 6px; text-transform: uppercase; letter-spacing: .06em; }
.admin aside .foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgb(var(--border)); }
.admin aside .foot .person { margin-bottom: 10px; }
.admin .main { min-width: 0; }
.admin .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; padding: 0 28px; border-bottom: 1px solid rgb(var(--border)); background: rgb(var(--bg) / .85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.admin .topbar h1 { font-size: 22px; }
.admin .topbar h1 a { color: rgb(var(--subtle)); font-weight: 600; }
.admin .content { padding: 24px 28px 48px; animation: in .22s ease-out; }
.chip-clock { height: 34px; padding: 0 12px; border-radius: 10px; background: rgb(var(--surface-2)); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--muted)); }
.chip-clock svg { width: 14px; height: 14px; }
.menu-btn { display: none !important; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 18px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, transform .15s; position: relative; overflow: hidden; }
.kpi:hover { border-color: rgb(var(--accent) / .45); }
.kpi.static { cursor: default; }
.kpi.static:hover { border-color: rgb(var(--border)); }
.kpi.on { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .15); }
.kpi .v { font-family: "Bricolage Grotesque", sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .k { font-size: 13px; color: rgb(var(--muted)); display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 500; }
.kpi .k i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi .sub { font-size: 12px; color: rgb(var(--subtle)); margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 12px; gap: 8px; flex-wrap: wrap; }

/* bildirim paneli */
.bell { position: relative; }
.bell .dot { top: -3px; right: -3px; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: 92vw; max-height: 72vh; overflow: auto; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 18px; box-shadow: 0 24px 64px -12px rgb(0 0 0 / .5); z-index: 40; animation: in .18s ease-out; }
.notif-panel .head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgb(var(--border)); position: sticky; top: 0; background: rgb(var(--surface)); }

/* admin takvim */
.acal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.acal .hd { font-size: 11.5px; color: rgb(var(--subtle)); padding: 2px 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.acal .day { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 14px; min-height: 116px; padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .12s, background .12s; }
.acal .day:hover { border-color: rgb(var(--accent) / .45); }
.acal .day.out { opacity: .35; }
.acal .day.today { border-color: rgb(var(--accent)); }
.acal .day.drop { outline: 2px dashed rgb(var(--accent)); background: rgb(var(--accent) / .08); }
.acal .day.over { border-color: rgb(var(--bad)); }
.acal .day .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.acal .day.today .top > span:first-child { background: rgb(var(--accent)); color: rgb(var(--accent-fg)); border-radius: 7px; padding: 0 6px; }
.acal .day .top .c { color: rgb(var(--subtle)); font-weight: 600; font-size: 11.5px; }
.acal .day.over .top .c { color: rgb(var(--bad)); }
.chip { --c: var(--accent); font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 8px; cursor: grab; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgb(var(--c) / .16); color: rgb(var(--fg)); border: 1px solid transparent; box-shadow: inset 3px 0 0 rgb(var(--c)); }
.chip.t-mazeret { --c: var(--info); }
.chip.t-rapor { --c: var(--idle); }
.chip.t-diger { --c: var(--off); }
.chip.s-pending { border: 1px dashed rgb(var(--warn)); background: rgb(var(--warn) / .08); }
.chip.s-rejected { text-decoration: line-through; opacity: .45; }
.chip.dragging { opacity: .35; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: rgb(var(--muted)); align-items: center; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.daydetail > td { background: rgb(var(--surface-2)); padding: 16px 18px !important; }
.mini-table { width: auto; }
.mini-table td, .mini-table th { padding: 4px 12px 4px 0; border: none; background: none; }
.tl { position: relative; height: 28px; background: rgb(var(--surface)); border-radius: 8px; border: 1px solid rgb(var(--border)); overflow: hidden; min-width: 260px; }
.tl i { position: absolute; top: 0; bottom: 0; }
.tl .w { background: rgb(var(--good) / .22); }
.tl .b { background: rgb(var(--warn)); opacity: .85; }
.tl .bo { background: rgb(var(--bad)); }
.tl .id { background: rgb(var(--idle)); opacity: .7; }
.tl .late { background: rgb(var(--bad) / .14); }

.seg { display: inline-flex; padding: 4px; gap: 2px; background: rgb(var(--surface-2)); border-radius: 12px; }
.seg button { border: none; background: transparent; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: rgb(var(--muted)); }
.seg button:hover { color: rgb(var(--fg)); }
.seg button.on { background: rgb(var(--surface)); color: rgb(var(--fg)); box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; }
  .admin aside { position: fixed; z-index: 30; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 24px 64px -12px rgb(0 0 0 / .6); }
  .admin aside.open { transform: none; }
  .menu-btn { display: inline-flex !important; }
  .admin .content { padding: 16px; }
  .admin .topbar { padding: 0 16px; height: 60px; }
  .admin .topbar h1 { font-size: 18px; }
  .chip-clock { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .acal { gap: 3px; }
  .acal .day { min-height: 74px; padding: 4px; border-radius: 10px; }
  .chip { font-size: 10px; padding: 2px 4px; }
}