/* ============================================================
   TaskFlow — Premium Dark Theme
   ============================================================ */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #07071a;
  --bg-up:         #0d0d20;
  --surface:       #131326;
  --surface-hover: #1a1a32;
  --surface-act:   #20203c;

  /* Borders */
  --border:        rgba(255,255,255,0.065);
  --border-md:     rgba(255,255,255,0.11);
  --border-strong: rgba(255,255,255,0.18);

  /* Brand */
  --purple:        #7c3aed;
  --purple-lt:     #a78bfa;
  --purple-glow:   rgba(124,58,237,0.28);
  --blue:          #2563eb;
  --blue-lt:       #60a5fa;
  --cyan:          #0891b2;

  /* Semantic */
  --success:  #10b981;  --success-bg:  rgba(16,185,129,0.12);
  --warning:  #f59e0b;  --warning-bg:  rgba(245,158,11,0.12);
  --danger:   #ef4444;  --danger-bg:   rgba(239,68,68,0.12);
  --info:     #3b82f6;  --info-bg:     rgba(59,130,246,0.12);

  /* Status */
  --c-todo:       #64748b;  --bg-todo:       rgba(100,116,139,0.12);
  --c-inprogress: #3b82f6;  --bg-inprogress: rgba(59,130,246,0.12);
  --c-review:     #f59e0b;  --bg-review:     rgba(245,158,11,0.12);
  --c-done:       #10b981;  --bg-done:       rgba(16,185,129,0.12);

  /* Priority */
  --p-low:    #34d399;  --p-low-bg:    rgba(52,211,153,0.12);
  --p-medium: #fbbf24;  --p-medium-bg: rgba(251,191,36,0.12);
  --p-high:   #f87171;  --p-high-bg:   rgba(248,113,113,0.12);

  /* Text */
  --text:       #eeeef8;
  --text-sec:   #9898b8;
  --text-muted: #58587a;

  /* Layout */
  --sidebar-w: 252px;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* Radius */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --r-xl:18px; --r-2xl:24px; --r-full:9999px;

  /* Shadows */
  --sh-sm:  0 2px 8px  rgba(0,0,0,0.45);
  --sh-md:  0 4px 20px rgba(0,0,0,0.55);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.65);
  --sh-p:   0 4px 28px rgba(124,58,237,0.38);

  /* Transitions */
  --tf: 130ms ease;
  --tb: 200ms ease;
  --ts: 360ms cubic-bezier(.4,0,.2,1);
}

/* ── 1b. LIGHT THEME ────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg:            #f4f6fb;
  --bg-up:         #ffffff;
  --surface:       #ffffff;
  --surface-hover: #f0f3fa;
  --surface-act:   #e8ecf5;

  /* Borders */
  --border:        rgba(0,0,0,0.07);
  --border-md:     rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.20);

  /* Brand (keep purple, lighten glow) */
  --purple-glow:   rgba(124,58,237,0.12);

  /* Semantic */
  --success-bg:  rgba(16,185,129,0.1);
  --warning-bg:  rgba(245,158,11,0.1);
  --danger-bg:   rgba(239,68,68,0.1);
  --info-bg:     rgba(59,130,246,0.1);

  /* Status */
  --bg-todo:       rgba(100,116,139,0.1);
  --bg-inprogress: rgba(59,130,246,0.1);
  --bg-review:     rgba(245,158,11,0.1);
  --bg-done:       rgba(16,185,129,0.1);

  /* Priority */
  --p-low-bg:    rgba(52,211,153,0.1);
  --p-medium-bg: rgba(251,191,36,0.1);
  --p-high-bg:   rgba(248,113,113,0.1);

  /* Text */
  --text:       #1a1a2e;
  --text-sec:   #4a4a72;
  --text-muted: #8888aa;

  /* Shadows */
  --sh-sm:  0 2px 8px  rgba(0,0,0,0.08);
  --sh-md:  0 4px 20px rgba(0,0,0,0.10);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.14);
  --sh-p:   0 4px 28px rgba(124,58,237,0.22);
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,.07), transparent 35%),
    radial-gradient(circle at 88% 82%, rgba(244,114,182,.07), transparent 42%),
    linear-gradient(160deg, #f4f6fb 0%, #eef2ff 55%, #f0f4ff 100%);
}

[data-theme="light"] .sidebar {
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(242,245,255,.98));
}

[data-theme="light"] .app-body {
  background:linear-gradient(180deg, rgba(0,0,0,.015), transparent 38%);
}

[data-theme="light"] .task-card {
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,255,.9));
}

[data-theme="light"] .task-card:hover {
  background:linear-gradient(180deg, #fff, rgba(248,250,255,.98));
  border-color:rgba(99,102,241,.22);
}

[data-theme="light"] .wb-topbar {
  background:linear-gradient(135deg, rgba(37,99,235,.09), rgba(244,114,182,.07));
}

[data-theme="light"] .wb-topbar .wb-subtitle { color:var(--text-sec); }

[data-theme="light"] .wb-toolbar {
  background:linear-gradient(180deg, rgba(244,246,251,.96), rgba(238,242,255,.95));
  border-color:rgba(0,0,0,0.1);
}

[data-theme="light"] .wb-tool { color:var(--text-sec); }

[data-theme="light"] .login-page { background:var(--bg); }


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,.1), transparent 35%),
    radial-gradient(circle at 88% 82%, rgba(244,114,182,.12), transparent 42%),
    linear-gradient(160deg, #07071a 0%, #0b1224 55%, #101025 100%);
  color:var(--text);line-height:1.6;
  height:100vh;overflow:hidden;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-act);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--purple)}
::selection{background:var(--purple-glow);color:var(--text)}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}
h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
h3{font-size:1.14rem;font-weight:600}
h4{font-size:1rem;font-weight:600}

/* ── 4. BOOT LOADER ─────────────────────────────────────────── */
.boot-loader{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.boot-spinner{
  width:36px;height:36px;
  border:3px solid var(--border-md);
  border-top-color:var(--purple);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* ── 5. LAYOUT ───────────────────────────────────────────────── */
#app{height:100vh;display:flex}
.app-layout{display:flex;width:100%;height:100vh;overflow:hidden}
.app-body{
  margin-left:var(--sidebar-w);flex:1;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 38%);
}
.view-container{flex:1;overflow-y:auto;padding:var(--s8)}

/* ── 6. SIDEBAR ──────────────────────────────────────────────── */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg, rgba(18,21,46,.92), rgba(10,12,31,.95));
  backdrop-filter:blur(8px);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  z-index:200;
}
.sidebar-logo{
  padding:var(--s5) var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  border-bottom:1px solid var(--border);
}
.sidebar-logo-icon{
  width:34px;height:34px;flex-shrink:0;
  background:linear-gradient(135deg,var(--purple),var(--blue-lt));
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-p);
}
.sidebar-logo-icon svg{width:18px;height:18px;color:#fff}
.sidebar-logo-name{font-size:1.07rem;font-weight:700;letter-spacing:-.02em}
.sidebar-logo-name span{color:var(--purple-lt)}

.sidebar-nav{
  flex:1;padding:var(--s3) var(--s3);
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;
}
.nav-label{
  font-size:.7rem;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.08em;padding:var(--s3) var(--s3) var(--s2);
}
.nav-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:.5rem var(--s3);border-radius:var(--r-md);
  cursor:pointer;color:var(--text-sec);font-weight:500;
  font-size:.928rem;transition:all var(--tb);
  border:none;background:none;width:100%;text-align:left;
}
.nav-item:hover{background:var(--surface);color:var(--text)}
.nav-item.active{background:var(--purple-glow);color:var(--purple-lt)}
.nav-item svg{width:17px;height:17px;flex-shrink:0}

.sidebar-bottom{
  padding:var(--s3);border-top:1px solid var(--border);
}
.theme-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s2) var(--s3);border-radius:var(--r-md);
  margin-bottom:var(--s2);cursor:pointer;
  color:var(--text-sec);font-size:.857rem;font-weight:500;
  transition:background var(--tb),color var(--tb);
  border:none;background:none;width:100%;
}
.theme-toggle:hover{background:var(--surface);color:var(--text)}
.theme-toggle-icon{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-full);background:var(--surface-act);
  transition:background var(--tb);
}
.theme-toggle-icon svg{width:14px;height:14px}

.user-card{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-lg);
  cursor:pointer;transition:background var(--tb);
}
.user-card:hover{background:var(--surface)}
.user-avatar{
  width:34px;height:34px;flex-shrink:0;
  border-radius:var(--r-full);object-fit:cover;
  border:2px solid var(--border-md);
  background:var(--surface-act);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.857rem;color:var(--purple-lt);
  overflow:hidden;
}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-meta{flex:1;min-width:0}
.user-name{font-weight:600;font-size:.857rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 7. BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);padding:.5rem 1rem;border-radius:var(--r-md);
  font-size:.875rem;font-weight:500;
  transition:all var(--tb);white-space:nowrap;cursor:pointer;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex-shrink:0}

.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--purple-lt);box-shadow:var(--sh-p)}

.btn-outline{
  background:transparent;color:var(--text);
  border:1px solid var(--border-md);
}
.btn-outline:hover{background:var(--surface);border-color:var(--border-strong)}

.btn-secondary{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border-md);
}
.btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}

.btn-ghost{background:transparent;color:var(--text-sec)}
.btn-ghost:hover:not(:disabled){background:var(--surface);color:var(--text)}

.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}

.btn-sm{padding:.3rem .65rem;font-size:.8rem}
.btn-sm svg{width:13px;height:13px}
.btn-lg{padding:.75rem 1.5rem;font-size:1rem}

.btn-icon{
  width:32px;height:32px;padding:0;
  border-radius:var(--r-md);
}

.btn-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:.875rem 1.75rem;background:#fff;color:#1a1a2e;
  border-radius:var(--r-2xl);font-size:1rem;font-weight:600;
  transition:all var(--tb);box-shadow:var(--sh-md);
  text-decoration:none;border:none;cursor:pointer;width:100%;
}
.btn-google:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.btn-google:active{transform:translateY(0)}

/* ── 8. FORMS ────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:var(--s2)}
.form-label{font-size:.857rem;font-weight:500;color:var(--text-sec)}
.form-control{
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--r-md);padding:.625rem .875rem;
  color:var(--text);font-size:.928rem;
  transition:border-color var(--tb),box-shadow var(--tb);width:100%;
}
.form-control:hover{border-color:var(--border-strong)}
.form-control:focus{
  outline:none;border-color:var(--purple);
  box-shadow:0 0 0 3px var(--purple-glow);
}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:80px}
select.form-control{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239898b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* Tag Input */
.tag-input-wrap{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--r-md);padding:6px 10px;
  min-height:42px;cursor:text;
  transition:border-color var(--tb),box-shadow var(--tb);
}
.tag-input-wrap:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-glow)}
.tag-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(139,92,246,.15);color:var(--purple-lt);
  padding:2px 8px;border-radius:var(--r-full);
  font-size:.75rem;font-weight:500;
}
.tag-pill-rm{cursor:pointer;opacity:.6;font-size:.85rem;background:none;border:none;color:inherit;padding:0 1px}
.tag-pill-rm:hover{opacity:1}
.tag-real-input{border:none;background:none;outline:none;font-size:.875rem;color:var(--text);min-width:80px;flex:1}

/* Task images — modal thumbs */
.task-images-wrap{
  display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3);
}
.task-images-wrap:empty{display:none}
.task-img-thumb{
  position:relative;width:96px;height:96px;border-radius:var(--r-md);
  overflow:hidden;background:var(--surface);border:1px solid var(--border-md);
}
.task-img-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.task-img-rm{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--tb);
}
.task-img-thumb:hover .task-img-rm{opacity:1}
.task-images-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.btn-sm{padding:4px 10px;font-size:.78rem}

/* Task images — card thumbnails */
.task-card-images{
  display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;align-items:center;
}
.task-card-img{
  width:44px;height:44px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);border:1px solid var(--border-md);display:block;
}
.task-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.task-card-img-more{
  font-size:.7rem;color:var(--text-muted);padding:0 6px;
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--r-sm);height:44px;display:inline-flex;align-items:center;
}

/* ── 9. BADGES ───────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:.75rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.badge-todo      {color:var(--c-todo);      background:var(--bg-todo)}
.badge-inprogress{color:var(--c-inprogress);background:var(--bg-inprogress)}
.badge-review    {color:var(--c-review);    background:var(--bg-review)}
.badge-done      {color:var(--c-done);      background:var(--bg-done)}
.badge-low       {color:var(--p-low);       background:var(--p-low-bg)}
.badge-medium    {color:var(--p-medium);    background:var(--p-medium-bg)}
.badge-high      {color:var(--p-high);      background:var(--p-high-bg)}

/* ── 10. TASK CARDS ──────────────────────────────────────────── */
.task-card{
  position:relative;
  background:linear-gradient(180deg, rgba(27,27,52,.9), rgba(19,19,38,.88));border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s4) calc(var(--s5) + 6px);
  display:flex;align-items:flex-start;gap:var(--s4);
  transition:all var(--tb);
}
.task-card:hover{
  border-color:rgba(147,197,253,.35);background:linear-gradient(180deg, rgba(31,37,68,.95), rgba(22,24,46,.9));
  box-shadow:var(--sh-sm);
}
.task-card.is-done{opacity:.55}
.task-card.is-done .task-title{text-decoration:line-through;color:var(--text-muted)}

.task-pbar{
  position:absolute;left:0;top:10px;bottom:10px;
  width:3px;border-radius:var(--r-full);
}
.task-pbar.low   {background:var(--p-low)}
.task-pbar.medium{background:var(--p-medium)}
.task-pbar.high  {background:var(--p-high)}

.task-check{
  width:20px;height:20px;flex-shrink:0;margin-top:1px;
  border-radius:6px;border:2px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--tb);background:transparent;
}
.task-check:hover{border-color:var(--c-done);background:var(--bg-done)}
.task-check.checked{background:var(--c-done);border-color:var(--c-done)}
.task-check.checked svg{color:#fff}
.task-check svg{width:12px;height:12px}

.task-content{flex:1;min-width:0}
.task-title{font-weight:500;font-size:.928rem;margin-bottom:3px;line-height:1.4}
.task-desc{
  font-size:.8rem;color:var(--text-sec);margin-bottom:var(--s2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.task-meta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.task-tag{
  font-size:.714rem;padding:2px 8px;border-radius:var(--r-full);
  background:rgba(139,92,246,.12);color:var(--purple-lt);font-weight:500;
}

.task-actions{
  display:flex;align-items:center;gap:4px;
  opacity:0;transition:opacity var(--tb);
}
.task-card:hover .task-actions{opacity:1}

.task-act-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);color:var(--text-sec);cursor:pointer;
  transition:all var(--tb);background:transparent;border:none;
}
.task-act-btn:hover{background:var(--surface-act);color:var(--text)}
.task-act-btn.danger:hover{background:var(--danger-bg);color:var(--danger)}
.task-act-btn svg{width:14px;height:14px}

/* ── 11. LOGIN ───────────────────────────────────────────────── */
.login-page{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
}
.login-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 75%, rgba(124,58,237,.18) 0%,transparent 50%),
    radial-gradient(circle at 80% 25%, rgba(37,99,235,.12) 0%,transparent 50%);
  pointer-events:none;
}
.login-card{
  position:relative;
  background:var(--bg-up);border:1px solid var(--border-md);
  border-radius:var(--r-2xl);padding:2.75rem 2.5rem;
  width:100%;max-width:440px;
  box-shadow:var(--sh-lg);text-align:center;
  animation:slideUp .45s cubic-bezier(.4,0,.2,1);
}
.login-logo{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-bottom:1.75rem;
}
.login-logo-icon{
  width:52px;height:52px;
  background:linear-gradient(135deg,var(--purple),var(--blue-lt));
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 28px rgba(124,58,237,.45);
}
.login-logo-icon svg{width:26px;height:26px;color:#fff}
.login-app-name{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.login-app-name span{color:var(--purple-lt)}
.login-sub{color:var(--text-sec);font-size:.928rem;margin-bottom:2.25rem;line-height:1.5}
.login-features{margin-top:2rem;text-align:left;display:flex;flex-direction:column;gap:8px}
.login-feat{display:flex;align-items:center;gap:10px;font-size:.857rem;color:var(--text-sec)}
.login-feat-icon{
  width:20px;height:20px;background:var(--success-bg);color:var(--success);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.714rem;font-weight:700;flex-shrink:0;
}
.login-error{
  background:var(--danger-bg);color:var(--danger);
  border:1px solid rgba(239,68,68,.2);border-radius:var(--r-md);
  padding:.625rem 1rem;font-size:.857rem;margin-bottom:1rem;
}

/* ── 12. DASHBOARD ───────────────────────────────────────────── */
.dash-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s8);
}
.date-nav{display:flex;align-items:center;gap:var(--s4)}
.date-nav-btn{
  width:34px;height:34px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);cursor:pointer;transition:all var(--tb);
}
.date-nav-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)}
.date-nav-btn svg{width:15px;height:15px}
.date-display{text-align:center}
.date-main{font-size:1.43rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.date-sub{font-size:.786rem;color:var(--text-muted);margin-top:2px}
.btn-today{
  font-size:.75rem;padding:4px 12px;border-radius:var(--r-full);
  background:var(--purple-glow);color:var(--purple-lt);
  border:1px solid rgba(124,58,237,.25);cursor:pointer;
  transition:all var(--tb);font-weight:500;
}
.btn-today:hover{background:var(--purple);color:#fff}

/* Stats summary row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s8)}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);
  display:flex;align-items:center;gap:var(--s4);
  transition:all var(--tb);
  box-shadow:0 10px 25px rgba(4,8,22,.28);
}
.stat-card:hover{border-color:var(--border-md);background:var(--surface-hover)}
.stat-icon{
  width:42px;height:42px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-icon svg{width:20px;height:20px}
.stat-icon.todo      {background:var(--bg-todo);      color:var(--c-todo)}
.stat-icon.inprogress{background:var(--bg-inprogress);color:var(--c-inprogress)}
.stat-icon.review    {background:var(--bg-review);    color:var(--c-review)}
.stat-icon.done      {background:var(--bg-done);      color:var(--c-done)}
.stat-val{font-size:1.65rem;font-weight:800;line-height:1}
.stat-lbl{font-size:.75rem;color:var(--text-muted);margin-top:3px}

/* Task sections */
.section-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s4);margin-top:var(--s8);
}
.section-hd:first-of-type{margin-top:0}
.section-ttl{
  font-size:.857rem;font-weight:600;color:var(--text-sec);
  display:flex;align-items:center;gap:var(--s2);
  text-transform:uppercase;letter-spacing:.06em;
}
.section-count{
  font-size:.75rem;background:var(--surface-act);
  color:var(--text-muted);border-radius:var(--r-full);
  padding:2px 8px;font-weight:500;
}
.task-list{display:flex;flex-direction:column;gap:var(--s3)}
.task-empty{
  text-align:center;padding:var(--s10);
  color:var(--text-muted);font-size:.857rem;
  background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--r-lg);
}
.task-empty svg{width:32px;height:32px;margin:0 auto var(--s3);opacity:.2}

/* ── 13. KANBAN ──────────────────────────────────────────────── */
.kanban-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s6)}
.kanban-board{
  display:flex;gap:var(--s4);overflow-x:auto;
  padding-bottom:var(--s4);
  height:calc(100vh - 176px);
}
.kanban-col{
  flex-shrink:0;width:274px;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
}
.kanban-col-hd{
  padding:var(--s3) var(--s4);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.kanban-col-title{
  display:flex;align-items:center;gap:var(--s2);
  font-weight:600;font-size:.857rem;
}
.kanban-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kanban-count{
  font-size:.714rem;background:var(--surface-act);
  color:var(--text-muted);border-radius:var(--r-full);
  padding:2px 8px;font-weight:500;
}
.kanban-cards{
  flex:1;overflow-y:auto;padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  min-height:80px;
}
.kanban-card{
  background:var(--bg-up);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s3) var(--s4);
  cursor:grab;transition:all var(--tb);
}
.kanban-card:hover{border-color:var(--border-md);box-shadow:var(--sh-sm)}
.kanban-card:active{cursor:grabbing}
.kanban-card.sortable-ghost{opacity:.25}
.kanban-card.sortable-chosen{box-shadow:var(--sh-lg);transform:rotate(1.5deg)}
.kanban-card-ttl{font-weight:500;font-size:.857rem;margin-bottom:4px;line-height:1.4}
.kanban-card-desc{
  font-size:.75rem;color:var(--text-sec);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:var(--s2);
}
.kanban-card-ft{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.kanban-card-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--tb)}
.kanban-card:hover .kanban-card-actions{opacity:1}
.kc-act{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;color:var(--text-sec);cursor:pointer;
  transition:all var(--tb);background:transparent;border:none;
}
.kc-act:hover{background:var(--surface-act);color:var(--text)}
.kc-act.danger:hover{background:var(--danger-bg);color:var(--danger)}
.kc-act svg{width:13px;height:13px}

.kanban-add-card{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);
  color:var(--text-muted);font-size:.857rem;
  cursor:pointer;transition:color var(--tb);
  border-top:1px solid var(--border);background:none;border-left:none;border-right:none;border-bottom:none;
  width:100%;
}
.kanban-add-card:hover{color:var(--text)}
.kanban-add-card svg{width:14px;height:14px}

.kanban-add-col{
  flex-shrink:0;width:220px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  border:2px dashed var(--border-md);border-radius:var(--r-xl);
  color:var(--text-muted);font-size:.857rem;font-weight:500;
  cursor:pointer;transition:all var(--tb);min-height:100px;
  background:transparent;
}
.kanban-add-col:hover{border-color:var(--purple);color:var(--purple-lt);background:var(--purple-glow)}
.kanban-add-col svg{width:20px;height:20px}

/* ── 14. HISTORY ─────────────────────────────────────────────── */
.history-filters{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);
  margin-bottom:var(--s6);display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
}
.history-filters .form-control{max-width:180px}
.history-filters .form-group{min-width:160px}
.history-results-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s4);color:var(--text-sec);font-size:.857rem;
}

/* ── 15. STATISTICS ──────────────────────────────────────────── */
.period-tabs{
  display:flex;gap:3px;background:var(--surface);
  padding:4px;border-radius:var(--r-lg);border:1px solid var(--border);
  width:fit-content;
}
.period-tab{
  padding:6px 16px;border-radius:var(--r-md);font-size:.857rem;
  font-weight:500;cursor:pointer;transition:all var(--tb);
  color:var(--text-muted);background:none;border:none;
}
.period-tab.active{background:var(--purple);color:#fff}
.period-tab:not(.active):hover{background:var(--surface-hover);color:var(--text)}

.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s4);margin-bottom:var(--s6);
}
.metric-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);
}
.metric-lbl{
  font-size:.714rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s2);
}
.metric-val{font-size:2.25rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.metric-val.success{color:var(--success)}
.metric-val.info{color:var(--blue-lt)}
.metric-val.warn{color:var(--warning)}
.metric-val.purple{color:var(--purple-lt)}
.metric-sub{font-size:.7rem;color:var(--text-muted);margin-top:var(--s2);letter-spacing:.02em}

.charts-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--s5);margin-bottom:var(--s5)}
.chart-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s6);
}
.chart-card h3{font-size:1rem;margin-bottom:var(--s5)}
.chart-card canvas{max-height:280px}
.chart-full{grid-column:1/-1}

/* ── 16. SETTINGS ────────────────────────────────────────────── */
.settings-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:var(--s5);overflow:hidden;
}
.settings-sec-hd{
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--border);
}
.settings-sec-hd h3{font-size:1rem;font-weight:600;margin-bottom:3px}
.settings-sec-hd p{font-size:.857rem;color:var(--text-sec)}
.settings-sec-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s6)}

.avatar-row{display:flex;align-items:center;gap:var(--s6)}
.avatar-preview{
  width:76px;height:76px;border-radius:var(--r-full);object-fit:cover;
  border:3px solid var(--border-md);background:var(--surface-act);
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;font-weight:700;color:var(--purple-lt);
  overflow:hidden;flex-shrink:0;
}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-info p{font-size:.857rem;color:var(--text-sec);margin-bottom:var(--s3)}
.avatar-file-input{display:none}
.avatar-upload-lbl{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:.5rem 1rem;border-radius:var(--r-md);
  background:var(--surface-hover);border:1px solid var(--border-md);
  font-size:.857rem;font-weight:500;cursor:pointer;
  transition:all var(--tb);color:var(--text);
}
.avatar-upload-lbl:hover{background:var(--surface-act);border-color:var(--border-strong)}
.avatar-upload-lbl svg{width:15px;height:15px}

.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;border-bottom:1px solid var(--border);
}
.settings-row:last-child{border-bottom:none}
.settings-row-info h4{font-size:.928rem;font-weight:500;margin-bottom:2px}
.settings-row-info p{font-size:.8rem;color:var(--text-sec)}

/* ── 17. MODAL ───────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  backdrop-filter:blur(5px);z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);animation:fadeIn .2s ease;
}
.modal{
  background:var(--bg-up);border:1px solid var(--border-md);
  border-radius:var(--r-xl);width:100%;max-width:540px;
  max-height:90vh;overflow-y:auto;
  animation:slideUp .25s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--sh-lg);
}
.modal-sm{max-width:380px}
.modal-hd{
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{font-size:1.07rem;font-weight:600}
.modal-close{
  width:30px;height:30px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-sec);cursor:pointer;transition:all var(--tb);
  background:transparent;border:none;
}
.modal-close:hover{background:var(--surface-act);color:var(--text)}
.modal-close svg{width:17px;height:17px}
.modal-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.modal-ft{
  padding:var(--s4) var(--s6);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);
}

/* ── 18. NOTIFICATIONS ───────────────────────────────────────── */
.notif-container{
  position:fixed;top:var(--s5);right:var(--s5);
  z-index:9999;display:flex;flex-direction:column;gap:var(--s3);
  pointer-events:none;
}
.notif{
  pointer-events:all;
  background:var(--surface);border:1px solid var(--border-md);
  border-radius:var(--r-lg);padding:var(--s3) var(--s4);
  display:flex;align-items:center;gap:var(--s3);
  min-width:280px;max-width:380px;box-shadow:var(--sh-md);
  transform:translateX(115%);opacity:0;
  transition:transform var(--ts),opacity var(--ts);
}
.notif.show{transform:translateX(0);opacity:1}
.notif-icon{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;
}
.notif.success .notif-icon{background:var(--success-bg);color:var(--success)}
.notif.error   .notif-icon{background:var(--danger-bg);color:var(--danger)}
.notif.warning .notif-icon{background:var(--warning-bg);color:var(--warning)}
.notif.info    .notif-icon{background:var(--info-bg);color:var(--info)}
.notif-msg{flex:1;font-size:.857rem}
.notif-close{color:var(--text-muted);cursor:pointer;background:none;border:none;padding:2px 4px;font-size:1.07rem;transition:color var(--tf)}
.notif-close:hover{color:var(--text)}

/* ── 19. LOADING / EMPTY ────────────────────────────────────── */
.loading-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:var(--s10);color:var(--text-muted);font-size:.857rem;
}
.spinner{
  width:28px;height:28px;border:3px solid var(--border-md);
  border-top-color:var(--purple);border-radius:50%;
  animation:spin .7s linear infinite;
}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-muted)}
.empty-state svg{width:44px;height:44px;margin:0 auto var(--s4);opacity:.2}
.empty-state h3{font-size:1rem;font-weight:600;color:var(--text-sec);margin-bottom:var(--s2)}
.empty-state p{font-size:.857rem}

/* Page headers */
.page-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:var(--s8);
}
.page-hd h1{font-size:1.57rem;font-weight:700;letter-spacing:-.02em}
.page-hd p{font-size:.857rem;color:var(--text-sec);margin-top:4px}

/* ── 20. ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeIn  {from{opacity:0}to{opacity:1}}
@keyframes slideUp {from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes spin    {to{transform:rotate(360deg)}}
@keyframes pulse   {0%,100%{opacity:1}50%{opacity:.45}}

.fade-in {animation:fadeIn .25s ease}
.slide-up{animation:slideUp .3s cubic-bezier(.4,0,.2,1)}

/* ── 21. UTILITIES ───────────────────────────────────────────── */
.hidden{display:none!important}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:var(--s2)} .gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)}
.mb-4{margin-bottom:var(--s4)} .mb-6{margin-bottom:var(--s6)}
.mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)}
.w-full{width:100%}
.text-muted{color:var(--text-sec)}
.font-semibold{font-weight:600}

/* Danger zone */
.danger-zone{border:1px solid rgba(239,68,68,.25);border-radius:var(--r-lg);overflow:hidden}
.danger-zone .settings-sec-hd{border-color:rgba(239,68,68,.2)}
.danger-zone .settings-sec-hd h3{color:var(--danger)}

/* ── 23. DASHBOARD FILTERS ───────────────────────────────────── */
.dash-filters{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  margin-bottom:var(--s6);padding:var(--s4) var(--s5);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.auto-transfer-toggle{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.8rem;color:var(--text-sec);
}
.auto-transfer-toggle input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--purple);cursor:pointer;
}
.auto-transfer-label{user-select:none}

/* ── 24. ADMIN INTERFACE ─────────────────────────────────────── */
.admin-header{
  background:linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(37,99,235,.12) 50%, rgba(244,114,182,.1) 100%);
  border:1px solid rgba(124,58,237,.3);
  border-radius:var(--r-xl);padding:var(--s8) var(--s8);
  margin-bottom:var(--s8);position:relative;overflow:hidden;
}
.admin-header::before{
  content:'';position:absolute;top:-40%;right:-10%;width:240px;height:240px;
  background:radial-gradient(circle, rgba(124,58,237,.2) 0%, transparent 70%);
  border-radius:50%;pointer-events:none;
}
.admin-header-content{position:relative;z-index:1}
.admin-badge{
  display:inline-block;font-size:.65rem;font-weight:800;letter-spacing:.1em;
  padding:3px 10px;border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--purple), var(--blue));
  color:#fff;margin-bottom:var(--s3);text-transform:uppercase;
}
.admin-title{font-size:1.8rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.admin-subtitle{font-size:.9rem;color:var(--text-sec);margin-top:6px}

.admin-tabs{
  display:flex;gap:var(--s2);margin-bottom:var(--s6);
  border-bottom:1px solid var(--border);padding-bottom:var(--s3);
}
.admin-tab{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-md);
  font-size:.857rem;font-weight:500;color:var(--text-sec);
  background:transparent;border:1px solid transparent;
  cursor:pointer;transition:all var(--tb);
}
.admin-tab svg{width:14px;height:14px}
.admin-tab:hover{background:var(--surface);color:var(--text)}
.admin-tab.active{
  background:var(--surface);color:var(--purple-lt);
  border-color:rgba(124,58,237,.3);
  box-shadow:0 2px 8px rgba(124,58,237,.15);
}

.admin-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 12px 40px rgba(4,8,22,.35);
}
.admin-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s5) var(--s6);border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.admin-panel-header h3{
  display:flex;align-items:center;gap:8px;
  font-size:1rem;font-weight:700;
}
.admin-panel-header h3 svg{width:16px;height:16px;color:var(--purple-lt)}
.admin-count{
  font-size:.75rem;color:var(--text-muted);
  background:var(--surface-act);padding:3px 10px;
  border-radius:var(--r-full);font-weight:600;
}

.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.857rem}
.admin-table thead{background:rgba(255,255,255,.02)}
.admin-table th{
  padding:12px 16px;text-align:left;font-weight:600;
  color:var(--text-sec);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:1px solid var(--border);
}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--border)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--surface-hover)}

.admin-user-cell{display:flex;align-items:center;gap:10px}
.admin-user-avatar{
  width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--purple-glow);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
}
.admin-user-avatar img{width:100%;height:100%;object-fit:cover}
.admin-user-avatar span{font-size:.65rem;font-weight:700;color:var(--purple-lt)}
.admin-user-name{font-weight:600}
.admin-email{color:var(--text-sec);font-size:.8rem}
.admin-date{color:var(--text-muted);font-size:.78rem}
.admin-role-select{
  border-radius:var(--r-md)!important;
}

.admin-action-btn{
  width:30px;height:30px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  color:var(--text-sec);cursor:pointer;transition:all var(--tb);
}
.admin-action-btn svg{width:14px;height:14px}
.admin-action-btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.admin-action-btn.danger:hover{background:var(--danger-bg);color:var(--danger);border-color:rgba(239,68,68,.3)}
.admin-action-btn.small{width:24px;height:24px}
.admin-action-btn.small svg{width:12px;height:12px}

.admin-cards-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s4);padding:var(--s5);
}
.admin-card{
  background:var(--bg-up);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  display:flex;flex-direction:column;transition:all var(--tb);
}
.admin-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 8px 24px rgba(4,8,22,.3)}
.admin-card-color{height:4px;width:100%}
.admin-card-body{padding:var(--s4) var(--s5);flex:1}
.admin-card-title{font-weight:700;font-size:.9rem;margin-bottom:4px}
.admin-card-desc{font-size:.78rem;color:var(--text-sec);line-height:1.4}
.admin-card-meta{margin-top:var(--s3);display:flex;align-items:center;gap:var(--s3)}
.admin-card-actions{
  padding:6px var(--s5);border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;
}

.admin-tags-grid{
  display:flex;flex-wrap:wrap;gap:var(--s3);padding:var(--s5);
}
.admin-tag-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-full);
  background:var(--bg-up);border:1px solid var(--border);
  transition:all var(--tb);
}
.admin-tag-item:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.admin-tag-color{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.admin-tag-name{font-size:.82rem;font-weight:600}

.admin-empty{
  grid-column:1 / -1;text-align:center;padding:3rem 2rem;
  color:var(--text-muted);
}
.admin-empty svg{width:36px;height:36px;margin:0 auto var(--s3);opacity:.3}
.admin-empty p{font-size:.857rem}

.admin-error{color:var(--danger);padding:1rem;font-size:.857rem}

.btn-sm{font-size:.78rem;padding:6px 12px}

/* Superuser read-only task cards */
.su-readonly{pointer-events:none;opacity:.85}
.su-readonly .task-actions{display:none}

@media (max-width: 768px){
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
  .admin-cards-grid{grid-template-columns:1fr}
  .admin-table{font-size:.78rem}
  .admin-table th,.admin-table td{padding:8px 10px}
  .dash-filters{flex-direction:column;align-items:flex-start}
}