/* ===== luvéa theme v2 — design only (no logic) ===== */
:root{
  --lv-bg:#F1F0EA; --lv-surface:#F8F7F2; --lv-white:#FFFFFF; --lv-border:#E6E4DA;
  --lv-text:#23241C; --lv-text2:#5E6150; --lv-muted:#9A9C8C;
  --lv-brand:#777D58; --lv-deep:#2A2C20; --lv-accent:#C9D36A; --lv-accent-soft:#E7EBC4;
}
html,body{background:var(--lv-bg)!important}
body{color:var(--lv-text);-webkit-font-smoothing:antialiased}
#root>.min-h-screen{background:transparent!important}

/* ---------- Desktop: sidebar -> top pill navigation ---------- */
@media (min-width:1024px){
  #root>.min-h-screen{flex-direction:column}
  #root aside{width:100%!important;min-height:0!important;background:transparent!important;border:0!important;
    display:flex!important;align-items:center;gap:20px;padding:16px 24px 6px!important;position:sticky;top:0;z-index:30;
    background:rgba(241,240,234,.96)!important}
  #root aside>a:first-child{margin:0!important;flex:none}
  #root aside>a:first-child img{width:auto!important;height:30px}
  #root aside nav{display:flex!important;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
  #root aside nav::-webkit-scrollbar{display:none}
  #root aside nav>*{margin:0!important}
  #root aside nav a{white-space:nowrap;padding:7px 11px!important;border-radius:999px!important;background:var(--lv-white)!important;
    border:1px solid var(--lv-border);color:var(--lv-text2)!important;font-size:13px!important;transition:.15s}
  #root aside nav a:hover{border-color:var(--lv-brand);color:var(--lv-text)!important}
  #root aside nav a.bg-\[\#777d58\],#root aside nav a[aria-current="page"]{background:var(--lv-deep)!important;border-color:var(--lv-deep);color:#fff!important;font-weight:600}
  #root aside nav a span{gap:7px!important}
  #root aside nav svg{width:15px;height:15px}

  /* greeting bar -> light, sits under nav */
  #root header.bg-\[\#777d58\]{background:transparent!important;color:var(--lv-text)!important}
  #root header.bg-\[\#777d58\] .text-white\/85{color:var(--lv-text2)!important}
  #root header.bg-\[\#777d58\] .rounded-full.bg-white{background:var(--lv-brand)!important;color:#fff!important}
  #root main.max-w-7xl, #root header>.max-w-7xl{max-width:1440px!important}
}
/* mobile header */
@media (max-width:1023px){
  #root header.bg-\[\#777d58\]{background:var(--lv-deep)!important}
  #root header .rounded-full.bg-white{background:var(--lv-accent)!important;color:var(--lv-deep)!important}
}

/* ---------- Generic surfaces ---------- */
#root main .bg-white.rounded-xl,#root main .bg-white.rounded-lg.border{background:var(--lv-surface)!important;border-color:var(--lv-border)!important;border-radius:24px!important}
#root main .bg-white.rounded-xl.hover\:shadow-sm:hover{box-shadow:0 14px 30px -18px rgba(40,44,16,.35)!important;transform:translateY(-1px)}
#root main .rounded-xl{transition:transform .15s,box-shadow .15s}
#root main h1.text-2xl{font-size:34px!important;font-weight:400!important;letter-spacing:-.8px;color:var(--lv-text)!important}
#root main h2.text-sm{font-size:15.5px!important;font-weight:600!important;color:var(--lv-text)!important}
#root main .border-b.border-gray-100{border-color:transparent!important;padding:18px 20px 6px!important}
#root main .divide-y>*{border:0!important}
#root main ul.divide-y{padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px}
#root main ul.divide-y>li{background:var(--lv-white);border:1px solid var(--lv-border)!important;border-radius:14px;transition:.15s}
#root main ul.divide-y>li:hover{border-color:var(--lv-brand)!important}
#root main p.text-center.text-gray-400{margin:8px 16px 16px;border:1px dashed var(--lv-border);border-radius:14px;background:var(--lv-white);color:var(--lv-text2)!important}
#root main button.bg-gray-900{background:var(--lv-deep)!important;border-radius:999px!important;padding:10px 20px!important}
#root main button.bg-gray-900:hover{background:#000!important}
#root main input,#root main select,#root main textarea{border-radius:10px}
#root .bg-\[\#777d58\]:not(nav a):not(header){background:var(--lv-deep)!important}

/* ---------- Dashboard bento (html[data-lv-route="/"]) ---------- */
html[data-lv-route="/"] #root main>div>h1{margin-bottom:22px!important}
html[data-lv-route="/"] #root main>div>h1::before{content:"luvéa / סקירה";display:block;font-size:13px;color:var(--lv-muted);letter-spacing:0;margin-bottom:4px}
@media (min-width:1024px){
  html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4{grid-template-columns:1.7fr 1fr 1fr 1fr!important;gap:14px!important}
}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>*>.rounded-xl,
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>.rounded-xl{padding:24px!important;min-height:210px;display:flex;flex-direction:column}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4 p.text-2xl{font-size:48px!important;font-weight:300!important;letter-spacing:-1.5px;line-height:1.05;margin-top:auto;padding-top:24px;color:inherit}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4 p.text-sm{font-size:15px!important;font-weight:600;color:inherit!important;opacity:.9}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4 p.text-yellow-600{color:var(--lv-text)!important}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4 p.text-yellow-600::after{content:"ממתינות";font-size:12px;font-weight:600;letter-spacing:0;background:var(--lv-accent);color:var(--lv-deep);padding:3px 10px;border-radius:999px;margin-inline-start:10px;vertical-align:middle}

/* hero (MRR) with orbs + blur glass */
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:first-child{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#F6F5EF,#EDECE3)!important;min-height:320px!important;padding:160px 28px 26px!important;color:var(--lv-text)}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:first-child::before{content:"";position:absolute;z-index:-2;inset:6px 0 auto 0;height:200px;
  background:
   radial-gradient(circle at 57% 30%,#FBFCE8 0,#D7DE8A 22px,#9AA24E 48px,transparent 50px),
   radial-gradient(circle at 44% 52%,#F1F4C8 0,#C9D36A 36px,#8A9340 70px,#5E6428 82px,transparent 84px),
   radial-gradient(circle at 63% 70%,#9FA67A 0,#4D5230 22px,#23261A 36px,transparent 38px),
   radial-gradient(circle at 30% 64%,#E7EBC4 0,#B7BF77 30px,#777D58 56px,transparent 58px),
   radial-gradient(circle at 52% 80%,#fff 0,#C9D36A 12px,#6D7433 26px,transparent 28px);}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:first-child::after{content:"";position:absolute;z-index:-1;inset:128px 12px 12px 12px;border-radius:20px;
  background:rgba(250,250,244,.55);backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 50px -20px rgba(60,64,30,.3)}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:first-child p.text-2xl{font-size:60px!important;padding-top:8px}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:first-child p.text-xs{color:var(--lv-text2)!important}

/* dark card: overdue payments */
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:nth-child(2)>.rounded-xl{background:var(--lv-deep)!important;border-color:var(--lv-deep)!important;color:#fff}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:nth-child(2)>.rounded-xl::after{content:"";display:block;height:6px;border-radius:6px;background:var(--lv-accent);margin-top:16px}

/* arrow chip on linked cards */
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>a>.rounded-xl{position:relative}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>a>.rounded-xl::before{content:"↗";position:absolute;inset-inline-end:18px;top:18px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;background:var(--lv-white);border:1px solid var(--lv-border);color:var(--lv-text)}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>:nth-child(2)>.rounded-xl::before{background:var(--lv-accent);border-color:var(--lv-accent);color:var(--lv-deep)}
html[data-lv-route="/"] #root main>div>.grid.lg\:grid-cols-4>a:hover>.rounded-xl::before{background:var(--lv-accent);border-color:var(--lv-accent)}
html[data-lv-route="/"] #root main>div>.grid.gap-6{gap:14px!important}

/* ---------- v2: side icon rail (activity log, appointments, settings) ---------- */
@media (min-width:1024px){
  #root>.min-h-screen>.flex-1{padding-inline-start:72px}
  #root aside nav a[href="/activity-log"],#root aside nav a[href="/appointments"],#root aside nav a[href="/settings"]{
    position:fixed;inset-inline-start:18px;width:44px;height:44px;padding:0!important;display:grid!important;place-items:center;z-index:40;
    background:var(--lv-white)!important;border:1px solid var(--lv-border);box-shadow:0 6px 16px -10px rgba(40,44,16,.35)}
  #root aside nav a[href="/activity-log"]{top:120px}
  #root aside nav a[href="/appointments"]{top:172px}
  #root aside nav a[href="/settings"]{top:224px}
  #root aside nav a[href="/activity-log"] span,#root aside nav a[href="/appointments"] span,#root aside nav a[href="/settings"] span{gap:0!important}
  #root aside nav a[href="/activity-log"] .whitespace-nowrap,#root aside nav a[href="/appointments"] .whitespace-nowrap,#root aside nav a[href="/settings"] .whitespace-nowrap{
    position:absolute;inset-inline-start:54px;top:50%;transform:translateY(-50%);background:var(--lv-deep);color:#fff;font-size:12px;padding:5px 10px;border-radius:8px;
    opacity:0;pointer-events:none;transition:opacity .15s}
  #root aside nav a[href="/activity-log"]:hover .whitespace-nowrap,#root aside nav a[href="/appointments"]:hover .whitespace-nowrap,#root aside nav a[href="/settings"]:hover .whitespace-nowrap{opacity:1}
  #root aside nav a[href="/activity-log"] svg,#root aside nav a[href="/appointments"] svg,#root aside nav a[href="/settings"] svg{width:18px;height:18px}
  #root aside nav a[href="/activity-log"][aria-current="page"],#root aside nav a[href="/appointments"][aria-current="page"],#root aside nav a[href="/settings"][aria-current="page"]{background:var(--lv-deep)!important;color:#fff!important}
}