/* ==========================================================================
   IBM Carbon Design System (Carbon v11) for J&B Payroll
   Enterprise design tokens, typography, UI Shell, Data Tables, Forms & Actions
   ========================================================================== */

/* --- 1. IBM CARBON DESIGN TOKENS --- */
:root {
  /* Carbon Color Tokens (White / Gray 10 Theme) */
  --cds-interactive-01: #0f62fe;       /* Primary Interactive Blue */
  --cds-interactive-01-hover: #0043ce; /* Blue 70 */
  --cds-interactive-01-active: #002d9c;/* Blue 80 */
  --cds-interactive-02: #393939;       /* Secondary Gray Button */
  --cds-interactive-02-hover: #4c4c4c;
  --cds-interactive-02-active: #6f6f6f;
  
  --cds-danger-01: #da1e28;            /* Red 60 */
  --cds-danger-01-hover: #ba1b23;      /* Red 70 */
  --cds-danger-01-active: #750e13;     /* Red 80 */
  --cds-danger-02: #fff1f1;            /* Red 10 */

  --cds-support-01: #da1e28;           /* Error Red */
  --cds-support-02: #198038;           /* Success Green (Green 60) */
  --cds-support-02-bg: #defbe6;        /* Green 10 */
  --cds-support-03: #f1c21b;           /* Warning Yellow (Yellow 30) */
  --cds-support-03-bg: #fdf5e2;
  --cds-support-04: #0043ce;           /* Info Blue */
  --cds-support-04-bg: #edf5ff;        /* Blue 10 */

  /* Neutral Layers & Surfaces */
  --cds-ui-background: #f4f4f4;        /* Gray 10 base background */
  --cds-ui-01: #ffffff;                /* Layer 1 - Cards, Tables, Modals */
  --cds-ui-02: #ffffff;                /* Layer 2 */
  --cds-ui-03: #e0e0e0;                /* Gray 20 - Dividers, subtle borders */
  --cds-ui-04: #8d8d8d;                /* Gray 50 - Strong borders */
  --cds-ui-05: #161616;                /* Gray 100 - Carbon Header / Dark Shell */
  --cds-ui-header: #161616;            /* Carbon UI Shell Header */
  --cds-ui-sidebar: #ffffff;           /* Sidenav Background */

  /* Text Tokens */
  --cds-text-01: #161616;              /* Primary text */
  --cds-text-02: #525252;              /* Secondary text (Gray 70) */
  --cds-text-03: #8d8d8d;              /* Placeholder / Helper text (Gray 50) */
  --cds-text-04: #ffffff;              /* High contrast / inverse text */
  --cds-link-01: #0f62fe;

  /* Focus & Layer States */
  --cds-focus: #0f62fe;
  --cds-layer-hover: #e5e5e5;
  --cds-layer-selected: #edf5ff;
  --cds-layer-accent: #0f62fe;

  /* Typography */
  --cds-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cds-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

/* --- 2. BASE & GLOBAL RESET --- */
body, html {
  font-family: var(--cds-font-sans) !important;
  color: var(--cds-text-01);
  background-color: var(--cds-ui-background) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content-wrapper {
  background-color: var(--cds-ui-background) !important;
  padding: 1.5rem 1.5rem !important;
}

/* Tabular numbers for financial and code data */
.tabular-nums, .font-mono, td.amount-cell, th.amount-cell, .carbon-mono {
  font-family: var(--cds-font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- 3. CARBON UI SHELL (HEADER & NAVBAR) --- */
.navbar.default-layout-navbar {
  background: var(--cds-ui-header) !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-bottom: 1px solid #262626 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  z-index: 1030;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

.navbar.default-layout-navbar .navbar-brand-wrapper {
  background: var(--cds-ui-header) !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex: 0 0 260px !important;
  border-right: 1px solid #262626 !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: none !important;
}

.navbar.default-layout-navbar .navbar-brand-wrapper .navbar-brand {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.navbar.default-layout-navbar .navbar-brand.brand-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.navbar.default-layout-navbar .navbar-brand.brand-logo .navbar-logo-img {
  height: 32px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
}

.navbar.default-layout-navbar .navbar-brand.brand-logo-mini {
  display: none !important;
}

.navbar.default-layout-navbar .navbar-brand.brand-logo-mini .navbar-logo-mini-img {
  height: 32px !important;
  width: 32px !important;
  max-width: 32px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

.navbar.default-layout-navbar .navbar-menu-wrapper {
  background: var(--cds-ui-header) !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #ffffff;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: none !important;
}

/* Sidebar Toggle Buttons */
.navbar-toggler-desktop,
.navbar-toggler-mobile {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid #393939 !important;
  background-color: #222222 !important;
  color: #ffffff !important;
  font-size: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.navbar-toggler-desktop {
  display: inline-flex !important;
  background: transparent !important;
  border-color: transparent !important;
  color: #c6c6c6 !important;
}

.navbar-toggler-desktop:hover {
  background-color: #262626 !important;
  border-color: #393939 !important;
  color: #ffffff !important;
}

.navbar-toggler-mobile {
  display: none !important;
}

.navbar-toggler-mobile:hover,
.navbar-toggler-mobile:focus {
  background-color: #2c2c2c !important;
  border-color: #525252 !important;
  color: #ffffff !important;
  outline: none !important;
}

.nav-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #c6c6c6;
  transition: all 0.15s ease;
}

.nav-icon-btn:hover {
  background: #262626;
  color: #ffffff;
  border-color: #393939;
}

/* Carbon Header Company Selector */
.carbon-header-company-select {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.company-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 260px;
}

.company-select-wrapper .company-icon {
  position: absolute;
  left: 10px;
  color: #8d8d8d;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}

.carbon-header-company-select .header-company-select {
  background-color: #222222 !important;
  color: #f4f4f4 !important;
  border: 1px solid #3d3d3d !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 36px !important;
  padding: 0.25rem 2rem 0.25rem 2rem !important;
  max-width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d8d8d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 8px;
  transition: all 0.15s ease;
}

.carbon-header-company-select .header-company-select:hover {
  background-color: #2a2a2a !important;
  border-color: #525252 !important;
}

.carbon-header-company-select .header-company-select:focus {
  border-color: var(--cds-interactive-01, #0f62fe) !important;
  outline: 2px solid rgba(15, 98, 254, 0.4) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

.carbon-header-company-select .header-company-select option {
  background-color: #222222;
  color: #ffffff;
}

/* User Profile Header & Dropdown */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link,
.header-profile-link {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
}

.header-profile-link:after,
.header-profile-link.dropdown-toggle:after,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle:after,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link.dropdown-toggle:after {
  display: none !important;
  content: none !important;
}

.header-profile-link:hover,
.header-profile-link:focus,
.header-profile-link[aria-expanded="true"] {
  background-color: #262626 !important;
  border-color: #393939 !important;
}

.profile-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f62fe 0%, #0043ce 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.profile-user-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 140px;
  color: #f4f4f4;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu,
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.navbar-dropdown,
.profile-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 280px !important;
  overflow: hidden !important;
  z-index: 1050 !important;
}

.profile-dropdown-header {
  background-color: #f8fafc !important;
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.profile-avatar-circle-lg {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0f62fe 0%, #0043ce 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.profile-dropdown-menu .dropdown-item {
  font-size: 13.5px !important;
  color: #374151 !important;
  padding: 0.625rem 1rem !important;
  transition: all 0.12s ease !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

.profile-dropdown-menu .dropdown-item:hover,
.profile-dropdown-menu .dropdown-item:focus {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

/* Fixed Layout Sync */
.navbar.fixed-top + .page-body-wrapper {
  padding-top: 56px !important;
}

/* Sidebar in Carbon */
.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #eaecf0 !important;
  box-shadow: none !important;
  width: 260px !important;
  top: 56px !important;
  height: calc(100vh - 56px) !important;
}

@media (min-width: 992px) {
  .sidebar-fixed .sidebar > .nav {
    max-height: calc(100vh - 56px) !important;
  }
  .sidebar-fixed .main-panel {
    margin-left: 260px !important;
    min-height: calc(100vh - 56px) !important;
    transition: none !important;
  }
  .sidebar-fixed.sidebar-icon-only .main-panel {
    margin-left: 70px !important;
  }
  .sidebar-icon-only .navbar.default-layout-navbar .navbar-brand-wrapper {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    flex: 0 0 70px !important;
    padding: 0 0.5rem !important;
    justify-content: center !important;
    transition: none !important;
  }
  .sidebar-icon-only .navbar .navbar-brand.brand-logo {
    display: none !important;
  }
  .sidebar-icon-only .navbar .navbar-brand.brand-logo-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sidebar-icon-only .navbar .navbar-menu-wrapper {
    width: auto !important;
    flex: 1 1 auto !important;
    transition: none !important;
  }
  .sidebar-icon-only .sidebar {
    width: 70px !important;
    transition: none !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    height: 42px !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link .nav-icon {
    margin-right: 0 !important;
    font-size: 18px !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title,
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-arrow,
  .sidebar-icon-only .sidebar .nav.sub-menu {
    display: none !important;
  }
}

/* --- Mobile and Responsive Styles --- */
@media (max-width: 991px) {
  .navbar.default-layout-navbar .navbar-brand-wrapper {
    width: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid #262626 !important;
  }

  .navbar.default-layout-navbar .navbar-brand.brand-logo {
    display: none !important;
  }

  .navbar.default-layout-navbar .navbar-brand.brand-logo-mini {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .navbar.default-layout-navbar .navbar-brand.brand-logo-mini .navbar-logo-mini-img {
    height: 32px !important;
    width: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .navbar.default-layout-navbar .navbar-menu-wrapper {
    width: calc(100% - 56px) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .navbar-toggler-desktop {
    display: none !important;
  }

  .navbar-toggler-mobile {
    display: inline-flex !important;
  }

  .company-select-wrapper {
    max-width: 180px;
  }

  .carbon-header-company-select .header-company-select {
    max-width: 180px;
    font-size: 12px !important;
    height: 34px !important;
    padding: 0.2rem 1.75rem 0.2rem 1.85rem !important;
  }

  .company-select-wrapper .company-icon {
    left: 8px;
    font-size: 14px;
  }

  .sidebar-fixed .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .content-wrapper {
    padding: 1.25rem 1rem !important;
  }

  /* Offcanvas sidebar on tablet/mobile */
  .sidebar-offcanvas {
    position: fixed !important;
    top: 56px !important;
    bottom: 0 !important;
    left: -260px !important;
    right: auto !important;
    width: 260px !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    z-index: 1045 !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25) !important;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #ffffff !important;
  }

  .sidebar-offcanvas.active {
    left: 0 !important;
  }

  /* Backdrop Overlay */
  .sidebar-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    backdrop-filter: blur(2px);
    transition: opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 576px) {
  .navbar.default-layout-navbar .navbar-brand-wrapper {
    width: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
  }

  .navbar.default-layout-navbar .navbar-menu-wrapper {
    width: calc(100% - 52px) !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .company-select-wrapper {
    max-width: 150px;
  }

  .carbon-header-company-select .header-company-select {
    max-width: 150px;
    font-size: 11.5px !important;
    height: 32px !important;
    padding: 0.15rem 1.4rem 0.15rem 1.6rem !important;
  }

  .company-select-wrapper .company-icon {
    left: 6px;
    font-size: 13px;
  }

  .profile-avatar-circle {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .header-profile-link {
    padding: 2px !important;
  }

  .navbar-toggler-mobile {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

.sidebar > .nav {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 56px) !important;
  margin-bottom: 0;
  padding: 0.75rem 0.5rem 2rem 0.5rem !important;
  box-sizing: border-box !important;
}

.sidebar .nav .nav-item {
  border-radius: 6px !important;
  margin-bottom: 2px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.sidebar .nav .nav-item.nav-logout {
  margin-top: auto !important;
  border-top: 1px solid #eaecf0 !important;
  padding-top: 0.5rem !important;
}

.sidebar .nav .nav-item.nav-logout .nav-link {
  color: #da1e28 !important;
}

.sidebar .nav .nav-item.nav-logout .nav-link .nav-icon {
  color: #da1e28 !important;
}

.sidebar .nav .nav-item.nav-logout .nav-link:hover {
  background-color: #fff1f1 !important;
  color: #ba1b23 !important;
}

.sidebar .nav .nav-item.nav-logout .nav-link:hover .nav-icon {
  color: #ba1b23 !important;
}

.sidebar .nav .nav-item .nav-link {
  height: 40px !important;
  padding: 0 0.75rem !important;
  color: #374151 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-left: none !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.sidebar .nav .nav-item .nav-link .nav-icon {
  font-size: 15px !important;
  width: 20px !important;
  min-width: 20px !important;
  text-align: center !important;
  margin-right: 0.625rem !important;
  color: #6b7280 !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0;
}

.sidebar .nav .nav-item .nav-link .menu-title {
  color: inherit !important;
  font-size: 13.5px !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  flex-grow: 1;
}

.sidebar .nav .nav-item .nav-link:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.sidebar .nav .nav-item .nav-link:hover .nav-icon {
  color: #111827 !important;
}

/* Active Standalone Parent (without sub-menu) */
.sidebar .nav .nav-item.active > .nav-link:not([data-bs-toggle="collapse"]) {
  background-color: #eff6ff !important;
  color: #0f62fe !important;
  font-weight: 600 !important;
}

.sidebar .nav .nav-item.active > .nav-link:not([data-bs-toggle="collapse"]) .nav-icon {
  color: #0f62fe !important;
}

/* Active Parent (expanded with active children) */
.sidebar .nav .nav-item.active > .nav-link[data-bs-toggle="collapse"] {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
  font-weight: 600 !important;
}

.sidebar .nav .nav-item.active > .nav-link[data-bs-toggle="collapse"] .nav-icon {
  color: #0f62fe !important;
}

/* Menu Arrow Chevron */
.sidebar .nav .nav-item .nav-link i.menu-arrow {
  margin-left: auto !important;
  font-size: 16px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0 !important;
  color: #9ca3af !important;
  transition: transform 0.2s ease, color 0.15s ease !important;
}

.sidebar .nav .nav-item .nav-link i.menu-arrow:before {
  content: "\f0142" !important; /* mdi-chevron-right */
  font-family: "Material Design Icons" !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* Collapsed state (default): points right */
.sidebar .nav .nav-item .nav-link.collapsed i.menu-arrow,
.sidebar .nav .nav-item .nav-link[aria-expanded="false"] i.menu-arrow {
  transform: rotate(0deg) !important;
}

/* Expanded state: rotates 90deg clockwise to point straight down */
.sidebar .nav .nav-item .nav-link:not(.collapsed)[aria-expanded="true"] i.menu-arrow,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow {
  transform: rotate(90deg) !important;
  color: #4b5563 !important;
}

/* Submenu container */
.sidebar .nav.sub-menu {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.125rem 0 0.25rem 0 !important;
  margin: 0 !important;
  border-left: none !important;
  border: none !important;
  list-style: none !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  flex: none !important;
}

.sidebar .nav.sub-menu .nav-item {
  margin-bottom: 1px !important;
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 0.75rem 0 2.25rem !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #4b5563 !important;
  border-left: none !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.12s ease !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:before {
  display: none !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
  background-color: #eff6ff !important;
  color: #0f62fe !important;
  font-weight: 600 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active .sub-menu-title {
  color: #0f62fe !important;
}

/* --- 5. CARDS & TILES --- */
.card {
  background-color: var(--cds-ui-01) !important;
  border: 1px solid var(--cds-ui-03) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  margin-bottom: 1.5rem;
}

.card .card-body {
  padding: 1.5rem !important;
}

.card-title {
  color: var(--cds-text-01) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.card-description {
  color: var(--cds-text-02) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1rem;
}

/* Carbon KPI Metric Tile */
.carbon-metric-tile {
  background: var(--cds-ui-01);
  border: 1px solid var(--cds-ui-03);
  border-left: 4px solid var(--cds-interactive-01);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carbon-metric-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.carbon-metric-tile.tile-success {
  border-left-color: var(--cds-support-02);
}

.carbon-metric-tile.tile-info {
  border-left-color: #1192e8;
}

.carbon-metric-tile.tile-purple {
  border-left-color: #8a3ffc;
}

.carbon-metric-title {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cds-text-02);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carbon-metric-value {
  font-family: var(--cds-font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--cds-text-01);
  margin: 0.75rem 0 0.5rem;
  letter-spacing: -0.02em;
}

.carbon-metric-subtitle {
  font-size: 0.8125rem;
  color: var(--cds-text-02);
}

/* --- 6. BUTTONS (CARBON BUTTON HIERARCHY) --- */
.btn {
  font-family: var(--cds-font-sans);
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 2px !important;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.1px;
}

.btn:focus, .btn:focus-visible {
  outline: 2px solid var(--cds-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Primary Button: Carbon Blue 60 */
.btn-primary, .btn-info {
  background-color: var(--cds-interactive-01) !important;
  border-color: var(--cds-interactive-01) !important;
  color: #ffffff !important;
}

.btn-primary:hover, .btn-info:hover {
  background-color: var(--cds-interactive-01-hover) !important;
  border-color: var(--cds-interactive-01-hover) !important;
  color: #ffffff !important;
}

.btn-primary:active, .btn-info:active {
  background-color: var(--cds-interactive-01-active) !important;
  border-color: var(--cds-interactive-01-active) !important;
}

/* Secondary Button: Carbon Gray 80 */
.btn-secondary {
  background-color: var(--cds-interactive-02) !important;
  border-color: var(--cds-interactive-02) !important;
  color: #ffffff !important;
}

.btn-secondary:hover {
  background-color: var(--cds-interactive-02-hover) !important;
  border-color: var(--cds-interactive-02-hover) !important;
}

.btn-secondary:active {
  background-color: var(--cds-interactive-02-active) !important;
}

/* Danger Button: Carbon Red 60 */
.btn-danger {
  background-color: var(--cds-danger-01) !important;
  border-color: var(--cds-danger-01) !important;
  color: #ffffff !important;
}

.btn-danger:hover {
  background-color: var(--cds-danger-01-hover) !important;
  border-color: var(--cds-danger-01-hover) !important;
}

.btn-danger:active {
  background-color: var(--cds-danger-01-active) !important;
}

/* Success Button */
.btn-success {
  background-color: var(--cds-support-02) !important;
  border-color: var(--cds-support-02) !important;
  color: #ffffff !important;
}

.btn-success:hover {
  background-color: #0e6027 !important;
  border-color: #0e6027 !important;
}

/* Tertiary / Outline Buttons */
.btn-outline-primary, .btn-outline-info {
  background-color: transparent !important;
  border-color: var(--cds-interactive-01) !important;
  color: var(--cds-interactive-01) !important;
}

.btn-outline-primary:hover, .btn-outline-info:hover {
  background-color: var(--cds-interactive-01) !important;
  color: #ffffff !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border-color: var(--cds-danger-01) !important;
  color: var(--cds-danger-01) !important;
}

.btn-outline-danger:hover {
  background-color: var(--cds-danger-01) !important;
  color: #ffffff !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--cds-ui-04) !important;
  color: var(--cds-text-01) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--cds-layer-hover) !important;
  border-color: var(--cds-text-01) !important;
}

/* Small Button (32px) */
.btn-sm {
  height: 32px !important;
  padding: 0 0.75rem !important;
  font-size: 13px !important;
}

/* --- 7. FORM CONTROLS & INPUTS --- */
.form-label, label.col-form-label, .form-group label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cds-text-02) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.1px;
}

.form-control, .form-select {
  height: 40px;
  background-color: #ffffff !important;
  border: 1px solid var(--cds-ui-04) !important;
  border-radius: 2px !important;
  color: var(--cds-text-01) !important;
  font-size: 14px;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.12s ease, outline 0.12s ease;
}

.form-control-sm, .form-select-sm {
  height: 32px !important;
  font-size: 13px !important;
  padding: 0.25rem 0.5rem !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--cds-interactive-01) !important;
  outline: 2px solid var(--cds-focus) !important;
  outline-offset: -1px;
  box-shadow: none !important;
}

.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--cds-danger-01) !important;
  outline: 2px solid var(--cds-danger-01) !important;
  outline-offset: -1px;
}

.form-check-input {
  width: 18px;
  height: 18px;
  border: 1px solid var(--cds-ui-04) !important;
  border-radius: 2px !important;
  margin-top: 0.15rem;
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--cds-interactive-01) !important;
  border-color: var(--cds-interactive-01) !important;
}

.form-check-input:focus {
  box-shadow: none !important;
  outline: 2px solid var(--cds-focus) !important;
  outline-offset: 2px;
}

/* Choices.js & Select2 Carbon Integration */
.choices__inner, .select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 1px solid var(--cds-ui-04) !important;
  border-radius: 2px !important;
  height: 40px !important;
  min-height: 40px !important;
}

.choices__input {
  background-color: transparent !important;
  font-size: 14px !important;
}

/* --- 8. DATA TABLES (CARBON DATA TABLE SPEC) --- */
.table-responsive {
  border: 1px solid var(--cds-ui-03);
  background: var(--cds-ui-01);
  border-radius: 2px;
}

.table {
  color: var(--cds-text-01) !important;
  margin-bottom: 0 !important;
  border-collapse: collapse;
}

.table thead th {
  background-color: #f4f4f4 !important;
  color: var(--cds-text-01) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--cds-ui-03) !important;
  border-top: none !important;
  vertical-align: middle;
}

.table tbody td {
  padding: 10px 12px !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--cds-ui-03) !important;
  border-top: none !important;
  font-size: 13.5px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #fafafa !important;
}

.table tbody tr:hover {
  background-color: var(--cds-layer-selected) !important;
}

/* Table Input Cells (Data Editing Grids) */
td.inputTd {
  padding: 0 !important;
  vertical-align: middle;
}

td.inputTd input {
  width: 100%;
  height: 38px;
  border: none;
  background: transparent;
  padding: 0 8px;
  font-family: var(--cds-font-mono) !important;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cds-text-01);
  transition: background-color 0.1s ease, outline 0.1s ease;
}

td.inputTd input:focus {
  background-color: #ffffff;
  outline: 2px solid var(--cds-interactive-01) !important;
  outline-offset: -2px;
}

/* Carbon Freeze Header for Wide Tables */
div.freeze-header {
  position: relative;
  max-height: 720px;
  overflow: auto;
  border: 1px solid var(--cds-ui-03);
}

div.freeze-header > table > thead > tr > th {
  position: sticky;
  top: 0;
  background-color: #f4f4f4 !important;
  z-index: 10;
  box-shadow: 0 1px 0 var(--cds-ui-03);
}

div.freeze-header > table > thead > tr:nth-child(2) th {
  position: sticky;
  top: 38px;
  background-color: #e8e8e8 !important;
  z-index: 9;
}

/* Table Footer / Summary Row */
.table tfoot td {
  background-color: #f4f4f4 !important;
  font-weight: 600;
  font-family: var(--cds-font-mono);
  font-size: 13.5px;
  border-top: 2px solid var(--cds-ui-03) !important;
  padding: 10px 12px !important;
  text-align: right;
}

/* --- 9. CARBON ACTION BAR (UNIFIED WORKFLOW ACTIONS) --- */
.carbon-action-bar {
  background: #ffffff;
  border: 1px solid var(--cds-ui-03);
  border-top: 2px solid var(--cds-interactive-01);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.carbon-action-bar .action-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- 10. CARBON TAGS & BADGES --- */
.badge, .carbon-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 2px !important;
  letter-spacing: 0.1px;
}

.bg-success, .badge-success {
  background-color: var(--cds-support-02-bg) !important;
  color: #0e6027 !important;
  border: 1px solid #a7f0ba;
}

.bg-danger, .badge-danger {
  background-color: var(--cds-danger-02) !important;
  color: #ba1b23 !important;
  border: 1px solid #ffd7d9;
}

.bg-warning, .badge-warning {
  background-color: var(--cds-support-03-bg) !important;
  color: #8a6d00 !important;
  border: 1px solid #f9e19d;
}

.bg-info, .bg-primary, .badge-info, .badge-primary {
  background-color: var(--cds-support-04-bg) !important;
  color: #0043ce !important;
  border: 1px solid #d0e2ff;
}

.bg-secondary, .badge-secondary {
  background-color: #e0e0e0 !important;
  color: #393939 !important;
  border: 1px solid #c6c6c6;
}

/* --- 11. CARBON MODALS --- */
.modal-content {
  background-color: #ffffff !important;
  border: 1px solid var(--cds-ui-03) !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

.modal-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--cds-ui-03) !important;
  padding: 1rem 1.5rem !important;
}

.modal-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--cds-text-01) !important;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  background-color: #f4f4f4 !important;
  border-top: 1px solid var(--cds-ui-03) !important;
  padding: 0.75rem 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* --- 12. CARBON INLINE NOTIFICATIONS & ALERTS --- */
.alert {
  border-radius: 2px !important;
  border: 1px solid transparent;
  border-left: 4px solid;
  padding: 0.875rem 1rem !important;
  font-size: 14px;
  position: relative;
  margin-bottom: 1.25rem;
}

.alert-success {
  background-color: var(--cds-support-02-bg) !important;
  border-color: #a7f0ba !important;
  border-left-color: var(--cds-support-02) !important;
  color: #0e6027 !important;
}

.alert-danger {
  background-color: var(--cds-danger-02) !important;
  border-color: #ffd7d9 !important;
  border-left-color: var(--cds-danger-01) !important;
  color: #ba1b23 !important;
}

.alert-warning {
  background-color: var(--cds-support-03-bg) !important;
  border-color: #f9e19d !important;
  border-left-color: var(--cds-support-03) !important;
  color: #8a6d00 !important;
}

.alert-info {
  background-color: var(--cds-support-04-bg) !important;
  border-color: #d0e2ff !important;
  border-left-color: var(--cds-support-04) !important;
  color: #0043ce !important;
}

.alert .btn-close, .alert .close {
  padding: 0.875rem;
  background-size: 10px;
}

/* --- 13. FOOTER --- */
.footer {
  background: var(--cds-ui-background) !important;
  border-top: 1px solid var(--cds-ui-03) !important;
  padding: 1rem 1.5rem !important;
  color: var(--cds-text-02) !important;
  font-size: 13px !important;
}

.footer a {
  color: var(--cds-interactive-01);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* --- 14. CARBON CONTENT TABS --- */
.carbon-tabs, .nav-pills {
  display: flex;
  border-bottom: 1px solid var(--cds-ui-03) !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  gap: 0 !important;
  overflow-x: auto;
}

.carbon-tabs .nav-link, .nav-pills .nav-link {
  border-radius: 0 !important;
  color: var(--cds-text-02) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}

.carbon-tabs .nav-link:hover, .nav-pills .nav-link:hover {
  color: var(--cds-text-01) !important;
  background-color: var(--cds-layer-hover) !important;
}

.carbon-tabs .nav-link.active, .nav-pills .nav-link.active {
  color: var(--cds-interactive-01) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--cds-interactive-01) !important;
  background: transparent !important;
}