/* theme/chorebee.css */
/* Brand font */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;800&display=swap');

/* ------------------ */
/* Design tokens      */
/* ------------------ */
:root{
  --bg:#fff8e1;
  --card:#ffffff;
  --text:#212121;
  --muted:#666b73;
  --line:#eee4ba;

  --accent:#ffd740;
  --accent2:#ffab00;

  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
  --neutral:#64748b;

  --radius:20px;
  --shadow:0 4px 12px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Full-width support */
.container-wide{max-width:none;width:100%;padding-left:20px;padding-right:20px}

/* Dashboard layout */
.dash-grid{display:grid;grid-template-columns:2fr 3fr;gap:16px;align-items:start}
.dash-left > .card,.dash-right > .card,.dash-left > .ai-card{margin-bottom:16px}

/* Stats under Brain */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1100px){ .dash-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .stats-grid{grid-template-columns:1fr} }
/* ------------------ */
/* Layout helpers     */
/* ------------------ */
.container{max-width:1200px;margin:28px auto;padding:0 20px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.grid.stats{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .grid.stats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .grid.stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid.stats{grid-template-columns:1fr} }

/* ------------------ */
/* Top navigation     */
/* ------------------ */
.topnav{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:var(--accent);
  position:sticky;top:0;z-index:10;
}
.pill{
  background:#fff3b0;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:.6rem 1rem;
  font-size:13px;
  color:#000;
  text-decoration:none;
  margin-right:8px;
  font-weight:800;
}
.pill:hover{filter:brightness(1.03)}
.pill.active{outline:2px solid rgba(0,0,0,.14)}
.pill.logout{background:#FF5252;color:#fff;border-color:transparent}

/* ------------------ */
/* Cards & headings   */
/* ------------------ */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:20px;
  overflow:hidden;
}
.card .head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
h1,h2{margin:0;font-weight:800}
h1{font-size:26px}
h2{font-size:18px}

/* Optional inner body spacer for cards */
.body{padding:16px 18px}

/* ------------------ */
/* Buttons            */
/* ------------------ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:12px;padding:.8rem 1rem;
  font-weight:800;cursor:pointer;
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#111;
  box-shadow:0 6px 16px rgba(255,171,0,.25);
}
.btn-ghost{
  background:#fff3b0;color:#111;border:1px solid #eadf9e;
}

/* ------------------ */
/* Stats & labels     */
/* ------------------ */
.number{font-size:28px;font-weight:800;color:#000}
.chip{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:800;color:#fff
}
.ok{background:var(--ok)}
.warn{background:var(--warn)}
.bad{background:var(--bad)}
.neutral{background:var(--neutral)}
.muted{color:var(--muted);font-size:13px}

/* ------------------ */
/* Forms              */
/* ------------------ */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){ .row{grid-template-columns:1fr} }

label{display:block;margin:.45rem 0 .25rem;color:var(--muted);font-size:14px;font-weight:800}
input,textarea,select{
  width:100%;padding:.8rem;border-radius:12px;
  border:1px solid #eadf9e;background:#fff;color:#212121;font:inherit
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:#f6ca3a;box-shadow:0 0 0 3px rgba(255,215,64,.35)
}

/* ------------------ */
/* Priority dots      */
/* ------------------ */
.prio{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.p0{background:#9e9e9e}
.p1{background:#4caf50}
.p2{background:#ff9800}
.p3{background:#ef4444}

/* ------------------ */
/* Tables             */
/* ------------------ */
.table-wrap{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  overflow:auto;            /* enable sticky header */
  margin-top:18px;
}

table{width:100%;border-collapse:separate;border-spacing:0}
thead{position:relative;z-index:2}
thead th{
  position:sticky; top:0;
  background:#ffec99;
  text-align:left;
  font-weight:800; font-size:13px; color:#000;
  letter-spacing:.3px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.04); /* subtle bottom line for Safari */
}
thead th:first-child{border-top-left-radius:14px}
thead th:last-child{border-top-right-radius:14px}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  font-size:14px;
  vertical-align:top;
}
tbody tr:nth-child(odd){background:#fffdf2}
.empty{padding:12px 14px;color:var(--muted)}

/* Status pills for task lists */
.status-open{
  color:#111;background:#e3f2fd;border-radius:999px;
  padding:3px 8px;font-size:12px;font-weight:800;display:inline-block
}
.status-done{
  color:#065f46;background:#d1fae5;border-radius:999px;
  padding:3px 8px;font-size:12px;font-weight:800;display:inline-block
}

/* ------------------ */
/* Footer             */
/* ------------------ */
footer{ text-align:center;color:var(--muted);font-size:13px;padding:20px 0;margin-top:40px }

/* ------------------ */
/* Motion preferences */
/* ------------------ */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}