/* === Reset & Base === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;color:#1e293b;background:#f0f2f5;min-height:100vh;overflow-x:hidden}

/* === Login Page === */
.login-page{background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-container{width:100%;max-width:420px;padding:1.5rem}
.login-card{background:#fff;border-radius:16px;padding:2.5rem 2rem;box-shadow:0 25px 50px rgba(0,0,0,0.25)}
.login-header{text-align:center;margin-bottom:2rem}
.login-icon{margin-bottom:1rem}
.login-header h1{font-size:1.5rem;font-weight:700;color:#1e293b}
.login-header p{color:#64748b;font-size:0.9rem;margin-top:0.5rem}
.login-tabs{display:flex;gap:0;background:#f1f5f9;border-radius:10px;padding:4px;margin-bottom:1.5rem}
.login-tabs .tab{flex:1;padding:0.6rem;border:none;background:transparent;font-family:inherit;font-size:0.9rem;font-weight:500;color:#64748b;cursor:pointer;border-radius:8px;transition:all .2s}
.login-tabs .tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.tab-content{display:none}
.tab-content.active{display:block}
#login-form input{width:100%;padding:0.85rem 1rem;border:2px solid #e2e8f0;border-radius:10px;font-family:inherit;font-size:0.95rem;outline:none;transition:border-color .2s}
#login-form input:focus{border-color:#6366f1}
.error-msg{color:#ef4444;font-size:0.85rem;min-height:1.5rem;margin:0.75rem 0;text-align:center}
.btn-login{width:100%;padding:0.85rem;background:#6366f1;color:#fff;border:none;border-radius:10px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}
.btn-login:hover{background:#4f46e5}

/* === App Layout === */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:#1a1a2e;color:#fff;display:flex;flex-direction:column;z-index:100;transition:transform .3s ease}
.sidebar-header{display:flex;align-items:center;gap:0.75rem;padding:1.5rem 1.25rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.sidebar-header h2{font-size:1.15rem;font-weight:700}
.sidebar-nav{flex:1;padding:1rem 0.75rem;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1rem;border-radius:10px;color:rgba(255,255,255,0.6);text-decoration:none;font-size:0.9rem;font-weight:500;transition:all .2s;margin-bottom:2px}
.nav-item:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-item.active{color:#fff;background:#6366f1}
.sidebar-footer{padding:0.75rem;border-top:1px solid rgba(255,255,255,0.08)}
.sidebar-btn{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.6rem 0.85rem;border:none;background:transparent;color:rgba(255,255,255,0.5);font-family:inherit;font-size:0.82rem;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s}
.sidebar-btn:hover{color:#fff;background:rgba(255,255,255,0.06)}

/* === Mobile Header === */
.mobile-header{display:none;position:sticky;top:0;z-index:90;background:#1a1a2e;color:#fff;padding:0.75rem 1rem;align-items:center;gap:0.75rem}
.mobile-header h2{font-size:1.05rem;font-weight:600}
.hamburger{background:none;border:none;color:#fff;cursor:pointer;padding:4px}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99}
.overlay.active{display:block}

/* === Main Content === */
.content{margin-left:240px;flex:1;padding:2rem;min-height:100vh;width:calc(100% - 240px)}
.page-loading{display:flex;align-items:center;justify-content:center;min-height:60vh}
.spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Page Header === */
.page-header{margin-bottom:1.75rem}
.page-header h1{font-size:1.6rem;font-weight:700;color:#1e293b}
.page-header p{color:#64748b;font-size:0.9rem;margin-top:0.25rem}

/* === Stats Grid === */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:box-shadow .2s}
.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.stat-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:0.75rem}
.stat-icon.kcal{background:#fef3c7;color:#f59e0b}
.stat-icon.protein{background:#dbeafe;color:#3b82f6}
.stat-icon.weight{background:#ede9fe;color:#6366f1}
.stat-icon.steps{background:#dcfce7;color:#22c55e}
.stat-value{font-size:1.6rem;font-weight:700;line-height:1.2}
.stat-label{color:#64748b;font-size:0.82rem;font-weight:500;margin-top:0.2rem}
.stat-sub{font-size:0.78rem;margin-top:0.4rem;font-weight:500}
.stat-sub.up{color:#22c55e}
.stat-sub.down{color:#ef4444}
.stat-sub.neutral{color:#64748b}

/* === Progress Ring === */
.progress-ring{position:relative;width:50px;height:50px;float:right;margin-top:-3.5rem}
.progress-ring svg{transform:rotate(-90deg)}
.progress-ring circle{fill:none;stroke-width:4}
.progress-ring .bg{stroke:#e2e8f0}
.progress-ring .fg{stroke:#6366f1;stroke-linecap:round;transition:stroke-dashoffset .6s ease}

/* === Charts === */
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}
.chart-card{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.chart-card h3{font-size:0.95rem;font-weight:600;margin-bottom:1rem;color:#1e293b}
.chart-card.full{grid-column:1/-1}

/* === Date Range === */
.date-range{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.date-btn{padding:0.45rem 1rem;border:1px solid #e2e8f0;background:#fff;border-radius:8px;font-family:inherit;font-size:0.82rem;font-weight:500;cursor:pointer;transition:all .2s;color:#64748b}
.date-btn:hover,.date-btn.active{background:#6366f1;color:#fff;border-color:#6366f1}
.date-input{padding:0.4rem 0.65rem;border:1px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:0.82rem;color:#1e293b}

/* === Data Table === */
.data-table-wrap{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;margin-bottom:1.5rem}
.data-table-wrap h3{font-size:0.95rem;font-weight:600;padding:1rem 1.25rem 0.75rem;color:#1e293b}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:0.65rem 1rem;font-size:0.78rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;border-bottom:1px solid #f1f5f9;background:#f8fafc}
.data-table td{padding:0.7rem 1rem;font-size:0.88rem;border-bottom:1px solid #f1f5f9}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:#f8fafc}
.data-table tr.expandable{cursor:pointer}
.data-table tr.expandable:hover td{background:#f0f4ff}
.meal-detail{background:#f8fafc}
.meal-detail td{padding:0.5rem 1rem 0.5rem 2.5rem;font-size:0.82rem;color:#64748b}
.meal-category-badge{display:inline-block;padding:0.15rem 0.5rem;border-radius:5px;font-size:0.72rem;font-weight:600;text-transform:uppercase}
.meal-cat-snidane{background:#fef3c7;color:#b45309}
.meal-cat-obed{background:#dbeafe;color:#1d4ed8}
.meal-cat-vecere{background:#ede9fe;color:#6d28d9}
.meal-cat-svacina{background:#dcfce7;color:#15803d}
.meal-cat-other{background:#f1f5f9;color:#64748b}

/* === Day List (Log) === */
.day-list{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.5rem}
.day-card{background:#fff;border-radius:12px;padding:1rem 1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.08);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}
.day-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.day-card.active{border-left:4px solid #6366f1}
.day-card .day-date{font-weight:600;font-size:0.95rem}
.day-card .day-kcal{font-size:0.88rem;font-weight:600}
.day-card .day-kcal.under{color:#22c55e}
.day-card .day-kcal.over{color:#f59e0b}
.day-card .day-kcal.way-over{color:#ef4444}
.day-card .day-macros{font-size:0.78rem;color:#64748b}
.kcal-bar{height:4px;border-radius:2px;background:#e2e8f0;margin-top:0.5rem;overflow:hidden}
.kcal-bar-fill{height:100%;border-radius:2px;transition:width .3s}
.kcal-bar-fill.under{background:#22c55e}
.kcal-bar-fill.over{background:#f59e0b}
.kcal-bar-fill.way-over{background:#ef4444}

/* === Meal Detail Panel === */
.meal-panel{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden}
.meal-panel h3{font-size:0.95rem;font-weight:600;padding:1rem 1.25rem 0.5rem}
.meal-group{margin-bottom:0.5rem}
.meal-group-header{padding:0.5rem 1.25rem;font-size:0.78rem;font-weight:600;text-transform:uppercase;color:#64748b;background:#f8fafc;letter-spacing:0.03em}
.meal-item{display:flex;justify-content:space-between;align-items:center;padding:0.6rem 1.25rem;border-bottom:1px solid #f1f5f9;font-size:0.88rem}
.meal-item:last-child{border-bottom:none}
.meal-item-name{flex:1}
.meal-item-qty{color:#64748b;font-size:0.82rem;margin-right:1rem;min-width:80px}
.meal-item-macros{display:flex;gap:0.75rem;font-size:0.82rem;color:#64748b;min-width:200px;justify-content:flex-end}
.meal-total{display:flex;justify-content:space-between;padding:0.75rem 1.25rem;background:#f8fafc;font-weight:600;font-size:0.88rem;border-top:2px solid #e2e8f0}

/* === Empty State === */
.empty-state{text-align:center;padding:4rem 2rem;color:#64748b}
.empty-state svg{margin-bottom:1rem;opacity:0.4}
.empty-state h3{color:#1e293b;font-size:1.1rem;margin-bottom:0.5rem}

/* === Health Metric Cards === */
.health-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}

/* === Responsive === */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .health-grid{grid-template-columns:1fr}
  .content{padding:1.5rem}
}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .mobile-header{display:flex}
  .content{margin-left:0;width:100%;padding:1rem;padding-top:0.75rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .stat-card{padding:1rem}
  .stat-value{font-size:1.3rem}
  .page-header h1{font-size:1.3rem}
  .date-range{gap:0.35rem}
  .date-btn{padding:0.4rem 0.75rem;font-size:0.78rem}
  .meal-item-macros{min-width:auto;gap:0.5rem;font-size:0.75rem}
  .data-table{font-size:0.8rem}
  .data-table th,.data-table td{padding:0.5rem 0.6rem}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .login-card{padding:2rem 1.5rem}
  .charts-grid{gap:0.75rem}
}