/* assets/css/theme.css */
:root{
  /* ✅ CHANGE BACKGROUND HERE */
  /* If you want it back to pure white: set --page-bg: #ffffff; */
  --page-bg: #d2d6dc;         /* <=== you asked for this */
  --panel-bg: #f3f4f6;        /* light panel behind cards */

  --card:#ffffff;
  --text:#0b1220;
  --muted:#5b6b83;

  /* Brand */
  --brand:#16a34a;
  --brand2:#22c55e;

  /* Status colors (your requested) */
  --status-completed:#16a34a;
  --status-progress:#e3a008;
  --status-locked:#9fa6b2;

  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.08);

  --shadow: 0 20px 55px rgba(15,23,42,.12);
  --shadow-sm: 0 10px 26px rgba(15,23,42,.10);

  --ring: rgba(34,197,94,.22);
}

html, body{ height:100%; }

body{
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  letter-spacing: .12px;

  /* Premium background (not plain white) test */
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(227,160,8,.10), transparent 55%),
    linear-gradient(180deg, var(--page-bg), var(--panel-bg));
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.page-wrap{
  flex: 1 0 auto;          /* grow: yes, shrink: no */
  width: 100%;
}
main.page-wrap{
  display: block;          /* ensure it’s not flex */
  align-items: initial;
  justify-content: initial;
}
/* page container */
.page-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 12px 44px;
}

@media (min-width: 992px){
  .page-wrap{ padding: 26px 16px 52px; }
}

/* -------- Topbar / Navbar -------- */
.topbar{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: var(--shadow-sm);
}

.navbar .nav-link{
  color: rgba(15,23,42,.74) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 10px !important;
}

.navbar .nav-link:hover{ background: rgba(15,23,42,.05); }

.navbar .nav-link.active{
  color: var(--text) !important;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.22);
}

.brand-pill{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(22,163,74,.08));
  border: 1px solid rgba(34,197,94,.22);
  color: var(--text) !important;
  font-weight: 950;
}

.brand-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(34,197,94,.12);
}

/* -------- Cards -------- */
.card-soft{
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.card-soft:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.70), transparent 35%);
  opacity:.65;
}

.card-soft:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  transition: .18s ease;
}

/* Add a subtle accent strip for a premium feel */
.card-accent{
  border-left: 6px solid rgba(34,197,94,.25);
}

/* -------- Buttons -------- */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-weight: 950;
  padding: 11px 14px;
  box-shadow: 0 14px 28px rgba(34,197,94,.18);
}

.btn-brand:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
  transition: .16s ease;
}

.btn-outline-secondary{
  border-radius: 14px !important;
  border-color: var(--border) !important;
  color: rgba(15,23,42,.78) !important;
  background: rgba(255,255,255,.78) !important;
}

.btn-outline-secondary:hover{
  background: rgba(15,23,42,.04) !important;
}

.nav-pill{ border-radius: 999px !important; }

/* -------- Typography -------- */
.text-secondary{ color: var(--muted) !important; }

/* -------- Inputs -------- */
.form-control, .form-select{
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  padding: 11px 12px;
  background: rgba(255,255,255,.92);
}

.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 6px var(--ring) !important;
  border-color: rgba(34,197,94,.42) !important;
}

/* -------- Badges (status) -------- */
.badge{
  border-radius: 999px !important;
  padding: 8px 10px !important;
  font-weight: 950 !important;
}

/* Our custom status badge colors */
.badge-completed{ background: var(--status-completed) !important; color:#fff !important; }
.badge-progress{ background: var(--status-progress) !important; color:#111827 !important; }
.badge-locked{ background: var(--status-locked) !important; color:#111827 !important; }

/* -------- Progress -------- */
.progress{
  height: 10px !important;
  background: rgba(15,23,42,.07) !important;
  border-radius: 999px !important;
}
.progress-bar{ border-radius: 999px !important; }

/* -------- Footer -------- */
.site-footer{
  margin-top: 26px;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
}

.site-footer a{
  color: rgba(15,23,42,.78);
  text-decoration: none;
  font-weight: 800;
}
.site-footer a:hover{ text-decoration: underline; }

/* -------- Mobile polish -------- */
@media (max-width: 576px){
  .page-wrap{ padding: 14px 10px 40px; }
  .topbar{ border-radius: 16px; }

  .btn, .btn-brand{
    padding: 12px 14px !important;
    font-size: 16px;
  }

  .form-check-input{ transform: scale(1.15); }
  .form-check-label{ font-size: 16px; }

  .card-soft{ border-radius: 16px !important; }
}

/* Sticky action bar utility */
.sticky-actions{
  position: sticky;
  bottom: 12px;
  z-index: 40;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
}