/* ===================== AgroFlow · Futuristic-Agro theme ===================== */
:root{
  --bg:#050f0a;
  --bg-2:#081810;
  --panel: rgba(18, 36, 27, 0.55);
  --panel-solid:#0e2018;
  --border: rgba(124,255,140,0.16);
  --border-strong: rgba(124,255,140,0.4);
  --primary:#7CFA6B;
  --primary-2:#45D97A;
  --cyan:#3DE6E0;
  --amber:#FFC24B;
  --purple:#B18CFF;
  --danger:#FF5D7A;
  --text-main:#EAFCEF;
  --text-muted:#8FB39B;
  --text-dim:#5C7A69;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-glow: 0 0 0 1px var(--border), 0 20px 40px -20px rgba(0,0,0,0.6);
  font-family:'Inter', -apple-system, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; height:100%;}
body{
  background: radial-gradient(ellipse 120% 60% at 50% -10%, #0d2a1a 0%, var(--bg) 55%), var(--bg);
  color:var(--text-main);
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,.brand-title,.hero-greet,.kpi-val{font-family:'Space Grotesk', 'Inter', sans-serif;}
button, input, select, textarea{font-family:inherit; color:inherit;}
button{cursor:pointer;}
::-webkit-scrollbar{display:none;}

/* ---------- background fx layer ---------- */
.bg-fx{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.grid-plane{
  position:absolute; inset:-50% -50%;
  background-image:
    linear-gradient(rgba(124,255,140,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,140,0.06) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(500px) rotateX(60deg);
  transform-origin:center top;
  opacity:0.5;
  animation: gridMove 14s linear infinite;
}
@keyframes gridMove{ from{background-position:0 0;} to{background-position:0 42px;} }
.glow{position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35;}
.glow-a{width:340px; height:340px; background:var(--primary); top:-120px; left:-80px; animation:float1 10s ease-in-out infinite;}
.glow-b{width:300px; height:300px; background:var(--cyan); bottom:120px; right:-100px; animation:float2 12s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,40px);}}
@keyframes float2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-25px,-30px);}}
.scanline{
  position:absolute; left:0; right:0; height:120px;
  background:linear-gradient(to bottom, rgba(124,255,140,0) 0%, rgba(124,255,140,0.05) 50%, rgba(124,255,140,0) 100%);
  animation: scan 7s linear infinite;
}
@keyframes scan{ 0%{top:-120px;} 100%{top:110%;} }

/* ---------- splash ---------- */
#splash{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  animation: autoHideSplash 1s ease forwards;
  animation-delay: 0.5s;
  pointer-events: none;
}
@keyframes autoHideSplash {
  0% { opacity: 1; visibility: visible; }
  80% { opacity: 0.1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; display: none !important; }
}
#splash.hide{ opacity:0; visibility:hidden; display:none !important; }
.splash-orb{width:88px; height:88px; border-radius:26px; overflow:hidden; box-shadow:0 0 40px rgba(124,255,140,0.45); animation:pulseOrb 2s ease-in-out infinite;}
.splash-orb img{width:100%; height:100%; display:block;}
@keyframes pulseOrb{0%,100%{transform:scale(1); box-shadow:0 0 30px rgba(124,255,140,0.35);} 50%{transform:scale(1.06); box-shadow:0 0 55px rgba(124,255,140,0.6);}}
.splash-title{font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; letter-spacing:3px; color:var(--text-main);}
.splash-title span{color:var(--primary);}
.splash-sub{font-size:11px; letter-spacing:2px; color:var(--text-dim);}
.dots i{animation:blink 1.4s infinite; font-style:normal;}
.dots i:nth-child(2){animation-delay:.2s;} .dots i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,100%{opacity:0;} 50%{opacity:1;}}
.splash-bar{width:180px; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-top:6px;}
.splash-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--cyan)); animation:loadBar 1.6s ease forwards;}
@keyframes loadBar{ to{width:100%;} }

/* ---------- app shell ---------- */
.app-shell{position:relative; z-index:1; max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; padding-bottom:90px;}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 14px;
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(16px);
  background:linear-gradient(to bottom, rgba(5,15,10,0.9), rgba(5,15,10,0.5));
}
.topbar-left{display:flex; align-items:center; gap:12px;}
.brand-mark{width:40px; height:40px; border-radius:12px; overflow:hidden; box-shadow:0 0 18px rgba(124,255,140,0.35); flex-shrink:0;}
.brand-mark img{width:100%; height:100%; display:block;}
.brand-title{font-size:17px; font-weight:700; letter-spacing:0.3px;}
.brand-sub{font-size:11.5px; color:var(--text-muted); margin-top:1px;}
.topbar-right{display:flex; align-items:center; gap:8px;}
.status-pill{
  display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:0.6px;
  color:var(--primary); background:rgba(124,255,140,0.1); border:1px solid var(--border-strong);
  padding:6px 10px; border-radius:20px;
}
.dot-live{width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary); animation:blink 1.6s infinite;}
.icon-btn{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--text-main); display:flex; align-items:center; justify-content:center; font-size:15px;
}

/* ---------- content / screens ---------- */
.content{flex:1; padding:4px 16px 20px;}
.screen{display:none; animation:fadeUp .35s ease;}
.screen.active{display:block;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ---------- login overlay ---------- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #050f0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-box {
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: #0e2018;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.9);
}

/* ---------- glass card base ---------- */
.glass-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glow);
  backdrop-filter:blur(14px);
  padding:18px;
  margin-bottom:16px;
}

/* ---------- hero ---------- */
.hero-card{
  background:linear-gradient(155deg, rgba(124,255,140,0.14), rgba(61,230,224,0.06) 60%, transparent);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:20px;
  margin:10px 0 18px;
  box-shadow:0 25px 50px -30px rgba(124,255,140,0.25), 0 0 0 1px var(--border);
  position:relative; overflow:hidden;
}
.hero-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.hero-greet{font-size:17px; font-weight:700;}
.hero-date{font-size:12px; color:var(--text-muted); margin-top:4px; text-transform:capitalize;}
.hero-weather{display:flex; align-items:center; gap:10px; text-align:right;}
.hero-weather i{font-size:26px; color:var(--amber);}
.hero-temp{font-size:20px; font-weight:700;}
.hero-weather-sub{font-size:10.5px; color:var(--text-muted);}
.hero-scan{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--border);
  display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-muted);
}
.hero-scan i{color:var(--cyan); font-size:15px;}
.hero-scan b{color:var(--primary); font-weight:700;}

/* ---------- kpi grid ---------- */
.kpi-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
.kpi-grid-3{grid-template-columns:1fr 1fr 1fr;}
.kpi-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px; position:relative; overflow:hidden;
}
.kpi-mini{padding:12px 8px; text-align:center;}
.kpi-mini .kpi-icon{margin:0 auto 6px;}
.kpi-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:10px;}
.kpi-green{background:rgba(124,255,140,0.14); color:var(--primary);}
.kpi-cyan{background:rgba(61,230,224,0.14); color:var(--cyan);}
.kpi-amber{background:rgba(255,194,75,0.14); color:var(--amber);}
.kpi-purple{background:rgba(177,140,255,0.14); color:var(--purple);}
.kpi-val{font-size:24px; font-weight:700; line-height:1;}
.kpi-val span{font-size:14px; color:var(--text-muted); font-weight:600;}
.kpi-label{font-size:11px; color:var(--text-muted); margin-top:4px;}

/* ---------- section head ---------- */
.section-head{display:flex; align-items:center; justify-content:space-between; margin:6px 2px 12px;}
.section-head h3{font-size:14.5px; margin:0; font-weight:600;}
.section-tag{font-size:10.5px; color:var(--text-dim); background:rgba(255,255,255,0.04); padding:4px 9px; border-radius:20px; border:1px solid var(--border);}

/* ---------- quick actions ---------- */
.quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px;}
.quick-btn{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; color:var(--text-muted); transition:.2s;
}
.quick-btn i{font-size:17px; color:var(--primary);}
.quick-btn:active{transform:scale(0.95); border-color:var(--border-strong);}

/* ---------- feed ---------- */
.feed{display:flex; flex-direction:column; gap:10px;}
.feed-item{
  display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 14px;
}
.feed-ico{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px;}
.feed-text{flex:1; font-size:12.5px;}
.feed-text b{font-weight:600;}
.feed-time{font-size:10.5px; color:var(--text-dim); white-space:nowrap;}

/* ---------- segmented control ---------- */
.segmented{display:flex; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:5px; margin:10px 0 16px;}
.seg-btn{flex:1; padding:9px 4px; border:none; background:transparent; color:var(--text-muted); border-radius:12px; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;}
.seg-btn.active{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#04170c; box-shadow:0 6px 16px -6px rgba(124,255,140,0.5);}
.inv-view{display:none;} .inv-view.active{display:block;}

/* ---------- chips ---------- */
.chips-scroll{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px;}
.chip{
  flex-shrink:0; padding:8px 14px; border-radius:20px; border:1px solid var(--border); background:var(--panel);
  color:var(--text-muted); font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px;
}
.chip.active{background:rgba(124,255,140,0.16); color:var(--primary); border-color:var(--border-strong);}

/* ---------- inventory list ---------- */
.list-container{display:flex; flex-direction:column; gap:10px;}
.inv-item{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:13px 14px;
}
.inv-item-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.inv-item-name{font-size:13.5px; font-weight:600;}
.inv-item-cat{font-size:10px; color:var(--text-dim);}
.inv-item-val{font-size:14px; font-weight:700; color:var(--primary);}
.inv-item-val.low{color:var(--danger);}
.bar-track{height:6px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden;}
.bar-fill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--primary),var(--cyan));}
.bar-fill.low{background:linear-gradient(90deg,#FF8A65,var(--danger));}

/* ---------- forms ---------- */
.form-card{display:flex; flex-direction:column; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:11.5px; color:var(--text-muted); font-weight:600; letter-spacing:.2px;}
.field input, .field select{
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; font-size:14px; color:var(--text-main); outline:none;
}
.field input:focus, .field select:focus{border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(124,255,140,0.12);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.balance-note{font-size:12px; color:var(--text-muted); background:rgba(61,230,224,0.08); border:1px dashed rgba(61,230,224,0.35); padding:8px 12px; border-radius:10px;}
.balance-note i{color:var(--cyan); margin-right:6px;}

.btn{border:none; border-radius:14px; padding:14px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px;}
.btn-in{background:linear-gradient(135deg,#3DE6E0,#2AA9C9); color:#03181c;}
.btn-out{background:linear-gradient(135deg,#FFC24B,#FF8A4B); color:#241000;}
.btn-primary-glow{
  width:100%; margin-top:14px; background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#04170c;
  box-shadow:0 10px 24px -8px rgba(124,255,140,0.55);
}
.btn:active{transform:scale(0.98);}

/* ---------- tasks ---------- */
.task-type-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 22px;}
.task-tile{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 10px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:12px; font-weight:600; color:var(--text-main);
  transition:.2s;
}
.task-tile:active{transform:scale(0.96); border-color:var(--border-strong);}
.tile-icon{width:46px; height:46px; border-radius:14px; background:rgba(124,255,140,0.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:19px;}
.task-tile:nth-child(2) .tile-icon{background:rgba(61,230,224,0.12); color:var(--cyan);}
.task-tile:nth-child(3) .tile-icon{background:rgba(255,194,75,0.12); color:var(--amber);}
.task-tile:nth-child(4) .tile-icon{background:rgba(177,140,255,0.12); color:var(--purple);}
.task-tile:nth-child(5) .tile-icon{background:rgba(255,93,122,0.12); color:var(--danger);}

.task-list{display:flex; flex-direction:column; gap:10px;}
.task-row{
  display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 14px;
}
.task-row-ico{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
.task-row-body{flex:1;}
.task-row-title{font-size:13px; font-weight:600;}
.task-row-sub{font-size:11px; color:var(--text-muted); margin-top:2px;}
.task-status{font-size:10px; font-weight:700; padding:4px 9px; border-radius:20px;}
.status-done{background:rgba(124,255,140,0.14); color:var(--primary);}
.status-progress{background:rgba(255,194,75,0.14); color:var(--amber);}

/* ---------- reports ---------- */
.summary-row{display:flex; gap:12px; margin-bottom:16px;}
.summary-chip{
  flex:1; text-align:center; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px;
}
.summary-chip span{display:block; font-size:20px; font-weight:700; color:var(--primary); font-family:'Space Grotesk',sans-serif;}
.summary-chip small{font-size:10.5px; color:var(--text-muted);}
.report-table{width:100%; border-collapse:collapse; font-size:11.5px;}
.report-table th{text-align:left; padding:12px 14px; color:var(--text-dim); font-weight:600; border-bottom:1px solid var(--border); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;}
.report-table td{padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.04);}
.report-table tr:last-child td{border-bottom:none;}

/* ---------- analytics ---------- */
.chart-card{padding:16px;}
.chart-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.chart-head h3{font-size:13.5px; margin:0; font-weight:600;}
.staff-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;}
.staff-avatar{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:62px;}
.staff-circle{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--cyan)); color:#04170c; font-weight:700; font-size:14px;
  border:2px solid rgba(255,255,255,0.15);
}
.staff-name{font-size:9.5px; color:var(--text-muted); text-align:center; line-height:1.2;}

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  max-width:480px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-around;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,20,14,0.85); backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
}
.nav-item{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text-dim); font-size:9.5px; font-weight:600; padding:4px 8px; flex:1;
}
.nav-item i{font-size:17px;}
.nav-item.active{color:var(--primary);}
.nav-fab{flex:0 0 auto; margin-top:-28px;}
.fab-circle{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#04170c; font-size:19px;
  box-shadow:0 10px 26px -6px rgba(124,255,140,0.65), 0 0 0 6px rgba(5,15,10,1);
}

/* ---------- toast ---------- */
#toast-container{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(90vw,420px);}
.toast{
  background:rgba(14,32,24,0.95); border:1px solid var(--border-strong); color:var(--text-main);
  padding:12px 16px; border-radius:14px; font-size:13px; display:flex; align-items:center; gap:10px;
  box-shadow:0 15px 30px -10px rgba(0,0,0,0.5); animation:toastIn .3s ease;
}
.toast i{color:var(--primary);}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,-10px) translateY(0);} to{opacity:1;}}

/* ---------- demo badge ---------- */
.demo-badge{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:15;
  background:rgba(255,194,75,0.14); border:1px solid rgba(255,194,75,0.4); color:var(--amber);
  font-size:10.5px; font-weight:600; padding:6px 12px; border-radius:20px; display:flex; align-items:center; gap:6px;
  pointer-events:none; white-space:nowrap;
}

@media (min-width:520px){
  .app-shell{border-left:1px solid var(--border); border-right:1px solid var(--border);}
}

/* ---------- ZZR & Report UI enhancements ---------- */
.id-tag {
  display: inline-block;
  font-family: monospace;
  font-size: 10px;
  background: rgba(124, 255, 140, 0.15);
  color: #7CFA6B;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 3px;
  border: 1px solid rgba(124, 255, 140, 0.3);
}

.zzr-summary-box {
  background: rgba(14, 32, 24, 0.85);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
}
.zzr-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zzr-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zzr-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  padding-bottom: 6px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
}
.zzr-summary-item:last-child {
  border-bottom: none;
}
.zzr-summary-val {
  font-weight: 700;
  color: #00ff88;
}

.report-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.btn-reset {
  flex: 1;
  background: rgba(255, 93, 122, 0.15);
  border: 1px solid rgba(255, 93, 122, 0.4);
  color: var(--danger);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-excel {
  flex: 1;
  background: linear-gradient(135deg, #107c41, #1f9a55);
  border: none;
  color: white;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(16, 124, 65, 0.4);
}

/* --- Wizard & Chips & Modals copied from Bot WebApp --- */
.steps-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.step-dot {
  height: 4px;
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}
.step-dot.active {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 11, 0.8);
  backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 2000;
}
.modal.active, .modal.show {
  display: flex;
}

.modal-content {
  background: #09120e;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 24px;
  border-top: 1px solid rgba(124,255,140,0.3);
  position: relative;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  color: var(--text-dim);
  cursor: pointer;
}

.date-helpers {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.date-chip, .w-chip {
  padding: 6px 12px;
  background: rgba(25, 30, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: #a0a0a0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-chip:active, .w-chip:active {
  transform: scale(0.95);
}

.date-chip:hover, .w-chip:hover {
  border-color: rgba(124, 255, 140, 0.4);
  color: #e0e0e0;
}

.date-chip.active, .w-chip.selected {
  background: rgba(124, 255, 140, 0.2);
  color: var(--primary);
  border-color: rgba(124, 255, 140, 0.5);
  box-shadow: 0 0 15px rgba(124, 255, 140, 0.15);
}

.chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.select-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: rgba(124,255,140,0.1);
  border: 1px solid rgba(124,255,140,0.3);
  color: var(--primary);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
  cursor: pointer;
}

/* Custom Styles for Bot layout compatibility */
.task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.tg-btn {
  background: linear-gradient(145deg, rgba(30, 40, 30, 0.7), rgba(15, 20, 15, 0.9));
  border: 1px solid rgba(124, 255, 140, 0.15);
  border-radius: 16px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-main);
}
.tg-btn:active {
  transform: scale(0.98);
  border-color: var(--primary);
}
.tg-icon {
  font-size: 22px;
  background: rgba(10, 15, 10, 0.6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary);
  border: 1px solid rgba(124, 255, 140, 0.2);
}
.tg-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.tg-attendance {
  background: linear-gradient(145deg, rgba(124, 255, 140, 0.15), rgba(15, 20, 15, 0.9));
  border-color: rgba(124, 255, 140, 0.4);
}

/* --- NEW ANALYTICS DASHBOARD STYLES --- */
.dash-header-controls {
  margin-bottom: 25px;
  background: linear-gradient(135deg, rgba(124, 255, 140, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(124, 255, 140, 0.2);
  position: relative;
  overflow: hidden;
}

.dash-header-controls::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.5;
}

.greet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.greet {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.live-clock {
  font-family: 'Space Grotesk', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  text-shadow: 0 0 10px rgba(124, 255, 140, 0.3);
  letter-spacing: 1px;
}

.date-large {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 5px;
  margin-bottom: 15px;
}

.analytics-selectors {
  display: flex;
  gap: 10px;
}

.analytics-selectors select {
  background: rgba(15, 23, 19, 0.8);
  border: 1px solid rgba(124, 255, 140, 0.3);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237CFF8C%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}

.analytics-grid .kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  min-height: 110px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.analytics-grid .kpi-card:active {
  transform: scale(0.98);
}

.analytics-grid .kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 10px;
}

.analytics-grid .kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  word-break: break-word;
}

.analytics-grid .kpi-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
}

.taxes-block {
  background: linear-gradient(180deg, rgba(30,40,35,0.7) 0%, rgba(15,23,19,0.9) 100%);
  border-radius: 16px;
}