/* ==========================================================================
   BQIP-SEZ Management Information System (MIS)
   Core Design System Stylesheet
   --------------------------------------------------------------------------
   Author : BQIP-SEZ MIS UI Team
   Notes  : Enterprise / Government grade admin interface.
            Built on top of Bootstrap 5.3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — professional navy / corporate blue */
  --mis-navy-900: #071a33;
  --mis-navy-800: #0b2545;
  --mis-navy-700: #102f57;
  --mis-navy-600: #163d6c;
  --mis-navy-500: #1d4e89;

  --mis-blue-700: #14488f;
  --mis-blue-600: #1a5bb8;
  --mis-blue-500: #2563eb;
  --mis-blue-400: #4b83f0;
  --mis-blue-100: #e3ecfb;
  --mis-blue-050: #f1f6fe;

  --mis-teal-500: #0d7c8a;
  --mis-green-600: #157f3d;
  --mis-green-500: #1a9c4c;
  --mis-green-050: #e8f6ee;
  --mis-amber-600: #b06a06;
  --mis-amber-500: #d98a10;
  --mis-amber-050: #fdf3e3;
  --mis-red-600: #b3261e;
  --mis-red-500: #d33a30;
  --mis-red-050: #fdecea;
  --mis-violet-500: #6d43c8;
  --mis-violet-050: #f1ecfc;

  /* Neutrals */
  --mis-bg: #f2f5f9;
  --mis-surface: #ffffff;
  --mis-surface-alt: #f8fafc;
  --mis-border: #e2e8f0;
  --mis-border-strong: #cbd5e1;
  --mis-text: #0f1e33;
  --mis-text-muted: #5b6b81;
  --mis-text-faint: #8a99ad;

  /* Layout metrics */
  --sidebar-w: 276px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 66px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 30, 51, .06);
  --shadow-sm: 0 1px 3px rgba(15, 30, 51, .08), 0 1px 2px rgba(15, 30, 51, .04);
  --shadow: 0 4px 12px rgba(15, 30, 51, .07), 0 1px 3px rgba(15, 30, 51, .05);
  --shadow-md: 0 10px 24px rgba(15, 30, 51, .09), 0 2px 6px rgba(15, 30, 51, .05);
  --shadow-lg: 0 20px 44px rgba(15, 30, 51, .14);

  --ring: 0 0 0 3px rgba(37, 99, 235, .18);

  /* Sidebar (dark navy in both themes) */
  --sb-bg: #0b2545;
  --sb-bg-alt: #071a33;
  --sb-text: #c3d2e4;
  --sb-text-dim: #7f94ad;
  --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: #2563eb;
  --sb-border: rgba(255, 255, 255, .08);

  --topbar-bg: rgba(255, 255, 255, .92);
}

/* Dark theme */
[data-theme="dark"] {
  --mis-bg: #0a1422;
  --mis-surface: #111e30;
  --mis-surface-alt: #16253a;
  --mis-border: #22334a;
  --mis-border-strong: #33475f;
  --mis-text: #e7eef7;
  --mis-text-muted: #9aadc4;
  --mis-text-faint: #71869e;

  --mis-blue-050: #13273f;
  --mis-blue-100: #17304d;
  --mis-green-050: #102c1f;
  --mis-amber-050: #33260d;
  --mis-red-050: #351a18;
  --mis-violet-050: #241c3d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);

  --sb-bg: #0b1827;
  --sb-bg-alt: #071220;

  --topbar-bg: rgba(17, 30, 48, .92);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  background-color: var(--mis-bg);
  color: var(--mis-text);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: .875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { color: var(--mis-text); font-weight: 600; letter-spacing: -.01em; }

a { color: var(--mis-blue-600); text-decoration: none; }
a:hover { color: var(--mis-blue-700); }

code, kbd, .mono {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .82em;
}

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mis-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--mis-text-faint); background-clip: content-box; }

/* Utility */
.min-w-0 { min-width: 0 !important; }
.auth-body { background: var(--mis-surface); }
.text-violet { color: var(--mis-violet-500) !important; }
.text-teal { color: var(--mis-teal-500) !important; }
.text-amber { color: var(--mis-amber-600) !important; }
.text-muted-2 { color: var(--mis-text-muted) !important; }
.text-faint { color: var(--mis-text-faint) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fs-13 { font-size: .8125rem !important; }
.fs-12 { font-size: .75rem !important; }
.fs-11 { font-size: .6875rem !important; }
.lh-1 { line-height: 1 !important; }
.bg-surface { background-color: var(--mis-surface) !important; }
.bg-surface-alt { background-color: var(--mis-surface-alt) !important; }
.border-mis { border-color: var(--mis-border) !important; }
.divider-y { height: 1px; background: var(--mis-border); border: 0; opacity: 1; margin: .75rem 0; }
.text-navy { color: var(--mis-navy-700) !important; }
.text-brand { color: var(--mis-blue-600) !important; }
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cursor-pointer { cursor: pointer; }

/* --------------------------------------------------------------------------
   3. APP SHELL
   -------------------------------------------------------------------------- */
.app-wrapper { min-height: 100vh; }

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  transition: margin-left .25s cubic-bezier(.4, 0, .2, 1);
}

body.sidebar-collapsed .app-main { margin-left: var(--sidebar-w-collapsed); }

.page-content {
  flex: 1 1 auto;
  padding: 22px 24px 8px;
  max-width: 1800px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  z-index: 1045;
  transition: width .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 2px 0 12px rgba(7, 26, 51, .18);
}

body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

/* Brand */
.sidebar-brand {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sb-border);
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-brand .brand-mark {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--mis-blue-500), var(--mis-navy-600));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.5px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .35);
}

.sidebar-brand .brand-text { line-height: 1.15; }
.sidebar-brand .brand-text .t1 { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .2px; display: block; }
.sidebar-brand .brand-text .t2 { color: var(--sb-text-dim); font-size: 10.5px; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; display: block; }

body.sidebar-collapsed .sidebar-brand { padding: 0 19px; }
body.sidebar-collapsed .sidebar-brand .brand-text { display: none; }

/* Nav scroll area */
.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 20px;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }

.nav-section-title {
  color: var(--sb-text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 16px 12px 7px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .18s ease;
}
.nav-section-title:first-child { padding-top: 6px; }
body.sidebar-collapsed .nav-section-title { opacity: 0; height: 20px; padding: 10px 0 0; }

.sidebar-nav { list-style: none; margin: 0; padding: 0; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--sb-text);
  font-size: 13.2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link:hover { background: var(--sb-hover); color: #fff; }
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, .95), rgba(37, 99, 235, .72));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .3);
}
.sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: #fff; border-radius: 0 3px 3px 0;
}

.sidebar-nav .nav-link .nav-ico {
  flex: 0 0 20px;
  width: 20px;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}
.sidebar-nav .nav-link .nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.sidebar-nav .nav-link .nav-caret {
  font-size: 11px;
  color: var(--sb-text-dim);
  transition: transform .2s ease;
}
.sidebar-nav .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
.sidebar-nav .nav-link .nav-count {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.sidebar-nav .nav-link.active .nav-count { background: rgba(255, 255, 255, .25); }

/* Submenu */
.sidebar-nav .submenu {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 14px;
  position: relative;
}
.sidebar-nav .submenu::before {
  content: "";
  position: absolute; left: 24px; top: 4px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, .12);
}
.sidebar-nav .submenu .nav-link {
  padding: 6.5px 12px 6.5px 18px;
  font-size: 12.7px;
  font-weight: 450;
  color: var(--sb-text-dim);
}
.sidebar-nav .submenu .nav-link:hover { color: #fff; }
.sidebar-nav .submenu .nav-link.active {
  background: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.sidebar-nav .submenu .nav-link.active::before {
  content: "";
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mis-blue-400);
  box-shadow: 0 0 0 3px rgba(75, 131, 240, .2);
  height: 6px;
}

/* Collapsed behaviour */
body.sidebar-collapsed .sidebar-nav .nav-label,
body.sidebar-collapsed .sidebar-nav .nav-caret,
body.sidebar-collapsed .sidebar-nav .nav-count,
body.sidebar-collapsed .sidebar-nav .submenu,
body.sidebar-collapsed .sidebar-user .su-meta,
body.sidebar-collapsed .sidebar-user .su-logout-text { display: none; }
body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: 10px 0; }
body.sidebar-collapsed .sidebar-nav .submenu { display: none !important; }

/* Sidebar flyout on collapse.
   The label is rendered by app.js into a body-level, position:fixed node —
   an ::after pseudo-element would be clipped by .nav-link/.sidebar-scroll
   (both need overflow:hidden / overflow-y:auto). */
.nav-flyout {
  position: fixed;
  z-index: 1095;
  transform: translateY(-50%);
  background: var(--mis-navy-900);
  color: #fff;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease;
}
.nav-flyout.show { opacity: 1; visibility: visible; }
.nav-flyout::before {
  content: "";
  position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--mis-navy-900);
}

/* Sidebar footer / user */
.sidebar-user {
  flex: 0 0 auto;
  border-top: 1px solid var(--sb-border);
  background: var(--sb-bg-alt);
  padding: 12px;
}
.sidebar-user .su-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius);
  transition: background .15s ease;
}
.sidebar-user .su-inner:hover { background: var(--sb-hover); }
.sidebar-user .su-meta { min-width: 0; flex: 1 1 auto; }
.sidebar-user .su-name { color: #fff; font-size: 12.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .su-role { color: var(--sb-text-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .su-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(211, 58, 48, .12);
  color: #ff9d95; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(211, 58, 48, .25);
  transition: background .15s ease, color .15s ease;
}
.sidebar-user .su-logout:hover { background: var(--mis-red-500); color: #fff; }
body.sidebar-collapsed .sidebar-user .su-inner { justify-content: center; }
body.sidebar-collapsed .sidebar-user .su-logout { padding: 8px 0; }

/* Backdrop (mobile) */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 26, 51, .55);
  backdrop-filter: blur(2px);
  z-index: 1040;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   5. TOPBAR
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--mis-border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.topbar-toggle {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: grid; place-items: center;
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-sm);
  background: var(--mis-surface);
  color: var(--mis-text-muted);
  font-size: 17px;
  transition: all .15s ease;
}
.topbar-toggle:hover { color: var(--mis-blue-600); border-color: var(--mis-blue-400); background: var(--mis-blue-050); }

.page-heading { min-width: 0; }
.page-heading h1 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.015em;
}
.breadcrumb-mis {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 11.5px; color: var(--mis-text-faint);
}
.breadcrumb-mis li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.breadcrumb-mis li + li::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: 9px; color: var(--mis-border-strong); }
.breadcrumb-mis a { color: var(--mis-text-muted); font-weight: 500; }
.breadcrumb-mis a:hover { color: var(--mis-blue-600); }
.breadcrumb-mis li.active { color: var(--mis-text); font-weight: 600; }

/* Global search */
.topbar-search { position: relative; width: 300px; max-width: 34vw; }
.topbar-search .bi-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--mis-text-faint); font-size: 14px; pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: 38px;
  padding: 0 56px 0 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--mis-border);
  background: var(--mis-surface-alt);
  color: var(--mis-text);
  font-size: 13px;
  transition: all .15s ease;
}
.topbar-search input::placeholder { color: var(--mis-text-faint); }
.topbar-search input:focus {
  outline: none;
  border-color: var(--mis-blue-400);
  background: var(--mis-surface);
  box-shadow: var(--ring);
}
.topbar-search kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: var(--mis-surface); border: 1px solid var(--mis-border);
  color: var(--mis-text-faint); font-size: 10px; padding: 2px 6px; border-radius: 5px;
}

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 380px; overflow-y: auto;
  padding: 6px;
  display: none;
  z-index: 1080;
}
.search-results.show { display: block; }
.search-results .sr-group { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--mis-text-faint); padding: 8px 10px 4px; }
.search-results a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--mis-text); font-size: 13px;
}
.search-results a:hover { background: var(--mis-blue-050); }
.search-results a i { color: var(--mis-text-faint); }

/* Topbar icon buttons */
.topbar-icon {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--mis-text-muted);
  font-size: 17px;
  transition: all .15s ease;
}
.topbar-icon:hover { background: var(--mis-surface-alt); border-color: var(--mis-border); color: var(--mis-blue-600); }
.topbar-icon .badge-dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 20px;
  background: var(--mis-red-500); color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--mis-surface);
  line-height: 1;
}
.topbar-icon .badge-dot.badge-dot-info { background: var(--mis-blue-500); }
.topbar-icon .badge-dot.badge-dot-success { background: var(--mis-green-500); }

.topbar-divider { width: 1px; height: 26px; background: var(--mis-border); margin: 0 6px; }

/* Profile chip */
.profile-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--mis-border);
  border-radius: 40px;
  background: var(--mis-surface);
  transition: all .15s ease;
}
.profile-chip:hover { border-color: var(--mis-blue-400); box-shadow: var(--shadow-xs); }
.profile-chip .pc-meta { line-height: 1.2; text-align: left; }
.profile-chip .pc-name { font-size: 12.5px; font-weight: 600; color: var(--mis-text); display: block; }
.profile-chip .pc-role { font-size: 10.5px; color: var(--mis-text-faint); display: block; }

/* Avatars */
.avatar {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--mis-blue-500), var(--mis-navy-600));
  color: #fff; font-weight: 600; font-size: 13px;
  letter-spacing: .3px;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-xs { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-lg { width: 48px; height: 48px; font-size: 17px; }
.avatar-xl { width: 76px; height: 76px; font-size: 26px; border-radius: 18px; }
.avatar-round { border-radius: 10px; }
.avatar-success { background: linear-gradient(140deg, var(--mis-green-500), var(--mis-green-600)); }
.avatar-warn { background: linear-gradient(140deg, var(--mis-amber-500), var(--mis-amber-600)); }
.avatar-danger { background: linear-gradient(140deg, var(--mis-red-500), var(--mis-red-600)); }
.avatar-soft { background: var(--mis-blue-100); color: var(--mis-blue-700); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--mis-surface); margin-left: -9px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   6. DROPDOWNS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  font-size: 13px;
  background: var(--mis-surface);
  min-width: 210px;
  margin-top: 8px !important;
}
.dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--mis-text);
  font-weight: 500;
  white-space: nowrap;
}
.dropdown-menu .dropdown-item i { font-size: 15px; color: var(--mis-text-faint); width: 17px; text-align: center; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--mis-blue-050); color: var(--mis-blue-700); }
.dropdown-menu .dropdown-item:hover i { color: var(--mis-blue-600); }
.dropdown-menu .dropdown-item.text-danger, .dropdown-menu .dropdown-item.text-danger i { color: var(--mis-red-500); }
.dropdown-menu .dropdown-item.text-danger:hover { background: var(--mis-red-050); color: var(--mis-red-600); }
.dropdown-menu .dropdown-divider { border-color: var(--mis-border); margin: 5px 2px; opacity: 1; }
.dropdown-header { font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--mis-text-faint); padding: 8px 10px 4px; }

.dropdown-menu-wide { min-width: 340px; padding: 0; }
.dropdown-menu-wide .dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--mis-border);
}
.dropdown-menu-wide .dd-head h6 { margin: 0; font-size: 13.5px; font-weight: 700; }
.dropdown-menu-wide .dd-body { max-height: 340px; overflow-y: auto; }
.dropdown-menu-wide .dd-foot {
  padding: 9px 14px; border-top: 1px solid var(--mis-border);
  text-align: center; background: var(--mis-surface-alt);
  border-radius: 0 0 var(--radius) var(--radius);
}
.dropdown-menu-wide .dd-foot a { font-size: 12.5px; font-weight: 600; }

/* Notification / message rows */
.notif-item {
  display: flex; gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--mis-border);
  transition: background .15s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--mis-surface-alt); }
.notif-item.unread { background: var(--mis-blue-050); }
.notif-item .ni-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px; display: grid; place-items: center;
  font-size: 15px;
}
.notif-item .ni-title { font-size: 12.8px; font-weight: 600; color: var(--mis-text); margin: 0 0 2px; }
.notif-item .ni-text { font-size: 12px; color: var(--mis-text-muted); margin: 0; line-height: 1.45; }
.notif-item .ni-time { font-size: 11px; color: var(--mis-text-faint); margin-top: 3px; display: block; }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--mis-border);
  padding: 15px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-header h5, .card-header .card-title {
  margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.card-header .card-title i { color: var(--mis-blue-600); font-size: 16px; }
.card-header .card-subtitle { font-size: 11.5px; color: var(--mis-text-faint); margin: 2px 0 0; font-weight: 400; }
.card-body { padding: 18px; }
.card-body.p-0 { padding: 0; }
.card-footer {
  background: var(--mis-surface-alt);
  border-top: 1px solid var(--mis-border);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  font-size: 12.5px;
}

.card-accent-top { border-top: 3px solid var(--mis-blue-500); }

/* Section header outside cards */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.section-head h2 { font-size: 15.5px; font-weight: 700; margin: 0; }
.section-head p { font-size: 12.5px; color: var(--mis-text-muted); margin: 2px 0 0; }

/* --------------------------------------------------------------------------
   8. KPI CARDS
   -------------------------------------------------------------------------- */
.kpi-card {
  position: relative;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-lg);
  padding: 16px 17px 14px;
  height: 100%;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kpi-accent, var(--mis-blue-500));
  opacity: .9;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--kpi-accent, var(--mis-blue-400));
}
.kpi-card:hover .kpi-icon { transform: scale(1.06) rotate(-3deg); }

.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kpi-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 19px;
  background: var(--kpi-soft, var(--mis-blue-050));
  color: var(--kpi-accent, var(--mis-blue-600));
  transition: transform .2s ease;
}
.kpi-label { font-size: 11.5px; font-weight: 600; color: var(--mis-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi-value {
  font-size: 26px; font-weight: 700; letter-spacing: -.8px;
  color: var(--mis-text); line-height: 1.15; margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-value .unit { font-size: 13px; font-weight: 600; color: var(--mis-text-faint); letter-spacing: 0; margin-left: 3px; }
.kpi-desc { font-size: 11.8px; color: var(--mis-text-faint); }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 20px;
}
.kpi-trend.up { color: var(--mis-green-600); background: var(--mis-green-050); }
.kpi-trend.down { color: var(--mis-red-600); background: var(--mis-red-050); }
.kpi-trend.flat { color: var(--mis-text-muted); background: var(--mis-surface-alt); }

.kpi-spark { width: 84px; height: 30px; }

/* Accent variants.
   Each variant sets --kpi-accent (icon, top rule, bars), --kpi-accent-2 (the
   second stop of the .kpi-solid gradient) and --kpi-soft (tinted icon bed). */
.kpi-blue   { --kpi-accent: var(--mis-blue-600);  --kpi-accent-2: var(--mis-navy-700);   --kpi-soft: var(--mis-blue-050); }
.kpi-navy   { --kpi-accent: var(--mis-navy-600);  --kpi-accent-2: var(--mis-navy-900);   --kpi-soft: #e8eef7; }
.kpi-green  { --kpi-accent: var(--mis-green-600); --kpi-accent-2: #0d5c2b;               --kpi-soft: var(--mis-green-050); }
.kpi-amber  { --kpi-accent: var(--mis-amber-600); --kpi-accent-2: #8a5205;               --kpi-soft: var(--mis-amber-050); }
.kpi-red    { --kpi-accent: var(--mis-red-600);   --kpi-accent-2: #8c1c16;               --kpi-soft: var(--mis-red-050); }
.kpi-violet { --kpi-accent: var(--mis-violet-500);--kpi-accent-2: #4c2b96;               --kpi-soft: var(--mis-violet-050); }
.kpi-teal   { --kpi-accent: var(--mis-teal-500);  --kpi-accent-2: #075661;               --kpi-soft: #e2f3f5; }
[data-theme="dark"] .kpi-navy, [data-theme="dark"] .kpi-teal { --kpi-soft: #17304d; }

/* Solid KPI variant (for hero/summary strips) */
.kpi-solid {
  background: linear-gradient(135deg, var(--kpi-accent, var(--mis-navy-700)), var(--kpi-accent-2, var(--mis-navy-800)));
  border-color: transparent;
  color: #fff;
}
.kpi-solid .kpi-value, .kpi-solid .kpi-label, .kpi-solid .kpi-desc { color: #fff; }
.kpi-solid .kpi-label, .kpi-solid .kpi-desc { opacity: .82; }
.kpi-solid .kpi-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.kpi-solid .kpi-trend { background: rgba(255, 255, 255, .18); color: #fff; }
.kpi-solid::after { display: none; }

/* --------------------------------------------------------------------------
   9. MINI STAT / SUMMARY PILLS
   -------------------------------------------------------------------------- */
.stat-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  height: 100%;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.stat-strip:hover { box-shadow: var(--shadow-sm); border-color: var(--mis-border-strong); }
.stat-strip .ss-icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 10px; display: grid; place-items: center; font-size: 17px;
}
.stat-strip .ss-value { font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.stat-strip .ss-label { font-size: 11.5px; color: var(--mis-text-muted); font-weight: 500; }

.summary-tile {
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  padding: 14px 15px;
  height: 100%;
  display: flex; align-items: center; gap: 13px;
  transition: all .18s ease;
}
.summary-tile:hover { border-color: var(--mis-blue-400); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.summary-tile .st-bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--kpi-accent, var(--mis-blue-500)); }
.summary-tile .st-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--kpi-soft, var(--mis-blue-050)); color: var(--kpi-accent, var(--mis-blue-600)); }
.summary-tile .st-value { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.summary-tile .st-label { font-size: 11.5px; color: var(--mis-text-muted); }
.summary-tile .st-sub { font-size: 10.5px; color: var(--mis-text-faint); }

/* --------------------------------------------------------------------------
   10. BADGES
   -------------------------------------------------------------------------- */
.badge-soft {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3.5px 9px;
  border-radius: 20px;
  font-size: 11.2px; font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-soft i { font-size: 10px; }
.badge-soft::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 5px;
}
.badge-soft.no-dot::before { display: none; }

.badge-soft-success { background: var(--mis-green-050); color: var(--mis-green-600); border-color: rgba(21, 127, 61, .18); }
.badge-soft-warning { background: var(--mis-amber-050); color: var(--mis-amber-600); border-color: rgba(176, 106, 6, .18); }
.badge-soft-danger  { background: var(--mis-red-050);  color: var(--mis-red-600);   border-color: rgba(179, 38, 30, .18); }
.badge-soft-info    { background: var(--mis-blue-050); color: var(--mis-blue-700);  border-color: rgba(26, 91, 184, .18); }
.badge-soft-primary { background: var(--mis-blue-050); color: var(--mis-blue-700);  border-color: rgba(26, 91, 184, .18); }
.badge-soft-secondary { background: var(--mis-surface-alt); color: var(--mis-text-muted); border-color: var(--mis-border); }
.badge-soft-violet  { background: var(--mis-violet-050); color: var(--mis-violet-500); border-color: rgba(109, 67, 200, .18); }
.badge-soft-navy    { background: #e8eef7; color: var(--mis-navy-700); border-color: rgba(16, 47, 87, .15); }
[data-theme="dark"] .badge-soft-navy { background: #17304d; color: #9dc0ee; }
.badge-soft-teal    { background: #e2f3f5; color: var(--mis-teal-500); border-color: rgba(13, 124, 138, .18); }
[data-theme="dark"] .badge-soft-teal { background: #10333a; color: #63c3cf; }
.badge-soft-dark    { background: var(--mis-navy-800); color: #fff; }

.badge-soft-lg { font-size: 12.2px; padding: 5px 12px; }

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */
.btn { font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 15px; transition: all .15s ease; }
.btn:focus, .btn:focus-visible { box-shadow: var(--ring) !important; outline: none; }
.btn-sm { font-size: 12.2px; padding: 5.5px 11px; }
.btn-lg { font-size: 14.5px; padding: 11px 22px; }
.btn i { font-size: 1.05em; }

.btn-primary { background: var(--mis-blue-600); border-color: var(--mis-blue-600); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--mis-blue-700); border-color: var(--mis-blue-700); }
.btn-navy { background: var(--mis-navy-700); border-color: var(--mis-navy-700); color: #fff; }
.btn-navy:hover { background: var(--mis-navy-800); border-color: var(--mis-navy-800); color: #fff; }

.btn-outline-secondary { border-color: var(--mis-border-strong); color: var(--mis-text-muted); background: var(--mis-surface); }
.btn-outline-secondary:hover { background: var(--mis-surface-alt); border-color: var(--mis-text-faint); color: var(--mis-text); }
.btn-outline-primary { color: var(--mis-blue-600); border-color: var(--mis-blue-400); background: var(--mis-surface); }
.btn-outline-primary:hover { background: var(--mis-blue-600); border-color: var(--mis-blue-600); }
.btn-outline-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }

/* Soft buttons */
.btn-soft { border: 1px solid transparent; }
.btn-soft-primary { background: var(--mis-blue-050); color: var(--mis-blue-700); }
.btn-soft-primary:hover { background: var(--mis-blue-600); color: #fff; }
.btn-soft-success { background: var(--mis-green-050); color: var(--mis-green-600); }
.btn-soft-success:hover { background: var(--mis-green-600); color: #fff; }
.btn-soft-danger { background: var(--mis-red-050); color: var(--mis-red-600); }
.btn-soft-danger:hover { background: var(--mis-red-500); color: #fff; }
.btn-soft-warning { background: var(--mis-amber-050); color: var(--mis-amber-600); }
.btn-soft-warning:hover { background: var(--mis-amber-500); color: #fff; }
.btn-soft-secondary { background: var(--mis-surface-alt); color: var(--mis-text-muted); border-color: var(--mis-border); }
.btn-soft-secondary:hover { background: var(--mis-navy-700); color: #fff; border-color: var(--mis-navy-700); }

/* Icon-only action buttons in tables */
.btn-icon {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--mis-border);
  background: var(--mis-surface);
  color: var(--mis-text-muted);
  font-size: 13.5px;
  transition: all .13s ease;
}
.btn-icon:hover { background: var(--mis-blue-050); color: var(--mis-blue-600); border-color: var(--mis-blue-400); }
.btn-icon.text-success:hover { background: var(--mis-green-050); color: var(--mis-green-600); border-color: var(--mis-green-500); }
.btn-icon.text-danger:hover { background: var(--mis-red-050); color: var(--mis-red-600); border-color: var(--mis-red-500); }
.btn-icon.text-warning:hover { background: var(--mis-amber-050); color: var(--mis-amber-600); border-color: var(--mis-amber-500); }

.btn-group-actions { display: inline-flex; gap: 4px; }

/* Loading state */
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mis-spin .6s linear infinite;
}
.btn-primary.is-loading::after, .btn-navy.is-loading::after, .btn-success.is-loading::after { border-color: #fff; border-top-color: transparent; }
@keyframes mis-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-label {
  font-size: 12.3px;
  font-weight: 600;
  color: var(--mis-text-muted);
  margin-bottom: 6px;
  letter-spacing: .1px;
}
.form-label .req { color: var(--mis-red-500); margin-left: 2px; }

.form-control, .form-select {
  border: 1px solid var(--mis-border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13.2px;
  color: var(--mis-text);
  background-color: var(--mis-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--mis-text-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--mis-blue-400);
  box-shadow: var(--ring);
  background-color: var(--mis-surface);
  color: var(--mis-text);
}
.form-control:disabled, .form-select:disabled { background: var(--mis-surface-alt); color: var(--mis-text-faint); }
.form-control-sm, .form-select-sm { font-size: 12.5px; padding: 6px 10px; }
.form-text { font-size: 11.5px; color: var(--mis-text-faint); }

.input-group-text {
  background: var(--mis-surface-alt);
  border: 1px solid var(--mis-border-strong);
  color: var(--mis-text-faint);
  font-size: 13px;
}

.form-check-input { border-color: var(--mis-border-strong); }
.form-check-input:checked { background-color: var(--mis-blue-600); border-color: var(--mis-blue-600); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--mis-blue-400); }
.form-check-label { font-size: 13px; color: var(--mis-text-muted); }

/* Search input with icon */
.search-field { position: relative; }
.search-field > i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--mis-text-faint); font-size: 13.5px; pointer-events: none;
}
.search-field > .form-control { padding-left: 33px; }
.search-field .clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--mis-text-faint); font-size: 13px;
  padding: 3px; border-radius: 4px; display: none;
}
.search-field .clear-btn:hover { color: var(--mis-red-500); }
.search-field.has-value .clear-btn { display: block; }

/* Filter toolbar */
.filter-bar {
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.filter-bar .fb-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.filter-bar .fb-field { min-width: 150px; flex: 1 1 150px; }
.filter-bar .fb-field.fb-grow { flex: 2 1 260px; }
.filter-bar .fb-actions { display: flex; gap: 8px; align-items: center; }

.chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--mis-border);
  background: var(--mis-surface);
  color: var(--mis-text-muted);
  font-size: 12.2px; font-weight: 600;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--mis-blue-400); color: var(--mis-blue-600); }
.chip.active { background: var(--mis-navy-700); border-color: var(--mis-navy-700); color: #fff; }
.chip .chip-count {
  font-size: 10.5px; padding: 0 6px; border-radius: 20px;
  background: var(--mis-surface-alt); color: var(--mis-text-muted);
}
.chip.active .chip-count { background: rgba(255,255,255,.22); color: #fff; }

/* --------------------------------------------------------------------------
   13. TABLES
   -------------------------------------------------------------------------- */
.table-responsive-mis { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-mis {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--mis-text);
  background: var(--mis-surface);
}
.table-mis thead th {
  background: var(--mis-surface-alt);
  color: var(--mis-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--mis-border);
  border-top: 1px solid var(--mis-border);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.table-mis thead th:first-child { padding-left: 18px; }
.table-mis thead th:last-child { padding-right: 18px; }
.table-mis tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mis-border);
  vertical-align: middle;
}
.table-mis tbody td:first-child { padding-left: 18px; }
.table-mis tbody td:last-child { padding-right: 18px; }
.table-mis tbody tr { transition: background .13s ease; }
.table-mis tbody tr:hover { background: var(--mis-blue-050); }
.table-mis tbody tr:last-child td { border-bottom: 0; }
.table-mis tfoot td {
  padding: 11px 14px; font-weight: 700; background: var(--mis-surface-alt);
  border-top: 1px solid var(--mis-border); font-size: 12.8px;
}

.table-mis .col-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.table-mis .col-id { font-weight: 600; color: var(--mis-blue-700); white-space: nowrap; }
.table-mis .col-strong { font-weight: 600; color: var(--mis-text); }
.table-mis .col-actions { white-space: nowrap; width: 1%; }
.table-mis .row-title { font-weight: 600; color: var(--mis-text); }
.table-mis .row-sub { font-size: 11.5px; color: var(--mis-text-faint); }

.cell-entity { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.cell-entity .ce-name { font-weight: 600; font-size: 12.9px; color: var(--mis-text); line-height: 1.3; }
.cell-entity .ce-sub { font-size: 11.3px; color: var(--mis-text-faint); }

.table-empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--mis-text-faint);
}
.table-empty i { font-size: 38px; opacity: .45; display: block; margin-bottom: 10px; }
.table-empty p { margin: 0; font-size: 13px; }

.table-loading { padding: 50px; text-align: center; }

/* Pagination */
.table-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--mis-border);
  background: var(--mis-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.table-pagination .tp-info { font-size: 12.3px; color: var(--mis-text-muted); }
.table-pagination .pagination { margin: 0; gap: 3px; }
.table-pagination .page-link {
  border: 1px solid var(--mis-border);
  color: var(--mis-text-muted);
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px; font-weight: 600;
  padding: 5px 10px;
  min-width: 32px; text-align: center;
  background: var(--mis-surface);
}
.table-pagination .page-link:hover { background: var(--mis-blue-050); color: var(--mis-blue-600); border-color: var(--mis-blue-400); }
.table-pagination .page-item.active .page-link { background: var(--mis-blue-600); border-color: var(--mis-blue-600); color: #fff; }
.table-pagination .page-item.disabled .page-link { opacity: .45; }

/* Sortable header */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--mis-blue-600); }
.th-sort i { font-size: 10px; margin-left: 4px; opacity: .5; }

/* --------------------------------------------------------------------------
   14. TABS
   -------------------------------------------------------------------------- */
.nav-tabs-mis {
  border-bottom: 1px solid var(--mis-border);
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.nav-tabs-mis::-webkit-scrollbar { height: 4px; }
.nav-tabs-mis::-webkit-scrollbar-thumb { background: var(--mis-border-strong); border-radius: 4px; }
.nav-tabs-mis .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--mis-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 15px;
  white-space: nowrap;
  border-radius: 0;
  display: flex; align-items: center; gap: 7px;
}
.nav-tabs-mis .nav-link i { font-size: 14px; }
.nav-tabs-mis .nav-link:hover { color: var(--mis-blue-600); border-bottom-color: var(--mis-border-strong); }
.nav-tabs-mis .nav-link.active {
  color: var(--mis-blue-700);
  border-bottom-color: var(--mis-blue-600);
  background: transparent;
}
.nav-tabs-mis .nav-link .tab-count {
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
  background: var(--mis-surface-alt); color: var(--mis-text-muted);
  border: 1px solid var(--mis-border);
}
.nav-tabs-mis .nav-link.active .tab-count { background: var(--mis-blue-050); color: var(--mis-blue-700); border-color: rgba(26,91,184,.2); }

/* Pills variant */
.nav-pills-mis { gap: 6px; }
.nav-pills-mis .nav-link {
  border-radius: var(--radius-sm);
  color: var(--mis-text-muted);
  font-size: 12.8px; font-weight: 600;
  padding: 7px 14px;
  border: 1px solid var(--mis-border);
  background: var(--mis-surface);
}
.nav-pills-mis .nav-link:hover { border-color: var(--mis-blue-400); color: var(--mis-blue-600); }
.nav-pills-mis .nav-link.active { background: var(--mis-navy-700); border-color: var(--mis-navy-700); color: #fff; }

/* --------------------------------------------------------------------------
   15. TIMELINE
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--mis-border); border-radius: 2px;
}
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .tl-dot {
  position: absolute; left: -30px; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; color: #fff;
  background: var(--mis-blue-600);
  border: 3px solid var(--mis-surface);
  box-shadow: 0 0 0 1px var(--mis-border);
}
.timeline-item .tl-dot.success { background: var(--mis-green-600); }
.timeline-item .tl-dot.warning { background: var(--mis-amber-500); }
.timeline-item .tl-dot.danger  { background: var(--mis-red-500); }
.timeline-item .tl-dot.muted   { background: var(--mis-text-faint); }
.timeline-item .tl-title { font-size: 13.3px; font-weight: 600; color: var(--mis-text); margin: 0 0 2px; }
.timeline-item .tl-meta { font-size: 11.5px; color: var(--mis-text-faint); display: flex; gap: 12px; flex-wrap: wrap; }
.timeline-item .tl-body { font-size: 12.8px; color: var(--mis-text-muted); margin-top: 5px; }
.timeline-item .tl-card {
  margin-top: 8px; padding: 10px 13px;
  background: var(--mis-surface-alt);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

/* Compact activity list */
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li {
  display: flex; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--mis-border);
}
.activity-list li:last-child { border-bottom: 0; }
.activity-list li:hover { background: var(--mis-surface-alt); }
.activity-list .al-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px; display: grid; place-items: center; font-size: 15px;
}
.activity-list .al-text { font-size: 12.8px; color: var(--mis-text); margin: 0; }
.activity-list .al-text strong { font-weight: 600; }
.activity-list .al-time { font-size: 11.2px; color: var(--mis-text-faint); }

/* --------------------------------------------------------------------------
   16. CHARTS
   -------------------------------------------------------------------------- */
.chart-card .card-body { padding: 8px 12px 12px; }
.chart-holder { position: relative; width: 100%; }
.chart-holder.h-xs { height: 170px; }
.chart-holder.h-sm { height: 220px; }
.chart-holder.h-md { height: 285px; }
.chart-holder.h-lg { height: 340px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 6px 0; }
.chart-legend .cl-item { display: flex; align-items: center; gap: 7px; font-size: 12.2px; color: var(--mis-text-muted); font-weight: 500; }
.chart-legend .cl-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.chart-legend .cl-val { font-weight: 700; color: var(--mis-text); font-variant-numeric: tabular-nums; }

.chart-toolbar { display: flex; align-items: center; gap: 6px; }
.chart-toolbar .btn-icon { width: 28px; height: 28px; font-size: 12.5px; }
.chart-toolbar .btn-icon.active { background: var(--mis-navy-700); border-color: var(--mis-navy-700); color: #fff; }

/* Custom donut center label */
.donut-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.donut-center .dc-value { font-size: 23px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.donut-center .dc-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--mis-text-faint); }

/* Progress */
.progress { background: var(--mis-surface-alt); border-radius: 20px; height: 7px; }
.progress-thin { height: 5px; }
.progress-lg { height: 11px; }
.progress-bar { border-radius: 20px; }
.progress-labeled { display: flex; align-items: center; gap: 10px; }
.progress-labeled .pl-label { font-size: 12px; color: var(--mis-text-muted); min-width: 96px; }
.progress-labeled .pl-val { font-size: 12.2px; font-weight: 700; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17. PLOT MAP / GRID
   -------------------------------------------------------------------------- */
.plot-map {
  background:
    linear-gradient(var(--mis-border) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--mis-border) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--mis-surface-alt);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.plot-map .pm-legend {
  position: absolute; top: 12px; right: 12px;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  box-shadow: var(--shadow-sm);
  z-index: 3;
}
.plot-map .pm-legend .lgl { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--mis-text-muted); }
.plot-map .pm-legend .lgl:last-child { margin-bottom: 0; }
.plot-map .pm-legend .lgl span.sw { width: 11px; height: 11px; border-radius: 3px; }

.plot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 9px;
}
.plot-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, z-index 0s;
  overflow: hidden;
}
.plot-tile .pt-sub { font-size: 9.5px; font-weight: 500; opacity: .8; }
.plot-tile:hover { transform: scale(1.07); box-shadow: var(--shadow-md); z-index: 4; }

.plot-tile.st-available   { background: var(--mis-green-050); color: var(--mis-green-600); border-color: rgba(21,127,61,.28); }
.plot-tile.st-allotted    { background: var(--mis-blue-050);  color: var(--mis-blue-700);  border-color: rgba(26,91,184,.28); }
.plot-tile.st-construction{ background: var(--mis-amber-050); color: var(--mis-amber-600); border-color: rgba(176,106,6,.28); }
.plot-tile.st-operational { background: var(--mis-navy-700);  color: #fff; }
[data-theme="dark"] .plot-tile.st-operational { background: #1d4e89; }
.plot-tile.st-reserved    { background: var(--mis-violet-050); color: var(--mis-violet-500); border-color: rgba(109,67,200,.28); }
.plot-tile.st-cancelled   { background: var(--mis-red-050);   color: var(--mis-red-600);   border-color: rgba(179,38,30,.28); }

/* --------------------------------------------------------------------------
   18. REPORT CARDS
   -------------------------------------------------------------------------- */
.report-card {
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  height: 100%;
  display: flex; flex-direction: column;
  transition: all .18s ease;
  position: relative;
  overflow: hidden;
}
.report-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kpi-accent, var(--mis-blue-600));
  opacity: 0; transition: opacity .18s ease;
}
.report-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--kpi-accent, var(--mis-blue-400)); }
.report-card:hover::before { opacity: 1; }
.report-card .rc-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; font-size: 20px;
  background: var(--kpi-soft, var(--mis-blue-050));
  color: var(--kpi-accent, var(--mis-blue-600));
  margin-bottom: 13px;
}
.report-card .rc-title { font-size: 14px; font-weight: 700; margin: 0 0 5px; }
.report-card .rc-desc { font-size: 12.3px; color: var(--mis-text-muted); line-height: 1.55; margin-bottom: 14px; flex: 1 1 auto; }
.report-card .rc-meta { font-size: 11px; color: var(--mis-text-faint); display: flex; gap: 12px; margin-bottom: 12px; }
.report-card .rc-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid var(--mis-border); }

/* --------------------------------------------------------------------------
   19. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mis-border);
  align-items: center;
}
.modal-header .modal-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.modal-header .modal-title i { color: var(--mis-blue-600); }
.modal-header .btn-close { font-size: 11px; opacity: .5; }
.modal-header .btn-close:hover { opacity: 1; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--mis-border); gap: 8px; background: var(--mis-surface-alt); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.modal-backdrop.show { opacity: .55; }

.modal-icon-head {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; font-size: 25px;
  margin: 0 auto 14px;
}

/* Confirm dialog */
#confirmDialog .modal-body { text-align: center; padding: 26px 22px 18px; }
#confirmDialog .cd-title { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; }
#confirmDialog .cd-text { font-size: 13.2px; color: var(--mis-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   20. TOASTS
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed; top: 80px; right: 20px;
  z-index: 1090;
  display: flex; flex-direction: column; gap: 10px;
  width: 350px; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast-mis {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-left: 4px solid var(--mis-blue-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 13px 14px;
  animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2);
}
.toast-mis.hiding { animation: toast-out .22s ease forwards; }
.toast-mis .tm-icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px;
}
.toast-mis .tm-title { font-size: 13.2px; font-weight: 700; margin: 0 0 2px; }
.toast-mis .tm-text { font-size: 12.3px; color: var(--mis-text-muted); margin: 0; line-height: 1.5; }
.toast-mis .tm-close {
  border: 0; background: transparent; color: var(--mis-text-faint);
  font-size: 13px; padding: 2px; margin-left: auto; border-radius: 4px;
}
.toast-mis .tm-close:hover { color: var(--mis-text); }
.toast-mis.success { border-left-color: var(--mis-green-600); }
.toast-mis.success .tm-icon { background: var(--mis-green-050); color: var(--mis-green-600); }
.toast-mis.warning { border-left-color: var(--mis-amber-500); }
.toast-mis.warning .tm-icon { background: var(--mis-amber-050); color: var(--mis-amber-600); }
.toast-mis.danger { border-left-color: var(--mis-red-500); }
.toast-mis.danger .tm-icon { background: var(--mis-red-050); color: var(--mis-red-600); }
.toast-mis.info .tm-icon { background: var(--mis-blue-050); color: var(--mis-blue-600); }

@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* --------------------------------------------------------------------------
   21. AUTH / LOGIN
   -------------------------------------------------------------------------- */
.auth-page { min-height: 100vh; display: flex; background: var(--mis-surface); }

.auth-visual {
  flex: 1 1 55%;
  position: relative;
  background:
    linear-gradient(150deg, rgba(7, 26, 51, .93) 0%, rgba(16, 47, 87, .88) 45%, rgba(26, 91, 184, .82) 100%),
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, .55), transparent 55%),
    linear-gradient(120deg, #071a33, #102f57 60%, #1a5bb8);
  color: #fff;
  display: flex; flex-direction: column;
  padding: 46px 52px;
  overflow: hidden;
}
/* Industrial skyline silhouette */
.auth-visual::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background:
    linear-gradient(to top, rgba(7,26,51,.85), transparent),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 34px, transparent 34px 46px,
      rgba(255,255,255,.03) 46px 70px, transparent 70px 96px);
  mask-image: linear-gradient(to top, #000 35%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
  pointer-events: none;
}
.auth-visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000, transparent 78%);
  pointer-events: none;
}
.auth-visual > * { position: relative; z-index: 2; }

.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand .ab-mark {
  width: 54px; height: 54px; border-radius: 15px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  font-size: 21px; font-weight: 800; letter-spacing: -.5px;
}
.auth-brand .ab-t1 { font-size: 19px; font-weight: 700; letter-spacing: .3px; line-height: 1.15; }
.auth-brand .ab-t2 { font-size: 11.5px; color: rgba(255, 255, 255, .7); letter-spacing: 1.1px; text-transform: uppercase; font-weight: 500; }

.auth-hero { margin: auto 0; max-width: 560px; padding: 40px 0; }
.auth-hero h2 {
  color: #fff; font-size: 34px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.9px; margin-bottom: 14px;
}
.auth-hero h2 .hl { color: #7fb2ff; }
.auth-hero p { color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.7; margin-bottom: 26px; max-width: 480px; }

.auth-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.auth-stats .as-item .as-val { font-size: 25px; font-weight: 700; letter-spacing: -.7px; line-height: 1.1; }
.auth-stats .as-item .as-lbl { font-size: 11.5px; color: rgba(255, 255, 255, .62); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }

.auth-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 30px; }
.auth-feature {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.auth-feature i { font-size: 17px; color: #7fb2ff; }
.auth-feature span { font-size: 12.6px; font-weight: 500; color: rgba(255, 255, 255, .9); }

.auth-security {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.8px; color: rgba(255, 255, 255, .62);
}
.auth-security i { color: #6ee7a8; font-size: 15px; }

/* Right — form panel */
.auth-form-panel {
  flex: 0 0 500px;
  max-width: 500px;
  display: flex; flex-direction: column;
  padding: 40px 52px;
  background: var(--mis-surface);
  overflow-y: auto;
}
.auth-form-wrap { margin: auto 0; width: 100%; max-width: 380px; margin-inline: auto; }

.auth-form-head { margin-bottom: 28px; }
.auth-form-head .afh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--mis-blue-700); background: var(--mis-blue-050);
  border: 1px solid rgba(26,91,184,.16);
  padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
}
.auth-form-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 6px; }
.auth-form-head p { font-size: 13.3px; color: var(--mis-text-muted); margin: 0; }

.auth-secure-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: var(--mis-green-050);
  border: 1px solid rgba(21, 127, 61, .16);
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}
.auth-secure-strip i { color: var(--mis-green-600); font-size: 16px; }
.auth-secure-strip span { font-size: 11.8px; color: var(--mis-green-600); font-weight: 600; }

.auth-input-group { position: relative; }
.auth-input-group .form-control { height: 46px; padding-left: 42px; font-size: 13.8px; }
.auth-input-group .input-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--mis-text-faint); font-size: 16px; pointer-events: none; z-index: 3;
}
.auth-input-group .toggle-pw {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--mis-text-faint);
  padding: 7px; border-radius: var(--radius-sm); font-size: 15px; z-index: 3;
}
.auth-input-group .toggle-pw:hover { color: var(--mis-blue-600); background: var(--mis-blue-050); }

.auth-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--mis-border); }
.auth-footer .af-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11.8px; }
.auth-footer .af-links a { color: var(--mis-text-faint); font-weight: 500; }
.auth-footer .af-links a:hover { color: var(--mis-blue-600); }
.auth-copyright { font-size: 11.3px; color: var(--mis-text-faint); margin-top: 12px; line-height: 1.6; }

.auth-mobile-brand { display: none; }

/* --------------------------------------------------------------------------
   22. MISC COMPONENTS
   -------------------------------------------------------------------------- */
/* Detail list */
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--mis-border); border: 1px solid var(--mis-border); border-radius: var(--radius); overflow: hidden; }
.detail-list .dl-item { background: var(--mis-surface); padding: 12px 15px; }
.detail-list .dl-label { font-size: 10.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; color: var(--mis-text-faint); margin-bottom: 3px; }
.detail-list .dl-value { font-size: 13.4px; font-weight: 600; color: var(--mis-text); word-break: break-word; }
.detail-list .dl-value.muted { font-weight: 500; color: var(--mis-text-muted); }

/* Definition rows (key/value stacked) */
.kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--mis-border); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .kv-k { color: var(--mis-text-muted); }
.kv-row .kv-v { font-weight: 600; text-align: right; }

/* Document list item */
.doc-item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--mis-border);
  border-radius: var(--radius);
  background: var(--mis-surface);
  transition: all .15s ease;
  margin-bottom: 10px;
}
.doc-item:hover { border-color: var(--mis-blue-400); box-shadow: var(--shadow-sm); }
.doc-item .di-icon {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 19px;
}
.doc-item .di-name { font-size: 13.2px; font-weight: 600; margin: 0; }
.doc-item .di-meta { font-size: 11.4px; color: var(--mis-text-faint); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.doc-item .di-actions { margin-left: auto; display: flex; gap: 5px; }

/* Upload dropzone */
.upload-zone {
  border: 2px dashed var(--mis-border-strong);
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  background: var(--mis-surface-alt);
  transition: all .18s ease;
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--mis-blue-500); background: var(--mis-blue-050); }
.upload-zone i { font-size: 34px; color: var(--mis-blue-500); display: block; margin-bottom: 10px; }
.upload-zone .uz-title { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.upload-zone .uz-sub { font-size: 11.8px; color: var(--mis-text-faint); }

/* Workflow steps */
.workflow-steps { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 6px 0 2px; }
.wf-step { flex: 1 1 0; min-width: 128px; text-align: center; position: relative; padding: 0 6px; }
.wf-step::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px;
  background: var(--mis-border); z-index: 0;
}
.wf-step:last-child::after { display: none; }
.wf-step .wf-dot {
  position: relative; z-index: 1;
  width: 34px; height: 34px; margin: 0 auto 9px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mis-surface);
  border: 2px solid var(--mis-border-strong);
  color: var(--mis-text-faint);
  font-size: 13px; font-weight: 700;
}
.wf-step .wf-label { font-size: 11.8px; font-weight: 600; color: var(--mis-text-muted); line-height: 1.35; }
.wf-step .wf-date { font-size: 10.5px; color: var(--mis-text-faint); margin-top: 2px; }
.wf-step.done .wf-dot { background: var(--mis-green-600); border-color: var(--mis-green-600); color: #fff; }
.wf-step.done::after { background: var(--mis-green-600); }
.wf-step.done .wf-label { color: var(--mis-text); }
.wf-step.current .wf-dot { background: var(--mis-blue-600); border-color: var(--mis-blue-600); color: #fff; box-shadow: 0 0 0 4px var(--mis-blue-050); }
.wf-step.current .wf-label { color: var(--mis-blue-700); font-weight: 700; }
.wf-step.rejected .wf-dot { background: var(--mis-red-500); border-color: var(--mis-red-500); color: #fff; }
.wf-step.rejected .wf-label { color: var(--mis-red-600); }

/* Alert */
.alert-mis {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--mis-border);
  background: var(--mis-surface);
  font-size: 13px;
  margin-bottom: 16px;
}
.alert-mis i { font-size: 17px; line-height: 1.3; }
.alert-mis .am-title { font-weight: 700; margin: 0 0 2px; font-size: 13.2px; }
.alert-mis .am-text { margin: 0; color: var(--mis-text-muted); font-size: 12.6px; }
.alert-mis.info { background: var(--mis-blue-050); border-color: rgba(26,91,184,.18); }
.alert-mis.info i, .alert-mis.info .am-title { color: var(--mis-blue-700); }
.alert-mis.warning { background: var(--mis-amber-050); border-color: rgba(176,106,6,.2); }
.alert-mis.warning i, .alert-mis.warning .am-title { color: var(--mis-amber-600); }
.alert-mis.danger { background: var(--mis-red-050); border-color: rgba(179,38,30,.2); }
.alert-mis.danger i, .alert-mis.danger .am-title { color: var(--mis-red-600); }
.alert-mis.success { background: var(--mis-green-050); border-color: rgba(21,127,61,.2); }
.alert-mis.success i, .alert-mis.success .am-title { color: var(--mis-green-600); }

/* Empty state */
.empty-state { text-align: center; padding: 52px 22px; }
.empty-state .es-icon {
  width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 33px;
  background: var(--mis-blue-050); color: var(--mis-blue-400);
}
.empty-state h5 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--mis-text-muted); max-width: 400px; margin: 0 auto 18px; }

/* Progress ring for gauges */
.gauge-wrap { text-align: center; }
.gauge-wrap .gw-value { font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.gauge-wrap .gw-label { font-size: 11.5px; color: var(--mis-text-muted); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--mis-surface-alt) 25%, var(--mis-border) 50%, var(--mis-surface-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }

/* Noticeboard */
.notice-item {
  display: flex; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--mis-border);
}
.notice-item:last-child { border-bottom: 0; }
.notice-item .ni-date {
  flex: 0 0 48px; text-align: center;
  background: var(--mis-blue-050); color: var(--mis-blue-700);
  border-radius: var(--radius-sm); padding: 6px 4px;
}
.notice-item .ni-date .d { font-size: 17px; font-weight: 700; line-height: 1; }
.notice-item .ni-date .m { font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .4px; }

/* --------------------------------------------------------------------------
   23. FOOTER
   -------------------------------------------------------------------------- */
.app-footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid var(--mis-border);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mis-text-faint);
  background: var(--mis-surface);
}
.app-footer .af-links { display: flex; gap: 16px; flex-wrap: wrap; }
.app-footer .af-links a { color: var(--mis-text-muted); font-weight: 500; }
.app-footer .af-links a:hover { color: var(--mis-blue-600); }
.app-footer .af-version {
  font-size: 11px; background: var(--mis-surface-alt);
  border: 1px solid var(--mis-border); padding: 2px 8px; border-radius: 20px;
}

/* --------------------------------------------------------------------------
   24. PAGE HEADER (inside content)
   -------------------------------------------------------------------------- */
.page-hero {
  background: linear-gradient(120deg, var(--mis-navy-800), var(--mis-navy-600) 60%, var(--mis-blue-700));
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -40px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.page-hero h2 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 5px; letter-spacing: -.3px; }
.page-hero p { color: rgba(255,255,255,.75); font-size: 13px; margin: 0; max-width: 620px; }
.page-hero .ph-actions { margin-top: 16px; display: flex; gap: 9px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   25. RESPONSIVE — see responsive.css for the full breakpoint system
   -------------------------------------------------------------------------- */