/* ============================================================
   style.css — דשבורד אוגדה 252
   ============================================================ */
:root {
  --cream:   #FAF8F4;
  --cream-2: #F2EDE3;
  --cream-3: #E6DDD0;
  --warm:    #8B6B3D;
  --warm-d:  #4A2E0E;
  --gold:    #C8973A;
  --gold-l:  #FDF3E2;
  --white:   #FFFFFF;
  --text:    #1A1208;
  --text-m:  #5C4A30;
  --text-s:  #9A8870;
  --green:   #22C55E;
  --yellow:  #EAB308;
  --red:     #EF4444;
  --sh1: 0 2px 16px rgba(74,46,14,.09);
  --sh2: 0 8px 40px rgba(74,46,14,.14);
  --sh3: 0 20px 60px rgba(74,46,14,.20);
  --r: 16px; --rl: 24px;
  --ease: cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Rubik',sans-serif;background:var(--cream);color:var(--text);direction:rtl;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--warm);border-radius:3px}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:0;right:0;left:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 2.5rem;
  background:rgba(74,46,14,.85);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 20px rgba(0,0,0,.2);
}
.nav-logo{display:flex;align-items:center;gap:.8rem}
.logo-img{width:36px;height:36px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.15);padding:2px}
.nav-brand-wrap{display:flex;flex-direction:column}
.nav-brand{font-weight:800;font-size:.95rem;color:var(--white);line-height:1}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-live{display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;color:var(--green)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.nav-time{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.nav-refresh{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:all .25s;color:rgba(255,255,255,.7)}
.nav-refresh svg{width:15px;height:15px}
.nav-refresh:hover{background:rgba(255,255,255,.2);transform:rotate(30deg)}

/* ── LANDING ── */
.landing{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.landing-bg{
  position:absolute;inset:0;
  background:linear-gradient(145deg,#1E0C04 0%,#3D2008 30%,#6B3D18 60%,#9A6030 85%,#C09050 100%);
}
.landing-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:160px;
}
.landing-overlay{
  position:absolute;bottom:0;right:0;left:0;height:200px;z-index:2;
  background:linear-gradient(to bottom,transparent,var(--cream));
}

.landing-content{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:center;
  gap:2.5rem;padding:7rem 2rem 6rem;
  width:100%;max-width:900px;margin:0 auto;text-align:center;
}

/* Logo with rings */
.landing-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.landing-logo{
  width:130px;height:130px;object-fit:contain;border-radius:50%;
  background:rgba(255,255,255,.93);padding:8px;position:relative;z-index:2;
  box-shadow:0 8px 44px rgba(0,0,0,.25),0 0 0 4px rgba(255,255,255,.2);
  animation:logoPop .85s .2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes logoPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.landing-logo-glow{
  position:absolute;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,154,60,.35) 0%,transparent 70%);
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:1}}
.landing-ring{
  position:absolute;width:180px;height:180px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(transparent,transparent) padding-box,
    conic-gradient(rgba(196,154,60,0) 0%,rgba(196,154,60,.85) 20%,rgba(255,220,120,1) 35%,rgba(196,154,60,.85) 50%,rgba(196,154,60,0) 70%,rgba(196,154,60,0) 100%) border-box;
  animation:spinRing 6s linear infinite;
}
.landing-ring-2{
  position:absolute;width:200px;height:200px;border-radius:50%;
  border:1.5px solid transparent;
  background:linear-gradient(transparent,transparent) padding-box,
    conic-gradient(rgba(196,154,60,0) 0%,rgba(196,154,60,.3) 40%,rgba(255,220,120,.5) 50%,rgba(196,154,60,.3) 60%,rgba(196,154,60,0) 80%) border-box;
  animation:spinRing 10s linear infinite reverse;
}
@keyframes spinRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Text */
.landing-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.9);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;padding:.3rem .9rem;border-radius:100px;
  text-transform:uppercase;animation:fadeUp .7s .4s var(--ease) both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.landing-title{
  font-size:clamp(2.8rem,7vw,5rem);font-weight:900;color:var(--white);
  line-height:1.05;letter-spacing:-.02em;
  animation:fadeUp .7s .5s var(--ease) both;
}
.landing-sub{
  color:rgba(255,255,255,.6);font-size:clamp(.9rem,2vw,1.05rem);font-weight:300;
  animation:fadeUp .7s .6s var(--ease) both;
}

/* Dashboard selection cards */
.landing-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  width:100%;animation:fadeUp .7s .7s var(--ease) both;
}
.landing-card{
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:var(--rl);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;
  text-align:right;
  transition:all .3s var(--ease);
  cursor:pointer;color:var(--white);
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.landing-card.active{
  background:rgba(200,151,58,.18);
  border-color:rgba(200,151,58,.5);
  box-shadow:0 0 30px rgba(200,151,58,.15);
}
.landing-card.active:hover{
  background:rgba(200,151,58,.25);
  border-color:rgba(200,151,58,.7);
  transform:translateY(-4px);
  box-shadow:0 8px 40px rgba(200,151,58,.2);
}
.landing-card.soon{cursor:default;opacity:.5}
.landing-card-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.landing-card-icon svg{width:22px;height:22px;color:var(--white)}
.landing-card.active .landing-card-icon{background:rgba(200,151,58,.25)}
.landing-card-text{display:flex;flex-direction:column;gap:.25rem;flex:1;align-items:flex-end}
.landing-card-title{font-size:1rem;font-weight:700;color:var(--white)}
.landing-card-sub{font-size:.72rem;color:rgba(255,255,255,.55)}
.landing-card-arrow{
  width:32px;height:32px;border-radius:50%;
  background:rgba(200,151,58,.3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;align-self:flex-end;
}
.landing-card-arrow svg{width:16px;height:16px;color:#F5D090}
.landing-card-badge{
  font-size:.68rem;font-weight:700;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);
  padding:.2rem .7rem;border-radius:100px;
  letter-spacing:.1em;text-transform:uppercase;
  align-self:flex-end;
}

/* Scroll hint */
.landing-scroll{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  color:rgba(255,255,255,.4);font-size:.72rem;letter-spacing:.12em;
  cursor:pointer;transition:color .25s;
  animation:fadeUp .7s .9s var(--ease) both;
}
.landing-scroll:hover{color:rgba(255,255,255,.7)}
.landing-scroll svg{width:20px;height:20px;animation:bounceY 2.5s infinite}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── DB SECTION ── */
.db-section{padding:4rem 2rem 5rem;max-width:1240px;margin:0 auto}

.db-section-header{
  background:var(--white);
  border-radius:var(--rl);
  box-shadow:var(--sh1);
  border:1.5px solid var(--cream-3);
  margin-bottom:2rem;padding:1.25rem 1.75rem;
}
.db-section-header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.db-section-title-wrap{display:flex;align-items:center;gap:.75rem}
.db-section-dot{width:10px;height:10px;border-radius:50%;background:var(--green);animation:livePulse 1.8s ease-in-out infinite}
.db-section-title{font-size:1.4rem;font-weight:800;color:var(--warm-d)}
.db-section-meta{display:flex;align-items:center;gap:1rem}
.db-section-meta span{font-size:.78rem;color:var(--text-s)}
.db-refresh-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--gold-l);border:1px solid rgba(200,151,58,.3);
  color:var(--gold);font-size:.78rem;font-weight:700;
  padding:.4rem 1rem;border-radius:100px;
  transition:background .25s,transform .25s;
}
.db-refresh-btn svg{width:14px;height:14px}
.db-refresh-btn:hover{background:rgba(200,151,58,.2);transform:rotate(20deg)}

/* Loading / Error */
.db-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:5rem 0;color:var(--text-s)}
.db-spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(200,151,58,.18);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.db-error{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:3rem;text-align:center;
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);
  border-radius:var(--rl);color:#DC2626;margin:2rem auto;max-width:480px;
}
.db-err-btn{background:var(--red);color:#fff;padding:.5rem 1.5rem;border-radius:100px;font-size:.82rem;font-weight:600;transition:filter .25s}
.db-err-btn:hover{filter:brightness(1.1)}

/* ── GRID ── */
.db-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}

/* ── CARD ── */
.db-card{
  background:var(--white);border-radius:var(--rl);
  box-shadow:var(--sh1);border:1.5px solid var(--cream-3);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
  animation:cardIn .5s var(--ease) both;
}
.db-card:hover{transform:translateY(-5px);box-shadow:var(--sh2);border-color:rgba(200,151,58,.25)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.db-card-stripe{height:5px;background:linear-gradient(90deg,var(--card-col-a),var(--card-col-b))}
.db-card-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem .7rem}
.db-card-title{font-size:1.4rem;font-weight:800;color:var(--card-col-a);letter-spacing:.04em}
.db-card-icon{width:40px;height:40px;border-radius:11px;background:var(--card-bg-light);display:flex;align-items:center;justify-content:center}
.db-card-icon svg{width:20px;height:20px;color:var(--card-col-a)}
.db-card-body{padding:0 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.85rem}

/* Circle rows */
.db-circle-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 1rem;border-radius:var(--r);
  background:var(--cream);border:1px solid var(--cream-3);
  transition:background .25s;
}
.db-circle-row:hover{background:var(--cream-2)}
.db-ring-wrap{position:relative;flex-shrink:0;width:62px;height:62px}
.db-ring-svg{width:62px;height:62px}
.db-ring-track{fill:none;stroke:rgba(0,0,0,.06);stroke-width:6}
.db-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transform-origin:center;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.db-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.db-ring-pct{font-size:.75rem;font-weight:800;color:var(--text);line-height:1}
.db-ring-sub{font-size:.5rem;color:var(--text-s);line-height:1.3;text-align:center}
.db-circle-info{flex:1;display:flex;flex-direction:column;gap:.18rem}
.db-circle-name{font-size:.7rem;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.08em}
.db-circle-val{font-size:1rem;font-weight:800;color:var(--text);line-height:1;direction:ltr;text-align:right}
.db-circle-detail{font-size:.65rem;color:var(--text-s)}

/* Pie row */
.db-pie-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 1rem;border-radius:var(--r);
  background:linear-gradient(135deg,var(--cream),var(--cream-2));
  border:1px solid var(--cream-3);
}
.db-pie-wrap{position:relative;flex-shrink:0;width:62px;height:62px}
.db-pie-svg{width:62px;height:62px}
.db-pie-legend{flex:1;display:flex;flex-direction:column;gap:.28rem}
.db-pie-name{font-size:.7rem;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.1rem}
.db-pie-legend-row{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--text-m)}
.db-pie-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.db-pie-num{font-weight:800;color:var(--text);font-size:.8rem;min-width:18px}

/* Legend */
.db-legend{display:flex;justify-content:center;align-items:center;gap:2rem;margin-top:1.75rem;flex-wrap:wrap}
.db-legend-item{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--text-s)}
.db-legend-dot{width:9px;height:9px;border-radius:50%}
.db-legend-dot.green{background:var(--green)}
.db-legend-dot.yellow{background:var(--yellow)}
.db-legend-dot.red{background:var(--red)}

/* Footer */
.db-footer{background:var(--warm-d);padding:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;color:rgba(255,255,255,.8);font-size:.85rem;font-weight:600}
.db-footer-logo{width:36px;height:36px;object-fit:contain;border-radius:50%;background:rgba(255,255,255,.1);padding:3px}
.db-footer-sub{font-size:.68rem;color:rgba(255,255,255,.3)}

/* ── RESPONSIVE ── */
@media(max-width:1000px){.db-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .landing-cards{grid-template-columns:1fr}
  .db-grid{grid-template-columns:1fr}
  .navbar{padding:.75rem 1.25rem}
  .nav-time{display:none}
  .db-section{padding:3rem 1.25rem 4rem}
}
@media(max-width:480px){
  .landing-title{font-size:2.5rem}
  .db-section-header-inner{flex-direction:column;align-items:flex-start}
}

/* ══════════════════════════════════════════
   CHART SECTION
══════════════════════════════════════════ */
.chart-section {
  background: var(--cream-2);
  padding: 3rem 2rem 5rem;
}
.chart-container {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--rl);
  box-shadow: var(--sh2);
  border: 1.5px solid var(--cream-3);
  overflow: hidden;
}

/* Header */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1.5px solid var(--cream-2);
  background: var(--cream);
}
.chart-title-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.chart-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--warm-d);
}

/* Tabs */
.chart-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.chart-controls-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-s);
}
.chart-tabs {
  display: flex;
  background: var(--cream-2);
  border-radius: 100px;
  padding: 3px;
  gap: 3px;
  border: 1.5px solid var(--cream-3);
}
.chart-tab {
  font-family: 'Rubik', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-m);
  padding: .45rem 1.1rem;
  border-radius: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.chart-tab:hover { color: var(--warm-d); background: rgba(0,0,0,.04); }
.chart-tab.active {
  background: var(--warm-d);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(74,46,14,.25);
}

/* Chart wrap */
.chart-wrap {
  padding: 2rem 2rem 1rem;
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  color: var(--text-s);
  font-size: .85rem;
}
#mainChart {
  width: 100% !important;
  max-height: 380px;
}

/* Legend */
.chart-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: 1rem 2rem 1.75rem;
  border-top: 1.5px solid var(--cream-2);
  background: var(--cream);
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--text-s);
}
.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-legend-dot.red-dot-outline {
  background: #fff;
  border: 2.5px solid #EF4444;
  width: 11px;
  height: 11px;
}

/* Responsive */
@media(max-width:720px) {
  .chart-header { flex-direction: column; align-items: flex-start; }
  .chart-wrap { padding: 1.25rem 1rem .75rem; }
  .chart-tab { font-size: .72rem; padding: .4rem .85rem; }
  .chart-legend { gap: 1rem; }
}