/* ==========================================================================
   Günlük yoklama (giriş / çıkış) — görevli ekranı, rapor, ayarlar ve beş panelin yoklama bölümleri
   Renk tek başına bilgi taşımaz: her durumda ikon + metin vardır.
   ========================================================================== */

:root {
  --att-in: var(--dark-green);      --att-in-bg: #E3F6EA;
  --att-out: #0F5132;               --att-out-bg: var(--tint);
  --att-absent: var(--danger);      --att-absent-bg: var(--danger-bg);
  --att-excused: var(--info);       --att-excused-bg: var(--info-bg);
  --att-wait: var(--muted);         --att-wait-bg: var(--surface-2);
}

/* ------------------------------------------------------------------ Başlık ve gün seçici */
.att-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--dark-green); }
.att-daynav { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.att-daynav .input { min-height: 38px; width: auto; }
.att-tabs .i { margin-right: 4px; }
.icon-btn.is-disabled { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------------ Gün durumu şeridi */
.att-phase {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.att-phase-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.att-phase-ic .i { width: 24px; height: 24px; }
.att-phase-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.att-phase-top strong { font-size: 17px; font-weight: 800; }
.att-phase-hours { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.att-phase p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.att-phase-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.att-day-bar { margin-top: 10px; height: 6px; border-radius: 99px; background: rgba(var(--brand-rgb), .15); overflow: hidden; max-width: 520px; }
.att-day-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-green), var(--brand-bright)); }

.att-phase.is-open {
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--brand-rgb), .28), transparent 55%), linear-gradient(135deg, var(--ink), var(--ink-4));
  border-color: rgba(var(--brand-rgb), .35); color: #fff;
}
.att-phase.is-open .att-phase-ic { background: rgba(var(--brand-rgb), .2); color: var(--brand-bright); position: relative; }
.att-phase.is-open .att-phase-ic::after { content: ''; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid rgba(var(--brand-rgb), .45); animation: att-pulse 2.2s var(--ease) infinite; }
.att-phase.is-open p { color: rgba(255, 255, 255, .78); }
.att-phase.is-open .att-phase-hours { background: rgba(255, 255, 255, .1); color: #D7F5E4; }
.att-phase.is-open .att-day-bar { background: rgba(255, 255, 255, .12); }
.att-phase.is-open .btn:not(.btn-primary) { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.att-phase.is-upcoming .att-phase-ic { background: var(--info-bg); color: var(--info); }
.att-phase.is-closed .att-phase-ic { background: var(--tint); color: var(--dark-green); }
.att-phase.is-missed { border-color: #F2D19B; background: var(--warning-bg); }
.att-phase.is-missed .att-phase-ic { background: #fff; color: var(--warning); }
.att-phase.is-sunday .att-phase-ic, .att-phase.is-holiday .att-phase-ic { background: #FFF7E6; color: #B7791F; }
.att-phase.is-compact { padding: 14px 16px; }
.att-phase.is-compact .att-phase-ic { width: 40px; height: 40px; }
@keyframes att-pulse { 0% { opacity: .9; transform: scale(.92); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .att-phase.is-open .att-phase-ic::after { animation: none; } }

/* ------------------------------------------------------------------ Sayaç kutuları */
.att-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }

.att-tile {
  --tone: var(--text); --tone-bg: var(--surface-2);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
  font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
button.att-tile { cursor: pointer; }
button.att-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.att-tile.is-active { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent); }
.att-tile-ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); }
.att-tile-n { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--tone); }
.att-tile-l { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.att-tile.is-inside { --tone: var(--att-in); --tone-bg: var(--att-in-bg); }
.att-tile.is-present { --tone: var(--att-out); --tone-bg: var(--att-out-bg); }
.att-tile.is-absent { --tone: var(--att-absent); --tone-bg: var(--att-absent-bg); }
.att-tile.is-excused { --tone: var(--att-excused); --tone-bg: var(--att-excused-bg); }
.att-tile.is-waiting { --tone: #6B5B16; --tone-bg: #FBF3D5; }

/* ------------------------------------------------------------------ Görevli listesi */
.att-board { overflow: hidden; }
.att-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.att-toolbar form { margin: 0; }
.att-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 48px; border-radius: 14px; border: 1.5px solid var(--border-strong); background: #fff; transition: border-color .15s, box-shadow .15s; }
.att-search:focus-within { border-color: var(--primary-green); box-shadow: var(--focus); }
.att-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 600; }
.att-search kbd { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--subtle); padding: 3px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.att-search > .i { color: var(--subtle); }

.att-list { display: grid; }
.att-row {
  --tone: var(--border-strong);
  display: grid; grid-template-columns: minmax(200px, 1fr) auto 128px minmax(240px, auto); align-items: center; gap: 12px 20px;
  padding: 14px 18px 14px 16px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--tone); transition: background .2s;
}
.att-row:last-child { border-bottom: 0; }
.att-row:hover { background: #FBFDFC; }
.att-row.is-inside { --tone: var(--primary-green); background: linear-gradient(90deg, rgba(var(--brand-rgb), .07), transparent 40%); }
.att-row.is-present { --tone: var(--att-out); }
.att-row.is-absent { --tone: var(--att-absent); }
.att-row.is-excused { --tone: var(--att-excused); }
.att-row.is-flash { animation: att-flash 1.2s var(--ease); }
@keyframes att-flash { 0% { background: rgba(var(--brand-rgb), .28); } 100% { background: transparent; } }
.att-row.is-busy { opacity: .55; pointer-events: none; }

.att-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-who-text { min-width: 0; display: grid; }
.att-name { font-weight: 800; font-size: 15.5px; overflow-wrap: anywhere; }
.att-name:hover { color: var(--dark-green); text-decoration: underline; text-underline-offset: 3px; }
.att-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.att-times { display: flex; gap: 6px; }
.att-t { display: grid; min-width: 68px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); text-align: center; line-height: 1.2; }
.att-t small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.att-t small abbr { text-decoration: none; color: var(--warning); }
.att-t strong { font-size: 15px; font-weight: 800; color: var(--subtle); }
.att-t.has strong { color: var(--text); }
.att-t.has { background: var(--tint); }
.att-t-span { min-width: 92px; }
.att-t-span strong { font-size: 13px; color: var(--text); }
.att-chip { justify-self: start; }

.att-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.att-actions form { margin: 0; }
.att-main { min-width: 120px; min-height: 46px; font-size: 15px; font-weight: 800; border-radius: 12px; }
.att-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dark-green); padding: 0 8px; }
.att-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: -4px 0 0 54px; font-size: 12.5px; color: var(--muted); }
.att-row[hidden] { display: none; }

/* ------------------------------------------------------------------ Öğrenci yoklama bölümü (beş panel) */
/* Tek sütun minmax(0, 1fr): içerideki kayıt tablosunun genişliği kartı telefonda ekran dışına taşırmasın */
.att-history { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.att-h-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.att-h-head .h3 { display: flex; align-items: center; gap: 8px; }
.att-h-head .h3 .i { color: var(--primary-green); }
.att-today-chip { height: auto; min-height: 32px; padding: 6px 12px; white-space: normal; font-size: 13px; }

.att-h-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--tint), var(--surface-2)); }
.att-ring { --deg: 0deg; position: relative; width: 108px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary-green) var(--deg), rgba(16, 35, 41, .09) 0); }
.att-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.att-ring > span { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.att-ring strong { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--deep-green); }
.att-ring small { font-size: 11px; font-weight: 700; color: var(--muted); }
.att-h-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.att-h-kpis > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); }
.att-h-kpis dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.att-h-kpis dd { font-size: 19px; font-weight: 800; color: var(--text); }
.att-h-kpis dd small { font-size: 12px; color: var(--subtle); font-weight: 700; }
.att-h-kpis .is-ok dd { color: var(--dark-green); }
.att-h-kpis .is-bad dd { color: var(--danger); }
.att-h-kpis .is-info dd { color: var(--info); }
.att-h-overall { color: var(--muted); margin-top: -6px; }
.att-h-overall > .i { margin-right: 6px; color: var(--subtle); }
.att-h-overall strong { color: var(--text); }

.att-cal-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.att-cal-head strong { min-width: 130px; text-align: center; font-size: 15px; font-weight: 800; }
.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.att-cal-wd { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); padding-bottom: 2px; }
.att-cell {
  --c: var(--surface); --b: var(--border);
  min-height: 70px; padding: 6px 7px; border-radius: 12px; background: var(--c); border: 1px solid var(--b);
  display: flex; flex-direction: column; gap: 1px; min-width: 0; position: relative;
}
.att-cell-n { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.att-cell-t { font-size: 12.5px; font-weight: 800; color: var(--deep-green); line-height: 1.25; }
.att-cell-t.is-out { color: var(--muted); font-weight: 700; }
.att-cell-s { font-size: 11.5px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.att-cell.is-present, .att-cell.is-inside { --c: #E8F7EE; --b: #BFE6CF; }
.att-cell.is-inside { box-shadow: inset 0 0 0 2px var(--primary-green); }
.att-cell.is-absent { --c: var(--danger-bg); --b: #F5C9C5; }
.att-cell.is-absent .att-cell-s { color: var(--danger); }
.att-cell.is-excused { --c: var(--info-bg); --b: #C9DDF1; }
.att-cell.is-excused .att-cell-s { color: var(--info); }
.att-cell.is-sunday, .att-cell.is-holiday { --c: repeating-linear-gradient(135deg, #FBF7EC 0 6px, #F7F1E1 6px 12px); --b: #EFE5CC; }
.att-cell.is-sunday .att-cell-s, .att-cell.is-holiday .att-cell-s { color: #9A7B2A; }
.att-cell.is-waiting { --b: var(--border-strong); border-style: dashed; }
.att-cell.is-waiting .att-cell-s { color: var(--muted); }
.att-cell.is-future { opacity: .45; }
.att-cell.is-today { outline: 2px solid var(--text); outline-offset: 1px; }
.att-cell.is-today .att-cell-n::after { content: ' · bugün'; font-weight: 700; color: var(--text); }

.att-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 600; color: var(--muted); }
.att-legend li { display: inline-flex; align-items: center; gap: 6px; }
.att-legend li[class^="is-"]::before { content: ''; width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--border); }
.att-legend .is-present::before { background: #E8F7EE; border-color: #BFE6CF; }
.att-legend .is-absent::before { background: var(--danger-bg); border-color: #F5C9C5; }
.att-legend .is-excused::before { background: var(--info-bg); border-color: #C9DDF1; }
.att-legend .is-sunday::before { background: #F7F1E1; border-color: #EFE5CC; }
.att-legend .is-none::before { background: var(--surface); }

.att-records { border-top: 1px solid var(--border); margin: 0 -22px -22px; }
.att-records summary { display: flex; align-items: center; gap: 8px; padding: 14px 22px; cursor: pointer; font-weight: 800; font-size: 14px; list-style: none; }
.att-records summary::-webkit-details-marker { display: none; }
.att-records summary::after { content: '+'; margin-left: auto; font-size: 18px; color: var(--muted); }
.att-records[open] summary::after { content: '–'; }
.att-records .table td, .att-records .table th { padding: 12px 16px; }

/* Devre zeminli sayfalarda (veli) başlıklar beyazdır; açık kart içinde koyu kalmalı */
body.has-circuit.is-student-portal .att-history h2,
body.has-circuit.is-student-portal .att-history h3,
body.has-circuit.is-student-portal .att-history .h3 { color: var(--text) !important; }

/* ------------------------------------------------------------------ Rapor */
.att-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.att-rate { display: inline-flex; min-width: 52px; justify-content: center; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.att-rate.is-good { background: var(--tint); color: var(--dark-green); }
.att-rate.is-mid { background: var(--warning-bg); color: var(--warning); }
.att-rate.is-low { background: var(--danger-bg); color: var(--danger); }
.att-report td.strong { font-weight: 800; }

.att-bars { display: flex; align-items: flex-end; gap: 6px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; }
.att-bar { flex: 1 0 26px; max-width: 44px; display: grid; gap: 6px; justify-items: center; }
.att-bar-stack { width: 100%; height: 140px; display: flex; flex-direction: column-reverse; border-radius: 8px; overflow: hidden; background: var(--surface-2); transition: transform .15s var(--ease); }
.att-bar:hover .att-bar-stack { transform: translateY(-2px); box-shadow: var(--shadow); }
.att-bar-stack > span { display: block; width: 100%; }
.seg-present { background: var(--primary-green); }
.seg-absent { background: #E5736A; }
.seg-excused { background: #7BA9DA; }
.seg-holiday { background: repeating-linear-gradient(135deg, #FBF7EC 0 6px, #F1E7CC 6px 12px); }
.att-bar-l { display: grid; justify-items: center; font-size: 12px; font-weight: 800; line-height: 1.1; }
.att-bar-l small { font-size: 10px; font-weight: 700; color: var(--subtle); }

/* ------------------------------------------------------------------ Ayarlar */
.att-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: f; position: relative; }
.att-flow li { position: relative; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.att-flow li:first-child { background: var(--tint); border-color: #BFE6CF; }
.att-flow li:nth-child(3) { background: #EEF4FF; border-color: #CFDDF5; }
.att-flow li:last-child { background: #FBF7EC; border-color: #EFE5CC; }
.att-flow-t { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--deep-green); }
.att-flow strong { display: block; margin-top: 4px; font-size: 15px; }
.att-flow p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.att-staff { border-top: 1px solid var(--border); }
.att-staff li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.att-staff li:last-child { border-bottom: 0; }
.att-staff li > :first-child { flex: 1; min-width: 0; }
.att-staff li.is-past { opacity: .6; }
.att-staff .title { font-weight: 700; }
.att-staff .sub { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ Öğretmen / mentör bugünkü liste */
.att-scope-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.att-mini { border-top: 1px solid var(--border); max-height: 620px; overflow: auto; }
.att-mini li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.att-mini li:last-child { border-bottom: 0; }
.att-mini .title { font-weight: 700; font-size: 14px; }
.att-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.att-mini .is-inside .att-dot { background: var(--primary-green); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .18); }
.att-mini .is-present .att-dot { background: var(--att-out); }
.att-mini .is-absent .att-dot { background: var(--danger); }
.att-mini .is-excused .att-dot { background: var(--info); }

/* ------------------------------------------------------------------ Veli paneli: çocuk kartındaki yoklama şeridi */
.vp-att {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.vp-att:hover { border-color: var(--primary-green); box-shadow: var(--shadow); }
.vp-att-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.vp-att.is-inside .vp-att-ic, .vp-att.is-present .vp-att-ic { background: var(--att-in-bg); color: var(--att-in); }
.vp-att.is-inside { border-color: #BFE6CF; background: linear-gradient(90deg, #F0FAF4, var(--surface) 60%); }
.vp-att.is-absent .vp-att-ic { background: var(--danger-bg); color: var(--danger); }
.vp-att.is-excused .vp-att-ic { background: var(--info-bg); color: var(--info); }
.vp-att small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vp-att-main strong { font-size: 15px; font-weight: 800; }
.vp-att-month { text-align: right; line-height: 1.25; }
.vp-att-month strong { display: block; font-size: 15px; color: var(--dark-green); }
.vp-att-month em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ Öğrenci: bugünkü yoklamam */
.att-me {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 20px;
  padding: 18px 20px; border-radius: var(--radius-lg); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--brand-rgb), .3), transparent 55%), linear-gradient(135deg, var(--ink), var(--ink-4));
  box-shadow: var(--shadow-lg);
}
.att-me-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: rgba(var(--brand-rgb), .2); color: var(--brand-bright); }
.att-me-ic .i { width: 26px; height: 26px; }
.att-me small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); font-weight: 700; }
.att-me strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.att-me-times { display: flex; gap: 8px; }
.att-me-times span { display: grid; min-width: 78px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.att-me-times b { font-size: 19px; }
.att-me.is-absent .att-me-ic { background: rgba(229, 115, 106, .2); color: #FFB4AD; }

/* ------------------------------------------------------------------ Ekipler */
.team-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.team-card { transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.team-card:hover { border-color: var(--primary-green); box-shadow: var(--shadow); transform: translateY(-2px); }
.team-avatars { display: flex; align-items: center; }
.team-avatars .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.team-avatars .avatar:first-child { margin-left: 0; }
.team-avatars .more { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.team-today { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.team-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.team-search .input { flex: 1; min-width: 200px; }
/* Uzun okul adları seçim kutusunu telefonda ekran dışına taşırmasın */
.team-search .select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Duyarlı düzen */
@media (max-width: 1100px) {
  .att-row { grid-template-columns: minmax(0, 1fr) auto; }
  .att-times { grid-column: 1 / -1; order: 3; }
  .att-chip { grid-row: 1; grid-column: 2; justify-self: end; }
  .att-actions { grid-column: 1 / -1; order: 4; justify-content: flex-start; }
  .att-note { margin-left: 0; order: 5; }
  .att-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .att-tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .att-tile { grid-template-columns: 1fr; padding: 10px 12px; }
  .att-tile-ic { display: none; }
  .att-tile-n { font-size: 22px; }
  .att-phase { grid-template-columns: auto minmax(0, 1fr); }
  .att-phase-actions { grid-column: 1 / -1; }
  .att-h-stats { grid-template-columns: 1fr; justify-items: center; }
  .att-h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .att-cal { gap: 3px; }
  .att-cell { min-height: 54px; padding: 4px; border-radius: 8px; }
  .att-cell-t, .att-cell-s { font-size: 10.5px; }
  .att-cell.is-today .att-cell-n::after { content: ''; }
  .att-search kbd { display: none; }
  .att-main { flex: 1; }
  .att-actions form:has(.att-main) { flex: 1; }
  .att-actions form:has(.att-main) .btn { width: 100%; }
  .vp-att { grid-template-columns: auto minmax(0, 1fr); }
  .vp-att-month { grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .vp-att > .i { display: none; }
  .att-me { grid-template-columns: auto minmax(0, 1fr); }
  .att-me-times { grid-column: 1 / -1; }
  .att-me-times span { flex: 1; }
  .team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-records { margin: 0 -16px -16px; }
  .att-history { padding: 16px; }
}
@media (max-width: 520px) {
  .att-filter, .att-flow { grid-template-columns: 1fr; }
  .att-daynav { width: 100%; }
  .att-daynav .input { flex: 1; }
}

/* Veli paneli: devre zeminindeki beyaz başlık kuralı açık kartların içindeki başlıkları görünmez yapıyordu (beyaz üstüne beyaz) */
body.has-circuit.is-student-portal .vp .card h2,
body.has-circuit.is-student-portal .vp .card h3,
body.has-circuit.is-student-portal .vp .card .h3,
body.has-circuit.is-student-portal .vp .card .vp-child-name { color: var(--text) !important; }