/**
 * ============================================================
 * MIMOSA THEME — Global UI Design System
 * MDH ERP · Aligned with MDH Branding Guideline
 * ============================================================
 * Maintainer: MDH Dev Team
 * Version: 3.0.0  (MDH brand rebrand)
 *
 * COLOR STRATEGY:
 *  - PRIMARY UI: MDH Medium Blue (#0067B9) — used for buttons,
 *    links, nav, active states, focus rings. Chosen as the
 *    foundational UI brand color because it is both accessible
 *    (WCAG-AA on white) and dominant in the MDH identity.
 *  - DANGER / ACCENT RED: MDH Red (#FF0000) used sparingly for
 *    destructive actions and high-attention alerts.
 *  - ACCENT DEEP: MDH Dark Red (#651D32) for premium ribbons,
 *    decorative dividers, badge accents.
 *  - NEUTRALS: Slate scale tuned to harmonize with MDH greys.
 *  - BACKWARDS COMPAT: Legacy --indigo-* token names are kept
 *    as aliases that now resolve to the MDH Blue scale so that
 *    existing references across the project automatically pick
 *    up the new brand palette without find-and-replace churn.
 * ============================================================
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* ── MDH BRAND PALETTE (from official guideline PDF) ── */
  --mdh-red:           #FF0000;   /* Primary brand Red          */
  --mdh-blue:          #0067B9;   /* Primary brand Medium Blue  */
  --mdh-black:         #212721;   /* Primary brand Black        */
  --mdh-web-blue:      #205493;   /* Secondary Web Blue         */
  --mdh-dark-red:      #651D32;   /* Secondary Dark Red         */
  --mdh-light-blue:    #A7C6ED;   /* Secondary Light Blue       */
  --mdh-dark-gray:     #6C6463;   /* Secondary Dark Gray  (70%) */
  --mdh-medium-gray:   #8C8985;   /* Secondary Medium Gray(40%) */
  --mdh-light-gray:    #CFCDC9;   /* Secondary Light Gray (15%) */

  /* ── MDH BLUE SCALE (derived around #0067B9) ── */
  --mdh-blue-50:   #E8F2FB;
  --mdh-blue-100:  #C9E0F4;
  --mdh-blue-200:  #A7C6ED;   /* brand Light Blue           */
  --mdh-blue-300:  #7BAEE0;
  --mdh-blue-400:  #3F8BCF;
  --mdh-blue-500:  #0F7BC8;
  --mdh-blue-600:  #0067B9;   /* brand Medium Blue (PRIMARY) */
  --mdh-blue-700:  #205493;   /* brand Web Blue              */
  --mdh-blue-800:  #1A4577;
  --mdh-blue-900:  #143866;
  --mdh-blue-950:  #0B2748;

  /* ── MDH RED SCALE (derived from brand reds) ── */
  --mdh-red-50:    #FEE9E9;
  --mdh-red-100:   #FCC9C9;
  --mdh-red-200:   #F89393;
  --mdh-red-300:   #F35D5D;
  --mdh-red-400:   #ED2929;
  --mdh-red-500:   #FF0000;   /* brand primary Red          */
  --mdh-red-600:   #D40000;
  --mdh-red-700:   #8E1B24;
  --mdh-red-800:   #651D32;   /* brand Dark Red             */
  --mdh-red-900:   #4A152A;
  --mdh-red-950:   #2D0D1A;

  /* ── MDH GRAY SCALE (warm grays per brand) ── */
  --mdh-gray-50:   #F7F6F5;
  --mdh-gray-100:  #EFEEEC;
  --mdh-gray-200:  #CFCDC9;   /* brand Light Gray  (15%)     */
  --mdh-gray-300:  #B8B5B2;
  --mdh-gray-400:  #8C8985;   /* brand Medium Gray (40%)     */
  --mdh-gray-500:  #6C6463;   /* brand Dark Gray   (70%)     */
  --mdh-gray-600:  #4F4948;
  --mdh-gray-700:  #353130;
  --mdh-gray-800:  #212721;   /* brand Black                 */
  --mdh-gray-900:  #131613;

  /* ── BRAND SHADOW RGBs (used for box-shadows) ── */
  --mdh-shadow-rgb:        0,103,185;  /* MDH Medium Blue   */
  --mdh-shadow-red-rgb:    255,0,0;
  --mdh-shadow-deep-rgb:   32,84,147;  /* MDH Web Blue      */

  /* ── INDIGO ALIASES (legacy compat — now MDH Blue) ── */
  --indigo-50:   var(--mdh-blue-50);
  --indigo-100:  var(--mdh-blue-100);
  --indigo-200:  var(--mdh-blue-200);
  --indigo-300:  var(--mdh-blue-300);
  --indigo-400:  var(--mdh-blue-400);
  --indigo-500:  var(--mdh-blue-500);
  --indigo-600:  var(--mdh-blue-600);
  --indigo-700:  var(--mdh-blue-700);
  --indigo-800:  var(--mdh-blue-800);
  --indigo-900:  var(--mdh-blue-900);
  --indigo-950:  var(--mdh-blue-950);

  /* ── Slate Neutrals (cool grays — UI structure) ── */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ── Semantic Colors ── */
  --color-primary:        var(--mdh-blue-600);
  --color-primary-hover:  var(--mdh-blue-700);
  --color-primary-light:  var(--mdh-blue-50);
  --color-primary-text:   #FFFFFF;

  --color-accent:         var(--mdh-dark-red);   /* deep accent */
  --color-accent-light:   #F4E3E8;

  --color-success:        #10B981;
  --color-success-light:  #D1FAE5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-danger:         var(--mdh-red-600);
  --color-danger-light:   var(--mdh-red-50);
  --color-info:           var(--mdh-blue-500);
  --color-info-light:     var(--mdh-blue-50);

  /* Layout */
  --sidebar-width:        260px;
  --sidebar-collapsed-w:  72px;
  --header-height:        64px;

  /* Sidebar — light white theme */
  --sidebar-bg:           #FFFFFF;
  --sidebar-border:       var(--slate-200);
  --sidebar-text:         var(--slate-600);
  --sidebar-text-hover:   var(--slate-900);
  --sidebar-icon:         var(--slate-400);
  --sidebar-icon-hover:   var(--indigo-600);
  --sidebar-active-bg:    var(--indigo-600);
  --sidebar-active-text:  #FFFFFF;
  --sidebar-submenu-bg:   var(--slate-50);
  --sidebar-hover-bg:     var(--indigo-50);

  /* Header */
  --header-bg:            #FFFFFF;
  --header-border:        var(--slate-200);
  --header-text:          var(--slate-700);
  --header-icon:          var(--slate-500);
  --header-icon-hover:    var(--indigo-600);

  /* Content */
  --content-bg:           var(--slate-100);
  --card-bg:              #FFFFFF;
  --card-radius:          12px;
  --card-shadow:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover:    0 4px 12px rgba(var(--mdh-shadow-rgb),0.1), 0 2px 6px rgba(0,0,0,0.06);

  /* Typography */
  --font-family:          'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         11px;
  --font-size-sm:         12.5px;
  --font-size-base:       14px;
  --font-size-md:         15px;
  --font-size-lg:         17px;
  --font-size-xl:         20px;
  --font-size-2xl:        24px;

  /* Borders & Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. FONT IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   3. GLOBAL BASE RESETS
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family) !important;
  background-color: var(--content-bg) !important;
  color: var(--slate-800) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); text-decoration: none; }

/* ============================================================
   4. LOGIN PAGE
   ============================================================ */
body.mimosa-login {
  background: var(--slate-100) !important;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.mimosa-login-wrap {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Left Panel — Brand / Illustration */
.mimosa-login-left {
  flex: 0 0 50%;
  max-width: 50%;
  background: var(--mdh-blue-800);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 56px;
  position: relative;
  overflow: hidden;
}

.mimosa-login-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.mimosa-login-left::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.mimosa-login-brand {
  text-align: center;
  margin-bottom: 48px;
  position: relative; z-index: 1;
}
.mimosa-login-brand img {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 20px;
}
.mimosa-login-brand h1 {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 8px;
  letter-spacing: -0.5px;
}
.mimosa-login-brand p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.5;
}

.mimosa-login-illustration {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.mimosa-login-illustration img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  opacity: 0.92;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.mimosa-login-features {
  position: relative; z-index: 1;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.mimosa-login-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.8);
  font-size: 13.5px;
}
.mimosa-login-feature-item .feat-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #fff;
}

/* Right Panel — Form */
.mimosa-login-right {
  flex: 0 0 50%;
  max-width: 50%;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 56px;
}

.mimosa-login-form-wrap {
  width: 100%;
  max-width: 400px;
}

.mimosa-login-form-wrap .form-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.mimosa-login-form-wrap .form-subtitle {
  font-size: 14px;
  color: var(--slate-500);
  margin-bottom: 36px;
}

/* Form Fields */
.mimosa-field {
  margin-bottom: 20px;
}
.mimosa-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mimosa-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mimosa-input-wrap .input-icon {
  position: absolute;
  left: 14px;
  color: var(--slate-400);
  font-size: 16px;
  pointer-events: none;
  transition: color var(--transition-fast);
  z-index: 2;
}
.mimosa-input-wrap input:focus ~ .input-icon,
.mimosa-input-wrap:focus-within .input-icon {
  color: var(--color-primary);
}
.mimosa-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--slate-800);
  background: var(--slate-50);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  outline: none;
}
.mimosa-input:focus {
  border-color: var(--color-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--indigo-100);
}
.mimosa-input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-light);
}
.mimosa-input::placeholder { color: var(--slate-400); }

.mimosa-input-wrap .pw-toggle {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-400);
  font-size: 15px;
  padding: 0;
  transition: color var(--transition-fast);
}
.mimosa-input-wrap .pw-toggle:hover { color: var(--color-primary); }

.mimosa-login-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  margin-top: 4px;
}
.mimosa-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--slate-600);
  user-select: none;
}
.mimosa-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  border-radius: 4px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.mimosa-login-extras a {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
}
.mimosa-login-extras a:hover { color: var(--color-primary-hover); }

/* Login Button */
.mimosa-btn-login {
  width: 100%;
  padding: 13px;
  background: var(--mdh-blue-600);
  border: none;
  border-radius: var(--radius-md);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(var(--mdh-shadow-rgb),0.35);
}
.mimosa-btn-login:hover {
  background: var(--mdh-blue-700);
  box-shadow: 0 6px 20px rgba(var(--mdh-shadow-rgb),0.45);
  transform: translateY(-1px);
}
.mimosa-btn-login:active { transform: translateY(0); }

.mimosa-login-footer {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--slate-400);
}

/* Invalid feedback */
.invalid-feedback {
  font-size: 12px !important;
  color: var(--color-danger) !important;
  margin-top: 5px !important;
  display: block !important;
}

/* Login responsive */
@media (max-width: 900px) {
  .mimosa-login-left { display: none; }
  .mimosa-login-right { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   5. SIDEBAR (app-sidebar)
   ============================================================ */

/* Remove old sidebar styles */
.app-sidebar,
.app-sidebar.comb-sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 1px 0 8px rgba(0,0,0,0.04) !important;
  width: var(--sidebar-width) !important;
  top: 0 !important;
  bottom: 0 !important;
  position: fixed !important;
  left: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
  transition: width var(--transition-slow), transform var(--transition-slow) !important;
  /*padding-top: var(--header-height) !important;*/
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }

/* Mobile sidebar close (× ) button. Hidden on desktop; revealed by
   the mobile media query when body.sidebar-open is set. */
.mimosa-sidebar-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--sidebar-border, #e2e8f0);
  background: #fff;
  color: #475569;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(15,23,42,0.08);
  transition: background 0.16s, color 0.16s, transform 0.12s;
}
.mimosa-sidebar-close:hover {
  background: var(--mdh-blue-50, #eef2ff);
  color: var(--mdh-blue-600, #4f46e5);
}
.mimosa-sidebar-close:active { transform: scale(0.96); }

/* Sidebar Top Logo Band */
.sidebar-logo-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 8px;
}
.sidebar-logo-band img {
  height: 32px;
  width: auto;
  opacity: 0.9;
}
.sidebar-logo-band .brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.2px;
}

/* Side Menu List */
.side-menu {
  list-style: none !important;
  padding: 4px 12px 24px !important;
  margin: 0 !important;
}

/* Section Dividers */
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 12px 8px 5px;
  display: block;
}

/* Menu Items */
.side-menu li {
  list-style: none !important;
  margin-bottom: 2px !important;
}

.side-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
  color: var(--sidebar-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  position: relative !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.side-menu__item:hover {
  background: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-text-hover) !important;
  text-decoration: none !important;
}
.side-menu__item.active,
.side-menu__item[aria-current="page"] {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  box-shadow: 0 2px 8px rgba(var(--mdh-shadow-rgb),0.25) !important;
}
.side-menu__item.active .side-menu__icon,
.side-menu__item[aria-current="page"] .side-menu__icon {
  color: #FFFFFF !important;
}

/* Icons */
.side-menu__icon {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  color: var(--sidebar-icon) !important;
  flex-shrink: 0 !important;
  transition: color var(--transition-fast) !important;
}
.side-menu__item:hover .side-menu__icon,
.side-menu__item.active .side-menu__icon {
  color: #FFFFFF !important;
}

/* Label */
.side-menu__label {
  flex: 1 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* Angle Arrow */
.side-menu__item .angle {
  font-size: 11px !important;
  color: var(--slate-300) !important;
  margin-left: auto !important;
  transition: transform var(--transition-base) !important;
}
.slide.is-expanded > .side-menu__item .angle,
.slide.open > .side-menu__item .angle {
  transform: rotate(90deg) !important;
}

/* Slide Sub-menu
   IMPORTANT: Do NOT override max-height, overflow, or display here —
   combine-menu.css uses max-height 0→100% CSS transitions for the
   open/close animation. Only override visual styles. */
.slide-menu {
  list-style: none !important;
  padding-left: 32px !important;
  margin: 0 !important;
  background: transparent !important;
}
.slide-menu li { margin-bottom: 1px !important; }
.slide-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  color: var(--slate-500) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast), padding var(--transition-fast) !important;
  position: relative !important;
}
/* Remove both our dot and the typicons dot from combine-menu.css */
.slide-item::before,
.slide-menu a::before {
  display: none !important;
  content: none !important;
}
.slide-item:hover {
  background: var(--indigo-50) !important;
  color: var(--indigo-600) !important;
  text-decoration: none !important;
  padding-left: 16px !important;
}
.slide-item.active {
  color: var(--indigo-600) !important;
  font-weight: 600 !important;
}
.slide-item span { font-size: 13px !important; }

/* Notification Badge in sidebar */
#sidebar-notification-badge {
  background: var(--color-danger) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-full) !important;
  line-height: 1.4 !important;
  min-width: 18px !important;
  text-align: center !important;
  display: inline-block !important;
  margin-left: auto !important;
}

/* Skeleton loader in sidebar */
.skelleton-loader {
  display: block !important;
  background: var(--slate-100) !important;
  margin: 6px 8px !important;
  border-radius: var(--radius-md) !important;
  height: 38px !important;
}
@keyframes shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}
.loading { animation: shimmer 1.4s ease-in-out infinite !important; }

/* ============================================================
   6. HEADER / TOP NAVIGATION
   ============================================================ */
.app-header,
.app-header.header,
.app-header.comb-header,
.app-header.top-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  height: var(--header-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1100 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: box-shadow var(--transition-base) !important;
}
.app-header .container-fluid {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 20px !important;
  width: 100% !important;
}
.app-header .d-flex {
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  gap: 4px !important;
}

/* Brand Logo in header */
.header-brand {
  display: flex !important;
  align-items: center !important;
  margin-right: 8px !important;
}
.header-brand-img {
  height: 36px !important;
  width: auto !important;
}

/* Sidebar toggle button */
#horizontal-navtoggle,
.app-sidebar__toggle,
a.app-sidebar__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  color: var(--header-icon) !important;
  background: transparent !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  text-decoration: none !important;
  margin: 0 4px !important;
}
#horizontal-navtoggle:hover,
.app-sidebar__toggle:hover {
  background: var(--indigo-50) !important;
  color: var(--color-primary) !important;
}
#horizontal-navtoggle i,
.app-sidebar__toggle i {
  font-size: 18px !important;
}

/* Animated arrow (hamburger) */
.animated-arrow span,
.animated-arrow span::before,
.animated-arrow span::after {
  background: var(--slate-600) !important;
}

/* Header Nav Links / Icons */
.app-header .nav-link,
.app-header .nav-link.icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 34px !important;
  border-radius: var(--radius-md) !important;
  color: var(--header-icon) !important;
  font-size: 18px !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  position: relative !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.app-header .nav-link:hover,
.app-header .nav-link.icon:hover {
  background: var(--indigo-50) !important;
  color: var(--color-primary) !important;
}
/* Profile dropdown trigger */
.app-header .dropdown > a.nav-link {
  width: auto !important;
  padding: 5px 8px !important;
}

/* Header dropdown */
.app-header .dropdown-menu {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 200px !important;
  background: #FFFFFF !important;
}
.app-header .dropdown-item {
  border-radius: var(--radius-md) !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  color: var(--slate-700) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
}
.app-header .dropdown-item:hover {
  background: var(--indigo-50) !important;
  color: var(--color-primary) !important;
}
.app-header .dropdown-item i,
.app-header .dropdown-item .dropdown-icon {
  font-size: 15px !important;
  width: 16px !important;
  text-align: center !important;
  color: var(--slate-400) !important;
}
.app-header .dropdown-item:hover i,
.app-header .dropdown-item:hover .dropdown-icon {
  color: var(--color-primary) !important;
}
.app-header .dropdown-divider {
  border-color: var(--slate-100) !important;
  margin: 6px 0 !important;
}

/* User profile in header */
.app-header .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--indigo-200) !important;
  transition: border-color var(--transition-fast) !important;
}
.app-header .avatar:hover { border-color: var(--color-primary) !important; }

/* User name / email in dropdown */
.app-header .dropdown-item.text-center.user {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
}
.app-header .user-semi-title {
  font-size: 12px !important;
  color: var(--slate-500) !important;
  display: block !important;
  padding: 0 12px 8px !important;
}

/* App-switcher dropdown (the grid/layers icon) */
.header-notify .dropdown-menu {
  min-width: 280px !important;
  padding: 12px !important;
}
.header-notify .dropdown-menu .col-4 {
  padding: 10px 8px !important;
}
.header-notify .dropdown-menu a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 8px !important;
  border-radius: var(--radius-md) !important;
  transition: background var(--transition-fast) !important;
  text-decoration: none !important;
}
.header-notify .dropdown-menu a:hover {
  background: var(--indigo-50) !important;
}
.header-notify .dropdown-menu a i {
  font-size: 22px !important;
  color: var(--color-primary) !important;
}
.header-notify .dropdown-menu a div {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--slate-600) !important;
}

/* Check-in / Check-out button */
.clock-btn,
.btn.clock-btn {
  border-radius: var(--radius-md) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all var(--transition-base) !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
}
.clock-btn.btn-primary {
  background: var(--mdh-blue-600) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(var(--mdh-shadow-rgb),0.25) !important;
}
.clock-btn.btn-primary:hover {
  background: var(--mdh-blue-700) !important;
  box-shadow: 0 4px 12px rgba(var(--mdh-shadow-rgb),0.35) !important;
  transform: translateY(-1px) !important;
}
.clock-btn.btn-danger {
  background: var(--mdh-red-500) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(var(--mdh-shadow-red-rgb),0.25) !important;
}
.clock-btn.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(var(--mdh-shadow-red-rgb),0.35) !important;
  transform: translateY(-1px) !important;
}

/* Fullscreen icon */
.header-fullscreen .nav-link.full-screen-link i { font-size: 17px !important; }

/* ============================================================
   7. CONTENT AREA LAYOUT
   ============================================================ */
/* Use maximum specificity to beat sidebar-mini class rules */
.app-content,
.app-content.page-body,
body .app-content,
body .app-content.page-body,
.sidebar-mini .app-content,
.sidebar-mini .app-content.page-body,
body.app .app-content,
body.sidebar-mini .app-content,
body.sidebar-mini .app-content.page-body {
  margin-left: var(--sidebar-width) !important;
  /*padding-top: var(--header-height) !important;*/
  background: var(--content-bg) !important;
  min-height: 100vh !important;
  transition: margin-left var(--transition-slow) !important;
}

.page.comb-page,
.page-main {
  background: var(--content-bg) !important;
}

/* Offset content below the fixed 64px header.
   Selector kept at low specificity (0,2,0) so RS-shell blades that push
   ".app-content.page-body { padding: 0 !important }" via @stack('before-scripts')
   win via later source order (same specificity + later in document = wins). */
.app-content.page-body {
  padding-top: var(--header-height) !important;
}

.side-app {
  padding: 24px !important;
}

/* Procurement module secondary menu (resources/views/procurement/topmenu.blade.php,
   public/mdh/plugins/horizontal-menu). Built as a stand-alone position:fixed,
   full-width bar (z-index:1) before the header/sidebar redesign — with no top/left
   offset it overlapped the now-fixed .app-header (z-index:1100) and .app-sidebar
   (z-index:1000) instead of sitting as a normal bar inside the content area.
   Confirmed on the live page (Playwright + computed styles):
     1. The plugin's own horizontal.css has `.hor-menu.horizontal-main {
        margin-top: 75px }` — dead weight while this was position:fixed (margin
        doesn't move a fixed box), but a real 75px gap below the header once
        switched to a flow-based position. Cancelled below.
     2. position: sticky does NOT work here — its direct parent
        .app-content.page-body has overflow: hidden (a long-standing global
        rule, not safe to change), which breaks the sticky containing block.
        So this stays position: fixed, but now with explicit top/left offsets
        matching the header height (64px) and sidebar width that the rest of
        the theme already uses, instead of the plugin's bare `width:100%` with
        no offsets at all. Taking it out of flow needs a same-height spacer
        right after it (added in topmenu.blade.php) so page content doesn't
        jump up underneath it. */
.horizontal-main {
  position: fixed !important;
  top: var(--header-height) !important;
  left: var(--sidebar-width) !important;
  right: 0 !important;
  width: auto !important;
  margin-top: 0 !important;
  z-index: 999 !important;
  transition: left var(--transition-slow) !important;
}
body.sidenav-toggled .horizontal-main {
  left: var(--sidebar-collapsed-w) !important;
}
@media (max-width: 992px) {
  .horizontal-main {
    left: 0 !important;
  }
}
/* Same-height placeholder so content below isn't hidden under the now-fixed bar. */
.horizontal-main-spacer {
  height: 55px;
}

/* Sidebar hidden / collapsed state */
body.sidenav-toggled .app-content { margin-left: var(--sidebar-collapsed-w) !important; }
body.sidenav-toggled .app-sidebar { width: var(--sidebar-collapsed-w) !important; }
body.sidenav-toggled .side-menu__label,
body.sidenav-toggled .side-menu__item .angle,
body.sidenav-toggled .sidebar-section-label,
body.sidenav-toggled .sidebar-logo-band .brand-name,
body.sidenav-toggled #sidebar-notification-badge { display: none !important; }
body.sidenav-toggled .side-menu__item { justify-content: center !important; gap: 0 !important; padding: 10px 0 !important; }
body.sidenav-toggled .side-menu__icon { width: auto !important; font-size: 18px !important; }

/* ============================================================
   8. GLOBAL CARD STYLES
   ============================================================ */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  transition: box-shadow var(--transition-base) !important;
}
.card:hover { box-shadow: var(--card-shadow-hover) !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--slate-100) !important;
  padding: 18px 20px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
  font-size: 14.5px !important;
}
.card-body { padding: 20px !important; }

/* ============================================================
   9. GLOBAL BUTTON OVERRIDES
   ============================================================ */
.btn {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all var(--transition-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0.1px !important;
}
.btn-primary {
  background: var(--mdh-blue-600) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(var(--mdh-shadow-rgb),0.2) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--mdh-blue-700) !important;
  box-shadow: 0 4px 12px rgba(var(--mdh-shadow-rgb),0.3) !important;
  color: #FFFFFF !important;
}
.btn-secondary {
  background: var(--slate-100) !important;
  border-color: var(--slate-200) !important;
  color: var(--slate-700) !important;
}
.btn-secondary:hover {
  background: var(--slate-200) !important;
  color: var(--slate-800) !important;
}
.btn-danger {
  background: var(--mdh-red-500) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.btn-success {
  background: #10B981 !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.btn-warning {
  background: #F59E0B !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.btn-info {
  background: var(--mdh-blue-500) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.btn-sm {
  font-size: 12px !important;
  padding: 5px 12px !important;
}
.btn-xs {
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}
.btn-lg {
  font-size: 15px !important;
  padding: 12px 24px !important;
}

/* ============================================================
   10. FORM CONTROLS
   ============================================================ */
.form-control {
  border: 1.5px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  color: var(--slate-800) !important;
  background: var(--slate-50) !important;
  padding: 9px 13px !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.form-control:focus {
  border-color: var(--color-primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px var(--indigo-100) !important;
  outline: none !important;
}
.form-control.is-invalid {
  border-color: var(--color-danger) !important;
}
.form-label, label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--slate-700) !important;
  margin-bottom: 5px !important;
}
.input-group-addon {
  background: var(--slate-100) !important;
  border: 1.5px solid var(--slate-200) !important;
  color: var(--slate-500) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
}

/* Select2 override */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  height: 40px !important;
  background: var(--slate-50) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  color: var(--slate-800) !important;
  padding-left: 13px !important;
  font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--indigo-100) !important;
}
.select2-dropdown {
  border: 1.5px solid var(--slate-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--indigo-600) !important;
}

/* ============================================================
   11. TABLE OVERRIDES
   ============================================================ */
.table {
  font-size: 13.5px !important;
  color: var(--slate-700) !important;
}
.table thead th {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--slate-500) !important;
  background: var(--slate-50) !important;
  border-bottom: 2px solid var(--slate-200) !important;
  padding: 12px 14px !important;
}
.table tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--slate-100) !important;
  vertical-align: middle !important;
}
.table-hover tbody tr:hover {
  background: var(--indigo-50) !important;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--indigo-50) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
}

/* ============================================================
   12. BADGES & PILLS
   ============================================================ */
.badge {
  border-radius: var(--radius-full) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  letter-spacing: 0.2px !important;
}
.badge-primary { background: var(--indigo-100) !important; color: var(--indigo-700) !important; }
.badge-success { background: var(--color-success-light) !important; color: #065F46 !important; }
.badge-warning { background: var(--color-warning-light) !important; color: #92400E !important; }
.badge-danger  { background: var(--color-danger-light) !important;  color: #991B1B !important; }
.badge-info    { background: var(--color-info-light) !important;    color: #164E63 !important; }
.badge-secondary { background: var(--slate-100) !important; color: var(--slate-600) !important; }

/* ============================================================
   13. MODAL OVERRIDES
   ============================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
}
.modal-header {
  background: var(--mdh-blue-600) !important;
  border-bottom: none !important;
  padding: 18px 24px !important;
}
.modal-title {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.modal-header .close {
  color: rgba(255,255,255,0.8) !important;
  opacity: 1 !important;
  font-size: 20px !important;
}
.modal-header .close:hover { color: #FFFFFF !important; }
.modal-body { padding: 24px !important; background: #FFFFFF !important; }
.modal-footer {
  border-top: 1px solid var(--slate-100) !important;
  padding: 16px 24px !important;
  background: var(--slate-50) !important;
}
/* The fixed .app-header is z-index 1100, while Bootstrap modals default to
   1050 (backdrop 1040) — so without this the modal (and its header) render
   BEHIND the top navigation bar. Lift the modal + backdrop above the header. */
.modal { z-index: 1110 !important; }
.modal-backdrop { z-index: 1105 !important; }
/* select2 dropdowns that attach to <body> (those without a dropdownParent, e.g.
   the equipment "Product" and Unit-of-Measure pickers) default to z-index ~1051.
   With the modal lifted to 1110 they would open BEHIND it and the field would
   feel disabled/unclickable — lift the open dropdown above the modal. */
.select2-container--open { z-index: 1115 !important; }

/* ============================================================
   14. ALERT OVERRIDES
   ============================================================ */
.alert {
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.alert-success { background: var(--color-success-light) !important; color: #065F46 !important; }
.alert-warning { background: var(--color-warning-light) !important; color: #92400E !important; }
.alert-danger  { background: var(--color-danger-light) !important;  color: #991B1B !important; }
.alert-info    { background: var(--color-info-light) !important;    color: #164E63 !important; }

/* ============================================================
   15. PAGE HEADER
   ============================================================ */
.page-header {
  margin-bottom: 24px !important;
}
.page-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--slate-300) !important; }
.breadcrumb-item.active { color: var(--slate-500) !important; }
.breadcrumb-item a { color: var(--color-primary) !important; }

/* ============================================================
   16. GLOBAL LOADER
   ============================================================ */
#global-loader {
  position: fixed !important;
  inset: 0 !important;
  background: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  gap: 20px !important;
}
#global-loader img {
  width: 56px !important;
  height: 56px !important;
  filter: none !important;
  animation: loader-pulse 1.8s ease-in-out infinite !important;
}
/* Loader ring */
#global-loader::after {
  content: '' !important;
  width: 36px !important;
  height: 36px !important;
  border: 3px solid var(--indigo-100) !important;
  border-top-color: var(--indigo-600) !important;
  border-radius: 50% !important;
  animation: loader-spin 0.7s linear infinite !important;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(0.96); }
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   17. SCROLLBAR (global)
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ============================================================
   18. BACK-TO-TOP BUTTON
   ============================================================ */
#back-to-top {
  position: fixed !important;
  bottom: 28px !important;
  right: 24px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-full) !important;
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  box-shadow: 0 4px 14px rgba(var(--mdh-shadow-rgb),0.35) !important;
  transition: all var(--transition-base) !important;
  z-index: 1200 !important;
}
#back-to-top:hover {
  background: var(--color-primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(var(--mdh-shadow-rgb),0.45) !important;
}

/* ============================================================
   19. SWEETALERT2 OVERRIDE
   ============================================================ */
.swal2-popup {
  border-radius: var(--radius-xl) !important;
  font-family: var(--font-family) !important;
}
.swal2-confirm {
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
}
.swal2-cancel {
  border-radius: var(--radius-md) !important;
}

/* ============================================================
   20. RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 240px;
  }
}

@media (max-width: 992px) {
  /* Must match the base rule's selector list (.app-sidebar, .app-sidebar.comb-sidebar)
     so this carries equal-or-higher specificity. The element has both classes, and
     a plain `.app-sidebar` selector here (specificity 10) lost to the base rule's
     `.app-sidebar.comb-sidebar` (specificity 20) regardless of !important + source
     order — z-index stayed 1000, putting the sidebar BELOW the dark mobile overlay
     (z-index 1040) instead of above it, so the open sidebar looked dimmed and every
     click on it was swallowed by the overlay underneath. */
  .app-sidebar,
  .app-sidebar.comb-sidebar {
    transform: translateX(-100%) !important;
    z-index: 1060 !important;        /* must stay above overlay (1040) */
    top: 0 !important;
    padding-top: 0 !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    transition: transform 0.3s ease !important;
    /* Defeat any inherited filter/blur from ancestor stacking contexts */
    filter: none !important;
    backdrop-filter: none !important;
  }
  body.sidebar-open .app-sidebar,
  body.sidenav-open .app-sidebar {
    transform: translateX(0) !important;
  }
  /* Show the in-sidebar close button only on mobile */
  body.sidebar-open .mimosa-sidebar-close {
    display: inline-flex !important;
  }

  /* Sidebar overlay — only covers the area to the right of the sidebar.
     Starting at left: var(--sidebar-width) guarantees the overlay can
     never sit over the menu, so taps on menu items always reach the
     sidebar regardless of stacking-context ordering. */
  #mimosa-sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;            /* hidden state: full-width but display:none */
    background: rgba(15,23,42,0.55) !important;
    z-index: 1040 !important;
    display: none;
  }
  body.sidebar-open #mimosa-sidebar-overlay {
    display: block !important;
    left: var(--sidebar-width) !important;   /* clear the menu area */
  }
  /* Override all possible sidebar-mini content margin rules */
  .app-content,
  .app-content.page-body,
  body .app-content,
  body .app-content.page-body,
  .sidebar-mini .app-content,
  .sidebar-mini .app-content.page-body,
  body.app .app-content,
  body.sidebar-mini .app-content,
  body.sidebar-mini .app-content.page-body {
    margin-left: 0 !important;
    padding-top: var(--header-height) !important;
  }
  .side-app {
    padding: 16px !important;
  }
  /* Overlay is handled by #mimosa-sidebar-overlay in mimosa-theme.js */
}

@media (max-width: 768px) {
  .app-header .container-fluid {
    padding: 0 10px !important;
  }
  /* Hide brand text on mobile to save space */
  .app-header .header-brand span { display: none !important; }
  /* Clock button icon-only on mobile */
  .clock-btn .button-text { display: none !important; }
  .clock-btn { padding: 7px 9px !important; }
  .header-brand-img { height: 26px !important; }
  /* Ensure all header icon buttons stay visible */
  .app-header .nav-link,
  .app-header .nav-link.icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  /* Tighten gap on mobile */
  .app-header .container-fluid > div[style*="gap:4px"] {
    gap: 2px !important;
  }
}

@media (max-width: 480px) {
  .side-app { padding: 10px !important; }
  .app-header .container-fluid {
    padding: 0 8px !important;
  }
  /* Show only essential buttons on very small screens */
  .app-header .dropdown.header-notify { display: none !important; }
  /* Keep: sidebar toggle, brand logo, clock, profile */
}

/* ============================================================
   21. UTILITY CLASSES
   ============================================================ */
/* — Legacy indigo aliases (now MDH brand blue) — */
.text-indigo   { color: var(--color-primary) !important; }
.bg-indigo     { background: var(--color-primary) !important; }
.border-indigo { border-color: var(--color-primary) !important; }
.shadow-indigo { box-shadow: 0 4px 14px rgba(var(--mdh-shadow-rgb),0.2) !important; }

/* — MDH brand text utilities — */
.text-mdh           { color: var(--mdh-blue) !important; }
.text-mdh-blue      { color: var(--mdh-blue-600) !important; }
.text-mdh-blue-dark { color: var(--mdh-blue-700) !important; }
.text-mdh-red       { color: var(--mdh-red-500) !important; }
.text-mdh-red-deep  { color: var(--mdh-red-800) !important; }
.text-mdh-accent    { color: var(--mdh-dark-red) !important; }
.text-mdh-black     { color: var(--mdh-black) !important; }
.text-mdh-muted     { color: var(--mdh-gray-500) !important; }
.text-mdh-muted-2   { color: var(--mdh-gray-400) !important; }

/* — MDH brand background utilities — */
.bg-mdh             { background: var(--mdh-blue) !important; color:#fff !important; }
.bg-mdh-blue        { background: var(--mdh-blue-600) !important; color:#fff !important; }
.bg-mdh-blue-deep   { background: var(--mdh-blue-700) !important; color:#fff !important; }
.bg-mdh-red         { background: var(--mdh-red-500) !important; color:#fff !important; }
.bg-mdh-accent      { background: var(--mdh-dark-red) !important; color:#fff !important; }
.bg-mdh-black       { background: var(--mdh-black) !important; color:#fff !important; }

.bg-mdh-soft        { background: var(--mdh-blue-50) !important; }
.bg-mdh-soft-blue   { background: var(--mdh-blue-50) !important; }
.bg-mdh-soft-red    { background: var(--mdh-red-50) !important; }
.bg-mdh-soft-gray   { background: var(--mdh-gray-50) !important; }
.bg-mdh-tint        { background: var(--mdh-blue-100) !important; }
.bg-mdh-light-blue  { background: var(--mdh-light-blue) !important; }

/* — MDH brand border utilities — */
.border-mdh        { border-color: var(--mdh-blue) !important; }
.border-mdh-blue   { border-color: var(--mdh-blue-600) !important; }
.border-mdh-red    { border-color: var(--mdh-red-500) !important; }
.border-mdh-accent { border-color: var(--mdh-dark-red) !important; }

/* — MDH brand gradients (re-usable) — */
.bg-mdh-gradient {
  background: var(--mdh-blue-600) !important;
  color: #fff !important;
}
.bg-mdh-gradient-red {
  background: var(--mdh-red-500) !important;
  color: #fff !important;
}
.bg-mdh-gradient-accent {
  background: var(--mdh-dark-red) !important;
  color: #fff !important;
}

/* — Brand ribbon strip (small top accent bar on cards/sidebars) — */
.mdh-ribbon-top {
  position: relative;
}
.mdh-ribbon-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mdh-blue-600);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.mdh-ribbon-top--red::before {
  background: var(--mdh-red-500);
}
.mdh-ribbon-top--accent::before {
  background: var(--mdh-dark-red);
}

/* — Brand text helpers — */
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

.text-xs  { font-size: var(--font-size-xs) !important; }
.text-sm  { font-size: var(--font-size-sm) !important; }
.text-md  { font-size: var(--font-size-md) !important; }
.text-lg  { font-size: var(--font-size-lg) !important; }
.text-xl  { font-size: var(--font-size-xl) !important; }

.rounded-theme { border-radius: var(--card-radius) !important; }
.transition    { transition: all var(--transition-base) !important; }

/* ============================================================
   22. SHARED BLADE UTILITIES — replaces common inline styles
   ============================================================
   These exist so blades don't repeat the same `style="..."`.
   When migrating, search-and-replace common patterns to these.
   ============================================================ */

/* Width helpers used by many tables/forms */
.w-full     { width: 100% !important; }
.w-fit      { width: 1% !important; white-space: nowrap !important; }   /* style="width:1%" */
.w-15       { width: 15% !important; }
.w-20       { width: 20% !important; }
.w-25p      { width: 25% !important; }
.w-50p      { width: 50% !important; }
.w-75p      { width: 75% !important; }

/* Common display toggles (use these instead of `style="display:none"`) */
.is-hidden  { display: none !important; }
.is-shown   { display: block !important; }
.is-flex    { display: flex !important; }

/* Soft background panels (was: style="background-color: rgb(238, 241, 248)") */
.panel-soft         { background-color: var(--mdh-blue-50) !important; }
.panel-soft-2       { background-color: var(--mdh-gray-50) !important; }
.panel-white        { background-color: #FFFFFF !important; }
.panel-info-soft    { background-color: var(--mdh-blue-100) !important; }
.panel-warn-soft    { background-color: var(--color-warning-light) !important; }
.panel-danger-soft  { background-color: var(--mdh-red-50) !important; }
.panel-success-soft { background-color: var(--color-success-light) !important; }

/* Status pill backgrounds (was: style="background-color: #65bcff") */
.pill-light-blue   { background-color: var(--mdh-light-blue) !important; color: var(--mdh-blue-900) !important; }

/* Text size / weight helpers used by inline styles */
.text-9            { font-size: 9px !important; }
.text-10           { font-size: 10px !important; }
.text-11           { font-size: 11px !important; }
.text-13           { font-size: 13px !important; }
.text-larger       { font-size: 1.05rem !important; }
.text-bolder       { font-weight: 700 !important; }
.text-bold-x       { font-weight: 800 !important; }

/* Common text colors used as inline (#8392a5 / #ef4444 / #1a1af5 / var(--mdh-blue-500)) */
.text-muted-2      { color: var(--slate-500) !important; }
.text-muted-3      { color: var(--slate-400) !important; }
.text-link-blue    { color: var(--mdh-blue-600) !important; }
.text-soft-red     { color: var(--mdh-red-500) !important; }

/* Alignment helpers (used as inline text-align) */
.ta-center  { text-align: center !important; }
.ta-right   { text-align: right !important; }
.ta-left    { text-align: left !important; }

/* Margin helpers commonly used inline */
.ml-auto-50 { margin-left: 50% !important; }
.mr-10     { margin-right: 10px !important; }
.ml-2pc    { margin-left: 2% !important; }

/* ============================================================
   23. BRAND COMPONENT PRIMITIVES
   ============================================================ */

/* Section title with MDH accent underline */
.mdh-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mdh-black);
  margin: 0 0 14px;
  padding-bottom: 8px;
  position: relative;
  display: inline-block;
}
.mdh-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--mdh-blue-600);
}

/* Pill / chip — used for statuses, tags, filters */
.mdh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--mdh-blue-50);
  color: var(--mdh-blue-700);
  border: 1px solid var(--mdh-blue-100);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.mdh-chip--red    { background: var(--mdh-red-50); color: var(--mdh-red-700); border-color: var(--mdh-red-100); }
.mdh-chip--accent { background: var(--color-accent-light); color: var(--mdh-dark-red); border-color: rgba(101,29,50,0.18); }
.mdh-chip--gray   { background: var(--mdh-gray-100); color: var(--mdh-gray-700); border-color: var(--mdh-gray-200); }
.mdh-chip--success{ background: var(--color-success-light); color: #065F46; border-color: rgba(16,185,129,0.18); }
.mdh-chip--warning{ background: var(--color-warning-light); color: #92400E; border-color: rgba(245,158,11,0.18); }

/* Brand outlined button (when filled gradient feels too heavy) */
.btn-mdh-outline {
  background: #FFFFFF !important;
  color: var(--mdh-blue-700) !important;
  border: 1.5px solid var(--mdh-blue-600) !important;
  font-weight: 600 !important;
  transition: all var(--transition-base) !important;
}
.btn-mdh-outline:hover {
  background: var(--mdh-blue-600) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(var(--mdh-shadow-rgb),0.25) !important;
}
.btn-mdh-accent {
  background: var(--mdh-dark-red) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(101,29,50,0.25) !important;
}
.btn-mdh-accent:hover {
  box-shadow: 0 4px 14px rgba(101,29,50,0.35) !important;
  color: #FFFFFF !important;
}