/* =====================================================================
   Mnween Admin — "Minimal & Airy" override theme
   ---------------------------------------------------------------------
   A standalone reskin loaded AFTER the compiled AdminKit/Bootstrap 5.3
   theme. It changes only look & feel (color, surface, radius, shadow,
   spacing, motion) by re-mapping Bootstrap's CSS variables and a small
   set of AdminKit selectors. No markup, no JS, no layout geometry is
   changed — every existing class keeps working.

   Sections: 1) Tokens  2) Base  3) Sidebar  4) Topbar  5) Cards
             6) Buttons 7) Forms 8) Tables 9) Badges 10) Dropdowns
            11) Modals 12) Pagination/misc 13) Login 14) Motion
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* 1) ----------------------------------------------------------- TOKENS */
:root {
  --mn-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --mn-bg:          #f6f7fb;
  --mn-surface:     #ffffff;
  --mn-surface-2:   #f7f8fb;
  --mn-ink:         #15161a;   /* near-black — text is almost always black */
  --mn-ink-2:       #3b3f48;   /* secondary text, still dark */
  --mn-ink-3:       #868c9b;   /* captions / muted only */
  --mn-line:        #e9ebf1;
  --mn-line-2:      #e1e4ec;

  /* Brand blue — from the Mnween app (colorSecondBlue #4399F7) */
  --mn-link:          #4399f7;  /* hyperlinks / clickable text */
  --mn-accent:        #4399f7;  /* brand blue */
  --mn-accent-strong: #1f7fe0;  /* deeper blue for solid fills (white text passes) */
  --mn-accent-press:  #1769cc;
  --mn-accent-soft:   #e7f1fe;
  --mn-accent-softer: #f3f8ff;
  --mn-accent-ink:    #1769cc;  /* accent text on light */

  --mn-ok:#0f9d6e;     --mn-ok-soft:#e7f7f1;
  --mn-warn:#b9770d;   --mn-warn-soft:#fbf1df;
  --mn-danger:#d92d43; --mn-danger-soft:#fdeaec;
  --mn-info:#2f6fed;   --mn-info-soft:#e9f1ff;

  --mn-r-sm:9px; --mn-r:12px; --mn-r-lg:16px; --mn-r-pill:999px;

  /* Drop shadows removed by design — flat surfaces defined by hairline borders */
  --mn-sh-xs: none; --mn-sh-sm: none; --mn-sh-md: none; --mn-sh-accent: none;
  --mn-ease: cubic-bezier(.22,.61,.36,1);
  --mn-focus: 0 0 0 3px var(--mn-accent-soft);  /* focus ring (a11y, not a drop shadow) */

  /* Re-map Bootstrap core */
  --bs-body-font-family: var(--mn-font);
  --bs-primary:        #4399f7;
  --bs-primary-rgb:    67,153,247;
  --bs-link-color:     #4399f7;
  --bs-link-color-rgb: 67,153,247;
  --bs-link-hover-color: #1f7fe0;
  --bs-body-bg:        #f6f7fb;
  --bs-body-color:     #15161a;
  --bs-body-font-weight: 400;
  --bs-border-color:   #e9ebf1;
  --bs-border-radius:     .75rem;
  --bs-border-radius-sm:  .55rem;
  --bs-border-radius-lg:  1rem;
  --bs-secondary-color: #3b3f48;
}

/* 2) ------------------------------------------------------------- BASE */
/* Zoom out the whole UI ~8% so staff see more at once (rem-based scale) */
html { font-size: 92%; }

/* Outfit everywhere — but NOT on .fa icon glyphs (they keep Font Awesome) */
body, .sidebar, .navbar, .card, .btn, .form-control, .form-select, .form-label,
.col-form-label, .table, .badge, .dropdown, .dropdown-menu, .modal, .nav-link,
.accordion-button, .pagination, .alert, .mn-status, .mn-chip, .mn-page-head,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.select2-container, .sidebar-link, .sidebar-brand {
  font-family: var(--mn-font) !important;
}

body {
  background-color: var(--mn-bg) !important;
  color: var(--mn-ink) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}
.main { background: var(--mn-bg) !important; }
.content { padding: 1.4rem 1.4rem 2.2rem !important; }
/* Links use the Mnween app blue; all other text is near-black */
a { color: var(--mn-link); }
a:hover { color: var(--mn-accent-strong); }
hr { border-color: var(--mn-line); opacity: 1; }
::selection { background: var(--mn-accent-soft); color: var(--mn-accent-ink); }
.text-primary { color: var(--mn-accent) !important; }
.text-muted { color: var(--mn-ink-3) !important; }
:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d6d9e2; border-radius: 999px; border: 2px solid var(--mn-bg); }
*::-webkit-scrollbar-thumb:hover { background: #c2c6d2; }

/* Page headers */
.content h1, .content h2, .content h3 { color: var(--mn-ink); font-weight: 700; letter-spacing: -0.02em; }

/* 3) ---------------------------------------------------------- SIDEBAR */
.sidebar, .sidebar-content { background: var(--mn-surface) !important; }
.sidebar { border-right: 1px solid var(--mn-line) !important; box-shadow: var(--mn-sh-xs); }

.sidebar-brand,
.sidebar-brand:hover { background: var(--mn-surface) !important; color: var(--mn-ink) !important; font-weight: 700; }
.sidebar-brand-text { color: var(--mn-ink) !important; }

.sidebar-user { background: var(--mn-surface-2) !important; border-radius: var(--mn-r); margin: .25rem .9rem .5rem; padding: .85rem .9rem; border: 1px solid var(--mn-line); }
.sidebar-user-title, .sidebar-user-title.dropdown-toggle { color: var(--mn-ink) !important; font-weight: 600; }
.sidebar-user-subtitle { color: var(--mn-ink-3) !important; text-transform: capitalize; }

.sidebar-header {
  color: var(--mn-ink-3) !important;
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem !important; font-weight: 600;
  padding-top: 1.1rem !important;
}

.sidebar-nav { padding: 0 .65rem; }
.sidebar-link,
.sidebar-item .sidebar-link {
  color: var(--mn-ink-2) !important;
  background: transparent !important;
  border-left: 0 !important;
  border-radius: var(--mn-r-sm);
  font-weight: 500;
  margin: 2px 0;
  padding: .58rem .8rem !important;
  transition: background .18s var(--mn-ease), color .18s var(--mn-ease);
  display: flex !important;
  align-items: center;
}
/* push any count badge to the far right and keep it vertically centered */
.sidebar-link > .sidebar-badge,
.sidebar-link > .badge { margin-left: auto; position: static !important; top: auto !important; right: auto !important; transform: none !important; }
.sidebar-link i, .sidebar-link svg { color: var(--mn-ink-3) !important; min-width: 1.4em; transition: color .18s var(--mn-ease); }
.sidebar-link:hover {
  color: var(--mn-ink) !important;
  background: var(--mn-surface-2) !important;
}
.sidebar-link:hover i { color: var(--mn-ink-2) !important; }

.sidebar-item.active > .sidebar-link,
.sidebar-item.active .sidebar-link {
  color: var(--mn-accent-ink) !important;
  background: var(--mn-accent-soft) !important;
  font-weight: 600;
}
.sidebar-item.active > .sidebar-link i { color: var(--mn-accent) !important; }

/* submenus */
.sidebar-dropdown .sidebar-link,
.sidebar [data-bs-parent] .sidebar-link { background: transparent !important; padding-left: 2.7rem !important; font-size: .85rem; }
.sidebar-dropdown .sidebar-item.active .sidebar-link { color: var(--mn-accent-ink) !important; background: var(--mn-accent-softer) !important; }

/* badges inside sidebar (counts) */
.sidebar .sidebar-badge, .sidebar .badge {
  background: var(--mn-accent) !important; color: #fff !important;
  border-radius: var(--mn-r-pill); font-weight: 600;
}

/* Purchasing: three color-coded stage badges (ready-to-purchase / purchased / warehouse) */
.sidebar .mn-purchasing-badges { display: inline-flex; gap: 5px; }
.sidebar .mn-purchasing-badges .badge {
  width: 22px; height: 22px; padding: 0; font-size: .7rem; font-weight: 700;
  line-height: 1; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
}

/* 4) ----------------------------------------------------------- TOPBAR */
.navbar {
  background: color-mix(in srgb, var(--mn-surface) 85%, transparent) !important;
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mn-line) !important;
  box-shadow: none !important;
}
.navbar .nav-icon, .navbar .nav-link { color: var(--mn-ink-2) !important; }
.navbar .nav-icon:hover { color: var(--mn-accent) !important; }
.navbar-toggler, .sidebar-toggle { color: var(--mn-ink-2) !important; }
.navbar .avatar, .navbar img.rounded-circle { border: 2px solid var(--mn-line); }

/* 5) ------------------------------------------------------------ CARDS */
.card {
  --bs-card-bg: var(--mn-surface);
  --bs-card-border-width: 1px;
  --bs-card-border-color: var(--mn-line);
  --bs-card-border-radius: var(--mn-r-lg);
  --bs-card-inner-border-radius: var(--mn-r-lg);
  --bs-card-cap-bg: var(--mn-surface);
  --bs-card-spacer-y: 1.4rem;
  --bs-card-spacer-x: 1.4rem;
  box-shadow: var(--mn-sh-sm) !important;
  transition: box-shadow .3s var(--mn-ease), transform .3s var(--mn-ease), border-color .3s var(--mn-ease);
}
.card.card-hover:hover,
.content .card:hover { border-color: var(--mn-line-2) !important; }
.card-header {
  border-bottom: 1px solid var(--mn-line) !important;
  padding: 1.15rem 1.4rem !important;
  background: transparent !important;
}
.card-title { color: var(--mn-ink) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.card-subtitle, .card .text-muted { color: var(--mn-ink-3) !important; }
.card-footer { background: var(--mn-surface-2) !important; border-top: 1px solid var(--mn-line) !important; }
.card-box { background: var(--mn-surface) !important; border: 1px solid var(--mn-line); border-radius: var(--mn-r-lg); box-shadow: var(--mn-sh-sm); }

/* illustrative stat cards: keep accent number readable */
.card .h1, .card .h2, .card h1, .card h2 { color: var(--mn-ink) !important; }

/* 6) ---------------------------------------------------------- BUTTONS */
.btn {
  --bs-btn-border-radius: var(--mn-r-pill);
  --bs-btn-padding-y: .55rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-font-weight: 600;
  font-weight: 600;
  letter-spacing: .005em;
  transition: transform .25s var(--mn-ease), box-shadow .25s var(--mn-ease),
              background-color .18s var(--mn-ease), border-color .18s var(--mn-ease), color .18s var(--mn-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .8rem; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; }
.btn-round { border-radius: var(--mn-r-pill); }

.btn-primary {
  --bs-btn-bg: var(--mn-accent-strong);
  --bs-btn-border-color: var(--mn-accent-strong);
  --bs-btn-hover-bg: var(--mn-accent-press);
  --bs-btn-hover-border-color: var(--mn-accent-press);
  --bs-btn-active-bg: var(--mn-accent-press);
  --bs-btn-active-border-color: var(--mn-accent-press);
  --bs-btn-disabled-bg: var(--mn-accent-strong);
  --bs-btn-disabled-border-color: var(--mn-accent-strong);
}

.btn-secondary, .btn-light {
  --bs-btn-color: var(--mn-ink);
  --bs-btn-bg: var(--mn-surface);
  --bs-btn-border-color: var(--mn-line-2);
  --bs-btn-hover-color: var(--mn-ink);
  --bs-btn-hover-bg: var(--mn-surface-2);
  --bs-btn-hover-border-color: #cfd3de;
  --bs-btn-active-bg: #f0f1f5;
  --bs-btn-active-border-color: #cfd3de;
  box-shadow: var(--mn-sh-xs);
}
.btn-outline-primary {
  --bs-btn-color: var(--mn-accent);
  --bs-btn-border-color: var(--mn-accent);
  --bs-btn-hover-bg: var(--mn-accent);
  --bs-btn-hover-border-color: var(--mn-accent);
  --bs-btn-active-bg: var(--mn-accent-strong);
}
.btn-outline-secondary {
  --bs-btn-color: var(--mn-ink-2);
  --bs-btn-border-color: var(--mn-line-2);
  --bs-btn-hover-color: var(--mn-ink);
  --bs-btn-hover-bg: var(--mn-surface-2);
  --bs-btn-hover-border-color: #cfd3de;
}
.btn-info {
  --bs-btn-bg: var(--mn-info); --bs-btn-border-color: var(--mn-info);
  --bs-btn-hover-bg: #245fd0; --bs-btn-hover-border-color: #245fd0; --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-success { --bs-btn-bg: var(--mn-ok); --bs-btn-border-color: var(--mn-ok); --bs-btn-hover-bg:#0c8a60; --bs-btn-hover-border-color:#0c8a60; }
.btn-danger  { --bs-btn-bg: var(--mn-danger); --bs-btn-border-color: var(--mn-danger); --bs-btn-hover-bg:#c12539; --bs-btn-hover-border-color:#c12539; }
.btn-warning { --bs-btn-bg: var(--mn-warn); --bs-btn-border-color: var(--mn-warn); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#a4690b; }
.btn-link { --bs-btn-color: var(--mn-accent); --bs-btn-hover-color: var(--mn-accent-strong); text-decoration: none; }

/* 7) ------------------------------------------------------------ FORMS */
.form-label { color: var(--mn-ink) !important; font-weight: 600; font-size: .82rem; margin-bottom: .4rem; }
.col-form-label { color: var(--mn-ink); font-weight: 600; }
.form-control, .form-select {
  background-color: var(--mn-surface-2);
  border: 1px solid var(--mn-line-2);
  border-radius: var(--mn-r-sm);
  color: var(--mn-ink);
  padding: .58rem .8rem;
  transition: border-color .18s var(--mn-ease), box-shadow .18s var(--mn-ease), background-color .18s var(--mn-ease);
}
.form-control::placeholder { color: var(--mn-ink-3); }
.form-control:hover, .form-select:hover { border-color: #d1d5e0; }
.form-control:focus, .form-select:focus {
  background-color: var(--mn-surface);
  border-color: var(--mn-accent);
  box-shadow: 0 0 0 4px var(--mn-accent-soft);
}
.form-control-lg, .form-select-lg { border-radius: var(--mn-r); padding: .75rem .95rem; }
.input-group-text {
  background: var(--mn-surface-2); border: 1px solid var(--mn-line-2); color: var(--mn-ink-2);
  border-radius: var(--mn-r-sm);
}
.form-check-input { border-color: #cfd3de; }
.form-check-input:checked { background-color: var(--mn-accent); border-color: var(--mn-accent); }
.form-check-input:focus { border-color: var(--mn-accent); box-shadow: 0 0 0 4px var(--mn-accent-soft); }
.form-switch .form-check-input:checked { background-color: var(--mn-accent); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--mn-danger); }
.invalid-feedback { color: var(--mn-danger); }

/* 8) ----------------------------------------------------------- TABLES */
/* Borderless, airy tables — no grid lines, generous rows, soft hover.
   Neutralises Bootstrap's .table-bordered grid so every page goes airy. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mn-ink);
  --bs-table-border-color: transparent;
  --bs-table-hover-bg: var(--mn-accent-softer);
  --bs-table-hover-color: var(--mn-ink);
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  color: var(--mn-ink);
}
/* kill ALL default cell borders (incl. table-bordered) */
.table > :not(caption) > * > *,
.table-bordered > :not(caption) > * > * {
  border-width: 0 !important;
  box-shadow: none !important;
  background-color: transparent;
}
.table > thead th, .table > thead td {
  color: var(--mn-ink-3) !important;
  text-transform: uppercase; letter-spacing: .045em;
  font-size: .68rem !important; font-weight: 600;
  background: var(--mn-surface-2) !important;
  border-bottom: 1px solid var(--mn-line) !important;
  padding: .6rem .9rem !important;
  white-space: nowrap;
  vertical-align: middle;
}
.table > thead th:first-child { border-top-left-radius: var(--mn-r-sm); }
.table > thead th:last-child  { border-top-right-radius: var(--mn-r-sm); }
.table > tbody > tr { transition: background-color .15s var(--mn-ease); }
.table > tbody > tr + tr > td { border-top: 1px solid var(--mn-line) !important; }
.table > tbody > tr > td {
  padding: .62rem .9rem !important;
  vertical-align: middle;
  color: var(--mn-ink);
  font-size: .85rem;
}
.table > tbody > tr:hover > td { background-color: var(--mn-accent-softer) !important; }
.table > tbody > tr > td a { color: var(--mn-accent); font-weight: 600; text-decoration: none; }
.table > tbody > tr > td a:hover { color: var(--mn-accent-strong); text-decoration: underline; }
.table > tbody > tr > td strong, .table > tbody > tr > td b { color: var(--mn-ink); font-weight: 700; }
/* primary identifier cell (first data col) reads as the row title */
.table > tbody > tr > td:first-child { color: var(--mn-ink); }
.table-responsive { border-radius: var(--mn-r); }
.card-body > .table-responsive { margin: 0 -.4rem; }

/* 9) ----------------------------------------------------------- BADGES */
.badge {
  font-weight: 600; letter-spacing: .01em;
  padding: .42em .75em; border-radius: var(--mn-r-pill);
  font-size: .72rem;
}
.badge.bg-primary, .badge.bg-indigo { background-color: var(--mn-accent-soft) !important; color: var(--mn-accent-ink) !important; }
.badge.bg-success, .badge.bg-green   { background-color: var(--mn-ok-soft) !important; color: var(--mn-ok) !important; }
.badge.bg-warning, .badge.bg-yellow, .badge.bg-orange { background-color: var(--mn-warn-soft) !important; color: var(--mn-warn) !important; }
.badge.bg-danger, .badge.bg-red      { background-color: var(--mn-danger-soft) !important; color: var(--mn-danger) !important; }
.badge.bg-info, .badge.bg-cyan, .badge.bg-blue { background-color: var(--mn-info-soft) !important; color: var(--mn-info) !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background-color: #eef0f4 !important; color: var(--mn-ink-2) !important; }

/* 10) ------------------------------------------------------- DROPDOWNS */
.dropdown-menu {
  --bs-dropdown-border-color: var(--mn-line);
  --bs-dropdown-border-radius: var(--mn-r);
  --bs-dropdown-link-active-bg: var(--mn-accent-soft);
  --bs-dropdown-link-active-color: var(--mn-accent-ink);
  border: 1px solid var(--mn-line);
  border-radius: var(--mn-r);
  box-shadow: var(--mn-sh-md);
  padding: .4rem;
  background: var(--mn-surface);
}
.dropdown-item { border-radius: var(--mn-r-sm); padding: .5rem .7rem; color: var(--mn-ink-2); font-weight: 500; transition: background-color .15s var(--mn-ease), color .15s var(--mn-ease); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--mn-surface-2); color: var(--mn-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--mn-accent-soft); color: var(--mn-accent-ink); }
.dropdown-item i { color: var(--mn-ink-3); }
.dropdown-divider { border-color: var(--mn-line); }

/* 11) ---------------------------------------------------------- MODALS */
.modal-content {
  border: 1px solid var(--mn-line);
  border-radius: var(--mn-r-lg);
  box-shadow: var(--mn-sh-md);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--mn-line); padding: 1.25rem 1.5rem; }
.modal-title { font-weight: 700; color: var(--mn-ink); letter-spacing: -0.01em; }
.modal-body { padding: 1.5rem; color: var(--mn-ink-2); }
.modal-footer { border-top: 1px solid var(--mn-line); padding: 1rem 1.5rem; background: var(--mn-surface-2); }
.modal-backdrop.show { opacity: .4; backdrop-filter: blur(2px); }

/* 12) -------------------------------------------------- PAGINATION/MISC */
.pagination {
  --bs-pagination-color: var(--mn-ink-2);
  --bs-pagination-border-color: var(--mn-line);
  --bs-pagination-hover-bg: var(--mn-surface-2);
  --bs-pagination-hover-color: var(--mn-ink);
  --bs-pagination-hover-border-color: var(--mn-line);
  --bs-pagination-active-bg: var(--mn-accent);
  --bs-pagination-active-border-color: var(--mn-accent);
  --bs-pagination-focus-box-shadow: 0 0 0 4px var(--mn-accent-soft);
  gap: 4px;
}
.page-link { border-radius: var(--mn-r-sm) !important; margin: 0; font-weight: 600; }
.alert { border: 1px solid var(--mn-line); border-radius: var(--mn-r); }
.alert-success { background: var(--mn-ok-soft); color: var(--mn-ok); border-color: transparent; }
.alert-danger  { background: var(--mn-danger-soft); color: var(--mn-danger); border-color: transparent; }
.alert-warning { background: var(--mn-warn-soft); color: var(--mn-warn); border-color: transparent; }
.alert-info    { background: var(--mn-info-soft); color: var(--mn-info); border-color: transparent; }
.progress { background: var(--mn-line); border-radius: var(--mn-r-pill); }
.progress-bar { background: var(--mn-accent); }
.nav-tabs { --bs-nav-tabs-border-color: var(--mn-line); border-bottom: 1px solid var(--mn-line); }
.nav-tabs .nav-link { color: var(--mn-ink-2); font-weight: 600; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--mn-ink); border-bottom-color: var(--mn-line-2); }
.nav-tabs .nav-link.active { color: var(--mn-accent-ink); background: transparent; border-bottom-color: var(--mn-accent); }
.list-group-item { border-color: var(--mn-line); }
.list-group-item.active { background: var(--mn-accent); border-color: var(--mn-accent); }
code, .text-code { color: var(--mn-accent-ink); }

/* 12b) -------------------------------------------- NEW COMPONENTS (WASIL-grade)
   Reusable building blocks the redesigned pages use. Pure-CSS; pages opt in
   by adding these classes in their Blade markup. */

/* Page header with title + live count/subtitle */
.mn-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mn-page-head h1, .mn-page-head .h1, .mn-page-head .h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.mn-sub { color: var(--mn-ink-3); font-size: .85rem; margin: .25rem 0 0; }
.mn-sub strong { color: var(--mn-accent-ink); }
.mn-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Status pill — soft tinted, with a leading dot */
.mn-status {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .34em .7em; border-radius: var(--mn-r-pill);
  font-size: .73rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  background: #eef0f4; color: var(--mn-ink-2);
}
.mn-status::before { content: ""; width: .46em; height: .46em; border-radius: 50%; background: currentColor; flex: none; }
.mn-status--green  { background: var(--mn-ok-soft);     color: var(--mn-ok); }
.mn-status--amber  { background: var(--mn-warn-soft);   color: var(--mn-warn); }
.mn-status--blue   { background: var(--mn-info-soft);   color: var(--mn-info); }
.mn-status--indigo { background: var(--mn-accent-soft); color: var(--mn-accent-ink); }
.mn-status--red    { background: var(--mn-danger-soft); color: var(--mn-danger); }
.mn-status--gray   { background: #eef0f4;               color: var(--mn-ink-2); }

/* Icon action button — rounded square, used in table action cells */
.mn-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--mn-r-sm);
  background: var(--mn-surface); border: 1px solid var(--mn-line-2);
  color: var(--mn-ink-2); cursor: pointer; box-shadow: var(--mn-sh-xs);
  transition: color .18s var(--mn-ease), border-color .18s var(--mn-ease),
              background .18s var(--mn-ease), transform .18s var(--mn-ease);
  text-decoration: none; margin: 0 2px;
}
.mn-iconbtn:hover { color: var(--mn-accent); border-color: var(--mn-accent-soft); background: var(--mn-accent-softer); transform: translateY(-1px); }
.mn-iconbtn i, .mn-iconbtn svg { font-size: .95rem !important; line-height: 1; }
.mn-actions { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/* Two-line cell helper */
.mn-cell-main { display: block; color: var(--mn-ink); font-weight: 600; }
.mn-cell-sub  { display: block; color: var(--mn-ink-3); font-size: .76rem; margin-top: 1px; }

/* select2 (JS dropdowns) — make them match .form-control */
.select2-container .select2-selection--single {
  height: auto !important; min-height: 42px;
  background: var(--mn-surface-2) !important;
  border: 1px solid var(--mn-line-2) !important;
  border-radius: var(--mn-r-sm) !important;
  display: flex; align-items: center; padding: .25rem .25rem;
  transition: border-color .18s var(--mn-ease), box-shadow .18s var(--mn-ease);
}
.select2-container--open .select2-selection--single,
.select2-container .select2-selection--single:focus {
  border-color: var(--mn-accent) !important; box-shadow: 0 0 0 4px var(--mn-accent-soft);
}
.select2-selection--single .select2-selection__rendered { color: var(--mn-ink) !important; padding-left: .55rem !important; line-height: 1.6 !important; }
.select2-selection--single .select2-selection__placeholder { color: var(--mn-ink-3) !important; }
.select2-selection--single .select2-selection__arrow { height: 100% !important; }
.select2-container--default .select2-selection--multiple {
  background: var(--mn-surface-2) !important; border: 1px solid var(--mn-line-2) !important; border-radius: var(--mn-r-sm) !important;
}
.select2-dropdown {
  border: 1px solid var(--mn-line) !important; border-radius: var(--mn-r) !important;
  box-shadow: var(--mn-sh-md) !important; overflow: hidden; padding: .3rem;
}
.select2-search--dropdown .select2-search__field { border: 1px solid var(--mn-line-2) !important; border-radius: var(--mn-r-sm) !important; padding: .45rem .6rem; }
.select2-results__option { border-radius: var(--mn-r-sm); padding: .5rem .65rem; color: var(--mn-ink-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mn-accent-soft) !important; color: var(--mn-accent-ink) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--mn-surface-2) !important; color: var(--mn-ink) !important; font-weight: 600; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--mn-accent-soft) !important; border: 0 !important; color: var(--mn-accent-ink) !important; border-radius: var(--mn-r-pill) !important; padding: .15rem .6rem;
}

/* Filter accordion card (x-accordian.filter) */
.accordion, .accordion-item { border: 0 !important; background: transparent !important; }
.accordion-item {
  background: var(--mn-surface) !important; border: 1px solid var(--mn-line) !important;
  border-radius: var(--mn-r-lg) !important; box-shadow: var(--mn-sh-sm); overflow: hidden; margin-bottom: 1.25rem;
}
.accordion-button {
  background: var(--mn-surface) !important; color: var(--mn-ink) !important;
  font-weight: 700 !important; letter-spacing: -0.01em; padding: 1.05rem 1.4rem !important; box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--mn-ink) !important; background: var(--mn-surface) !important; box-shadow: none !important; }
.accordion-button:focus { box-shadow: none !important; }
.accordion-button::after { filter: grayscale(1) opacity(.5); }
.accordion-body { padding: 1.1rem 1.4rem 1.4rem !important; }

/* Filter quick-chips (opt-in) */
.mn-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mn-chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4rem .85rem; border-radius: var(--mn-r-pill);
  background: var(--mn-surface); border: 1px solid var(--mn-line); color: var(--mn-ink-2);
  font-size: .8rem; font-weight: 600; cursor: pointer; box-shadow: var(--mn-sh-xs);
  transition: all .18s var(--mn-ease); text-decoration: none;
}
.mn-chip:hover { border-color: var(--mn-accent-soft); color: var(--mn-ink); }
.mn-chip.active, .mn-chip[aria-selected="true"] { background: var(--mn-accent); border-color: var(--mn-accent); color: #fff; box-shadow: var(--mn-sh-accent); }

/* 13) ----------------------------------------------------------- LOGIN */
/* Guest / auth pages: airy gradient wash + refined centered card */
main.d-flex {
  background-image:
    radial-gradient(820px 440px at 80% -10%, var(--mn-accent-softer), transparent 60%),
    radial-gradient(640px 380px at -8% 10%, #eef4ff, transparent 55%);
}
main.d-flex .card {
  border: 1px solid var(--mn-line) !important;
  border-radius: var(--mn-r-lg) !important;
  box-shadow: var(--mn-sh-md) !important;
}
main.d-flex .card-body { padding: 2.25rem !important; }
main.d-flex .btn-primary { width: 100%; }

/* 14) ---------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: mnFade .5s var(--mn-ease) both; }
  @keyframes mnFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* 15) ------------------------------------------------ FIXED TOP BAR + BRAND
   New admin shell: a sticky top bar (page title/subtitle + account), a big
   Mnween logo in the sidebar, and a collapsible sidebar. */

/* sidebar brand → big logo */
.sidebar-brand.mn-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 1.15rem 1.2rem .9rem !important;
  border-bottom: 1px solid var(--mn-line);
  margin-bottom: .35rem;
}
.mn-brand__mark { width: 34px; height: 34px; object-fit: contain; flex: none; }
.mn-brand__word { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--mn-ink) !important; line-height: 1; }

/* the fixed top bar */
.mn-topbar {
  position: sticky; top: 0; z-index: 1025;
  display: flex; align-items: center; gap: 14px;
  padding: .65rem 1.4rem;
  background: var(--mn-surface);
  border-bottom: 1px solid var(--mn-line);
}
.mn-topbar__icon {
  width: 38px; height: 38px; flex: none; border-radius: var(--mn-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mn-surface); border: 1px solid var(--mn-line-2); color: var(--mn-ink-2);
  cursor: pointer; transition: color .16s var(--mn-ease), border-color .16s var(--mn-ease), background .16s var(--mn-ease);
}
.mn-topbar__icon:hover { color: var(--mn-accent); border-color: var(--mn-accent-soft); background: var(--mn-accent-softer); }
.mn-topbar__titles { margin-right: auto; min-width: 0; }
.mn-topbar__title {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--mn-ink);
  margin: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-topbar__sub { font-size: .78rem; color: var(--mn-ink-3); margin-top: 1px; }
.mn-topbar__actions { display: flex; align-items: center; gap: 10px; }

/* account chip + dropdown */
.mn-account {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: var(--mn-r-pill);
  border: 1px solid var(--mn-line-2); background: var(--mn-surface);
  text-decoration: none; transition: border-color .16s var(--mn-ease), background .16s var(--mn-ease);
}
.mn-account:hover { border-color: #cfd3de; background: var(--mn-surface-2); }
.mn-account__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--mn-accent-soft); color: var(--mn-accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.mn-account__meta { display: flex; flex-direction: column; line-height: 1.12; }
.mn-account__name { font-size: .85rem; font-weight: 600; color: var(--mn-ink); }
.mn-account__role { font-size: .68rem; color: var(--mn-ink-3); text-transform: capitalize; }
.mn-account__caret { font-size: .7rem; color: var(--mn-ink-3); margin-left: 2px; }
@media (max-width: 575px) { .mn-account__meta { display: none; } .mn-topbar__sub { display: none; } }

/* collapsible sidebar (width-agnostic, persisted via <html data-mn-nav>) */
#sidebar { transition: width .22s var(--mn-ease), min-width .22s var(--mn-ease); }
html[data-mn-nav="collapsed"] #sidebar { width: 0 !important; min-width: 0 !important; overflow: hidden; border: 0 !important; }

/* sidebar group divider — the top operational groups separate with a line, not a label */
.sidebar-nav .mn-nav-sep { height: 1px; padding: 0; margin: .55rem .9rem; background: var(--mn-line); list-style: none; }
.sidebar-nav .mn-nav-sep:first-child { display: none; }

/* segmented stage tabs (merged Purchasing page) */
.mn-stage-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--mn-surface-2); border: 1px solid var(--mn-line); border-radius: var(--mn-r); padding: 4px; margin-bottom: 1.25rem; }
.mn-stage-tab { display: inline-flex; align-items: center; gap: 8px; padding: .5rem .95rem; border-radius: var(--mn-r-sm); font-weight: 600; font-size: .85rem; color: var(--mn-ink-2); text-decoration: none; white-space: nowrap; transition: background .15s var(--mn-ease), color .15s var(--mn-ease); }
.mn-stage-tab:hover { background: var(--mn-surface); color: var(--mn-ink); }
.mn-stage-tab.is-active { background: var(--mn-accent-strong); color: #fff; }
.mn-stage-tab__count { font-size: .72rem; font-weight: 700; background: rgba(20,21,26,.08); color: inherit; border-radius: var(--mn-r-pill); padding: 1px 8px; min-width: 20px; text-align: center; }
.mn-stage-tab.is-active .mn-stage-tab__count { background: rgba(255,255,255,.24); }

/* the page title now lives in the top bar — hide the duplicate in-content heading */
.content h1.h3 { display: none !important; }

/* 16) ----------------------------------------------------------- DARK THEME
   Re-maps the design tokens; because the whole admin is var-driven, this
   cascades to sidebar, top bar, cards, tables, forms, etc. Best-effort —
   a few pages with hard-coded inline colors stay light. */
html[data-mn-theme="dark"] {
  --mn-bg:        #0f1116;
  --mn-surface:   #171a22;
  --mn-surface-2: #1e222c;
  --mn-ink:       #eceff5;
  --mn-ink-2:     #c4cad6;
  --mn-ink-3:     #8a92a3;
  --mn-line:      #272c38;
  --mn-line-2:    #313747;
  --mn-accent-soft:   #15314d;
  --mn-accent-softer: #121b29;
  --mn-accent-ink:    #7db8f5;

  --bs-body-bg:        #0f1116;
  --bs-body-color:     #eceff5;
  --bs-border-color:   #272c38;
  --bs-secondary-color:#c4cad6;
  --bs-card-bg:        #171a22;
}
html[data-mn-theme="dark"] body { background-color: var(--mn-bg) !important; color: var(--mn-ink) !important; }
html[data-mn-theme="dark"] .main { background: var(--mn-bg) !important; }
html[data-mn-theme="dark"] .mn-brand__mark { filter: invert(1) brightness(1.7); }
html[data-mn-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a4150; border-color: var(--mn-bg); }

/* 17) -------------------------------------------------- LUCIDE ICONS
   Modern, round, outlined icon set (replaces Font Awesome). Lucide swaps
   [data-lucide] tags into <svg>; size them like a text glyph (1em) so they
   drop in wherever an .fa icon used to sit, inheriting colour + font-size. */
.lucide, svg.lucide {
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  display: inline-block;
  stroke-width: 2;
  flex: none;
}
/* spacing before label text in buttons / links / menu items / sidebar */
.btn .lucide, .dropdown-item .lucide, .nav-link .lucide,
.sidebar-link .lucide, .alert .lucide, .page-link .lucide { margin-right: .45em; }
/* icon-only controls: no trailing gap, slightly larger glyph */
.mn-iconbtn .lucide, .mn-topbar__icon .lucide, .mn-actions .lucide,
.btn-sm.mn-iconbtn .lucide { margin-right: 0; width: 1.05em; height: 1.05em; }
.sidebar-link .lucide { width: 1.15em; height: 1.15em; }