:root {
  /* المورد ERP design system — client-supplied brand palette + reference mockup.
     Modern SaaS ERP: strong colors reserved for meaningful things (primary action,
     status), generous white space, soft shadows, no heavy gradients. */
  --mw-primary: #2563eb;
  --mw-primary-dark: #1d4ed8;
  --mw-primary-light: #eaf1fe;
  --mw-navy: #0f2747;
  --mw-turquoise: #14b8a6;
  --mw-purple: #8b5cf6;
  --mw-orange: #f59e0b;
  --mw-danger: #ef4444;
  --mw-success: #14b8a6;

  /* A distinct display face for headings/titles/big numbers, separate from the body
     face (Tajawal), so the UI reads as designed rather than "one font sized differently
     everywhere". El Messiri has a warmer, more characterful letterform at display sizes
     while staying legible and professional. */
  --mw-font-display: "El Messiri", "Tajawal", "Segoe UI", Tahoma, sans-serif;

  /* Kept for the small number of rules still written against the old names. */
  --mw-primary-darker: var(--mw-navy);
  --mw-accent: var(--mw-orange);
  --mw-accent-dark: #d98a08;

  --mw-bg: #f7f9fc;
  --mw-surface: #ffffff;
  --mw-sidebar-bg: #ffffff;
  --mw-sidebar-active-bg: var(--mw-primary-light);
  --mw-text: #0f2747;
  --mw-text-muted: #64748b;
  --mw-border: #e6eaf1;
  --mw-sidebar-width: 260px;
  --mw-topbar-height: 64px;

  --mw-radius-sm: 10px;
  --mw-radius-md: 12px;
  --mw-radius-lg: 14px;
  --mw-shadow-sm: 0 2px 6px rgba(15, 39, 71, .07);
  --mw-shadow-md: 0 8px 20px rgba(15, 39, 71, .08);
  --mw-shadow-lg: 0 20px 40px rgba(15, 39, 71, .22);
  --mw-ease: cubic-bezier(.22, .8, .3, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mw-primary: #3b82f6;
  --mw-primary-dark: #2563eb;
  --mw-primary-light: #14243b;
  --mw-navy: #0b1f35;
  --mw-turquoise: #2dd4bf;
  --mw-purple: #a78bfa;
  --mw-orange: #fbbf24;
  --mw-danger: #f87171;
  --mw-success: #2dd4bf;

  --mw-primary-darker: #081525;
  --mw-accent: var(--mw-orange);
  --mw-accent-dark: #e0af00;

  --mw-bg: #081525;
  --mw-surface: #10263d;
  --mw-sidebar-bg: #0b1f35;
  --mw-sidebar-active-bg: #16324f;
  --mw-text: #f8fafc;
  --mw-text-muted: #94a3b8;
  --mw-border: #1f3a55;
  --mw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --mw-shadow-md: 0 8px 20px rgba(0, 0, 0, .45);
  --mw-shadow-lg: 0 20px 40px rgba(0, 0, 0, .6);
}

body, .mw-content, .mw-topbar, .mw-card, .mw-sidebar, .form-control, .form-select {
  transition: background-color .2s var(--mw-ease), color .2s var(--mw-ease), border-color .2s var(--mw-ease);
}

/* ---- Theme toggle button ---- */
.mw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  color: var(--mw-text);
  cursor: pointer;
  transition: background-color .15s var(--mw-ease), transform .15s var(--mw-ease);
}
.mw-theme-toggle:hover {
  background: var(--mw-bg);
  transform: rotate(15deg);
}
:root[data-theme="dark"] .mw-theme-toggle .bi-moon-stars-fill { display: none; }
:root:not([data-theme="dark"]) .mw-theme-toggle .bi-sun-fill { display: none; }

/* ---- Dark-mode component overrides (Bootstrap 5.1 has no built-in dark mode) ---- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: var(--mw-surface);
  border-color: var(--mw-border);
  color: var(--mw-text);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  background-color: var(--mw-surface);
  color: var(--mw-text);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--mw-text-muted); }
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled {
  background-color: var(--mw-bg);
  color: var(--mw-text-muted);
}
:root[data-theme="dark"] .table { color: var(--mw-text); }
:root[data-theme="dark"] table.mw-table thead th {
  background-color: var(--mw-bg);
  color: var(--mw-text-muted);
  border-bottom-color: var(--mw-border);
}
:root[data-theme="dark"] table.mw-table tbody tr:hover { background-color: rgba(255,255,255,.03); }
:root[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--mw-border); color: var(--mw-text); }
:root[data-theme="dark"] .modal-content { background-color: var(--mw-surface); color: var(--mw-text); }
:root[data-theme="dark"] .dropdown-menu {
  background-color: var(--mw-surface);
  border-color: var(--mw-border);
  color: var(--mw-text);
}
:root[data-theme="dark"] .dropdown-item { color: var(--mw-text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--mw-bg);
  color: var(--mw-text);
}
:root[data-theme="dark"] .btn-outline-secondary {
  color: var(--mw-text-muted);
  border-color: var(--mw-border);
}
:root[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--mw-border);
  color: var(--mw-text);
  border-color: var(--mw-border);
}
:root[data-theme="dark"] .alert-danger {
  background-color: color-mix(in srgb, var(--mw-danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--mw-danger) 40%, transparent);
  color: #fca5a5;
}
.alert-danger {
  border-color: color-mix(in srgb, var(--mw-danger) 30%, transparent);
  background-color: color-mix(in srgb, var(--mw-danger) 10%, white);
  color: #991b1b;
  border-radius: var(--mw-radius-sm);
}
:root[data-theme="dark"] .text-muted { color: var(--mw-text-muted) !important; }
:root[data-theme="dark"] hr { border-color: var(--mw-border); opacity: 1; }
:root[data-theme="dark"] .am-skel-bar {
  background: linear-gradient(90deg, #232f33 25%, #2b3a3e 37%, #232f33 63%);
  background-size: 400% 100%;
}

html {
  /* Almost every size in this file (and in Bootstrap itself) is in rem, so this one line
     rescales the whole app at once. The unset browser default (16px) made every screen run
     ~14% larger than the 13-14px base most dense admin/ERP UIs (Fiori, Fluent, Ant Design,
     Salesforce Lightning) actually use. */
  font-size: 14px;
}

html, body {
  height: 100%;
  min-height: 100dvh;
  /* The off-canvas sidebar is position:fixed + transform:translateX(...) so it can slide in;
     that combination still counts toward the document's horizontal scroll extent even while
     it sits visually outside the viewport, so without this the whole page gains a horizontal
     scrollbar on any screen narrow enough to collapse the sidebar (see the 900px breakpoint). */
  overflow-x: hidden;
}

body {
  background-color: var(--mw-bg);
  color: var(--mw-text);
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mw-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ---- Motion & focus ----------------------------------------------------------
   A few small, purely additive touches so the app doesn't feel like it just snaps
   between static states: pages cross-fade instead of hard-cutting on navigation
   (native browser feature, degrades to nothing on unsupported browsers), the main
   content settles in on load instead of appearing instantly, and every focusable
   element gets one consistent keyboard-focus ring instead of the browser default.
   All gated behind prefers-reduced-motion so nothing moves for anyone who asked
   the OS to avoid motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .mw-content {
    animation: mw-content-in .28s var(--mw-ease);
  }
  @keyframes mw-content-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

:focus-visible {
  outline: 2px solid var(--mw-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

a {
  color: var(--mw-primary);
}
a:hover {
  color: var(--mw-primary-dark);
}

/* ---- Brand ---- */
.mw-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.25rem;
  color: var(--mw-text);
  text-decoration: none;
  border-bottom: 1px solid var(--mw-border);
}
.mw-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--mw-turquoise), var(--mw-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}
.mw-logo-glyph {
  font-size: 1.2rem;
  color: #fff;
}
.mw-login-hero-icon .mw-logo-glyph {
  font-size: 2.4rem;
}
.mw-brand-text .mw-brand-ar {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--mw-text);
}
.mw-brand-text .mw-brand-en {
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--mw-text-muted);
  text-transform: uppercase;
}

/* ---- Layout shell ---- */
.mw-shell {
  min-height: 100vh;
  display: flex;
}

.mw-sidebar {
  width: var(--mw-sidebar-width);
  flex-shrink: 0;
  background: var(--mw-sidebar-bg);
  border-inline-end: 1px solid var(--mw-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}
[dir="ltr"] .mw-sidebar {
  right: auto;
  left: 0;
}

.mw-nav {
  padding: .75rem;
  overflow-y: auto;
  flex: 1;
}
.mw-nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  color: var(--mw-text-muted);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  margin-bottom: .15rem;
  transition: background-color .15s ease, color .15s ease;
}
.mw-nav-link:hover {
  background: var(--mw-bg);
  color: var(--mw-text);
}
.mw-nav-link.active {
  background: var(--mw-sidebar-active-bg);
  color: var(--mw-primary);
  font-weight: 700;
  position: relative;
}
.mw-nav-link.active::before {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  inset-inline-start: -.75rem;
  width: 3px;
  border-radius: 3px;
  background: var(--mw-primary);
}
.mw-nav-link i {
  width: 18px;
  text-align: center;
  opacity: .9;
}

.mw-nav-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .85rem .35rem;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
}
.mw-nav-section:hover {
  color: var(--mw-text);
}
.mw-nav-section-caret {
  font-size: .7rem;
  transition: transform .15s var(--mw-ease);
}
.mw-nav-group {
  overflow: hidden;
  max-height: 2000px;
  transition: max-height .2s var(--mw-ease);
}
.mw-nav-group.is-collapsed {
  max-height: 0;
}
.mw-nav-section.is-collapsed .mw-nav-section-caret {
  transform: rotate(-90deg);
}

.mw-main {
  flex: 1;
  margin-right: var(--mw-sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[dir="ltr"] .mw-main {
  margin-right: 0;
  margin-left: var(--mw-sidebar-width);
}

/* Treemap and Gantt draw a couple of background rects (row-label panel, canvas)
   that ignore the JSON chart.bgColor/canvasBgColor config other chart types respect -
   confirmed by reading the actual rendered SVG. CSS patches the two exact hardcoded
   fills rather than fighting the library, scoped to just these two chart containers
   so it can't repaint an intentional white element on any other chart type. */
:root[data-theme="dark"] #stock-value-treemap-chart rect[fill="#ffffff"],
:root[data-theme="dark"] #stock-value-treemap-chart rect[fill="#fafafa"],
:root[data-theme="dark"] #cheques-timeline-chart rect[fill="#ffffff"],
:root[data-theme="dark"] #cheques-timeline-chart rect[fill="#fafafa"],
:root[data-theme="dark"] #cheques-timeline-chart rect[style*="fill:#ffffff"],
:root[data-theme="dark"] #cheques-timeline-chart rect[style*="fill: #ffffff"] {
  fill: #10263d !important;
}

/* Thin top bar giving instant feedback on navigation click, since every page
   transition here is a full server round-trip with no other loading indicator. */
.mw-page-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--mw-primary), var(--mw-turquoise));
  z-index: 2100;
  opacity: 0;
  transition: width .6s var(--mw-ease), opacity .2s var(--mw-ease);
}
.mw-page-progress.is-active {
  width: 78%;
  opacity: 1;
}

.mw-topbar {
  height: var(--mw-topbar-height);
  background: var(--mw-surface);
  border-bottom: 1px solid var(--mw-border);
  box-shadow: var(--mw-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.mw-topbar h1 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--mw-text);
  white-space: nowrap;
}

/* ---- Global quick search (Ctrl+K) ---- */
.mw-quick-search {
  position: relative;
  flex: 1;
  max-width: 380px;
  margin: 0 1.5rem;
}
.mw-quick-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: .85rem;
  transform: translateY(-50%);
  color: var(--mw-text-muted);
  pointer-events: none;
}
.mw-quick-search input.form-control {
  padding-inline-start: 2.4rem;
  padding-inline-end: 3.5rem;
  background: var(--mw-bg);
  border-color: var(--mw-border);
}
.mw-quick-search-kbd {
  position: absolute;
  top: 50%;
  inset-inline-end: .6rem;
  transform: translateY(-50%);
  font-size: .7rem;
  color: var(--mw-text-muted);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: 4px;
  padding: .1rem .35rem;
  pointer-events: none;
}
.mw-quick-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1050;
  padding: .5rem 0;
}
.mw-quick-search-results.show { display: block; }
.mw-quick-search-group-title {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mw-text-muted);
  padding: .4rem 1rem .2rem;
}
.mw-quick-search-item {
  display: block;
  padding: .5rem 1rem;
  color: var(--mw-text);
  text-decoration: none;
  font-size: .9rem;
}
.mw-quick-search-item:hover,
.mw-quick-search-item.is-active {
  background: var(--mw-bg);
  color: var(--mw-primary);
}
.mw-quick-search-empty {
  padding: 1rem;
  text-align: center;
  color: var(--mw-text-muted);
  font-size: .85rem;
}
@media (max-width: 900px) {
  .mw-quick-search { display: none; }
}

.mw-content {
  padding: 1.5rem;
  flex: 1;
}

.mw-user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--mw-text);
  text-decoration: none;
}
.mw-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mw-primary), var(--mw-navy));
  box-shadow: 0 0 0 2px var(--mw-surface), 0 0 0 3.5px color-mix(in srgb, var(--mw-primary) 40%, transparent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
}

/* ---- Cards / tables ---- */
.mw-card {
  /* .mw-card is a static content wrapper (a list, a form) - it is never itself a link
     or button, so unlike .am-stat-card/.mw-report-card it gets no hover elevation:
     lifting a box that does nothing on click just teaches users to distrust the cue. */
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-sm);
}
.mw-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mw-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mw-card-body {
  padding: 1.25rem;
  /* A table wider than the card (list tables in .p-0 bodies, the Roles permission matrix,
     etc.) scrolls sideways within the card on a narrow screen instead of squeezing its
     columns unreadable or, worse, getting silently clipped by html's overflow-x:hidden. */
  overflow-x: auto;
}

.btn-mw-primary {
  background-color: var(--mw-primary);
  border-color: var(--mw-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--mw-radius-sm);
  transition: background-color .15s var(--mw-ease), border-color .15s var(--mw-ease), transform .1s var(--mw-ease), box-shadow .15s var(--mw-ease);
}
.btn-mw-primary:hover {
  background-color: var(--mw-primary-dark);
  border-color: var(--mw-primary-dark);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--mw-primary) 35%, transparent);
}
.btn-mw-primary:active {
  transform: translateY(1px);
}
.btn {
  /* Only .btn-mw-primary set its own radius before this - every other variant
     (outline-secondary, outline-danger, success, btn-mw-accent...) fell back to
     Bootstrap's raw 6px default, so a "حفظ" + "إلغاء" pair sat side by side with
     two visibly different corner radii. */
  border-radius: var(--mw-radius-sm);
  transition: transform .08s var(--mw-ease), box-shadow .15s var(--mw-ease), background-color .15s var(--mw-ease), border-color .15s var(--mw-ease);
}
.btn:not(.mw-line-remove):not(.mw-row-actions-toggle):active {
  transform: translateY(1px);
}
.btn-mw-accent {
  background-color: var(--mw-accent);
  border-color: var(--mw-accent);
  color: #33240a;
  font-weight: 600;
}
.btn-mw-accent:hover {
  background-color: var(--mw-accent-dark);
  border-color: var(--mw-accent-dark);
  color: #2a1e08;
}

table.mw-table {
  /* Without this a narrow viewport shrinks the table to fit by wrapping every cell onto
     several lines instead of letting the .mw-card-body.p-0 wrapper scroll it sideways. */
  min-width: max-content;
}
table.mw-table thead th {
  background-color: var(--mw-bg);
  font-weight: 700;
  font-size: .82rem;
  color: var(--mw-text-muted);
  border-bottom: 1px solid var(--mw-border);
  padding: .85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.mw-table tbody td {
  padding: .8rem 1rem;
  vertical-align: middle;
  font-size: .9rem;
}
table.mw-table td.text-end,
table.mw-table th.text-end {
  font-variant-numeric: tabular-nums;
}
table.mw-table tbody tr {
  transition: background-color .12s var(--mw-ease);
}
table.mw-table tbody tr:hover {
  background-color: var(--mw-bg);
}
table.mw-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table wrapped in a scrollable region (long lists) keeps its header visible while scrolling. */
.mw-card-body.p-0 > .table-responsive,
.table-responsive.mw-table-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.badge {
  font-weight: 600;
  padding: .45em .8em;
  border-radius: 999px;
  font-size: .8rem;
  letter-spacing: .01em;
  line-height: 1.5;
}
.badge-active { background-color: var(--mw-success); }
.badge-inactive { background-color: var(--mw-text-muted); }
.badge-warning { background-color: var(--mw-orange); color: #fff; }
.badge-danger { background-color: var(--mw-danger); }
.badge-info { background-color: var(--mw-primary); }

/* ---- Actions menu (three-dot dropdown) for table rows ---- */
.mw-row-actions-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--mw-text-muted);
}
.mw-row-actions-toggle:hover {
  background: var(--mw-bg);
  color: var(--mw-text);
}
.mw-row-actions-toggle::after { display: none; }

/* ---- Forms: consistent height, clear labels, calm validation ---- */
.form-label {
  font-weight: 600;
  font-size: .87rem;
  color: var(--mw-text);
  margin-bottom: .4rem;
}
.form-control,
.form-select {
  min-height: 42px;
  border-radius: var(--mw-radius-sm);
  border-color: var(--mw-border);
  font-size: .9rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mw-primary) 15%, transparent);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--mw-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mw-danger) 15%, transparent);
}
.text-danger.small,
.invalid-feedback,
.field-validation-error {
  font-size: .8rem;
  margin-top: .25rem;
  display: block;
}
textarea.form-control {
  min-height: auto;
}
.form-check-input:checked {
  background-color: var(--mw-primary);
  border-color: var(--mw-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mw-primary) 15%, transparent);
}

/* ---- Login page ---- */
/* Desktop split: left branding ~55%, right login card ~45%, on one shared
   photo background with a light wash overlay for legibility — matches the
   approved reference design. */
.mw-login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 2rem;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mw-bg) 42%, transparent), color-mix(in srgb, var(--mw-bg) 50%, transparent)),
    url("/images/BackgroundImage.png") center / cover no-repeat;
}

.mw-login-panel-topbar {
  position: absolute;
  top: 1.75rem;
  inset-inline-end: 2.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Left showcase panel: brand + pitch + module grid + quote, floating
   directly on the shared photo background (no box of its own). */
.mw-login-showcase {
  order: 2;
  flex: 0 0 55%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 100%;
  padding-bottom: 4rem;
}
.mw-login-showcase-top {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 2.25rem;
}
.mw-login-showcase-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.mw-login-showcase-slogan {
  color: var(--mw-text-muted);
  font-size: .9rem;
  margin-inline-start: calc(44px + .6rem);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--mw-bg) 55%, transparent);
}
.mw-login-showcase-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--mw-text);
  max-width: 520px;
  text-wrap: balance;
  margin-bottom: .85rem;
  line-height: 1.3;
  text-shadow: 0 1px 4px color-mix(in srgb, var(--mw-bg) 55%, transparent);
}
.mw-login-showcase-text {
  color: var(--mw-text-muted);
  max-width: 480px;
  margin-bottom: 1.75rem;
  line-height: 1.7;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--mw-bg) 55%, transparent);
}
.mw-login-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  max-width: 600px;
  margin-bottom: 1.5rem;
}
.mw-login-feature {
  background: color-mix(in srgb, var(--mw-surface) 70%, transparent);
  border: 1px solid var(--mw-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 39, 71, .04);
  padding: .95rem .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  font-size: .76rem;
  font-weight: 600;
  color: var(--mw-text);
}
.mw-login-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--mw-primary);
  background: color-mix(in srgb, var(--mw-primary) 12%, transparent);
}
.mw-login-feature-icon.is-turquoise { color: var(--mw-turquoise); background: color-mix(in srgb, var(--mw-turquoise) 14%, transparent); }
.mw-login-feature-icon.is-purple { color: var(--mw-purple); background: color-mix(in srgb, var(--mw-purple) 14%, transparent); }
.mw-login-feature-icon.is-accent { color: var(--mw-orange); background: color-mix(in srgb, var(--mw-orange) 16%, transparent); }
.mw-login-feature-icon.is-danger { color: var(--mw-danger); background: color-mix(in srgb, var(--mw-danger) 14%, transparent); }
.mw-login-feature-icon.is-muted { color: var(--mw-text-muted); background: color-mix(in srgb, var(--mw-text-muted) 14%, transparent); }
.mw-login-quote {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--mw-navy);
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--mw-bg) 55%, transparent);
}
.mw-login-quote i {
  color: var(--mw-turquoise);
  font-size: 1.3rem;
}

/* Bottom-right corner line, floating over the shared photo background —
   a small translucent chip keeps it legible and visually anchored
   regardless of what sits behind it in the photo. */
.mw-login-corner-quote {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: end;
  color: var(--mw-navy);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.5;
  z-index: 1;
  padding: .5rem .85rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mw-surface) 45%, transparent);
  backdrop-filter: blur(3px);
}
.mw-login-showcase-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--mw-text-muted);
  font-size: .78rem;
  z-index: 1;
  padding: .35rem .65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mw-surface) 40%, transparent);
}

/* Right side: login area. */
.mw-login-area {
  order: 1;
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.mw-login-panel {
  width: 100%;
  max-width: 500px;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px -20px rgba(15, 39, 71, .16);
  padding: 40px;
}
.mw-login-panel-inner {
  width: 100%;
}
.mw-login-panel-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
}
.mw-login-panel-inner .mw-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 20px;
}
.mw-login-panel-inner .mw-logo-glyph {
  font-size: 1.6rem;
}
.mw-login-panel-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--mw-text);
  margin-bottom: 7px;
}
.mw-login-panel-subtitle {
  color: var(--mw-text-muted);
  font-size: .9rem;
}
.mw-login-field {
  margin-bottom: 19px;
}
.mw-login-remember-row {
  margin-bottom: 22px;
}
.mw-login-forgot {
  font-size: .85rem;
  text-decoration: none;
  color: var(--mw-primary);
  font-weight: 600;
}
.mw-login-forgot:hover { color: var(--mw-primary-dark); }
.mw-login-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--mw-text-muted);
  font-size: .8rem;
}
.mw-login-divider::before,
.mw-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mw-border);
}
.mw-login-security {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  margin-top: 22px;
  text-align: center;
}
.mw-login-security i {
  color: var(--mw-turquoise);
  font-size: 1.1rem;
  margin-top: .15rem;
}
.mw-login-security-title {
  color: var(--mw-text);
  font-size: .82rem;
  font-weight: 700;
}
.mw-login-security-text {
  color: var(--mw-text-muted);
  font-size: .76rem;
}
.mw-login-input {
  position: relative;
}
.mw-login-input > i {
  position: absolute;
  top: 50%;
  inset-inline-start: .95rem;
  transform: translateY(-50%);
  color: var(--mw-text-muted);
  font-size: .95rem;
  pointer-events: none;
}
.mw-login-input .form-control {
  height: 52px;
  padding-inline-start: 2.6rem;
  border-radius: var(--mw-radius-sm);
  border-color: var(--mw-border);
}
.mw-login-input .form-control:focus {
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-primary) 14%, transparent);
}
.mw-login-input-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: .5rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--mw-text-muted);
  padding: 0;
}
.mw-login-input-toggle:hover {
  color: var(--mw-text);
}
.mw-login-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--mw-text-muted);
  font-size: .85rem;
}
.mw-login-lang select {
  border: none;
  background: transparent;
  color: var(--mw-text-muted);
  font-size: .85rem;
}
.btn-mw-primary.mw-login-submit {
  height: 52px;
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .mw-login-showcase-title { font-size: 1.8rem; }
}
@media (max-width: 992px) {
  .mw-login-showcase { flex: 0 0 50%; max-width: 50%; }
  .mw-login-area { flex: 0 0 50%; max-width: 50%; padding: 1.25rem; }
  .mw-login-panel { padding: 28px; }
  .mw-login-showcase-title { font-size: 1.5rem; }
  .mw-login-features { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .mw-login-corner-quote, .mw-login-showcase-footer { position: static; text-align: center; margin-top: 1rem; }
}
@media (max-width: 700px) {
  .mw-login-shell { flex-direction: column; background-attachment: scroll; }
  .mw-login-showcase { display: none; }
  .mw-login-area { order: 2; flex: 1 1 auto; max-width: 100%; width: 100%; padding: 1.25rem; }
  .mw-login-panel { padding: 28px 20px; max-width: 440px; }
  .mw-login-panel-topbar {
    order: 1;
    position: static;
    width: 100%;
    justify-content: center;
    padding: 1.25rem 1.25rem 0;
  }
}

/* ---- KPI stat cards (dashboard) ---- */
.am-stat-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-sm);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow .15s var(--mw-ease), transform .15s var(--mw-ease), border-color .15s var(--mw-ease);
  /* .am-stat-card is now an <a> (the KPI cards link through to their detail screens) */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.am-stat-card:hover {
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mw-primary) 35%, var(--mw-border));
  color: inherit;
}
.am-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--mw-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--mw-primary), var(--mw-primary-dark));
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--mw-primary) 35%, transparent);
}
.am-stat-icon.is-accent {
  background: linear-gradient(135deg, var(--mw-orange), color-mix(in srgb, var(--mw-orange) 70%, black));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--mw-orange) 35%, transparent);
}
.am-stat-icon.is-turquoise {
  background: linear-gradient(135deg, var(--mw-turquoise), color-mix(in srgb, var(--mw-turquoise) 70%, black));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--mw-turquoise) 35%, transparent);
}
.am-stat-icon.is-purple {
  background: linear-gradient(135deg, var(--mw-purple), color-mix(in srgb, var(--mw-purple) 70%, black));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--mw-purple) 35%, transparent);
}
/* ---- Long-form sub-sections (group a document's fields under a labeled block instead of
   one flat list, e.g. invoice header / walk-in customer / pricing / lines) ---- */
.mw-form-section {
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-bg);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1.25rem;
}
.mw-form-section-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--mw-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .9rem;
}
.mw-form-section-title i {
  font-size: .9rem;
}

/* ---- Report mini bar (SalesAnalysis revenue bars) ---- */
.mw-mini-bar {
  background: var(--mw-primary);
  height: 10px;
  border-radius: var(--mw-radius-sm);
}

/* ---- Reports catalog cards ---- */
.mw-report-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-sm);
  padding: 1.1rem 1.25rem;
  transition: box-shadow .15s var(--mw-ease), transform .15s var(--mw-ease), border-color .15s var(--mw-ease);
}
.mw-report-card:hover {
  box-shadow: var(--mw-shadow-md);
  transform: translateY(-2px);
  color: inherit;
  border-color: color-mix(in srgb, var(--mw-primary) 35%, var(--mw-border));
}
.mw-report-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mw-radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--mw-primary), var(--mw-primary-dark));
}
.mw-report-icon.is-turquoise {
  background: linear-gradient(135deg, var(--mw-turquoise), color-mix(in srgb, var(--mw-turquoise) 70%, black));
}
.mw-report-icon.is-purple {
  background: linear-gradient(135deg, var(--mw-purple), color-mix(in srgb, var(--mw-purple) 70%, black));
}
.mw-report-icon.is-muted {
  background: linear-gradient(135deg, var(--mw-text-muted), color-mix(in srgb, var(--mw-text-muted) 70%, black));
}
.mw-report-title {
  font-family: var(--mw-font-display);
  font-weight: 700;
  margin-bottom: .2rem;
}
.mw-report-desc {
  font-size: .83rem;
  color: var(--mw-text-muted);
}

.am-stat-value {
  font-family: var(--mw-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.am-stat-label {
  font-size: .82rem;
  color: var(--mw-text-muted);
}

/* ---- Dashboard greeting header ---- */
.mw-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.mw-greeting-date {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  padding: .5rem 1rem;
  font-size: .85rem;
  color: var(--mw-text-muted);
  box-shadow: var(--mw-shadow-sm);
}

/* ---- Dashboard category donut chart ---- */
.mw-donut {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw-donut-center {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--mw-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--mw-shadow-sm);
}
.mw-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mw-donut-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  font-size: .85rem;
}
.mw-donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =========================================================
   Skeleton loading rows (shimmer) — for async/AJAX-loaded
   content. Not used for server-rendered first paint (that
   would just slow the page down for no reason) — ready for
   the dashboard/report widgets that fetch data client-side.
   ========================================================= */
.am-skel-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
}
.am-skel-bar {
  height: 12px;
  border-radius: 6px;
  flex: 1;
  background: linear-gradient(90deg, #eef1f2 25%, #e2e7e8 37%, #eef1f2 63%);
  background-size: 400% 100%;
  animation: am-shimmer 1.4s ease-in-out infinite;
}
.am-skel-bar.is-short { flex: 0 0 20%; }
.am-skel-bar.is-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
@keyframes am-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .am-skel-bar { animation: none; background: #eef1f2; }
}

/* =========================================================
   Modal: scale+fade entrance, lighter backdrop
   ========================================================= */
.modal-backdrop.show {
  opacity: .45;
}
.modal.fade .modal-dialog {
  transform: scale(.92) translateY(8px);
  opacity: 0;
  transition: transform .2s var(--mw-ease), opacity .2s var(--mw-ease);
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-content {
  border: none;
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--mw-border);
}
.modal-footer {
  border-top: 1px solid var(--mw-border);
}

/* ---- Shared confirm dialog: bigger, centered, icon-led (SweetAlert-style) ---- */
.am-confirm-dialog {
  max-width: 460px;
}
.am-confirm-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1;
}
.am-confirm-body-wrap {
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
}
.am-confirm-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: color-mix(in srgb, var(--mw-danger) 12%, transparent);
  color: var(--mw-danger);
}
.am-confirm-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.am-confirm-text {
  color: var(--mw-text-muted);
  font-size: 1rem;
  margin-bottom: 0;
}
.am-confirm-footer {
  border-top: none;
  justify-content: center;
  gap: .75rem;
  padding: 0 2rem 2rem;
}
.am-confirm-footer .btn {
  min-width: 130px;
  border-radius: var(--mw-radius-sm);
}

/* =========================================================
   Empty state — normal + error (is-error) with retry action
   ========================================================= */
.am-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--mw-text-muted);
}
.am-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--mw-primary) 10%, transparent);
  color: var(--mw-primary);
}
.am-empty-state-title {
  font-weight: 700;
  color: var(--mw-text);
  margin-bottom: .25rem;
}
.am-empty-state-subtitle {
  font-size: .9rem;
  max-width: 360px;
  margin-bottom: 1rem;
}
.am-empty-state.is-error .am-empty-state-icon {
  background: color-mix(in srgb, var(--mw-danger) 12%, transparent);
  color: var(--mw-danger);
}

/* =========================================================
   Breadcrumbs
   ========================================================= */
.mw-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--mw-text-muted);
  margin-bottom: 1rem;
}
.mw-breadcrumb a {
  color: var(--mw-text-muted);
  text-decoration: none;
}
.mw-breadcrumb a:hover {
  color: var(--mw-primary);
}
.mw-breadcrumb-sep {
  font-size: .65rem;
  opacity: .6;
}
.mw-breadcrumb-current {
  color: var(--mw-text);
  font-weight: 600;
}

/* =========================================================
   Toast notifications
   ========================================================= */
.mw-toast-container {
  position: fixed;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 360px;
}
.mw-toast {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--mw-surface);
  color: var(--mw-text);
  border: 1px solid var(--mw-border);
  border-inline-start: 4px solid var(--mw-primary);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-md);
  padding: .75rem 1rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s var(--mw-ease), transform .2s var(--mw-ease);
}
.mw-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.mw-toast-danger {
  border-inline-start-color: var(--mw-danger);
}
.mw-toast-danger i:first-child {
  color: var(--mw-danger);
}
.mw-toast-success {
  border-inline-start-color: var(--mw-success);
}
.mw-toast-success i:first-child {
  color: var(--mw-success);
}
.mw-toast-text {
  flex: 1;
  font-size: .9rem;
}
.mw-toast-close {
  background: none;
  border: none;
  color: var(--mw-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.mw-toast-close:hover {
  color: var(--mw-text);
}

/* =========================================================
   Row actions dropdown (auto-collapsed by site.js when a row
   has 2+ actions — see enhanceRowActions)
   ========================================================= */
.mw-row-actions {
  display: inline-block;
}
.mw-row-actions .dropdown-menu {
  min-width: 160px;
  padding: .35rem;
  border-radius: var(--mw-radius-sm);
  border-color: var(--mw-border);
  box-shadow: var(--mw-shadow-md);
}
.mw-row-actions .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--mw-radius-sm);
  padding: .5rem .6rem;
  font-size: .85rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: start;
}
.mw-row-actions .dropdown-item.text-danger:hover,
.mw-row-actions .dropdown-item.text-danger:focus {
  background: color-mix(in srgb, var(--mw-danger) 10%, transparent);
  color: var(--mw-danger);
}
.mw-row-actions form {
  margin: 0;
}

/* =========================================================
   List tables: search toolbar + pagination (auto-injected by
   site.js enhanceTables — see the function for the exclusion
   rules for editable line-item grids)
   ========================================================= */
.mw-table-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--mw-border);
}
.mw-table-search {
  position: relative;
  width: 100%;
  max-width: 260px;
}
.mw-table-search i {
  position: absolute;
  top: 50%;
  inset-inline-start: .75rem;
  transform: translateY(-50%);
  color: var(--mw-text-muted);
  font-size: .85rem;
  pointer-events: none;
}
.mw-table-search input {
  padding-inline-start: 2rem;
}
.mw-table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--mw-border);
}
.mw-table-pager .mw-pager-info {
  font-size: .85rem;
  color: var(--mw-text-muted);
  min-width: 140px;
  text-align: center;
}
.mw-table-noresults td {
  border: none;
}

/* =========================================================
   Notification center bell (topbar) — aggregates every
   "needs attention" signal (low stock, drafts awaiting
   posting, ...) into one persistent dropdown.
   ========================================================= */
.mw-notif-bell {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  color: var(--mw-text-muted);
  font-size: 1rem;
}
.mw-notif-bell:hover {
  color: var(--mw-text);
}
.mw-notif-bell::after { display: none; }
.mw-notif-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--mw-danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.mw-notif-menu {
  width: 340px;
  padding: 0;
  border-radius: var(--mw-radius-md);
  border-color: var(--mw-border);
  box-shadow: var(--mw-shadow-md);
  overflow: hidden;
}
.mw-notif-menu-header {
  padding: .85rem 1rem;
  font-weight: 700;
  color: var(--mw-text);
  border-bottom: 1px solid var(--mw-border);
}
.mw-notif-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--mw-text-muted);
  font-size: .85rem;
}
.mw-notif-group {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--mw-border);
  text-decoration: none;
  color: inherit;
}
.mw-notif-group:last-of-type {
  border-bottom: none;
}
.mw-notif-group:hover {
  background: var(--mw-bg);
}
.mw-notif-group-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mw-primary) 10%, transparent);
  color: var(--mw-primary);
}
.mw-notif-group-body {
  flex: 1;
  min-width: 0;
}
.mw-notif-group-title {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--mw-text);
}
.mw-notif-group-detail {
  display: block;
  font-size: .78rem;
  color: var(--mw-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mw-notif-group-count {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--mw-danger);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Server-side filter bar (search + status + date range) —
   used by list screens that moved off client-side paging
   ========================================================= */
.mw-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--mw-border);
}
.mw-filter-bar input[type="text"] {
  flex: 1;
  min-width: 180px;
}
.mw-filter-bar select,
.mw-filter-bar input[type="date"] {
  width: auto;
}

/* =========================================================
   Bulk selection toolbar (shown once at least one row is checked)
   ========================================================= */
.mw-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: color-mix(in srgb, var(--mw-primary) 8%, transparent);
  border-bottom: 1px solid var(--mw-border);
  font-size: .85rem;
  color: var(--mw-text);
}
.mw-bulk-toolbar .mw-bulk-count {
  font-weight: 700;
  color: var(--mw-primary);
}

/* =========================================================
   Editable line-item grids (invoice/voucher/journal forms) —
   subtler remove button + a prominent grand-total cell instead
   of the plain fw-bold text that used to blend into the row.
   ========================================================= */
.mw-line-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border-color: transparent;
  background: transparent;
  color: var(--mw-text-muted);
}
.mw-line-remove:hover {
  background: color-mix(in srgb, var(--mw-danger) 12%, transparent);
  border-color: transparent;
  color: var(--mw-danger);
}
.mw-grand-total-label {
  font-size: 1rem;
}
.mw-grand-total {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mw-primary);
  background: color-mix(in srgb, var(--mw-primary) 8%, transparent);
  border-radius: var(--mw-radius-sm);
  padding-block: .5rem !important;
}

/* =========================================================
   Form section headings (the h6 dividers inside long forms
   like Item/FixedAsset/Customer _Form.cshtml partials) — were
   plain text before, blending into the page with no hierarchy.
   ========================================================= */
.mw-card-body form h6 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mw-primary);
  padding-inline-start: .65rem;
  border-inline-start: 3px solid var(--mw-primary);
  line-height: 1.3;
}
.mw-card-body form h6:not(:first-child) {
  padding-top: 1.5rem;
  border-top: 1px solid var(--mw-border);
}

/* =========================================================
   Dropdown menus (language switcher, user menu, generic
   Bootstrap dropdowns) — give them the same rounded/soft-shadow
   treatment as the rest of the design system instead of the
   default Bootstrap flat corners + hard shadow.
   ========================================================= */
.dropdown-menu {
  border-radius: var(--mw-radius-md);
  border-color: var(--mw-border);
  box-shadow: var(--mw-shadow-md);
  padding: .4rem;
  margin-top: .4rem !important;
}
.dropdown-menu .dropdown-item {
  border-radius: var(--mw-radius-sm);
  padding: .55rem .75rem;
  font-size: .88rem;
}
.dropdown-menu .dropdown-item:active {
  background-color: var(--mw-primary);
}

/* =========================================================
   Empty state polish — bigger, warmer icon treatment matching
   the vivid stat-card icons rather than a pale flat tint.
   ========================================================= */
.am-empty-state-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mw-primary) 16%, transparent), color-mix(in srgb, var(--mw-primary) 6%, transparent));
}

/* =========================================================
   Mobile sidebar — the shell was desktop-only (fixed 260px
   sidebar + margin-offset main content), which crushed every
   screen into a ~130px column on phones. Below 900px the
   sidebar becomes an off-canvas drawer toggled by a hamburger
   button injected into the topbar; above it, unchanged.
   ========================================================= */
.mw-sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  color: var(--mw-text);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.mw-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 19;
}
@media (max-width: 900px) {
  .mw-main {
    margin-right: 0;
    margin-left: 0;
  }
  .mw-sidebar {
    z-index: 20;
    transform: translateX(100%);
    transition: transform .2s var(--mw-ease);
    box-shadow: var(--mw-shadow-lg);
  }
  [dir="ltr"] .mw-sidebar {
    transform: translateX(-100%);
  }
  .mw-sidebar.is-open {
    transform: translateX(0);
  }
  .mw-sidebar-toggle {
    display: inline-flex;
  }
  .mw-sidebar-backdrop.is-open {
    display: block;
  }
  .mw-topbar h1 {
    font-size: .95rem;
  }
}