/* =========================================================
   FITIZEN CLIENT PANEL
   ========================================================= */

:root {
    --fitizen-black: #080b0a;
    --fitizen-dark: #101512;
    --fitizen-dark-2: #151b18;
    --fitizen-card: #ffffff;
    --fitizen-green: #00a86b;
    --fitizen-green-dark: #008f5b;
    --fitizen-gold: #d4af37;

    --text-dark: #111614;
    --text-muted: #747b78;
    --text-light: #ffffff;

    --border-light: #e8ecea;
    --background: #f5f7f6;

    --sidebar-width: 245px;

    --shadow-soft:
        0 8px 30px rgba(0, 0, 0, 0.06);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: var(--background);
    color: var(--text-dark);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}


/* =========================================================
   MAIN APP
   ========================================================= */

.client-app {
    min-height: 100vh;
    display: flex;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.client-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    background: var(--fitizen-black);
    color: var(--text-light);

    display: flex;
    flex-direction: column;

    padding: 28px 18px;

    z-index: 1000;
}


/* BRAND */

.client-brand {
    padding: 0 12px 32px;
}

.client-brand a {
    display: inline-flex;
    align-items: center;
}

.client-brand img {
    width: 130px;
    height: auto;
    display: block;
}


/* NAVIGATION */

.client-navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.client-nav-link {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 0 15px;

    border-radius: 12px;

    color: #9ba39f;

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.client-nav-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.client-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.client-nav-link.active {
    color: #ffffff;
    background: var(--fitizen-green);
}

.client-nav-link.active:hover {
    background: var(--fitizen-green-dark);
}


/* SIDEBAR BOTTOM */

.client-sidebar-bottom {
    margin-top: auto;
}

.client-logout-btn {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 0 15px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #9ba39f;

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.client-logout-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.client-main {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);

    min-height: 100vh;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.client-topbar {
    min-height: 88px;

    padding: 20px 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;

    border-bottom: 1px solid var(--border-light);
}

.client-page-title span {
    display: block;

    margin-bottom: 5px;

    color: var(--fitizen-green);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.client-page-title h1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
}


/* MINI PROFILE */

.client-profile-mini {
    display: flex;
    align-items: center;
}

.client-avatar {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--fitizen-dark);
    color: var(--fitizen-green);

    font-size: 16px;
}

.client-mobile-menu {
    display: none;
}


/* =========================================================
   DASHBOARD CONTENT
   ========================================================= */

.client-dashboard-content {
    padding: 35px 40px 50px;
}


/* =========================================================
   HERO
   ========================================================= */

.client-hero {
    min-height: 310px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    overflow: hidden;

    padding: 42px 48px;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            120deg,
            #07100c 0%,
            #0d2118 55%,
            #123e2b 100%
        );

    color: #ffffff;
}

.client-hero::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: 80px;
    top: -120px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.client-hero-content {
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.client-hero-label {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--fitizen-gold);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.client-hero h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 800;

    margin-bottom: 16px;
}

.client-hero p {
    max-width: 560px;

    color: #b7c4be;

    font-size: 14px;
    line-height: 1.7;

    margin-bottom: 25px;
}


/* HERO BUTTON */

.client-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 13px 20px;

    border-radius: 10px;

    background: var(--fitizen-green);
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.client-primary-btn:hover {
    background: var(--fitizen-green-dark);
    color: #ffffff;
    transform: translateY(-2px);
}


/* HERO PROGRESS */

.client-hero-visual {
    position: relative;
    z-index: 2;

    padding-right: 35px;
}

.hero-progress-ring {
    width: 155px;
    height: 155px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--fitizen-green) 0deg,
            var(--fitizen-green) 0deg,
            rgba(255, 255, 255, 0.10) 0deg
        );

    position: relative;
}

.hero-progress-ring::before {
    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    background: var(--fitizen-dark);
}

.hero-progress-inner {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-progress-inner strong {
    font-size: 28px;
    font-weight: 800;
}

.hero-progress-inner span {
    margin-top: 3px;

    color: #9ba7a1;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   QUICK STATS
   ========================================================= */

.client-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-top: 22px;
}

.client-stat-card {
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);
}

.client-stat-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #edf8f3;
    color: var(--fitizen-green);

    font-size: 17px;
}

.client-stat-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 600;
}

.client-stat-card strong {
    display: block;

    font-size: 21px;
    font-weight: 800;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.client-section {
    margin-top: 38px;
}

.client-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;
}

.client-section-heading span,
.client-panel-heading span,
.client-motivation-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--fitizen-green);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.client-section-heading h2,
.client-panel-heading h2 {
    font-size: 22px;
    font-weight: 800;
}


/* =========================================================
   TODAY FOCUS
   ========================================================= */

.client-focus-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.client-focus-card {
    min-height: 175px;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    position: relative;

    padding: 25px;

    border-radius: var(--radius-md);

    overflow: hidden;
}

.workout-focus {
    background: #0d1713;
    color: #ffffff;
}

.diet-focus {
    background: #ffffff;
    color: var(--text-dark);

    border: 1px solid var(--border-light);
}

.focus-card-icon {
    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(0, 168, 107, 0.13);
    color: var(--fitizen-green);

    font-size: 18px;
}

.focus-card-content {
    padding-right: 35px;
}

.focus-card-content span {
    display: block;

    margin-bottom: 8px;

    color: var(--fitizen-green);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.focus-card-content h3 {
    margin-bottom: 8px;

    font-size: 17px;
    font-weight: 800;
}

.focus-card-content p {
    color: var(--text-muted);

    font-size: 12px;
    line-height: 1.6;
}

.workout-focus .focus-card-content p {
    color: #9da9a4;
}

.client-focus-card > a {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 20px;
    bottom: 20px;

    border-radius: 50%;

    background: var(--fitizen-green);
    color: #ffffff;

    font-size: 12px;

    transition: transform 0.2s ease;
}

.client-focus-card > a:hover {
    transform: translateX(3px);
}


/* =========================================================
   BOTTOM GRID
   ========================================================= */

.client-bottom-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 22px;
}

.client-panel-card {
    padding: 25px;

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-soft);
}

.client-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 25px;
}

.client-panel-heading a {
    color: var(--fitizen-green);

    font-size: 11px;
    font-weight: 700;
}

.client-panel-heading a:hover {
    text-decoration: underline;
}


/* =========================================================
   WEIGHT PROGRESS
   ========================================================= */

.weight-progress-values {
    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 10px;
}

.weight-progress-values > div:not(.weight-progress-arrow) {
    text-align: center;
}

.weight-progress-values span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;
}

.weight-progress-values strong {
    font-size: 18px;
    font-weight: 800;
}

.weight-progress-arrow {
    color: #b6bfbb;

    font-size: 11px;
}

.weight-progress-bar {
    height: 8px;

    margin-top: 25px;

    overflow: hidden;

    border-radius: 20px;

    background: #edf0ef;
}

.weight-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: var(--fitizen-green);

    transition: width 0.5s ease;
}


/* =========================================================
   GOAL PREVIEW
   ========================================================= */

.goal-preview {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.goal-preview-item {
    display: flex;
    align-items: center;
    gap: 13px;
}

.goal-preview-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: #f1f7f4;
    color: var(--fitizen-green);

    font-size: 14px;
}

.goal-preview-item strong {
    display: block;

    margin-bottom: 3px;

    font-size: 12px;
    font-weight: 700;
}

.goal-preview-item span {
    display: block;

    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   MOTIVATION
   ========================================================= */

.client-motivation-card {
    min-height: 125px;

    display: flex;
    align-items: center;
    gap: 20px;

    margin-top: 22px;
    padding: 25px 30px;

    border-radius: var(--radius-md);

    background: #ffffff;

    border: 1px solid var(--border-light);

    box-shadow: var(--shadow-soft);
}

.motivation-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #fff9e7;
    color: var(--fitizen-gold);

    font-size: 20px;
}

.client-motivation-card h2 {
    max-width: 700px;

    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --sidebar-width: 215px;
    }

    .client-dashboard-content {
        padding: 30px;
    }

    .client-topbar {
        padding: 20px 30px;
    }

    .client-hero {
        padding: 35px;
    }

    .client-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --sidebar-width: 0px;
    }

    .client-sidebar {
        width: 245px;

        transform: translateX(-100%);

        transition: transform 0.35s ease;

        box-shadow: none;
    }

    .mobile-nav-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.35);

    z-index: 999;

    display: none;
}

.mobile-nav-overlay.active {
    display: block;
}

    .client-sidebar.mobile-open {
        transform: translateX(0);
    }

    .client-main {
        width: 100%;
        margin-left: 0;
    }

    .client-topbar {
        min-height: 75px;

        padding: 15px 20px;

        gap: 15px;
    }

    .client-mobile-menu {
        display: block;
    }

    .client-mobile-menu button {
        width: 40px;
        height: 40px;

        border: 0;
        border-radius: 10px;

        background: #f1f4f2;
        color: var(--text-dark);

        font-size: 16px;
    }

    .client-page-title {
        flex: 1;
    }

    .client-page-title span {
        font-size: 8px;
    }

    .client-page-title h1 {
        font-size: 16px;
    }

    .client-dashboard-content {
        padding: 20px 15px 35px;
    }

    .client-hero {
        min-height: auto;

        padding: 30px 25px;

        flex-direction: column;
        align-items: flex-start;
    }

    .client-hero h2 {
        font-size: 31px;
    }

    .client-hero p {
        font-size: 12px;
    }

    .client-hero-visual {
        align-self: center;

        margin-top: 25px;

        padding-right: 0;
    }

    .hero-progress-ring {
        width: 130px;
        height: 130px;
    }

    .client-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .client-stat-card {
        min-height: 95px;

        padding: 15px;

        gap: 10px;
    }

    .client-stat-icon {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .client-stat-card span {
        font-size: 9px;
    }

    .client-stat-card strong {
        font-size: 17px;
    }

    .client-focus-grid,
    .client-bottom-grid {
        grid-template-columns: 1fr;
    }

    .client-section-heading h2,
    .client-panel-heading h2 {
        font-size: 19px;
    }

    .client-focus-card {
        min-height: 155px;

        padding: 20px;
    }

    .client-panel-card {
        padding: 20px;
    }

    .weight-progress-values {
        gap: 5px;
    }

    .weight-progress-values strong {
        font-size: 15px;
    }

    .client-motivation-card {
        padding: 20px;

        align-items: flex-start;
    }

    .client-motivation-card h2 {
        font-size: 15px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .client-profile-mini {
        display: none;
    }

    .client-stats-grid {
        grid-template-columns: 1fr;
    }

    .client-stat-card {
        min-height: 80px;
    }

    .client-hero h2 {
        font-size: 27px;
    }

    .client-hero {
        padding: 25px 20px;
    }

    .client-primary-btn {
        width: 100%;

        justify-content: center;
    }

    .weight-progress-values span {
        font-size: 8px;
    }

    .weight-progress-values strong {
        font-size: 13px;
    }

    .client-motivation-card {
        gap: 13px;
    }

    .motivation-icon {
        width: 43px;
        height: 43px;

        font-size: 16px;
    }

}

/* =========================================================
   CLIENT LOGIN PAGE
   ========================================================= */

.client-login-page {
    min-height: 100vh;
    background: #f5f7f6;
}


/* =========================================================
   LOGIN CONTAINER
   ========================================================= */

.client-login-container {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
}


/* =========================================================
   BRAND SIDE
   ========================================================= */

.client-login-brand {
    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 60px;

    background:
        linear-gradient(
            135deg,
            #070b09 0%,
            #0b1711 55%,
            #123a28 100%
        );

    color: #ffffff;

    position: relative;
    overflow: hidden;
}

.client-login-brand::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    bottom: -220px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.client-login-brand::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: 20px;
    bottom: -100px;

    border: 1px solid rgba(0, 168, 107, 0.15);

    border-radius: 50%;
}


.client-login-brand-content {
    max-width: 570px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   LOGO
   ========================================================= */

.client-login-logo {
    display: inline-flex;

    margin-bottom: 75px;
}

.client-login-logo img {
    width: 145px;
    height: auto;
    display: block;
}


/* =========================================================
   BRAND TEXT
   ========================================================= */

.client-login-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.client-login-brand h1 {
    margin-bottom: 20px;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.client-login-brand p {
    max-width: 460px;

    color: #aebbb4;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   LOGIN CARD SIDE
   ========================================================= */

.client-login-card {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;
}

.client-login-content {
    width: 100%;
    max-width: 430px;
}


/* =========================================================
   LOGIN HEADINGS
   ========================================================= */

.client-login-small-title {
    display: block;

    margin-bottom: 10px;

    color: #00a86b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.client-login-content h2 {
    margin-bottom: 10px;

    color: #111614;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 800;
}

.client-login-description {
    margin-bottom: 30px;

    color: #747b78;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   SOCIAL LOGIN BUTTONS
   ========================================================= */

.social-login-btn {
    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 13px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.social-login-btn:hover {
    transform: translateY(-2px);
}


/* GOOGLE */

.google-login-btn {
    border: 1px solid #dfe4e1;

    background: #ffffff;

    color: #202522;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.04);
}

.google-login-btn:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.google-login-btn i {
    color: #4285f4;

    font-size: 17px;
}


/* INSTAGRAM */

.instagram-login-btn {
    border: 0;

    background: #111614;

    color: #ffffff;
}

.instagram-login-btn:hover {
    background: #1a211e;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);
}

.instagram-login-btn i {
    color: #d4af37;

    font-size: 18px;
}


/* =========================================================
   LOGIN MESSAGE
   ========================================================= */

.client-login-message {
    margin: 15px 0;

    padding: 11px 14px;

    border-radius: 10px;

    background: #f2f6f4;

    color: #53605a;

    font-size: 12px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.client-login-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 28px 0 18px;

    color: #a0a8a4;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.client-login-divider::before,
.client-login-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: #e4e8e6;
}


/* =========================================================
   LOGIN NOTE
   ========================================================= */

.client-login-note {
    margin-bottom: 25px;

    color: #8a928e;

    font-size: 10px;

    line-height: 1.6;

    text-align: center;
}


/* =========================================================
   STAFF LOGIN LINK
   ========================================================= */

.staff-login-link {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #00a86b;

    font-size: 11px;
    font-weight: 700;
}

.staff-login-link:hover {
    color: #008f5b;
}


/* =========================================================
   LOGIN RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .client-login-container {
        grid-template-columns: 1fr;
    }

    .client-login-brand {
        min-height: 330px;

        padding: 40px;
    }

    .client-login-logo {
        margin-bottom: 45px;
    }

    .client-login-brand h1 {
        font-size: 42px;
    }

    .client-login-card {
        min-height: auto;

        padding: 45px 30px;
    }

}


@media (max-width: 600px) {

    .client-login-brand {
        min-height: 300px;

        padding: 30px 25px;
    }

    .client-login-logo {
        margin-bottom: 35px;
    }

    .client-login-logo img {
        width: 120px;
    }

    .client-login-brand h1 {
        font-size: 34px;

        letter-spacing: -0.8px;
    }

    .client-login-brand p {
        font-size: 12px;
    }

    .client-login-card {
        padding: 35px 20px;
    }

    .client-login-content h2 {
        font-size: 27px;
    }

    .social-login-btn {
        min-height: 52px;
    }

}

/* =========================================================
   GOOGLE OFFICIAL LOGO
   ========================================================= */

.google-login-btn .google-logo {
    width: 18px;
    height: 18px;

    flex-shrink: 0;
}

/* =========================================================
   TRAINER SELECTION PAGE
   MOBILE FIRST
   ========================================================= */

.trainer-selection-page {
    min-height: 100vh;

    background: #f5f7f6;

    color: var(--text-dark);
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.trainer-selection-container {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 20px 16px 35px;
}


/* =========================================================
   HEADER
   ========================================================= */

.trainer-selection-header {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 45px;
}

.trainer-selection-logo img {
    width: 105px;
    height: auto;

    display: block;
}

.trainer-selection-step {
    color: var(--text-muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


/* =========================================================
   INTRO
   ========================================================= */

.trainer-selection-intro {
    max-width: 650px;

    margin-bottom: 30px;
}

.trainer-selection-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--fitizen-green);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.trainer-selection-intro h1 {
    margin-bottom: 12px;

    color: var(--text-dark);

    font-size: 30px;
    line-height: 1.15;

    font-weight: 800;
}

.trainer-selection-intro p {
    max-width: 600px;

    color: var(--text-muted);

    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.trainer-selection-message {
    margin-bottom: 20px;

    padding: 12px 14px;

    border-radius: 10px;

    background: #ffffff;

    border: 1px solid var(--border-light);

    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   TRAINER LIST
   ========================================================= */

.trainer-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: 15px;
}


/* =========================================================
   TRAINER CARD
   ========================================================= */

.trainer-card {
    width: 100%;

    padding: 20px;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: 16px;

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.trainer-card:hover {
    transform: translateY(-2px);

    border-color: rgba(0, 168, 107, 0.35);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   TRAINER INFORMATION
   ========================================================= */

.trainer-card-top {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}

.trainer-avatar {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0b1711,
            #123a28
        );

    color: var(--fitizen-green);

    font-size: 20px;
}

.trainer-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.trainer-card-info {
    min-width: 0;
}

.trainer-card-info h2 {
    margin-bottom: 5px;

    color: var(--text-dark);

    font-size: 16px;
    line-height: 1.25;

    font-weight: 800;

    word-break: break-word;
}

.trainer-specialization {
    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   TRAINER DETAILS
   ========================================================= */

.trainer-card-details {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;
}

.trainer-detail-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 9px;

    border-radius: 8px;

    background: #f3f6f4;

    color: #68716c;

    font-size: 9px;
    font-weight: 600;
}

.trainer-detail-item i {
    color: var(--fitizen-green);

    font-size: 9px;
}


/* =========================================================
   SELECT TRAINER BUTTON
   ========================================================= */

.select-trainer-btn {
    width: 100%;

    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: auto;

    border: 0;

    border-radius: 10px;

    background: var(--fitizen-green);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.select-trainer-btn:hover {
    background: var(--fitizen-green-dark);

    transform: translateY(-1px);
}

.select-trainer-btn:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   LOADING
   ========================================================= */

.trainer-loading {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 13px;

    color: var(--text-muted);
}

.trainer-loading p {
    font-size: 11px;
    font-weight: 600;
}

.trainer-loading-spinner {
    width: 30px;
    height: 30px;

    border: 3px solid #dfe7e3;

    border-top-color: var(--fitizen-green);

    border-radius: 50%;

    animation:
        trainerSpinner 0.8s linear infinite;
}

@keyframes trainerSpinner {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.trainer-empty-state {
    padding: 45px 20px;

    text-align: center;

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: 16px;
}

.trainer-empty-state i {
    margin-bottom: 15px;

    color: var(--fitizen-green);

    font-size: 30px;
}

.trainer-empty-state h2 {
    margin-bottom: 7px;

    font-size: 17px;
    font-weight: 800;
}

.trainer-empty-state p {
    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   FOOTER
   ========================================================= */

.trainer-selection-footer {
    max-width: 600px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: 8px;

    margin: 30px auto 0;

    color: #89928d;

    font-size: 9px;

    line-height: 1.5;

    text-align: center;
}

.trainer-selection-footer i {
    flex-shrink: 0;

    margin-top: 1px;

    color: var(--fitizen-green);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 600px) {

    .trainer-selection-container {
        padding:
            30px
            25px
            50px;
    }

    .trainer-selection-header {
        margin-bottom: 55px;
    }

    .trainer-selection-logo img {
        width: 120px;
    }

    .trainer-selection-intro h1 {
        font-size: 38px;
    }

    .trainer-selection-intro p {
        font-size: 13px;
    }

    .trainer-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .trainer-selection-container {
        padding:
            35px
            35px
            60px;
    }

    .trainer-selection-header {
        margin-bottom: 65px;
    }

    .trainer-selection-intro {
        margin-bottom: 35px;
    }

    .trainer-selection-intro h1 {
        font-size: 44px;
    }

    .trainer-selection-intro p {
        font-size: 14px;
    }

    .trainer-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px;
    }

    .trainer-card {
        padding: 22px;
    }

}

/* =========================================================
   FACEBOOK LOGIN
   ========================================================= */

.facebook-login-btn {
    border: 0;

    background: #1877f2;

    color: #ffffff;
}

.facebook-login-btn:hover {
    background: #166fe5;

    box-shadow:
        0 8px 24px rgba(24, 119, 242, 0.20);
}

.facebook-login-btn i {
    color: #ffffff;

    font-size: 18px;
}

/* =========================================================
   FITIZEN LANDING PAGE
========================================================= */

.fitizen-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(16, 185, 129, 0.18),
            transparent 35%
        ),
        #050807;
    color: #ffffff;
    padding: 70px 0;
}

.hero-content {
    max-width: 720px;
}

.hero-label {
    display: inline-block;
    color: #10b981;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.fitizen-hero h1 {
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 24px;
}

.fitizen-hero h1 span {
    color: #10b981;
}

.fitizen-hero p {
    max-width: 600px;
    color: #b8c1bd;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary-fitizen,
.btn-outline-fitizen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.25s ease;
}

.btn-primary-fitizen {
    background: #10b981;
    color: #03100b;
}

.btn-primary-fitizen:hover {
    background: #34d399;
    color: #03100b;
    transform: translateY(-2px);
}

.btn-outline-fitizen {
    border: 1px solid #10b981;
    color: #10b981;
}

.btn-outline-fitizen:hover {
    background: #10b981;
    color: #03100b;
}


/* =========================================================
   LANDING NAVBAR
========================================================= */

body:has(.fitizen-hero) .navbar {
    background: #050807;
    padding: 18px 0;
}

body:has(.fitizen-hero) .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body:has(.fitizen-hero) .navbar-brand {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
}

body:has(.fitizen-hero) .navbar-brand span {
    color: #10b981;
}

.navbar-actions {
    display: flex;
    gap: 8px;
}

.btn-client-login,
.btn-staff-login {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-client-login {
    color: #10b981;
    border: 1px solid #10b981;
}

.btn-staff-login {
    color: #050807;
    background: #d4af37;
}


/* =========================================================
   FEATURES
========================================================= */

.fitizen-features {
    background: #f5f7f6;
    padding: 70px 0;
}

.section-heading {
    max-width: 650px;
    margin-bottom: 40px;
}

.section-heading span {
    color: #059669;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-heading h2 {
    margin-top: 10px;
    color: #07110d;
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
}

.feature-card {
    height: 100%;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 16px;
    transition: 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: #10b981;
}

.feature-card i {
    color: #059669;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    color: #07110d;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    color: #66736d;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}


/* =========================================================
   FOOTER
========================================================= */

.fitizen-footer {
    background: #050807;
    color: #7d8984;
    text-align: center;
    padding: 24px 0;
}

.fitizen-footer p {
    margin: 0;
    font-size: 0.85rem;
}


/* =========================================================
   TABLET / DESKTOP
========================================================= */

@media (min-width: 768px) {

    .hero-buttons {
        flex-direction: row;
    }

    .btn-primary-fitizen,
    .btn-outline-fitizen {
        min-width: 170px;
    }

    .navbar-actions {
        gap: 12px;
    }

    .btn-client-login,
    .btn-staff-login {
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    .fitizen-hero {
        min-height: 80vh;
    }
}


@media (min-width: 992px) {

    .fitizen-hero {
        padding: 90px 0;
    }

    .fitizen-features {
        padding: 90px 0;
    }

}

/* =========================================
   CLIENT WORKOUT PAGE
========================================= */

.client-workout-page {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 30px 24px 100px;
}


.client-workout-header {
    margin-bottom: 28px;
}


.client-workout-header h1 {
    margin: 8px 0 6px;
    font-size: 2rem;
    font-weight: 800;
    color: #16202a;
}


.client-workout-header p {
    margin: 0;
    color: #718078;
}


.client-workout-summary {
    background: #183b2b;
    color: #ffffff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px;
}


.client-workout-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}


.client-workout-summary-top span {
    display: block;
    color: #8de0b7;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
}


.client-workout-summary h2 {
    margin: 7px 0 0;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 800;
}


.client-workout-level {
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}


.client-workout-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}


.client-workout-stats > div {
    padding: 13px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    text-align: center;
}


.client-workout-stats strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
}


.client-workout-stats span {
    display: block;
    margin-top: 3px;
    color: #b8c9c1;
    font-size: 0.7rem;
}


.client-workout-progress-card {
    padding: 20px;
    margin-bottom: 18px;
    border: 1px solid #e6ece9;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 20px #173a2b0a;
}


.client-workout-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}


.client-workout-progress-header strong {
    color: #16202a;
}


.client-workout-progress-header span {
    color: #18824e;
    font-weight: 800;
}


.client-workout-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 20px;
    background: #e7eeea;
}


.client-workout-progress div {
    height: 100%;
    border-radius: 20px;
    background: #18824e;
    transition: width 0.3s ease;
}


.client-exercise-list {
    display: grid;
    gap: 14px;
}


.client-exercise-card {
    padding: 20px;
    border: 1px solid #e6ece9;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 20px #173a2b0a;
}


.client-exercise-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}


.client-exercise-number {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e7f5ee;
    color: #18824e;
    font-weight: 800;
}


.client-exercise-name {
    min-width: 0;
    flex: 1;
}


.client-exercise-name h3 {
    margin: 0;
    color: #16202a;
    font-size: 1rem;
    font-weight: 800;
}


.client-exercise-status {
    display: inline-block;
    margin-top: 5px;
    color: #718078;
    font-size: 0.75rem;
    font-weight: 600;
}


.client-exercise-status.completed {
    color: #18824e;
}


.client-exercise-status.skipped {
    color: #b26a00;
}


.client-exercise-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
}


.client-exercise-details > div {
    padding: 11px 7px;
    border-radius: 10px;
    background: #f5f8f6;
    text-align: center;
}


.client-exercise-details span {
    display: block;
    color: #718078;
    font-size: 0.68rem;
}


.client-exercise-details strong {
    display: block;
    margin-top: 4px;
    color: #16202a;
    font-size: 0.82rem;
}


.client-exercise-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}


.client-exercise-btn {
    flex: 1;
    min-height: 42px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
}


.client-complete-btn {
    border: none;
    background: #18824e;
    color: #ffffff;
}


.client-skip-btn {
    border: 1px solid #dce5df;
    background: #ffffff;
    color: #66736c;
}


.client-undo-btn {
    border: 1px solid #dce5df;
    background: #ffffff;
    color: #66736c;
}


.client-complete-session-btn {
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    border: none;
    border-radius: 13px;
    background: #18824e;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
}


.client-workout-empty {
    padding: 45px 24px;
    border: 1px solid #e6ece9;
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 6px 20px #173a2b0a;
}


.client-workout-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f5ee;
    color: #18824e;
    font-size: 24px;
}


.client-workout-empty h3 {
    margin: 0 0 7px;
    color: #16202a;
    font-size: 1.1rem;
    font-weight: 800;
}


.client-workout-empty p {
    margin: 0;
    color: #718078;
    font-size: 0.82rem;
}


.client-workout-loading {
    padding: 50px 20px;
    color: #718078;
    text-align: center;
}


.client-workout-loading i {
    margin-bottom: 12px;
    font-size: 25px;
}


.client-workout-loading p {
    margin: 0;
    font-size: 0.85rem;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

    .client-workout-page {
        width: min(100% - 28px, 1120px);
        padding: 20px 0 95px;
    }


    .client-workout-header {
        margin-bottom: 20px;
    }


    .client-workout-header h1 {
        font-size: 1.65rem;
    }


    .client-workout-summary {
        padding: 20px;
        border-radius: 16px;
    }


    .client-workout-summary h2 {
        font-size: 1.35rem;
    }


    .client-workout-stats {
        gap: 7px;
    }


    .client-workout-stats > div {
        padding: 11px 5px;
    }


    .client-workout-stats strong {
        font-size: 1rem;
    }


    .client-workout-stats span {
        font-size: 0.62rem;
    }


    .client-exercise-card {
        padding: 16px;
    }


    .client-exercise-details {
        gap: 6px;
    }


    .client-exercise-details > div {
        padding: 9px 5px;
    }


    .client-exercise-details span {
        font-size: 0.6rem;
    }


    .client-exercise-details strong {
        font-size: 0.72rem;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 440px) {

    .client-workout-summary-top {
        flex-direction: column;
    }


    .client-workout-level {
        align-self: flex-start;
    }


    .client-exercise-actions {
        flex-direction: column;
    }


    .client-exercise-btn {
        width: 100%;
    }

}

/* =========================================
   CLIENT MOBILE HEADER
========================================= */

.client-mobile-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 16px;
    box-sizing: border-box;
}

.client-mobile-brand {
    display: flex;
    align-items: center;
}

.client-mobile-brand img {
    width: 105px;
    height: auto;
    display: block;
}

/* =========================================================
   CLIENT MOBILE BOTTOM NAVIGATION
========================================================= */

.client-bottom-nav {
    display: none;
}

@media (max-width: 768px) {

    .client-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        height: 68px;

        display: flex;
        align-items: center;
        justify-content: space-around;

        background: #ffffff;
        border-top: 1px solid #e6ece9;

        z-index: 1200;
    }

    .client-bottom-nav-link {
        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        color: #7a8580;

        font-size: 10px;
        font-weight: 600;
    }

    .client-bottom-nav-link i {
        font-size: 17px;
    }

    .client-bottom-nav-link.active {
        color: var(--fitizen-green);
    }

}

/* =========================================================
   CLIENT MOBILE HEADER PROFILE
========================================================= */

.client-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

.client-mobile-header .client-profile-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-mobile-header #clientName {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.client-mobile-header .client-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: 14px;
}

/* =================================
   WORKOUT COMPLETION MODAL
================================= */

.workout-completion-modal {
    border: none;
    border-radius: 20px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}


.workout-completion-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8f7ef;
    color: var(--fitizen-green);

    font-size: 28px;
}


.workout-completion-modal h3 {
    margin: 0 0 8px;

    font-size: 22px;
    font-weight: 800;

    color: var(--text-dark);
}


.workout-completion-modal p {
    margin: 0 auto 24px;

    max-width: 280px;

    font-size: 14px;
    line-height: 1.5;

    color: #6f7b76;
}


.workout-completion-btn {
    width: 100%;

    border: none;
    border-radius: 10px;

    padding: 12px 18px;

    background: var(--fitizen-green);
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.workout-completion-btn:hover {
    opacity: 0.92;
}


.workout-completion-btn:active {
    transform: scale(0.98);
}


/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

    .workout-completion-modal {
        margin: 16px;
        padding: 28px 20px 20px;
    }


    .workout-completion-icon {
        width: 58px;
        height: 58px;

        font-size: 24px;
    }


    .workout-completion-modal h3 {
        font-size: 20px;
    }

}

/* =================================
   WORKOUT MODAL ABOVE BOTTOM NAV
================================= */

#workoutCompletionModal {
    z-index: 2100;
}


.modal-backdrop {
    z-index: 2090;
}

/* =================================
   WORKOUT COMPLETION OVERLAY
================================= */

.workout-completion-overlay {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.55);

    z-index: 3000;
}


.workout-completion-overlay.show {
    display: flex;
}


/* =================================
   COMPLETION MODAL
================================= */

.workout-completion-modal {
    width: 100%;
    max-width: 360px;

    padding: 32px 24px 24px;

    border-radius: 20px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.20);
}


/* =================================
   SUCCESS ICON
================================= */

.workout-completion-icon {

    width: 64px;
    height: 64px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8f7ef;

    color: var(--fitizen-green);

    font-size: 28px;
}


/* =================================
   TITLE
================================= */

.workout-completion-modal h3 {

    margin: 0 0 8px;

    color: var(--text-dark);

    font-size: 21px;

    font-weight: 800;
}


/* =================================
   MESSAGE
================================= */

.workout-completion-modal p {

    margin: 0 auto 24px;

    max-width: 290px;

    color: #6f7b76;

    font-size: 14px;

    line-height: 1.5;
}


/* =================================
   CONTINUE BUTTON
================================= */

.workout-completion-btn {

    width: 100%;

    padding: 13px 18px;

    border: none;

    border-radius: 10px;

    background: var(--fitizen-green);

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.workout-completion-btn:hover {

    opacity: 0.92;
}


.workout-completion-btn:active {

    transform: scale(0.98);
}


/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

    .workout-completion-overlay {

        padding: 18px;
    }


    .workout-completion-modal {

        max-width: 340px;

        padding: 28px 20px 20px;
    }


    .workout-completion-icon {

        width: 58px;
        height: 58px;

        font-size: 24px;
    }


    .workout-completion-modal h3 {

        font-size: 20px;
    }

}

/* =================================
   DIET PLAN SUMMARY
================================= */

.diet-plan-summary {
    width: 100%;

    padding: 22px;

    background: #064e3b;

    border-radius: 16px;

    color: #ffffff;

    margin-bottom: 24px;

    box-shadow:
        0 10px 25px rgba(6, 78, 59, 0.12);
}


.diet-plan-summary-top {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 24px;
}


.diet-section-label {
    display: block;

    margin-bottom: 6px;

    color: #6ee7b7;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.diet-plan-summary h2 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;
}


.diet-plan-status {
    padding: 6px 11px;

    background: #10b981;

    color: #ffffff;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;
}


/* =================================
   DIET DETAILS
================================= */

.diet-plan-details {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}


.diet-plan-details > div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 10px;
}


.diet-plan-details i {
    color: #6ee7b7;

    font-size: 16px;
}


.diet-plan-details div div {
    display: flex;

    flex-direction: column;
}


.diet-plan-details span {
    color: #a7f3d0;

    font-size: 10px;
}


.diet-plan-details strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 12px;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 767.98px) {

    .diet-plan-summary {
        padding: 18px;

        border-radius: 14px;
    }


    .diet-plan-summary h2 {
        font-size: 20px;
    }


    .diet-plan-details {
        grid-template-columns: 1fr;
    }


    .diet-plan-details > div {
        padding: 11px;
    }

}

/* =================================
   DIET PAGE LAYOUT FIX
================================= */

@media (max-width: 767.98px) {

    body[data-required-role="client"] {
        overflow-x: hidden;
    }


    .client-app {
        width: 100%;
        min-height: 100vh;
        position: relative;
    }


    /* Mobile Header */

    .client-mobile-header {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;

        height: 72px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        padding: 0 18px !important;

        background: #ffffff !important;

        border-bottom: 1px solid #e5e7eb !important;

        z-index: 20 !important;
    }


    .client-mobile-brand {
        display: flex !important;

        align-items: center !important;

        width: auto !important;

        height: auto !important;
    }


    .client-mobile-brand img {
        width: 115px !important;

        height: auto !important;

        max-width: 115px !important;

        max-height: 45px !important;

        object-fit: contain !important;

        display: block !important;
    }


    /* Client mini profile */

    .client-profile-mini {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        width: auto !important;
    }


    .client-profile-mini span {
        font-size: 12px !important;

        white-space: nowrap !important;
    }


    .client-avatar {
        width: 32px !important;

        height: 32px !important;

        flex-shrink: 0 !important;
    }


    /* Hide desktop sidebar */

    .client-sidebar {
        display: none !important;
    }


    /* Main */

    .client-main {
        width: 100% !important;

        min-height: calc(100vh - 72px) !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .client-content {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 24px 16px 95px !important;
    }


    /* Page header */

    .client-page-header {
        width: 100% !important;

        margin: 0 0 22px !important;

        text-align: left !important;
    }


    .client-page-header h1 {
        margin: 4px 0 8px !important;

        font-size: 28px !important;

        line-height: 1.15 !important;
    }


    .client-page-header p {
        margin: 0 !important;

        max-width: 100% !important;

        font-size: 14px !important;

        line-height: 1.5 !important;
    }


    .client-page-label {
        font-size: 10px !important;

        letter-spacing: 1.5px !important;
    }


    /* Diet content */

    .diet-content {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .diet-plan-summary {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 24px !important;

        box-sizing: border-box !important;
    }


    /* Bottom navigation */

    .client-bottom-nav {
        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100% !important;

        height: 68px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-around !important;

        background: #ffffff !important;

        border-top: 1px solid #e5e7eb !important;

        z-index: 1000 !important;
    }


    .client-bottom-nav a {
        flex: 1 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 4px !important;

        text-decoration: none !important;
    }


    .client-bottom-nav i {
        font-size: 15px !important;
    }


    .client-bottom-nav span {
        font-size: 9px !important;
    }

}

/* =================================
   DIET PAGE - FINAL MOBILE LAYOUT FIX
================================= */

@media (max-width: 767.98px) {

    /* Full application width */

    body[data-required-role="client"] .client-app {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* Header */

    body[data-required-role="client"] .client-mobile-header {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 16px !important;

        box-sizing: border-box !important;
    }


    /* Hide desktop sidebar completely */

    body[data-required-role="client"] .client-sidebar {
        display: none !important;

        width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* Main content */

    body[data-required-role="client"] .client-main {
        position: relative !important;

        left: 0 !important;

        right: auto !important;

        top: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;
    }


    /* Content wrapper */

    body[data-required-role="client"] .client-content {
        position: relative !important;

        left: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 24px 16px 95px !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* Page header */

    body[data-required-role="client"] .client-page-header {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 22px !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* Diet content */

    body[data-required-role="client"] .diet-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* Diet summary */

    body[data-required-role="client"] .diet-plan-summary {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 0 24px !important;

        box-sizing: border-box !important;
    }


    /* Bottom navigation */

    body[data-required-role="client"] .client-bottom-nav {
        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        margin: 0 !important;

        transform: none !important;
    }

}

/* =================================
   CLIENT MOBILE - FORCE SINGLE COLUMN
================================= */

@media (max-width: 767.98px) {

    body[data-required-role="client"] .client-app {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        left: 0 !important;

        right: 0 !important;

        transform: none !important;

        overflow-x: hidden !important;
    }


    /* =================================
       HEADER
    ================================= */

    body[data-required-role="client"] .client-mobile-header {

        display: flex !important;

        position: relative !important;

        width: 100% !important;

        height: 68px !important;

        margin: 0 !important;

        padding: 0 16px !important;

        box-sizing: border-box !important;

        left: 0 !important;

        right: 0 !important;

        top: 0 !important;

        transform: none !important;
    }


    /* =================================
       SIDEBAR
    ================================= */

    body[data-required-role="client"] .client-sidebar {

        display: none !important;
    }


    /* =================================
       MAIN
    ================================= */

    body[data-required-role="client"] .client-main {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        left: 0 !important;

        right: 0 !important;

        top: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =================================
       CONTENT
    ================================= */

    body[data-required-role="client"] .client-content {

        display: block !important;

        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 24px 16px 90px !important;

        box-sizing: border-box !important;

        left: 0 !important;

        right: 0 !important;

        transform: none !important;
    }


    /* =================================
       PAGE HEADER
    ================================= */

    body[data-required-role="client"] .client-page-header {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 24px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        text-align: left !important;
    }


    body[data-required-role="client"] .client-page-header h1 {

        margin: 4px 0 8px !important;

        font-size: 28px !important;

        line-height: 1.2 !important;
    }


    body[data-required-role="client"] .client-page-header p {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.5 !important;
    }


    /* =================================
       DIET CONTENT
    ================================= */

    body[data-required-role="client"] .diet-content {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    body[data-required-role="client"] .diet-plan-summary {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* =================================
       BOTTOM NAV
    ================================= */

    body[data-required-role="client"] .client-bottom-nav {

        display: flex !important;

        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100% !important;

        height: 68px !important;

        margin: 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        z-index: 9999 !important;

        transform: none !important;
    }

}

/* =================================
   DIET PAGE - DESKTOP LAYOUT FIX
================================= */

@media (min-width: 768px) {

    /* =================================
       CLIENT APP
    ================================= */

    body[data-required-role="client"] .client-app {
        width: 100% !important;

        min-height: 100vh !important;

        position: relative !important;
    }


    /* =================================
       DESKTOP SIDEBAR
    ================================= */

    body[data-required-role="client"] .client-sidebar {
        display: flex !important;

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        bottom: 0 !important;

        width: 240px !important;

        height: 100vh !important;

        flex-direction: column !important;

        background: #080b0a !important;

        z-index: 1000 !important;

        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    /* Sidebar logo */

    body[data-required-role="client"] .client-sidebar-logo {
        width: 100% !important;

        height: 100px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 20px !important;

        box-sizing: border-box !important;
    }


    body[data-required-role="client"] .client-sidebar-logo img {
        width: 145px !important;

        height: auto !important;

        max-width: 145px !important;

        max-height: 60px !important;

        object-fit: contain !important;

        display: block !important;
    }


    /* Sidebar navigation */

    body[data-required-role="client"] .client-sidebar nav {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 5px !important;

        padding: 20px 14px !important;

        box-sizing: border-box !important;
    }


    body[data-required-role="client"] .client-sidebar nav a {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        padding: 12px 14px !important;

        box-sizing: border-box !important;

        text-decoration: none !important;

        border-radius: 8px !important;
    }


    body[data-required-role="client"] .client-sidebar nav a i {
        width: 20px !important;

        flex-shrink: 0 !important;

        text-align: center !important;
    }


    body[data-required-role="client"] .client-sidebar nav a span {
        display: inline !important;

        white-space: nowrap !important;
    }


    /* =================================
       HIDE MOBILE HEADER
    ================================= */

    body[data-required-role="client"] .client-mobile-header {
        display: none !important;
    }


    /* =================================
       MAIN CONTENT
    ================================= */

    body[data-required-role="client"] .client-main {
        display: block !important;

        width: calc(100% - 240px) !important;

        min-height: 100vh !important;

        margin-left: 240px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        position: relative !important;
    }


    body[data-required-role="client"] .client-content {
        width: 100% !important;

        max-width: 1200px !important;

        margin: 0 auto !important;

        padding: 40px !important;

        box-sizing: border-box !important;
    }


    /* =================================
       PAGE HEADER
    ================================= */

    body[data-required-role="client"] .client-page-header {
        width: 100% !important;

        margin-bottom: 30px !important;
    }


    body[data-required-role="client"] .client-page-header h1 {
        margin: 5px 0 10px !important;
    }


    body[data-required-role="client"] .client-page-header p {
        max-width: 650px !important;

        margin: 0 !important;
    }


    /* =================================
       DIET CONTENT
    ================================= */

    body[data-required-role="client"] .diet-content {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    body[data-required-role="client"] .diet-plan-summary {
        width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* =================================
       HIDE MOBILE BOTTOM NAV
    ================================= */

    body[data-required-role="client"] .client-bottom-nav {
        display: none !important;
    }

}

/* =================================
   TODAY'S MEALS
================================= */

.diet-today-section {
    width: 100%;
}


.diet-section-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.diet-section-heading > div:first-child span {
    display: block;

    margin-bottom: 5px;

    color: #059669;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.diet-section-heading h2 {
    margin: 0;

    color: #111827;

    font-size: 22px;

    font-weight: 800;
}


.diet-day-date {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    background: #ecfdf5;

    color: #047857;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;
}


/* =================================
   MEAL CARD
================================= */

.diet-meal-card {
    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    margin-bottom: 13px;

    padding: 17px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.04);

    transition: 0.2s ease;
}


.diet-meal-card:hover {
    border-color: #a7f3d0;

    transform: translateY(-1px);
}


/* =================================
   MEAL ICON
================================= */

.diet-meal-icon {
    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ecfdf5;

    color: #059669;

    border-radius: 12px;

    font-size: 19px;
}


/* =================================
   MEAL CONTENT
================================= */

.diet-meal-content {
    flex: 1;

    min-width: 0;
}


.diet-meal-content > span {
    display: block;

    margin-bottom: 4px;

    color: #059669;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.diet-meal-content h3 {
    margin: 0;

    color: #111827;

    font-size: 15px;

    font-weight: 800;
}


.diet-meal-content p {
    margin: 4px 0 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.5;
}


/* =================================
   MEAL CHECK
================================= */

.diet-meal-check {
    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d1d5db;

    border-radius: 50%;

    color: #10b981;

    font-size: 13px;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 767.98px) {

    .diet-section-heading h2 {
        font-size: 20px;
    }


    .diet-meal-card {
        gap: 12px;

        padding: 14px;

        border-radius: 12px;
    }


    .diet-meal-icon {
        width: 42px;

        height: 42px;

        border-radius: 10px;

        font-size: 17px;
    }


    .diet-meal-content h3 {
        font-size: 14px;
    }


    .diet-meal-content p {
        font-size: 11px;
    }


    .diet-meal-check {
        width: 29px;

        height: 29px;

        font-size: 11px;
    }

}

/* =================================
   COMPLETED MEAL
================================= */

.diet-meal-check.completed {
    background: #10b981;

    border-color: #10b981;

    color: #ffffff;
}


.diet-meal-card:has(
    .diet-meal-check.completed
) {
    border-color: #a7f3d0;

    background: #f0fdf4;
}

/* =================================
   DAILY NUTRITION PROGRESS
================================= */

.diet-daily-progress {
    width: 100%;

    margin-bottom: 22px;

    padding: 16px 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 13px;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.04);
}


.diet-daily-progress-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}


.diet-daily-progress-top span {
    display: block;

    margin-bottom: 3px;

    color: #059669;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.diet-daily-progress-top strong {
    color: #111827;

    font-size: 14px;

    font-weight: 800;
}


.diet-daily-progress-percent {
    color: #047857;

    font-size: 20px;

    font-weight: 900;
}


.diet-progress-track {
    width: 100%;

    height: 7px;

    overflow: hidden;

    background: #e5e7eb;

    border-radius: 20px;
}


.diet-progress-bar {
    width: 0%;

    height: 100%;

    background: #10b981;

    border-radius: 20px;

    transition: width 0.25s ease;
}

/* =========================================================
   DIET MEAL TRACKING MODAL - LAYER FIX
   ========================================================= */

#dietMealTrackingModal {
    z-index: 1060 !important;
}

#dietMealTrackingModal .modal-dialog {
    position: relative;
    z-index: 1061 !important;
}

#dietMealTrackingModal .modal-content {
    position: relative;
    z-index: 1062 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* =====================================================
   FITIZEN CLIENT - PROGRESS PAGE
===================================================== */

.progress-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}


/* =====================================================
   PROGRESS SUMMARY
===================================================== */

.progress-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.progress-summary-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.progress-summary-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: #ecfdf5;
    color: #059669;

    font-size: 20px;
}

.progress-summary-card span {
    display: block;
    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #6b7280;
}

.progress-summary-card strong {
    display: block;

    font-size: 22px;
    font-weight: 700;
    color: #111827;
}


/* =====================================================
   PROGRESS CARD
===================================================== */

.progress-card {
    margin-bottom: 24px;
    padding: 24px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.progress-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.progress-card-header > div:first-child span {
    display: block;
    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #059669;
}

.progress-card-header h2 {
    margin: 0;

    font-size: 24px;
    font-weight: 700;
    color: #111827;
}


/* =====================================================
   PERIOD BUTTON
===================================================== */

.progress-period {
    display: flex;
    gap: 8px;
}

.progress-period button {
    padding: 8px 14px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;
    color: #374151;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.progress-period button.active {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}


/* =====================================================
   WEIGHT CHART
===================================================== */

.progress-chart-container {
    position: relative;
    width: 100%;
    height: 320px;
}

#weightChart {
    width: 100% !important;
    height: 100% !important;
}


/* =====================================================
   WORKOUT PERFORMANCE
===================================================== */

.progress-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.progress-performance-item {
    padding: 20px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;

    text-align: center;
}

.progress-performance-item span {
    display: block;
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #6b7280;
}

.progress-performance-item strong {
    display: block;

    font-size: 28px;
    font-weight: 700;
    color: #111827;
}


/* =====================================================
   RECENT ACTIVITY
===================================================== */

.recent-activities {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;

    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.progress-activity-item > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-activity-item strong {
    font-size: 14px;
    color: #111827;
}

.progress-activity-item span {
    font-size: 13px;
    color: #6b7280;
}

.progress-activity-item > div:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-activity-item > div:last-child span {
    padding: 5px 9px;

    background: #ecfdf5;
    border-radius: 6px;

    color: #047857;
    font-size: 12px;
    font-weight: 600;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.progress-empty-state {
    padding: 45px 20px;

    text-align: center;

    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 14px;
}

.progress-empty-state i {
    margin-bottom: 15px;

    font-size: 34px;
    color: #9ca3af;
}

.progress-empty-state h3 {
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 700;
    color: #374151;
}

.progress-empty-state p {
    max-width: 400px;
    margin: 0 auto;

    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .progress-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-performance-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .progress-content {
        padding: 0 14px 90px;
    }

    .progress-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .progress-summary-card {
        padding: 16px;
        gap: 11px;
        border-radius: 14px;
    }

    .progress-summary-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;

        font-size: 16px;
        border-radius: 10px;
    }

    .progress-summary-card span {
        font-size: 9px;
    }

    .progress-summary-card strong {
        font-size: 17px;
    }

    .progress-card {
        padding: 18px;
        margin-bottom: 16px;
        border-radius: 15px;
    }

    .progress-card-header {
        margin-bottom: 18px;
    }

    .progress-card-header h2 {
        font-size: 20px;
    }

    .progress-card-header > div:first-child span {
        font-size: 9px;
    }

    .progress-period button {
        padding: 6px 10px;
        font-size: 11px;
    }

    .progress-chart-container {
        height: 250px;
    }

    .progress-performance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .progress-performance-item {
        padding: 16px;
    }

    .progress-performance-item strong {
        font-size: 24px;
    }

    .progress-activity-item {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .progress-activity-item > div:last-child {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .progress-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .progress-summary-card {
        padding: 13px;
    }

    .progress-summary-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .progress-summary-card strong {
        font-size: 15px;
    }

    .progress-card {
        padding: 15px;
    }

    .progress-chart-container {
        height: 220px;
    }

}

/* =====================================================
   FITIZEN PROGRESS — ATHLETIC TYPOGRAPHY
===================================================== */

/* Main Progress heading */
.client-page-header h1 {
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    line-height: 0.95;
    color: #111827;
}

/* Small section label */
.client-page-header .client-section-label {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #059669;
    padding: 10px;
}


/* Header description */
.client-page-header p {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
    padding: 10px;
}

.client-page-header h1 {
    padding-left: 10px;
}


/* =====================================================
   SUMMARY NUMBERS
===================================================== */

.progress-summary-card span {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.progress-summary-card strong {
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -0.5px;
}


/* =====================================================
   FITNESS ICON
===================================================== */

.progress-summary-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;

    border-radius: 14px;

    background: #ecfdf5;
    color: #059669;

    font-size: 21px;
}


/* =====================================================
   CARD HEADINGS
===================================================== */

.progress-card-header h2 {
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.8px;
    text-transform: uppercase;
    line-height: 1;
    color: #111827;
}

.progress-card-header > div:first-child span {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #059669;
}


/* =====================================================
   PERIOD BUTTON
===================================================== */

.progress-period button {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =====================================================
   WORKOUT PERFORMANCE
===================================================== */

.progress-performance-item span {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.progress-performance-item strong {
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1px;
}


/* =====================================================
   RECENT ACTIVITY
===================================================== */

.progress-activity-item strong {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.progress-activity-item span {
    font-size: 12px;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.progress-empty-state h3 {
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-empty-state p {
    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .client-page-header h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .client-page-header .client-section-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .progress-summary-card strong {
        font-size: 22px;
    }

    .progress-card-header h2 {
        font-size: 23px;
    }

    .progress-performance-item strong {
        font-size: 30px;
    }
}

/* =====================================================
   DIET PERFORMANCE
===================================================== */

.progress-diet-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.progress-diet-item {
    padding: 18px 12px;

    text-align: center;

    background: #f8faf9;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.progress-diet-item span {
    display: block;

    margin-bottom: 8px;

    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;

    color: #6b7280;
}

.progress-diet-item strong {
    display: inline-block;

    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.5px;

    color: #111827;
}

.progress-diet-item small {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
}


/* Mobile */

@media (max-width: 768px) {

    .progress-diet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .progress-diet-item {
        padding: 16px 10px;
    }

    .progress-diet-item strong {
        font-size: 25px;
    }

}

/* =========================================
   RECENT FITNESS TIMELINE
========================================= */

.recent-timeline-item{
    display:flex;
    gap:14px;
    position:relative;
    padding:16px 0;
}

.recent-timeline-item:not(:last-child)::after{
    content:"";
    position:absolute;
    left:22px;
    top:54px;
    width:2px;
    height:calc(100% - 20px);
    background:#d1fae5;
}

.timeline-icon{
    width:44px;
    height:44px;
    min-width:44px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
}

.timeline-icon.diet{
    background:#dcfce7;
}

.timeline-icon.workout{
    background:#dbeafe;
}

.timeline-icon.activity{
    background:#fef3c7;
}

.timeline-content{
    flex:1;
}

.timeline-date{
    display:block;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#059669;

    margin-bottom:3px;
}

.timeline-content h4{
    margin:0;

    font-size:15px;
    font-weight:800;

    color:#1f2937;
}

.timeline-content p{
    margin:3px 0;

    font-size:13px;

    color:#6b7280;

    text-transform:capitalize;
}

.timeline-content small{
    font-size:11px;
    font-weight:700;

    color:#374151;
}

/* =========================================
   WEIGHT CHANGE
========================================= */

.weight-change {
    display: block;
    margin-top: 4px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.weight-loss {
    color: #059669;
}

.weight-gain {
    color: #d97706;
}

.weight-same {
    color: #9ca3af;
}

.progress-date-filter {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.date-filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.date-filter-group label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #059669;
}

.date-filter-group input {
    width: 98px;
    height: 32px;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    background: #ffffff;
    font-size: 10px;
    font-weight: 600;
    color: #111827;
    outline: none;
}

.date-filter-group input:focus {
    border-color: #059669;
}

@media (max-width: 768px) {
    .progress-date-filter {
        width: 100%;
        justify-content: space-between;
    }

    .date-filter-group {
        flex: 1;
    }

    .date-filter-group input {
        width: 100%;
    }
}

/* =================================
   ACTIVITY JOURNEY
================================= */

.activity-progression-card {
    overflow: hidden;
}

.progress-card-description {
    margin: 4px 0 0;
    max-width: 520px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}


/* =================================
   DATE RANGE
================================= */

.activity-date-filter {
    display: flex;
    gap: 6px;
    margin-top: 18px;
    padding: 4px;
    width: fit-content;
    background: #f1f5f9;
    border-radius: 10px;
}

.activity-range-btn {
    border: none;
    background: transparent;

    padding: 7px 11px;

    border-radius: 7px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;

    color: #64748b;

    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-range-btn:hover {
    color: #059669;
}

.activity-range-btn.active {
    background: #059669;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.2);
}


/* =================================
   CUSTOM DATE FILTER
================================= */

.activity-custom-date-filter {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.activity-date-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-date-group label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #059669;
}

.activity-date-group input {
    width: 120px;
    height: 32px;

    padding: 4px 7px;

    border: 1px solid #d1d5db;
    border-radius: 7px;

    background: #ffffff;

    font-size: 10px;
    font-weight: 600;
    color: #111827;

    outline: none;
}

.activity-date-group input:focus {
    border-color: #059669;
}


/* =================================
   METRIC SELECTOR
================================= */

.activity-metric-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    margin-top: 18px;
}

.activity-metric-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 40px;

    border: 1px solid #e5e7eb;
    border-radius: 9px;

    background: #ffffff;

    color: #64748b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;

    cursor: pointer;

    transition: all 0.2s ease;
}

.activity-metric-btn i {
    font-size: 12px;
}

.activity-metric-btn:hover {
    border-color: #a7f3d0;
    color: #059669;
}

.activity-metric-btn.active {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #059669;
}


/* =================================
   CHART
================================= */

.activity-progress-chart-container {
    position: relative;

    width: 100%;
    height: 240px;

    margin-top: 18px;

    padding: 12px;

    border-radius: 14px;

    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

#activityProgressChart {
    width: 100% !important;
    height: 100% !important;
}


/* =================================
   CHART SUMMARY
================================= */

.activity-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 12px;

    border-top: 1px solid #eef2f7;
    padding-top: 14px;
}

.activity-chart-summary > div {
    padding: 0 12px;
    border-right: 1px solid #eef2f7;
}

.activity-chart-summary > div:first-child {
    padding-left: 0;
}

.activity-chart-summary > div:last-child {
    border-right: none;
}

.activity-chart-summary span {
    display: block;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;

    color: #9ca3af;
}

.activity-chart-summary strong {
    display: block;

    margin-top: 4px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 20px;
    font-weight: 900;

    color: #111827;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 768px) {

    .activity-date-filter {
        width: 100%;
        justify-content: space-between;
    }

    .activity-range-btn {
        flex: 1;
        padding: 7px 5px;
        font-size: 8px;
    }

    .activity-metric-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-metric-btn {
        min-height: 38px;
    }

    .activity-progress-chart-container {
        height: 220px;
        padding: 8px;
    }

    .activity-chart-summary {
        gap: 0;
    }

    .activity-chart-summary > div {
        padding: 0 8px;
    }

    .activity-chart-summary strong {
        font-size: 17px;
    }

}

#activityMetricTrend {
    display: block;
    margin-top: 4px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.3px;

    color: #6b7280;
}

.activity-trend-positive {
    color: #059669 !important;
}

.activity-trend-negative {
    color: #d97706 !important;
}

.activity-trend-neutral {
    color: #9ca3af !important;
}

/* =========================================
   ACTIVITY TARGET TRACKER
========================================= */

.activity-target-section {
    margin-top: 18px;
    padding: 16px;

    border-radius: 16px;

    background: #f8fafc;
    border: 1px solid #e5e7eb;
}


/* HEADER */

.activity-target-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.activity-target-header span {
    display: block;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #059669;
}

.activity-target-header h3 {
    margin: 3px 0 0;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;

    color: #0f172a;
}


/* STATUS */

.activity-target-status {
    padding: 6px 9px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;

    background: #e5e7eb;
    color: #6b7280;
}


/* VALUES */

.activity-target-values {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
}

.activity-target-values span {
    display: block;

    margin-bottom: 4px;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #64748b;
}

.activity-target-values strong {
    display: block;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 20px;
    font-weight: 900;

    color: #0f172a;
}

.activity-target-arrow {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ecfdf5;
    color: #059669;

    font-size: 11px;
}


/* PROGRESS */

.activity-target-progress {
    margin-top: 6px;
}

.activity-target-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}

.activity-target-progress-top span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #64748b;
}

.activity-target-progress-top strong {
    font-size: 11px;
    font-weight: 900;

    color: #059669;
}


.activity-target-progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #e5e7eb;
}

.activity-target-progress-fill {
    height: 100%;

    border-radius: inherit;

    background: #059669;

    transition:
        width 0.4s ease;
}


/* MESSAGE */

.activity-target-message {
    margin-top: 10px;

    font-size: 10px;
    line-height: 1.5;

    color: #64748b;
}


/* =========================================
   STATUS STATES
========================================= */

.activity-target-status.achieved {
    background: #dcfce7;
    color: #15803d;
}

.activity-target-status.on-track {
    background: #dbeafe;
    color: #2563eb;
}

.activity-target-status.needs-focus {
    background: #fef3c7;
    color: #b45309;
}

.activity-target-status.neutral {
    background: #f1f5f9;
    color: #64748b;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .activity-target-section {
        padding: 14px;
    }

    .activity-target-header h3 {
        font-size: 17px;
    }

    .activity-target-values strong {
        font-size: 18px;
    }

}

/* =========================================
   TARGET PROGRESS - FINAL STRUCTURE
========================================= */

.activity-target-progress {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    margin-top: 8px !important;
}


/* Percentage row */

.target-progress-heading {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 0 7px 0 !important;
}


/* Progress track */

.activity-target-progress-track {
    width: 100% !important;
    height: 7px !important;

    display: block !important;

    margin: 0 !important;

    overflow: hidden;

    border-radius: 999px;

    background: #e5e7eb;
}


/* Progress fill */

.activity-target-progress-fill {
    display: block !important;

    height: 100% !important;

    margin: 0 !important;

    border-radius: 999px;

    background: #059669;

    transition: width 0.4s ease;
}


/* Message MUST be below the bar */

.activity-target-message {
    display: block !important;

    width: 100% !important;

    margin: 9px 0 0 0 !important;
    padding: 0 !important;

    clear: both !important;

    font-size: 9px !important;
    line-height: 1.4 !important;

    color: #64748b;
}

/* =========================================
   TARGET PROGRESS - CLEAN STRUCTURE
========================================= */

.activity-target-progress {
    width: 100% !important;
    display: block !important;
    margin-top: 12px !important;
}


/* HEADER */

.target-progress-heading {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;
}

.target-progress-heading span {
    display: block !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;

    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
}

.target-progress-heading strong {
    display: block !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: #059669 !important;
}


/* BAR */

.activity-target-progress-track {
    display: block !important;

    width: 100% !important;
    height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    border-radius: 999px;

    background: #e5e7eb;
}

.activity-target-progress-fill {
    display: block !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 999px;

    background: #059669;
}


/* MESSAGE */

.activity-target-message {
    display: block !important;

    width: 100% !important;

    margin: 9px 0 0 0 !important;
    padding: 0 !important;

    clear: both !important;

    font-size: 9px !important;
    line-height: 1.4 !important;

    color: #64748b !important;
}

/* =========================================
   TARGET TRACKER - USE FULL WIDTH
========================================= */

.activity-target-section {
    width: 100% !important;
}


/* AVERAGE → TARGET */

.activity-target-values {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        40px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 12px !important;
}


/* LEFT + RIGHT VALUE BLOCKS */

.activity-target-values > div:not(.activity-target-arrow) {
    width: 100% !important;
}

.activity-target-values > div:last-child {
    text-align: right !important;
}


/* ARROW */

.activity-target-arrow {
    justify-self: center !important;
}


/* PROGRESS */

.activity-target-progress {
    width: 100% !important;
}


/* MESSAGE */

.activity-target-message {
    width: 100% !important;
    max-width: none !important;
}

/* =========================================
   ACTIVITY CONSISTENCY
========================================= */

.activity-consistency-card {
    overflow: hidden;
}


/* =========================================
   CONSISTENCY SCORE
========================================= */

.consistency-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-top: 16px;
    padding: 18px 12px;

    border-radius: 16px;

    background: #ecfdf5;
    border: 1px solid #d1fae5;

    text-align: center;
}

.consistency-score strong {
    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 38px;
    line-height: 1;

    font-weight: 900;

    color: #059669;
}

.consistency-score span {
    margin-top: 5px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #047857;
}

.consistency-score small {
    margin-top: 7px;

    font-size: 9px;
    line-height: 1.4;

    color: #64748b;
}


/* =========================================
   DAYS
========================================= */

.consistency-days {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 6px;

    margin-top: 18px;
}

.consistency-day {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;
}

.consistency-day span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.4px;

    color: #9ca3af;
}

.consistency-day strong {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f5f9;

    font-size: 10px;
    font-weight: 900;

    color: #9ca3af;
}


/* ACTIVE DAY */

.consistency-day.active strong {
    background: #059669;
    color: #ffffff;
}


/* MISSED DAY */

.consistency-day.missed strong {
    background: #f1f5f9;
    color: #cbd5e1;
}


/* =========================================
   SUMMARY
========================================= */

.consistency-summary {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 18px;

    padding-top: 14px;

    border-top: 1px solid #eef2f7;
}

.consistency-summary > div {
    padding: 0 10px;

    border-right: 1px solid #eef2f7;
}

.consistency-summary > div:first-child {
    padding-left: 0;
}

.consistency-summary > div:last-child {
    border-right: none;
}

.consistency-summary span {
    display: block;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #9ca3af;
}

.consistency-summary strong {
    display: block;

    margin-top: 4px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 17px;
    font-weight: 900;

    color: #111827;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .consistency-score {
        padding: 16px 10px;
    }

    .consistency-score strong {
        font-size: 34px;
    }

    .consistency-days {
        gap: 3px;
    }

    .consistency-day strong {
        width: 26px;
        height: 26px;
    }

    .consistency-summary > div {
        padding: 0 7px;
    }

    .consistency-summary strong {
        font-size: 15px;
    }

}

/* =========================================
   CONSISTENCY DATE DISPLAY
========================================= */

.consistency-day span {
    min-height: 10px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        sans-serif;

    font-size: 8px;
    font-weight: 800;

    color: #64748b;
}

.consistency-day strong {
    font-size: 11px;
    font-weight: 900;
}

.consistency-day.active strong {
    font-size: 11px;
}

.consistency-day.missed strong {
    font-size: 11px;
}

/* =========================================
   PROGRESS CARD SPACING
========================================= */

.activity-consistency-card {
    margin-top: 18px !important;
}

/* =========================================
   ACTIVITY HISTORY
========================================= */

.activity-history-card {
    margin-top: 18px;
    overflow: hidden;
}


/* HEADER */

.activity-history-card .progress-card-header {
    margin-bottom: 16px;
}


/* HISTORY LIST */

.activity-history-list {
    display: flex;
    flex-direction: column;

    gap: 12px;
}


/* =========================================
   HISTORY ITEM
========================================= */

.activity-history-item {
    position: relative;

    padding: 14px;

    border-radius: 14px;

    background: #f8fafc;
    border: 1px solid #e5e7eb;
}


/* DATE */

.activity-history-date {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.activity-history-date strong {
    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 16px;
    font-weight: 900;

    color: #111827;
}

.activity-history-date span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;

    color: #059669;
}


/* =========================================
   METRICS
========================================= */

.activity-history-metrics {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}


.activity-history-metric {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px;

    border-radius: 10px;

    background: #ffffff;
    border: 1px solid #eef2f7;
}


.activity-history-metric-icon {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #ecfdf5;

    color: #059669;

    font-size: 11px;
}


.activity-history-metric-info {
    min-width: 0;
}


.activity-history-metric-info span {
    display: block;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.6px;

    color: #9ca3af;
}


.activity-history-metric-info strong {
    display: block;

    margin-top: 2px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 13px;
    font-weight: 900;

    color: #111827;
}


/* =========================================
   EMPTY STATE
========================================= */

.activity-history-empty {
    padding: 24px 14px;

    text-align: center;

    border-radius: 14px;

    background: #f8fafc;
    border: 1px dashed #d1d5db;
}

.activity-history-empty i {
    font-size: 22px;

    color: #059669;
}

.activity-history-empty h3 {
    margin: 8px 0 4px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 16px;
    font-weight: 900;

    color: #111827;
}

.activity-history-empty p {
    margin: 0;

    font-size: 9px;

    color: #64748b;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .activity-history-card {
        margin-top: 18px;
    }

    .activity-history-item {
        padding: 12px;
    }

    .activity-history-metrics {
        gap: 6px;
    }

    .activity-history-metric {
        padding: 8px;
    }

}

/* =========================================
   ACTIVITY HISTORY - INTERNAL SCROLL
========================================= */

.activity-history-list {
    max-height: 500px;
    overflow-y: auto;

    padding-right: 5px;

    /* Smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}


/* Slim scrollbar */

.activity-history-list::-webkit-scrollbar {
    width: 4px;
}

.activity-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.activity-history-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

/* =========================================
   ACTIVITY HISTORY - DAILY STATUS
========================================= */

.activity-history-date {
    gap: 10px;
}

.activity-history-date span {
    flex-shrink: 0;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.6px;

    white-space: nowrap;

    background: #ecfdf5;
    color: #059669;
}


/* GOOD DAY */

.activity-history-date span.good {
    background: #dcfce7;
    color: #15803d;
}


/* KEEP GOING */

.activity-history-date span.keep-going {
    background: #fef3c7;
    color: #b45309;
}


/* PARTIALLY TRACKED */

.activity-history-date span.partial {
    background: #f1f5f9;
    color: #64748b;
}

/* =================================
   ACTIVITY CHART - NO DATA
================================= */

.activity-chart-no-data {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px 20px;
}

.activity-chart-no-data i {
    font-size: 24px;
    margin-bottom: 10px;

    color: #059669;
}

.activity-chart-no-data strong {
    font-size: 13px;
    font-weight: 900;

    color: #111827;
}

.activity-chart-no-data span {
    margin-top: 5px;

    font-size: 9px;
    line-height: 1.4;

    color: #6b7280;
}

/* =================================
   WEIGHT CHART - NO DATA
================================= */

.weight-chart-no-data {
    min-height: 220px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px 20px;
}

.weight-chart-no-data i {
    font-size: 24px;
    margin-bottom: 10px;

    color: #059669;
}

.weight-chart-no-data strong {
    font-size: 13px;
    font-weight: 900;

    color: #111827;
}

.weight-chart-no-data span {
    margin-top: 5px;

    font-size: 9px;
    line-height: 1.4;

    color: #6b7280;
}

/* =================================
   PROFILE PAGE
================================= */

.profile-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.profile-main-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-avatar {
    width: 58px;
    height: 58px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
    background: #ecfdf5;
    color: #059669;

    font-size: 23px;
}

.profile-main-info {
    min-width: 0;
}

.profile-label,
.profile-card-header span {
    display: block;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

    color: #059669;
}

.profile-main-info h2 {
    margin: 4px 0 3px;

    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;

    color: #111827;
}

.profile-main-info p {
    margin: 0;

    font-size: 10px;
    color: #6b7280;

    overflow-wrap: anywhere;
}


/* =================================
   PROFILE CARD HEADER
================================= */

.profile-card-header {
    margin-bottom: 14px;
}

.profile-card-header h2 {
    margin: 4px 0 0;

    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;

    color: #111827;
}


/* =================================
   PROFILE INFORMATION GRID
================================= */

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.profile-info-item {
    min-width: 0;

    padding: 12px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #f8fafc;
}

.profile-info-item span {
    display: block;

    margin-bottom: 5px;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #64748b;
}

.profile-info-item strong {
    display: block;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;

    color: #111827;

    overflow-wrap: anywhere;
}


/* =================================
   PROFILE ACTIONS
================================= */

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.profile-action-btn {
    width: 100%;

    display: grid;
    grid-template-columns: 24px 1fr 16px;
    align-items: center;
    gap: 8px;

    padding: 13px 12px;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    background: #ffffff;
    color: #111827;

    font-size: 11px;
    font-weight: 800;

    text-align: left;
    cursor: pointer;
}

.profile-action-btn > i:first-child {
    color: #059669;
    font-size: 13px;
}

.profile-action-btn > i:last-child {
    color: #94a3b8;
    font-size: 9px;
}

.profile-action-btn.logout {
    color: #dc2626;
}

.profile-action-btn.logout > i:first-child {
    color: #dc2626;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 576px) {

    .profile-card {
        padding: 14px;
        margin-bottom: 12px;
    }

    .profile-main-card {
        gap: 12px;
    }

    .profile-avatar {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 21px;
    }

    .profile-main-info h2 {
        font-size: 18px;
    }

    .profile-card-header h2 {
        font-size: 17px;
    }
}