/* TaskFlow – tema değişkenleri (açık/koyu) + ortak bileşen stilleri */

:root {
  --c-primary:            79 70 229;    /* indigo-600 */
  --c-on-primary:         255 255 255;
  --c-primary-container:  224 231 255;  /* indigo-100 */
  --c-on-primary-container: 55 48 163;  /* indigo-800 */
  --c-primary-fixed:      224 231 255;
  --c-on-primary-fixed:   30 27 75;     /* indigo-950 */
  --c-secondary:          124 58 237;   /* violet-600 */
  --c-on-secondary:       255 255 255;
  --c-secondary-container:237 233 254;  /* violet-100 */
  --c-on-secondary-container: 91 33 182;
  --c-background:         249 250 251;  /* gray-50 */
  --c-on-background:      17 24 39;      /* gray-900 */
  --c-surface:           255 255 255;
  --c-on-surface:        17 24 39;
  --c-on-surface-variant:75 85 99;      /* gray-600 */
  --c-surface-lowest:    255 255 255;
  --c-surface-low:       249 250 251;
  --c-surface-c:         243 244 246;   /* gray-100 */
  --c-surface-high:      229 231 235;   /* gray-200 */
  --c-surface-highest:   209 213 219;   /* gray-300 */
  --c-outline:           156 163 175;   /* gray-400 */
  --c-outline-variant:   229 231 235;   /* gray-200 */
  --c-error:             220 38 38;
  --c-on-error:          255 255 255;
  --c-error-container:   254 226 226;
  --c-on-error-container:153 27 27;
  --c-success:           16 185 129;
  color-scheme: light;
}

.dark {
  --c-primary:            129 140 248;  /* indigo-400 */
  --c-on-primary:         23 23 48;
  --c-primary-container:  49 46 129;    /* indigo-900 */
  --c-on-primary-container: 224 231 255;
  --c-primary-fixed:      49 46 129;
  --c-on-primary-fixed:   224 231 255;
  --c-secondary:          167 139 250;  /* violet-400 */
  --c-on-secondary:       30 20 60;
  --c-secondary-container:76 29 149;
  --c-on-secondary-container: 237 233 254;
  --c-background:         13 15 23;      /* near-black indigo */
  --c-on-background:      226 232 240;
  --c-surface:           22 26 38;
  --c-on-surface:        237 240 247;
  --c-on-surface-variant:148 163 184;   /* slate-400 */
  --c-surface-lowest:    16 19 28;
  --c-surface-low:       20 24 35;
  --c-surface-c:         28 33 48;
  --c-surface-high:      38 44 63;
  --c-surface-highest:   50 58 82;
  --c-outline:           71 85 105;      /* slate-600 */
  --c-outline-variant:   40 47 66;
  --c-error:             248 113 113;
  --c-on-error:          69 10 10;
  --c-error-container:   127 29 29;
  --c-on-error-container:254 202 202;
  --c-success:           52 211 153;
  color-scheme: dark;
}

html { -webkit-tap-highlight-color: transparent; }
body { transition: background-color .2s ease, color .2s ease; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* İnce kaydırma çubuğu (board sütunları) */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgb(var(--c-outline) / .4); border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Toast */
#toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface));
  padding: 12px 16px; border-radius: 12px; border: 1px solid rgb(var(--c-outline-variant));
  box-shadow: var(--tw-shadow, 0 10px 30px -8px rgba(15,23,42,.35)); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; animation: toast-in .2s ease; max-width: 360px;
}
.toast.ok  { border-left: 4px solid rgb(var(--c-success)); }
.toast.err { border-left: 4px solid rgb(var(--c-error)); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,23,.55); backdrop-filter: blur(2px);
  z-index: 150; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.modal-card {
  background: rgb(var(--c-surface)); color: rgb(var(--c-on-surface));
  border: 1px solid rgb(var(--c-outline-variant));
  border-radius: 18px; width: 100%; max-width: 720px;
  box-shadow: 0 24px 60px -12px rgba(2,6,23,.5); margin: auto; animation: pop-in .18s ease;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }

/* Kanban drag & drop */
.tf-card { cursor: grab; }
.tf-card.dragging { opacity: .4; cursor: grabbing; }
.col-drop-hint { outline: 2px dashed rgb(var(--c-primary) / .6); outline-offset: -4px; background: rgb(var(--c-primary) / .04); }
.drop-placeholder { height: 3px; background: rgb(var(--c-primary)); border-radius: 3px; margin: 4px 0; }

/* Öncelik bar */
.prio-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }

/* Bitiş tarihi rozetleri */
.due-overdue { color: #EF4444; }
.due-today   { color: #F59E0B; }

/* Landing yardımcıları */
.tf-grad-text { background: linear-gradient(120deg,#6366F1,#A855F7,#EC4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tf-hero-bg {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(99,102,241,.18), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(168,85,247,.14), transparent 70%);
}
.tf-grid-bg {
  background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.tf-glass { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); }
.dark .tf-glass { background: rgba(22,26,38,.7); }

/* Yumuşak giriş animasyonu (yalnızca JS hazırsa gizle; aksi halde içerik görünür kalır) */
.js-anim [data-reveal]:not(.revealed) { opacity: 0; }
[data-reveal].revealed { animation: fade-up .6s cubic-bezier(.16,1,.3,1) both; }

[hidden] { display: none !important; }

/* Range/checkbox marka rengi */
input[type="checkbox"].tf-check {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid rgb(var(--c-outline));
  color: rgb(var(--c-primary)); cursor: pointer;
}

/* Segment kontrol */
.seg { display: inline-flex; background: rgb(var(--c-surface-c)); border-radius: 10px; padding: 3px; gap: 2px; }
.seg a, .seg button { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: rgb(var(--c-on-surface-variant)); display: inline-flex; align-items: center; gap: 6px; }
.seg a.active, .seg button.active { background: rgb(var(--c-surface)); color: rgb(var(--c-primary)); box-shadow: 0 1px 2px rgba(2,6,23,.12); }