*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#F7F7F3;color:#111}
.app-container{display:flex;min-height:100vh}
h1,h2,h3,.logo{color:#5C7057}

.sidebar{
    width:240px;height:100vh;position:fixed;inset:0 auto 0 0;
    background:#fff;padding:35px 22px;display:flex;flex-direction:column;
    border-right:1px solid #EAECE5;overflow-y:auto;z-index:100
}
.logo{font-size:17px;letter-spacing:2px;margin-bottom:50px}
.sidebar nav{display:flex;flex-direction:column;gap:12px}
.sidebar nav a{
    text-decoration:none;color:#252525;padding:13px 15px;
    border-radius:10px;font-size:14px
}
.sidebar nav a:hover,.sidebar nav a.active{
    background:#EDF2E9;color:#5C7057;font-weight:600
}
.sidebar-footer{margin-top:auto;font-size:11px;color:#555}

.main-content{
    flex:1;padding:40px;max-width:1500px;margin-left:240px;min-width:0
}
.topbar{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:35px
}
.date{font-size:11px;letter-spacing:1.5px;color:#555;margin-bottom:10px}
h1{font-size:30px;margin-bottom:7px}
.subtitle,.panel-subtitle{font-size:13px;color:#444;line-height:1.5}
.avatar{
    width:42px;height:42px;background:#DCE6D6;color:#5C7057;
    border-radius:50%;display:grid;place-items:center;font-weight:bold
}

.overview{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px
}
.card,.panel{background:#fff;border:1px solid #EAECE5;border-radius:16px;padding:23px}
.card-label{font-size:13px;color:#222;font-weight:600;margin-bottom:18px}
.card h2{font-size:30px;font-weight:700;color:#5C7057;margin-bottom:8px;line-height:1.2}
.card h2 span{font-size:inherit;color:inherit;font-weight:inherit}
.card h2 .card-unit{font-size:15px;font-weight:600}
.card-note{font-size:12px;color:#444}

.dashboard-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px
}
.panel h3{font-size:17px;margin-bottom:8px;color:#5C7057}
.nutrition-item{margin-top:24px}
.nutrition-info{
    display:flex;justify-content:space-between;gap:12px;
    font-size:13px;margin-bottom:10px;color:#111
}
.progress{width:100%;height:8px;background:#F0F1EC;border-radius:20px;overflow:hidden}
.progress-fill{height:100%;border-radius:20px;transition:width .3s ease}
.protein{width:0;background:#829A78}
.carbs{width:0;background:#D7B58B}
.fat{width:0;background:#B6A3B9}

.weight-display{display:flex;justify-content:space-between;gap:15px;margin:30px 0}
.weight-display div{display:flex;flex-direction:column;gap:10px}
.small-label{font-size:12px;color:#444}
.weight-display strong{font-size:25px;color:#5C7057}
.weight-fill{width:0;background:#829A78}
.goal-note{font-size:12px;color:#444;margin-top:15px}
.food-panel{margin-top:22px}

.section-heading{
    display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px
}
.add-button{
    display:inline-block;border:none;background:#71866E;color:#fff;
    padding:11px 17px;border-radius:9px;cursor:pointer;
    text-decoration:none;font-size:13px;font-weight:600
}
.add-button:hover{background:#5C7057}

.meal-row{
    display:flex;justify-content:space-between;align-items:center;gap:15px;
    padding:17px 0;border-top:1px solid #F0F1EC;font-size:13px;color:#111
}
.meal-row p{margin-top:6px;color:#444;font-size:12px}
.meal-row>span{color:#5C7057;font-weight:600;white-space:nowrap}

.food-entry-panel,.weight-page,.exercise-page,.profile-page{margin-top:22px}
#library-form,#diary-form,#weight-form,#exercise-form{margin-top:25px}
#diary-form{max-width:600px}

.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:17px}
.form-group label{font-size:13px;color:#222;font-weight:600}
.form-group input,.form-group select,#diary-food-select,.period-select{
    width:100%;padding:12px;border:1px solid #D5D9D1;border-radius:9px;
    background:#FAFBF8;color:#111;font-size:14px;outline:none
}
.form-group input:focus,.form-group select:focus,#diary-food-select:focus,.period-select:focus{
    border-color:#829A78
}
.form-hint{font-size:12px;color:#333;line-height:1.5;margin:10px 0 15px}
.field-hint{font-size:11px;color:#444;line-height:1.5}
.nutrition-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.daily-summary,.exercise-summary{
    margin-top:30px;padding:20px;background:#F7F8F4;border-radius:12px
}
.daily-summary h3,.exercise-summary h3,.food-history h3{
    font-size:15px;margin-bottom:18px;color:#5C7057
}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.summary-grid div{display:flex;flex-direction:column;gap:8px}
.summary-grid span{font-size:12px;color:#333}
.summary-grid strong{font-size:17px;color:#5C7057}
.exercise-summary-grid{grid-template-columns:repeat(3,1fr)}

.food-history{margin-top:30px}
.food-item{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;padding:15px 0;border-top:1px solid #EAECE5
}
.food-item strong,.library-item strong{font-size:14px;color:#111}
.food-item p,.library-item p{
    font-size:12px;color:#444;margin-top:6px;line-height:1.5
}
.food-item-right{text-align:right;white-space:nowrap}
.delete-food,.library-delete,.delete-measurement,.delete-exercise{
    margin-top:6px;border:none;background:none;color:#A34740;cursor:pointer;font-size:12px
}
.library-item{padding:16px 0;border-top:1px solid #EAECE5}
.library-item-header{
    display:flex;justify-content:space-between;align-items:center;gap:10px
}
.empty-message{font-size:13px;color:#444;padding:15px 0}

.body-overview{
    display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0
}
.body-stat{
    background:#F7F8F4;padding:20px;border-radius:12px;
    display:flex;flex-direction:column;gap:12px
}
.body-stat span{font-size:12px;color:#333}
.body-stat strong{font-size:23px;color:#5C7057}
.measurement-form-section,.weight-history-section{margin-top:32px}
.measurement-form-section h3,.weight-history-section h3{
    font-size:16px;margin-bottom:8px;color:#5C7057
}
.measurement-inputs,.exercise-input-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.latest-value{font-size:11px;color:#444;margin-top:-3px}
.table-wrapper{width:100%;overflow-x:auto;margin-top:18px}
.measurement-table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.measurement-table th,.measurement-table td{
    padding:14px 12px;text-align:left;border-bottom:1px solid #EAECE5
}
.measurement-table th{color:#333;font-weight:600;font-size:12px}
.measurement-table td{color:#111}

.statistics-page{display:flex;flex-direction:column;gap:20px;margin-top:22px}
.statistics-panel{min-width:0}
.period-select{width:auto;min-width:140px}
.stats-summary-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 10px
}
.stats-summary-grid div{
    background:#F7F8F4;padding:15px;border-radius:10px;
    display:flex;flex-direction:column;gap:9px
}
.stats-summary-grid span,.stats-metric-list span{font-size:12px;color:#444}
.stats-summary-grid strong{font-size:20px;color:#5C7057}
.stats-chart{width:100%;min-height:220px;margin-top:15px;overflow:hidden}
.stats-chart svg{width:100%;height:auto;display:block}
.statistics-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stats-metric-list{margin-top:20px}
.stats-metric-list div{
    display:flex;justify-content:space-between;gap:12px;
    padding:12px 0;border-bottom:1px solid #EAECE5
}
.stats-metric-list strong{font-size:14px;color:#5C7057;text-align:right}
.mini-chart{margin-top:18px;min-height:130px;overflow:hidden}
.mini-chart svg{width:100%;height:auto;display:block}
[data-page-section][hidden]{display:none!important}
/* Statistics - Mobile responsive */
@media (max-width: 650px) {
    .stats-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stats-chart {
        width: 100%;
        min-height: 0;
        height: auto;
        margin-top: 15px;
    }

    .stats-chart svg {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .mini-chart {
        min-height: 0;
    }

    .mini-chart svg {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* ENERGY BALANCE */
.energy-panel{margin-top:22px}
.energy-summary-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0
}
.energy-summary-grid div{
    background:#F7F8F4;border-radius:10px;padding:17px;
    display:flex;flex-direction:column;gap:9px;min-width:0
}
.energy-summary-grid strong,.energy-breakdown strong{font-size:12px;color:#333}
.energy-summary-grid strong{font-size:23px;color:#5C7057}
.energy-breakdown{display:flex;gap:28px;flex-wrap:wrap;margin:12px 0 14px}
.energy-breakdown strong{color:#5C7057}

/* Balance status */
.balance-value{display:flex;align-items:center;gap:7px}
.balance-value.deficit{color:#25A85A!important}
.balance-value.surplus{color:#D94343!important}
.balance-value.neutral{color:#5C7057!important}
.balance-icon{font-weight:800;font-size:25px;line-height:1}

/* ENERGY PROFILE PAGE */
.profile-page{max-width:100%}
.profile-form{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;
    gap:12px;align-items:end;margin-top:25px
}
.profile-form .form-group{margin:0}
.profile-form .add-button{height:43px;white-space:nowrap}
.profile-note{margin-top:18px}
.profile-result{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 18px
}
.profile-result div{
    background:#F7F8F4;border-radius:10px;padding:18px;
    display:flex;flex-direction:column;gap:10px
}
.profile-result span{font-size:12px;color:#444}
.profile-result strong{font-size:22px;color:#5C7057}

.energy-stats-grid{grid-template-columns:repeat(4,1fr)}
.energy-charts-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px
}
.energy-charts-grid h4{font-size:13px;color:#5C7057;margin-bottom:8px}

@media(max-width:900px){
    .main-content{padding:25px}
    .overview{grid-template-columns:repeat(3,1fr)}
    .stats-summary-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:650px){
    .app-container{flex-direction:column}
    .sidebar{
        position:static;width:100%;height:auto;padding:15px;overflow-y:visible
    }
    .logo{margin-bottom:15px}
    .sidebar nav{flex-direction:row;overflow-x:auto;gap:5px}
    .sidebar nav a{white-space:nowrap;font-size:12px;padding:10px}
    .sidebar-footer{display:none}
    .main-content{padding:20px 15px;margin-left:0}
    .dashboard-grid,.statistics-grid{grid-template-columns:1fr}
    .overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .card{padding:13px 10px}
    .card-label{font-size:11px;margin-bottom:12px}
    .card h2{font-size:21px}
    .card h2 .card-unit{font-size:11px}
    .card-note{font-size:10px}
    h1{font-size:25px}
    .nutrition-inputs,.summary-grid{grid-template-columns:repeat(2,1fr)}
    #diary-form{max-width:100%}
    .body-overview{grid-template-columns:repeat(2,1fr)}
    .measurement-inputs,.exercise-input-grid{grid-template-columns:repeat(2,1fr)}
    .body-stat{padding:15px}
    .body-stat strong{font-size:20px}
    .stats-summary-grid{grid-template-columns:repeat(2,1fr)}
    .section-heading{align-items:flex-start;flex-wrap:wrap}
    .period-select{max-width:100%}
    .energy-summary-grid{grid-template-columns:1fr 1fr}
    .profile-form{grid-template-columns:1fr 1fr}
    .profile-form .add-button{grid-column:1/-1}
    .profile-result{grid-template-columns:1fr}
    .energy-charts-grid{grid-template-columns:1fr}
    .energy-stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:390px){
    .overview{grid-template-columns:1fr}
    .card h2{font-size:26px}
    .card-label{font-size:13px}
}
/* ==========================================
   ENERGY BALANCE - FINAL DESIGN
========================================== */

/* Balance number and status icon */
.energy-summary-grid .balance-card .balance-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 23px;
    line-height: 1.2;
    gap: 10px;
}

/* Deficit: bright green */
.balance-value.deficit {
    color: #20C768 !important;
}

/* Surplus: red */
.balance-value.surplus {
    color: #E04444 !important;
}

/* Zero balance */
.balance-value.neutral {
    color: #5C7057 !important;
}

/* Tick / X on the far right */
.balance-icon {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

/* Statistics chart legend */
.chart-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 11px;
    color: #333;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}

.chart-legend-swatch.calories-in {
    background: #829A78;
}

.chart-legend-swatch.calories-out {
    background: #D7B58B;
}
/* ==========================================
   MOBILE DROPDOWN MENU - FIXED AT TOP
========================================== */
@media (max-width: 650px) {
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        height: auto;
        padding: 15px;
        overflow: visible;
        box-sizing: border-box;
    }
    .sidebar {
    background: #fff;
}
    .sidebar-toggle {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    border-radius: 0;
    color: #5C7057;
    cursor: pointer;
    font-weight: 700;
}

    .menu-toggle-icon {
        display: inline-block;
        font-size: 20px;
        color: #5C7057;
    }

    /* Menu xổ dọc, nằm đè lên nội dung */
    .sidebar nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 5px;
        margin: 0;
        padding: 10px 15px 15px;
        background: inherit;
        max-height: calc(100vh - 65px);
        overflow-y: auto;
        box-sizing: border-box;
    }

    .sidebar.is-expanded nav {
        display: flex;
    }

    .sidebar nav a {
        display: block;
        width: 100%;
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 13px;
        padding: 12px;
        box-sizing: border-box;
    }

    .sidebar.is-expanded .sidebar-toggle {
        margin-bottom: 0;
    }

    .sidebar-footer {
        display: none;
    }

    .main-content {
        padding: 20px 15px;
        margin-left: 0;
    }
}

/* Bỏ viền và shade của nút MY TRACKER trên laptop */
@media (min-width: 651px) {
    .sidebar-toggle {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 0;
        font-weight: 700;
    }

    .sidebar-toggle:hover,
    .sidebar-toggle:focus,
    .sidebar-toggle:active {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* BACKUP & RESTORE */
.backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.backup-actions button {
    margin: 0;
}

@media (max-width: 650px) {
    .backup-actions {
        flex-direction: column;
    }

    .backup-actions button {
        width: 100%;
    }
}

/* MONTHLY REPORT */
.monthly-report-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
}

.monthly-overview-grid small {
    font-size: 11px;
    color: #555;
}

.monthly-summary-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-top: 15px;
}

@media (max-width: 650px) {
    .monthly-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .monthly-report-page .section-heading {
        flex-direction: column;
        align-items: stretch;
    }

    #monthly-report-month {
        width: 100%;
    }
}