/* SAHABAT GINJAL — Page Styles */

/* Splash */
.splash-page {
  height:100vh;height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFF 0%,var(--color-primary-lighter) 100%);
}
.splash-logo{animation:bounceIn 800ms cubic-bezier(.34,1.56,.64,1) forwards}
.splash-logo svg{width:80px;height:80px;color:var(--color-primary)}
.splash-title{font-family:var(--font-heading);font-size:28px;font-weight:800;color:var(--color-primary);margin-top:var(--space-lg);opacity:0;animation:fadeIn 600ms ease 400ms forwards}
.splash-subtitle{font-size:14px;color:var(--color-text-secondary);margin-top:var(--space-sm);opacity:0;animation:fadeIn 600ms ease 600ms forwards}
.splash-loader{margin-top:var(--space-3xl);width:120px;height:3px;background:var(--color-border);border-radius:2px;overflow:hidden;opacity:0;animation:fadeIn 600ms ease 800ms forwards}
.splash-loader-bar{height:100%;width:0;background:var(--color-primary);border-radius:2px;animation:loadBar 1.8s ease-in-out 900ms forwards}
@keyframes loadBar{to{width:100%}}

/* Onboarding / Welcome Page */
.welcome-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, #FFFFFF 0%, #F1FAF4 40%, #E2F3E7 100%);
}

.welcome-bg-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.welcome-bg-hill-1 {
  position: absolute;
  bottom: -15%;
  left: -20%;
  width: 140%;
  height: 110%;
  background: radial-gradient(circle at center, #A5D6A7 0%, #81C784 100%);
  border-radius: 50%;
  opacity: 0.45;
  transform: rotate(-6deg);
}

.welcome-bg-hill-2 {
  position: absolute;
  bottom: -25%;
  right: -25%;
  width: 150%;
  height: 110%;
  background: radial-gradient(circle at center, #C8E6C9 0%, #A5D6A7 100%);
  border-radius: 50%;
  transform: rotate(4deg);
}

.welcome-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  text-align: center;
}

.welcome-header {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounceIn 900ms cubic-bezier(.34,1.56,.64,1) forwards;
}

.welcome-logo-img {
  width: 220px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

.welcome-brand-mobile {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #2E7D32;
  letter-spacing: 4px;
  margin-top: 4px;
  text-transform: uppercase;
}

.welcome-slogan-box {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  z-index: 2;
}

.welcome-slogan {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: #1B5E20;
  line-height: 1.5;
  margin: 0;
}

.welcome-mascot-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-xs) 0;
  max-height: 380px;
  z-index: 2;
}

.welcome-mascot-img {
  width: auto;
  height: 100%;
  max-height: 280px;
  object-fit: contain;
  animation: welcomePulseScale 3.5s ease-in-out infinite;
}

@keyframes welcomePulseScale {
  0%, 100% { transform: scale(1.32); }
  50% { transform: scale(1.4); }
}

.welcome-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  z-index: 3;
}

.welcome-btn-masuk, .welcome-btn-daftar {
  border-radius: 28px !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(46,125,50,0.15);
  transition: all 0.3s ease;
}

.welcome-btn-masuk {
  background-color: #1B7A3D !important;
  border-color: #1B7A3D !important;
  color: #FFFFFF !important;
}

.welcome-btn-masuk:hover {
  background-color: #145D2E !important;
  border-color: #145D2E !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46,125,50,0.25);
}

.welcome-btn-daftar {
  background-color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  color: #1B7A3D !important;
}

.welcome-btn-daftar:hover {
  background-color: #F1FAF4 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46,125,50,0.25);
}

/* Auth Pages */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  padding: var(--space-xl) var(--space-xl);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo-img {
  width: 140px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  margin-bottom: 6px;
}

.auth-brand-mobile {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  color: #1B7A3D;
  letter-spacing: 3px;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
}
  background:linear-gradient(135deg,#E8F5EC 0%,#C8E6C9 100%);
  margin:0 auto var(--space-xl);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(27,122,61,0.1);
  overflow:hidden;
  animation:bounceIn 700ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.auth-mascot-img{width:110px;height:110px;object-fit:contain}

/* Brand Text */
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:var(--space-2xl);line-height:1.1}
.auth-brand-sahabat{font-family:var(--font-heading);font-size:26px;font-weight:800;color:var(--color-primary);letter-spacing:1px}
.auth-brand-ginjal{font-family:var(--font-heading);font-size:26px;font-weight:800;color:#E53935;letter-spacing:1px}
.auth-brand-mobile{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--color-text-primary);letter-spacing:3px;margin-top:2px}

/* Auth Title & Subtitle */
.auth-title{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-xs)}
.auth-subtitle{font-size:14px;color:var(--color-text-secondary)}

.auth-form{display:flex;flex-direction:column;gap:var(--space-xl);flex:1}
.auth-footer{text-align:center;padding:var(--space-2xl) 0;font-size:14px;color:var(--color-text-secondary)}
.auth-footer a{color:var(--color-primary);font-weight:600;cursor:pointer}
.password-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);cursor:pointer;background:none;border:none;padding:4px}

/* Dashboard */
.dashboard-page{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.dashboard-greeting{margin-bottom:var(--space-2xl);animation:slideInDown 500ms ease}
.dashboard-greeting-row{display:flex;align-items:flex-start;justify-content:space-between}
.dashboard-greeting h1{font-family:var(--font-heading);font-size:22px;font-weight:700}
.dashboard-greeting p{font-size:13px;color:var(--color-text-secondary);margin-top:4px}
.dashboard-bell{width:44px;height:44px;border-radius:50%;background:var(--color-primary-lighter);display:flex;align-items:center;justify-content:center;color:var(--color-primary);cursor:pointer}
.dashboard-bell:active{transform:scale(.9)}
.dashboard-section{margin-bottom:var(--space-2xl)}
.dashboard-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}
.dashboard-section-title{font-family:var(--font-heading);font-size:16px;font-weight:600}
.dashboard-section-link{font-size:13px;font-weight:600;color:var(--color-primary);cursor:pointer}
.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.summary-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-xs);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;cursor:pointer;transition:transform var(--transition-fast)}
.summary-card:active{transform:scale(.96)}
.summary-card-icon{font-size:24px}
.summary-card-label{font-size:11px;color:var(--color-text-secondary);font-weight:500;white-space:nowrap}
.summary-card-value{font-family:var(--font-heading);font-size:14px;font-weight:700;white-space:nowrap}
.featured-article{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition-fast)}
.featured-article:active{transform:scale(.98)}
.featured-article h4{font-family:var(--font-heading);font-size:15px;font-weight:600;margin-bottom:var(--space-sm)}
.featured-article p{font-size:13px;color:var(--color-text-secondary);line-height:1.5}
.featured-article .read-more{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--color-primary);margin-top:var(--space-md)}
.quick-access{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md)}
.quick-access-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);cursor:pointer;padding:var(--space-sm);border-radius:var(--radius-md);transition:transform var(--transition-fast)}
.quick-access-item:active{transform:scale(.92)}
.quick-access-icon{width:52px;height:52px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-green)}
.quick-access-label{font-size:11px;font-weight:500;color:var(--color-text-secondary);text-align:center;line-height:1.3}

/* Edukasi */
.edukasi-page{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.edukasi-page>h1{font-family:var(--font-heading);font-size:24px;font-weight:700;margin-bottom:var(--space-xl)}
.edukasi-search{margin-bottom:var(--space-lg)}
.edukasi-chips{margin-bottom:var(--space-xl)}
.article-list{display:flex;flex-direction:column;gap:var(--space-md)}
.article-card{display:flex;gap:var(--space-md);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition-fast)}
.article-card:active{transform:scale(.98)}
.article-card-thumb{width:80px;height:80px;border-radius:var(--radius-sm);background:var(--color-primary-lighter);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden}
.article-card-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.article-card-title{font-family:var(--font-heading);font-size:14px;font-weight:600;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card-meta{display:flex;align-items:center;gap:var(--space-sm)}
.article-card-time{font-size:12px;color:var(--color-text-muted)}

/* Catatan */
.catatan-page{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.catatan-page>h1{font-family:var(--font-heading);font-size:24px;font-weight:700;margin-bottom:var(--space-xl);text-align:center}
.date-picker-bar{display:flex;align-items:center;justify-content:space-between;background:var(--color-primary-lighter);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-xl)}
.date-picker-bar span{font-family:var(--font-heading);font-size:15px;font-weight:600;color:var(--color-primary-dark)}
.date-picker-btn{width:32px;height:32px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;color:var(--color-primary);cursor:pointer;border:none}
.date-picker-btn:active{transform:scale(.88)}
.tracker-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-md);border:1.5px solid var(--color-border)}
.tracker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}
.tracker-info{display:flex;align-items:center;gap:var(--space-md)}
.tracker-info-text h3{font-family:var(--font-heading);font-size:15px;font-weight:600}
.tracker-info-text p{font-size:14px;color:var(--color-text-secondary);margin-top:2px}
.tracker-btn{padding:8px 16px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:13px;font-weight:600;border:none;cursor:pointer;white-space:nowrap}
.tracker-btn:active{transform:scale(.94)}
.fluid-glasses{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--space-sm)}
.fluid-glass{width:32px;height:38px;border-radius:4px 4px 6px 6px;border:2px solid var(--color-accent-blue);cursor:pointer;position:relative;overflow:hidden;transition:all var(--transition-fast)}
.fluid-glass .glass-fill{position:absolute;bottom:0;left:0;right:0;background:var(--color-accent-blue);border-radius:0 0 4px 4px;transition:height 300ms ease;height:0}
.fluid-glass.filled .glass-fill{height:75%}
.fluid-glass:active{transform:scale(.88)}
.tracker-status{display:inline-flex;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600}
.tracker-status.normal{background:var(--color-primary-lighter);color:var(--color-primary)}
.tracker-status.high{background:#FDECEA;color:var(--color-accent-red)}
.med-list{margin-top:var(--space-md)}
.med-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--color-divider)}
.med-item:last-child{border-bottom:none}
.med-checkbox{width:22px;height:22px;border-radius:6px;border:2px solid var(--color-border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}
.med-checkbox.checked{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.med-details{flex:1}
.med-name{font-weight:600;font-size:14px}
.med-dose{font-size:12px;color:var(--color-text-secondary)}
.med-time{font-size:12px;color:var(--color-text-muted);font-weight:500}

/* Info Layanan */
.info-page{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.info-page>h1{font-family:var(--font-heading);font-size:22px;font-weight:700;margin-bottom:var(--space-xl)}
.info-menu-list{display:flex;flex-direction:column;gap:var(--space-md)}
.info-menu-card{display:flex;align-items:center;gap:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--transition-fast)}
.info-menu-card:active{transform:scale(.97)}
.info-menu-card .menu-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--color-primary-lighter);color:var(--color-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-menu-card .menu-text{flex:1}
.info-menu-card .menu-text h3{font-family:var(--font-heading);font-size:15px;font-weight:600}
.info-menu-card .menu-text p{font-size:13px;color:var(--color-text-secondary);margin-top:2px}
.info-menu-card .menu-chevron{color:var(--color-primary);flex-shrink:0}
.info-detail{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.info-detail-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}
.info-detail-header h2{font-family:var(--font-heading);font-size:18px;font-weight:600}
.info-back-btn{width:36px;height:36px;border-radius:50%;background:var(--color-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;box-shadow:var(--shadow-sm)}
.step-list{display:flex;flex-direction:column;gap:var(--space-md)}
.step-item{display:flex;gap:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm)}
.step-number{width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:14px;font-weight:700;flex-shrink:0}
.step-content h4{font-family:var(--font-heading);font-size:14px;font-weight:600;margin-bottom:4px}
.step-content p{font-size:13px;color:var(--color-text-secondary);line-height:1.5}
.staff-card{display:flex;align-items:center;gap:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--space-md)}
.staff-avatar{width:56px;height:56px;border-radius:50%;background:var(--color-primary-lighter);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.staff-info{flex:1}
.staff-name{font-family:var(--font-heading);font-size:15px;font-weight:600}
.staff-role{font-size:13px;color:var(--color-primary);font-weight:500;margin-top:2px}
.staff-schedule{font-size:12px;color:var(--color-text-secondary);margin-top:4px}

/* Profil */
.profil-page{padding:var(--space-2xl) var(--space-xl);padding-bottom:calc(var(--navbar-height) + var(--space-3xl));background:var(--color-bg);min-height:100vh}
.profil-card{background:linear-gradient(180deg,var(--color-primary-lighter) 0%,var(--color-surface) 100%);border-radius:var(--radius-xl);padding:var(--space-3xl) var(--space-xl);text-align:center;margin-bottom:var(--space-2xl);position:relative}
.profil-settings{position:absolute;top:var(--space-lg);right:var(--space-lg);color:var(--color-text-secondary);cursor:pointer}
.profil-avatar{width:88px;height:88px;border-radius:50%;border:3px solid var(--color-primary);background:var(--color-primary-lighter);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto var(--space-lg)}
.profil-name{font-family:var(--font-heading);font-size:20px;font-weight:700}
.profil-email{font-size:14px;color:var(--color-text-secondary);margin-top:4px}
.profil-phone{font-size:14px;color:var(--color-text-secondary);margin-top:2px}
.profil-menu{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.profil-menu-item{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--color-divider)}
.profil-menu-item:last-child{border-bottom:none}
.profil-menu-item:active{background:var(--color-bg)}
.profil-menu-item .pm-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profil-menu-item .pm-label{flex:1;font-size:15px;font-weight:500}
.profil-menu-item .pm-chevron{color:var(--color-text-muted)}
.profil-menu-item.danger .pm-label{color:var(--color-danger)}
.profil-menu-item.danger .pm-icon{background:#FDECEA;color:var(--color-danger)}

/* Article Detail */
.article-detail-content{padding:var(--space-lg) 0}
.article-detail-content h2{font-family:var(--font-heading);font-size:20px;font-weight:700;margin-bottom:var(--space-lg)}
.article-detail-meta{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}
.article-detail-body{font-size:15px;line-height:1.8;color:var(--color-text-secondary)}
.article-detail-body p{margin-bottom:var(--space-lg)}

/* Shared Trend Chart & Interactive Tab Selector */
.riwayat-tabs {
  display: flex;
  background: #E5EAE1;
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
  margin-bottom: var(--space-lg);
}
.riwayat-tab {
  flex: 1;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
}
.riwayat-tab.active {
  background: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.trend-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
  overflow: hidden;
}
.trend-header {
  margin-bottom: var(--space-md);
}
.trend-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.trend-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.trend-avg {
  color: var(--color-primary);
  font-weight: 700;
}
.chart-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 140px;
  padding: 10px 5px 5px;
  position: relative;
  border-bottom: 1.5px solid var(--color-divider);
}
.chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-divider);
  pointer-events: none;
}
.chart-grid-line.top { top: 25%; }
.chart-grid-line.middle { top: 50%; }
.chart-grid-line.bottom { top: 75%; }
.chart-bar-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}
.chart-bar {
  width: 16px;
  background: var(--color-primary-lighter);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.4s ease;
  position: relative;
}
.chart-bar.active {
  background: var(--color-primary);
}
.chart-bar-value {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 10;
}
.chart-bar-outer:hover .chart-bar-value {
  opacity: 1;
}
.chart-bar-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.chart-bar-label.active {
  color: var(--color-primary);
  font-weight: 700;
}

/* Detailed Health History Components */
.riwayat-container {
  padding: var(--space-2xl) var(--space-xl);
  padding-bottom: calc(var(--navbar-height) + var(--space-3xl));
  background: var(--color-bg);
  min-height: 100vh;
}
.history-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}
.riwayat-filter-select {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  -webkit-appearance: select;
  appearance: select;
}
.btn-lihat-pdf {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-lihat-pdf:active {
  transform: scale(0.95);
}
.riwayat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.riwayat-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform var(--transition-fast);
}
.riwayat-card:active {
  transform: scale(0.98);
}
.riwayat-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.riwayat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.riwayat-card-icon.cairan { background: #E3F2FD; color: var(--color-accent-blue); }
.riwayat-card-icon.tensi { background: #FFEBEE; color: var(--color-accent-red); }
.riwayat-card-icon.berat { background: #E8F5EC; color: var(--color-primary); }
.riwayat-card-info h4 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.riwayat-card-info p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.riwayat-status-pill {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.riwayat-status-pill.normal { background: var(--color-primary-lighter); color: var(--color-primary-dark); }
.riwayat-status-pill.kurang { background: #FFF3E0; color: var(--color-accent-orange); }
.riwayat-status-pill.tinggi { background: #FFEBEE; color: var(--color-accent-red); }
.riwayat-status-pill.turun { background: #E3F2FD; color: var(--color-accent-blue); }
.riwayat-status-pill.naik { background: #FFF3E0; color: #E65100; }
.riwayat-status-pill.stabil { background: var(--color-primary-lighter); color: var(--color-primary-dark); }

.motivation-card {
  position: relative;
  background: var(--color-primary-gradient);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-green);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.motivation-card-content {
  width: 70%;
  z-index: 2;
}
.motivation-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.motivation-card-text {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
}
.motivation-card-mascot {
  font-size: 80px;
  line-height: 1;
  position: absolute;
  right: -5px;
  bottom: -5px;
  opacity: 0.85;
  transform: rotate(-10deg);
  pointer-events: none;
  z-index: 1;
}