/* =====================================================================
   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) {
  /* fill-mode was "both": after the animation the element KEPT the final
     keyframe, and transform:none filled as an identity matrix. A transformed
     element becomes the containing block + stacking context for its fixed
     descendants, which trapped every Bootstrap modal below its backdrop
     (dialog visible but unclickable). "backwards" plays the same animation
     and then reverts to the element's own styles -- no leftover transform. */
  .content > * { animation: mnFade .5s var(--mn-ease) backwards; }
  @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; }

/* ── Mobile sidebar (≤991px): off-canvas drawer opened by the topbar hamburger ──
   The theme keeps .sidebar off-screen on small screens (margin-left:-264px). The
   desktop collapse (html[data-mn-nav=collapsed] → width:0) then dragged .main 264px
   to the left, leaving a blank strip on the right and an unusable page. On mobile
   the toggle flips <html data-mn-nav-mobile="open"> instead (never persisted) and
   the sidebar slides in over the content with a dimmed backdrop. */
@media (max-width: 991.98px) {
  #sidebar,
  html[data-mn-nav="collapsed"] #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050;
    width: 264px !important; min-width: 264px !important; max-width: 264px !important;
    margin-left: 0 !important;
    border-right: 1px solid var(--mn-line) !important;
    transform: translateX(-100%);
    transition: transform .22s var(--mn-ease);
  }
  html[data-mn-nav-mobile="open"] #sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45);
  }
  .main { width: 100%; min-width: 0; margin-left: 0 !important; }
  .wrapper { overflow-x: hidden; }
  html[data-mn-nav-mobile="open"] body::after {
    content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1049; background: rgba(15, 17, 23, .5);
  }
}