/* ==========================================================================
   Prodamac dashboard theme
   --------------------------------------------------------------------------
   The design language is ported from the prodamac.lp React dashboard
   (tailwind.config.js there): the same surface/card/accent tokens, the same
   shadow ramp, the same 16rem gradient sidebar.

   This file is loaded LAST in admin/layouts/app.blade.php so it wins over the
   purchased template's app.min.css without forking it. Restyling the shared
   layer is what lets all 142 admin views change at once — editing them
   individually would guarantee they drift apart again.

   Everything here is written direction-neutral (inline-start/inline-end,
   margin-inline) because the panel runs RTL in Arabic and LTR in English off
   the same stylesheet.
   ========================================================================== */

:root {
  /* --- surfaces (prodamac.lp `surface`) --- */
  --pd-surface: #f6f8fc;
  --pd-surface-card: #ffffff;
  --pd-surface-muted: #f0f4fa;

  /* --- brand (logo grey) --- */
  --pd-brand: #969698;
  --pd-brand-light: #e8e8e9;

  /* --- accent: dashboard CTAs (prodamac.lp `dash-accent`) --- */
  --pd-accent: #ea580c;
  --pd-accent-dark: #c2410c;
  --pd-accent-soft: #fff3ed;

  /* --- ink --- */
  --pd-ink: #0f172a;
  --pd-ink-muted: #64748b;
  --pd-line: #e2e8f0;

  /* --- shadow ramp --- */
  --pd-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --pd-shadow-float: 0 10px 25px -5px rgb(0 0 0 / 0.08), 0 4px 10px -6px rgb(0 0 0 / 0.05);
  --pd-shadow-soft: 0 4px 24px -4px rgb(15 23 42 / 0.08), 0 2px 8px -2px rgb(15 23 42 / 0.06);

  --pd-radius: 14px;
  --pd-radius-sm: 10px;
}

/* ------------------------------------------------------------- surfaces -- */
body,
.wrapper,
.page-content {
  background-color: var(--pd-surface);
}

/* --------------------------------------------------------------- cards -- */
.card {
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background-color: var(--pd-surface-card);
  box-shadow: var(--pd-shadow-card);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Lift only where a card is actually a link — a hover effect on a static
   container reads as an affordance that isn't there. */
a > .card:hover {
  box-shadow: var(--pd-shadow-float);
  transform: translateY(-2px);
}

.card-header {
  border-block-end: 1px solid var(--pd-line);
  background-color: transparent;
  font-weight: 600;
}

/* -------------------------------------------------------------- topbar -- */
.topbar {
  border-block-end: 1px solid var(--pd-line);
  background-color: var(--pd-surface-card);
  box-shadow: var(--pd-shadow-card);
}

.topbar-button {
  border-radius: 999px;
  color: var(--pd-ink-muted);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.topbar-button:hover {
  background-color: var(--pd-surface-muted);
  color: var(--pd-ink);
}

/* ------------------------------------------------------------- sidebar --
   The gradient is the single most recognisable part of the reference shell:
   slate-50 -> white -> brand-light tint, running down the panel. */
.main-nav {
  border-inline-end: 1px solid var(--pd-line);
  background-image: linear-gradient(
    to bottom,
    #f8fafc 0%,
    #ffffff 45%,
    rgb(232 232 233 / 0.3) 100%
  );
  box-shadow: var(--pd-shadow-soft);
}

/* Group headings ("Sales & Orders", "Inventory & Purchases") — the panel has
   nine of them, so they carry most of the sidebar's sense of structure. */
.main-nav .menu-title {
  padding-inline: 1.25rem;
  color: var(--pd-ink-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav .nav-link {
  border-radius: var(--pd-radius-sm);
  margin-inline: 0.5rem;
  color: var(--pd-ink-muted);
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.main-nav .nav-link:hover {
  background-color: var(--pd-surface-muted);
  color: var(--pd-ink);
}

/* Active item carries the accent, matching the reference sidebar. */
.main-nav .nav-link.active {
  background-color: var(--pd-accent-soft);
  color: var(--pd-accent-dark);
  font-weight: 600;
}

/* Collapsible parents keep their arrow legible against the tinted active
   background. */
.main-nav .nav-link.active .menu-arrow,
.main-nav .nav-link.active::after {
  color: var(--pd-accent-dark);
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  border-radius: var(--pd-radius-sm);
  font-weight: 600;
}

.btn-primary {
  border-color: var(--pd-accent);
  background-color: var(--pd-accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  border-color: var(--pd-accent-dark);
  background-color: var(--pd-accent-dark);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--pd-accent);
  color: var(--pd-accent-dark);
}

.btn-outline-primary:hover {
  background-color: var(--pd-accent);
  color: #fff;
}

/* Focus ring is kept visible rather than removed — the panel is operated
   from the keyboard for long data-entry sessions. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- inputs -- */
.form-control,
.form-select {
  border-color: var(--pd-line);
  border-radius: var(--pd-radius-sm);
  background-color: var(--pd-surface-card);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pd-accent);
  box-shadow: 0 0 0 3px rgb(234 88 12 / 0.12);
}

.form-label {
  color: var(--pd-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------- tables -- */
.table > thead {
  background-color: var(--pd-surface-muted);
  color: var(--pd-ink-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.table > tbody > tr:hover > * {
  background-color: var(--pd-surface-muted);
}

.table > :not(caption) > * > * {
  border-block-end-color: var(--pd-line);
}

/* -------------------------------------------------------------- badges -- */
.badge {
  border-radius: 999px;
  padding: 0.35em 0.75em;
  font-weight: 600;
}

/* ------------------------------------------------------------ headings -- */
h1, h2, h3, h4, h5 {
  color: var(--pd-ink);
}

/* ----------------------------------------------------------- auth card --
   The sign-in screen is standalone markup, not the admin layout, and its
   content sat directly on the page background. Styling one hook keeps the
   existing div tree intact — restructuring seven nested rows/columns to add
   a wrapper risks a mismatched tag for no visual gain. */
.auth-card {
  max-width: 27rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  background-color: var(--pd-surface-card);
  box-shadow: var(--pd-shadow-soft);
  /* h-100 on the original div would stretch the card down the viewport. */
  height: auto !important;
}

.auth-card .btn[type='submit'] {
  width: 100%;
  padding-block: 0.65rem;
}

/* Google is a secondary path here, so it reads as an outline button rather
   than competing with the primary submit. */
.auth-card .btn-outline-danger {
  width: 100%;
  border-color: var(--pd-line);
  color: var(--pd-ink);
}

.auth-card .btn-outline-danger:hover {
  border-color: var(--pd-brand);
  background-color: var(--pd-surface-muted);
  color: var(--pd-ink);
}

/* ---------------------------------------------------------- dark theme --
   The template ships a light/dark toggle in the topbar. Without these the
   ported tokens would keep painting light surfaces after the switch. */
[data-bs-theme='dark'] {
  --pd-surface: #0b1220;
  --pd-surface-card: #131c2e;
  --pd-surface-muted: #1b2740;
  --pd-ink: #e2e8f0;
  --pd-ink-muted: #94a3b8;
  --pd-line: #263248;
  --pd-accent-soft: rgb(234 88 12 / 0.16);
}

[data-bs-theme='dark'] .main-nav {
  background-image: linear-gradient(to bottom, #101a2c 0%, #131c2e 45%, #0f1828 100%);
}