/* FILE: /css/index.css
   Purpose: Index page specifics (fine-tuning visuals, calendar day styling, task color tokens,
            recurring indicator placeholder, clock emphasis, subtle polish).
   Notes:
   - Keep this file minimal. Anything reusable should live in base/layout/components.
*/

/* ---------- Page-specific tokens (can evolve later) ---------- */
:root {
  /* System blocks (default) */
  --sleep-color: rgba(28, 42, 68, 0.14); /* soft night */
  --free-color: rgba(17, 17, 17, 0.06);  /* open/unscheduled */
}

/* ---------- Topbar micro polish ---------- */
.topbar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

/* Profile menu anchor (position relative for absolute menu) */
.topbar__right {
  position: relative;
}

.menu--profile {
  top: calc(100% + var(--s-2));
  right: 0;
}

/* ---------- Calendar day buttons (visual only) ---------- */
.cal-day {
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}

.cal-day:hover {
  background: var(--surface-3);
  border-color: var(--line);
}

.cal-day:active {
  transform: translateY(1px);
}

.cal-day[aria-selected="true"] {
  background: var(--text);
  color: var(--accent-contrast);
  border-color: var(--text);
}

/* ---------- Task row coloring (using data attributes later) ---------- */
/* Default placeholder color bar already exists in layout.css. Here we enable color mapping. */
.task-row__color {
  background: var(--free-color);
}

/* Color classes (JS can add .is-blue etc. OR set data-color="blue") */
.task-row[data-color="blue"]   .task-row__color { background: rgba(58, 122, 254, 0.90); }
.task-row[data-color="red"]    .task-row__color { background: rgba(231, 76, 60, 0.92); }
.task-row[data-color="green"]  .task-row__color { background: rgba(46, 204, 113, 0.92); }
.task-row[data-color="yellow"] .task-row__color { background: rgba(241, 196, 15, 0.92); }
.task-row[data-color="purple"] .task-row__color { background: rgba(155, 89, 182, 0.92); }
.task-row[data-color="orange"] .task-row__color { background: rgba(230, 126, 34, 0.92); }

/* Recurring icon container (SVG) */
.task-row__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
}

/* The actual SVG */
.task-row__icon-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(17, 17, 17, 0.55);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

/* Hide icon when not recurring (works because we don’t render it anyway, but harmless) */
.task-row:not([data-recurring="true"]) .task-row__icon {
  display: none;
}


/* Optional: hide the icon when not recurring (JS can remove the element or toggle this class) */
.task-row:not([data-recurring="true"]) .task-row__icon {
  display: none;
}

/* ---------- Stage / clock emphasis (index only) ---------- */
.stage__now-time {
  font-variant-numeric: tabular-nums;
}

.stage__active-title {
  font-variant-numeric: tabular-nums;
}

/* Clock placeholder subtle shading to feel "classic" */
.clock {
  background:
    radial-gradient(circle at center, rgba(17,17,17,0.04) 0%, rgba(17,17,17,0.02) 55%, rgba(17,17,17,0.00) 72%),
    var(--surface);
}

/* “Active slice” highlight (JS will toggle .is-active-slot on .clock-wrap) */
.clock-wrap.is-active-slot {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

/* Hint overlay buttons alignment on narrow widths is handled in layout.css; add tiny spacing tweaks */
.clock-hint__text {
  line-height: 1.35;
}

/* Reflection line presentation */
.reflection__line {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-md);
  background: rgba(17, 17, 17, 0.04);
  border: 1px solid rgba(17, 17, 17, 0.06);
  display: inline-block;
}

/* ---------- Modal close icon placeholder refinement ---------- */
.modal__header .icon-btn {
  border-color: var(--line);
}

/* ---------- Small screens: tighten sidebar blocks slightly ---------- */
@media (max-width: 560px) {
  .panel__header {
    padding: var(--s-3);
  }

  .calendar,
  .form,
  .rhythm {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }

  .task-row {
    padding: var(--s-3);
  }
}

/* ---------- Sonraki iyileştirmeler ---------- */


.task-row[data-active="true"] {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ---------- Active Time Highlight ---------- */

/* Clock active slice highlight */
.clock-wrap svg path.is-active {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  transform-origin: 50% 50%;
  animation: clockPulse 1.6s ease-in-out infinite;
}

/* Smooth but subtle pulse */
@keyframes clockPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.012); opacity: 0.96; }
}




/* Task title default: single line truncate */
.task-row__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expanded: wrap */
.task-row.is-expanded .task-row__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


/* ========== Focus Mode (v1) ========== */
body.is-focus .task-list .task-row {
  opacity: 0.35;
  filter: saturate(0.8);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.is-focus .task-list .task-row.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* aktif olanın renk şeridini ve başlığı biraz daha “net” göster */
body.is-focus .task-list .task-row.is-active .task-row__title {
  font-weight: 700;
}

body.is-focus .task-list .task-row.is-active .task-row__time {
  opacity: 0.95;
}

/* Focus butonu aktif görünsün (btn--ghost üzerinde) */
.btn.is-active {
  border-color: var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


/* ========== Focus Mode (v1) — robust selectors ========== */
body.is-focus [data-component="task-list"] > * {
  opacity: 0.30;
  filter: saturate(0.85);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.is-focus [data-component="task-list"] > *.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* Focus butonu aktif görünümü */
.btn.is-active {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


/* Daralt modunda da liste kendi içinde kayabilsin */
.task-list {
  overflow: auto;
  scroll-behavior: smooth;
}


/* ===== Focus Mode (v1) ===== */
body.is-focus .task-row {
  opacity: 0.28;
  filter: saturate(0.7);
  transition: opacity var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}

body.is-focus .task-row.is-active {
  opacity: 1;
  filter: none;
}

body.is-focus .task-row.is-active {
  outline: 2px solid rgba(17, 17, 17, 0.12);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* =========================
   Clock Only Mode (TV Mode)
   - Hide sidebar and all non-clock UI
   ========================= */

body.is-clock-only .sidebar {
  display: none !important;
}

/* Main alanı tek kolon gibi kullan */
body.is-clock-only .app {
  grid-template-columns: 1fr !important; /* layout.css grid ise */
}

/* Stage header (Şu an / Aktif Dilim / butonlar) istersen minimal tut */
body.is-clock-only .stage__header {
  opacity: 0.35;
  transition: opacity 200ms ease;
}
body.is-clock-only .stage__header:hover {
  opacity: 1;
}

/* Yalnızca saat büyüsün */
body.is-clock-only [data-component="analog-clock"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Saatin container'ını “poster” gibi büyüt */
body.is-clock-only [data-component="analog-clock"] .clock {
  width: min(92vh, 92vw) !important;
  height: min(92vh, 92vw) !important;
  max-width: none !important;
  max-height: none !important;
}

/* Reflection / öneri kutusu vs. istersen gizle */
body.is-clock-only .reflection,
body.is-clock-only .clock-hint {
  display: none !important;
}

body.is-clock-only .topbar {
  display: none !important;
}

/* ADD THESE (do not remove existing rules)
   Where to put:
   - Prefer /css/base.css for :root + global font.
   - Prefer /css/components.css for brand + footer components.
*/

/* --- base.css (append near end) --- */
:root{
  --font-sans: "Arimo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-brand: "Maharlika", serif;
}

html, body{
  font-family: var(--font-sans);
}

/* --- components.css (append near end) --- */
.brand__name{
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.brand__yilcore{
  font-family: var(--font-brand);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
}

.brand__tool{
  font-family: var(--font-sans);
  font-weight: 600;
  opacity: .9;
}

.app-footer{
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.app-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.app-footer__line{
  font-size: 13px;
  color: var(--muted);
}

.app-footer__meta{
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
}