/* Taskily — visual refinements per feedback:
   - Light mode chip text readable
   - Edit/Delete/Settings = icon-only circle buttons
   - Add Task uses plus-circle icon
   - Theme toggle track uses success green when ON
   - Highlight security labels when opened from Full Reset (first time)
   - Default chip colors brighter
*/

:root{
  --ink: #f3f5f2;
  --muted: #a9b1c6;
  --line: rgba(255,255,255,0.12);
  --panel: rgba(0,0,0,0.8);
  --panel-strong: rgba(255,255,255,0.10);
  --bg: #0d1016;
  --round-xl: 22px;
  --round-lg: 16px;
  --radius: 14px;
  --accent: #5a78ff;
  --success: #30d179;
  --danger: #ff5c7a;
  --chip-bg: #0f131a;  /* dark chip bg */
  --chip-ink: #e7e9ee; /* dark chip text */
  --chip-muted: #b9bdc7;
}

html[data-theme="lt"]{
  --ink: #1c1f26;
  --muted: #4b5563;
  --line: rgba(0,0,0,0.12);
  --panel: #ffffff;
  --panel-strong: rgba(0,0,0,0.06);
  --bg: #f8f9fb;
  --chip-bg: #ffffff;     /* light chip bg */
  --chip-ink: #1c1f26;    /* darker readable text */
  --chip-muted: #4b5563;  /* readable meta */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height: 100%; }
body {
  margin:0;
  font: 300 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}

/* Icons (toolbar/chip buttons) */
.icon { display:inline-grid; place-items:center; width:18px; height:18px; }
.icon svg{ width:18px; height:18px; display:block; fill: currentColor; }

/* Layout */
.app{ display:grid; grid-template-columns:300px 1fr; gap:16px; height:100%; padding:16px; }
.sidebar, .board {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--round-xl);
  padding: 14px;
}
.sidebar{ display:flex; flex-direction:column; gap:12px; min-height:0; }
/* Horizontal scroll lives on the board */
.board{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}

/* Headers / toolbar */
.title{ font-weight:800; font-size:18px; letter-spacing:.3px; }
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pill{ padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; font-size:13px; color:var(--muted); }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.btn{
  appearance:none; border:1px solid var(--line);
  background: transparent; color: var(--ink);
  padding:10px 12px; border-radius:99px; font-weight:600; font-size:13px;
  cursor:pointer; transition:background .2s ease, transform .2s ease, border .2s ease, opacity .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ background: var(--panel-strong); transform: translateY(-1px); }
.btn.brand{ background: var(--accent); color: #fff; border-color: transparent; }
.btn.brand:hover{ filter: brightness(1.06); }
.btn.danger{ border-color: var(--danger); color: var(--danger); }
.btn.quiet{ opacity:.8; }

/* Circle (icon-only) buttons */
.btn.circle{
  width:36px; height:36px; padding:0; border-radius:999px; justify-content:center;
}
.icon-btn.circle{
  width:32px; height:32px; padding:0; border-radius:999px; justify-content:center;
}

/* Library */
.task-list{ flex:1; overflow:auto; display:grid; gap:10px; padding-right:2px; }
.empty-note{
  color:var(--muted); font-size:13px; text-align:center; opacity:.9; padding:12px;
  border:1px dashed var(--line); border-radius:12px;
}
.task-chip{
  position: relative;
  display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  border-radius:16px; background: var(--chip-bg); color: var(--chip-ink);
  border:2px solid rgba(255,255,255,.06);
  cursor:grab; transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
html[data-theme="lt"] .task-chip{ border-color: rgba(0,0,0,.08); }
.task-chip:hover{ border-color: var(--accent); }
.task-chip.dragging{ opacity:.96; cursor:grabbing; }
.task-chip .task-name{ font-weight:700; font-size:14px; }
.task-chip .task-meta{ font-size:12px; color: var(--chip-muted); opacity:.95; }
.task-chip .check-wrap{ position:absolute; top:8px; right:8px; }
.task-chip .check input{ width:18px; height:18px; accent-color: var(--success); }
.chip-actions{ display:flex; gap:8px; align-self:flex-end; margin-top:8px; }
.icon-btn{ padding:6px 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); background:transparent; cursor:pointer; font-weight:600; }
.icon-btn:hover{ background: var(--panel-strong); }
/* Ensure chip action icons are high-contrast in both themes */
.task-chip .icon-btn{
  color: var(--chip-ink);      /* ✅ inherits light in dark theme, dark in light */
  border-color: var(--line);
}
.task-chip .icon svg{
  opacity: .95;                /* slight boost for visibility */
}

/* Week board */
.weekbar{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:12px; width:max-content; min-width:100%; }
.day-col{
  background: transparent; border:1px solid var(--line); border-radius: var(--round-lg);
  display:flex; flex-direction:column; padding:10px; min-height:200px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.day-col.active-day{ border:2px solid var(--accent); }
.day-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.day-name{ font-weight:800; letter-spacing:.3px; }
.progress{ height:8px; border-radius:999px; background:transparent; overflow:hidden; border:1px solid var(--line); }
.progress>i{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--success)); transition: width 260ms ease; }
.dropzone{
  flex:1; min-height:140px; border:1px dashed var(--line); border-radius:12px;
  padding:8px; display:flex; flex-direction:column; gap:8px; overflow:auto;
  transition: all .2s ease;
}
.dropzone.hover{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,120,255,.2) inset; }

/* Sheet */
.sheet{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(25,25,25,.8); z-index:9999; backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);}
.sheet.open{ display:flex; }
.sheet .card{
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  max-width: 520px; width: 92%; padding: 0; color: var(--ink);
  box-shadow: 0 20px 80px rgba(0,0,0,.45); max-height: 90vh; overflow: auto;
}
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding: 18px 22px; border-bottom:1px solid var(--line); }
.sheet .title{ font-size: 1.4rem; font-weight: 400; letter-spacing: 0.3px; }
.sheet .form{ display:flex; flex-direction:column; gap:16px; padding: 18px 22px; }
.field label{ display:flex; font-size:.9rem; font-weight:400; margin-bottom:16px; opacity:.85; }
.field input, .field select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background: transparent; color: var(--ink); font-size:1rem; height: 52px;
}
.smallmuted label{ opacity:.6; }
.actions{ display:flex; align-items:center; gap:10px; justify-content:flex-end; padding: 18px 22px; border-top:1px solid var(--line); }
.actions .spacer{ flex:1; }

.color-hidden{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

/* Swatches */
.swatch-picker{ display:grid; grid-template-columns: repeat(10, 28px); gap:10px; }
.swatch{
  width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.18); cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border .15s ease; position:relative;
}
html[data-theme="lt"] .swatch{ border-color: rgba(0,0,0,.12); }
.swatch:hover{ transform: translateY(-2px); }
.swatch[aria-selected="true"]{ box-shadow: 0 0 0 3px rgba(255,255,255,.15) inset; }
html[data-theme="lt"] .swatch[aria-selected="true"]{ box-shadow: 0 0 0 3px rgba(0,0,0,.1) inset; }

/* Modals */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(25,25,25,0.8); z-index: 60; backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);}
.modal.show{ display:flex; }
.modal .card{
  background: var(--panel); border:1px solid var(--line); border-radius: 22px; min-width: 560px; max-width: 760px; color: var(--ink);
  box-shadow: 0 20px 80px rgba(0,0,0,.45); display:flex; flex-direction:column;
}
.modal header{ padding: 18px 22px; border-bottom:1px solid var(--line); font-weight:400; font-size: 1.4rem; }
.modal section{ padding: 18px 22px; display:grid; gap:14px; }
.modal .grid2{ grid-template-columns: 1fr 1fr; }
.modal .grid2 .full{ grid-column: 1 / -1; }
.modal footer{ padding: 18px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }

/* Theme toggle control (track goes success green when ON) */
/* Theme toggle control */
.toggle { 
  display: inline-flex; 
  align-items: center; 
  gap: 12px; 
  user-select: none; 
}

.toggle .track{
  width: 54px; height: 30px; background: var(--panel-strong);
  border:1px solid var(--line); border-radius:999px; display:inline-block; position:relative;
  transition: background .2s ease, border .2s ease;
}

.toggle .thumb{
  position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  background: var(--ink); transition: left .2s ease, background .2s ease;
}

.toggle input{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.toggle input:checked + .track{ background: var(--success); border-color: transparent; }
.toggle input:checked + .track .thumb{ left:26px; background:#fff; }

/* ✅ ensure the label sits perfectly centered against the 30px track */
.toggle-label{
  color: var(--muted);
  display: inline-flex;
  align-items: center;
top:50%;
  height: 30px;          /* match the track height */
  line-height: 30px;     /* keep text vertically centered */
  margin: 0;             /* remove any default offsets */
}

/* Highlight security labels when coming from Full Reset (first-time) */
.modal .card.needs-security label[for="pw1"],
.modal .card.needs-security label[for="pw2"],
.modal .card.needs-security label[for="secQ"],
.modal .card.needs-security label[for="secA"],
.modal .card.needs-security .note-security{
  color: var(--danger);
}

/* Toasts — bottom center (unchanged container) */
.toast-wrap{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:1500; display:flex; flex-direction:column; gap:12px; align-items:center;
  pointer-events:none;
}

/* Full 1px color border, no left stripe */
.toast{
  display:flex; align-items:center; gap:12px; min-width:260px; max-width:360px;
  background: var(--panel);
  border: 1px solid var(--toast-border, var(--accent));   /* <- full outline color */
  border-radius:16px; padding:14px 18px; color: var(--ink); font-size:14px; font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  transform:translateY(12px) scale(.96); opacity:0;
  animation: toastIn .25s ease forwards;
  pointer-events:auto;
}

/* Per-type color (dynamic but stable) */
.toast.info    { --toast-border: var(--accent); }
.toast.success { --toast-border: var(--success); }
.toast.warning { --toast-border: var(--danger); }

.toast.out{ opacity:0; transform: translateY(22px) scale(.97); transition: opacity .25s ease, transform .25s ease; }
@keyframes toastIn{ to{ opacity:1; transform: translateY(0) scale(1);} }

/* Responsive */
@media (max-width:1024px){
  .app{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .sidebar{ order:2; }
  .board{ order:1; }
  .modal .card{ min-width: 92vw; }
}

.sidebar-header .title{margin-bottom: 16px;}