/*!
 * Application design layer
 * ------------------------
 * Sits on top of the theme's style.min.css. Everything here is either
 * (a) brand/typography setup, (b) the premium polish pass on the shell,
 * or (c) styling for markup the application already ships.
 */

/* ============================================================== typography */
@font-face {
  font-family: "Cairo Variable";
  src: url("../fonts/webfonts/Cairo/cairo-arabic-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo Variable";
  src: url("../fonts/webfonts/Cairo/cairo-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --bs-font-sans-serif: "Inter Var", "Cairo Variable", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";

  /* Shell tokens */
  --app-sidebar-width: 268px;
  --app-header-height: 70px;
  --app-radius: 0.875rem;
  --app-radius-sm: 0.625rem;
  --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --app-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 12px 32px -18px rgba(16, 24, 40, 0.35);
  --app-shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.06), 0 28px 60px -28px rgba(16, 24, 40, 0.45);
  --app-surface: #ffffff;
  --app-canvas: #f4f6fb;
  --app-hairline: rgba(16, 24, 40, 0.08);
  --app-sidebar-bg: linear-gradient(180deg, #041744 0%, #05205c 55%, #041b4d 100%);
  --app-primary-gradient: linear-gradient(135deg, #0057ff 0%, #3d82ff 100%);

  /* KPI-card accents. Each mode gets the step that clears 3:1 on its own
     surface — a single hex cannot, which left the dark icons unreadable. */
  --tone-sale: #2a78d6;
  --tone-return: #eb6834;
  --tone-purchase-return: #4a3aa7;
  --tone-profit: #008300;
}

[data-bs-theme="dark"] {
  --app-surface: #17181c;
  --app-canvas: #101114;
  --app-hairline: rgba(255, 255, 255, 0.09);
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px -18px rgba(0, 0, 0, 0.9);
  --app-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 28px 60px -28px rgba(0, 0, 0, 1);

  --tone-sale: #3987e5;
  --tone-return: #d95926;
  --tone-purchase-return: #9085e9;
  --tone-profit: #0ca30c;
}

body {
  background-color: var(--app-canvas);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -0.018em;
  font-weight: 600;
}

/* Figures line up in tables and stat cards */
.table td, .table th,
.stat-value, .amount, td .badge {
  font-variant-numeric: tabular-nums;
}

/* ================================================================ scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 113, 122, 0.35) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(113, 113, 122, 0.32);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 50rem;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(113, 113, 122, 0.55); }

/* ================================================================== sidebar */
.page-sidebar {
  width: var(--app-sidebar-width);
  background: var(--app-sidebar-bg);
  box-shadow: var(--app-shadow-lg);
}
.page-sidebar::after {
  /* soft brand glow behind the logo area */
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  width: 320px;
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(61, 130, 255, 0.35) 0%, rgba(61, 130, 255, 0) 70%);
  pointer-events: none;
}
.page-sidebar .aside-logo,
.page-sidebar .sidebar-scroll,
.page-sidebar .aside-footer {
  position: relative;
  z-index: 1;
}

.page-sidebar .aside-logo {
  height: var(--app-header-height);
  padding: 0 1.125rem;
  gap: 0.75rem;
}
.page-sidebar .aside-logo img {
  max-height: 38px;
  width: auto;
  border-radius: 0.5rem;
}
.page-sidebar .logo-text {
  color: #fff;
  font-weight: 650;
  font-size: 0.975rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s ease;
}
.page-sidebar .logo-text small {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0.75rem 1rem;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.35); }

.page-sidebar .sidebar-title {
  padding: 1.125rem 0.75rem 0.4rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  opacity: 1;
}

.page-sidebar .nav-link,
.page-sidebar .sidebar-item .sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.125rem;
  border-radius: var(--app-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.page-sidebar .nav-link:hover,
.page-sidebar .sidebar-item .sidebar-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.07);
}
.page-sidebar .nav-link[aria-expanded="true"] {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}
.page-sidebar .nav-link.active,
.page-sidebar .nav-link[data-bs-toggle="collapse"].active,
.page-sidebar .sidebar-item .sidebar-link.active,
/* per-page scripts flag the <li>, not the <a> */
.page-sidebar li.active > .nav-link,
.page-sidebar li.active > .sidebar-link {
  color: #fff;
  background: var(--app-primary-gradient);
  border-radius: var(--app-radius-sm);
  box-shadow: 0 6px 18px -6px rgba(0, 87, 255, 0.85);
}
.page-sidebar .nav-link[data-bs-toggle="collapse"]::after,
.page-sidebar .sidebar-link[data-bs-toggle="collapse"]::after {
  font-size: 0.7rem;
  margin-left: auto;
  margin-right: 0;
  opacity: 0.5;
}

.page-sidebar .sidebar-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.625rem;
  font-size: 1rem;
  flex: 0 0 auto;
  color: inherit;
}

.page-sidebar .sidebar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s ease;
}

/* Second level */
.page-sidebar .sidebar-dropdown {
  position: relative;
  padding-left: 2.375rem;
  margin: 0.125rem 0 0.375rem;
}
.page-sidebar .sidebar-dropdown::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.page-sidebar .sidebar-dropdown .sidebar-link {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 450;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
}
.page-sidebar .sidebar-dropdown .sidebar-link.active {
  background: rgba(61, 130, 255, 0.18);
  color: #fff;
  box-shadow: none;
}

/* Footer card inside the sidebar */
.page-sidebar .aside-footer {
  padding: 0.75rem;
  min-width: var(--app-sidebar-width);
}
.sidebar-cta {
  border-radius: var(--app-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.75rem 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.45;
}
.sidebar-cta .btn {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-font-size: 0.78rem;
}

@media (min-width: 992px) {
  body:not(.layout-boxed) .page-sidebar {
    left: 0.875rem;
    top: 0.875rem;
    height: calc(100% - 1.75rem);
    border-radius: 1.125rem;
  }
  body:not(.layout-boxed) .page-content {
    margin-left: calc(var(--app-sidebar-width) + 0.875rem);
  }
  body.page-sidebar-mini .page-sidebar:not(:hover) { width: 76px; }
  body.page-sidebar-mini .page-content { margin-left: calc(76px + 0.875rem); }
  body.page-sidebar-mini .page-sidebar:not(:hover) .sidebar-title {
    height: 0;
    padding-top: 0.75rem;
    padding-bottom: 0;
    overflow: hidden;
  }
  body.page-sidebar-mini .page-sidebar:not(:hover) .nav-link[data-bs-toggle="collapse"]::after { opacity: 0; }
}

/* =================================================================== header */
.page-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--app-header-height);
  padding: 0 1rem;
  background-color: color-mix(in srgb, var(--app-canvas) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--app-hairline);
}
@supports not (backdrop-filter: blur(1px)) {
  .page-header { background-color: var(--app-canvas); }
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.header-icon-btn:hover,
.header-icon-btn:focus,
.header-icon-btn.show {
  background-color: rgba(var(--bs-emphasis-color-rgb), 0.06);
  color: var(--bs-emphasis-color);
}
.header-icon-btn::after { display: none !important; }
.header-icon-btn .badge {
  position: absolute;
  top: 0.25rem;
  right: 0.2rem;
  min-width: 1.05rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.625rem;
  line-height: 1;
  border-radius: 50rem;
  border: 2px solid var(--app-canvas);
}

.header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border-radius: 50rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.header-user:hover,
.header-user.show { background-color: rgba(var(--bs-emphasis-color-rgb), 0.06); }
.header-user::after { display: none !important; }
.header-user .avatar-initials {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 650;
  color: #fff;
  background: var(--app-primary-gradient);
  box-shadow: 0 4px 12px -4px rgba(0, 87, 255, 0.8);
}
.header-user .header-user-meta { line-height: 1.15; }
.header-user .header-user-meta strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}
.header-user .header-user-meta small {
  font-size: 0.6875rem;
  color: var(--bs-secondary-color);
}

.btn-pos-cta {
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.625rem;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  background: var(--app-primary-gradient);
  border: 0;
  box-shadow: 0 8px 20px -8px rgba(0, 87, 255, 0.9);
}
.btn-pos-cta:hover { filter: brightness(1.06); }

/* ================================================================== content */
.page-content { min-height: 100vh; display: flex; flex-direction: column; }
.page-content > .content-body { flex: 1 1 auto; padding: 1.75rem 1.125rem 1.5rem; }
@media (min-width: 992px) {
  .page-header { padding: 0 1.5rem; }
  .page-content > .content-body { padding: 2rem 2rem 2rem; }
}
@media (min-width: 1600px) {
  .page-content > .content-body { padding: 2.25rem 2.5rem 2.5rem; }
}

.content-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.content-heading h1,
.content-heading h2,
.content-heading h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
}

/* Breadcrumb eyebrow above the page title (built by app.js from the active
   sidebar entry, so the 50-odd list views don't each have to declare one). */
.page-crumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--bs-secondary-color);
}
.page-crumb .sep { opacity: 0.45; }

/* Right-hand side of a page heading: the screen's own actions. */
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.page-actions .btn { margin: 0; }

.main-footer {
  padding: 1.25rem 1.5rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  border-top: 1px solid var(--app-hairline);
  margin-top: 1.5rem;
}
.main-footer p { margin: 0; }

/* ==================================================================== cards */
.card {
  --bs-card-border-color: var(--app-hairline);
  --bs-card-border-radius: var(--app-radius);
  --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
  --bs-card-bg: var(--app-surface);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-cap-padding-y: 1rem;
  box-shadow: var(--app-shadow);
}
.card > .card-header {
  border-bottom: 1px solid var(--app-hairline);
  background: transparent;
  font-weight: 600;
}
.card > .card-header h1, .card > .card-header h2, .card > .card-header h3,
.card > .card-header h4, .card > .card-header h5, .card > .card-header h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

/* The old theme wrapped page sections in .card > .card-body; keep that airy. */
.content .card + .card { margin-top: 1.25rem; }

/* ====================================================== internal list pages
   Every list screen renders `<section>` holding a `.container-fluid` of page
   actions plus a bare `.table-responsive`. The table had no surface under it,
   so it read as loose text floating on the page canvas. These rules promote
   that markup into the same card language the dashboard uses — without
   editing the ~50 Blade views that produce it.

   Scoped to a direct child of `section` so tables already inside a .card
   (dashboard, reports) are left alone. */
#content > section > .table-responsive,
#content > section > form > .table-responsive {
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 0.25rem 1.25rem 1rem;
}
@media (min-width: 992px) {
  #content > section > .table-responsive,
  #content > section > form > .table-responsive { padding: 0.25rem 1.5rem 1.25rem; }
}

/* Page-level action bar (Add / Import buttons) above the table card. When the
   heading builder lifts these into the title row it removes the node, so the
   spacing below only applies while they are still here. */
#content > section > .container-fluid {
  padding-inline: 0;
  margin-bottom: 1.25rem;
}
/* Lay the bar out as a toolbar only when it really is one. The report screens
   put an entire filter .card in this element, and a flex row would shrink it
   to its content width. Browsers without :has() keep the block fallback. */
#content > section > .container-fluid:has(> .btn) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
#content > section > .container-fluid > .btn { margin: 0; }

/* Separate consecutive blocks on a page instead of letting them collide. */
#content > section > * + .table-responsive { margin-top: 1.25rem; }
#content > section > .table-responsive + .table-responsive { margin-top: 1.5rem; }

/* =================================================================== tables */
.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--app-hairline);
  margin-bottom: 0;
}
.table > thead > tr > th {
  padding: 0.8125rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  background-color: transparent;
  border-bottom: 1px solid var(--app-hairline);
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 0.8125rem 0.875rem;
  vertical-align: middle;
  border-bottom-color: var(--app-hairline);
}
/* Data columns line up only with equal-width digits; letters are unaffected. */
#content > section > .table-responsive .table > tbody > tr > td,
#content > section > form > .table-responsive .table > tbody > tr > td {
  font-variant-numeric: tabular-nums;
}
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), 0.035);
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 0 1px 0;
}

/* Row action buttons stay compact and quiet until hovered */
.table .btn-group > .btn,
.table .dropdown-toggle {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.625rem;
  --bs-btn-font-size: 0.8125rem;
  min-height: 2.125rem;
}
/* On a touch device the same control has to clear the 44px minimum. Rows grow
   with it, which is the right density for touch anyway. */
@media (pointer: coarse) {
  .table .btn-group > .btn,
  .table .dropdown-toggle {
    min-height: 44px;
    --bs-btn-padding-x: 0.875rem;
  }
}

/* ============================================================ forms/buttons */
.form-control,
.form-select,
.input-group-text {
  border-radius: var(--app-radius-sm);
  border-color: var(--bs-border-color);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--app-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 3.5px rgba(var(--bs-primary-rgb), 0.13);
}
label, .form-label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--bs-emphasis-color);
}

.btn {
  --bs-btn-border-radius: var(--app-radius-sm);
  --bs-btn-font-weight: 550;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--app-primary-gradient);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(0, 87, 255, 0.9);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
  background: var(--app-primary-gradient);
  border-color: transparent;
  filter: brightness(1.06);
}
.btn-sm { --bs-btn-border-radius: 0.5rem; }
.btn-lg { --bs-btn-border-radius: 0.75rem; }

/* ------------------------------------------------------ bootstrap-select v1.14 */
.bootstrap-select > .dropdown-toggle {
  border-radius: var(--app-radius-sm) !important;
  border: 1px solid var(--bs-border-color) !important;
  background-color: var(--app-surface) !important;
  color: var(--bs-body-color) !important;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  box-shadow: none !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: rgba(var(--bs-primary-rgb), 0.55) !important;
  box-shadow: 0 0 0 3.5px rgba(var(--bs-primary-rgb), 0.13) !important;
  outline: 0 !important;
}
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: var(--bs-secondary-color) !important;
}
.bootstrap-select .dropdown-menu {
  border-radius: var(--app-radius-sm);
  border-color: var(--app-hairline);
  box-shadow: var(--app-shadow-lg);
  padding: 0.375rem;
}
.bootstrap-select .dropdown-menu li a { border-radius: 0.5rem; font-size: 0.875rem; }
.bootstrap-select .bs-searchbox .form-control { font-size: 0.8125rem; }

/* ================================================================ dropdowns */
.dropdown-menu {
  --bs-dropdown-border-color: var(--app-hairline);
  --bs-dropdown-border-radius: var(--app-radius-sm);
  --bs-dropdown-padding-x: 0.375rem;
  --bs-dropdown-padding-y: 0.375rem;
  --bs-dropdown-item-padding-y: 0.45rem;
  --bs-dropdown-item-padding-x: 0.625rem;
  --bs-dropdown-font-size: 0.8125rem;
  --bs-dropdown-bg: var(--app-surface);
  box-shadow: var(--app-shadow-lg);
}
.dropdown-menu .dropdown-item { border-radius: 0.5rem; }
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .bi { width: 1.15rem; opacity: 0.7; }
.dropdown-header {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
/* The old markup put plain <a>/<button> inside .dropdown-menu > li */
.dropdown-menu > li > a:not(.dropdown-item),
.dropdown-menu > li > .btn-link {
  display: block;
  width: 100%;
  padding: 0.45rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  font-size: 0.8125rem;
  font-weight: 450;
  text-align: left;
  text-decoration: none;
}
.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > .btn-link:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

/* =================================================================== modals */
.modal-content {
  border: 0;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-lg);
}
.modal-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--app-hairline);
}
.modal-header .modal-title { font-size: 1rem; font-weight: 650; }
.modal-body { padding: 1.25rem; }
.modal-backdrop.show { opacity: 0.5; }

/* =================================================================== alerts */
.alert {
  border: 1px solid var(--app-hairline);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-sm);
  font-size: 0.875rem;
}

/* ================================================================== badges */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.55em;
  --bs-badge-padding-y: 0.4em;
  border-radius: 0.5rem;
  letter-spacing: 0.01em;
}

/* ============================================================== datatables */
/* Every list screen uses dom: '<"row"lfB>rtip' — length, filter and the export
   buttons land as bare children of a .row, so the toolbar is laid out here
   (the previous theme's stylesheet used to do this with percentage widths). */
div.dataTables_wrapper > .row:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
  margin: 0;
  padding: 1rem 0 1.125rem;
}
/* Inside a list card the toolbar reads as the card's header: a hairline does
   the separating so the controls stop bleeding into the first data row. */
#content > section > .table-responsive > .dataTables_wrapper > .row:first-child,
#content > section > form > .table-responsive > .dataTables_wrapper > .row:first-child {
  border-bottom: 1px solid var(--app-hairline);
  margin-bottom: 0.25rem;
}

/* Info + pagination form one footer line under the table. They are bare
   siblings of the table (dom: '<"row"lfB>rtip'), so floats do the pairing. */
div.dataTables_wrapper > .dataTables_info { float: left; padding-top: 1.125rem; }
div.dataTables_wrapper > .dataTables_paginate { float: right; padding-top: 0.875rem; }
div.dataTables_wrapper::after { content: ""; display: block; clear: both; }
div.dataTables_wrapper > .row:first-child > * {
  width: auto;
  max-width: none;
  padding: 0;
  flex: 0 0 auto;
}
div.dataTables_wrapper > .row:first-child > .dataTables_length { order: 1; }
div.dataTables_wrapper > .row:first-child > .dt-buttons { order: 2; }
div.dataTables_wrapper > .row:first-child > .dataTables_filter { order: 3; margin-left: auto; }

div.dataTables_wrapper div.dataTables_length select { min-width: 4.5rem; }
div.dataTables_wrapper div.dataTables_filter input { margin-left: 0.5rem; min-width: 12rem; }
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label { margin-bottom: 0; font-weight: 450; }
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate { font-size: 0.8125rem; }

/* Export / action buttons. DataTables Buttons 2.x renders them as
   `.btn.btn-secondary` inside a `.dt-buttons.btn-group`, so the group joining
   is undone and each button becomes a soft tinted pill. */
div.dt-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
div.dt-buttons.btn-group > .btn,
div.dt-buttons .btn-group > .btn {
  border-radius: 0.55rem;
  margin-left: 0;
}
div.dt-buttons .btn {
  --tone: var(--bs-secondary-rgb);
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 600;
  --bs-btn-color: rgb(var(--tone));
  --bs-btn-bg: rgba(var(--tone), 0.1);
  --bs-btn-border-color: rgba(var(--tone), 0.22);
  --bs-btn-hover-color: rgb(var(--tone));
  --bs-btn-hover-bg: rgba(var(--tone), 0.18);
  --bs-btn-hover-border-color: rgba(var(--tone), 0.35);
  --bs-btn-active-color: rgb(var(--tone));
  --bs-btn-active-bg: rgba(var(--tone), 0.24);
  --bs-btn-active-border-color: rgba(var(--tone), 0.4);
  --bs-btn-disabled-color: rgb(var(--tone));
  --bs-btn-disabled-bg: rgba(var(--tone), 0.06);
  --bs-btn-disabled-border-color: rgba(var(--tone), 0.14);
  box-shadow: none;
}
div.dt-buttons .buttons-pdf { --tone: var(--bs-danger-rgb); }
div.dt-buttons .buttons-csv,
div.dt-buttons .buttons-excel { --tone: var(--bs-success-rgb); }
div.dt-buttons .buttons-delete { --tone: var(--bs-danger-rgb); }
div.dt-buttons .buttons-colvis { --tone: var(--bs-primary-rgb); }

div.dt-button-collection {
  padding: 0.375rem;
  border-radius: var(--app-radius-sm);
  border-color: var(--app-hairline);
  box-shadow: var(--app-shadow-lg);
}
div.dt-button-collection .btn,
div.dt-button-collection .dt-button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.8125rem;
  font-weight: 450;
  padding: 0.4rem 0.625rem;
}
div.dt-button-collection .btn:hover,
div.dt-button-collection .dt-button:hover { background: var(--bs-tertiary-bg); }
div.dt-button-collection .btn.active,
div.dt-button-collection .dt-button.active {
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}
table.dataTable > thead .sorting::before, table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::before, table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::before, table.dataTable > thead .sorting_desc::after { opacity: 0.22; }
.page-link { border-radius: 0.5rem; margin: 0 0.1rem; border: 0; font-size: 0.8125rem; }
.page-item.active .page-link { background: var(--app-primary-gradient); box-shadow: 0 6px 14px -8px rgba(0, 87, 255, 0.9); }
.dt-buttons .btn { --bs-btn-font-size: 0.8125rem; }

/* ================================================= app loader / page reveal */
#loader {
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: var(--app-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader::after {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(var(--bs-primary-rgb), 0.18);
  border-top-color: var(--bs-primary);
  animation: app-spin 0.75s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Fill mode must not persist after the reveal: a filling transform/opacity
   animation turns #content into a stacking context + containing block, which
   traps position:fixed modals below the body-level .modal-backdrop. */
.animate-bottom { animation: app-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes app-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

#app-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(9, 12, 20, 0.72);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#app-loading-overlay .app-loading-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  animation: app-spin 0.75s linear infinite;
}
#app-loading-overlay .app-loading-text {
  margin-top: 1rem;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.swal2-popup { font-family: inherit; border-radius: var(--app-radius); }

/* ================================================================ dashboard */
.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  border-radius: var(--app-radius);
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  box-shadow: var(--app-shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -70% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tone, var(--bs-primary)) 0%, transparent 68%);
  opacity: 0.07;
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow-lg);
}
.stat-icon {
  flex: 0 0 auto;
  width: 2.875rem;
  height: 2.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  font-size: 1.25rem;
  color: var(--tone, var(--bs-primary));
  background: color-mix(in srgb, var(--tone, #0057ff) 12%, transparent);
}
.stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.15rem;
}
.stat-value {
  font-size: 1.45rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Date-range segmented control */
.filter-toggle {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.125rem;
  border-radius: 0.75rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--app-hairline);
}
.filter-toggle .date-btn {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-font-weight: 550;
  --bs-btn-border-radius: 0.55rem;
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-btn-hover-border-color: transparent;
  box-shadow: none;
  white-space: nowrap;
}
.filter-toggle .date-btn.active {
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-hover-bg: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

/* Card-level tab strip */
.card > .nav-tabs {
  --bs-nav-tabs-border-width: 0;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem 0;
  border-bottom: 1px solid var(--app-hairline);
}
.card > .nav-tabs .nav-link {
  border: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8438rem;
  font-weight: 550;
  color: var(--bs-secondary-color);
  position: relative;
}
.card > .nav-tabs .nav-link:hover { color: var(--bs-emphasis-color); }
.card > .nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background: transparent;
}
.card > .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--bs-primary);
}

/* ==================================================================== charts
   Chart.js runs with maintainAspectRatio:false, so the wrapper owns the height.
   Without it the canvas collapses (the dashboard body starts hidden). */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.chart-canvas-wrap > canvas { display: block; }
.chart-canvas-wrap.chart-lg { height: 300px; }
.chart-canvas-wrap.chart-xl { height: 340px; }
/* Half ring: only the top half is drawn, so it needs about half the box. */
.chart-canvas-wrap.chart-gauge { height: 160px; }

@media (max-width: 991.98px) {
  .chart-canvas-wrap,
  .chart-canvas-wrap.chart-lg,
  .chart-canvas-wrap.chart-xl { height: 260px; }
}

/* Itemised breakdown under a ring — legend and table view in one, so no value
   is reachable only by hovering the chart. Built by js/charts-custom.js. */
.viz-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.35rem;
}
.viz-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  min-width: 0;
}
.viz-key {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.viz-name {
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viz-value {
  margin-inline-start: auto;
  padding-inline-start: 0.5rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--bs-emphasis-color);
  white-space: nowrap;
}
.viz-row-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.viz-track {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 4px;
  background: rgba(var(--bs-emphasis-color-rgb), 0.07);
  overflow: hidden;
}
.viz-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.viz-share {
  flex: 0 0 2.5rem;
  text-align: end;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}

/* ============================================================ ranked tables */
/* Columns of numbers align only with equal-width digits. */
.num { font-variant-numeric: tabular-nums; }

.rank-table .rank-col { width: 2.75rem; }
.rank-table .share-col { width: 7rem; }
.cell-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cell-share-value {
  flex: 0 0 2.25rem;
  text-align: end;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
  background: rgba(var(--bs-emphasis-color-rgb), 0.06);
}
.rank-table tbody tr:first-child .rank-badge {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.12);
}
/* One hue for every row: the bar's length is the only thing carrying value. */
.cell-meter {
  flex: 1 1 auto;
  min-width: 0;
  height: 6px;
  border-radius: 6px;
  background: rgba(var(--bs-emphasis-color-rgb), 0.07);
  overflow: hidden;
}
.cell-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bs-primary);
}
.empty-cell {
  padding: 2.25rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

/* ====================================================== misc legacy markup */
.brand-text h3 { font-weight: 650; }
.notification-content { line-height: 1.35; }
.msg-profile { width: 34px; height: 34px; border-radius: 50rem; object-fit: cover; }
.form-control-custom { display: block; width: 100%; }
.dropzone {
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--app-radius-sm);
  background: var(--app-surface);
  min-height: 120px;
}

/* Mobile sidebar scrim */
@media (max-width: 991.98px) {
  .page-sidebar { border-radius: 0 1.125rem 1.125rem 0; }
  .page-header { padding: 0 1rem; }
}

/* ================================================= jQuery UI autocomplete */
/* No jQuery UI theme CSS is loaded on this stack, so the suggestion menu
   (product search on purchase/sale/quotation/transfer/return/adjustment/
   barcode screens) ships unstyled. Styled here with the app tokens so it
   follows light/dark automatically. */
ul.ui-autocomplete.ui-menu {
  position: absolute;
  z-index: 2060; /* above modals (1055) and their backdrop */
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0.375rem;
  min-width: 280px;
  max-width: 460px;
  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--app-surface);
  border: 1px solid var(--app-hairline);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-lg);
  animation: app-suggest-in 0.12s ease-out;
}
@keyframes app-suggest-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ul.ui-autocomplete.ui-menu { animation: none; }
}

ul.ui-autocomplete.ui-menu .ui-menu-item {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border: 0;
  border-radius: calc(var(--app-radius-sm) - 0.2rem);
  font-size: 0.855rem;
  line-height: 1.4;
  color: var(--bs-body-color);
  cursor: pointer;
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}
ul.ui-autocomplete.ui-menu .ui-menu-item + .ui-menu-item .ui-menu-item-wrapper {
  margin-top: 1px;
}
ul.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: var(--app-primary-gradient);
  color: #fff;
}

/* Spinner on the search input while results load */
input.ui-autocomplete-loading {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='none' stroke='%230057ff' stroke-opacity='0.25' stroke-width='2'/><path d='M14 8a6 6 0 0 0-6-6' fill='none' stroke='%230057ff' stroke-width='2' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='0.75s' repeatCount='indefinite'/></path></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 16px 16px;
}
[dir="rtl"] input.ui-autocomplete-loading {
  background-position: left 0.6rem center;
}

/* jQuery UI helper the widget toggles while positioning the menu */
.ui-helper-hidden-accessible {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}