/* ═══════════════════════════════════════════════════════════════════════════
   Octaplanner — Main Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:        #0f0e17;
  --ink-2:      #2d2b3d;
  --ink-3:      #6b6882;
  --surface:    #faf9f7;
  --surface-2:  #f2f0ec;
  --surface-3:  #e8e4de;
  --white:      #ffffff;
  --border:     rgba(15,14,23,0.10);
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 2px 20px rgba(15,14,23,0.08);
  --shadow-lg:  0 8px 48px rgba(15,14,23,0.14);
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  /* Pillar colors */
  --financial:  #2d6a4f;  --financial-bg: #d8f3dc;
  --mental:     #5e60ce;  --mental-bg:    #e0e1ff;
  --physical:   #e76f51;  --physical-bg:  #fde8e3;
  --nutrition:  #e9c46a;  --nutrition-bg: #fdf5d8;
  --org:        #457b9d;  --org-bg:       #d9eaf5;
  --social:     #e63946;  --social-bg:    #fde8ea;
  --education:  #7b2d8b;  --education-bg: #f3d9f7;
  --spiritual:  #b5838d;  --spiritual-bg: #f9e8eb;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body { font-family:'DM Sans',sans-serif; background:var(--surface); color:var(--ink); line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:3px; }

/* ── App Shell ─────────────────────────────────────────────────────────────── */
.app-shell { display:flex; min-height:100vh; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
  width:240px; min-height:100vh; background:var(--ink);
  display:flex; flex-direction:column; position:sticky; top:0;
  flex-shrink:0; z-index:100;
}
.sidebar-logo { padding:28px 24px 20px; border-bottom:1px solid rgba(255,255,255,0.06); }
.sidebar-logo h1 { font-family:'DM Serif Display',serif; font-size:22px; color:#fff; }
.sidebar-logo h1 span { color:#52b788; }
.sidebar-logo p { font-size:11px; color:rgba(255,255,255,0.4); margin-top:2px; letter-spacing:0.5px; text-transform:uppercase; }
.sidebar-nav { flex:1; padding:16px 12px; overflow-y:auto; }
.nav-section-label { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,0.25); padding:12px 12px 6px; font-weight:600; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); margin-bottom:2px; cursor:pointer;
  transition:all var(--transition); position:relative;
  color:rgba(255,255,255,0.55); font-size:13.5px; font-weight:500; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.85); }
.nav-item.active { background:rgba(255,255,255,0.1); color:#fff; }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:0 2px 2px 0; background:var(--accent-color,#52b788);
}
.nav-item.locked { opacity:.4; cursor:default; }
.nav-item.locked:hover { background:none; }
.nav-icon { font-size:17px; width:22px; text-align:center; flex-shrink:0; }
.lock-badge { margin-left:auto; font-size:10px; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); padding:2px 6px; border-radius:4px; }
.sidebar-footer { padding:16px 12px; border-top:1px solid rgba(255,255,255,0.06); }
.user-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; transition:background var(--transition); }
.user-row:hover { background:rgba(255,255,255,0.06); }
.user-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#52b788,#2d6a4f); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.user-name { font-size:13px; font-weight:600; color:rgba(255,255,255,0.8); }
.user-plan { font-size:11px; color:rgba(255,255,255,0.35); }

/* ── Main content ──────────────────────────────────────────────────────────── */
.main-content { flex:1; overflow-y:auto; min-height:100vh; }

/* ── Page Header ───────────────────────────────────────────────────────────── */
.page-header {
  padding:28px 40px 22px; border-bottom:1px solid var(--border);
  background:var(--white); position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
}
.page-header-left h2 { font-family:'DM Serif Display',serif; font-size:26px; color:var(--ink); }
.page-header-left p { font-size:13px; color:var(--ink-3); margin-top:3px; }
.page-body { padding:36px 40px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); padding:24px; }
.card-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ── Grid ──────────────────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; transition:all var(--transition); cursor:pointer; }
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:var(--ink-2); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-ghost { background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface-3); }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }
.btn-sm { padding:6px 14px; font-size:12.5px; }
.w-full { width:100%; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-field { margin-bottom:16px; }
.form-label { font-size:12px; font-weight:600; color:var(--ink-3); margin-bottom:6px; display:block; text-transform:uppercase; letter-spacing:.5px; }
.form-input { width:100%; padding:10px 14px; border:1.5px solid var(--surface-3); border-radius:var(--radius-sm); font-size:14px; color:var(--ink); background:var(--surface); transition:border-color var(--transition); outline:none; }
.form-input:focus { border-color:var(--ink); background:var(--white); }
textarea.form-input { resize:vertical; min-height:100px; }
select.form-input { cursor:pointer; }

/* ── Progress bar ──────────────────────────────────────────────────────────── */
.progress-bar { height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width .6s cubic-bezier(0.4,0,0.2,1); }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.3px; }

/* ── Stat card ─────────────────────────────────────────────────────────────── */
.stat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; }
.stat-card-label { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.8px; }
.stat-card-value { font-family:'DM Serif Display',serif; font-size:32px; color:var(--ink); line-height:1.1; margin:6px 0 4px; }
.stat-card-sub { font-size:12px; color:var(--ink-3); }

/* ── Dashboard pillar cards ────────────────────────────────────────────────── */
.pillar-summary-card { border:1px solid var(--border); border-radius:var(--radius); padding:20px; cursor:pointer; transition:all var(--transition); background:var(--white); position:relative; overflow:hidden; }
.pillar-summary-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--p-color); }
.pillar-summary-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.pillar-summary-card.locked { opacity:.5; cursor:default; }
.pillar-summary-card.locked:hover { transform:none; box-shadow:none; }
.psc-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.psc-icon { font-size:28px; }
.psc-title { font-size:13px; font-weight:700; color:var(--ink); }
.psc-sub { font-size:11px; color:var(--ink-3); margin-top:2px; }
.psc-metric { font-family:'DM Serif Display',serif; font-size:24px; color:var(--ink); }
.psc-metric-label { font-size:11px; color:var(--ink-3); margin-top:2px; }

/* ── Pillar banner ─────────────────────────────────────────────────────────── */
.pillar-banner { border-radius:var(--radius); padding:28px 32px; margin-bottom:28px; background:linear-gradient(135deg,var(--p-color) 0%,var(--p-dark) 100%); color:#fff; display:flex; align-items:center; gap:20px; }
.pillar-banner-icon { font-size:44px; }
.pillar-banner h2 { font-family:'DM Serif Display',serif; font-size:24px; }
.pillar-banner p { font-size:14px; opacity:.8; margin-top:4px; }

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
.tab-bar { display:flex; gap:4px; margin-bottom:28px; background:var(--surface-2); padding:4px; border-radius:var(--radius-sm); width:fit-content; }
.tab-btn { padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer; transition:all var(--transition); }
.tab-btn.active { background:var(--white); color:var(--ink); box-shadow:var(--shadow); }
.tab-btn:hover:not(.active) { color:var(--ink-2); }

/* ── Checklist ─────────────────────────────────────────────────────────────── */
.check-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.check-item:last-child { border-bottom:none; }
.check-box { width:20px; height:20px; border-radius:6px; border:2px solid var(--border); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); font-size:11px; }
.check-box.done { background:var(--ink); border-color:var(--ink); color:#fff; }
.check-label { font-size:13.5px; color:var(--ink); flex:1; }
.check-label.done { text-decoration:line-through; color:var(--ink-3); }

/* ── Streak badge ──────────────────────────────────────────────────────────── */
.streak-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#ff6b35,#f7c59f); color:#fff; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; }

/* ── Mood dots ─────────────────────────────────────────────────────────────── */
.mood-bar { display:flex; gap:6px; }
.mood-dot { width:36px; height:36px; border-radius:50%; border:2px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:17px; transition:all var(--transition); flex-shrink:0; }
.mood-dot.selected { border-color:var(--ink); transform:scale(1.18); box-shadow:0 2px 12px rgba(0,0,0,.15); }

/* ── Macro strip ───────────────────────────────────────────────────────────── */
.macro-strip { height:12px; border-radius:6px; overflow:hidden; display:flex; width:100%; }
.macro-segment { height:100%; transition:width .5s ease; }

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash { padding:14px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; margin-bottom:16px; transition:opacity .4s ease; }
.flash-success { background:#d8f3dc; color:#1b4332; border-left:4px solid #2d6a4f; }
.flash-error   { background:#fee2e2; color:#b91c1c; border-left:4px solid #e63946; }

/* ── Divider ───────────────────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:20px 0; }

/* ── Utility classes ───────────────────────────────────────────────────────── */
.text-muted   { color:var(--ink-3); font-size:13px; }
.section-title { font-family:'DM Serif Display',serif; font-size:20px; color:var(--ink); margin-bottom:16px; }
.flex         { display:flex; }
.flex-col     { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap    { flex-wrap:wrap; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;}
.mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;}
.text-center  { text-align:center; }
.font-bold    { font-weight:700; }

/* ── Upgrade modal ─────────────────────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,14,23,.5); display:flex; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(4px); animation:fadeIn .18s ease; }
.modal { background:var(--white); border-radius:20px; padding:40px; max-width:520px; width:90%; box-shadow:var(--shadow-lg); animation:slideUp .22s cubic-bezier(0.4,0,0.2,1); }
@keyframes fadeIn { from{opacity:0}  to{opacity:1} }
@keyframes slideUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.plan-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.plan-card { border:2px solid var(--border); border-radius:var(--radius); padding:20px 16px; cursor:pointer; transition:all var(--transition); text-align:center; }
.plan-card.selected { border-color:var(--ink); background:var(--ink); color:#fff; }
.plan-card:hover:not(.selected) { border-color:var(--ink-2); }
.plan-price { font-family:'DM Serif Display',serif; font-size:28px; margin:8px 0 4px; }
.plan-name  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.plan-period{ font-size:11px; opacity:.6; }

/* ── Animate pulse ─────────────────────────────────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse { animation:pulse 2s infinite; }

/* ── Password toggle ───────────────────────────────────────────────────────── */
.input-password-wrap { position:relative; }
.input-password-wrap .form-input { padding-right:44px; }
.password-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:16px; color:var(--ink-3); padding:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Auth Pages
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-body { background:var(--ink); }
.auth-shell { display:flex; min-height:100vh; }
.auth-brand { width:480px; flex-shrink:0; background:linear-gradient(145deg,#0f0e17 0%,#1a1829 50%,#2d2b3d 100%); display:flex; align-items:center; justify-content:center; padding:60px 48px; }
.auth-brand-inner { max-width:340px; }
.auth-logo { font-family:'DM Serif Display',serif; font-size:36px; color:#fff; }
.auth-logo span { color:#52b788; }
.auth-tagline { font-size:14px; color:rgba(255,255,255,.45); margin-top:6px; letter-spacing:.5px; }
.auth-pillars { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:32px 0; }
.auth-pillar-chip { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:12px; font-weight:600; color:rgba(255,255,255,.65); }
.auth-quote { border-left:3px solid #52b788; padding-left:20px; margin-top:32px; font-style:italic; font-size:14px; color:rgba(255,255,255,.55); line-height:1.6; }
.auth-quote cite { display:block; margin-top:8px; font-style:normal; font-size:12px; color:rgba(255,255,255,.3); }
.auth-form-panel { flex:1; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:60px 40px; }
.auth-form-wrap { width:100%; max-width:440px; }
.auth-form-title { font-family:'DM Serif Display',serif; font-size:32px; color:var(--ink); margin-bottom:6px; }
.auth-form-sub { font-size:14px; color:var(--ink-3); margin-bottom:32px; }
.auth-form { margin-top:24px; }

/* ── Locked pillar ─────────────────────────────────────────────────────────── */
.locked-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:60vh; text-align:center; padding:60px 40px; }
.locked-icon { font-size:64px; margin-bottom:24px; opacity:.3; }
.locked-screen h2 { font-family:'DM Serif Display',serif; font-size:28px; color:var(--ink-2); margin-bottom:12px; }
.locked-screen p { font-size:15px; color:var(--ink-3); max-width:440px; margin-bottom:32px; line-height:1.7; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .sidebar { width:200px; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .app-shell { flex-direction:column; }
  .sidebar { width:100%; min-height:auto; position:relative; }
  .sidebar-nav { display:flex; padding:8px; overflow-x:auto; }
  .nav-section-label { display:none; }
  .main-content { min-height:auto; }
  .page-body { padding:20px; }
  .page-header { padding:16px 20px; }
  .grid-2,.grid-3,.grid-4,.dashboard-grid { grid-template-columns:1fr; }
  .auth-shell { flex-direction:column; }
  .auth-brand { width:100%; padding:40px 24px; }
}