/* ==========================================================================
   AdminTheme - Common Stylesheet
   All custom styling for the admin panel lives in this single file.
   Built on top of Bootstrap 5. Visual language follows the VeriPark-style
   CRM reference: dark navy top bar + horizontal top menu, light icon
   sidebar, colored icon tiles and colored-dot indicator lists.
   ========================================================================== */

:root {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 60px;

  /* Brand colours from the Chemi Enterprises logo: purple #34225C, green #00943F. */
  --primary: #34225c;
  --primary-dark: #261848;
  --primary-light: #f0ecf7;
  --primary-rgb: 52, 34, 92;
  --brand-green: #00943f;
  /* Buttons and tabs: dark green (a deeper shade of the logo green). */
  --accent: #00692d;
  --accent-dark: #005524;
  --accent-rgb: 0, 105, 45;

  --navy: #261848;
  --navy-light: #34225c;
  --accent-red: #e2231a;

  --sidebar-bg: #ffffff;
  --sidebar-border: #eef0f6;
  --sidebar-icon: #45507a;
  --sidebar-label: #7d84a0;
  --sidebar-active-bg: #f0ecf7;

  --body-bg: #f4f6fb;
  --card-border: #eaedf5;

  --success: #00943f;
  --danger: #f04248;
  --warning: #ffab00;
  --info: #17a2e8;

  --radius: 12px;
  --shadow-sm: 0 2px 8px rgba(20, 25, 50, 0.06);
  --shadow-md: 0 6px 24px rgba(20, 25, 50, 0.08);

  /* Bootstrap's own primary / success (bg-primary, text-primary, badges, links, checkboxes) in the brand colours. */
  --bs-primary: #34225c;
  --bs-primary-rgb: 52, 34, 92;
  --bs-primary-text-emphasis: #261848;
  --bs-primary-bg-subtle: #f0ecf7;
  --bs-primary-border-subtle: #c9bde0;
  --bs-success: #00943f;
  --bs-success-rgb: 0, 148, 63;
  --bs-success-text-emphasis: #00692d;
  --bs-success-bg-subtle: #e2f4e9;
  --bs-success-border-subtle: #a6dbbb;
  --bs-link-color: #34225c;
  --bs-link-color-rgb: 52, 34, 92;
  --bs-link-hover-color: #261848;
  --bs-link-hover-color-rgb: 38, 24, 72;
}

.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15); }
.btn-success { --bs-btn-bg: var(--brand-green); --bs-btn-border-color: var(--brand-green); --bs-btn-hover-bg: #00792f; --bs-btn-hover-border-color: #00792f; --bs-btn-active-bg: #00692d; --bs-btn-active-border-color: #00692d; }
.btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); }
.page-link { color: var(--primary); }
.active > .page-link, .page-link.active { background-color: var(--primary); border-color: var(--primary); }

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* Root size for every rem-based value (Bootstrap inputs, buttons, headings,
   spacing): 14px instead of the browser's 16px for a denser admin UI. */
html {
  font-size: 14px;
}

body {
  background-color: var(--body-bg);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: #333a4d;
}

a {
  text-decoration: none;
}

/* ==========================================================================
   Auth screens (Login / Forgot Password)
   ========================================================================== */

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.auth-visual {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.auth-visual::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  top: -120px;
  right: -120px;
}

.auth-visual::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(226, 35, 26, 0.15);
  bottom: -100px;
  left: -80px;
}

.auth-visual h2 {
  font-weight: 700;
  margin-bottom: 14px;
}

.auth-visual p {
  opacity: 0.85;
  max-width: 380px;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fff;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card .brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
}

.auth-card .brand-logo .bi {
  font-size: 23.5px;
  color: var(--accent-red);
}

.auth-card h3 {
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-card .subtitle {
  color: #8a90a2;
  margin-bottom: 28px;
}

/* Compact, square-cornered inputs and dropdowns across the app. */
.form-control, .form-select, .input-group-text {
  border-radius: 0;
  padding: 4px 10px;
  font-size: 0.875rem;
  border-color: #e3e6f0;
}

.input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text {
  border-radius: 0 !important;
}

/* Keep room for the dropdown arrow (the shorthand above would otherwise
   override Bootstrap's padding-right and let long text run under it). */
.form-select {
  padding-right: 2.25rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}

/* Select2 — match the plain .form-control/.form-select box size */
.select2-container--bootstrap-5 .select2-selection {
  min-height: calc(1.5em + 8px + 2px);
  padding: 4px 10px;
  font-size: 0.875rem;
  border-radius: 0;
  border-color: #e3e6f0;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding: 0;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + 8px);
  right: 10px;
}

.select2-container--bootstrap-5 .select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
  border-radius: 0;
  font-size: 0.875rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
  gap: 4px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}

.input-icon-group {
  position: relative;
}

.input-icon-group .bi {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0a6bb;
}

.input-icon-group .form-control {
  padding-left: 40px;
}

/* Login OTP: one box per digit */
.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.otp-boxes .otp-box {
  width: 46px;
  height: 48px;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.otp-boxes .otp-box.filled {
  border-color: var(--primary);
  background-color: var(--primary-light);
}

.otp-resend {
  margin-top: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: #7d84a0;
}

.otp-resend a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: #00461e;
  --bs-btn-active-border-color: #00461e;
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb);
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Tabs: the active tab in dark green. */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-tabs .nav-link:hover { color: var(--accent-dark); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--accent); }
.nav-pills .nav-link:not(.active) { color: var(--accent); }

.btn-primary.btn-block-lg {
  padding: 11px;
  border-radius: 8px;
  font-weight: 600;
}

/* ==========================================================================
   App Shell: Topbar + Sidebar + Main content
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1030;
  box-shadow: var(--shadow-sm);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-launcher-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.app-launcher-btn:hover,
.app-launcher-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* App launcher panel (moved to <body> by layout.js): every top-level menu as a tile. */
.app-launcher-panel {
  /* Same footprint as the expanded left sidebar, laid over it. */
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  max-width: 100vw;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 8px 0 24px rgba(20, 25, 50, 0.12);
  padding: 16px 12px 14px;
  z-index: 1060;
}

.app-launcher-panel[hidden] {
  display: none;
}

.app-launcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.app-launcher-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
}

.app-launcher-all {
  border: none;
  background: transparent;
  color: var(--sidebar-icon);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}

.app-launcher-all:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.app-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  color: #2b2f45;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.app-launcher-tile:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.app-launcher-tile.active {
  background: var(--primary-light);
  border-color: rgba(var(--primary-rgb), 0.25);
  color: var(--primary);
  font-weight: 600;
}

.app-launcher-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: var(--primary);
}

.app-launcher-icon .bi,
.app-launcher-icon .ti {
  color: #fff;
  font-size: 18px;
  width: auto;
}

.app-launcher-tile:nth-child(6n + 2) .app-launcher-icon { background: var(--accent); }
.app-launcher-tile:nth-child(6n + 3) .app-launcher-icon { background: #1f7ae0; }
.app-launcher-tile:nth-child(6n + 4) .app-launcher-icon { background: #e8833a; }
.app-launcher-tile:nth-child(6n + 5) .app-launcher-icon { background: #0d9aa8; }
.app-launcher-tile:nth-child(6n + 6) .app-launcher-icon { background: #c2368b; }

.app-launcher-label {
  font-size: 12.5px;
  line-height: 1.3;
}

/* Sidebar scoped to one module (chosen in the app launcher). */
.sidebar-nav > .nav-item.module-hidden {
  display: none;
}

.sidebar-module-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 14px;
}

.sidebar-module-clear {
  border: none;
  background: transparent;
  color: var(--sidebar-label);
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
}

.sidebar-module-clear:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.sidebar-module-clear[hidden] {
  display: none;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-brand .bi {
  color: var(--accent-red);
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-toggle-btn {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15.5px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---- Top horizontal menu (sits where the search box used to be) ---- */

.top-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 6px;
  padding: 0 0 0 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  /* This bar now renders every top-level module the user has access to
     (previously capped at 2 groups), so it routinely overflows the
     available width — scroll it horizontally within its own lane instead
     of letting it push the right-side icons off-screen or wrap. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.top-menu::-webkit-scrollbar {
  height: 4px;
}

.top-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

.top-menu > li {
  position: relative;
  flex-shrink: 0;
}

.top-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
}

.top-menu-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.top-menu-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.top-menu-link.dropdown-toggle::after {
  margin-left: 2px;
  vertical-align: 1px;
}

/* Moved to <body> by layout.js (initTopMenuDropdowns) so it can escape
   .top-menu's overflow clipping — no longer a descendant of .top-menu, so
   this can't be scoped as ".top-menu .dropdown-menu" any more. */
.top-menu-flyout.dropdown-menu {
  position: fixed !important;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  margin: 0;
  z-index: 1045;
  /* Fixed to the screen, so a long menu (e.g. ATS Management) scrolls inside itself rather than running off-screen. */
  max-height: calc(100vh - var(--topbar-height, 60px) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.top-menu-flyout .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
}

.top-menu-flyout .dropdown-item:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.fy-select {
  height: 30px;
  margin-right: 10px;
  padding: 0 26px 0 12px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
}

.fy-select:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.fy-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.14);
}

.fy-select option {
  color: #1a1a2e;
}

.topbar-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.85);
}

.topbar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.topbar-icon-btn .dot {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  border: 2px solid var(--navy);
}

.topbar-icon-btn .badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid var(--navy);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  border-radius: 30px;
  cursor: pointer;
  margin-left: 6px;
}

.topbar-user:hover {
  background: rgba(255, 255, 255, 0.1);
}

.topbar-user img, .topbar-user .avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11.5px;
  flex-shrink: 0;
}

.topbar-user .user-meta {
  line-height: 1.2;
}

.topbar-user .user-meta .name {
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}

.topbar-user .user-meta .role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.topbar-user .bi-chevron-down {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ---- Sidebar (light, icon-first) ---- */

.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1020;
  transition: width 0.25s ease, transform 0.25s ease;
  padding-bottom: 30px;
}

.sidebar::-webkit-scrollbar {
  width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(20, 25, 50, 0.12);
  border-radius: 6px;
}

.sidebar-section-label {
  color: var(--sidebar-label);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: 700;
  padding: 18px 22px 8px;
  white-space: nowrap;
}

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

.sidebar-nav .nav-item {
  margin-bottom: 3px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--sidebar-icon);
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
}

.sidebar-nav .nav-link .bi {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--sidebar-icon);
}

.sidebar-nav .nav-link:hover {
  background: var(--sidebar-active-bg);
  color: var(--primary);
}

.sidebar-nav .nav-link:hover .bi {
  color: var(--primary);
}

.sidebar-nav .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--primary);
  font-weight: 700;
}

.sidebar-nav .nav-link.active .bi {
  color: var(--primary);
}

.sidebar-nav .nav-link .chevron {
  margin-left: auto;
  font-size: 11.5px;
  transition: transform 0.2s ease;
}

.sidebar-nav .nav-item.open > .nav-link .chevron {
  transform: rotate(90deg);
}

.sidebar-nav .submenu {
  list-style: none;
  padding-left: 40px;
  margin: 2px 0 6px;
  display: none;
}

.sidebar-nav .nav-item.open > .submenu {
  display: block;
}

.sidebar-nav .submenu .nav-link {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 400;
}

.sidebar-nav .submenu .nav-link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  margin-right: 4px;
}

/* Collapsed (minimized) state - default */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .sidebar-nav .nav-link span,
body.sidebar-collapsed .sidebar-nav .nav-link .chevron {
  display: none;
}

body.sidebar-collapsed .sidebar-nav .submenu {
  display: none !important;
}

body.sidebar-collapsed .sidebar-nav .nav-link {
  justify-content: center;
  padding: 11px 4px;
}

body.sidebar-collapsed .sidebar-nav .nav-link .bi {
  font-size: 17px;
}

body.sidebar-collapsed .sidebar-nav .nav-link.active {
  position: relative;
}

body.sidebar-collapsed .sidebar-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

body.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

/* Hover-expand flyout when collapsed (desktop only). The submenu can't
   just be shown in place with CSS :hover — .sidebar clips overflow-x to
   stay scrollable vertically, and that clips ANY descendant that visually
   extends past the sidebar's own width, position:fixed or not. So this is
   opened via plain JS in layout.js (initSidebarFlyouts), which detaches
   the .submenu from the sidebar and appends it to <body> while open,
   positioned next to the hovered icon, then re-attaches it back to its
   original place when closed (so the normal expanded-sidebar accordion
   behaviour above — .nav-item.open > .submenu — still works unchanged). */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar-nav .nav-item {
    position: relative;
  }

  body.sidebar-collapsed .sidebar-nav .nav-item.flyout-open > .nav-link {
    background: var(--sidebar-active-bg);
    color: var(--primary);
  }

  body.sidebar-collapsed .sidebar-nav .nav-item.flyout-open > .nav-link .bi {
    color: var(--primary);
  }

  .sidebar-nav .submenu.sidebar-flyout {
    display: block;
    position: fixed;
    width: 200px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 0;
    margin: 0;
    box-shadow: var(--shadow-md);
    z-index: 1045;
  }

  .sidebar-nav .submenu.sidebar-flyout .nav-link span {
    display: inline;
  }
}

/* Expanded state */
.main-content {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  transition: margin-left 0.25s ease;
}

.page-content {
  padding: 11px 24px;
}

/* ==========================================================================
   Mobile sidebar (off-canvas)
   ========================================================================== */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 30, 0.5);
  z-index: 1015;
}

@media (max-width: 991.98px) {
  .sidebar {
    top: 0;
    width: 270px;
    transform: translateX(-100%);
    padding-top: var(--topbar-height);
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-mobile-open .sidebar-backdrop {
    display: block;
  }

  body.sidebar-collapsed .sidebar,
  body:not(.sidebar-collapsed) .sidebar {
    width: 270px;
  }

  body.sidebar-collapsed .sidebar-section-label,
  body.sidebar-collapsed .sidebar-nav .nav-link span,
  body.sidebar-collapsed .sidebar-nav .nav-link .chevron {
    display: block;
  }

  body.sidebar-collapsed .sidebar-nav .nav-link {
    justify-content: flex-start;
    padding: 11px 14px;
  }

  .main-content, body.sidebar-collapsed .main-content {
    margin-left: 0;
  }

  .top-menu {
    display: none;
  }
}

/* ==========================================================================
   Page header / breadcrumb
   ========================================================================== */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.page-header h1 {
  font-size: 19px;
  font-weight: 700;
  color: #1f2437;
  margin: 0;
}

.breadcrumb-nav {
  font-size: 11.5px;
  color: #9198ab;
  margin-bottom: 5px;
}

.breadcrumb-nav a {
  color: #9198ab;
}

.breadcrumb-nav .active {
  color: var(--primary);
  font-weight: 600;
}

/* ==========================================================================
   Cards / Stat widgets
   ========================================================================== */

.card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--card-border);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #545a70;
  padding: 16px 20px;
}

.card-body {
  padding: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21.5px;
  flex-shrink: 0;
}

.stat-icon.bg-primary-soft { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }
.stat-icon.bg-success-soft { background: rgba(0, 148, 63, 0.12); color: var(--success); }
.stat-icon.bg-warning-soft { background: rgba(255, 171, 0, 0.14); color: var(--warning); }
.stat-icon.bg-danger-soft  { background: rgba(240, 66, 72, 0.12); color: var(--danger); }

.stat-value {
  font-size: 21.5px;
  font-weight: 700;
  color: #1f2437;
  margin: 0;
}

.stat-label {
  color: #9198ab;
  font-size: 11.5px;
  margin: 0;
}

.stat-trend {
  font-size: 11.5px;
  font-weight: 600;
}

.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* ---- Icon tile quick-access grid (CRM style) ---- */

.icon-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 82px;
  text-align: center;
  color: #545a70;
  position: relative;
}

.icon-tile .icon-tile-box {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
  position: relative;
}

.icon-tile .icon-tile-box .tile-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
}

.icon-tile .icon-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #7d84a0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.icon-tile:hover .icon-tile-label {
  color: var(--primary);
}

/* ---- Colored indicator list (CRM style) ---- */

.indicator-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.indicator-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: #545a70;
}

.indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.indicator-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}

/* ---- Circle tile grid (CHANNELS style: icon + big number + label) ---- */

.circle-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.circle-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  text-align: center;
}

.circle-tile .circle-tile-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15.5px;
}

.circle-tile .circle-tile-value {
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2437;
  margin-top: 2px;
}

.circle-tile .circle-tile-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #9198ab;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---- Mini action card (NEXT BEST ACTION style) ---- */

.mini-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--danger);
  flex-shrink: 0;
  font-size: 13.5px;
}

.mini-action-text {
  flex: 1;
  font-size: 12px;
  color: #3d4257;
}

.mini-action-controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mini-action-controls .btn-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
}

.mini-action-controls .btn-icon-circle.accept {
  background: rgba(0, 148, 63, 0.12);
  color: var(--success);
}

.mini-action-controls .btn-icon-circle.dismiss {
  background: rgba(240, 66, 72, 0.12);
  color: var(--danger);
}

/* ---- Big number + breakdown card (CUSTOMER PRODUCTS style) ---- */

.big-number-row {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.big-number-box {
  width: 108px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.big-number-box .value {
  font-size: 27px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.big-number-box .label {
  font-size: 11px;
  color: #9198ab;
  margin-top: 4px;
}

.breakdown-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breakdown-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 12px;
  color: #3d4257;
}

.breakdown-list li:last-child {
  border-bottom: none;
}

.breakdown-list .bi {
  color: var(--primary);
  font-size: 13.5px;
  width: 18px;
}

.breakdown-list .count {
  margin-left: auto;
  font-weight: 700;
  color: #1f2437;
}

/* ---- Compact table card (OFFERS / OPEN CASES style) ---- */

.compact-table-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compact-table-card .card-header .add-link {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--primary);
}

.compact-table-card table.table th,
.compact-table-card table.table td {
  padding: 10px 16px;
  font-size: 11.5px;
}

.compact-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--card-border);
  font-size: 11px;
  color: #9198ab;
}

.compact-table-footer .pager-btns {
  display: flex;
  gap: 4px;
}

.compact-table-footer .pager-btns button {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: #6b7185;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compact-table-footer .pager-btns button:disabled {
  opacity: 0.4;
}

/* ---- Secondary page toolbar (sticky, below topbar) ---- */

.page-toolbar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 1010;
  background: #fff;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 20px;
  height: 44px;
  overflow-x: auto;
  white-space: nowrap;
}

.page-toolbar::-webkit-scrollbar {
  height: 3px;
}

.page-toolbar .tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #3d4257;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}

.page-toolbar .tb-btn:hover {
  background: var(--body-bg);
  color: var(--primary);
}

.page-toolbar .tb-btn.primary {
  color: var(--primary);
  font-weight: 700;
}

.page-toolbar .tb-btn .bi {
  font-size: 12.5px;
}

.page-toolbar .tb-sep {
  width: 1px;
  height: 20px;
  background: var(--card-border);
  margin: 0 6px;
  flex-shrink: 0;
}

/* ==========================================================================
   Tables / Listing pages
   ========================================================================== */

.filter-bar {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.table-card {
  overflow: hidden;
}

.table-responsive {
  border-radius: var(--radius);
}

table.table {
  margin-bottom: 0;
}

.table thead th {
  background: #f8f9fd;
  color: #7d84a0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  border-bottom: none;
  padding: 13px 16px;
  white-space: nowrap;
}

.table tbody td {
  padding: 4px 16px;
  vertical-align: middle;
  color: #3d4257;
  font-size: 11.5px;
}

.table tbody tr {
  border-bottom: 1px solid var(--card-border);
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table tbody tr:hover {
  background: #fafbff;
}

.thumb-sm {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--body-bg);
}

.badge-status {
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 30px;
  font-size: 11px;
}

.row-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  background: #fff;
  color: #6b7185;
  font-size: 11px;
}

.btn-icon:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-icon.text-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Bootstrap's text-* colour classes use !important, so a coloured icon
   (e.g. the green Add Stock) would stay coloured on the filled hover. */
.btn-icon[class*="text-"]:hover {
  color: #fff !important;
}

/* ==========================================================================
   Forms (Add Product / Category / Designation)
   ========================================================================== */

.form-section-title {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.form-section-desc {
  color: #9198ab;
  font-size: 11.5px;
  margin-bottom: 18px;
}

.required::after {
  content: " *";
  color: var(--danger);
}

.image-upload-box {
  border: 1.5px dashed #d7dbea;
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: #9198ab;
  cursor: pointer;
  background: #fbfcff;
  position: relative;
}

.image-upload-box img {
  max-height: 140px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.image-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ck-editor__editable {
  min-height: 220px;
}

/* ==========================================================================
   Misc
   ========================================================================== */

.pagination .page-link {
  border-radius: 8px;
  margin: 0 2px;
  border: 1px solid var(--card-border);
  color: #545a70;
}

.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #9198ab;
}

.empty-state .bi {
  font-size: 41.5px;
  color: #d7dbea;
  margin-bottom: 12px;
  display: block;
}

footer.app-footer {
  padding: 16px 24px 28px;
  color: #9198ab;
  font-size: 11.5px;
}

@media (max-width: 575.98px) {
  .page-content {
    padding: 16px;
  }

  .auth-visual {
    display: none;
  }
}

/* ==========================================================================
   Toast notifications (common success/error alert box)
   ========================================================================== */

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1080;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 40px));
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  border-left: 4px solid var(--sidebar-icon);
  cursor: pointer;
  opacity: 0;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.toast-item.toast-in {
  opacity: 1;
  transform: translateX(0);
}

.toast-item.toast-out {
  opacity: 0;
  transform: translateX(120%);
  transition: transform 0.35s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.3s ease;
}

.toast-item.toast-success {
  border-left-color: var(--success, #03c95a);
}

.toast-item.toast-success .toast-icon {
  color: var(--success, #03c95a);
}

.toast-item.toast-error {
  border-left-color: var(--danger, #e63757);
}

.toast-item.toast-error .toast-icon {
  color: var(--danger, #e63757);
}

.toast-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-message {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.4;
  color: var(--body-color, #2b2f3a);
  word-break: break-word;
}

.toast-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #9198ab;
  font-size: 14.5px;
  line-height: 1;
  padding: 0;
  margin-top: 1px;
}

.toast-close:hover {
  color: #2b2f3a;
}

@media (max-width: 575.98px) {
  .toast-container {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }

  .toast-item.toast-in,
  .toast-item {
    transform: translateY(120%);
  }

  .toast-item.toast-in {
    transform: translateY(0);
  }

  .toast-item.toast-out {
    transform: translateY(120%);
  }
}

/* ==========================================================================
   Menu permission tree (resources/views/partials/menu-permission-tree.blade.php)
   Any depth; each row draws its own connector pieces:
     [x] HRMS Management
      |
      +-- [x] Recruitment
      |    +-- [x] Job Posting
      |    '-- [x] Job Listing
      '-- [x] Attendance
   The pieces are absolutely positioned spans whose left offset is set
   inline per level (see the partial).
   ========================================================================== */
.menu-perm-table {
  --tree-color: #cfd5e4;
}
.menu-perm-table .menu-tree-cell {
  position: relative;
}
.menu-perm-table .menu-tree-node {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.menu-perm-table .menu-tree-node label {
  cursor: pointer;
}
.menu-perm-table .menu-tree-node .form-check-input {
  flex-shrink: 0;
}
.menu-perm-table .tree-line {
  position: absolute;
  pointer-events: none;
}
.menu-perm-table .tree-v {
  top: 0;
  bottom: 0;
  border-left: 1.5px solid var(--tree-color);
}
.menu-perm-table .tree-v-half {
  top: 0;
  bottom: 50%;
  border-left: 1.5px solid var(--tree-color);
}
.menu-perm-table .tree-h {
  top: 50%;
  width: 19px;
  border-top: 1.5px solid var(--tree-color);
}
.menu-perm-table .tree-down {
  top: calc(50% + 9px);
  bottom: 0;
  border-left: 1.5px solid var(--tree-color);
}
.menu-perm-table tr.is-collapsed .tree-down {
  display: none;
}
.menu-perm-table tr.depth-0 {
  background: #fbfcfe;
}
.menu-perm-table tr.is-child td {
  padding-top: 9px;
  padding-bottom: 9px;
}
.menu-tree-toggle {
  border: 0;
  background: none;
  color: #9aa1b8;
  padding: 0 4px;
  line-height: 1;
}
.menu-tree-toggle:hover {
  color: var(--primary);
}
.menu-tree-toggle i {
  display: inline-block;
  transition: transform 0.15s ease;
}
.menu-tree-toggle.collapsed i {
  transform: rotate(-90deg);
}

/* Image field preview (masters form): shown to the right of the Browse input. */
.file-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #fafbff;
  text-decoration: none;
  min-height: 62px;
}
.file-preview:hover {
  border-color: var(--primary);
}
.file-preview img {
  width: 64px;
  height: 48px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
}
.file-preview-caption {
  font-size: 11px;
  color: #7d84a0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Image thumbnail in master listings (fields with 'list' => true). */
.list-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  object-fit: contain;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #fff;
  vertical-align: middle;
}
.list-thumb-empty {
  background: #f8f9fd;
  color: #c3c8d8;
  font-size: 16px;
}

/* ==========================================================================
   Nested menu groups (menus nest to any depth, e.g. HRMS > Recruitment > Job
   Posting). A group inside a submenu opens in place, indented one step.
   ========================================================================== */
.sidebar-nav .submenu .submenu {
  padding-left: 14px;
  margin: 0 0 4px;
  border-left: 1px dashed var(--card-border);
  margin-left: 18px;
}
.sidebar-nav .submenu .nav-link.nav-group {
  display: flex;
  width: 100%;
  font-weight: 600;
  color: #45507a;
}
.sidebar-nav .submenu .nav-link.nav-group::before {
  display: none;
}
.sidebar-nav .submenu .nav-link.nav-group .chevron {
  font-size: 10px;
}
.sidebar-nav .submenu .nav-item {
  margin-bottom: 0;
}
/* The collapsed-sidebar flyout is moved to <body>, outside .sidebar-nav,
   so its nested groups need their own rules. */
.sidebar-flyout .submenu {
  list-style: none;
  display: none;
  padding-left: 12px;
  margin: 0 0 4px 16px;
  border-left: 1px dashed var(--card-border);
}
.sidebar-flyout .nav-item.open > .submenu {
  display: block;
}
.sidebar-flyout .nav-item.open > .nav-link .chevron {
  transform: rotate(90deg);
}
.sidebar-flyout {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Long top-menu dropdowns (a whole module) scroll instead of running off-screen. */
.top-menu-flyout.dropdown-menu {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  min-width: 220px;
}
.top-menu-flyout .dropdown-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9aa1b8;
  padding: 10px 12px 4px;
}
.top-menu-flyout .dropdown-item.active,
.top-menu-flyout .dropdown-item:active {
  background: var(--primary-light);
  color: var(--primary);
}

/* Right-side panel (Bootstrap offcanvas): Customer 360 and Courier Log. */
.crm-side-panel { --bs-offcanvas-width: 880px; max-width: 100vw; border-left: 1px solid var(--card-border); box-shadow: -16px 0 40px -20px rgba(20, 25, 50, .35); }
.crm-side-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--card-border); }
.crm-side-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #7d84a0; }
.crm-side-title { font-size: 1.05rem; font-weight: 700; margin: 2px 0 0; color: #1f2437; }
.crm-side-close { border: 0; background: none; color: #7d84a0; padding: 4px 8px; border-radius: 6px; }
.crm-side-close:hover { background: #f1f3fa; color: #1f2437; }
.crm-side-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.crm-side-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--card-border); background: #f8f9fd; }

/* Summary card, tabs, chips and small controls: Customer 360 and Courier Log. */
.crm-hero .avatar { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-light); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.crm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--card-border); }
.crm-kpis > div { padding: 12px 16px; }
.crm-kpis > div + div { border-left: 1px solid var(--card-border); }
.crm-kpis .v { font-size: 18px; font-weight: 700; color: #1f2437; }
@media (max-width: 767.98px) { .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-kpis > div:nth-child(3) { border-left: 0; } }
.crm-pen { flex: none; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: #9198ab; display: inline-flex; align-items: center; justify-content: center; }
.crm-pen:hover, .crm-pen:focus-visible { background: var(--primary-light); color: var(--primary); }
.crm-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--primary-light); color: var(--primary-dark); }
.crm-cnt { min-width: 18px; height: 18px; border-radius: 9px; background: var(--primary-light); color: var(--primary-dark); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.crm-filter-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.crm-filter-field { flex: 1 1 140px; min-width: 0; }
.crm-filter-actions { display: flex; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 992px) { .crm-filter-line { flex-wrap: nowrap; } .crm-filter-field { flex-basis: 0; } }
.crm-work { font-size: 12.5px; }
.crm-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--card-border); overflow-x: auto; flex-wrap: nowrap; }
.crm-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 11px 11px 9px; font-size: 12.5px; font-weight: 600; color: #6b7185; white-space: nowrap; }
.crm-tabs .nav-link:hover { color: #1f2437; }
.crm-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); background: none; }
.crm-pane { padding: 14px 16px 16px; }
.crm-chip { min-height: 28px; padding: 0 11px; border-radius: 30px; border: 1px solid #e3e6f0; background: #fff; font-size: 12px; font-weight: 600; color: #3d4257; }
.crm-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }