/* ==========================================================================
   ShreshthaGurukul ERP design language — ported verbatim
   --------------------------------------------------------------------------
   The component rules below are copied from
     ShreshthaGurukulERP/src/ShreshthaGurukulERP.API/wwwroot/site.css
     ShreshthaGurukulERP/src/ShreshthaGurukulERP.API/wwwroot/app.html  (<style>)
   with the values unchanged, so the two products render identically rather
   than merely similarly. Only the additions at the foot are VyaparMart's:
   they put these classes onto markup that predates them (console.js does the
   same job for dynamically rendered screens).

   Keep this file in step with the reference. If the ERP's palette moves, copy
   it across rather than editing the numbers here.
   ========================================================================== */

body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .font-display { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.02em; }

.gradient-text {
  background: linear-gradient(100deg, #4f46e5, #0ea5e9 60%, #06b6d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.glass { backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.75); }
.dark .glass { background: rgba(17, 24, 39, 0.75); }

.mesh {
  background:
    radial-gradient(60% 55% at 15% 10%, rgba(99, 102, 241, .20), transparent 60%),
    radial-gradient(50% 50% at 90% 5%, rgba(14, 165, 233, .18), transparent 60%),
    radial-gradient(45% 60% at 60% 100%, rgba(139, 92, 246, .12), transparent 60%);
}
.grid-lines {
  background-image:
    linear-gradient(rgba(100, 116, 139, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, .08) 1px, transparent 1px);
  background-size: 44px 44px;
}

.fade-in { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nav-active { background: linear-gradient(90deg, #4f46e5, #0ea5e9); color: #fff !important; }
.nav-group-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8; padding: .75rem .75rem .25rem;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7cbd1; border-radius: 8px; }
.dark ::-webkit-scrollbar-thumb { background: #374151; }

.btn-primary {
  background: linear-gradient(90deg, #4f46e5, #0ea5e9); color: #fff;
  border-radius: .6rem; padding: .5rem .9rem; font-weight: 600; font-size: .875rem;
}
.btn-primary:hover { opacity: .93; }
.btn-primary:disabled { opacity: .6; }
.btn-ghost { border-radius: .6rem; padding: .5rem .9rem; font-weight: 500; font-size: .875rem; background: transparent; }
.btn-ghost:hover { background: rgba(100, 116, 139, .12); }
.btn-ghost:disabled { opacity: .4; }
.btn-danger { background: #e11d48; color: #fff; border-radius: .6rem; padding: .5rem .9rem; font-weight: 600; font-size: .875rem; }
.btn-danger:hover { opacity: .93; }

.card { border-radius: 1.25rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(30, 41, 59, .4); }

.fld {
  width: 100%; border-radius: .7rem; border: 1px solid rgb(203 213 225);
  background: #fff; padding: .6rem .8rem; font-size: .9rem; outline: none;
}
.fld:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, .4); border-color: transparent; }
.dark .fld { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* ==========================================================================
   VyaparMart bridge — applying the language above to this app's shell.
   ========================================================================== */

/* The ERP shell is a light sidebar beside the content, a 4rem glass header and
   a slate page. VyaparMart's sidebar was dark chrome, which is the one change
   that made the two look like different products. */
body[data-console] { background: #f8fafc; color: #0f172a; }
.dark body[data-console] { background: #020617; color: #e2e8f0; }

body[data-console] #sidebar {
  background: #fff;
  border-right: 1px solid rgb(226 232 240);
  color: rgb(51 65 85);
}
.dark body[data-console] #sidebar { background: rgb(15 23 42); border-right-color: rgb(30 41 59); color: rgb(203 213 225); }

body[data-console] #sidebar .nav-item {
  border-radius: .6rem; font-weight: 500; color: rgb(71 85 105);
  transition: background-color .15s, color .15s;
}
.dark body[data-console] #sidebar .nav-item { color: rgb(203 213 225); }
body[data-console] #sidebar .nav-item:hover { background: rgba(100, 116, 139, .12); transform: none; }
body[data-console] #sidebar .nav-item.nav-active .nav-ico,
body[data-console] #sidebar .nav-item[data-active="1"] .nav-ico { color: #fff; }
body[data-console] #sidebar .nav-ico { color: #94a3b8; }

/* The brand text was authored for a dark panel; on a white sidebar it would be
   white on white. The icon inside the gradient tile still sits on a gradient,
   so it is left alone. */
body[data-console] #sidebar p.text-white,
body[data-console] #sidebar b.text-white,
body[data-console] #sidebar #v-store-name { color: #0f172a; }
.dark body[data-console] #sidebar p.text-white,
.dark body[data-console] #sidebar b.text-white,
.dark body[data-console] #sidebar #v-store-name { color: #fff; }
body[data-console] #sidebar input[type="search"] { background: #f8fafc; border-color: rgb(226 232 240); color: rgb(51 65 85); }
.dark body[data-console] #sidebar input[type="search"] { background: #020617; border-color: #334155; color: #e2e8f0; }
body[data-console] #sidebar .nav-fade::before,
body[data-console] #sidebar .nav-fade::after { display: none; }

.console-topbar {
  height: 4rem;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, .75);
  border-bottom: 1px solid rgb(226 232 240);
}
.dark .console-topbar { background: rgba(17, 24, 39, .75); border-bottom-color: rgb(30 41 59); }

/* The ERP's page background is flat slate with the mesh only behind the hero,
   so the console keeps the mesh very light rather than washing every screen. */
body[data-console]::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(60% 55% at 15% 10%, rgba(99, 102, 241, .20), transparent 60%),
    radial-gradient(50% 50% at 90% 5%, rgba(14, 165, 233, .18), transparent 60%);
}
/*  Lift the app shell above the mesh — but ONLY the shell.
    This was `body > *`, which also caught anything appended to <body> at
    runtime: the Ctrl-K palette, toasts and modals are position:fixed with a
    high z-index, and being forced to position:relative/z-index:1 dropped the
    palette into normal flow at the bottom of the page instead of over it. */
body[data-console] > #shell,
body[data-console] > #gate { position: relative; z-index: 1; }

/* Tables are read, not poked: they keep the card shell but not the lift. */
#view .card:has(table):hover { transform: none; box-shadow: none; }
#view table thead th { position: sticky; top: 0; background: #f8fafc; color: #64748b; letter-spacing: .04em; }
.dark #view table thead th { background: #0f172a; color: #94a3b8; }
#view table tbody tr:hover { background: rgba(99, 102, 241, .05); }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .card, .btn-primary { transition: none; }
  .card:hover { transform: none; }
}

/* ==========================================================================
   Specificity bridge
   --------------------------------------------------------------------------
   Three ported rules were being overridden and so rendered as the old design:

     .nav-active      lost to the page's own .nav-item[data-active="1"] rail,
                      which is an attribute selector declared in a later <style>
     .card            lost to Tailwind's .rounded-2xl (1rem), because the CDN
                      injects its stylesheet after this file
     .nav-group-title lost to the element's own text-[10px]/text-gray-500

   Rather than delete the older rules — they are load-bearing for screens this
   file does not cover — the ported values are restated at a weight that wins.
   ========================================================================== */

body[data-console] #sidebar .nav-item.nav-active,
body[data-console] #sidebar .nav-item[data-active="1"] {
  background: linear-gradient(90deg, #4f46e5, #0ea5e9) !important;
  color: #fff !important;
  box-shadow: none;
}
body[data-console="vendor"] #sidebar .nav-item.nav-active,
body[data-console="vendor"] #sidebar .nav-item[data-active="1"] {
  background: linear-gradient(90deg, #059669, #14b8a6) !important;
}

#view .card { border-radius: 1.25rem !important; }

body[data-console] #sidebar .nav-group-title,
body[data-console] #sidebar .nav-head {
  font-size: .7rem !important;
  color: #94a3b8 !important;
  letter-spacing: .05em;
}

/*  Ctrl-K palette.
    The backdrop is `grid place-items-start justify-center`, which sizes its
    column to max-content — so the panel's `w-full max-w-xl` resolved to the
    width of the longest result rather than a fixed dialog, and the box grew
    and shrank as you typed. Pinning the width stops that. */
.vm-palette-backdrop { justify-items: center; }
.vm-palette { width: min(36rem, 92vw) !important; max-width: none !important; }
body[data-console] .vm-palette { background: rgba(255, 255, 255, .92); }
.dark body[data-console] .vm-palette { background: rgba(15, 23, 42, .95); }