/* Lekhdwar modern design system: shared tokens, motion and popup fix. Loaded last so it wins the cascade. */
:root{
  --lekh-radius-sm:10px;--lekh-radius-md:14px;--lekh-radius-lg:20px;--lekh-radius-xl:26px;
  --lekh-shadow-sm:0 2px 8px rgba(4,12,34,.06);
  --lekh-shadow-md:0 10px 28px rgba(4,12,34,.10);
  --lekh-shadow-lg:0 24px 60px rgba(4,12,34,.16);
  --lekh-ease:cubic-bezier(.4,0,.2,1);
  --lekh-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --lekh-fast:.15s;--lekh-med:.22s;--lekh-slow:.32s;
  --lekh-focus:0 0 0 3px rgba(0,150,255,.22);
}

/* ---- Global motion polish (safe, additive - no layout changes) ---- */
a,button,.btn,input,select,textarea,.card,.badge,.table tr,.sidebar nav a,.tabs a{
  transition:background-color var(--lekh-fast) var(--lekh-ease),color var(--lekh-fast) var(--lekh-ease),
    border-color var(--lekh-fast) var(--lekh-ease),box-shadow var(--lekh-med) var(--lekh-ease),
    transform var(--lekh-fast) var(--lekh-ease),opacity var(--lekh-fast) var(--lekh-ease);
}
.btn{border-radius:var(--lekh-radius-md);box-shadow:var(--lekh-shadow-sm)}
.btn:hover{box-shadow:var(--lekh-shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:var(--lekh-shadow-sm)}
.card{border-radius:var(--lekh-radius-lg);transition:box-shadow var(--lekh-med) var(--lekh-ease),transform var(--lekh-med) var(--lekh-ease)}
.card.hoverable:hover,a.card:hover{box-shadow:var(--lekh-shadow-lg);transform:translateY(-2px)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:none;box-shadow:var(--lekh-focus)
}
.sidebar nav a,.logout{border-radius:var(--lekh-radius-md)}
.sidebar nav a{position:relative}
.sidebar nav a.active{box-shadow:inset 3px 0 0 var(--accent, #0096ff)}
.table{border-radius:var(--lekh-radius-md)}
.table tr:hover td{background:#f5f9ff}
.badge{transition:transform var(--lekh-fast) var(--lekh-ease)}

/* ---- Universal smooth popup/modal behaviour ----
   Existing modals (.wa-number-modal, .pay-save-modal) and any new modal reusing this
   pattern (incl. the E-way Bill popup) get a real fade+scale on BOTH open and close,
   using only the .show class the JS already toggles - no JS changes required.
   Previously: display:none -> flex was an instant, un-eased jump with no close animation
   at all, which read as "laggy". Now opacity/transform transition both ways and the
   element is only removed from interaction/hit-testing after the fade completes. */
.wa-number-modal,.pay-save-modal,.lekh-modal{
  display:flex!important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--lekh-med) var(--lekh-ease),visibility 0s linear var(--lekh-med);
}
.wa-number-modal.show,.pay-save-modal.show,.lekh-modal.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity var(--lekh-med) var(--lekh-ease),visibility 0s linear 0s;
}
.wa-number-card,.pay-save-box,.lekh-modal-card{
  animation:none!important;
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:transform var(--lekh-slow) var(--lekh-ease-spring),opacity var(--lekh-med) var(--lekh-ease);
  border-radius:var(--lekh-radius-xl);
}
.wa-number-modal.show .wa-number-card,
.pay-save-modal.show .pay-save-box,
.lekh-modal.show .lekh-modal-card{
  transform:none;
  opacity:1;
}

/* Generic modal skeleton for new popups (e.g. E-way Bill) so they don't need bespoke CSS */
.lekh-modal{position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;background:rgba(2,8,23,.4);backdrop-filter:blur(5px);padding:20px}
.lekh-modal-card{width:min(440px,94vw);background:#fff;box-shadow:var(--lekh-shadow-lg);padding:26px;position:relative}
.lekh-modal-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:999px;background:#f1f5f9;color:#0f172a;font-size:22px;line-height:1;cursor:pointer}
.lekh-modal-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:24px;margin-bottom:12px}
.lekh-modal-card h2{margin:0 0 6px;color:#071120}
.lekh-modal-card p{margin:0 0 16px;color:#64748b;line-height:1.5}
.lekh-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}
@media(max-width:560px){.lekh-modal-card{padding:20px}.lekh-modal-actions{display:grid;grid-template-columns:1fr 1fr}.lekh-modal-actions .btn{width:100%}}

/* ---- Create Document hub: fix narrow/centered card on desktop ----
   .content became a column flex container in an earlier patch; without an explicit
   width the hub card was sizing to its own content instead of stretching to fill the
   available desktop width, leaving large empty gutters either side. */
@media(min-width:1101px){
  .create-menu-only{width:100%!important;align-self:stretch!important;justify-self:stretch!important}
}

/* ---- Document wizard: replace the instant step swap with a light fade/slide ----
   Next/Back previously also triggered the app's global "premium page transition"
   (logo sweep overlay) because they are plain <button> elements matched by its generic
   selector - that read as a page reload. Those buttons/step-pills now carry
   data-no-soft/data-no-loader to skip that overlay entirely; this transition is the
   real, lightweight replacement so switching steps still feels animated. */
.pro-invoice-form .form-section[data-wizard-title]{
  transition:opacity var(--lekh-med) var(--lekh-ease),transform var(--lekh-med) var(--lekh-ease)
}
.pro-invoice-form .form-section[data-wizard-title].wizard-entering{
  opacity:0;
  transform:translateY(10px)
}