/* ===== Tema globală ===== */
:root{
  --bg:#0d0e12;
  --panel:#16181f;
  --panel-2:#1d2028;
  --muted:#a0a8b6;
  --text:#f0f2f6;
  --accent:#ffd457;
  --accent-2:#ffb800;
  --success:#3ddc97;
  --danger:#ef476f;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ===== Reset + bază ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:linear-gradient(180deg,#0b0c10,#0d0e12);
  font-family:'Inter',system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  line-height:1.45;
  display:flex; flex-direction:column;
}
.container{max-width:1180px;margin:90px auto 80px;padding:0 22px;flex:1}

/* ===== Header modern (acceptă .topbar sau .topbar.modern) ===== */
.topbar,.topbar.modern{
  position:sticky; top:0; z-index:1000;
  width:100%;
  background:#0f1116;
  border-bottom:1px solid #1b1e27;
  backdrop-filter:blur(10px) saturate(130%);
}
.topbar .container,.topbar.modern{display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:.2px;cursor:pointer}
.brand .dot{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(255,212,87,.6)}
.brand span{color:var(--accent)}
.nav ul{display:flex;align-items:center;gap:8px;list-style:none}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:999px;
  color:#c4c7ce;text-decoration:none;font-weight:500;
  background:linear-gradient(180deg,#1b1e26,#15181f);
  border:1px solid transparent; transition:.18s;
}
.nav-link:hover{border-color:#2a3140; transform:translateY(-1px); color:#fff}
.nav-link.active{color:#0e1015;background:linear-gradient(180deg,var(--accent),var(--accent-2));font-weight:700;box-shadow:0 6px 16px rgba(255,184,0,.3)}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid #2a2f3b;background:#151821;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{width:22px;height:2px;background:#e9edf5;border-radius:2px}
@media(max-width:980px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:68px 12px auto 12px;background:#0f1218;border:1px solid #232837;border-radius:16px;padding:10px;box-shadow:var(--shadow);display:none}
  body.nav-open .nav{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:8px}
  .nav-link{justify-content:center;padding:12px 18px;font-size:16px}
}

/* ===== Titluri / text ===== */
h1,h2,h3{font-weight:700;margin-bottom:10px}
.section-title span{color:var(--accent);font-weight:800;font-size:28px}
.subtitle{color:var(--muted);margin:6px 0 22px;font-size:15px}

/* ===== Carduri / secțiuni ===== */
.section{background:var(--panel);border:1px solid #252a36;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-top:18px}
.card{background:var(--panel-2);border:1px solid #2a2f3b;border-radius:var(--radius-sm);padding:20px;transition:.2s}
.card:hover{border-color:#3b4352;background:#191c23;transform:translateY(-1px)}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ===== Inputs & butoane ===== */
.input, select, textarea{
  width:100%; padding:14px 16px; background:#151820; color:var(--text);
  border:1px solid #2a2f3b; border-radius:14px; outline:none;
}
.input::placeholder,textarea::placeholder{color:#626876}
.btn{
  padding:14px 18px;border-radius:14px;border:0;font-weight:700;cursor:pointer;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#111214;
  transition:.15s transform ease,.15s filter;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{background:#202430;color:var(--text);border:1px solid #2a2f3b}
.btn.success{background:linear-gradient(180deg,#3ddc97,#2b674e);color:#061a11}
.btn.danger{background:linear-gradient(180deg,#ef476f,#c03b58);color:#fff}

/* ===== Dashboard (Acasă) ===== */
.grid-main{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.left-panel,.right-panel{background:var(--panel);border:1px solid #252a36;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.module-card{display:block;padding:18px;border-radius:var(--radius-sm);background:var(--panel-2);text-decoration:none;color:var(--text);border:1px solid #2a2f3b;transition:.2s}
.module-card:hover{background:linear-gradient(180deg,#1c2028,#181b21);border-color:#393f4d;transform:translateY(-2px)}
.module-card h3{color:var(--accent);margin:0 0 8px;font-size:17px;font-weight:700}
.module-card p{margin:0;color:#a2aab8;font-size:14px;line-height:1.4}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{position:relative;padding-left:22px;margin-bottom:10px;color:#cfd3db;font-size:15px}
.info-list li::before{content:"•";position:absolute;left:0;color:var(--accent);font-size:22px;line-height:0;top:8px}
@media(max-width:980px){.grid-main{grid-template-columns:1fr;gap:16px}.left-panel,.right-panel{padding:22px}}
@media(max-width:600px){.modules-grid{grid-template-columns:1fr 1fr}.container{padding:0 14px}}

/* ===== Habit / To-Do mici (nu calendar) ===== */
.habit{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-radius:var(--radius-sm);background:#151821;border:1px solid #242938}
.habit .title{font-size:18px;font-weight:600}
.habit .meta{color:var(--muted);font-size:14px}
.days{display:flex;gap:8px;margin-top:8px}
.day{ /* folosit DOAR în Obiceiuri */
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  background:#12151b;border:1px solid #2a2f3b;color:#8f97a6;font-weight:600;
}
.day.done{background:linear-gradient(180deg,#2b674e,#3ddc97);color:#081611;border-color:#2b674e}
.day.today{outline:2px solid var(--accent)}

/* ===== Calendar (selectori specifici, ca să nu afecteze .day din Obiceiuri) ===== */
.calendar-controls{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 18px;flex-wrap:wrap;gap:10px;
}
.month-label{font-size:22px;font-weight:800;color:var(--accent);text-transform:capitalize}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(140px, 1fr)); /* MAI LATE pe desktop */
  gap:10px;
}

/* head */
.calendar-grid .day-name{
  background:#14161c;border:1px solid #232634;border-radius:14px;
  padding:16px 10px;text-align:center;color:#b6bac2;font-weight:700;
}
/* celule */
.calendar-grid .day{
  background:var(--panel-2);border:1px solid #262b36;border-radius:20px;
  padding:12px; position:relative; transition:.15s;
  display:flex; flex-direction:column; justify-content:space-between;
  aspect-ratio:1/1;            /* aproape pătrate și MAI LATE */
}
.calendar-grid .day:hover{border-color:#3b4352;transform:translateY(-1px)}
.calendar-grid .day.empty{background:#111319}
.calendar-grid .day.today{outline:2px solid var(--accent)}
.calendar-grid .day-header{display:flex;align-items:center;justify-content:space-between}
.calendar-grid .day-num{font-weight:800;font-size:18px;opacity:.95}
.calendar-grid .badge-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#0e1015;font-weight:800;font-size:13px;
  box-shadow:0 8px 16px rgba(255,184,0,.25);
}
/* Detalii jos */
.event-details ul{list-style:none;padding:0;margin-top:10px}
.event-row{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid #2a2f3b;gap:12px}
.event-row:last-child{border-bottom:0}
.er-main{flex:1}
.er-details{color:#aeb5c2;font-size:13px;margin-top:4px}
.er-actions{display:flex;gap:8px}
/* Formular add */
.stack-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.stack-form .col-span-2{grid-column:span 2}

/* Responsive calendar */
@media(max-width:980px){
  .calendar-grid{grid-template-columns:repeat(7, minmax(110px, 1fr))}
  .calendar-grid .day{padding:10px}
  .calendar-grid .day-num{font-size:16px}
  .calendar-grid .badge-count{min-width:28px;height:28px;font-size:12px}
  .stack-form{grid-template-columns:1fr}
  .stack-form .col-span-2{grid-column:span 1}
}
@media(max-width:600px){
  /* pe mobil arătăm 3 coloane ca să fie lizibil */
  .calendar-grid{grid-template-columns:repeat(3, 1fr); gap:8px}
  .calendar-grid .day{aspect-ratio:1/1}
  .month-label{font-size:18px}
}

/* ===== Footer ===== */
.footer{
  padding:26px 22px;border-top:1px solid #232630;color:#9aa3b2;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;
}
.footer a{color:var(--accent);text-decoration:none;font-weight:600}
.footer a:hover{text-decoration:underline}
/* === Calendar: celule pătrate și mai late === */
.calendar-grid {
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.calendar-grid .day {
  width: 100%;
  height: 120px;              /* înălțime fixă, pătrate mai mari */
  border-radius: 12px;        /* colțuri mai drepte, nu rotunde */
  background: var(--panel-2);
  border: 1px solid #262b36;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  transition: .15s;
}

.calendar-grid .day:hover {
  border-color: #3b4352;
  transform: translateY(-2px);
}

.calendar-grid .day-name {
  border-radius: 8px;
}

/* pe ecrane mari, pătratele mai late */
@media (min-width: 1200px) {
  .calendar-grid .day {
    height: 140px;
  }
}

/* pe mobile, 3 coloane */
@media (max-width: 600px) {
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .calendar-grid .day {
    height: 100px;
  }
}