/* ═══════════════════════════════════════════════════════════════════════
   LEKHDWAR PREMIUM REDESIGN — visual-only layer, loaded last.
   Phase 1: shared shell (sidebar/topbar/buttons/cards/tables/forms/modals/
   auth) + flagship pages (Dashboard, Create Document wizard, Documents list).

   Rules this file follows:
   - Pure CSS. No markup, JS or PHP behaviour is touched anywhere else.
   - Every selector targets classes/attributes that already exist and are
     read by app.js / inline page scripts — nothing here is renamed.
   - Reuses the brand tokens already shipped in customize/02_theme/
     lekhdwar-theme.css (--accent/--brand) and assets/css/91's --lekh-*
     tokens so per-client re-branding keeps working untouched.
   - Every rule has a light-mode value and, where the base styles differ
     for body.app-theme-dark, a dark-mode companion.
   - Decorative motion is wrapped so prefers-reduced-motion:reduce removes it.
   ═══════════════════════════════════════════════════════════════════════ */

/* No external font @import here on purpose: an @import is render-blocking and
   this app already ships an 'Inter' fallback chain (01-base.css) plus its own
   Google Fonts load on the dashboard — adding a second blocking request here
   would fight the "lightweight" goal. We lean on the existing system-font
   fallback (Segoe UI / Roboto / Arial) which reads just as clean. */

:root{
  /* ---- premium extension tokens (namespaced --lpx- to avoid collisions) ---- */
  --lpx-navy-1:var(--lk-deep,#020817);
  --lpx-navy-2:var(--lk-navy,#071225);
  --lpx-navy-3:var(--lk-navy-2,#0b1f4d);
  --lpx-navy-4:var(--lk-navy-3,#123a74);
  --lpx-orange-1:var(--lk-orange,#ff8b1a);
  --lpx-orange-2:var(--lk-orange-2,#ffb15c);
  --lpx-accent:var(--accent,var(--lpx-orange-1));

  --lpx-glass-bg:rgba(255,255,255,.72);
  --lpx-glass-border:rgba(255,255,255,.55);
  --lpx-glass-blur:20px;

  --lpx-r-sm:12px;--lpx-r-md:16px;--lpx-r-lg:22px;--lpx-r-xl:28px;--lpx-r-pill:999px;

  --lpx-sh-1:0 2px 10px rgba(7,18,37,.05);
  --lpx-sh-2:0 12px 30px rgba(7,18,37,.09);
  --lpx-sh-3:0 26px 64px rgba(7,18,37,.16);
  --lpx-sh-glow:0 10px 26px rgba(255,139,26,.24);

  --lpx-ease:cubic-bezier(.22,1,.36,1);
  --lpx-spring:cubic-bezier(.34,1.56,.64,1);
  --lpx-fast:.16s;--lpx-med:.26s;--lpx-slow:.42s;

  --lpx-space-1:4px;--lpx-space-2:8px;--lpx-space-3:12px;--lpx-space-4:16px;
  --lpx-space-5:24px;--lpx-space-6:32px;--lpx-space-7:48px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Typography ─────────────────────────────────────────────────────── */
html,body{font-family:'Inter',Inter,Segoe UI,Roboto,Arial,sans-serif}
body{line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:800;letter-spacing:-.01em}
.card h1,.card h2,.card h3,.lkd-card-header h2,.section-title h2,.topbar h1{font-weight:800}
.muted,.lkd-muted,.lkd-sub{line-height:1.6}
::selection{background:rgba(255,139,26,.28);color:#0b1426}

/* ── Universal focus ring (a11y) ────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(255,139,26,.28),0 0 0 5px rgba(11,20,38,.10)!important;
  border-radius:var(--lpx-r-sm);
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--lpx-accent)}

/* ── Scrollbars (webkit) ─────────────────────────────────────────────── */
.ip-mobile-menu-panel::-webkit-scrollbar,.ip-nav-dropdown::-webkit-scrollbar{width:8px}
.ip-mobile-menu-panel::-webkit-scrollbar-thumb{background:rgba(255,139,26,.45);border-radius:99px}

/* ═══════════════════════════════════════════════════════════════════════
   SURFACES — cards, panels, paper. Elevation scale unified across the
   two parallel component systems (.card / .lkd-card / .doc-hub-card).
   ═══════════════════════════════════════════════════════════════════════ */
.card,.lkd-card,.lkd-stat-card,.lkd-kpi-card,.lkd-plan-card,.lkd-doc-card,
.lkd-crm-hero,.doc-hub-card,.doc-hub-section,.pricing-card,.login-card,
.userbox,.mini-stat,.purchase-item-card,.amount-pill,.settings-sticky-head{
  transition:box-shadow var(--lpx-med) var(--lpx-ease),transform var(--lpx-med) var(--lpx-ease),border-color var(--lpx-med) var(--lpx-ease);
}
.card.card,.lkd-card.lkd-card,.userbox.userbox{
  box-shadow:var(--lpx-sh-2)!important;
  border-color:rgba(219,229,243,.9)!important;
  position:relative;
}
.card::before,.doc-hub-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  pointer-events:none;
}
.card.hoverable:hover,a.card:hover,.lkd-doc-card:hover,.doc-hub-card:hover,.lkd-stat-card:hover,.lkd-kpi-card:hover{
  box-shadow:var(--lpx-sh-3)!important;
}
.stat:after{filter:blur(2px)}

/* Printable A4/thermal papers are excluded from the glass treatment on purpose */
.paper:not(.thermal){box-shadow:0 24px 60px rgba(15,23,42,.14)}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR / FLOATING ISLAND NAV — extra depth & motion on top of file 71
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar.lekhdwar-floating-island-shell,
body:not(.auth):not(.public-page) .app>.sidebar.lekhdwar-floating-island-shell{
  backdrop-filter:blur(26px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(140%)!important;
}
.ip-nav-groups>a,.ip-nav-group>summary,.logout{
  transition:transform var(--lpx-fast) var(--lpx-spring),background var(--lpx-med) var(--lpx-ease),
    box-shadow var(--lpx-med) var(--lpx-ease),border-color var(--lpx-med) var(--lpx-ease)!important;
}
.ip-nav-groups>a.active,.ip-nav-group.is-active>summary{
  box-shadow:0 10px 24px rgba(255,139,26,.28),inset 0 1px 0 rgba(255,255,255,.5)!important;
}
.brand-logo{transition:transform var(--lpx-med) var(--lpx-spring)}
.brand.brand-dashboard-link:hover .brand-logo{transform:scale(1.04)}

/* Topbar */
.topbar,.lekhdwar-page-topbar,
body:not(.auth):not(.public-page) .lekhdwar-page-topbar{backdrop-filter:blur(22px) saturate(140%)!important;-webkit-backdrop-filter:blur(22px) saturate(140%)!important}
.topbar h1,.lekhdwar-page-topbar h1,
body:not(.auth):not(.public-page) .lekhdwar-page-topbar h1{
  background:linear-gradient(120deg,var(--lpx-navy-2),var(--lpx-navy-4) 55%,var(--lpx-navy-2));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  letter-spacing:-.015em;
}
body.app-theme-dark .topbar h1,body.app-theme-dark .lekhdwar-page-topbar h1,
body.app-theme-dark:not(.auth):not(.public-page) .lekhdwar-page-topbar h1{
  background:linear-gradient(120deg,#fff,var(--lpx-orange-2));-webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.top-company-logo{transition:transform var(--lpx-med) var(--lpx-spring)}
.top-company-logo:hover{transform:scale(1.05) rotate(-1deg)}

/* Mobile dock press feedback */
.lekhdwar-mobile-dock-item{transition:transform var(--lpx-fast) var(--lpx-spring),background var(--lpx-med) var(--lpx-ease)!important}
.lekhdwar-mobile-dock-item:active{transform:scale(.93)!important}
.lekhdwar-mobile-dock-item .dock-icon{transition:transform var(--lpx-med) var(--lpx-spring),box-shadow var(--lpx-med) var(--lpx-ease)}
.lekhdwar-mobile-dock-item.active .dock-icon{transform:translateY(-2px) scale(1.05)}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — unify .btn and .lkd-btn; add shine-sweep + consistent states
   ═══════════════════════════════════════════════════════════════════════ */
.btn,.lkd-btn,.button{
  border-radius:var(--lpx-r-sm)!important;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--lpx-fast) var(--lpx-spring),box-shadow var(--lpx-med) var(--lpx-ease),filter var(--lpx-med) var(--lpx-ease)!important;
}
.btn::after,.lkd-btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform var(--lpx-slow) var(--lpx-ease),opacity var(--lpx-fast) linear;
}
.btn:hover::after,.lkd-btn:hover::after{opacity:1;transform:translateX(120%)}
.btn:hover,.lkd-btn:hover{transform:translateY(-2px)}
.btn:active,.lkd-btn:active{transform:translateY(0) scale(.96)!important}
.btn.primary,.btn.blue,.lkd-btn--primary{box-shadow:var(--lpx-sh-glow)!important}
.btn.green{box-shadow:0 12px 26px rgba(7,18,37,.22)!important}
.btn[disabled],.btn.disabled,button[disabled]{opacity:.5!important;cursor:not-allowed!important;transform:none!important;filter:grayscale(.2)}
.lkd-btn--sm{border-radius:var(--lpx-r-sm)!important}

/* ═══════════════════════════════════════════════════════════════════════
   FORMS — refined inputs, consistent across bare selectors + inputs inside cards
   ═══════════════════════════════════════════════════════════════════════ */
input,select,textarea{
  border-radius:var(--lpx-r-sm)!important;
  transition:border-color var(--lpx-fast) var(--lpx-ease),box-shadow var(--lpx-fast) var(--lpx-ease),background var(--lpx-fast) var(--lpx-ease)!important;
}
input::placeholder,textarea::placeholder{color:#9aa5b8;opacity:1}
label{font-weight:700;letter-spacing:.01em}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;background:#f1f4f9!important}

/* ═══════════════════════════════════════════════════════════════════════
   TABLES — .table / .lkd-table + mobile-card skin (reuses file 07's
   data-label mechanism, only re-skins it)
   ═══════════════════════════════════════════════════════════════════════ */
.table.table,.lkd-table.lkd-table{border-radius:var(--lpx-r-md)!important;overflow:hidden}
.table th,.lkd-table th{
  font-weight:800!important;letter-spacing:.06em!important;
}
.table tr,.lkd-table tr{transition:background var(--lpx-fast) var(--lpx-ease)}
.table.mobile-card-table tr{
  border-radius:var(--lpx-r-md)!important;
  box-shadow:var(--lpx-sh-1)!important;
  transition:box-shadow var(--lpx-med) var(--lpx-ease),transform var(--lpx-med) var(--lpx-ease)!important;
}
.table.mobile-card-table tr:active{transform:scale(.99)}
.table.mobile-card-table td::before{color:var(--lpx-accent)!important;font-weight:800!important}

/* ═══════════════════════════════════════════════════════════════════════
   BADGES & ALERTS — soften both .badge and .lkd-badge into one language
   ═══════════════════════════════════════════════════════════════════════ */
.badge.badge,.lkd-badge.lkd-badge{
  border-radius:var(--lpx-r-pill)!important;
  font-weight:800!important;letter-spacing:.03em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
}
.alert{border-radius:var(--lpx-r-md)!important;box-shadow:var(--lpx-sh-1)}

/* ═══════════════════════════════════════════════════════════════════════
   MODALS — deepen the file-91 fade/scale system visually
   ═══════════════════════════════════════════════════════════════════════ */
.wa-number-modal,.pay-save-modal,.lekh-modal{backdrop-filter:blur(8px) saturate(130%)!important;-webkit-backdrop-filter:blur(8px) saturate(130%)!important}
.wa-number-card.wa-number-card,.pay-save-box.pay-save-box,.lekh-modal-card.lekh-modal-card{
  border-radius:var(--lpx-r-xl)!important;
  box-shadow:var(--lpx-sh-3)!important;
  border:1px solid rgba(255,255,255,.6);
}
.lekh-modal-icon{background:linear-gradient(135deg,var(--lpx-orange-1),var(--lpx-orange-2));color:#111827;box-shadow:var(--lpx-sh-glow)}
.lekh-modal-close{transition:transform var(--lpx-fast) var(--lpx-spring),background var(--lpx-fast) var(--lpx-ease)}
.lekh-modal-close:hover{transform:rotate(90deg);background:#ffe3c2}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — refine .lkd-* system + add dark-mode bridge (it currently
   only ships a light --w-* token block inline per request)
   ═══════════════════════════════════════════════════════════════════════ */
.lkd-crm-hero,.lkd-staff-hero,.lkd-master-hero{backdrop-filter:blur(10px)}
.lkd-stat-icon,.lkd-kpi-icon,.lkd-stock-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.1em;height:2.1em;border-radius:var(--lpx-r-md);
  background:linear-gradient(135deg,rgba(255,139,26,.14),rgba(255,139,26,.05));
}
.lkd-meter{position:relative}
.lkd-meter i{background:linear-gradient(90deg,var(--lpx-orange-1),var(--lpx-orange-2),var(--lpx-orange-1));background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){
  .lkd-meter i{animation:lpxMeterShine 3.2s linear infinite}
}
@keyframes lpxMeterShine{0%{background-position:0% 0}100%{background-position:200% 0}}
.lkd-range-tabs button.active{box-shadow:var(--lpx-sh-glow)}
.lkd-doc-card b,.lkd-stat-card strong,.lkd-kpi-card strong{font-variant-numeric:tabular-nums}

body.app-theme-dark .lkd-crm-hero,body.app-theme-dark .lkd-staff-hero,
body.app-theme-dark .lkd-stat-card,body.app-theme-dark .lkd-kpi-card,
body.app-theme-dark .lkd-plan-card,body.app-theme-dark .lkd-doc-card,
body.app-theme-dark .lkd-card,body.app-theme-dark .lkd-range-tabs,
body.app-theme-dark .lkd-crm-tile{
  --w-bg:#071120;--w-surface:#0f1b2d;--w-surface2:#0a1423;
  --w-border:#22324a;--w-ink:#e5edf8;--w-ink-2:#c3cede;--w-muted:#93a4b8;
  --w-shadow:0 12px 34px rgba(0,0,0,.35);--w-shadow-md:0 20px 50px rgba(0,0,0,.42);
}
body.app-theme-dark .lkd-master-hero{background:linear-gradient(120deg,#05070c,#1a1030)!important}

/* ═══════════════════════════════════════════════════════════════════════
   CREATE-DOCUMENT WIZARD — doc-hub landing + step wizard + item table
   ═══════════════════════════════════════════════════════════════════════ */
.doc-hub-card.doc-hub-card{
  border-radius:var(--lpx-r-lg)!important;
  transition:transform var(--lpx-med) var(--lpx-spring),box-shadow var(--lpx-med) var(--lpx-ease),border-color var(--lpx-med) var(--lpx-ease)!important;
}
.doc-hub-card:hover{transform:translateY(-3px) scale(1.01);border-color:rgba(255,139,26,.4)!important}

.doc-wizard-progress.doc-wizard-progress{border-radius:var(--lpx-r-pill)!important;overflow:hidden;background:rgba(2,8,23,.08)!important}
.doc-wizard-progress>*{background:linear-gradient(90deg,var(--lpx-navy-2),var(--lpx-orange-1))!important;transition:width var(--lpx-slow) var(--lpx-ease)!important}
.doc-wizard-steps button{
  border-radius:var(--lpx-r-pill)!important;
  transition:transform var(--lpx-fast) var(--lpx-spring),background var(--lpx-med) var(--lpx-ease),box-shadow var(--lpx-med) var(--lpx-ease)!important;
}
.doc-wizard-steps button.active{box-shadow:var(--lpx-sh-glow)!important;transform:translateY(-1px)}
.doc-wizard-steps button.done{opacity:.85}

.pro-invoice-form .form-section{border-radius:var(--lpx-r-lg)!important}
.invoice-items-entry{border-radius:var(--lpx-r-md);overflow:hidden}
.invoice-items-entry th{font-weight:800!important;letter-spacing:.05em!important}
.invoice-items-entry tr{transition:background var(--lpx-fast) var(--lpx-ease)}
#moneyTotalsBox,#unitTotalsBox{
  border-radius:var(--lpx-r-lg)!important;
  background:linear-gradient(160deg,rgba(255,139,26,.08),rgba(11,31,77,.04))!important;
  box-shadow:var(--lpx-sh-1)!important;
}
.quote-product-detail-card{border-radius:var(--lpx-r-md)!important}

/* ═══════════════════════════════════════════════════════════════════════
   DOCUMENTS LIST — filter bar + category/party/product tabs
   ═══════════════════════════════════════════════════════════════════════ */
.doc-filter-bar{
  display:flex;flex-wrap:wrap;gap:var(--lpx-space-3);
  background:var(--lpx-glass-bg);
  border:1px solid var(--lpx-glass-border);
  border-radius:var(--lpx-r-lg)!important;
  padding:var(--lpx-space-4)!important;
  box-shadow:var(--lpx-sh-1)!important;
  backdrop-filter:blur(var(--lpx-glass-blur));-webkit-backdrop-filter:blur(var(--lpx-glass-blur));
  margin-bottom:var(--lpx-space-4)!important;
}
.doc-filter-bar input,.doc-filter-bar select{flex:1 1 160px;min-width:0}
.document-category-tabs a{
  border-radius:var(--lpx-r-pill)!important;
  transition:transform var(--lpx-fast) var(--lpx-spring),background var(--lpx-med) var(--lpx-ease),color var(--lpx-med) var(--lpx-ease),border-color var(--lpx-med) var(--lpx-ease)!important;
}
.document-category-tabs a.active{box-shadow:var(--lpx-sh-glow)!important}
.document-category-tabs a:hover{transform:translateY(-1px)}
tr.row-cancelled{opacity:.62}

body.app-theme-dark .doc-filter-bar{background:rgba(15,27,45,.75);border-color:rgba(255,255,255,.08)}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH / LOGIN — glass card + animated aurora orbs
   ═══════════════════════════════════════════════════════════════════════ */
.client-auth-orb{filter:blur(70px);opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .client-auth-orb.orb-one{animation:lpxDrift 16s ease-in-out infinite}
  .client-auth-orb.orb-two{animation:lpxDrift 20s ease-in-out infinite reverse}
}
@keyframes lpxDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-24px) scale(1.12)}
}
.login-card.login-card,.client-login-card.client-login-card,
.auth-login-page .login-card,.client-ready-auth .login-card{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(var(--lpx-glass-blur));-webkit-backdrop-filter:blur(var(--lpx-glass-blur));
  border:1px solid rgba(255,255,255,.6)!important;
  box-shadow:var(--lpx-sh-3)!important;
}
.login-brand-points span{transition:transform var(--lpx-fast) var(--lpx-spring)}
.login-brand-points span:hover{transform:translateY(-2px)}
.client-login-logo-wrap{transition:transform var(--lpx-med) var(--lpx-spring)}
.client-login-logo-wrap:hover{transform:scale(1.04)}
.client-form-stack .btn.primary.full{box-shadow:var(--lpx-sh-glow)!important}

/* Public marketing landing — light polish, reuses existing hero/pricing classes */
.pricing-card.pricing-card,.customer-pricing-grid .pricing-card{border-radius:var(--lpx-r-lg)!important}
.pricing-card.pricing-card.popular,.customer-pricing-grid .pricing-card.popular{box-shadow:var(--lpx-sh-3)!important}
.mini-doc-card{transition:transform var(--lpx-med) var(--lpx-spring),box-shadow var(--lpx-med) var(--lpx-ease)!important}
.mini-doc-card:hover{transform:translateY(-3px)}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — small refinements within the breakpoints already in use
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .doc-filter-bar{flex-direction:column}
  .doc-filter-bar input,.doc-filter-bar select,.doc-filter-bar button{width:100%;flex:1 1 auto}
}
@media(max-width:1100px){
  .topbar h1,.lekhdwar-page-topbar h1{letter-spacing:-.01em}
}