@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');/* ================================================================
   TOKENS
================================================================ */

:root {
  --primary-color: #6244ff;

  --brand-primary: #6244ff;
  --brand-gradient: linear-gradient(135deg, #7c6bff, #a855f7);

  --card-hover-border: #d7dfff;
  --card-hover-shadow: 0 8px 18px rgba(48, 86, 255, 0.12);

  --card-active-bg: #f5f3ff;
  --card-active-border: #c9bbff;
  --card-active-shadow: 0 6px 18px rgba(98, 77, 255, 0.1);

  --nav-hover-bg: #f5f3ff;

  --text-primary: #101828;
  --text-secondary: #475467;
  --text-muted: #98a2b3;
  --text-white: #ffffff;

  --nav-text: #475467;

  --surface: #ffffff;
  --border-light: #eceff3;

  --corner-arrow: #c4c4cf;

  --flyout-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
  --dropdown-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);

  --status-in-bg: linear-gradient(135deg, #f0fdf4, #dcfce7);
  --status-in-border: #bbf7d0;
  --status-in-text: #15803d;
  --status-in-icon-bg: linear-gradient(135deg, #22c55e, #16a34a);
  --status-in-glow: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, transparent 70%);
  --status-in-ripple: radial-gradient(circle, rgba(34, 197, 94, 0.22) 0%, transparent 70%);
  --status-in-pill-bg: #dcfce7;
  --status-in-pill-text: #16a34a;
  --status-in-pill-border: #bbf7d0;

  --status-out-bg: linear-gradient(135deg, #fef2f2, #fee2e2);
  --status-out-border: #fecaca;
  --status-out-text: #dc2626;
  --status-out-icon-bg: linear-gradient(135deg, #f87171, #dc2626);
  --status-out-glow: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);
  --status-out-ripple: radial-gradient(circle, rgba(239, 68, 68, 0.18) 0%, transparent 70%);

  --toggle-track-off: #e2e8f0;
  --toggle-track-on: #22c55e;
  --toggle-track-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
  --toggle-thumb-bg: #ffffff;
  --toggle-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

  --break-input-border: #e2e8f0;
  --break-input-focus-border: var(--primary-color);
  --break-input-focus-shadow: 0 0 0 3px rgba(98, 77, 255, 0.12);
  --break-icon-color: #94a3b8;

  --end-break-bg: linear-gradient(135deg, #f87171, #dc2626);
  --end-break-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  --end-break-shadow-hover: 0 6px 16px rgba(220, 38, 38, 0.38);

  --border-medium: #e2e8f0;

  --zb-w: 210px;
  --zb-w-collapsed: 84px;
  --zb-head: 62px;
  --zb-t: 0.2s ease;
}

._zb-sidebar_jupac_149 {
  --card-bg: #ffffff;
  --card-border: #ececf1;
  --card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

/* ================================================================
   SHELL — flex column, nav is the only scroller
================================================================ */

._zb-sidebar_jupac_149 {
  position: fixed;
  top: 0;
  left: 0;

  height: 100vh;
  width: var(--zb-w);

  background: var(--surface);
  border-right: 1px solid var(--border-light);

  display: flex;
  flex-direction: column;

  z-index: 900;

  transition: width var(--zb-t);

  overflow: visible;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 {
  width: var(--zb-w-collapsed);
}

/* ================================================================
   LOGO — fixed height, never overflows
================================================================ */

._zb-logo_jupac_227 {
  display: flex;
  align-items: center;

  gap: 10px;

  height: var(--zb-head);
  min-height: var(--zb-head);

  padding: 0 16px;

  flex: 0 0 auto;

  border-bottom: 1px solid var(--border-light);

  overflow: hidden;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-logo_jupac_227 {
  justify-content: center;
  padding: 0;
}

._zb-logo-icon_jupac_273 {
  width: 34px;
  height: 34px;

  border-radius: 10px;

  background: var(--brand-gradient);

  box-shadow: 0 4px 10px rgba(124, 107, 255, 0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}

._zb-logo-icon_jupac_273 svg {
  width: 18px;
  height: 18px;
}

._zb-logo-text_jupac_317 {
  display: flex;
  flex-direction: column;

  line-height: 1.15;

  overflow: hidden;
}

._zb-logo-name_jupac_335 {
  font-size: 14px;
  font-weight: 700;

  color: var(--text-primary);

  letter-spacing: -0.01em;
}

._zb-logo-sub_jupac_353 {
  font-size: 9px;
  font-weight: 500;

  color: var(--text-muted);

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-logo-text_jupac_317 {
  display: none;
}

/* ================================================================
   NAV SCROLL — min-height:0 is what keeps the footer on screen
================================================================ */
._zb-nav-scroll_jupac_387 {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 6px 0 12px;

  scrollbar-width: thin;
  scrollbar-color: #dcdce4 transparent;
  scrollbar-gutter: stable;
}

._zb-nav-scroll_jupac_387::-webkit-scrollbar {
  width: 4px;
}

._zb-nav-scroll_jupac_387::-webkit-scrollbar-track {
  background: transparent;
}

._zb-nav-scroll_jupac_387::-webkit-scrollbar-thumb {
  background: #dcdce4;
  border-radius: 20px;
}

._zb-nav-label_jupac_443 {
  font-size: 9.5px;
  font-weight: 700;

  letter-spacing: 0.11em;
  text-transform: uppercase;

  color: var(--text-muted);

  padding: 14px 18px 6px;

  white-space: nowrap;
  overflow: hidden;
}

/* collapsed: labels off, thin rule keeps the grouping readable */
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-label_jupac_443 {
  display: none;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-section_jupac_483+._zb-nav-section_jupac_483 {
  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid #f1f2f6;
}

/* ================================================================
   NAV ITEM — EXPANDED
================================================================ */

._zb-item-wrap_jupac_505 {
  position: relative;
}

._zb-nav-item_jupac_513 {
  position: relative;

  display: flex;
  align-items: center;

  gap: 11px;

  height: 38px;

  margin: 2px 10px;
  padding: 0 11px;

  border: 1px solid transparent;
  border-radius: 9px;

  cursor: pointer;

  text-decoration: none;

  background: transparent;

  color: var(--nav-text);

  font-size: 12.5px;
  font-weight: 500;

  white-space: nowrap;

  transition:
    background var(--zb-t),
    color var(--zb-t),
    border-color var(--zb-t),
    box-shadow var(--zb-t),
    transform var(--zb-t);
}

._zb-nav-item_jupac_513:hover {
  color: var(--primary-color);

  border-color: var(--card-hover-border);

  box-shadow: var(--card-hover-shadow);
}

._zb-sidebar_jupac_149:not(._collapsed_jupac_211) ._zb-nav-item_jupac_513._active_jupac_603 {
  background: var(--card-active-bg);

  border-color: var(--card-active-border);

  color: var(--primary-color);

  font-weight: 600;

  box-shadow: var(--card-active-shadow);
}

._zb-nav-icon_jupac_627 {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  font-size: 17px;
}

._zb-nav-icon_jupac_627 svg {
  width: 17px;
  height: 17px;

  stroke-width: 2;
}

._zb-nav-text_jupac_667 {
  flex: 1;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* short label only exists in the rail */
._zb-nav-text-short_jupac_683 {
  display: none;
}

._zb-nav-badge_jupac_691 {
  background: var(--primary-color);
  color: var(--text-white);

  font-size: 10px;
  font-weight: 700;

  padding: 1px 6px;
  border-radius: 100px;

  flex: 0 0 auto;
}

._zb-nav-chevron_jupac_717 {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  font-size: 13px;

  color: var(--text-muted);

  transition: transform var(--zb-t);
}

._zb-nav-item_jupac_513._open_jupac_743 ._zb-nav-chevron_jupac_717 {
  transform: rotate(90deg);
}

._zb-nav-item_jupac_513:hover ._zb-nav-chevron_jupac_717,
._zb-nav-item_jupac_513._active_jupac_603 ._zb-nav-chevron_jupac_717 {
  color: var(--primary-color);
}

/* ================================================================
   NAV ITEM — COLLAPSED RAIL (card)
================================================================ */

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-scroll_jupac_387 {
  padding: 7px;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-section_jupac_483 {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-item-wrap_jupac_505 {
  display: flex;
  justify-content: center;

  width: 64px;
  margin: 0 auto;
  box-sizing: border-box;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513 {
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  width: 64px;
  height: 64px;

  flex: 0 0 64px;
  box-sizing: border-box;

  margin: 0;
  padding: 8px 3px;

  border-radius: 14px;

  background: var(--card-bg);

  border: 1px solid var(--card-border);

  box-shadow: var(--card-shadow);

  color: var(--nav-text);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513:hover {
  transform: translateY(-2px);

  color: var(--primary-color);

  border-color: var(--card-hover-border);

  box-shadow: var(--card-hover-shadow);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._active_jupac_603,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._flyout-active_jupac_887 {
  background: #ffffff !important;

  border-color: var(--primary-color);

  color: var(--text-primary);

  box-shadow: var(--card-active-shadow);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._active_jupac_603 ._zb-nav-icon_jupac_627,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._flyout-active_jupac_887 ._zb-nav-icon_jupac_627 {
  color: var(--primary-color);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._active_jupac_603 ._zb-nav-text-short_jupac_683,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._flyout-active_jupac_887 ._zb-nav-text-short_jupac_683 {
  font-weight: 700;
  color: var(--primary-color);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-icon_jupac_627 {
  width: 20px;
  height: 20px;

  font-size: 19px;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-icon_jupac_627 svg {
  width: 19px;
  height: 19px;
}

/* full label hidden, short label shown — no mid-word clipping */
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-text_jupac_667 {
  display: none;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-text-short_jupac_683 {
  display: -webkit-box;

  width: 100%;
  max-width: 58px;

  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.15;

  text-align: center;
  white-space: normal;
  word-break: break-word;

  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-chevron_jupac_717,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-badge_jupac_691 {
  display: none;
}

/* ================================================================
   SUBMENU MARKER (collapsed only)
================================================================ */

._zb-corner-arrow_jupac_1023 {
  display: none;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-corner-arrow_jupac_1023 {
  display: block;

  position: absolute;

  right: 5px;
  bottom: 5px;

  width: 0;
  height: 0;

  border: 4px solid transparent;
  border-right-color: var(--corner-arrow);
  border-bottom-color: var(--corner-arrow);

  border-bottom-right-radius: 2px;

  pointer-events: none;

  transition: border-color var(--zb-t);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513:hover ._zb-corner-arrow_jupac_1023,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._active_jupac_603 ._zb-corner-arrow_jupac_1023,
._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-nav-item_jupac_513._flyout-active_jupac_887 ._zb-corner-arrow_jupac_1023 {
  border-right-color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* ================================================================
   INLINE SUB MENU (expanded only)
================================================================ */

._zb-sub-menu_jupac_1097 {
  overflow: hidden;

  max-height: 0;

  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

._zb-sub-menu_jupac_1097._open_jupac_743 {
  max-height: 420px;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-sub-menu_jupac_1097 {
  max-height: 0 !important;
}

._zb-sub-item_jupac_1129 {
  display: flex;
  align-items: center;

  gap: 9px;

  height: 32px;

  margin: 1px 10px 1px 24px;
  padding: 0 10px;

  border-radius: 8px;

  font-size: 12px;
  font-weight: 500;

  color: var(--text-secondary);

  text-decoration: none;

  white-space: nowrap;

  transition:
    background var(--zb-t),
    color var(--zb-t);
}

._zb-sub-dot_jupac_1183 {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #cfd4dd;

  flex: 0 0 auto;

  transition: background var(--zb-t);
}

._zb-sub-item_jupac_1129:hover {
  background: var(--nav-hover-bg);
  color: var(--primary-color);
}

._zb-sub-item_jupac_1129._active_jupac_603 {
  background: var(--card-active-bg);
  color: var(--primary-color);

  font-weight: 600;
}

._zb-sub-item_jupac_1129:hover ._zb-sub-dot_jupac_1183,
._zb-sub-item_jupac_1129._active_jupac_603 ._zb-sub-dot_jupac_1183 {
  background: var(--primary-color);
}

/* ================================================================
   FLYOUT PANEL (collapsed — hover / click)
================================================================ */

._zb-flyout_jupac_1251 {
  position: absolute;

  left: calc(100% + 8px);

  min-width: 214px;
  max-height: 78vh;

  overflow-y: auto;
  overflow-x: hidden;

  background: #ffffff;

  border: 1px solid var(--border-light);
  border-radius: 12px;

  box-shadow: var(--flyout-shadow);

  padding: 8px 0;

  z-index: 2000;

  isolation: isolate;

  animation: _zbFlyIn_jupac_1 0.14s ease;
}

@keyframes _zbFlyIn_jupac_1 {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

._zb-flyout-title_jupac_1329 {
  font-size: 9.5px;
  font-weight: 700;

  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--text-muted);

  padding: 4px 16px 8px;
}

._zb-flyout-item_jupac_1353 {
  display: flex;
  align-items: center;

  padding: 9px 16px;

  font-size: 13px;
  font-weight: 500;

  color: var(--text-secondary);

  text-decoration: none;

  white-space: nowrap;

  transition:
    background 0.14s ease,
    color 0.14s ease;
}

._zb-flyout-item_jupac_1353:hover {
  background: var(--nav-hover-bg);
  color: var(--primary-color);
}

._zb-flyout-item_jupac_1353._active_jupac_603 {
  background: var(--card-active-bg);
  color: var(--primary-color);

  font-weight: 600;
}

/* ================================================================
   BOTTOM BAR
================================================================ */

._zb-sidebar-bottom_jupac_1425 {
  flex: 0 0 auto;

  border-top: 1px solid var(--border-light);

  padding: 8px;

  position: relative;

  display: flex;
  align-items: center;
  gap: 6px;

  background: #fff;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-sidebar-bottom_jupac_1425 {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  gap: 3px;

  padding: 10px 8px;
}

._zb-user-card_jupac_1477 {
  flex: 1 1 auto;

  display: flex;
  align-items: center;

  gap: 3px;

  padding: 6px 8px;

  border-radius: 10px;

  cursor: pointer;

  min-width: 0;

  transition: background var(--zb-t);
}

._zb-user-card_jupac_1477:hover {
  background: #f6f7f9;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-user-card_jupac_1477 {
  flex: 0 0 auto;
  justify-content: center;

  width: auto;
  padding: 4px;
}

._zb-user-avatar_jupac_1539 {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: var(--brand-gradient);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 700;

  color: var(--text-white);

  flex: 0 0 auto;

  overflow: hidden;
}

._zb-user-avatar_jupac_1539 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

._zb-user-info_jupac_1597 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-user-info_jupac_1597 {
  display: none;
}

._zb-user-name_jupac_1617 {
  font-size: 12px;
  font-weight: 600;

  color: var(--text-primary);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._zb-user-role_jupac_1639 {
  font-size: 10px;

  color: var(--text-muted);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._zb-logout-btn_jupac_1659 {
  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  color: var(--text-muted);

  font-size: 13px;

  cursor: pointer;
  flex: 0 0 auto;

  transition:
    background var(--zb-t),
    color var(--zb-t);
}

._zb-logout-btn_jupac_1659:hover {
  background: #fef2f2;
  color: #dc2626;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-logout-btn_jupac_1659 {
  display: none;
}

._zb-expand-btn_jupac_1721 {
  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--card-border);
  border-radius: 4px;

  background: #fff;

  color: var(--text-secondary);

  font-size: 10px;

  box-shadow: var(--card-shadow);

  cursor: pointer;

  flex: 0 0 auto;

  transition:
    background var(--zb-t),
    color var(--zb-t),
    border-color var(--zb-t),
    box-shadow var(--zb-t);
}

._zb-expand-btn_jupac_1721:hover {
  background: var(--card-active-bg);

  border-color: var(--card-active-border);

  color: var(--primary-color);

  box-shadow: var(--card-hover-shadow);
}

._zb-expand-btn_jupac_1721 svg {
  transition: transform var(--zb-t);
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-expand-btn_jupac_1721 svg {
  transform: rotate(180deg);
}

/* ================================================================
   USER DROPDOWN
================================================================ */

._zb-user-dropdown_jupac_1825 {
  position: absolute;

  bottom: calc(100% + 10px);
  left: 8px;

  width: 264px;

  background: #ffffff;

  border-radius: 14px;

  box-shadow: var(--dropdown-shadow);

  border: 1px solid var(--border-light);

  z-index: 9999;

  overflow: hidden;

  cursor: default;
}

._zb-sidebar_jupac_149._collapsed_jupac_211 ._zb-user-dropdown_jupac_1825 {
  left: calc(100% - 4px);
  bottom: 8px;
}

._zb-user-dropdown-header_jupac_1881 {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 13px 14px;

  background: #f8f9fb;
}

._zb-dropdown-avatar_jupac_1903 {
  width: 36px;
  height: 36px;

  border-radius: 50%;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--brand-gradient);

  color: var(--text-white);

  font-weight: 700;
  font-size: 12px;

  flex: 0 0 auto;
}

._zb-dropdown-avatar_jupac_1903 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._zb-dropdown-id_jupac_1959 {
  min-width: 0;
  overflow: hidden;
}

._zb-dropdown-name_jupac_1969 {
  font-weight: 600;
  font-size: 12.5px;

  color: var(--text-primary);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._zb-dropdown-email_jupac_1991 {
  font-size: 10.5px;
  color: var(--text-muted);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._zb-dropdown-divider_jupac_2009 {
  height: 1px;
  background: var(--border-light);
}

._zb-dropdown-menu-item_jupac_2019 {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 11px 15px;

  font-size: 12.5px;
  font-weight: 500;

  color: var(--text-secondary);

  cursor: pointer;

  transition:
    background var(--zb-t),
    color var(--zb-t);
}

._zb-dropdown-menu-item_jupac_2019:hover {
  background: var(--nav-hover-bg);
  color: var(--primary-color);
}

._zb-dropdown-menu-icon_jupac_2069 {
  font-size: 13px;

  display: flex;
  align-items: center;
}

._zb-dropdown-logout_jupac_2083 {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 12px 15px;

  font-size: 12.5px;
  font-weight: 600;

  color: #dc2626;

  border-top: 1px solid var(--border-light);

  cursor: pointer;
}

._zb-dropdown-logout_jupac_2083:hover {
  background: #fef2f2;
}

/* ================================================================
   MOBILE OVERLAY
================================================================ */

._zb-sidebar-overlay_jupac_2135 {
  display: none;

  position: fixed;
  inset: 0;

  background: rgba(16, 24, 40, 0.5);

  z-index: 299;

  backdrop-filter: blur(2px);
}

._zb-sidebar-overlay_jupac_2135._visible_jupac_2161 {
  display: block;
}

/* ================================================================
   ATTENDANCE
================================================================ */

._emp-att-wrap_jupac_2177 {
  padding: 10px;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

._emp-status-card_jupac_2195 {
  position: relative;

  border-radius: 12px;

  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  overflow: hidden;

  transition: background 0.3s;
}

._emp-status-card_jupac_2195._checked-in_jupac_2231 {
  background: var(--status-in-bg);
  border: 1.5px solid var(--status-in-border);
}

._emp-status-card_jupac_2195._checked-out_jupac_2241 {
  background: var(--status-out-bg);
  border: 1.5px solid var(--status-out-border);
}

._emp-status-glow_jupac_2251 {
  position: absolute;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  top: -40px;
  left: -20px;

  pointer-events: none;
}

._emp-status-card_jupac_2195._checked-in_jupac_2231 ._emp-status-glow_jupac_2251 {
  background: var(--status-in-glow);
}

._emp-status-card_jupac_2195._checked-out_jupac_2241 ._emp-status-glow_jupac_2251 {
  background: var(--status-out-glow);
}

._emp-status-left_jupac_2295 {
  display: flex;
  align-items: center;

  gap: 12px;

  position: relative;

  z-index: 1;
}

._emp-clock-wrap_jupac_2317 {
  position: relative;

  width: 40px;
  height: 40px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

._emp-clock-ripple_jupac_2343 {
  position: absolute;

  inset: 0;

  border-radius: 50%;

  animation: _clockRipple_jupac_1 2.4s ease-in-out infinite;
}

._emp-status-card_jupac_2195._checked-in_jupac_2231 ._emp-clock-ripple_jupac_2343 {
  background: var(--status-in-ripple);
}

._emp-status-card_jupac_2195._checked-out_jupac_2241 ._emp-clock-ripple_jupac_2343 {
  background: var(--status-out-ripple);
}

@keyframes _clockRipple_jupac_1 {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.18);
    opacity: 0.6;
  }
}

._emp-clock-icon_jupac_2407 {
  width: 26px;
  height: 26px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-white);

  font-size: 12px;

  position: relative;

  z-index: 1;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

._emp-status-card_jupac_2195._checked-in_jupac_2231 ._emp-clock-icon_jupac_2407 {
  background: var(--status-in-icon-bg);
}

._emp-status-card_jupac_2195._checked-out_jupac_2241 ._emp-clock-icon_jupac_2407 {
  background: var(--status-out-icon-bg);
}

._emp-status-info_jupac_2465 {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

._emp-status-label_jupac_2479 {
  font-size: 11px;

  color: var(--text-secondary);

  font-weight: 500;
}

._emp-status-text_jupac_2495 {
  font-size: 11px;

  font-weight: 800;

  letter-spacing: -0.03em;

  line-height: 1.1;
}

._emp-status-text_jupac_2495._in_jupac_2515 {
  color: var(--status-in-text);
}

._emp-status-text_jupac_2495._out_jupac_2523 {
  color: var(--status-out-text);
}

._emp-timer-pill_jupac_2531 {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  background: var(--status-in-pill-bg);

  color: var(--status-in-pill-text);

  border: 1px solid var(--status-in-pill-border);

  padding: 2px 7px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

  width: fit-content;

  margin-top: 1px;

  letter-spacing: 0.02em;
}

._emp-toggle-switch_jupac_2585 {
  position: relative;

  z-index: 1;

  cursor: pointer;

  flex-shrink: 0;
}

._emp-toggle-switch_jupac_2585 input {
  position: absolute;

  opacity: 0;

  width: 0;
  height: 0;
}

._emp-toggle-track_jupac_2623 {
  display: block;

  width: 38px;
  height: 18px;

  border-radius: 999px;

  background: var(--toggle-track-off);

  position: relative;

  transition: background 0.25s;

  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
}

._emp-toggle-switch_jupac_2585 input:checked+._emp-toggle-track_jupac_2623 {
  background: var(--toggle-track-on);

  box-shadow: var(--toggle-track-shadow);
}

._emp-toggle-thumb_jupac_2669 {
  position: absolute;

  top: 1px;
  left: 0;

  width: 16px;
  height: 16px;

  border-radius: 50%;

  background: var(--toggle-thumb-bg);

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  box-shadow: var(--toggle-thumb-shadow);
}

._emp-toggle-switch_jupac_2585 input:checked+._emp-toggle-track_jupac_2623 ._emp-toggle-thumb_jupac_2669 {
  transform: translateX(20px);
}

._emp-toggle-switch_jupac_2585 input:disabled+._emp-toggle-track_jupac_2623 {
  opacity: 0.55;

  cursor: not-allowed;
}

._emp-break-select-wrap_jupac_2725 {
  position: relative;

  display: flex;
  align-items: center;

  background: var(--surface);

  border: 1.5px solid var(--break-input-border);

  border-radius: 10px;

  padding: 0 10px;

  height: 34px;

  gap: 7px;

  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

._emp-break-select-wrap_jupac_2725:focus-within {
  border-color: var(--break-input-focus-border);

  box-shadow: var(--break-input-focus-shadow);
}

._emp-break-select-icon_jupac_2783 {
  color: var(--break-icon-color);

  flex-shrink: 0;

  display: flex;
  align-items: center;
}

._emp-break-select_jupac_2725 {
  flex: 1;

  border: none;

  background: transparent;

  font-size: 11px;

  font-weight: 500;

  color: #374151;

  outline: none;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  padding-right: 4px;
}

._emp-break-select_jupac_2725 option {
  font-size: 12px;
  color: #374151;
}

._emp-break-chevron_jupac_2859 {
  flex-shrink: 0;
  pointer-events: none;
}

._emp-end-break-btn_jupac_2869 {
  width: 100%;

  border: none;

  padding: 7px;

  border-radius: 10px;

  background: var(--end-break-bg);

  color: var(--text-white);

  font-size: 10px;

  font-weight: 700;

  cursor: pointer;

  letter-spacing: 0.02em;

  box-shadow: var(--end-break-shadow);

  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

._emp-end-break-btn_jupac_2869:hover {
  transform: translateY(-1px);

  box-shadow: var(--end-break-shadow-hover);
}

._emp-work-status-grid_jupac_2937 {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 5px;
}

._emp-ws-btn_jupac_2953 {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  padding: 5px 2px 6px;

  border-radius: 10px;

  border: 1.5px solid var(--border-medium);

  background: var(--surface);

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

  min-height: 58px;
}

._emp-ws-btn_jupac_2953:hover {
  border-color: var(--ws-color);

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

._emp-ws-btn_jupac_2953._active_jupac_603 {
  background: var(--ws-active-bg);

  border-color: var(--ws-active-bg);

  transform: translateY(-1px);

  box-shadow: 0 6px 18px color-mix(in srgb, var(--ws-active-bg) 40%, transparent);
}

._emp-ws-check_jupac_3043 {
  position: absolute;

  top: 3px;
  right: 4px;

  font-size: 10px !important;

  color: var(--text-white);

  background: rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  padding: 2px;

  width: 12px;
  height: 12px;

  display: flex;

  align-items: center;
  justify-content: center;
}

._emp-ws-icon-wrap_jupac_3093 {
  width: 26px;
  height: 26px;

  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;

  transition: background 0.2s;
}

._emp-ws-btn_jupac_2953:not(._active_jupac_603) ._emp-ws-icon-wrap_jupac_3093 {
  color: var(--ws-color);
}

._emp-ws-btn_jupac_2953._active_jupac_603 ._emp-ws-icon-wrap_jupac_3093 {
  color: var(--text-white);
}

._emp-ws-label_jupac_3139 {
  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  transition: color 0.2s;
}

._emp-ws-btn_jupac_2953:not(._active_jupac_603) ._emp-ws-label_jupac_3139 {
  color: var(--text-secondary);
}

._emp-ws-btn_jupac_2953._active_jupac_603 ._emp-ws-label_jupac_3139 {
  color: var(--text-white);
}

/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 768px) {
  ._zb-sidebar_jupac_149 {
    transform: translateX(-100%);

    width: var(--zb-w) !important;

    transition: transform var(--zb-t);

    z-index: 400;
  }

  ._zb-sidebar_jupac_149._mobile-open_jupac_3209 {
    transform: translateX(0);
  }

  ._zb-expand-btn_jupac_1721,
  ._zb-flyout_jupac_1251 {
    display: none;
  }
}

@media (max-width: 480px) {
  ._emp-work-status-grid_jupac_2937 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   EMBEDDED IN ECS WORKPLACE (60px app header)
================================================================ */

/* :global([data-hrms-embedded="true"]) .zb-sidebar {
  top: 60px;

  height: calc(100vh - 60px);
} *//* ===== Change Password Modal ===== */
._changePasswordModal_qk68p_3 .modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* Header */
._modalHeader_qk68p_19 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid #f1f2f4;
  background: #fffbeb;
}

._headerLeft_qk68p_39 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._headerIconBox_qk68p_51 {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.35);
}

._headerIconSvg_qk68p_75 {
  font-size: 19px;
  color: #1f2937;
}

._modalHeader_qk68p_19 h5 {
  font-size: 15.5px;
  font-weight: 700;
  color: #1f2937;
}

._subText_qk68p_97 {
  font-size: 12px;
  color: #9aa1ab;
}

/* Body */
._modalContent_qk68p_109 {
  padding: 22px;
}

._label_qk68p_117 {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 7px;
}

._inputBox_qk68p_133 {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

._inputBox_qk68p_133:focus-within {
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

._inputBox_qk68p_133 ._input_qk68p_133 {
  flex: 1;
  border: none;
  padding: 10px 12px;
  font-size: 13px;
  color: #1f2937;
  background: transparent;
  box-shadow: none;
  outline: none;
}

._inputBox_qk68p_133 ._input_qk68p_133:focus {
  border: none;
  box-shadow: none;
}

._inputBox_qk68p_133 ._toggleBtn_qk68p_197 {
  background: transparent;
  border: none;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  color: #9aa1ab;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s ease;
}

._inputBox_qk68p_133 ._toggleBtn_qk68p_197:hover {
  color: #6b7280;
}

/* Footer */
._modalFooter_qk68p_233 {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #f1f2f4;
}

._cancelBtn_qk68p_249 {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

._cancelBtn_qk68p_249:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

._primaryBtns_qk68p_283 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--gradient-primary);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

._primaryBtns_qk68p_283:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

._primaryBtns_qk68p_283:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}.custom-toast-wrapper {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.custom-toast-wrapper > * {
  pointer-events: auto;
}

@media (max-width: 480px) {
  .custom-toast-wrapper {
    top: 16px;
    right: 16px;
    left: 16px;
  }
}

/* Base Toast Styles - Professional Business */
.success-toast,
.error-toast,
.warning-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 280px;
  max-width: 380px;
  padding: 0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  animation: toastSlideIn 0.3s ease-out forwards;
  transition: all 0.2s ease;
  border: 1px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Exit Animation */
.success-toast.exit,
.error-toast.exit,
.warning-toast.exit {
  animation: toastSlideOut 0.25s ease-in forwards;
}

.success-toast:hover,
.error-toast:hover,
.warning-toast:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Enter Animation */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Exit Animation */
@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Pearl Sheen Overlay - Fixed Working Version */
.success-toast::before,
.error-toast::before,
.warning-toast::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: pearlShine 3s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes pearlShine {
  0% {
    left: -100%;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Left & Right Sections */
.success-left,
.error-left,
.warning-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding: 12px 0 12px 16px;
  position: relative;
  z-index: 2;
}

.success-right,
.error-right,
.warning-right {
  display: flex;
  align-items: center;
  padding: 12px 16px 12px 8px;
  position: relative;
  z-index: 2;
}

/* Icon Container */
.outer-success,
.outer-wrong,
.outer-warning {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

/* ==================== COLOR VARIANTS ==================== */

/* SUCCESS */
.success-toast {
  background: #ffffff;
  border-color: #10b981;
  border-left-width: 4px;
  border-left-style: solid;
}

.success-message {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.outer-success {
  background: #ecfdf5;
  color: #059669;
}

.success-toast:hover .outer-success {
  background: #d1fae5;
}

/* ERROR */
.error-toast {
  background: #ffffff;
  border-color: #ef4444;
  border-left-width: 4px;
  border-left-style: solid;
}

.error-message {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.outer-wrong {
  background: #fef2f2;
  color: #dc2626;
}

.error-toast:hover .outer-wrong {
  background: #fee2e2;
}

/* WARNING */
.warning-toast {
  background: #ffffff;
  border-color: #f59e0b;
  border-left-width: 4px;
  border-left-style: solid;
}

.warning-message {
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.outer-warning {
  background: #fffbeb;
  color: #d97706;
}

.warning-toast:hover .outer-warning {
  background: #fef3c7;
}

/* Close Button Styling */
.success-right button,
.error-right button,
.warning-right button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-right button:hover,
.error-right button:hover,
.warning-right button:hover {
  background: #f3f4f6;
  color: #4b5563;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .success-toast,
  .error-toast,
  .warning-toast {
    min-width: unset;
    max-width: 100%;
    border-radius: 6px;
  }

  .success-left,
  .error-left,
  .warning-left {
    padding: 10px 0 10px 12px;
    gap: 10px;
  }

  .success-right,
  .error-right,
  .warning-right {
    padding: 10px 12px 10px 8px;
  }

  .outer-success,
  .outer-wrong,
  .outer-warning {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .success-message,
  .error-message,
  .warning-message {
    font-size: 12px;
  }
}
:root {
  --gold-50: #fffdf5;
  --gold-100: #fef9e7;
  --gold-200: #fef0c2;
  --gold-300: #fcd34d;
  --gold-400: #f59e0b;
  --gold-500: #d97706;
  --gold-600: #b45309;
  --cream: #fdf8f0;
  --peach: #fff4ed;
  --blush: #fff0f0;
  --sage: #f0fdf4;
  --sky: #f0f9ff;
  --ink: #1c1917;
  --ink-2: #44403c;
  --ink-3: #78716c;
  --ink-4: #a8a29e;
  --ink-5: #d6d3d1;
  --white: #ffffff;
  --shadow-warm: 0 4px 24px rgba(217, 119, 6, 0.08);
  --shadow-md: 0 8px 32px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.12);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hrm-page {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100vh;

  background: #ffffff;
  background-image: none;

  overflow-x: hidden;
  overflow-y: auto;

  zoom: 0.75;

  -webkit-font-smoothing: antialiased;
}

/* ── BODY LAYOUT ── */
.hrm-body {
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 10px;
  align-items: flex-start;
}

/* ── LEFT ASIDE ── */
.hrm-aside {
  width: 220px;
  min-width: 220px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  overflow: visible;

  scrollbar-width: none;
}

.hrm-aside::-webkit-scrollbar {
  display: none;
}

/* ── MAIN ── */
.hrm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: visible;

  min-width: 0;
  scrollbar-width: none;
}

.hrm-main::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════
   SHARED CARD
══════════════════════════════ */
.hrm-card {
  background: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-primary-lightest);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--color-primary-warm);
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
    overflow: visible;
}


.hrm-card:hover {
  box-shadow: 0 8px 36px var(--shadow-primary-sm);
}

.hrm-card-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.hrm-card-sub {
  font-size: 9px;
  color: var(--ink-4);
  margin-bottom: 8px;
  font-weight: 500;
}

.hrm-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hrm-more-btn {
  font-size: 14px;
  color: var(--ink-5);
  cursor: pointer;
  letter-spacing: 1px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color var(--transition);
}

.hrm-more-btn:hover {
  color: var(--gold-400);
}

/* ══════════════════════════════
   TOTAL EMPLOYEES CARD
══════════════════════════════ */
.hrm-emp-card {
  background: var(--gradient-primary);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px 16px 0;
  box-shadow: var(--shadow-primary-lg);
  overflow: hidden;
  position: relative;
}

/* decorative circle behind the number */
.hrm-emp-card::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.hrm-emp-label {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hrm-emp-num {
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -2px;
  margin: 4px 0 2px;
}

.hrm-emp-growth {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin: 2px 0 8px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.hrm-spark-wrap {
  margin: 0 -16px;
  height: 66px;
  overflow: hidden;
  opacity: 0.9;
}

/* ══════════════════════════════════════════════
   ARC GAUGE
══════════════════════════════════════════════ */
.hrm-gauge-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100px;
  margin-bottom: 6px;
}

.hrm-gauge-center {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.hrm-gauge-pct {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.hrm-gauge-sub {
  font-size: 9px;
  color: var(--ink-4);
  font-weight: 500;
}

.hrm-att-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.hrm-att-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.6);
  transition: background var(--transition);
}

.hrm-att-row:hover {
  background: var(--color-primary-lightest);
}

.hrm-att-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-weight: 500;
}

.hrm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.hrm-att-pct {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
}

/* ══════════════════════════════════════════════
   PAYROLL CARD
══════════════════════════════════════════════ */
.hrm-pay-subtitle {
  font-size: 9px;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 6px;
}

.hrm-pay-chart-box {
  height: 70px;
  position: relative;
  flex: 1;
}

/* ══════════════════════════════════════════════
   TOP STAT CARDS
══════════════════════════════════════════════ */
.hrm-stat-row {
  display: flex;
  flex-direction: column;
}

.hrm-stat-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  min-height: 118px;
  overflow: hidden;
  border: 1px solid transparent;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.hrm-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.hrm-stat-card.green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 60%, #bbf7d0 100%);
  border-color: rgba(74, 222, 128, 0.35);
}

.hrm-stat-card.yellow {
  background: linear-gradient(
    135deg,
    var(--gold-100) 0%,
    var(--gold-200) 60%,
    #fcd34d 100%
  );
  border-color: rgba(253, 211, 77, 0.5);
}

.hrm-stat-card.red {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 60%, #fecdd3 100%);
  border-color: rgba(251, 113, 133, 0.35);
}

.hrm-stat-card.orange {
  background: linear-gradient(
    135deg,
    var(--peach) 0%,
    #fed7aa 60%,
    #fdba74 100%
  );
  border-color: rgba(251, 146, 60, 0.35);
}

.hrm-stat-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.hrm-stat-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.hrm-stat-change {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
}

.hrm-pill {
  font-size: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}

.hrm-badge-green {
  background: rgba(220, 252, 231, 0.9);
  color: #15803d;
}

.hrm-badge-yellow {
  background: rgba(254, 240, 138, 0.9);
  color: var(--gold-600);
}

.hrm-badge-red {
  background: rgba(254, 202, 202, 0.9);
  color: #b91c1c;
}

.hrm-badge-orange {
  background: rgba(254, 215, 170, 0.9);
  color: #c2410c;
}

.hrm-badge-purple {
  background: rgba(237, 233, 254, 0.9);
  color: #6d28d9;
}

.hrm-card-icon {
  position: absolute;
  right: 16px;
  bottom: 10px;
  opacity: 0.15;
  transform: scale(1.3);
  transition: opacity var(--transition);
}

.hrm-stat-card:hover .hrm-card-icon {
  opacity: 0.25;
}

/* ══════════════════════════════════════════════
   CHART CARD
══════════════════════════════════════════════ */
.hrm-chart-card {
  background: #fff;
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-primary-lightest);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--color-primary-warm);
  height: 100%;
}

.hrm-chart-card h6 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════
   STAT LABELS (alt sizes)
══════════════════════════════════════════════ */
.hrm-stat-label {
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 3px;
}

.hrm-stat-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -1.5px;
}

.hrm-stat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-top: 6px;
}

.hrm-stat-icon {
  position: absolute;
  bottom: 10px;
  right: 12px;
  opacity: 0.15;
  line-height: 0;
}

/* ══════════════════════════════════════════════
   MID ROW
══════════════════════════════════════════════ */
.hrm-mid-row {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 10px;
  flex-shrink: 0;
}

.hrm-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--ink-3);
}

.hrm-leg-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hrm-leg-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.hrm-leg-dash {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2.5px dashed var(--gold-500);
  vertical-align: middle;
}

.hrm-att-chart-box {
  height: 180px;
  position: relative;
  flex: 1;
}

/* Dept donut */
.hrm-dept-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.hrm-dept-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hrm-dept-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.hrm-dept-name {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 500;
}

/* ══════════════════════════════════════════════
   BOTTOM ROW
══════════════════════════════════════════════ */
.hrm-btm-row {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 10px;
  flex-shrink: 0;
}

/* Section header */
.hrm-bd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-primary-lightest);
}

.hrm-bd-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hrm-bd-section-icon {
  width: 28px;
  height: 28px;
  background: var(--gradient-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
   box-shadow: var(--shadow-primary-sm);
  flex-shrink: 0;
}

.hrm-bd-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.hrm-bd-count-pill {
  font-size: 9px;
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-primary-lightest);
}

/* Birthday row container */
/* .hrm-bd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: none;
} */

.hrm-bd-list::-webkit-scrollbar {
  display: none;
}

/* Individual birthday row */
.hrm-bd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
   background: linear-gradient(
  135deg,
  var(--color-primary-lightest) 0%,
  #f7f4ff 60%,
  var(--color-primary-warm) 100%
);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* shimmer on hover */
.hrm-bd-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 251, 235, 0.6) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.hrm-bd-item:hover::after {
  transform: translateX(100%);
}

.hrm-bd-item:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary-lightest) 0%,
    #f8f5ff 60%,
    var(--color-primary-warm) 100%
  );
  border-color: var(--color-primary-lightest);
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-2px);
  z-index: 2;
}
.hrm-bd-item:active {
  transform: scale(0.99);
}

/* Today highlight */
.hrm-bd-item.is-today {
  background: linear-gradient(135deg, #fffbeb, #fef3c7, #fde68a);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow:
    0 4px 16px rgba(217, 119, 6, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Avatar wrapper */
.hrm-bd-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.hrm-bd-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(253, 211, 77, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hrm-bd-avatar-ph {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--white);
  font-size: 14px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
  letter-spacing: -0.5px;
}

/* Today badge on avatar */
.birthday-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 7px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  animation: bdPulse 2s ease-in-out infinite;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@keyframes bdPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  }

  50% {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.55);
  }
}

/* Info column */
.hrm-bd-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hrm-bd-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.hrm-bd-item:hover .hrm-bd-name {
  color: var(--gold-600);
}

.birthday-today {
  font-size: 13px;
  animation: wiggle 1.8s ease-in-out infinite;
  display: inline-block;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

.hrm-bd-dept {
  font-size: 9px;
  color: var(--ink-4);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrm-bd-date {
  font-size: 9px;
  color: var(--gold-500);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Gift icon */
.birthday-gift {
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.8;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
}

.hrm-bd-item:hover .birthday-gift {
  transform: rotate(18deg) scale(1.25);
  opacity: 1;
}

/* 
   LEAVE TABLE
 */
.hrm-table-wrap {
  overflow-y: auto;
  max-height: 220px;
  flex: 1;
  scrollbar-width: none;
  border-radius: var(--radius-sm);
}

.hrm-table-wrap::-webkit-scrollbar {
  display: none;
}

.hrm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.hrm-table thead th {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 8px;
 border-bottom: 1px solid var(--color-primary-lightest);
  text-align: left;
  white-space: nowrap;
  background: var(--color-primary-lightest);
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
}

.hrm-table tbody tr {
  transition: background var(--transition);
}

.hrm-table tbody tr:hover {
  background: var(--color-primary-lightest);
}

.hrm-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(245, 235, 215, 0.6);
  color: var(--ink-2);
  vertical-align: middle;
}

.hrm-no-wrap {
  white-space: nowrap;
}

.hrm-emp-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hrm-emp-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(253, 211, 77, 0.4);
}

.hrm-emp-av-ph {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-300));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold-600);
  flex-shrink: 0;
}

.hrm-emp-name {
  font-weight: 600;
  font-size: 10px;
  color: var(--ink);
}

/* Status badges */
.hrm-sbadge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
  letter-spacing: 0.02em;
}

.hrm-s-approved {
  background: rgba(220, 252, 231, 0.9);
  color: #15803d;
  border: 1px solid rgba(134, 239, 172, 0.4);
}

.hrm-s-pending {
  background: rgba(254, 240, 138, 0.9);
  color: var(--gold-600);
  border: 1px solid rgba(253, 211, 77, 0.4);
}

.hrm-s-rejected {
  background: rgba(254, 202, 202, 0.9);
  color: #b91c1c;
  border: 1px solid rgba(252, 165, 165, 0.4);
}

.hrm-acts {
  display: flex;
  gap: 6px;
  color: var(--ink-5);
  font-size: 12px;
  cursor: pointer;
}

.hrm-acts span {
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.hrm-acts span:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* ══════════════════════════════════════════════
   LAST ROW
══════════════════════════════════════════════ */
/* AFTER */
.hrm-last-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
  align-items: stretch;
}

/* Announcement card */
.hrm-announce-card {
  background: #fff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--color-primary-warm);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 300px;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}

.hrm-announce-card:hover {
  box-shadow: 0 8px 32px var(--color-primary-lightest);
}

.hrm-announce-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.hrm-announce-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}

.hrm-announce-text {
  font-size: 11px;
  line-height: 1.6;
}

.hrm-important-label {
  font-weight: 700;
}

/* Quick Actions */
.hrm-qa-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  margin-top: 10px;
  gap: 6px;
}

.hrm-qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 1;
}

.hrm-qa-btn:hover {
  transform: translateY(-4px);
}

.hrm-qa-btn:active {
  transform: translateY(0) scale(0.96);
}

.hrm-qa-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: box-shadow var(--transition);
}

.hrm-qa-btn:hover .hrm-qa-icon {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.hrm-qa-yellow {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-400));
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.hrm-qa-green {
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.hrm-qa-orange {
  background: linear-gradient(135deg, #fb923c, #f97316);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.hrm-qa-label {
  font-size: 9px;
  color: var(--ink-3);
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════
   MINI CALENDAR
══════════════════════════════════════════════ */
.hrm-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hrm-cal-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.hrm-cal-btn {
  background: none;
  border: 1px solid var(--ink-5);
  cursor: pointer;
  color: var(--ink-4);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  transition: all var(--transition);
  line-height: 1.4;
}

.hrm-cal-btn:hover {
  color: var(--gold-500);
  border-color: var(--gold-300);
  background: var(--gold-100);
}

.hrm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}

.hrm-cal-day-label {
  font-size: 8px;
  color: var(--ink-4);
  font-weight: 700;
  padding: 2px 0 4px;
  letter-spacing: 0.04em;
}

.hrm-cal-date {
  font-size: 9px;
  color: var(--ink-2);
  padding: 4px 1px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition);
}

.hrm-cal-date:hover {
   background: var(--color-primary-lightest);
  color: var(--color-accent);
}

.hrm-cal-today {
  font-size: 9px;
 background: var(--gradient-primary);
  color: var(--white);
  font-weight: 800;
  border-radius: 6px;
  padding: 4px 1px;
  box-shadow: var(--shadow-primary-sm);
}

.hrm-stat-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
   EMPTY / LOADER
══════════════════════════════════════════════ */
.hrm-empty {
  text-align: center;
  color: var(--ink-5);
  font-size: 10.5px;
  padding: 18px 0;
  font-weight: 500;
}

.hrm-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--cream);
}

.hrm-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink-5);
  border-top-color: var(--gold-400);
  border-radius: 50%;
  animation: hrmSpin 0.75s linear infinite;
}

@keyframes hrmSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ══════════════════════════════════════════════
   ACTIVE / INACTIVE PILLS
══════════════════════════════════════════════ */
.hrm-status-pill {
  font-size: 9px;
  border-radius: 999px;
  padding: 2px 7px;
  font-weight: 700;
  display: inline-block;
}

@media (max-width: 1300px) {
  @media (max-width: 1300px) {
    .hrm-stat-row {
      grid-template-columns: repeat(2, 1fr);
    }

    .hrm-last-row {
      grid-template-columns: 1fr 1fr 1fr;
    }

    /* keep all 3 in a row */
  }
}

@media (max-width: 1000px) {
  .hrm-mid-row {
    grid-template-columns: 1fr;
  }

  .hrm-btm-row {
    grid-template-columns: 1fr;
  }

  .hrm-aside {
    width: 200px;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .hrm-page {
    width: 100%;
    height: auto;
    transform: none;
  }

  .hrm-body {
    flex-direction: column;
    overflow: auto;
    height: auto;
  }

  .hrm-aside {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hrm-emp-card,
  .hrm-card {
    flex: 1;
    min-width: 200px;
  }

  .hrm-stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .hrm-mid-row {
    grid-template-columns: 1fr;
  }

  .hrm-btm-row {
    grid-template-columns: 1fr;
  }

  .hrm-last-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════
   EXACT AI HEADER UI
═══════════════════════════════════════ */

.hrm-ai-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;

  background: #fafafa;
  border: 1px solid #ececec;

  border-radius: 14px;

  padding: 14px 18px;

  margin-bottom: 14px;
}

.hrm-ai-avatar {
  width: 54px;
  height: 54px;

  min-width: 54px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(
    circle at 30% 30%,
    #ffffff 0%,
    #f3e8ff 40%,
    #ddd6fe 100%
  );

  border: 1px solid #e9d5ff;
}

.hrm-ai-avatar-inner {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #7c3aed, #6366f1);

  color: #fff;
  font-size: 18px;

  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}

.hrm-ai-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hrm-ai-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hrm-ai-search-input {
  flex: 1;

  height: 54px;

  border: 1px solid #ededed;

  border-radius: 10px;

  padding: 0 16px;

  background: #fff;

  font-size: 13px;
  font-weight: 500;

  color: #111827;

  outline: none;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.hrm-ai-search-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.hrm-ai-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hrm-ai-recent {
  height: 38px;

  border: 1px solid #ededed;

  border-radius: 8px;

  background: #fff;

  padding: 0 10px;

  font-size: 11px;
  font-weight: 600;

  color: #6b7280;

  outline: none;

  cursor: pointer;
}

.hrm-ai-generate-btn {
  height: 40px;

  padding: 0 18px;

  border: none;

  border-radius: 8px;

  background: linear-gradient(135deg, #7c3aed, #6366f1);

  color: #fff;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 6px;

  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.24);

  transition: 0.2s ease;
}

.hrm-ai-generate-btn:hover {
  transform: translateY(-1px);
}

.hrm-ai-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;

  flex-wrap: wrap;
}

.hrm-ai-example-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
}

.hrm-ai-chip {
  height: 26px;

  border-radius: 999px;

  border: 1px solid #e9d5ff;

  background: #fff;

  padding: 0 12px;

  font-size: 10px;
  font-weight: 600;

  color: #6366f1;

  cursor: pointer;

  transition: 0.2s ease;
}

.hrm-ai-chip:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
}

@media (max-width: 992px) {
  .hrm-ai-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .hrm-ai-right {
    width: 100%;
    justify-content: space-between;
  }

  .hrm-ai-generate-btn {
    flex: 1;
    justify-content: center;
  }
}

.hrm-btm-row .hrm-card {
  height: 420px; /* adjust as needed */
  overflow: hidden;
}
.hrm-bd-list {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;

  display: flex;
  flex-direction: column;
  gap: 4px;

  scrollbar-width: thin;
}

.hrm-bd-list::-webkit-scrollbar {
  width: 5px;
}

.hrm-bd-list::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 10px;
}
.hrm-bd-item {
  padding: 6px 8px;
  min-height: 54px;
  gap: 8px;
}
.hrm-bd-avatar,
.hrm-bd-avatar-ph {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.hrm-bd-name {
  font-size: 10px;
}

.hrm-bd-dept {
  font-size: 7px;
}

.hrm-bd-date {
  font-size: 7px;
}
.hrm-table-wrap {
  max-height: 340px;
  overflow-y: auto;
}
.hrm-btm-row {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: 10px;
}

.hrm-btm-row > .hrm-card {
  height: 420px;
}
/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-weight:300;line-height:1.2;font-size:calc(1.625rem + 4.5vw)}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-weight:300;line-height:1.2;font-size:calc(1.575rem + 3.9vw)}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-weight:300;line-height:1.2;font-size:calc(1.525rem + 3.3vw)}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-weight:300;line-height:1.2;font-size:calc(1.475rem + 2.7vw)}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-weight:300;line-height:1.2;font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-weight:300;line-height:1.2;font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:var(--bs-secondary-color)}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--bs-border-width) * 2) solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:var(--bs-secondary-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-clip:padding-box;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:var(--bs-body-color);background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--bs-secondary-bg)}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:var(--bs-body-color);background-color:transparent;border:solid transparent;border-width:var(--bs-border-width) 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}textarea.form-control-sm{min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-control-color{width:3rem;height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color::-webkit-color-swatch{border:0!important;border-radius:var(--bs-border-radius)}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--bs-body-color)}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e")}.form-range{width:100%;height:1.5rem;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;-webkit-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;-moz-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:var(--bs-secondary-color)}.form-range:disabled::-moz-range-thumb{background-color:var(--bs-secondary-color)}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + calc(var(--bs-border-width) * 2));min-height:calc(3.5rem + calc(var(--bs-border-width) * 2));line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;z-index:2;max-width:100%;height:100%;padding:1rem .75rem;overflow:hidden;color:rgba(var(--bs-body-color-rgb),.65);text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem;padding-left:.75rem}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>textarea:focus~label::after,.form-floating>textarea:not(:placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:var(--bs-body-bg);border-radius:var(--bs-border-radius)}.form-floating>textarea:disabled~label::after{background-color:var(--bs-secondary-bg)}.form-floating>.form-control-plaintext~label{border-width:var(--bs-border-width) 0}.form-floating>.form-control:disabled~label,.form-floating>:disabled~label{color:#6c757d}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:var(--bs-tertiary-bg);border:var(--bs-border-width) solid var(--bs-border-color);border-radius:var(--bs-border-radius)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(-1 * var(--bs-border-width));border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-success);border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:var(--bs-form-valid-border-color)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:var(--bs-danger);border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(-1 * var(--bs-border-width))}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(-1 * var(--bs-border-width))}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:nth-child(n+3),.btn-group-vertical>:not(.btn-check)+.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:var(--bs-border-color);--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}.nav-underline .nav-link{padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}.nav-underline .nav-link:focus,.nav-underline .nav-link:hover{border-bottom-color:currentcolor}.nav-underline .nav-link.active,.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-grow:1;flex-basis:0;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-grow:1;flex-basis:100%;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child)>.card-header,.card-group>.card:not(:last-child)>.card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child)>.card-footer,.card-group>.card:not(:last-child)>.card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child)>.card-header,.card-group>.card:not(:first-child)>.card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child)>.card-footer,.card-group>.card:not(:first-child)>.card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush>.accordion-item:first-child{border-top:0}.accordion-flush>.accordion-item:last-child{border-bottom:0}.accordion-flush>.accordion-item>.accordion-collapse,.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(-1 * var(--bs-border-width))}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:var(--bs-border-radius-sm)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:var(--bs-primary-text-emphasis);--bs-alert-bg:var(--bs-primary-bg-subtle);--bs-alert-border-color:var(--bs-primary-border-subtle);--bs-alert-link-color:var(--bs-primary-text-emphasis)}.alert-secondary{--bs-alert-color:var(--bs-secondary-text-emphasis);--bs-alert-bg:var(--bs-secondary-bg-subtle);--bs-alert-border-color:var(--bs-secondary-border-subtle);--bs-alert-link-color:var(--bs-secondary-text-emphasis)}.alert-success{--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}.alert-info{--bs-alert-color:var(--bs-info-text-emphasis);--bs-alert-bg:var(--bs-info-bg-subtle);--bs-alert-border-color:var(--bs-info-border-subtle);--bs-alert-link-color:var(--bs-info-text-emphasis)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle);--bs-alert-link-color:var(--bs-warning-text-emphasis)}.alert-danger{--bs-alert-color:var(--bs-danger-text-emphasis);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text-emphasis)}.alert-light{--bs-alert-color:var(--bs-light-text-emphasis);--bs-alert-bg:var(--bs-light-bg-subtle);--bs-alert-border-color:var(--bs-light-border-subtle);--bs-alert-link-color:var(--bs-light-text-emphasis)}.alert-dark{--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}@keyframes progress-bar-stripes{0%{background-position-x:var(--bs-progress-height)}}.progress,.progress-stacked{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-stacked>.progress{overflow:visible}.progress-stacked>.progress>.progress-bar{width:100%}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:not(.active):focus,.list-group-item-action:not(.active):hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:not(.active):active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;filter:var(--bs-btn-close-filter);border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}.btn-close-white{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}:root,[data-bs-theme=light]{--bs-btn-close-filter: }[data-bs-theme=dark]{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-border-width:var(--bs-border-width);--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:var(--bs-border-radius);--bs-toast-box-shadow:var(--bs-box-shadow);--bs-toast-header-color:var(--bs-secondary-color);--bs-toast-header-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-header-border-color:var(--bs-border-color-translucent);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color:var(--bs-body-color);--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transform:translate(0,-50px);transition:transform .3s ease-out}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin-top:calc(-.5 * var(--bs-modal-header-padding-y));margin-right:calc(-.5 * var(--bs-modal-header-padding-x));margin-bottom:calc(-.5 * var(--bs-modal-header-padding-y));margin-left:auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--bs-box-shadow);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:var(--bs-carousel-caption-color);text-align:center}.carousel-dark{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}:root,[data-bs-theme=light]{--bs-carousel-indicator-active-bg:#fff;--bs-carousel-caption-color:#fff;--bs-carousel-control-icon-filter: }[data-bs-theme=dark]{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}.spinner-border,.spinner-grow{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-border-width:var(--bs-border-width);--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);--bs-offcanvas-transition:transform 0.3s ease-in-out;--bs-offcanvas-title-line-height:1.5}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin-top:calc(-.5 * var(--bs-offcanvas-padding-y));margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y));margin-left:auto}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(var(--bs-info-rgb),var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important}.link-primary{color:RGBA(var(--bs-primary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important}.link-primary:focus,.link-primary:hover{color:RGBA(10,88,202,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important}.link-secondary{color:RGBA(var(--bs-secondary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important}.link-secondary:focus,.link-secondary:hover{color:RGBA(86,94,100,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important}.link-success{color:RGBA(var(--bs-success-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important}.link-success:focus,.link-success:hover{color:RGBA(20,108,67,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important}.link-info{color:RGBA(var(--bs-info-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important}.link-info:focus,.link-info:hover{color:RGBA(61,213,243,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important}.link-warning{color:RGBA(var(--bs-warning-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important}.link-warning:focus,.link-warning:hover{color:RGBA(255,205,57,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important}.link-danger{color:RGBA(var(--bs-danger-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important}.link-danger:focus,.link-danger:hover{color:RGBA(176,42,55,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important}.link-light{color:RGBA(var(--bs-light-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important}.link-light:focus,.link-light:hover{color:RGBA(249,250,251,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important}.link-dark{color:RGBA(var(--bs-dark-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important}.link-dark:focus,.link-dark:hover{color:RGBA(26,30,33,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-body-emphasis:focus,.link-body-emphasis:hover{color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,.75))!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x,0) var(--bs-focus-ring-y,0) var(--bs-focus-ring-blur,0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:.375rem;align-items:center;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-underline-offset:0.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:.2s ease-in-out transform}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.visually-hidden *,.visually-hidden-focusable:not(:focus):not(:focus-within) *{overflow:hidden!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.object-fit-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-none{-o-object-fit:none!important;object-fit:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.overflow-x-auto{overflow-x:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.overflow-x-visible{overflow-x:visible!important}.overflow-x-scroll{overflow-x:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-y-visible{overflow-y:visible!important}.overflow-y-scroll{overflow-y:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:var(--bs-box-shadow)!important}.shadow-sm{box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:var(--bs-box-shadow-lg)!important}.shadow-none{box-shadow:none!important}.focus-ring-primary{--bs-focus-ring-color:rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-secondary{--bs-focus-ring-color:rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-success{--bs-focus-ring-color:rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))}.focus-ring-info{--bs-focus-ring-color:rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))}.focus-ring-warning{--bs-focus-ring-color:rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))}.focus-ring-danger{--bs-focus-ring-color:rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))}.focus-ring-light{--bs-focus-ring-color:rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))}.focus-ring-dark{--bs-focus-ring-color:rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-black{--bs-border-opacity:1;border-color:rgba(var(--bs-black-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-primary-subtle{border-color:var(--bs-primary-border-subtle)!important}.border-secondary-subtle{border-color:var(--bs-secondary-border-subtle)!important}.border-success-subtle{border-color:var(--bs-success-border-subtle)!important}.border-info-subtle{border-color:var(--bs-info-border-subtle)!important}.border-warning-subtle{border-color:var(--bs-warning-border-subtle)!important}.border-danger-subtle{border-color:var(--bs-danger-border-subtle)!important}.border-light-subtle{border-color:var(--bs-light-border-subtle)!important}.border-dark-subtle{border-color:var(--bs-dark-border-subtle)!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.column-gap-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-lighter{font-weight:lighter!important}.fw-light{font-weight:300!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-body-secondary{--bs-text-opacity:1;color:var(--bs-secondary-color)!important}.text-body-tertiary{--bs-text-opacity:1;color:var(--bs-tertiary-color)!important}.text-body-emphasis{--bs-text-opacity:1;color:var(--bs-emphasis-color)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.text-primary-emphasis{color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:var(--bs-secondary-text-emphasis)!important}.text-success-emphasis{color:var(--bs-success-text-emphasis)!important}.text-info-emphasis{color:var(--bs-info-text-emphasis)!important}.text-warning-emphasis{color:var(--bs-warning-text-emphasis)!important}.text-danger-emphasis{color:var(--bs-danger-text-emphasis)!important}.text-light-emphasis{color:var(--bs-light-text-emphasis)!important}.text-dark-emphasis{color:var(--bs-dark-text-emphasis)!important}.link-opacity-10{--bs-link-opacity:0.1}.link-opacity-10-hover:hover{--bs-link-opacity:0.1}.link-opacity-25{--bs-link-opacity:0.25}.link-opacity-25-hover:hover{--bs-link-opacity:0.25}.link-opacity-50{--bs-link-opacity:0.5}.link-opacity-50-hover:hover{--bs-link-opacity:0.5}.link-opacity-75{--bs-link-opacity:0.75}.link-opacity-75-hover:hover{--bs-link-opacity:0.75}.link-opacity-100{--bs-link-opacity:1}.link-opacity-100-hover:hover{--bs-link-opacity:1}.link-offset-1{text-underline-offset:0.125em!important}.link-offset-1-hover:hover{text-underline-offset:0.125em!important}.link-offset-2{text-underline-offset:0.25em!important}.link-offset-2-hover:hover{text-underline-offset:0.25em!important}.link-offset-3{text-underline-offset:0.375em!important}.link-offset-3-hover:hover{text-underline-offset:0.375em!important}.link-underline-primary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-secondary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-success{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important}.link-underline-info{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important}.link-underline-warning{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important}.link-underline-danger{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important}.link-underline-light{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important}.link-underline-dark{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important}.link-underline{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-underline-opacity-0{--bs-link-underline-opacity:0}.link-underline-opacity-0-hover:hover{--bs-link-underline-opacity:0}.link-underline-opacity-10{--bs-link-underline-opacity:0.1}.link-underline-opacity-10-hover:hover{--bs-link-underline-opacity:0.1}.link-underline-opacity-25{--bs-link-underline-opacity:0.25}.link-underline-opacity-25-hover:hover{--bs-link-underline-opacity:0.25}.link-underline-opacity-50{--bs-link-underline-opacity:0.5}.link-underline-opacity-50-hover:hover{--bs-link-underline-opacity:0.5}.link-underline-opacity-75{--bs-link-underline-opacity:0.75}.link-underline-opacity-75-hover:hover{--bs-link-underline-opacity:0.75}.link-underline-opacity-100{--bs-link-underline-opacity:1}.link-underline-opacity-100-hover:hover{--bs-link-underline-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-body-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-bg-rgb),var(--bs-bg-opacity))!important}.bg-body-tertiary{--bs-bg-opacity:1;background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-primary-subtle{background-color:var(--bs-primary-bg-subtle)!important}.bg-secondary-subtle{background-color:var(--bs-secondary-bg-subtle)!important}.bg-success-subtle{background-color:var(--bs-success-bg-subtle)!important}.bg-info-subtle{background-color:var(--bs-info-bg-subtle)!important}.bg-warning-subtle{background-color:var(--bs-warning-bg-subtle)!important}.bg-danger-subtle{background-color:var(--bs-danger-bg-subtle)!important}.bg-light-subtle{background-color:var(--bs-light-bg-subtle)!important}.bg-dark-subtle{background-color:var(--bs-dark-bg-subtle)!important}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:var(--bs-border-radius-xxl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important}.rounded-top-1{border-top-left-radius:var(--bs-border-radius-sm)!important;border-top-right-radius:var(--bs-border-radius-sm)!important}.rounded-top-2{border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-3{border-top-left-radius:var(--bs-border-radius-lg)!important;border-top-right-radius:var(--bs-border-radius-lg)!important}.rounded-top-4{border-top-left-radius:var(--bs-border-radius-xl)!important;border-top-right-radius:var(--bs-border-radius-xl)!important}.rounded-top-5{border-top-left-radius:var(--bs-border-radius-xxl)!important;border-top-right-radius:var(--bs-border-radius-xxl)!important}.rounded-top-circle{border-top-left-radius:50%!important;border-top-right-radius:50%!important}.rounded-top-pill{border-top-left-radius:var(--bs-border-radius-pill)!important;border-top-right-radius:var(--bs-border-radius-pill)!important}.rounded-end{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-end-1{border-top-right-radius:var(--bs-border-radius-sm)!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important}.rounded-end-2{border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-3{border-top-right-radius:var(--bs-border-radius-lg)!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important}.rounded-end-4{border-top-right-radius:var(--bs-border-radius-xl)!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important}.rounded-end-5{border-top-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important}.rounded-end-circle{border-top-right-radius:50%!important;border-bottom-right-radius:50%!important}.rounded-end-pill{border-top-right-radius:var(--bs-border-radius-pill)!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important}.rounded-bottom{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-0{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.rounded-bottom-1{border-bottom-right-radius:var(--bs-border-radius-sm)!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important}.rounded-bottom-2{border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-3{border-bottom-right-radius:var(--bs-border-radius-lg)!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important}.rounded-bottom-4{border-bottom-right-radius:var(--bs-border-radius-xl)!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important}.rounded-bottom-5{border-bottom-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important}.rounded-bottom-circle{border-bottom-right-radius:50%!important;border-bottom-left-radius:50%!important}.rounded-bottom-pill{border-bottom-right-radius:var(--bs-border-radius-pill)!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important}.rounded-start{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-0{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-start-1{border-bottom-left-radius:var(--bs-border-radius-sm)!important;border-top-left-radius:var(--bs-border-radius-sm)!important}.rounded-start-2{border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-3{border-bottom-left-radius:var(--bs-border-radius-lg)!important;border-top-left-radius:var(--bs-border-radius-lg)!important}.rounded-start-4{border-bottom-left-radius:var(--bs-border-radius-xl)!important;border-top-left-radius:var(--bs-border-radius-xl)!important}.rounded-start-5{border-bottom-left-radius:var(--bs-border-radius-xxl)!important;border-top-left-radius:var(--bs-border-radius-xxl)!important}.rounded-start-circle{border-bottom-left-radius:50%!important;border-top-left-radius:50%!important}.rounded-start-pill{border-bottom-left-radius:var(--bs-border-radius-pill)!important;border-top-left-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}.z-2{z-index:2!important}.z-3{z-index:3!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.object-fit-sm-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-sm-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-sm-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-sm-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-sm-none{-o-object-fit:none!important;object-fit:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}.column-gap-sm-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-sm-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-sm-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-sm-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-sm-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-sm-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.object-fit-md-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-md-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-md-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-md-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-md-none{-o-object-fit:none!important;object-fit:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}.column-gap-md-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-md-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-md-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-md-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-md-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-md-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.object-fit-lg-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-lg-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-lg-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-lg-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-lg-none{-o-object-fit:none!important;object-fit:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}.column-gap-lg-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-lg-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-lg-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-lg-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-lg-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-lg-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.object-fit-xl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xl-none{-o-object-fit:none!important;object-fit:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}.column-gap-xl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.object-fit-xxl-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-fit-xxl-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fit-xxl-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-fit-xxl-scale{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-fit-xxl-none{-o-object-fit:none!important;object-fit:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}.column-gap-xxl-0{-moz-column-gap:0!important;column-gap:0!important}.column-gap-xxl-1{-moz-column-gap:0.25rem!important;column-gap:.25rem!important}.column-gap-xxl-2{-moz-column-gap:0.5rem!important;column-gap:.5rem!important}.column-gap-xxl-3{-moz-column-gap:1rem!important;column-gap:1rem!important}.column-gap-xxl-4{-moz-column-gap:1.5rem!important;column-gap:1.5rem!important}.column-gap-xxl-5{-moz-column-gap:3rem!important;column-gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map *//* Container */
._container_11gg4_3 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER - Compact Version */
._header_11gg4_17 {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 20px; /* Reduced from 20px 24px */
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.08);
   border: 1px solid var(--color-primary-lighter);
}

/* Left Section */
._left_11gg4_49 {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced from 6px */
  max-width: 70%;
}

/* Breadcrumb - Smaller */
._breadcrumb_11gg4_65 {
  font-size: 11px; /* Reduced from 13px */
  color: #64748b;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 500;
}

._breadcrumb_11gg4_65 strong {
  color: var(--color-primary);
  font-weight: 700;
}

._backBtn_11gg4_95 {
  background: none;
  border: none;
  color: #6b7280;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Title - Smaller */
._title_11gg4_117 {
  font-size: 18px; /* Reduced from 22px */
  font-weight: 700; /* Slightly less bold */
  margin: 0;
  color: #111827;
  line-height: 1.3;
}

/* Subtitle - Smaller */
._subtitle_11gg4_135 {
  font-size: 11px; /* Reduced from 14px */
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
  max-width: 520px;
}

/* Actions */
._actions_11gg4_153 {
  display: flex;
  align-items: center;
  gap: 10px; /* Reduced from 14px */
  flex-shrink: 0;
}

/* Buttons - Compact Size */
._primaryBtn_11gg4_169,
._cancelBtn_11gg4_171,
._discardBtn_11gg4_173 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

._btnIcon_11gg4_201 {
  font-size: 14px; /* Reduced from 18px */
}

/* Primary Button */
._primaryBtn_11gg4_169 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

._primaryBtn_11gg4_169:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

._primaryBtn_11gg4_169:active {
  transform: translateY(0);
}

/* Cancel / Discard Button */
._cancelBtn_11gg4_171 {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

._cancelBtn_11gg4_171:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Secondary Button (if used) */
._secondaryBtn_11gg4_267 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
  cursor: pointer;
  transition: all 0.2s ease;
}

._secondaryBtn_11gg4_267:hover {
  background: #fffbeb;
  transform: translateY(-1px);
}

/* Third Button (Add rows) */
._thirdButton_11gg4_309 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--gradient-primary);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

._thirdButton_11gg4_309:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

/* Discard Button (alternative style) */
._discardBtn_11gg4_173 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_11gg4_173:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

/* Loading Spinner */
._spinner-border-sm_11gg4_397 {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

/* Mobile Responsive - Compact */
@media (max-width: 768px) {
  ._header_11gg4_17 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  ._actions_11gg4_153 {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  ._primaryBtn_11gg4_169,
  ._secondaryBtn_11gg4_267,
  ._cancelBtn_11gg4_171,
  ._thirdButton_11gg4_309,
  ._discardBtn_11gg4_173 {
    flex: 1;
    justify-content: center;
    padding: 6px 12px;
    font-size: 11px;
  }

  ._title_11gg4_117 {
    font-size: 16px;
  }

  ._subtitle_11gg4_135 {
    font-size: 10px;
  }

  ._breadcrumb_11gg4_65 {
    font-size: 10px;
  }
}

/* Small screens */
@media (max-width: 480px) {
  ._header_11gg4_17 {
    padding: 10px 14px;
  }

  ._actions_11gg4_153 {
    flex-direction: column;
    gap: 6px;
  }

  ._primaryBtn_11gg4_169,
  ._cancelBtn_11gg4_171,
  ._secondaryBtn_11gg4_267,
  ._thirdButton_11gg4_309,
  ._discardBtn_11gg4_173 {
    width: 100%;
    padding: 6px 12px;
    font-size: 11px;
  }

  ._btnIcon_11gg4_201 {
    font-size: 12px;
  }
}

/* MAIN LAYOUT */
._mainLayout_11gg4_541 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_11gg4_557 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_11gg4_557::-webkit-scrollbar {
  width: 6px;
}

._formSection_11gg4_557::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_11gg4_557::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_11gg4_601 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_11gg4_615 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_11gg4_631 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_11gg4_653 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_11gg4_669 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_11gg4_693 {
  position: relative;
  display: inline-block;
}

._profileAvatar_11gg4_703 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-primary-lightest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
._cameraIcon_11gg4_733:hover {
  transform: scale(1.1);
}

._profileText_11gg4_741 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_11gg4_753 {
  flex: 1;
}

/* FORM ROW */
._formRow_11gg4_763 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_11gg4_777 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_11gg4_777 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_11gg4_801 {
  color: #ef4444;
}

._inputWrapper_11gg4_809 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_11gg4_821 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_11gg4_777 input,
._formGroup_11gg4_777 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_11gg4_777 input:focus,
._formGroup_11gg4_777 select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary-md);
}

/* Mobile Input */
._mobileInput_11gg4_875 {
  display: flex;
  gap: 10px;
}

._countrySelect_11gg4_885 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_11gg4_875 ._inputWrapper_11gg4_809 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_11gg4_909 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_11gg4_909 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_11gg4_935 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_11gg4_935:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_11gg4_963 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_11gg4_979 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_11gg4_999 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._nextBtn_11gg4_1017 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_11gg4_1039 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_11gg4_1055 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_11gg4_1067 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_11gg4_1089 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_11gg4_1039 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_11gg4_1115 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_11gg4_1129 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_11gg4_1141 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_11gg4_1161 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_11gg4_1175 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_11gg4_1185 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_11gg4_1203 {
  text-align: left;
  margin: 2px 0;
}

._salary_11gg4_1203 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_11gg4_1223 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_11gg4_1237 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_11gg4_1247 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_11gg4_1259 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_11gg4_1275 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_11gg4_1289 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_11gg4_541 {
    grid-template-columns: 1fr;
  }

  ._previewSection_11gg4_601 {
    position: static;
  }

  ._formSection_11gg4_557 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_11gg4_3 {
    padding: 16px;
  }

  ._header_11gg4_17 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_11gg4_153 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_11gg4_169,
  ._secondaryBtn_11gg4_267,
  ._cancelBtn_11gg4_171 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_11gg4_669 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_11gg4_763 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_11gg4_615 {
    padding: 20px;
  }

  ._title_11gg4_117 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_11gg4_683 {
  width: 125px;
  height: 150px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_11gg4_693 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_11gg4_703 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px dashed #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}



._profileAvatar_11gg4_703 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_11gg4_703 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_11gg4_1533 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_11gg4_733 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_11gg4_741 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_11gg4_1591 {
  position: relative;
}

._rightColumn_11gg4_1599 {
  position: relative;
}

._stickyPreview_11gg4_1607 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_11gg4_777 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._side-heading_11gg4_1651 {
  font-size: 14px;
  font-weight: 600;
}

._btn-icons_11gg4_1661 {
  color: red;
  font-size: 18px;
}

/* LABEL */
._formGroup_11gg4_777 label {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_11gg4_777 input._form-control_11gg4_1619,
._formGroup_11gg4_777 select._form-control_11gg4_1619 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_11gg4_777 input._form-control_11gg4_1619:focus,
._formGroup_11gg4_777 select._form-control_11gg4_1619:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_11gg4_777 input._form-control_11gg4_1619:hover,
._formGroup_11gg4_777 select._form-control_11gg4_1619:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_11gg4_777 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_11gg4_809 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_11gg4_821 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_11gg4_1789 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_11gg4_1799 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_11gg4_777 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_11gg4_1825 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_11gg4_777 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--color-primary);
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_11gg4_809 {
  position: relative;
  width: 100%;
}

._inputIcon_11gg4_821 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_11gg4_875 {
  display: flex;
  gap: 10px;
}

._countrySelect_11gg4_885 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_11gg4_875 ._inputWrapper_11gg4_809 {
  flex: 1;
}

/* Info note */
._infoNote_11gg4_1923 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_11gg4_1951,
  ._col-3_11gg4_1953 {
    width: 100%;
  }

  ._stickyPreview_11gg4_1607 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
/* TABS HEADER - Compact & Clean */
._tabsHeader_11gg4_1977 {
  display: flex;
  gap: 6px; /* Reduced gap */
  overflow-x: auto;
  padding: 0 0 12px 0; /* Reduced bottom padding */
  margin-bottom: 20px; /* Reduced margin */
  border-bottom: 1.5px solid #f0f2f5;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar */
._tabsHeader_11gg4_1977::-webkit-scrollbar {
  height: 3px; /* Thinner scrollbar */
}

._tabsHeader_11gg4_1977::-webkit-scrollbar-track {
  background: #f0f2f5;
  border-radius: 10px;
}

._tabsHeader_11gg4_1977::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

._tabsHeader_11gg4_1977::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}

/* Individual Tab - Compact Size */
._tabsHeading_11gg4_2039 {
  font-size: 12px; /* Reduced from 14px */
  font-weight: 500;
  color: #6b7280;
  padding: 6px 14px; /* Reduced padding */
  margin: 0;
  border-radius: 20px; /* More pill-shaped */
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  letter-spacing: 0.3px;
}

/* Hover Effect */
._tabsHeading_11gg4_2039:hover {
  border-color: var(--color-primary-lighter);
}

/* Active Tab - Clean Indicator */
._activeTab_11gg4_2081 {
  color: #f59e0b;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.1);
}

/* Optional: Add icon support inside tabs */
._tabIcon_11gg4_2099 {
  font-size: 13px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Optional: Tab with count badge */
._tabCount_11gg4_2113 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  color: #6b7280;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: 6px;
  transition: all 0.2s ease;
}

._activeTab_11gg4_2081 ._tabCount_11gg4_2113 {
  background: #fbbf24;
  color: #111827;
}

._tabsHeading_11gg4_2039:hover ._tabCount_11gg4_2113 {
  background: #fde68a;
  color: #111827;
}

/* Responsive */
@media (max-width: 768px) {
  ._tabsHeader_11gg4_1977 {
    gap: 4px;
    padding: 0 0 10px 0;
    margin-bottom: 16px;
  }

  ._tabsHeading_11gg4_2039 {
    font-size: 11px;
    padding: 5px 12px;
  }

  ._tabIcon_11gg4_2099 {
    font-size: 12px;
    margin-right: 4px;
  }
}

@media (max-width: 480px) {
  ._tabsHeading_11gg4_2039 {
    font-size: 10px;
    padding: 4px 10px;
  }
}

._deleteBtn_11gg4_2213 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_11gg4_2213:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_11gg4_2213:active {
  transform: scale(0.95);
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_11gg4_1039 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_11gg4_1039:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_11gg4_2291 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_11gg4_2313 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_11gg4_1055 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_11gg4_1089 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_11gg4_1067 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_11gg4_1055 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_11gg4_2313 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_11gg4_2291 {
    height: 110px;
  }

  ._previewName_11gg4_2421 {
    font-size: 18px;
  }

  ._salaryAmount_11gg4_1223 {
    font-size: 24px;
  }

  ._previewContent_11gg4_2437 {
    padding: 16px 20px 20px 20px;
  }
}
._discardBtn_11gg4_173:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_11gg4_777 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_11gg4_777 select:hover {
  border-color: #fbbf24;
}

._formGroup_11gg4_777 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_11gg4_2531 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_11gg4_2553 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_11gg4_2567 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_11gg4_2581 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_11gg4_2595 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_11gg4_2609 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_11gg4_2637 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_11gg4_2655 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_11gg4_2669 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_11gg4_2685 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* CARD */
._miniCard_11gg4_2705 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0;
  /* prevents overflow */
}

._miniCard_11gg4_2705:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_11gg4_2743 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_11gg4_2757 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_11gg4_2777 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_11gg4_2791 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_11gg4_2803 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._page_11gg4_2823 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_11gg4_2823 *,
._page_11gg4_2823 *::before,
._page_11gg4_2823 *::after {
  box-sizing: border-box;
}

._pageTitle_11gg4_2859 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_11gg4_2873 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_11gg4_2887 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* TABLE SECTION */
._tableSection_11gg4_2903 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_11gg4_2921 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_11gg4_2943 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_11gg4_2957 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_11gg4_201 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_11gg4_3005 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_11gg4_3005:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btn1_11gg4_3025 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._btn1_11gg4_3025:hover {
  background: #f9fafb;
}

._btnPrimary_11gg4_3005 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  border: none;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  font-size: 10px;
}

._btnPrimary_11gg4_3005:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

._discardBtn_11gg4_173:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._btnSecondary_11gg4_3101 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_11gg4_3101:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._dateRangeRow_11gg4_3123 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_11gg4_3145 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_11gg4_3163 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  /* text-transform: uppercase; */
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_11gg4_3181 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterDate_11gg4_3193 {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterDate_11gg4_3193:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
._filterSelect_11gg4_3233:focus,
._filterDate_11gg4_3193:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_11gg4_3245 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_11gg4_3245:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_11gg4_3297 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_11gg4_3311 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_11gg4_3311:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_11gg4_3337 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_11gg4_1 0.15s ease;
}

@keyframes _slideIn_11gg4_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_11gg4_3385 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_11gg4_3399 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_11gg4_3429 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_11gg4_3443 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_11gg4_3457 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_11gg4_3457:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_11gg4_3503 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_11gg4_3503:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_11gg4_3523 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._modal-content_11gg4_3559 {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

._btn-warning_11gg4_3567 {
  background: linear-gradient(135deg, #facc15, #f59e0b);
  border: none;
  color: #000;
  font-weight: 500;
}

._bulkDeselect_11gg4_3523:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_11gg4_3593 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_11gg4_3611 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_11gg4_3633 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding-left: 10px;
}

._asideBody_11gg4_3651 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_11gg4_3667 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_11gg4_3677 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_11gg4_3695 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_11gg4_3711 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_11gg4_3711 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_11gg4_3737 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_11gg4_3759 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_11gg4_3771 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_11gg4_3787 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_11gg4_3803 {
  width: 100%;
}

._barchartBars_11gg4_3811 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_11gg4_3825 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_11gg4_3803 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_11gg4_3849 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_11gg4_3849 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_11gg4_3877 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_11gg4_3891 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_11gg4_3917 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_11gg4_3929 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_11gg4_3941 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_11gg4_3967 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_11gg4_3967 strong {
  font-weight: 600;
}

._activityTime_11gg4_3989 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_11gg4_3999 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_11gg4_4015 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_11gg4_4027 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_11gg4_4051 {
  display: flex;
  flex-direction: column;
}

._empContact_11gg4_4061 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_11gg4_4075 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_11gg4_4093 {
  display: flex;
  align-items: center;
}

._empRing_11gg4_4103 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_11gg4_4115 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_11gg4_4127 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_11gg4_4147 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_11gg4_2873 {
    grid-template-columns: 1fr;
  }

  ._layoutAside_11gg4_3593 {
    position: static;
  }

  ._asideBody_11gg4_3651 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_11gg4_4197 {
    grid-template-columns: 1fr;
  }

  ._heroCard_11gg4_4205 {
    grid-row: auto;
    min-height: 100px;
  }

  ._miniGrid_11gg4_4215 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_11gg4_2823 {
    padding: 9px 10px;
  }

  ._tableHeader_11gg4_2921 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._filterBar_11gg4_4245 {
    gap: 7px;
  }

  ._filterField_11gg4_3145 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

/* Status Badge */
._badge_11gg4_4267 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_11gg4_4291 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_11gg4_4313 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_11gg4_4015 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_11gg4_4027 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_11gg4_4051 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empSub_11gg4_4375 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_11gg4_4061 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

/* Employment Badge */
._empBadge_11gg4_4075 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_11gg4_4093 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_11gg4_4103 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_11gg4_4115 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_11gg4_4127 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_11gg4_4147 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_11gg4_3711 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_11gg4_3711 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_11gg4_3737 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_11gg4_3711 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_11gg4_3759 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_11gg4_3771 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_11gg4_3787 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_11gg4_3803 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_11gg4_3811 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_11gg4_3825 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_11gg4_3803 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_11gg4_3849 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_11gg4_3849 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._miniGrid_11gg4_4215 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

._miniCard_11gg4_2705 {
  flex: 0 0 auto;
  min-width: 130px;
  scroll-snap-align: start;
}
._heroCard_11gg4_4205 {
  flex: 0 0 auto;
  min-width: 170px;
  scroll-snap-align: start;
}

._heroCard_11gg4_4205 {
  grid-column: span 2;
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--gradient-primary);
  border: 1px solid var(--color-primary-light);
  box-shadow: var(--shadow-primary-md);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._heroCard_11gg4_4205:hover {
  transform: translateY(-2px);
}

/* Sparkline */
._sparkline_11gg4_4775 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

/* Hero Label */
._heroLabel_11gg4_4795 {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

/* Hero Value */
._heroValue_11gg4_4815 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

/* Hero Growth / Active Employees badge */
._heroGrowth_11gg4_4833 {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}

/* Mini Cards (remaining columns) */
._miniCard_11gg4_2705 {
  grid-column: span 1;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

._miniCard_11gg4_2705:hover {
  transform: translateY(-2px);
}

/* Mini Top Row */
._miniTop_11gg4_2743 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Mini Label */
._miniLabel_11gg4_2757 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

/* Mini Icon */
._miniIcon_11gg4_2803 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Mini Value */
._miniValue_11gg4_2777 {
  font-size: 18px;
  font-weight: 700;
}

/* Large screens (laptop) */
@media (max-width: 1400px) {
  ._miniGrid_11gg4_4215 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  ._miniGrid_11gg4_4215 {
    grid-template-columns: repeat(4, 1fr);
  }

  ._heroCard_11gg4_4205 {
    grid-column: span 2;
  }
}

/* Small tablet */
@media (max-width: 768px) {
  ._miniGrid_11gg4_4215 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._heroCard_11gg4_4205 {
    grid-column: span 2;
  }
}

/* Mobile → horizontal scroll */
@media (max-width: 576px) {
  ._miniGrid_11gg4_4215 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  ._miniGrid_11gg4_4215::-webkit-scrollbar {
    height: 6px;
  }

  ._miniGrid_11gg4_4215::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
  }

  ._heroCard_11gg4_4205,
  ._miniCard_11gg4_2705 {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

._lineChart_11gg4_5059 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._lineLabels_11gg4_5071 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #6b7280;
}

._sectionHeading_11gg4_5085 {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-primary-lightest);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* FORM GROUP */
._formGroup_11gg4_777 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._form_label_11gg4_5123 {
  color: #515151;
  font-size: 12px;
  font-weight: 600;
}

/* INPUT */
._formGroup_11gg4_777 input._form-control_11gg4_1619 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* FOCUS */
._formGroup_11gg4_777 input._form-control_11gg4_1619:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* HOVER */
._formGroup_11gg4_777 input._form-control_11gg4_1619:hover {
  border-color: #fbbf24;
}

/* PLACEHOLDER */
._formGroup_11gg4_777 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* ERROR TEXT */
._errorText_11gg4_1799 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* INVALID INPUT (Bootstrap override optional) */
._is-invalid_11gg4_5209 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

/* 🔥 Tabs Container */
._tabsHeader_11gg4_1977 {
  display: flex;
  gap: 6px;
  overflow: scroll;
  white-space: nowrap;
  max-width: calc(100vw - var(--sidebar-width));
  flex-wrap: nowrap;
  border-bottom: 1px solid #e5e7eb;
  scroll-behavior: smooth;
  margin-bottom: 16px;
}

/* 🔥 IMPORTANT FIX - prevents items from shrinking */
._tabsHeader_11gg4_1977 > * {
  flex-shrink: 0;
}

/* 🔥 Scrollbar ONLY for tabs */
._tabsHeader_11gg4_1977::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_11gg4_1977::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

._tabsHeader_11gg4_1977::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 🔥 Individual Tab */
._tabsHeading_11gg4_2039 {
  flex-shrink: 0;
  min-width: max-content;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  margin: 0;
}

/* 🔥 Hover */
._tabsHeading_11gg4_2039:hover {
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}

/* 🔥 Active Tab */
._activeTab_11gg4_2081 {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* Delete button */
._deleteRowBtn_11gg4_5341 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff1f1;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._deleteRowBtn_11gg4_5341:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  transform: scale(1.05);
}

/* TITLE */
._title_11gg4_117 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  padding-top: 2px;
  margin: 0;
}

/* SUBTITLE */
._subtitle_11gg4_135 {
  font-size: 10px;
  color: #9ca3af;
  margin: 0;
}

._btnIcon_11gg4_201 {
  font-size: 13px;
}

._avatarImage_11gg4_5425 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

._previewTopBg_11gg4_2291 {
  height: 70px;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
}

._statusBadge_11gg4_1141 {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 20px;
}

._salary_11gg4_1203 {
  text-align: center;
  margin-bottom: 10px;
}

._salary_11gg4_1203 strong {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._salaryAmount_11gg4_1223 {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  margin: 2px 0 0;
}

._salaryNote_11gg4_1237 {
  font-size: 9px;
  color: #9ca3af;
}

/* PROFILE CARD */
._profileCard_11gg4_5519 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  margin-bottom: 20px;
}

/* LEFT */
._profileLeft_11gg4_5541 {
  display: flex;
  gap: 16px;
  align-items: center;
}

._profileImg_11gg4_5553 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

._profileName_11gg4_5565 {
  font-size: 18px;
  font-weight: 700;
}

._profileDetails_11gg4_5575 {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
  flex-wrap: wrap;
}

._badges_11gg4_5591 {
  margin-top: 8px;
}

._badge_11gg4_4267 {
  background: #fde68a;
  padding: 4px 10px;
  border-radius: 10px;
  margin-right: 6px;
  font-size: 11px;
}

/* ACTIONS */
._profileActions_11gg4_5617 {
  display: flex;
  gap: 10px;
  align-items: center;
}

._moreMenu_11gg4_5629 {
  cursor: pointer;
}

/* STATS */
._statsRow_11gg4_4197 {
  display: flex;
  gap: 12px;
}

._statCard_11gg4_5649 {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid #f3f4f6;
}

/* Stats Accordion Styles */
/* Stats Accordion Styles */
._statsAccordion_11gg4_5671 {
  /* margin-bottom: 24px; */
  /* background: white; */
  border-radius: 12px;
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}

._accordionHeader_11gg4_5687 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}

._accordionHeader_11gg4_5687:hover {
  background-color: #f9fafb;
}

._accordionTitle_11gg4_5717 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 15px;
}

._accordionTitle_11gg4_5717 svg {
  color: #f59e0b;
}

._accordionToggle_11gg4_5743 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_11gg4_5743:hover {
  color: #374151;
}

._accordionContent_11gg4_5775 {
  /* padding: 20px; */
  animation: _slideDown_11gg4_1 0.3s ease-out;
}

@keyframes _slideDown_11gg4_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._accordionHeader_11gg4_5687 {
    padding: 12px 16px;
  }

  ._accordionContent_11gg4_5775 {
    padding: 16px;
  }
}

._backBtn_11gg4_95 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_11gg4_95:hover {
  background: #f3f4f6;
  color: var(--gradient-primary);
}

._profileInner_11gg4_693 {
  position: relative;
  display: inline-block;
}

._profileAvatar_11gg4_703 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-lighter);
  border: 2px dashed var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
}

._avatarImage_11gg4_5425 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

._avatarPlaceholderIcon_11gg4_5919 {
  color: var(--color-primary-dark);
}
/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  ._container_11gg4_3 {
    padding: 16px;
  }

  ._formCard_11gg4_615 {
    padding: 20px 18px;
  }
}

@media (max-width: 768px) {
  ._header_11gg4_17 {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 10px;
  }

  ._actions_11gg4_153 {
    width: 100%;
    gap: 8px;
  }

  ._primaryBtn_11gg4_169,
  ._cancelBtn_11gg4_171 {
    flex: 1;
    justify-content: center;
  }

  ._title_11gg4_117 {
    font-size: 15px;
  }

  ._subtitle_11gg4_135 {
    font-size: 10px;
  }

  ._tabsHeading_11gg4_2039 {
    font-size: 11px;
    padding: 5px 11px;
  }

  ._formCard_11gg4_615 {
    padding: 16px;
    border-radius: 14px;
  }

  ._profileUploadBox_11gg4_683 {
    width: 90px;
    height: 115px;
  }

  ._profileAvatar_11gg4_703 {
    width: 65px;
    height: 65px;
  }
}

@media (max-width: 480px) {
  ._container_11gg4_3 {
    padding: 12px;
  }

  ._header_11gg4_17 {
    padding: 10px 14px;
    border-radius: 10px;
  }

  ._actions_11gg4_153 {
    flex-direction: column;
    gap: 6px;
  }

  ._primaryBtn_11gg4_169,
  ._cancelBtn_11gg4_171,
  ._thirdButton_11gg4_309 {
    width: 100%;
    justify-content: center;
  }

  ._tabsHeading_11gg4_2039 {
    font-size: 10px;
    padding: 4px 9px;
  }

  ._formCard_11gg4_615 {
    padding: 14px;
    border-radius: 12px;
  }

  ._sectionHeading_11gg4_5085 {
    font-size: 10px;
  }
}

._backBtn_11gg4_95 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gradient-primary);
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_11gg4_95:hover {
  background: var(--gradient-primary) !important;
  color: var(--gradient-primary) !important;
  border-color: transparent !important;
}

._backBtn_11gg4_95:hover svg {
  color: #fff !important;
}

._dateRangeRow_11gg4_3123 {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
/* CommonFilter.module.css — matches existing Attendance filter bar */
._filterBar_1ptgu_3 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  /* margin-bottom: 16px; */
}

/* ── Field ── */
._filterField_1ptgu_29 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
  flex: 1 1 160px;
}

._filterLabel_1ptgu_45 {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin: 0;
}

._filterInputWrap_1ptgu_63 {
  position: relative;
}

/* ── Select ── */
._selectWrap_1ptgu_73 {
  position: relative;
}

._filterSelect_1ptgu_81 {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  padding: 7px 30px 7px 10px;
  font-size: 10px;
  color: #111827;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
}

._filterSelect_1ptgu_81:hover {
  border-color: #9ca3af;
}

._filterSelect_1ptgu_81:focus {
   border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

._selectArrow_1ptgu_133 {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

/* ── Date / Text ── */
._filterDate_1ptgu_153,
._filterText_1ptgu_155 {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 10px;
  color: #111827;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

._filterDate_1ptgu_153:hover,
._filterText_1ptgu_155:hover {
  border-color: #9ca3af;
}

._filterDate_1ptgu_153:focus,
._filterText_1ptgu_155:focus {
   border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ── Actions ── */
._filterActions_1ptgu_207 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 1px; /* align with field bottoms */
}

._btn_1ptgu_221 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
  white-space: nowrap;
}

._btn_1ptgu_221:active {
  transform: scale(0.97);
}

._btnPrimary_1ptgu_261 {
  background: var(--gradient-primary);
  color: #fff;
  font-size: 10px;
}

._btnPrimary_1ptgu_261:hover {
  background: var(--color-primary);
}

._btnSecondary_1ptgu_281 {
  background: #f3f4f6;
  color: #374151;
  font-size: 10px;
  border: 1px solid #d1d5db;
}

._btnSecondary_1ptgu_281:hover {
  background: #e5e7eb;
}
/* ═════════════════════════════════════════════════════════════════
   CommonTable.module.css
   Every class name here EXACTLY matches style.xxx used in CommonTable.jsx
═════════════════════════════════════════════════════════════════ */

/* ── Root ── */
._root_gio4e_13 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

/* ══════════════════════ TOOLBAR ══════════════════════ */
._toolbar_gio4e_35 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    min-height: 44px;
    flex-shrink: 0;
}

._toolbarLeft_gio4e_57 {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

._toolbarSearchBtn_gio4e_71 {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    background: #f4f7fb;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #718096;
    font-size: 11px;
    cursor: pointer;
    min-width: 200px;
    max-width: 300px;
    transition: border-color 0.15s, background 0.15s;
}

._toolbarSearchBtn_gio4e_71:hover {
    border-color: #cbd5e0;
    background: #edf0f7;
}

._searchPlaceholderText_gio4e_115 {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
}

._searchBox_gio4e_133 {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px;
    background: #ffffff;
    border: 1.5px solid #0054a6;
    border-radius: 4px;
    min-width: 240px;
    max-width: 360px;
    box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.07);
}

._searchIcon_gio4e_161 {
    color: #718096;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

._searchInput_gio4e_175 {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 11px;
    color: #1a202c;
}

._searchInput_gio4e_175::placeholder {
    color: #718096;
    font-size: 10px;
}

._searchClear_gio4e_203 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #4a5568;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.13s;
}

._searchClear_gio4e_203:hover {
    background: #cbd5e0;
}

._toolbarRight_gio4e_241 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

._toolbarDivider_gio4e_255 {
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 2px;
}

._toolbarBtn_gio4e_269 {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 9px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #4a5568;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
    white-space: nowrap;
}

._toolbarBtn_gio4e_269:hover {
    background: #f4f7fb;
    border-color: #cbd5e0;
}

._filterBtn_gio4e_311 {
    font-weight: 500;
    position: relative;
}

._filterBadge_gio4e_321 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gradient-primary) !important;
    color: var(--color-white);
    font-size: 8px;
    font-weight: 400;
}
._filterlabel_gio4e_345 {
    font-size: 10px;
    color: #718096;
}
._advancedBtn_gio4e_353 {
    padding: 0 7px;
}

._viewToggle_gio4e_361 {
    display: flex;
    align-items: center;
    background: #f4f7fb;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    padding: 2px;
    gap: 2px;
}

._viewBtn_gio4e_383 {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #718096;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

._viewBtnActive_gio4e_413 {
    background: #ffffff;
    color: #1a202c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    font-weight: 500;
}

._colVisWrap_gio4e_427 {
    position: relative;
}

._colMenu_gio4e_435 {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 200;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    min-width: 168px;
    padding: 5px 0;
    animation: _fadeIn_gio4e_1 0.11s ease;
}

._colMenuHeader_gio4e_463 {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #718096;
    padding: 5px 11px 7px;
    border-bottom: 1px solid #edf0f7;
    margin-bottom: 3px;
}

._colMenuItem_gio4e_485 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: 11px;
    color: #1a202c;
    cursor: pointer;
    transition: background 0.12s;
}

._colMenuItem_gio4e_485:hover {
    background: #f4f7fb;
}

._colMenuItem_gio4e_485 input:disabled+span {
    opacity: 0.42;
}

/* ══════════════════════ TABLE SCROLL ══════════════════════ */
._tableScroll_gio4e_525 {
    overflow-x: auto;
    overflow-y: auto;
    flex: 0 0 auto;
}

._tableScroll_gio4e_525::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

._tableScroll_gio4e_525::-webkit-scrollbar-track {
    background: transparent;
}

._tableScroll_gio4e_525::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

._tableScroll_gio4e_525::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ══════════════════════ TABLE ══════════════════════ */
._table_gio4e_525 {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

._thead_gio4e_589 {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
}

._thead_gio4e_589 tr {
    border-bottom: 1px solid #e2e8f0;
}

._thead_gio4e_589 th {
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.01em;
    user-select: none;
    background: #f8fafc;
}

._thCheck_gio4e_637 {
    width: 34px !important;
    text-align: center !important;
    padding: 7px 5px !important;
}

._thActions_gio4e_649 {
    width: 60px !important;
    text-align: center !important;
    padding: 7px 5px !important;
}

/* ── TBody ── */
._tbody_gio4e_663 tr._row_gio4e_663 {
    transition: background 0.12s;
    cursor: pointer;
}

._tbody_gio4e_663 tr._row_gio4e_663:last-child {
    border-bottom: none;
}

._tbody_gio4e_663 tr._row_gio4e_663:hover {
    background: #f4f7fb;
}

._rowSelected_gio4e_689 {
    background: var(--color-primary-lightest) !important;
}

._rowSelected_gio4e_689:hover {
    background: #f5f3ff !important;
}

._tbody_gio4e_663 td {
    padding: 8px 10px;
    font-size: 11px;
    color: #1a202c;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px;
}

._tdCheck_gio4e_727 {
    width: 34px !important;
    text-align: center !important;
    padding: 8px 5px !important;
}

._checkbox_gio4e_739 {
    width: 12px;
    height: 12px;
    accent-color: var( --color-primary-light);
    cursor: pointer;
}

/* ── Row Actions ── */
._tdActions_gio4e_755 {
    width: 44px !important;
    text-align: center !important;
    padding: 5px 6px !important;
}

._actionTrigger_gio4e_767 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #718096;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

._actionTrigger_gio4e_767:hover {
    background: #edf0f7;
    color: #1a202c;
}

/* Portal menu — position:fixed set via inline style */
._actionMenu_gio4e_807 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    min-width: 165px;
    padding: 4px 0;
    animation: _fadeIn_gio4e_1 0.11s ease;
}

._actionItem_gio4e_827 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 13px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 11px;
    color: #1a202c;
    cursor: pointer;
    transition: background 0.11s;
    white-space: nowrap;
}

._actionItem_gio4e_827:hover {
    background: #f4f7fb;
}

._actionIcon_gio4e_867 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #4a5568;
    flex-shrink: 0;
}

._actionDanger_gio4e_887 {
    color: #fb3748 !important;
}

._actionDanger_gio4e_887 ._actionIcon_gio4e_867 {
    color: #fb3748 !important;
}

._actionDanger_gio4e_887:hover {
    background: #ffe7e8 !important;
}

/* ── Empty ── */
._emptyState_gio4e_913 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 44px 20px;
    color: #718096;
}

._emptyIcon_gio4e_933 {
    opacity: 0.3;
}

._emptyState_gio4e_913 p {
    font-size: 12px;
    color: #718096;
}

/* ── Skeleton ── */
@keyframes _shimmer_gio4e_1 {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

._skeletonRow_gio4e_973 td {
    padding: 8px 10px;
    border-bottom: 1px solid #edf0f7;
}

._skeletonCell_gio4e_983 {
    height: 9px;
    border-radius: 3px;
    background: linear-gradient(90deg, #edf0f7 25%, #f4f7fb 50%, #edf0f7 75%);
    background-size: 800px 100%;
    animation: _shimmer_gio4e_1 1.4s infinite linear;
}

._skeletonCheck_gio4e_999 {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin: 0 auto;
}

/* ══════════════════════ GRID VIEW ══════════════════════ */
._gridView_gio4e_1015 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 14px;
}

._gridCard_gio4e_1029 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: box-shadow 0.13s, transform 0.13s;
}

._gridCard_gio4e_1029:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
    transform: translateY(-1px);
}

._gridSkeleton_gio4e_1057 {
    height: 110px;
    border-radius: 8px;
    background: linear-gradient(90deg, #edf0f7 25%, #f4f7fb 50%, #edf0f7 75%);
    background-size: 800px 100%;
    animation: _shimmer_gio4e_1 1.4s infinite linear;
}

/* ══════════════════════ BULK BAR ══════════════════════ */
._bulkBar_gio4e_1075 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: #fff2cb;
    border-top: 1px solid #ffe599;
    border-bottom: 1px solid #ffe599;
    flex-shrink: 0;
}

._bulkCount_gio4e_1097 {
    font-size: 11px;
    font-weight: 600;
    color: #cc9c2d;
    margin-right: 3px;
    white-space: nowrap;
}

._bulkActions_gio4e_1113 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

._bulkBtn_gio4e_1127 {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 10px;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    white-space: nowrap;
}

._bulkBtn_gio4e_1127:hover {
    background: #f4f7fb;
}

._bulkIcon_gio4e_1167 {
    display: flex;
    align-items: center;
    width: 12px;
    height: 12px;
}

._bulkDanger_gio4e_1181 {
    color: #fb3748 !important;
    border-color: #ffe7e8 !important;
}

._bulkDanger_gio4e_1181:hover {
    background: #ffe7e8 !important;
}

/* ══════════════════════ PAGINATION ══════════════════════ */
._pagination_gio4e_1201 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;
}

._paginationShowing_gio4e_1225 {
    font-size: 10px;
    color: #718096;
}

._paginationShowing_gio4e_1225 strong {
    color: #1a202c;
    font-weight: 600;
}

._paginationControls_gio4e_1245 {
    display: flex;
    align-items: center;
    gap: 6px;
}

._rowsLabel_gio4e_1257 {
    font-size: 10px;
    color: #718096;
    white-space: nowrap;
}

._rowsSelect_gio4e_1269 {
    height: 24px;
    padding: 0 5px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    font-size: 10px;
    color: #1a202c;
    cursor: pointer;
    outline: none;
    transition: border-color 0.13s;
}

._rowsSelect_gio4e_1269:focus {
    border-color: #0054a6;
}
._thCheck1_gio4e_1301{
       display: flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    padding: 0 9px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #4a5568;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
    white-space: nowrap;
}
._pageInfo_gio4e_1331 {
    font-size: 10px;
    color: #4a5568;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

._pageBtns_gio4e_1347 {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f4f7fb;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px;
}

._pageBtn_gio4e_1347 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

._pageBtn_gio4e_1347:hover:not(:disabled) {
    background: #ffffff;
    color: #1a202c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

._pageBtn_gio4e_1347:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ══════════════════════ ANIMATIONS ══════════════════════ */
@keyframes _fadeIn_gio4e_1 {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 768px) {
    ._toolbar_gio4e_35 {
        flex-wrap: wrap;
        gap: 6px;
    }

    ._toolbarLeft_gio4e_57 {
        width: 100%;
    }

    ._toolbarSearchBtn_gio4e_71 {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    ._searchBox_gio4e_133 {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    ._pagination_gio4e_1201 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._paginationControls_gio4e_1245 {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    ._rowsLabel_gio4e_1257 {
        display: none;
    }
}

@media (max-width: 480px) {
    ._toolbarRight_gio4e_241 {
        flex-wrap: wrap;
    }

    ._gridView_gio4e_1015 {
        grid-template-columns: 1fr;
    }
}
/* Reduce ONLY table body text */
._tbody_gio4e_663 td {
  font-size: 10px;
}

._tdCheck_gio4e_727,
._tdActions_gio4e_755 {
  font-size: 10px;
}
/* ── Company Name Cell ── */
._companyName_gio4e_1559 {
    font-size: 11px;
    font-weight: 500;
    color: #1a202c;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}


/* Reduce ONLY table body text */
._tbody_gio4e_663 td {
  font-size: 10px;
}

._tdCheck_gio4e_727,
._tdActions_gio4e_755 {
  font-size: 10px;
}

/* ── Skeleton Cells for Company Name ── */
._skeletonCompany_gio4e_1607 {
    width: 120px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, #edf0f7 25%, #f4f7fb 50%, #edf0f7 75%);
    background-size: 800px 100%;
    animation: _shimmer_gio4e_1 1.4s infinite linear;
}

/* ── Grid Card Company Name ── */
._gridCardName_gio4e_1627 {
    font-size: 12px;
    font-weight: 500;
    color: #1a202c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

/* ── Bulk Selected Row Enhancement ── */
._rowBulkSelected_gio4e_1649 {
    background: #fff2cb !important;
    border-left: 3px solid #ffca40;
}

/* ── Checkbox Hover Enhancement ── */
._checkbox_gio4e_739:hover {
    outline: 1px solid var(--color-primary-lightest);
}/* FilterModal.module.css */

/* ── Overlay ── */
._overlay_pv9we_7 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: _fadeIn_pv9we_1 0.15s ease;
}

@keyframes _fadeIn_pv9we_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal box — fixed right panel ── */
._modal_pv9we_43 {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  z-index: 1050;
  background: #fff;
  animation: _slideIn_pv9we_1 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes _slideIn_pv9we_1 {
  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0);    }
}

/* ── Header ── */
._header_pv9we_89 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--color-primary);
  flex-shrink: 0;
  color: #111827;
}

._headerLeft_pv9we_109 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}

._headerTitle_pv9we_123 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

._closeBtn_pv9we_137 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

._closeBtn_pv9we_137:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* ── Body ── */
._body_pv9we_177 {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._body_pv9we_177::-webkit-scrollbar { width: 4px; }
._body_pv9we_177::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

/* ── Field group ── */
._fieldGroup_pv9we_203 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._fieldLabel_pv9we_215 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* ── Text / Date inputs ── */
._input_pv9we_231 {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  font-size: 12px;
  color: #111827;
  background: #ffffff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

._input_pv9we_231::placeholder { color: #9ca3af; }
._input_pv9we_231:hover        { border-color: #d1d5db; }
._input_pv9we_231:focus        { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); }

/* ── Pills (for select type) ── */
._pillsWrap_pv9we_271 {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
}

._pill_pv9we_271 {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

._pill_pv9we_271:hover         { border-color: #f59e0b; color: #f59e0b; }
._pillActive_pv9we_315         { background: #f59e0b; border-color: #f59e0b; color: #ffffff; font-weight: 600; }
._pillActive_pv9we_315:hover   { background: #d97706; border-color: #d97706; color: #ffffff; }

/* ── Footer ── */
._footer_pv9we_323 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}

._clearBtn_pv9we_341 {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 9px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

._clearBtn_pv9we_341:hover:not(:disabled) { border-color: #d1d5db; background: #f9fafb; }
._clearBtn_pv9we_341:disabled              { opacity: 0.4; cursor: not-allowed; }

._applyBtn_pv9we_373 {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  border: none;
  background: #f59e0b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

._applyBtn_pv9we_373:hover  { background: #d97706; }
._applyBtn_pv9we_373:active { transform: scale(0.98); }/* ═════════════════════════════════════════════════════════════
   delete-confirm-modal.module.css — CSS Modules version
   Import as: import style from "./delete-confirm-modal.module.css"
═════════════════════════════════════════════════════════════ */

._backdrop_1hd7m_11 {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: _backdropIn_1hd7m_1 0.18s ease;
}

@keyframes _backdropIn_1hd7m_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

._modal_1hd7m_57 {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 8px 16px rgba(15, 23, 42, 0.10);
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: _modalIn_1hd7m_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._modalBulk_1hd7m_91 {
    max-width: 460px;
}

@keyframes _modalIn_1hd7m_1 {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

._closeBtn_1hd7m_123 {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

._closeBtn_1hd7m_123:hover {
    background: #e2e8f0;
    color: #1e293b;
}

._iconWrap_1hd7m_167 {
    display: flex;
    justify-content: center;
}

._iconRing_1hd7m_177 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._iconRingSingle_1hd7m_197 {
    background: #fee2e2;
    color: #dc2626;
    box-shadow: 0 0 0 8px #fee2e240;
}

._iconRingBulk_1hd7m_209 {
    background: #fff1f2;
    color: #be123c;
    box-shadow: 0 0 0 8px #ffe4e640;
}

._title_1hd7m_221 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

._subtitle_1hd7m_239 {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* ── Single: info card ── */
._infoCard_1hd7m_257 {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

._infoRow_1hd7m_277 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

._infoIcon_1hd7m_291 {
    color: #94a3b8;
    display: flex;
    align-items: center;
    width: 14px;
    flex-shrink: 0;
}

._infoLabel_1hd7m_307 {
    color: #64748b;
    font-weight: 500;
    width: 58px;
    flex-shrink: 0;
}

._infoValue_1hd7m_321 {
    color: #1e293b;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bulk: ID pills ── */
._idsWrap_1hd7m_341 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._idsLabel_1hd7m_353 {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

._idsPills_1hd7m_371 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

._idPill_1hd7m_383 {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    color: #dc2626;
}

._idMore_1hd7m_409 {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

/* ── Bulk: type-to-confirm input ── */
._confirmInputWrap_1hd7m_423 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._confirmLabel_1hd7m_435 {
    font-size: 11px;
    color: #475569;
}

._confirmLabel_1hd7m_435 strong {
    color: #dc2626;
    font-weight: 700;
    letter-spacing: 0.05em;
}

._confirmInput_1hd7m_423 {
    height: 36px;
    padding: 0 11px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: 0.08em;
}

._confirmInput_1hd7m_423:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15);
}

._confirmInputError_1hd7m_493 {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
}

._confirmInputOk_1hd7m_503 {
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.13) !important;
}

/* ── Error banner ── */
._errorBanner_1hd7m_515 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #dc2626;
    font-weight: 500;
}

/* ── Warning banner ── */
._warningBanner_1hd7m_543 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 500;
}

._warningBanner_1hd7m_543 svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

._errorBanner_1hd7m_515 svg {
    flex-shrink: 0;
    color: #dc2626;
}

/* ── Actions ── */
._actions_1hd7m_591 {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

._btnCancel_1hd7m_603,
._btnDelete_1hd7m_605 {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.14s, box-shadow 0.14s, opacity 0.14s;
}

._btnCancel_1hd7m_603 {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

._btnCancel_1hd7m_603:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

._btnCancel_1hd7m_603:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._btnDelete_1hd7m_605 {
    background: #dc2626;
    color: #ffffff;
}

._btnDelete_1hd7m_605:hover:not(:disabled) {
    background: #b91c1c;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

._btnDelete_1hd7m_605:disabled {
    background: #fca5a5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Spinner ── */
._spinner_1hd7m_701 {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: _spin_1hd7m_701 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes _spin_1hd7m_701 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    ._modal_1hd7m_57 {
        padding: 22px 16px 18px;
        border-radius: 10px;
    }

    ._actions_1hd7m_591 {
        flex-direction: column;
    }
}/* ═════════════════════════════════════════════════════════════
   bulk-import-modal.module.css — Bulk Import Modal
   Matching the beautiful DeleteConfirmModal styling
═════════════════════════════════════════════════════════════ */

._backdrop_862bh_11 {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: _backdropIn_862bh_1 0.18s ease;
}

@keyframes _backdropIn_862bh_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

._modal_862bh_57 {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 8px 16px rgba(15, 23, 42, 0.10);
    width: 100%;
    max-width: 460px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: _modalIn_862bh_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes _modalIn_862bh_1 {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

._closeBtn_862bh_115 {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

._closeBtn_862bh_115:hover {
    background: #e2e8f0;
    color: #1e293b;
}

._iconWrap_862bh_159 {
    display: flex;
    justify-content: center;
}

._iconRing_862bh_169 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: var(--shadow-primary-lg);
}

._iconRingSuccess_862bh_195 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.15);
}

._title_862bh_221 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

._subtitle_862bh_239 {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* Upload Area */
._uploadArea_862bh_257 {
    margin: 8px 0;
}

._uploadPlaceholder_862bh_265 {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s ease;
    background: #faf9f6;
    cursor: pointer;
}

._uploadPlaceholder_862bh_265:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lightest);
}

._uploadIcon_862bh_295 {
    color: #f59e0b;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

._uploadTitle_862bh_309 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 8px 0 6px 0;
}

._uploadText_862bh_323 {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

._uploadLimit_862bh_335 {
    font-size: 11px;
    color: #94a3b8;
    margin: 6px 0 16px 0;
}

._downloadTemplateBtn_862bh_347 {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    color: #f59e0b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

._downloadTemplateBtn_862bh_347:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

._selectFileBtn_862bh_387 {
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

._selectFileBtn_862bh_387:hover {
    background: linear-gradient(135deg, #eab308, #d97706);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Selected File Display */
._selectedFile_862bh_431 {
    border: 1px solid var(--color-primary-lighter);
    border-radius: 9px;
    padding: 12px;
    background: var(--color-primary-lightest);
}

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

._fileIcon_862bh_457 {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

._fileDetails_862bh_479 {
    flex: 1;
}

._fileName_862bh_487 {
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
    margin-bottom: 2px;
    word-break: break-all;
}

._fileSize_862bh_503 {
    font-size: 11px;
    color: #64748b;
}

._removeFileBtn_862bh_513 {
    background: #fee2e2;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #dc2626;
    transition: all 0.2s ease;
}

._removeFileBtn_862bh_513:hover:not(:disabled) {
    background: #fecaca;
    transform: scale(1.05);
}

._removeFileBtn_862bh_513:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error Banner */
._errorBanner_862bh_563 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #dc2626;
    font-weight: 500;
}

._errorBanner_862bh_563 svg {
    flex-shrink: 0;
    color: #dc2626;
}

/* Warning Banner */
._warningBanner_862bh_601 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #d97706;
    font-weight: 500;
}

._warningBanner_862bh_601 svg {
    flex-shrink: 0;
    color: #f59e0b;
}

/* Success Banner */
._successBanner_862bh_639 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #16a34a;
    font-weight: 500;
}

._successBanner_862bh_639 svg {
    flex-shrink: 0;
    color: #22c55e;
}

/* Actions */
._actions_862bh_677 {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

._btnCancel_862bh_689,
._btnImport_862bh_691 {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.14s, box-shadow 0.14s, opacity 0.14s;
}

._btnCancel_862bh_689 {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    text-decoration: none;
}

._btnCancel_862bh_689:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

._btnCancel_862bh_689:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._btnImport_862bh_691 {
    background: var(--gradient-primary);
    color: #ffffff;
}

._btnImport_862bh_691:hover:not(:disabled) {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-md);
}

._btnImport_862bh_691:disabled {
    background: var(--color-primary-lighter);
    cursor: not-allowed;
    box-shadow: none;
}

/* Spinner */
._spinner_862bh_789 {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: _spin_862bh_789 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes _spin_862bh_789 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 480px) {
    ._modal_862bh_57 {
        padding: 22px 16px 18px;
        border-radius: 10px;
        max-width: calc(100% - 32px);
    }

    ._actions_862bh_677 {
        flex-direction: column;
    }

    ._fileInfo_862bh_445 {
        flex-direction: column;
        text-align: center;
    }

    ._uploadPlaceholder_862bh_265 {
        padding: 20px 16px;
    }
}

._removeFileBtn_862bh_513 {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: auto;
}

._removeFileBtn_862bh_513:hover {
    background: #fee2e2;
    color: #ef4444;
}/* ═════════════════════════════════════════════════════════════
   StatusUpdateModal.module.css — Status Update Modal
   Matching the beautiful DeleteConfirmModal styling
═════════════════════════════════════════════════════════════ */

._backdrop_14xi8_11 {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: _backdropIn_14xi8_1 0.18s ease;
}

@keyframes _backdropIn_14xi8_1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

._modal_14xi8_55 {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 8px 16px rgba(15, 23, 42, 0.10);
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: _modalIn_14xi8_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._modalBulk_14xi8_89 {
    max-width: 460px;
}

@keyframes _modalIn_14xi8_1 {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

._closeBtn_14xi8_119 {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

._closeBtn_14xi8_119:hover {
    background: #e2e8f0;
    color: #1e293b;
}

._iconWrap_14xi8_163 {
    display: flex;
    justify-content: center;
}

._iconRing_14xi8_173 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

._title_14xi8_195 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

._subtitle_14xi8_213 {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* Status Selection */
._statusSelectWrap_14xi8_231 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._statusLabel_14xi8_243 {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

._statusOptions_14xi8_261 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

._statusOption_14xi8_261 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 500;
}

._statusOption_14xi8_261:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

._statusOption_14xi8_261:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

._statusOptionActive_14xi8_325 {
    /* border-width: 2px; */
}

._statusDot_14xi8_333 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

._statusLabelText_14xi8_347 {
    font-weight: 500;
}

/* Type to confirm input */
._confirmInputWrap_14xi8_357 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._confirmLabel_14xi8_369 {
    font-size: 11px;
    color: #475569;
}

._confirmLabel_14xi8_369 strong {
    color: #d97706;
    font-weight: 700;
    letter-spacing: 0.05em;
}

._confirmInput_14xi8_357 {
    height: 36px;
    padding: 0 11px;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    letter-spacing: 0.08em;
}

._confirmInput_14xi8_357:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

._confirmInputError_14xi8_427 {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
}

._confirmInputOk_14xi8_437 {
    border-color: #4ade80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.13) !important;
}

/* Error Banner */
._errorBanner_14xi8_449 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #dc2626;
    font-weight: 500;
}

._errorBanner_14xi8_449 svg {
    flex-shrink: 0;
    color: #dc2626;
}

/* Warning Banner */
._warningBanner_14xi8_487 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 11px;
    color: #d97706;
    font-weight: 500;
}

._warningBanner_14xi8_487 svg {
    flex-shrink: 0;
    color: #f59e0b;
}

/* Actions */
._actions_14xi8_525 {
    display: flex;
    gap: 8px;
    padding-top: 2px;
}

._btnCancel_14xi8_537,
._btnUpdate_14xi8_539 {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.14s ease;
}

._btnCancel_14xi8_537 {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

._btnCancel_14xi8_537:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

._btnCancel_14xi8_537:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._btnUpdate_14xi8_539 {
    color: #ffffff;
}

._btnUpdate_14xi8_539:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

._btnUpdate_14xi8_539:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
._spinner_14xi8_633 {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: _spin_14xi8_633 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes _spin_14xi8_633 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 480px) {
    ._modal_14xi8_55 {
        padding: 22px 16px 18px;
        border-radius: 10px;
        max-width: calc(100% - 32px);
    }

    ._actions_14xi8_525 {
        flex-direction: column;
    }

    ._statusOptions_14xi8_261 {
        flex-direction: column;
    }

    ._statusOption_14xi8_261 {
        justify-content: center;
    }
}/* ═════════════════════════════════════════════════════════════
   AssignDesignationModal.module.css — Assign Designation Modal
   Matching the beautiful DeleteConfirmModal styling
═════════════════════════════════════════════════════════════ */

._backdrop_iclwh_11 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: _backdropIn_iclwh_1 0.18s ease;
}

@keyframes _backdropIn_iclwh_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._modal_iclwh_55 {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 20px 50px rgba(15, 23, 42, 0.22),
    0 8px 16px rgba(15, 23, 42, 0.1);
  width: 100%;
  max-width: 420px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: _modalIn_iclwh_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._modalBulk_iclwh_89 {
  max-width: 460px;
}

@keyframes _modalIn_iclwh_1 {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

._closeBtn_iclwh_119 {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s;
}

._closeBtn_iclwh_119:hover {
  background: #e2e8f0;
  color: #1e293b;
}

._iconWrap_iclwh_167 {
  display: flex;
  justify-content: center;
}

._iconRing_iclwh_177 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: var(--shadow-primary-md);
}

._title_iclwh_203 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  text-align: center;
  line-height: 1.3;
}

._subtitle_iclwh_221 {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

/* Select Designation */
._selectWrap_iclwh_239 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._selectLabel_iclwh_251 {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

._select_iclwh_239 {
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

._select_iclwh_239:hover:not(:disabled) {
  border-color: #cbd5e1;
}

._select_iclwh_239:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._select_iclwh_239:disabled {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.7;
}

._selectFilled_iclwh_325 {
  border-color: var(--color-primary);
  background: var(--color-primary-warm);
}

/* Info Card */
._infoCard_iclwh_337 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._infoRow_iclwh_357 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

._infoIcon_iclwh_371 {
  color: var(--color-primary);
  display: flex;
  align-items: center;
  width: 14px;
  flex-shrink: 0;
}

._infoLabel_iclwh_387 {
  color: #64748b;
  font-weight: 500;
  width: 70px;
  flex-shrink: 0;
}

._infoValue_iclwh_401 {
  color: #1e293b;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Type to confirm input */
._confirmInputWrap_iclwh_421 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._confirmLabel_iclwh_433 {
  font-size: 11px;
  color: #475569;
}

._confirmLabel_iclwh_433 strong {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}

._confirmInput_iclwh_421 {
  height: 36px;
  padding: 0 11px;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  letter-spacing: 0.08em;
}

._confirmInput_iclwh_421:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._confirmInputError_iclwh_495 {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
}

._confirmInputOk_iclwh_505 {
  border-color: #4ade80 !important;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.13) !important;
}

/* Error Banner */
._errorBanner_iclwh_517 {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 11px;
  color: #dc2626;
  font-weight: 500;
}

._errorBanner_iclwh_517 svg {
  flex-shrink: 0;
  color: #dc2626;
}

/* Warning Banner */
._warningBanner_iclwh_555 {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 500;
}

._warningBanner_iclwh_555 svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Actions */
._actions_iclwh_593 {
  display: flex;
  gap: 8px;
  padding-top: 2px;
}

._btnCancel_iclwh_605,
._btnAssign_iclwh_607 {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.14s ease;
}

._btnCancel_iclwh_605 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

._btnCancel_iclwh_605:hover:not(:disabled) {
  background: #e2e8f0;
  color: #1e293b;
}

._btnCancel_iclwh_605:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnAssign_iclwh_607 {
    background: var(--gradient-primary);
    color: #fff;
}

._btnAssign_iclwh_607:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary-md);
}

._btnAssign_iclwh_607:disabled {
  background: var(--color-primary-lighter);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner */
._spinner_iclwh_707 {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_iclwh_707 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes _spin_iclwh_707 {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 480px) {
  ._modal_iclwh_55 {
    padding: 22px 16px 18px;
    border-radius: 10px;
    max-width: calc(100% - 32px);
  }

  ._actions_iclwh_593 {
    flex-direction: column;
  }

  ._infoRow_iclwh_357 {
    flex-wrap: wrap;
  }

  ._infoLabel_iclwh_387 {
    width: auto;
  }
}
/* ═════════════════════════════════════════════════════════════
   AssignDepartmentModal.module.css — Compact Version
   Fixed modal size issue with checkbox items
═════════════════════════════════════════════════════════════ */

._backdrop_bevla_11 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: _backdropIn_bevla_1 0.18s ease;
}

@keyframes _backdropIn_bevla_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._modal_bevla_55 {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 20px 50px rgba(15, 23, 42, 0.22),
    0 8px 16px rgba(15, 23, 42, 0.1);
  width: 100%;
  max-width: 460px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: _modalIn_bevla_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

._modalBulk_bevla_89 {
  max-width: 500px;
}

@keyframes _modalIn_bevla_1 {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

._closeBtn_bevla_119 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s;
}

._closeBtn_bevla_119:hover {
  background: #e2e8f0;
  color: #1e293b;
}

._iconWrap_bevla_167 {
  display: flex;
  justify-content: center;
}

._iconRing_bevla_177 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: var(--shadow-primary-md);
}

._iconRing_bevla_177 svg {
  width: 18px;
  height: 18px;
}

._title_bevla_213 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: -4px 0 0 0;
  text-align: center;
  line-height: 1.3;
}

._subtitle_bevla_231 {
  font-size: 11px;
  color: #64748b;
  margin: -4px 0 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Search Input */
._searchWrap_bevla_249 {
  margin-top: 0;
}

._searchInput_bevla_257 {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
}

._searchInput_bevla_257:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._searchInput_bevla_257:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}

/* List Header */
._listHeader_bevla_303 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}

._listHeaderTitle_bevla_321 {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._listActions_bevla_337 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._selectAllBtn_bevla_349,
._clearAllBtn_bevla_351 {
  background: none;
  border: none;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

._selectAllBtn_bevla_349 {
  color: var(--color-primary);
}

._selectAllBtn_bevla_349:hover:not(:disabled) {
  background: var(--color-primary-lightest);
}

._clearAllBtn_bevla_351 {
  color: #64748b;
}

._clearAllBtn_bevla_351:hover:not(:disabled) {
  background: #f1f5f9;
}

._selectAllBtn_bevla_349:disabled,
._clearAllBtn_bevla_351:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._divider_bevla_417 {
  color: #cbd5e1;
  font-size: 10px;
}

/* Department List */
._list_bevla_303 {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

._emptyState_bevla_445 {
  padding: 24px 16px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
}

._item_bevla_459 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

._item_bevla_459:last-child {
  border-bottom: none;
}

._item_bevla_459:hover {
  background: #f8fafc;
}

._itemSelected_bevla_495 {
  background: var(--color-primary-lightest);
}

._checkbox_bevla_503 {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

._checkbox_bevla_503:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

._itemContent_bevla_529 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}

._itemName_bevla_547 {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._itemParent_bevla_565 {
  font-size: 9px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

._checkIcon_bevla_585 {
  color: var(--color-primary);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Selected Count */
._selectedCount_bevla_601 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: #f0fdf4;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #16a34a;
}

._selectedCount_bevla_601 svg {
  width: 11px;
  height: 11px;
  color: #22c55e;
}

/* Type to confirm input */
._confirmInputWrap_bevla_639 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._confirmLabel_bevla_651 {
  font-size: 10px;
  color: #475569;
}

._confirmLabel_bevla_651 strong {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}

._confirmInput_bevla_639 {
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  letter-spacing: 0.08em;
}

._confirmInput_bevla_639:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._confirmInputError_bevla_713 {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
}

._confirmInputOk_bevla_723 {
  border-color: #4ade80 !important;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.13) !important;
}

/* Error Banner */
._errorBanner_bevla_735 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: #dc2626;
  font-weight: 500;
}

._errorBanner_bevla_735 svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  color: #dc2626;
}

/* Warning Banner */
._warningBanner_bevla_777 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 500;
}

._warningBanner_bevla_777 svg {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  color: var(--color-primary);
}

/* Actions */
._actions_bevla_819 {
  display: flex;
  gap: 8px;
  padding-top: 0;
}

._btnCancel_bevla_831,
._btnAssign_bevla_833 {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.14s ease;
}

._btnCancel_bevla_831 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

._btnCancel_bevla_831:hover:not(:disabled) {
  background: #e2e8f0;
  color: #1e293b;
}

._btnCancel_bevla_831:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnAssign_bevla_833 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnAssign_bevla_833:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-1px);
}

._btnAssign_bevla_833:disabled {
  background: var(--color-primary-lighter);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner */
._spinner_bevla_933 {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: _spin_bevla_933 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes _spin_bevla_933 {
  to {
    transform: rotate(360deg);
  }
}

/* Scrollbar Styling */
._list_bevla_303::-webkit-scrollbar {
  width: 5px;
}

._list_bevla_303::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

._list_bevla_303::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

._list_bevla_303::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Responsive */
@media (max-width: 480px) {
  ._modal_bevla_55 {
    padding: 16px;
    border-radius: 10px;
    max-width: calc(100% - 24px);
    gap: 8px;
  }

  ._actions_bevla_819 {
    flex-direction: column;
    gap: 6px;
  }

  ._itemContent_bevla_529 {
    flex-wrap: wrap;
    gap: 4px;
  }

  ._itemName_bevla_547 {
    white-space: normal;
    word-break: break-word;
  }

  ._listHeader_bevla_303 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  ._iconRing_bevla_177 {
    width: 40px;
    height: 40px;
  }

  ._title_bevla_213 {
    font-size: 15px;
  }

  ._subtitle_bevla_231 {
    font-size: 10px;
  }
}
/* ================================================================
   QuickView.module.css
   SHARED off-canvas quick-view styles — reuse across ALL modules
   ================================================================ */

/* ── Overlay backdrop ─────────────────────────────────────────── */
.qvOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
  z-index: 1040;
  animation: qvFadeIn 0.2s ease;
}

/* ── Panel ────────────────────────────────────────────────────── */
.qvPanel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 430px;
  max-width: 100vw;
  background: #ffffff;
  box-shadow: -6px 0 36px rgba(15, 23, 42, 0.1);
  z-index: 20001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qvSlideIn 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Header ───────────────────────────────────────────────────── */
.qvHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  background: #fff;
  gap: 10px;
  min-height: 0;
}

.qvHeaderLeft {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

/* ── Avatar ───────────────────────────────────────────────────── */
.qvAvatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  flex-shrink: 0;
}

.qvAvatarFallback {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* ── Header text ─────────────────────────────────────────────── */
.qvHeaderInfo {
  min-width: 0;
  flex: 1;
}

.qvHeaderTitle {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.qvHeaderMeta {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.qvHeaderMetaDot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Header action buttons ───────────────────────────────────── */
.qvHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qvBtnFullView {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1.5px solid #6366f1;
  background: transparent;
  color: #6366f1;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
  line-height: 1;
}

.qvBtnFullView:hover {
  background: #6366f1;
  color: #fff;
}

.qvBtnClose {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.qvBtnClose:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

/* ── Scrollable body ─────────────────────────────────────────── */
.qvBody {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 100px 18px;
  /* extra bottom padding so last card clears the Ask AI button */
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
  min-height: 0;
  /* critical — lets flex child shrink and scroll properly */
}

.qvBody::-webkit-scrollbar {
  width: 4px;
}

.qvBody::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

/* ── Section card ────────────────────────────────────────────── */
.qvCard {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  overflow: visible;
  /* was: hidden — was clipping card content */
  flex-shrink: 0;
  /* prevent cards from collapsing */
  width: 100%;
}

.qvCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 10px 10px 0 0;
  gap: 8px;
  flex-shrink: 0;
}

.qvCardTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
}

.qvCardTitleIcon {
  color: #6366f1;
  flex-shrink: 0;
}

.qvCardBody {
  padding: 13px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

/* ── Status / type badges ────────────────────────────────────── */
.qvBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.qvBadge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* status variants */
.qvBadgeGreen {
  background: #dcfce7;
  color: #16a34a;
}

.qvBadgeRed {
  background: #fee2e2;
  color: #dc2626;
}

.qvBadgeYellow {
  background: #fef3c7;
  color: #d97706;
}

.qvBadgeBlue {
  background: #dbeafe;
  color: #2563eb;
}

.qvBadgeViolet {
  background: #ede9fe;
  color: #7c3aed;
}

.qvBadgeGrey {
  background: #f1f5f9;
  color: #64748b;
}

.qvBadgeCyan {
  background: #cffafe;
  color: #0e7490;
}

.qvBadgeOrange {
  background: #ffedd5;
  color: #c2410c;
}

/* badge without dot (plain tag style) */
.qvTag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Field grid ──────────────────────────────────────────────── */
.qvGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 14px;
  width: 100%;
}

.qvGrid1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  width: 100%;
}

.qvField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.qvFieldLabel {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.qvFieldValue {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  word-break: break-word;
  line-height: 1.4;
  min-height: 18px;
  /* ensures value row always has visible height */
}

.qvFieldMuted {
  font-size: 13px;
  color: #cbd5e1;
  font-style: italic;
  min-height: 18px;
  line-height: 1.4;
}

.qvFieldEmail {
  font-size: 12px;
  color: #6366f1;
  font-weight: 500;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eef2ff;
  padding: 4px 9px;
  border-radius: 6px;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Attendance ring ─────────────────────────────────────────── */
.qvRingWrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.qvRingContainer {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.qvRingContainer svg {
  transform: rotate(-90deg);
}

.qvRingText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a;
}

.qvRingBg {
  fill: none;
  stroke: #f1f5f9;
  stroke-width: 5;
}

.qvRingFill {
  fill: none;
  stroke: #6366f1;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.qvRingStats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.qvRingRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
}

.qvRingDot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Stat blocks (3-col) ─────────────────────────────────────── */
.qvStatRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
}

.qvStatBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  border-radius: 8px;
  gap: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  min-height: 60px;
}

.qvStatBoxGreen {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.qvStatBoxRed {
  background: #fef2f2;
  border-color: #fecaca;
}

.qvStatBoxYellow {
  background: #fffbeb;
  border-color: #fde68a;
}

.qvStatBoxBlue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.qvStatBoxViolet {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.qvStatValue {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}

.qvStatValueGreen {
  color: #16a34a;
}

.qvStatValueRed {
  color: #dc2626;
}

.qvStatValueYellow {
  color: #d97706;
}

.qvStatValueBlue {
  color: #2563eb;
}

.qvStatValueViolet {
  color: #7c3aed;
}

.qvStatLabel {
  font-size: 10px;
  color: #64748b;
  text-align: center;
  font-weight: 500;
  line-height: 1.3;
}

/* ── Divider ─────────────────────────────────────────────────── */
.qvDivider {
  border: none;
  border-top: 1px solid #f1f5f9;
  margin: 10px 0;
}

/* ── Footer ──────────────────────────────────────────────────── */
.qvFooter {
  padding: 10px 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  background: #fafafa;
  gap: 8px;
  min-height: 0;
}

.qvFooterLink {
  font-size: 11.5px;
  color: #6366f1;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.qvFooterLink:hover {
  text-decoration: underline;
}

/* ── Skeleton shimmer ────────────────────────────────────────── */
.qvSkeleton {
  background: linear-gradient(90deg,
      #f1f5f9 25%,
      #e8edf3 50%,
      #f1f5f9 75%);
  background-size: 200% 100%;
  animation: qvShimmer 1.4s infinite;
  border-radius: 5px;
  flex-shrink: 0;
}

.qvSkeletonCircle {
  border-radius: 50% !important;
}

/* ── Error state ─────────────────────────────────────────────── */
.qvError {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  font-size: 13px;
  color: #dc2626;
  margin: 16px;
}

/* ── Ask AI floating button (rendered outside panel, must sit above) ── */
.qvAskAiBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  /* above qvPanel (1050) and qvOverlay (1040) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.38);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  white-space: nowrap;
}

.qvAskAiBtn:hover {
  background: #d97706;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.qvAskAiBtn:active {
  transform: translateY(0);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes qvFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes qvSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0.4;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes qvShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .qvPanel {
    width: 100vw;
  }

  .qvHeaderTitle {
    max-width: 150px;
  }

  .qvAskAiBtn {
    bottom: 16px;
    right: 16px;
    padding: 9px 14px;
    font-size: 12px;
  }
}/* ════════════════════════════════════════════════════════════
   AllEmployeeDashboard.module.css
   Light (default) + Dark mode via .dark class
════════════════════════════════════════════════════════════ */

/* ── CSS Variables: Light ── */
._dashboard_6185b_13 {
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --header-bg: #ffffff;
    --header-border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --grid-line: #e2e8f0;
    --ring-bg: #e2e8f0;
    --back-btn-bg: #f1f5f9;
    --back-btn-border: #e2e8f0;
    --back-btn-text: #475569;
    --badge-bg: #f1f5f9;
    --badge-text: #64748b;
    --hbar-track: #f1f5f9;
    --type-bar-bg: #f1f5f9;
    --date-chip-bg: #f8fafc;
    --date-chip-border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.10);
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    min-height: 100vh;
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* ── CSS Variables: Dark ── */
._dark_6185b_5 {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --card-border: #334155;
    --header-bg: #1e293b;
    --header-border: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --grid-line: #1e293b;
    --ring-bg: #334155;
    --back-btn-bg: #334155;
    --back-btn-border: #475569;
    --back-btn-text: #94a3b8;
    --badge-bg: #334155;
    --badge-text: #94a3b8;
    --hbar-track: #334155;
    --type-bar-bg: #334155;
    --date-chip-bg: #334155;
    --date-chip-border: #475569;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ── Header ── */
._header_6185b_123 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease;
}

._headerLeft_6185b_149 {
    display: flex;
    align-items: center;
    gap: 14px;
}

._headerRight_6185b_161 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._backBtn_6185b_173 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--back-btn-bg);
    border: 1px solid var(--back-btn-border);
    border-radius: 8px;
    color: var(--back-btn-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
}

._backBtn_6185b_173:hover {
    background: var(--card-border);
    color: var(--text-primary);
}

._dashTitle_6185b_213 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

._dashSub_6185b_229 {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

._dateChip_6185b_241 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--date-chip-bg);
    border: 1px solid var(--date-chip-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

._themeToggle_6185b_265 {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--back-btn-bg);
    border: 1px solid var(--back-btn-border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
}

._themeToggle_6185b_265:hover {
    background: var(--card-border);
    color: var(--text-primary);
}

/* ── Body ── */
._body_6185b_305 {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    background: #efefef;
}

/* ── Stat Cards ── */
._statGrid_6185b_327 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    background-color: #eff0f2;
}

@media (max-width: 1400px) {
    ._statGrid_6185b_327 {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (max-width: 900px) {
    ._statGrid_6185b_327 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    ._statGrid_6185b_327 {
        grid-template-columns: repeat(2, 1fr);
    }
}

._statCard_6185b_377 {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: default;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

._statCard_6185b_377:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

._statCard_6185b_377::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, #3b82f6);
    border-radius: 14px 14px 0 0;
}

._statIcon_6185b_439 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
    flex-shrink: 0;
}

._statBody_6185b_463 {
    flex: 1;
    min-width: 0;
}

._statValue_6185b_473 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
}

._statLabel_6185b_489 {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._statBorder_6185b_507 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--card-accent, #3b82f6) 0%, transparent 100%);
    opacity: 0.3;
}

/* ── Card Base ── */
._card_6185b_529 {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

._card_6185b_529:hover {
    box-shadow: var(--shadow-hover);
}

._cardHead_6185b_561 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

._cardTitle_6185b_573 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.1px;
}

._cardBadge_6185b_587 {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-weight: 600;
}

._emptyState_6185b_605 {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 20px 0;
}

/* ── Row Layouts ── */
._row3_6185b_621 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

._row2_6185b_633 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 1100px) {
    ._row3_6185b_621 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    ._row3_6185b_621,
    ._row2_6185b_633 {
        grid-template-columns: 1fr;
    }
}

/* ── Donut Chart ── */
._donutWrap_6185b_675 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._donutCenter_6185b_691 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

._donutTotal_6185b_709 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

._donutLabel_6185b_723 {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

._donutSection_6185b_735 {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

._donutLegend_6185b_749 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

._legendRow_6185b_765 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

._legendDot_6185b_779 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

._legendName_6185b_793 {
    color: var(--text-secondary);
    flex: 1;
}

._legendVal_6185b_803 {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 18px;
    text-align: right;
}

._legendPct_6185b_817 {
    color: var(--text-muted);
    font-size: 11px;
}

/* ── H-Bar Chart ── */
._hbarChart_6185b_829 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._hbarRow_6185b_841 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._hbarLabel_6185b_853 {
    font-size: 11px;
    color: var(--text-secondary);
    width: 72px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._hbarTrack_6185b_873 {
    flex: 1;
    height: 10px;
    background: var(--hbar-track);
    border-radius: 99px;
    overflow: hidden;
}

._hbarFill_6185b_889 {
    height: 100%;
    border-radius: 99px;
    width: 0;
    animation: _growBar_6185b_1 0.8s ease forwards;
}

@keyframes _growBar_6185b_1 {
    from {
        width: 0;
    }

    to {
        width: var(--target-width, 100%);
    }
}

._hbarValue_6185b_923 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    width: 24px;
    text-align: right;
}

/* ── Bar Chart (vertical) ── */
._barChart_6185b_941 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

._barTrack_6185b_955 {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    height: 80px;
    gap: 6px;
}

._barItem_6185b_971 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

._barItem_6185b_971:hover ._barTooltip_6185b_991 {
    opacity: 1;
    transform: translateY(0);
}

._barTooltip_6185b_991 {
    position: absolute;
    top: -22px;
    background: var(--text-primary);
    color: var(--card-bg);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateY(4px);
    white-space: nowrap;
}

._barFill_6185b_1033 {
    width: 100%;
    border-radius: 5px 5px 0 0;
    height: 0;
    animation: _growUp_6185b_1 0.9s ease forwards;
    max-height: 100%;
}

@keyframes _growUp_6185b_1 {
    from {
        height: 0;
    }

    to {
        height: var(--h, 100%);
    }
}

._barLabels_6185b_1069 {
    display: flex;
    justify-content: space-evenly;
    gap: 6px;
}

._barLabel_6185b_1069 {
    flex: 1;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Line Chart ── */
._lineWrap_6185b_1103 {
    flex: 1;
}

._lineSvg_6185b_1111 {
    width: 100%;
    height: auto;
}

._lineStats_6185b_1121 {
    display: flex;
    gap: 20px;
}

._lineStat_6185b_1121 {
    display: flex;
    flex-direction: column;
}

._lineStatVal_6185b_1141 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

._lineStatLabel_6185b_1153 {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ── Employment Type List ── */
._typeList_6185b_1167 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._typeRow_6185b_1179 {
    display: flex;
    align-items: center;
    gap: 9px;
}

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

._typeName_6185b_1205 {
    font-size: 12px;
    color: var(--text-secondary);
    width: 90px;
    flex-shrink: 0;
}

._typeBar_6185b_1219 {
    flex: 1;
    height: 7px;
    background: var(--type-bar-bg);
    border-radius: 99px;
    overflow: hidden;
}

._typeBarFill_6185b_1235 {
    height: 100%;
    border-radius: 99px;
    transition: width 1s ease;
}

._typeCount_6185b_1247 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    width: 22px;
    text-align: right;
}

/* ── Attendance ── */
._attendanceCenter_6185b_1265 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

._bigRing_6185b_1279 {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

._bigRingCenter_6185b_1293 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

._bigPct_6185b_1311 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

._bigPctLabel_6185b_1325 {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

._attendanceBands_6185b_1337 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

._band_6185b_1351 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

._band_6185b_1351 strong {
    margin-left: auto;
    color: var(--text-primary);
    font-weight: 700;
}

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

/* ── Top Performers ── */
._perfList_6185b_1395 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._perfRow_6185b_1407 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--card-border);
    transition: background 0.15s ease;
}

._perfRow_6185b_1407:hover {
    background: color-mix(in srgb, var(--card-border) 40%, var(--bg));
}

._perfRank_6185b_1437 {
    font-size: 12px;
    font-weight: 800;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

._perfAvatar_6185b_1453 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

._perfAvatar_6185b_1453 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._perfInfo_6185b_1493 {
    flex: 1;
    min-width: 0;
}

._perfName_6185b_1503 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._perfRole_6185b_1521 {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._perfRingWrap_6185b_1539 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

._perfPct_6185b_1555 {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ── Recent Joiners ── */
._joinerList_6185b_1569 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._joinerCard_6185b_1581 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--bg);
    transition: background 0.15s ease;
}

._joinerCard_6185b_1581:hover {
    background: color-mix(in srgb, var(--card-border) 40%, var(--bg));
}

._joinerAvatar_6185b_1611 {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

._joinerAvatar_6185b_1611 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._joinerInfo_6185b_1651 {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

._joinerName_6185b_1667 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

._joinerMeta_6185b_1679 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._joinerStatus_6185b_1701 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

._statusDot_6185b_1717 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

._statusDot_6185b_1717._active_6185b_1731 {
    background: #22c55e;
}

._statusDot_6185b_1717._inactive_6185b_1739 {
    background: #ef4444;
}

._statusDot_6185b_1717._on_notice_6185b_1747 {
    background: #f59e0b;
}

._joinerCode_6185b_1755 {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--badge-bg);
    padding: 2px 7px;
    border-radius: 5px;
}

/* ── Scrollbar ── */
._dashboard_6185b_13 ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

._dashboard_6185b_13 ::-webkit-scrollbar-track {
    background: transparent;
}

._dashboard_6185b_13 ::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 99px;
}

/* ── Print / accessibility ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Extra small mobile ── */
@media (max-width: 480px) {
    ._header_6185b_123 {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    ._dashTitle_6185b_213 {
        font-size: 15px;
    }

    ._body_6185b_305 {
        padding: 14px 12px;
        gap: 14px;
    }

    ._statCard_6185b_377 {
        padding: 12px;
    }

    ._statValue_6185b_473 {
        font-size: 18px;
    }

    ._card_6185b_529 {
        padding: 14px;
    }
}


._lineSvg_6185b_1111 {
    width: 100%;
    height: auto;
    max-height: 170px;
    background: transparent;
    display: block;
}

._lineWrap_6185b_1103 {
    padding: 8px 4px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

._lineStats_6185b_1121 {
    display: flex;
    justify-content: space-around;
    padding: 8px 0 4px 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 4px;
}

._lineStat_6185b_1121 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

._lineStatVal_6185b_1141 {
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
}

._lineStatLabel_6185b_1153 {
    font-size: 9px;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
    /* text-transform: uppercase; */
    letter-spacing: 0.3px;
}

._monthlyBarChart_6185b_1975 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 140px;
    padding: 0 4px;
    gap: 4px;
}

._monthlyBarItem_6185b_1993 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

._monthlyBarLabel_6185b_2009 {
    font-size: 7px;
    color: var(--text-muted, #94a3b8);
    margin-top: 4px;
    font-weight: 500;
}

._monthlyBarTrack_6185b_2023 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

._monthlyBarFill_6185b_2041 {
    width: 70%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    transition: height 0.6s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

._monthlyBarValue_6185b_2063 {
    position: absolute;
    top: -18px;
    font-size: 9px;
    font-weight: 700;
    color: #f59e0b;
    background: white;
    padding: 0 4px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._perfRingWrap_6185b_1539 {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

._perfPctInside_6185b_2105 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    line-height: 1;
    pointer-events: none;
}/* 
.miniGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.miniGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}


.miniCard {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; 
}

.miniCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}


.miniTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.miniLabel {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniValue {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}


.miniSub {
  font-size: 10px;
  color: #9ca3af;
}


.miniIcon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}



@media (max-width: 1200px) {
  .miniGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (max-width: 992px) {
  .miniGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .miniValue {
    font-size: 18px;
  }
}


@media (max-width: 576px) {
  .miniGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .miniCard {
    padding: 10px;
    border-radius: 10px;
  }

  .miniValue {
    font-size: 16px;
  }

  .miniLabel {
    font-size: 10px;
  }

  .miniSub {
    font-size: 9px;
  }

  .miniIcon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 400px) {
  .miniGrid {
    grid-template-columns: 1fr;
  }
} */

._page_oxfag_253 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_oxfag_253 *,
._page_oxfag_253 *::before,
._page_oxfag_253 *::after {
  box-sizing: border-box;
}

._pageTitle_oxfag_289 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_oxfag_303 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._layoutMain_oxfag_317 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* 
.statsRow {
    display: grid;
    grid-template-columns: 182px 1fr;
    gap: 7px;
}

.heroCard {
    grid-row: 1 / 3;
    background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 108px;
    position: relative;
    overflow: hidden;
}

.sparkline {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.22;
    width: 92px;
    height: 38px;
}

.heroLabel {
    font-size: 10px;
    color: #92400e;
    font-weight: 500;
    margin: 0 0 3px;
}

.heroValue {
    font-size: 32px;
    font-weight: 800;
    color: #92400e;
    margin: 0;
    line-height: 1;
}

.heroGrowth {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 10px;
    font-weight: 600;
}
 */

/* GRID DEFAULT (Desktop) */
._miniGrid_oxfag_3 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

/* .miniCard {
  flex: 0 0 auto;            
  min-width: 100px;         
  scroll-snap-align: start;
} */
/* .heroCard{
  flex: 0 0 auto;            
  min-width: 170px;         
  scroll-snap-align: start;
} */

/* Large screens (laptop) */
@media (max-width: 1400px) {
  ._miniGrid_oxfag_3 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  ._miniGrid_oxfag_3 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small tablet */
@media (max-width: 768px) {
  ._miniGrid_oxfag_3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile → horizontal scroll */
@media (max-width: 576px) {
  ._miniGrid_oxfag_3 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  ._miniGrid_oxfag_3::-webkit-scrollbar {
    height: 6px;
  }

  ._miniGrid_oxfag_3::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
  }

  ._miniCard_oxfag_29 {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* CARD */
._miniCard_oxfag_29 {
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

._miniCard_oxfag_29:hover {
  transform: translateY(-2px);
}
._miniCard1_oxfag_599 {
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  max-width: 450px;
  max-height: 300px;
  overflow: hidden;
}

._miniCard1_oxfag_599:hover {
  transform: translateY(-2px);
}

/* TEXT */
._miniLabel_oxfag_79 {
  font-size: 11px;
  font-weight: 600;
}
._miniLabel1_oxfag_637 {
  font-size: 13px;
  font-weight: 600;
}

._miniValue_oxfag_97 {
  font-size: 18px;
  font-weight: 700;
}

/* OPTIONAL: top section */
._miniTop_oxfag_65 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* OPTIONAL: icon */
._miniIcon_oxfag_123 {
  width: 17px;
  height: 17px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 3px;
}
._toggle-btn_oxfag_693 {
  border: none;
  background: transparent;
  color: var(--color-black);
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}
/* table section  */

._tableSection_oxfag_717 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_oxfag_735 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_oxfag_757 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_oxfag_771 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_oxfag_785 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_oxfag_819 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_oxfag_819:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_oxfag_839 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_oxfag_839:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_oxfag_861 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_oxfag_883 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_oxfag_901 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_oxfag_919 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_oxfag_931,
._filterDate_oxfag_933 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_oxfag_931:focus,
._filterDate_oxfag_933:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_oxfag_981 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_oxfag_981:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_oxfag_1033 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_oxfag_1047 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_oxfag_1047:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_oxfag_1073 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_oxfag_1 0.15s ease;
}

@keyframes _slideIn_oxfag_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_oxfag_1121 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_oxfag_1135 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_oxfag_1165 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_oxfag_1179 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_oxfag_1193 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_oxfag_1193:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_oxfag_1239 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_oxfag_1239:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_oxfag_1259 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_oxfag_1259:hover {
  background: #f1f5f9;
  color: #475569;
}

/* tabs  */

._tabs_oxfag_1309 {
  display: flex;
  gap: 24px;
  border-bottom: 2px solid #e5e7eb;
  padding: 0 8px;
}

/* Base tab */
._tabBtn_oxfag_1325 {
  position: relative;
  padding: 10px 2px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Hover */
._tabBtn_oxfag_1325:hover {
  color: var(--color-primary);
}

/* Active tab */
._activeTab_oxfag_1361 {
  color: var(--color-primary);
  font-weight: 700;
}

/* Underline */
._activeTab_oxfag_1361::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

._badge_oxfag_1395 {
  background: #6b7280;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* Stats Accordion Styles */
._statsAccordion_oxfag_1415 {
  /* margin-bottom: 24px; */
  /* background: white; */
  border-radius: 12px;
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}
._filterWrapper_oxfag_1429 {
  margin-bottom: 8px; /* reduce as needed */
}
._accordionHeader_oxfag_1435 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}

._accordionHeader_oxfag_1435:hover {
  background-color: #f9fafb;
}

._accordionTitle_oxfag_1465 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 15px;
}

._accordionTitle_oxfag_1465 svg {
  color: #f59e0b;
}

._accordionToggle_oxfag_1491 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_oxfag_1491:hover {
  color: #374151;
}

._accordionContent_oxfag_1523 {
  animation: _slideDown_oxfag_1 0.3s ease-out;
}
._accordionContent1_oxfag_1529 {
  padding: 10px;
  animation: _slideDown_oxfag_1 0.3s ease-out;
}
@keyframes _slideDown_oxfag_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._accordionHeader_oxfag_1435 {
    padding: 12px 16px;
  }

  ._accordionContent_oxfag_1523 {
    padding: 10px;
  }
}
._pricingToggle_oxfag_1579 {
  position: relative;
  display: inline-flex;
  background: #e9e5ea;
  border-radius: 40px;
  padding: 5px;
  width: 200px;
}

/* sliding background */
._togglePill_oxfag_1599 {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 47%;
  height: calc(100% - 10px);
  background: var(--gradient-primary);
  border-radius: 40px;
  transition: transform 0.3s ease;
}

/* move state */
._moveRight_oxfag_1623 {
  transform: translateX(100%);
}

._toggleBtn_oxfag_1631 {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  border-radius: 40px;
  z-index: 1;
  color: #262627;
}
/* ══════════════════════════════
   HEADER
══════════════════════════════ */
._modalHeader_oxfag_1657 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}

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

._headerIconBox_oxfag_1687 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-primary-lg);
  color: #ffffff;
}

._headerIconSvg_oxfag_1713 {
  width: 18px;
  height: 18px;
}

._modalHeader_oxfag_1657 h5 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px !important;
  line-height: 1.3;
}

._subText_oxfag_1739 {
  font-size: 11px !important;
  color: #64748b;
  line-height: 1.5;
  margin: 0 !important;
}

._closeIcon_oxfag_1753 {
  width: 20px;
  height: 20px;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition:
    color 0.13s,
    background 0.13s;
  padding: 2px;
}

._closeIcon_oxfag_1753:hover {
  color: #1e293b;
  background: #f1f5f9;
}

/* ══════════════════════════════
   BODY / CONTENT
══════════════════════════════ */
._modalContent_oxfag_1795 {
  padding: 20px 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Label ── */
._label_oxfag_1811 {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px !important;
}

/* ── Input Wrapper ── */
._inputBox_oxfag_1833 {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}

._icon_oxfag_1847 {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

._inputBox_oxfag_1833 .form-control {
  height: 38px;

  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  box-shadow: none !important;
}

._inputBox_oxfag_1833 .form-control:hover:not(:disabled) {
  border-color: #cbd5e1;
}

._inputBox_oxfag_1833 .form-control:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

._inputBox_oxfag_1833 .form-control.is-invalid {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
  background-image: none;
  padding-right: 12px;
}

._inputBox_oxfag_1833 .invalid-feedback {
  font-size: 10px;
  color: #dc2626;
  margin-top: 4px;
  font-weight: 500;
  width: 100%;
  display: block;
}

._modalFooter_oxfag_1951 {
  display: flex;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #f1f5f9;
  margin-top: 12px;
}

._cancelBtn_oxfag_1967,
._primaryBtns_oxfag_1969 {
  flex: 1;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.14s ease;
}

._cancelBtn_oxfag_1967 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

._cancelBtn_oxfag_1967:hover:not(:disabled) {
  background: #e2e8f0;
  color: #1e293b;
}

._cancelBtn_oxfag_1967:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._primaryBtns_oxfag_1969 {
  background: var(--gradient-primary);
  color: #ffffff;
}

._primaryBtns_oxfag_1969:hover:not(:disabled) {
  background: var(--gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary-sm);
}

._primaryBtns_oxfag_1969:disabled {
  background: var(--color-primary-lighter);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.8;
}

/* ── Spinner (Bootstrap's) ── */
._primaryBtns_oxfag_1969 .spinner-border-sm {
  width: 12px;
  height: 12px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}
._roleTypeGroup_oxfag_2085 {
  display: flex;
  gap: 10px;
}

._roleTypeCard_oxfag_2095 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  user-select: none;
}

._roleTypeCard_oxfag_2095:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-lightest);
}

._roleTypeCardActive_oxfag_2139 {
  border-color: var(--color-primary-light) !important;
  background: var(--color-primary-lightest) !important;
  box-shadow: var(--shadow-primary-sm);
}

._roleTypeRadio_oxfag_2151 {
  display: none;
}

._roleTypeIcon_oxfag_2159 {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

._roleTypeTitle_oxfag_2171 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

._roleTypeDesc_oxfag_2185 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
  line-height: 1.4;
}

._miniIcon1_oxfag_2199 {
  width: 17px;
  height: 17px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 3px;
  margin-left: 10px;
}
/* Container */
._container_wohjp_3 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_wohjp_17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 12px 15px;
  border-radius: 20px;
  margin-bottom: 20px;
   border:1px solid var(--color-primary-lightest);
    box-shadow:none;
  position: relative;
  overflow: hidden;
}

._left_wohjp_45 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_wohjp_57 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_wohjp_57 strong {
   color: var(--color-primary);
  font-weight: 600;
}

._title_wohjp_85 {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_wohjp_99 {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._btnPrimary_wohjp_125 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_wohjp_125:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}
._primaryBtn_wohjp_143 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
._form-control_wohjp_153 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 10px !important;
  background: white;
  transition: all 0.3s ease;
}

._primaryBtn_wohjp_143:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
._primaryBtn_wohjp_143,
._secondaryBtn_wohjp_183,
._cancelBtn_wohjp_185 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_wohjp_211 {
  font-size: 16px;
}

._primaryBtn_wohjp_143 {
  background: #ffca40;
  color: #1e293b;
}

._primaryBtn_wohjp_143:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._secondaryBtn_wohjp_183 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_wohjp_183:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_wohjp_185 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_wohjp_185:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_wohjp_285 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_wohjp_301 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_wohjp_301::-webkit-scrollbar {
  width: 6px;
}

._formSection_wohjp_301::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_wohjp_301::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_wohjp_345 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_wohjp_359 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_wohjp_375 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_wohjp_397 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_wohjp_413 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_wohjp_437 {
  position: relative;
  display: inline-block;
}

._profileAvatar_wohjp_447 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

._cameraIcon_wohjp_479:hover {
  transform: scale(1.1);
}

._profileText_wohjp_487 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_wohjp_499 {
  flex: 1;
}

/* FORM ROW */
._formRow_wohjp_509 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_wohjp_523 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._required_wohjp_535 {
  color: #ef4444;
}

._inputWrapper_wohjp_543 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_wohjp_555 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_wohjp_523 input,
._formGroup_wohjp_523 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_wohjp_523 input:focus,
._formGroup_wohjp_523 select:focus {
  outline: none;
 border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Mobile Input */
._mobileInput_wohjp_609 {
  display: flex;
  gap: 10px;
}

._countrySelect_wohjp_619 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_wohjp_609 ._inputWrapper_wohjp_543 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_wohjp_643 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_wohjp_643 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_wohjp_669 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_wohjp_669:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_wohjp_697 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_wohjp_713 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_wohjp_733 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_wohjp_751 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_wohjp_769 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_wohjp_791 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_wohjp_807 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_wohjp_819 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_wohjp_841 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_wohjp_791 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_wohjp_867 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_wohjp_881 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_wohjp_893 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_wohjp_913 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_wohjp_927 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_wohjp_937 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_wohjp_955 {
  text-align: left;
  margin: 2px 0;
}

._salary_wohjp_955 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_wohjp_975 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_wohjp_989 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_wohjp_999 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_wohjp_1011 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_wohjp_1027 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_wohjp_1041 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_wohjp_285 {
    grid-template-columns: 1fr;
  }

  ._previewSection_wohjp_345 {
    position: static;
  }

  ._formSection_wohjp_301 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_wohjp_3 {
    padding: 16px;
  }

  ._header_wohjp_17 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_wohjp_113 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_wohjp_143,
  ._secondaryBtn_wohjp_183,
  ._cancelBtn_wohjp_185 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_wohjp_413 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_wohjp_509 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_wohjp_359 {
    padding: 20px;
  }

  ._title_wohjp_85 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_wohjp_427 {
  width: 125px;
  height: 150px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_wohjp_437 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_wohjp_447 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_wohjp_1233 {
  color: #f59e0b;
}

._profileAvatar_wohjp_447 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_wohjp_447 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_wohjp_1287 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_wohjp_479 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_wohjp_487 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_wohjp_1345 {
  position: relative;
}

._rightColumn_wohjp_1353 {
  position: relative;
}

._stickyPreview_wohjp_1361 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_wohjp_523 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
._side-heading_wohjp_1403 {
  font-size: 14px;
  font-weight: 600;
}
._btn-icons_wohjp_1411 {
  color: red;
  font-size: 18px;
}

/* LABEL */
._formGroup_wohjp_523 label {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_wohjp_523 input._form-control_wohjp_153,
._formGroup_wohjp_523 select._form-control_wohjp_153 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 10px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_wohjp_523 input._form-control_wohjp_153:focus,
._formGroup_wohjp_523 select._form-control_wohjp_153:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_wohjp_523 input._form-control_wohjp_153:hover,
._formGroup_wohjp_523 select._form-control_wohjp_153:hover {
  border-color: var(--color-primary);
}

/* 🔥 PLACEHOLDER */
._formGroup_wohjp_523 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_wohjp_543 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_wohjp_555 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_wohjp_1539 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_wohjp_1549 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_wohjp_523 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_wohjp_1575 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_wohjp_523 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_wohjp_543 {
  position: relative;
  width: 100%;
}

._inputIcon_wohjp_555 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_wohjp_609 {
  display: flex;
  gap: 10px;
}

._countrySelect_wohjp_619 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_wohjp_609 ._inputWrapper_wohjp_543 {
  flex: 1;
}

/* Info note */
._infoNote_wohjp_1673 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_wohjp_1701,
  ._col-3_wohjp_1703 {
    width: 100%;
  }

  ._stickyPreview_wohjp_1361 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_wohjp_1725 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 16px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #f3f4f6;
  scrollbar-width: thin;
  font-size: 10px;
}

._tabsHeader_wohjp_1725::-webkit-scrollbar {
  height: 4px;
}

._tabsHeader_wohjp_1725::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_wohjp_1775 {
  font-size: 14px;
  /* font-weight: 600; */
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_wohjp_1775:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_wohjp_1813 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_wohjp_1827 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_wohjp_1839 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_wohjp_1839:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_wohjp_1839:active {
  transform: scale(0.95);
}

._thirdButton_wohjp_1827:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_wohjp_791 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_wohjp_791:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_wohjp_1929 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_wohjp_1951 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_wohjp_807 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_wohjp_841 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_wohjp_819 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_wohjp_807 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_wohjp_1951 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_wohjp_1929 {
    height: 110px;
  }

  ._previewName_wohjp_2051 {
    font-size: 18px;
  }

  ._salaryAmount_wohjp_975 {
    font-size: 24px;
  }

  ._previewContent_wohjp_2031 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_wohjp_751 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_wohjp_751:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_wohjp_2321 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_wohjp_2321:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_wohjp_523 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_wohjp_523 select:hover {
  border-color: #fbbf24;
}



*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_wohjp_2433 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_wohjp_2455 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_wohjp_2469 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_wohjp_2483 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_wohjp_2497 {
  display: grid;
  /* grid-template-columns: 182px 1fr; */
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_wohjp_2511 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_wohjp_2539 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_wohjp_2557 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_wohjp_2571 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_wohjp_2587 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_wohjp_2605 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_wohjp_2605 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_wohjp_2633 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_wohjp_2633:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_wohjp_2669 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_wohjp_2683 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_wohjp_2703 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_wohjp_2717 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_wohjp_2729 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_wohjp_2605 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_wohjp_2605 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_wohjp_2703 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_wohjp_2605 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_wohjp_2633 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_wohjp_2703 {
    font-size: 16px;
  }

  ._miniLabel_wohjp_2683 {
    font-size: 10px;
  }

  ._miniSub_wohjp_2717 {
    font-size: 9px;
  }

  ._miniIcon_wohjp_2729 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_wohjp_2605 {
    grid-template-columns: 1fr;
  }
}

._page_wohjp_2859 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_wohjp_2859 *,
._page_wohjp_2859 *::before,
._page_wohjp_2859 *::after {
  box-sizing: border-box;
}

._pageTitle_wohjp_2895 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_wohjp_2909 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._addtitle_wohjp_2923 {
  font-size: 15px !important;
  font-weight: 600;
}
._form_label_wohjp_2931 {
  color: #515151;
  font-size: 12px;
}
/* focus */
._formGroup_wohjp_523 input:focus,
._formGroup_wohjp_523 select:focus,
._formGroup_wohjp_523 textarea:focus,
._formGroup_wohjp_523 .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* ✅ React Select container */
._formGroup_wohjp_523 .react-select__control {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  min-height: 38px;
  box-shadow: none !important;
}

/* focus state */


/* dropdown menu */
._formGroup_wohjp_523 .react-select__menu {
  border-radius: 10px;
  overflow: hidden;
}
._formGroup_wohjp_523 .react-select__control {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}



._layoutMain_wohjp_3007 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_wohjp_3021 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_wohjp_3033 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_wohjp_3061 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_wohjp_3079 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_wohjp_3093 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_wohjp_3109 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* .miniGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.miniCard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.14s;
}

.miniCard:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

.miniTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miniIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.miniLabel {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

.miniValue {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.miniSub {
    font-size: 8px;
    color: #94a3b8;
} */

/* TABLE SECTION */
._tableSection_wohjp_3249 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_wohjp_3267 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_wohjp_3289 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_wohjp_3303 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_wohjp_125 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_wohjp_125 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_wohjp_125:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_wohjp_3371 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_wohjp_3371:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_wohjp_3393 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_wohjp_3415 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_wohjp_3433 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_wohjp_3451 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_wohjp_3463,
._filterDate_wohjp_3465 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_wohjp_3463:focus,
._filterDate_wohjp_3465:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_wohjp_3513 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_wohjp_3513:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_wohjp_3565 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_wohjp_3579 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_wohjp_3579:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_wohjp_3605 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
   background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_wohjp_1 0.15s ease;
}

@keyframes _slideIn_wohjp_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_wohjp_3651 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_wohjp_3665 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
   background: var(--color-primary-light);
    color: #fff; 
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_wohjp_3695 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_wohjp_3709 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_wohjp_3723 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_wohjp_3723:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_wohjp_3769 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_wohjp_3769:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_wohjp_3789 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_wohjp_3789:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_wohjp_3837 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_wohjp_3855 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_wohjp_3877 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding-left: 10px;
}

._asideBody_wohjp_3895 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_wohjp_3911 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_wohjp_3921 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_wohjp_3939 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_wohjp_3955 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_wohjp_3955 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_wohjp_3981 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_wohjp_4003 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_wohjp_4015 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_wohjp_4031 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_wohjp_4047 {
  width: 100%;
}

._barchartBars_wohjp_4055 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_wohjp_4069 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_wohjp_4047 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_wohjp_4093 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_wohjp_4093 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_wohjp_4121 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_wohjp_4135 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_wohjp_4161 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_wohjp_4173 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_wohjp_4185 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_wohjp_4211 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_wohjp_4211 strong {
  font-weight: 600;
}

._activityTime_wohjp_4233 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_wohjp_4243 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_wohjp_4259 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_wohjp_4271 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_wohjp_4295 {
  display: flex;
  flex-direction: column;
}

/* .empName {
    font-size: 13px;
    font-weight: 600;
    color: red;
} */

/* .empSub {
    font-size: 11px;
    color: #9ca3af;
} */

/* CONTACT */
/* .empContact {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #4b5563;
} */

._empContact_wohjp_4329 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_wohjp_4359 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_wohjp_4377 {
  display: flex;
  align-items: center;
}

._empRing_wohjp_4387 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_wohjp_4399 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_wohjp_4411 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_wohjp_4431 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_wohjp_2909 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_wohjp_3837 {
    position: static;
  }
  ._asideBody_wohjp_3895 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_wohjp_3021 {
    grid-template-columns: 1fr;
  }
  ._heroCard_wohjp_3033 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_wohjp_2605 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_wohjp_2859 {
    padding: 9px 10px;
  }
  ._tableHeader_wohjp_3267 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_wohjp_3393 {
    gap: 7px;
  }
  ._filterField_wohjp_3415 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_wohjp_2605 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_wohjp_3605 {
    gap: 5px;
  }
  ._bulkBtnGroup_wohjp_3709 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_wohjp_4561 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_wohjp_4585 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_wohjp_4607 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_wohjp_4259 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_wohjp_4271 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_wohjp_4295 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* .empName {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
} */

._empSub_wohjp_4317 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_wohjp_4329 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

/* .empContact div {
    display: flex;
    align-items: center;
    gap: 6px;
} */

/* Employment Badge */
._empBadge_wohjp_4359 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_wohjp_4377 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_wohjp_4387 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_wohjp_4399 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_wohjp_4411 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_wohjp_4431 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_wohjp_3955 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_wohjp_3955 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_wohjp_3981 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_wohjp_3955 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_wohjp_4003 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_wohjp_4015 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_wohjp_4031 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_wohjp_4047 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_wohjp_4055 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_wohjp_4069 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_wohjp_4047 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_wohjp_4093 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_wohjp_4093 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}


/* ═══════════════════════════════════════════════
   AssetOverviewDashboard.module.css
   Dark / Light theme via .dark / .light on root
═══════════════════════════════════════════════ */

/* ── DARK THEME TOKENS ── */

/* GLOBAL THEME SUPPORT */
:root[data-theme="dark"] {
  --bg-page: #090e1a;
  --text-primary: #f1f5f9;
}

:root[data-theme="light"] {
  --bg-page: #f0f4f8;
  --text-primary: #0f172a;
}

._dark_5txf8_5 {
    --bg-page: #090e1a;
    --bg-header: rgba(9, 14, 26, 0.92);
    --bg-card: #0f172a;
    --bg-card-inner: #111827;
    --bg-row: #1e293b;
    --bg-input: #111827;

    --border: #1e293b;
    --border-hover: #334155;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-body: #cbd5e1;

    --grid-dot: #1e293b;
    --grid-opacity: 0.45;

    --donut-bg: #1e293b;
    --donut-text: #f1f5f9;
    --donut-sub: #64748b;

    --toggle-bg: #1e293b;
    --toggle-thumb: #334155;
    --toggle-active: #6ee7b7;
    --toggle-text: #94a3b8;

    --chip-bg: #111827;
    --chip-border: #1e293b;
    --chip-text: #64748b;

    --back-bg: #111827;
    --back-border: #1e293b;
    --back-text: #94a3b8;
    --back-hover-bg: #1e293b;
    --back-hover-text: #e2e8f0;

    --eyebrow: #6ee7b7;
}

/* ── LIGHT THEME TOKENS ── */
._light_5txf8_5 {
    --bg-page: #f0f4f8;
    --bg-header: rgba(255, 255, 255, 0.92);
    --bg-card: #ffffff;
    --bg-card-inner: #f8fafc;
    --bg-row: #f1f5f9;
    --bg-input: #f8fafc;

    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-body: #334155;

    --grid-dot: #cbd5e1;
    --grid-opacity: 0.5;

    --donut-bg: #e2e8f0;
    --donut-text: #0f172a;
    --donut-sub: #94a3b8;

    --toggle-bg: #e2e8f0;
    --toggle-thumb: #ffffff;
    --toggle-active: #059669;
    --toggle-text: #475569;

    --chip-bg: #f1f5f9;
    --chip-border: #e2e8f0;
    --chip-text: #475569;

    --back-bg: #f1f5f9;
    --back-border: #e2e8f0;
    --back-text: #475569;
    --back-hover-bg: #e2e8f0;
    --back-hover-text: #0f172a;

    --eyebrow: #059669;
}

/* ── PAGE SHELL ── */
._page_5txf8_205 {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-primary);
    padding: 0 0 48px;
    position: relative;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

/* ── BACKGROUND GRID ── */
._bgGrid_5txf8_227 {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: var(--grid-opacity);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
}

/* ── HEADER ── */
._header_5txf8_251 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
    backdrop-filter: blur(12px);
    gap: 16px;
    flex-wrap: wrap;
    transition: background 0.3s ease, border-color 0.3s ease;
}

._headerLeft_5txf8_281 {
    display: flex;
    align-items: center;
    gap: 14px;
}

._headerRight_5txf8_293 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── BACK BUTTON ── */
._backBtn_5txf8_307 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--back-bg);
    border: 1px solid var(--back-border);
    color: var(--back-text);
    padding: 7px 13px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

._backBtn_5txf8_307:hover {
    background: var(--back-hover-bg);
    color: var(--back-hover-text);
    border-color: var(--border-hover);
}

/* ── DIVIDER ── */
._divider_5txf8_351 {
    width: 1px;
    height: 30px;
    background: var(--border);
    transition: background 0.3s;
}

/* ── TITLE BLOCK ── */
._titleBlock_5txf8_367 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._eyebrow_5txf8_379 {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eyebrow);
    transition: color 0.3s;
}

._pageTitle_5txf8_397 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.15;
    transition: color 0.3s;
}

/* ── LIVE CHIP ── */
._liveChip_5txf8_417 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--chip-text);
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    padding: 6px 13px;
    border-radius: 20px;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

._liveChip_5txf8_417 svg {
    color: var(--eyebrow);
    animation: _pulse_5txf8_1 2s ease-in-out infinite;
}

@keyframes _pulse_5txf8_1 {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── THEME TOGGLE ── */
._themeToggle_5txf8_479 {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 11px 5px 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

._themeToggleDark_5txf8_503:hover {
    background: #1e293b;
    border-color: #334155;
}

._themeToggleLight_5txf8_513:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

._toggleTrack_5txf8_523 {
    width: 32px;
    height: 18px;
    border-radius: 10px;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
}

._toggleTrackDark_5txf8_541 {
    background: #334155;
}

._toggleTrackLight_5txf8_549 {
    background: #d1fae5;
}

._toggleThumb_5txf8_557 {
    position: absolute;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

._toggleThumbDark_5txf8_581 {
    left: 16px;
    background: #6ee7b7;
    color: #0f172a;
}

._toggleThumbLight_5txf8_593 {
    left: 2px;
    background: #059669;
    color: #ffffff;
}

._toggleLabel_5txf8_605 {
    font-size: 11px;
    font-weight: 500;
    color: var(--toggle-text);
    transition: color 0.3s;
}

._themeToggleDark_5txf8_503 ._toggleLabel_5txf8_605 {
    color: #94a3b8;
}

._themeToggleLight_5txf8_513 ._toggleLabel_5txf8_605 {
    color: #475569;
}

/* ── STATS GRID ── */
._statsGrid_5txf8_637 {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 12px;
    padding: 24px 28px 0;
}

/* ── STAT CARD ── */
._statCard_5txf8_657 {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    animation: _slideUp_5txf8_1 0.5s ease both;
    animation-delay: var(--delay, 0ms);
    transition: transform 0.2s, border-color 0.2s, background 0.3s;
}

._statCard_5txf8_657:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #6ee7b7);
}

@keyframes _slideUp_5txf8_1 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._statCardIcon_5txf8_721 {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #6ee7b7) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #6ee7b7) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #6ee7b7);
    flex-shrink: 0;
}

._statCardBody_5txf8_747 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

._statCardValue_5txf8_761 {
    font-size: 21px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    transition: color 0.3s;
}

._statCardLabel_5txf8_777 {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

._statCardGlow_5txf8_797 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle,
            color-mix(in srgb, var(--accent, #6ee7b7) 18%, transparent),
            transparent 70%);
    pointer-events: none;
}

/* ── CHARTS ROW ── */
._chartsRow_5txf8_825 {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    padding: 12px 28px 0;
    flex-wrap: wrap;
}

/* ── CHART CARD ── */
._chartCard_5txf8_845 {
    flex: 1;
    min-width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px 14px;
    animation: _fadeIn_5txf8_1 0.6s ease both;
    animation-delay: 0.35s;
    transition: background 0.3s, border-color 0.3s;
}

@keyframes _fadeIn_5txf8_1 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._chartTitle_5txf8_893 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: color 0.3s;
}

/* ── DONUT ── */
._donutWrap_5txf8_919 {
    display: flex;
    align-items: center;
    gap: 18px;
}

._donutSvg_5txf8_931 {
    width: 115px;
    height: 115px;
    flex-shrink: 0;
}

._donutBg_5txf8_943 {
    stroke: var(--donut-bg);
    transition: stroke 0.3s;
}

._donutSegment_5txf8_953 {
    transition: opacity 0.2s;
    cursor: pointer;
}

._donutSegment_5txf8_953:hover {
    opacity: 0.72;
}

._donutTotal_5txf8_971 {
    font-size: 18px;
    font-weight: 800;
    fill: var(--donut-text);
    transition: fill 0.3s;
}

._donutSub_5txf8_985 {
    font-size: 8px;
    fill: var(--donut-sub);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: fill 0.3s;
}

._donutLegend_5txf8_1001 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

._legendItem_5txf8_1015 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
}

._legendDot_5txf8_1029 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

._legendKey_5txf8_1043 {
    flex: 1;
    color: var(--text-secondary);
    text-transform: capitalize;
    transition: color 0.3s;
}

._legendVal_5txf8_1057 {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 12px;
    transition: color 0.3s;
}

/* ── HORIZONTAL BARS ── */
._hbarList_5txf8_1073 {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

._hbarRow_5txf8_1085 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._hbarLabel_5txf8_1097 {
    font-size: 11.5px;
    color: var(--text-secondary);
    width: 88px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

._hbarTrack_5txf8_1119 {
    flex: 1;
    height: 7px;
    background: var(--bg-row);
    border-radius: 4px;
    overflow: hidden;
    transition: background 0.3s;
}

._hbarFill_5txf8_1137 {
    height: 100%;
    width: var(--w, 0%);
    border-radius: 4px;
    background: hsl(var(--hue, 160), 60%, 55%);
    animation: _growBar_5txf8_1 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.5s;
}

@keyframes _growBar_5txf8_1 {
    from {
        width: 0%;
    }

    to {
        width: var(--w, 0%);
    }
}

._hbarVal_5txf8_1175 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    transition: color 0.3s;
}

/* ── WARRANTY ALERTS ── */
._emptyAlerts_5txf8_1197 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 0;
    color: var(--text-muted);
    font-size: 12px;
}

._alertList_5txf8_1217 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

._alertItem_5txf8_1235 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-body);
    background: var(--bg-row);
    padding: 7px 10px;
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
}

._alertDate_5txf8_1259 {
    margin-left: auto;
    color: #d97706;
    font-size: 11px;
    font-weight: 600;
}

/* ── DEPT ALLOCATION ── */
._deptList_5txf8_1275 {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

._deptRow_5txf8_1287 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._deptMeta_5txf8_1299 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

._deptName_5txf8_1313 {
    flex: 1;
    color: var(--text-body);
    transition: color 0.3s;
}

._deptCount_5txf8_1325 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s;
}

._deptTrack_5txf8_1339 {
    height: 6px;
    background: var(--bg-row);
    border-radius: 4px;
    overflow: hidden;
    transition: background 0.3s;
}

._deptFill_5txf8_1355 {
    height: 100%;
    width: var(--w, 0%);
    background: var(--col, #6ee7b7);
    border-radius: 4px;
    animation: _growBar_5txf8_1 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.6s;
}

._emptyNote_5txf8_1373 {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 18px 0;
}

/* ── INSIGHT GRID ── */
._insightGrid_5txf8_1389 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

._insightItem_5txf8_1401 {
    background: var(--bg-card-inner);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    transition: border-color 0.2s, background 0.3s;
}

._insightItem_5txf8_1401:hover {
    border-color: var(--border-hover);
}

._insightEmoji_5txf8_1435 {
    font-size: 20px;
}

._insightValue_5txf8_1443 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    transition: color 0.3s;
}

._insightLabel_5txf8_1457 {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.3s;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    ._header_5txf8_251 {
        padding: 14px 16px;
        gap: 10px;
    }

    ._statsGrid_5txf8_637 {
        grid-template-columns: repeat(2, 1fr);
        padding: 14px 14px 0;
        gap: 9px;
    }

    ._chartsRow_5txf8_825 {
        flex-direction: column;
        padding: 9px 14px 0;
    }

    ._chartCard_5txf8_845 {
        min-width: unset;
    }

    ._donutWrap_5txf8_919 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._insightGrid_5txf8_1389 {
        grid-template-columns: 1fr 1fr;
    }

    ._headerRight_5txf8_293 {
        gap: 7px;
    }

    ._liveChip_5txf8_417 {
        display: none;
    }
}/* Container */
._container_1bwf0_3 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_1bwf0_17 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-primary-lightest);
  position: relative;
  overflow: hidden;
}

._left_1bwf0_45 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_1bwf0_57 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_1bwf0_57 strong {
  color: var(--color-primary);
  font-weight: 600;
}

._title_1bwf0_85 {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}
._contentHead_1bwf0_97{
border-radius: 10px;
}
._subtitle_1bwf0_103 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

._actions_1bwf0_117 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._addtitle_1bwf0_127{
 font-size: 15px !important;
 font-weight: 600;
}
._form_label_1bwf0_135 {
  color: #515151;
  font-size: 12px;
}
._errorText_1bwf0_143 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}
._formGroup_1bwf0_153 input,
._formGroup_1bwf0_153 select,
._formGroup_1bwf0_153 textarea,
._formGroup_1bwf0_153 .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  background: white;
  transition: all 0.3s ease;
}

/* focus */
._formGroup_1bwf0_153 input:focus,
._formGroup_1bwf0_153 select:focus,
._formGroup_1bwf0_153 textarea:focus,
._formGroup_1bwf0_153 .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

/* ✅ React Select container */
._formGroup_1bwf0_153 .react-select__control {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  min-height: 38px;
  box-shadow: none !important;
}

/* focus state */


/* dropdown menu */
._formGroup_1bwf0_153 .react-select__menu {
  border-radius: 10px;
  overflow: hidden;
}
._formGroup_1bwf0_153 .react-select__control {
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

._formGroup_1bwf0_153 .react-select__control--is-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

._primaryBtn_1bwf0_253,
._secondaryBtn_1bwf0_255,
._cancelBtn_1bwf0_257 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_1bwf0_283 {
  font-size: 16px;
}

._primaryBtn_1bwf0_253 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}


._secondaryBtn_1bwf0_255 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_1bwf0_255:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_1bwf0_257 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_1bwf0_257:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_1bwf0_351 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_1bwf0_367 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_1bwf0_367::-webkit-scrollbar {
  width: 6px;
}

._formSection_1bwf0_367::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_1bwf0_367::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_1bwf0_411 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_1bwf0_425 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_1bwf0_441 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_1bwf0_463 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_1bwf0_479 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

._profileInner_1bwf0_491 {
  position: relative;
  display: inline-block;
}

._profileAvatar_1bwf0_501 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

._cameraIcon_1bwf0_533:hover {
  transform: scale(1.1);
}

._profileText_1bwf0_541 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_1bwf0_553 {
  flex: 1;
}

/* FORM ROW */
._formRow_1bwf0_563 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_1bwf0_153 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_1bwf0_153 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_1bwf0_601 {
  color: #ef4444;
}

._inputWrapper_1bwf0_609 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_1bwf0_621 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_1bwf0_153 input,
._formGroup_1bwf0_153 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_1bwf0_153 input:focus,
._formGroup_1bwf0_153 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_1bwf0_675 {
  display: flex;
  gap: 10px;
}

._countrySelect_1bwf0_685 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_1bwf0_675 ._inputWrapper_1bwf0_609 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_1bwf0_709 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_1bwf0_709 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_1bwf0_735 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_1bwf0_735:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_1bwf0_763 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_1bwf0_779 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_1bwf0_799 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_1bwf0_817 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_1bwf0_835 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_1bwf0_857 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_1bwf0_873 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_1bwf0_885 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_1bwf0_907 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_1bwf0_857 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_1bwf0_933 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_1bwf0_947 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_1bwf0_959 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_1bwf0_979 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_1bwf0_993 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_1bwf0_1003 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_1bwf0_1021 {
  text-align: left;
  margin: 2px 0;
}

._salary_1bwf0_1021 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_1bwf0_1041 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_1bwf0_1055 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_1bwf0_1065 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_1bwf0_1077 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_1bwf0_1093 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_1bwf0_1107 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_1bwf0_351 {
    grid-template-columns: 1fr;
  }

  ._previewSection_1bwf0_411 {
    position: static;
  }

  ._formSection_1bwf0_367 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_1bwf0_3 {
    padding: 16px;
  }

  ._header_1bwf0_17 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_1bwf0_117 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_1bwf0_253,
  ._secondaryBtn_1bwf0_255,
  ._cancelBtn_1bwf0_257 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_1bwf0_479 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_1bwf0_563 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_1bwf0_425 {
    padding: 20px;
  }

  ._title_1bwf0_85 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_1bwf0_1239 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_1bwf0_491 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_1bwf0_501 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_1bwf0_1299 {
  color: #f59e0b;
}

._profileAvatar_1bwf0_501 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_1bwf0_501 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_1bwf0_1353 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_1bwf0_533 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_1bwf0_541 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_1bwf0_1411 {
  position: relative;
}

._rightColumn_1bwf0_1419 {
  position: relative;
}

._stickyPreview_1bwf0_1427 {
  position: sticky;
  top: 24px;
}

/* FORM GROUP */
._formGroup_1bwf0_153 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_1bwf0_153 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_1bwf0_153 input._form-control_1bwf0_159,
._formGroup_1bwf0_153 select._form-control_1bwf0_159 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_1bwf0_153 input._form-control_1bwf0_159:focus,
._formGroup_1bwf0_153 select._form-control_1bwf0_159:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_1bwf0_153 input._form-control_1bwf0_159:hover,
._formGroup_1bwf0_153 select._form-control_1bwf0_159:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_1bwf0_153 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_1bwf0_609 {
  position: relative;
}

/* ICON INSIDE INPUT */
._inputIcon_1bwf0_621 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_1bwf0_1561 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_1bwf0_143 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_1bwf0_153 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_1bwf0_1597 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_1bwf0_153 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_1bwf0_609 {
  position: relative;
  width: 100%;
}

._inputIcon_1bwf0_621 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_1bwf0_675 {
  display: flex;
  gap: 10px;
}

._countrySelect_1bwf0_685 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_1bwf0_675 ._inputWrapper_1bwf0_609 {
  flex: 1;
}

/* Info note */
._infoNote_1bwf0_1695 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_1bwf0_1723,
  ._col-3_1bwf0_1725 {
    width: 100%;
  }

  ._stickyPreview_1bwf0_1427 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_1bwf0_1747 {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 16px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #f3f4f6;
  scrollbar-width: thin;
}

._tabsHeader_1bwf0_1747::-webkit-scrollbar {
  height: 4px;
}

._tabsHeader_1bwf0_1747::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

._tabsHeading_1bwf0_1785 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_1bwf0_1785:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_1bwf0_1823 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_1bwf0_1837 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_1bwf0_1849 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_1bwf0_1849:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_1bwf0_1849:active {
  transform: scale(0.95);
}

._thirdButton_1bwf0_1837:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_1bwf0_857 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_1bwf0_857:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_1bwf0_1939 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_1bwf0_1961 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_1bwf0_873 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_1bwf0_907 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_1bwf0_885 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_1bwf0_873 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_1bwf0_1961 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_1bwf0_1939 {
    height: 110px;
  }

  ._previewName_1bwf0_2069 {
    font-size: 18px;
  }

  ._salaryAmount_1bwf0_1041 {
    font-size: 24px;
  }

  ._previewContent_1bwf0_2085 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_1bwf0_817 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_1bwf0_817:hover {
   background: var(--color-primary-lightest);
  color: var(--color-primary);
}

/* Buttons - Compact Size */
._primaryBtn_1bwf0_253,
._cancelBtn_1bwf0_257 , ._discardBtn_1bwf0_2139{
  display: flex;
  align-items: center;
  gap: 6px;                     
  padding: 7px 14px;           
  border-radius: 8px;          
  font-size: 12px;              
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

._primaryBtn_1bwf0_253:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

._discardBtn_1bwf0_2139:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_1bwf0_153 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_1bwf0_153 select:hover {
  border-color: #fbbf24;
}

._formGroup_1bwf0_153 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_1bwf0_2261 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_1bwf0_2283 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_1bwf0_2297 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_1bwf0_2311 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_1bwf0_2325 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_1bwf0_2339 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_1bwf0_2367 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_1bwf0_2385 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_1bwf0_2399 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_1bwf0_2415 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_1bwf0_2433 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_1bwf0_2433 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_1bwf0_2461 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_1bwf0_2461:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_1bwf0_2497 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_1bwf0_2511 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_1bwf0_2531 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_1bwf0_2545 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_1bwf0_2557 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_1bwf0_2531 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_1bwf0_2461 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_1bwf0_2531 {
    font-size: 16px;
  }

  ._miniLabel_1bwf0_2511 {
    font-size: 10px;
  }

  ._miniSub_1bwf0_2545 {
    font-size: 9px;
  }

  ._miniIcon_1bwf0_2557 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: 1fr;
  }
}

._page_1bwf0_2687 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1bwf0_2687 *,
._page_1bwf0_2687 *::before,
._page_1bwf0_2687 *::after {
  box-sizing: border-box;
}

._pageTitle_1bwf0_2723 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_1bwf0_2737 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_1bwf0_2751 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_1bwf0_2765 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_1bwf0_2777 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_1bwf0_2805 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_1bwf0_2823 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_1bwf0_2837 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_1bwf0_2853 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}


/* TABLE SECTION */
._tableSection_1bwf0_2875 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1bwf0_2893 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1bwf0_2915 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1bwf0_2929 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_1bwf0_283 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1bwf0_2977 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1bwf0_2977:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_1bwf0_2997 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1bwf0_2997:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_1bwf0_3019 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1bwf0_3041 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1bwf0_3059 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1bwf0_3077 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1bwf0_3089,
._filterDate_1bwf0_3091 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_1bwf0_3089:focus,
._filterDate_1bwf0_3091:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1bwf0_3139 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_1bwf0_3139:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1bwf0_3191 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1bwf0_3205 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1bwf0_3205:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_1bwf0_3231 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
   background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_1bwf0_1 0.15s ease;
}

@keyframes _slideIn_1bwf0_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_1bwf0_3277 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_1bwf0_3291 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
    color: #fff; 
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_1bwf0_3321 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_1bwf0_3335 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_1bwf0_3349 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1bwf0_3349:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1bwf0_3395 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1bwf0_3395:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_1bwf0_3415 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_1bwf0_3415:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_1bwf0_3463 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_1bwf0_3481 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_1bwf0_3503 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_1bwf0_3519 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_1bwf0_3535 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_1bwf0_3545 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_1bwf0_3563 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_1bwf0_3579 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_1bwf0_3579 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_1bwf0_3605 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_1bwf0_3627 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_1bwf0_3639 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_1bwf0_3655 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_1bwf0_3671 {
  width: 100%;
}

._barchartBars_1bwf0_3679 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_1bwf0_3693 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_1bwf0_3671 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_1bwf0_3717 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_1bwf0_3717 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_1bwf0_3745 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_1bwf0_3759 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_1bwf0_3785 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_1bwf0_3797 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_1bwf0_3809 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_1bwf0_3835 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_1bwf0_3835 strong {
  font-weight: 600;
}

._activityTime_1bwf0_3857 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_1bwf0_3867 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_1bwf0_3883 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_1bwf0_3895 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_1bwf0_3919 {
  display: flex;
  flex-direction: column;
}

/* .empName {
  font-size: 13px;
  font-weight: 600;
} */

._empSub_1bwf0_3939 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_1bwf0_3951 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_1bwf0_3951 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_1bwf0_3981 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_1bwf0_3999 {
  display: flex;
  align-items: center;
}

._empRing_1bwf0_4009 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_1bwf0_4021 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_1bwf0_4033 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1bwf0_4053 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_1bwf0_2737 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_1bwf0_3463 {
    position: static;
  }
  ._asideBody_1bwf0_3519 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_1bwf0_2765 {
    grid-template-columns: 1fr;
  }
  ._heroCard_1bwf0_2777 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_1bwf0_2687 {
    padding: 9px 10px;
  }
  ._tableHeader_1bwf0_2893 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_1bwf0_3019 {
    gap: 7px;
  }
  ._filterField_1bwf0_3041 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_1bwf0_2433 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_1bwf0_3231 {
    gap: 5px;
  }
  ._bulkBtnGroup_1bwf0_3335 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_1bwf0_4183 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_1bwf0_4207 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_1bwf0_4229 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_1bwf0_3883 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_1bwf0_3895 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_1bwf0_3919 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* .empName {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
} */
._header_1bwf0_17 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 8px 10px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-primary-lightest);
    position: relative;
    overflow: hidden;
}
._left_1bwf0_45 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._completionHeader_1bwf0_1077 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  ._container_1bwf0_3 {
    padding: 16px;
  }

  ._header_1bwf0_17 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_1bwf0_117 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_1bwf0_253,
  ._secondaryBtn_1bwf0_255,
  ._cancelBtn_1bwf0_257 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_1bwf0_479 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_1bwf0_563 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_1bwf0_425 {
    padding: 20px;
  }

  ._title_1bwf0_85 {
    font-size: 24px;
  }
}
._tabsHeader_1bwf0_1747::-webkit-scrollbar {
  height: 4px;
}

._tabsHeader_1bwf0_1747::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

._empSub_1bwf0_3939 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_1bwf0_3951 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_1bwf0_3951 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_1bwf0_3981 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_1bwf0_3999 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_1bwf0_4009 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_1bwf0_4021 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_1bwf0_4033 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1bwf0_4053 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_1bwf0_3579 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_1bwf0_3579 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_1bwf0_3605 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_1bwf0_3579 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_1bwf0_3627 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_1bwf0_3639 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_1bwf0_3655 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_1bwf0_3671 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_1bwf0_3679 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_1bwf0_3693 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_1bwf0_3671 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_1bwf0_3717 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_1bwf0_3717 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}


._downloadAction_1bwf0_4789 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_1bwf0_4789:hover {
  background: #dcfce7; /* light green hover */
}
/* ExpenseListView.module.css */

._page_1bwf0_2687 {
  background: #f8f9fa;
  min-height: 100vh;
}

._recordCard_1bwf0_4819 {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

._infoBox_1bwf0_4829 {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 14px 18px;
}

._label_1bwf0_4843 {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 4px;
  font-weight: 500;
}

._value_1bwf0_4857 {
  font-weight: 600;
  color: #212529;
  font-size: 1.05rem;
}

._sectionTitle_1bwf0_2915 {
  font-weight: 600;
  color: #495057;
  margin-bottom: 5px;
  font-size: 1.05rem;
}

._descriptionText_1bwf0_4883 {
  color: #555;
  line-height: 1.6;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
  border-left: 4px solid #0d6efd;
}

._attachmentCard_1bwf0_4901 {
  border-radius: 12px;
  transition: all 0.2s;
}

._attachmentCard_1bwf0_4901:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

._timeline_1bwf0_4921 {
  border-left: 3px solid #e9ecef;
  padding-left: 20px;
  position: relative;
}

._timelineDot_1bwf0_4933 {
  width: 14px;
  height: 14px;
  background: #0d6efd;
  border-radius: 50%;
  position: absolute;
  left: -8.5px;
}

/* Badge styles matching screenshot */
._badgeActive_1bwf0_4953 {
  background: #d1fae5;
  color: #10b981;
  font-weight: 500;
}

._badgeApproved_1bwf0_4965 {
  background: #dbeafe;
  color: #3b82f6;
  font-weight: 500;
}

._badgeHighPriority_1bwf0_4977 {
  background: #fee2e2;
  color: #ef4444;
  font-weight: 500;
}

._edit-btn_1bwf0_4989 {
  background: #0d6efd;
  color: white;
  border: none;
}

._edit-btn_1bwf0_4989:hover {
  background: #0b5ed7;
}
/* Expenses.module.css */

._expensattach_1bwf0_5011 {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
  transition: all 0.2s ease;
  font-size: 13px;
  min-width: 240px;
  text-align: left;
}



._expensattach_1bwf0_5011:active {
  transform: translateY(0);
}
/* ── Dashboard Toggle Button (placed opposite "Company Management" title) ── */
._dashToggleBtn_1bwf0_5043 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1.5px solid var(--gradient-primary);
   background: var(--gradient-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, box-shadow 0.13s, border-color 0.13s;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

._dashToggleBtn_1bwf0_5043:hover {
   background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
  color: #fff;
}

._dashToggleBtn_1bwf0_5043 svg {
  flex-shrink: 0;
}

._empName_1bwf0_3929 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._policyInfo_1bwf0_5113 {
  display: flex;
  align-items: center;
  color: red;
  cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════
   ExpenseDashboard.module.css  –  Light + Dark Mode
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables: Light Mode (default) ── */
._page_1pjc1_11 {
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --border: #e9ecef;
  --border-soft: #f1f5f9;

  --text-primary: #0f172a;
  --text-secondary: #374151;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  --btn-bg: #ffffff;
  --btn-border: #e2e8f0;
  --btn-color: #374151;
  --btn-hover-bg: #eef2ff;
  --btn-hover-border: #6366f1;
  --btn-hover-color: #6366f1;

  --filter-bg: #f1f5f9;
  --filter-active-bg: #ffffff;
  --filter-active-color: #6366f1;
  --filter-active-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

  --donut-track: #f1f5f9;
  --bar-empty: #e2e8f0;

  --skeleton-from: #f1f5f9;
  --skeleton-mid: #e2e8f0;
  --skeleton-to: #f1f5f9;

  --table-head-bg: #f8fafc;
  --table-row-hover: #f8fafc;

  --error-color: #dc2626;
  --error-bg: #fef2f2;
  --error-border: #fecaca;

  padding: 20px 24px 40px;
  background: var(--bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

/* ── CSS Variables: Dark Mode ── */
._dark_1pjc1_111 {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #263347;
  --border: #334155;
  --border-soft: #293548;

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;

  --btn-bg: #1e293b;
  --btn-border: #334155;
  --btn-color: #cbd5e1;
  --btn-hover-bg: #312e81;
  --btn-hover-border: #6366f1;
  --btn-hover-color: #a5b4fc;

  --filter-bg: #0f172a;
  --filter-active-bg: #1e293b;
  --filter-active-color: #a5b4fc;
  --filter-active-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  --donut-track: #1e293b;
  --bar-empty: #1e293b;

  --skeleton-from: #1e293b;
  --skeleton-mid: #293548;
  --skeleton-to: #1e293b;

  --table-head-bg: #162032;
  --table-row-hover: #162032;

  --error-color: #f87171;
  --error-bg: #3f1111;
  --error-border: #7f1d1d;
}

/* ── Header ── */
._pageHead_1pjc1_191 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

._headLeft_1pjc1_207 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._backBtn_1pjc1_219 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

._backBtn_1pjc1_219:hover {
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
  background: var(--btn-hover-bg);
}

._pageTitle_1pjc1_263 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

._pageSub_1pjc1_279 {
  font-size: 12px;
  color: var(--text-faint);
  margin: 2px 0 0;
}

._headRight_1pjc1_291 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Filter Pills ── */
._filterPills_1pjc1_307 {
  display: flex;
  gap: 4px;
  background: var(--filter-bg);
  padding: 3px;
  border-radius: 9px;
}

._filterPill_1pjc1_307 {
  padding: 5px 12px;
  border: none;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

._filterPill_1pjc1_307:hover {
  background: var(--border-soft);
  color: var(--text-secondary);
}

._filterPillActive_1pjc1_357 {
  background: var(--filter-active-bg);
  color: var(--filter-active-color);
  box-shadow: var(--filter-active-shadow);
}

/* ── Icon Buttons ── */
._refreshBtn_1pjc1_371,
._themeToggle_1pjc1_373 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  height: 34px;
  border: 1.5px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

._refreshBtn_1pjc1_371 {
  width: 34px;
  padding: 0;
}

._refreshBtn_1pjc1_371:hover,
._themeToggle_1pjc1_373:hover {
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
  background: var(--btn-hover-bg);
}

/* ── Stat Cards ── */
._statsGrid_1pjc1_435 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

._statCard_1pjc1_447 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    background 0.25s,
    border-color 0.25s;
}

._statCard_1pjc1_447::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 10px 0 0 10px;
}

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

._dark_1pjc1_111 ._statCard_1pjc1_447:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

._statIconWrap_1pjc1_517 {
  flex-shrink: 0;
}

._statIcon_1pjc1_517 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  color: var(--accent, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
}

._statIcon_1pjc1_517 svg {
  width: 14px;
  height: 14px;
}

._statBody_1pjc1_557 {
  flex: 1;
  min-width: 0;
}

._statLabel_1pjc1_567 {
  font-size: 9px;
  color: var(--text-faint);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

._statValue_1pjc1_585 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._statSub_1pjc1_607 {
  font-size: 9px;
  color: var(--text-faint);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Card ── */
._card_1pjc1_627 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  transition:
    background 0.25s,
    border-color 0.25s;
}

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

._cardTitle_1pjc1_665 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

._cardSub_1pjc1_685 {
  font-size: 11px;
  color: var(--text-faint);
}

/* ── Status Bar ── */
._statusBarWrap_1pjc1_697 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._progressTrack_1pjc1_709 {
  height: 10px;
  border-radius: 99px;
  background: var(--border-soft);
  overflow: hidden;
  display: flex;
}

._progressSegment_1pjc1_725 {
  height: 100%;
  transition: width 0.6s ease;
}

._statusLegend_1pjc1_735 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

._statusLegendItem_1pjc1_747 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

._statusDot_1pjc1_761 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._statusLegendLabel_1pjc1_775 {
  color: var(--text-secondary);
  font-weight: 500;
}

._statusLegendCount_1pjc1_785 {
  color: var(--text-primary);
  font-weight: 700;
}

._statusLegendPct_1pjc1_795 {
  color: var(--text-faint);
}

/* ── Middle Row ── */
._midRow_1pjc1_805 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Donut ── */
._donutWrap_1pjc1_819 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

._donutSvg_1pjc1_833 {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

._donutSlice_1pjc1_845 {
  transition: stroke-dashoffset 0.6s ease;
}

._donutTotal_1pjc1_853 {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text-primary);
}

._donutSubText_1pjc1_865 {
  font-size: 9px;
  fill: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._donutLegend_1pjc1_879 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
}

._legendRow_1pjc1_893 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

._legendDot_1pjc1_907 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendLabel_1pjc1_921 {
  color: var(--text-secondary);
  flex: 1;
}

._legendPct_1pjc1_931 {
  color: var(--text-faint);
  font-size: 11px;
}

/* ── Bar Chart ── */
._barChartWrap_1pjc1_943 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding-bottom: 24px;
}

._barCol_1pjc1_959 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

._barTrack_1pjc1_977 {
  flex: 1;
  width: 100%;
  background: var(--border-soft);
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

._barFill_1pjc1_999 {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 2px;
}

._barLabel_1pjc1_1013 {
  font-size: 9.5px;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 2px;
}

/* ── Department / Type List ── */
._deptList_1pjc1_1029 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._deptRow_1pjc1_1041 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

._deptDot_1pjc1_1055 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._deptName_1pjc1_1069 {
  flex: 1;
  color: var(--text-secondary);
  font-weight: 500;
}

._deptAmt_1pjc1_1081 {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}

._deptAmtSmall_1pjc1_1093 {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  text-align: right;
}

._deptBadge_1pjc1_1107 {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

/* Status-wise amount row */
._statusAmtRow_1pjc1_1123 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
}

._statusAmtText_1pjc1_1139 {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  flex: 1;
  text-align: right;
  word-break: break-word;
}

/* ── Recent Table ── */
._recentTable_1pjc1_1159 {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}

._recentHeader_1pjc1_1171,
._recentRow_1pjc1_1173 {
  display: grid;
  grid-template-columns: 60px 1fr 100px 80px 90px;
  padding: 9px 14px;
  gap: 8px;
  align-items: center;
}

._recentHeader_1pjc1_1171 {
  background: var(--table-head-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-soft);
}

._recentRow_1pjc1_1173 {
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.1s;
}

._recentRow_1pjc1_1173:last-child {
  border-bottom: none;
}

._recentRow_1pjc1_1173:hover {
  background: var(--table-row-hover);
}

._recentId_1pjc1_1237 {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
}

._recentType_1pjc1_1249 {
  color: var(--text-secondary);
  font-weight: 500;
}

._recentAmt_1pjc1_1259 {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
}

._recentCurr_1pjc1_1271 {
  color: var(--text-muted);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

._recentBadge_1pjc1_1287 {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* ── Misc ── */
._emptyMsg_1pjc1_1305 {
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
  padding: 24px 0;
  margin: 0;
}

._errorBox_1pjc1_1321 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--error-color);
  text-align: center;
}

._retryBtn_1pjc1_1343 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--error-bg);
  color: var(--error-color);
  border: 1px solid var(--error-border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

._retryBtn_1pjc1_1343:hover {
  filter: brightness(0.92);
}

/* ── Skeleton ── */
@keyframes _shimmer_1pjc1_1 {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

._skeletonBase_1pjc1_1401 {
  background: linear-gradient(
    90deg,
    var(--skeleton-from) 25%,
    var(--skeleton-mid) 50%,
    var(--skeleton-to) 75%
  );
  background-size: 800px 100%;
  animation: _shimmer_1pjc1_1 1.4s infinite;
  border-radius: 8px;
}

._skeletonHeader_1pjc1_1425 {
  height: 52px;
  border-radius: 12px;
}

._skeletonGrid_1pjc1_1437 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

._skeletonCard_1pjc1_1449 {
  height: 70px;
  border-radius: 10px;
}

._skeletonRow_1pjc1_1461 {
  display: flex;
  gap: 14px;
}

._skeletonBlock_1pjc1_1471 {
  flex: 1;
  height: 220px;
  border-radius: 12px;
}

._skeletonFull_1pjc1_1485 {
  height: 280px;
  border-radius: 12px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  ._page_1pjc1_11 {
    padding: 12px 14px 32px;
  }

  ._pageHead_1pjc1_191 {
    flex-direction: column;
  }

  ._filterPills_1pjc1_307 {
    flex-wrap: wrap;
  }

  ._statsGrid_1pjc1_435 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._midRow_1pjc1_805 {
    flex-direction: column;
  }

  ._themeToggle_1pjc1_373 span {
    display: none;
  }

  ._recentHeader_1pjc1_1171,
  ._recentRow_1pjc1_1173 {
    grid-template-columns: 50px 1fr 80px 60px 80px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  ._statsGrid_1pjc1_435 {
    grid-template-columns: 1fr;
  }
}

._backBtn1_1pjc1_1575 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
._backBtn1_1pjc1_1575:hover {
  color: var(--color-primary);
  background: #eef2ff;
  border-color: var(--color-primary-light);
}

._statsGrid_1pjc1_435 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
._summaryCard_1pjc1_1625 {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

._summaryCard_1pjc1_1625:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
._summaryIcon_1pjc1_1653 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
._summaryTitle_1pjc1_1673 {
    font-size: 10px;
    font-weight: 500;
    color: #475569;
}

._summaryValue_1pjc1_1685 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

._summarySub_1pjc1_1697 {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 40px;
}.tableLayout {
    display: grid;
    gap: 10px;
    align-items: start;
}

.tableLayoutMain {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.tableSection {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tableHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tableSectionTitle {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

.tableSectionSub {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}


.tableBtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.13s,
        box-shadow 0.13s;
    white-space: nowrap;
    border: none;
}

.tableBtnSecondary {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.tableBtnSecondary:hover {
    background: #f8fafc;
}


.tableBulkBar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest);
    flex-shrink: 0;
    flex-wrap: wrap;
    animation: tableSlideIn 0.15s ease;
}

@keyframes tableSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tableBulkLeft {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.tableBulkCountBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--color-primary-light);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.tableBulkText {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

.tableBulkGroup {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.tableBulkActionBtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 10px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 0.12s,
        border-color 0.12s;
}

.tableBulkActionBtn:hover {
    background: #f8fafc;
}

.tableBulkActionBtnDanger {
    color: #dc2626;
    border-color: #fecaca;
}

.tableBulkActionBtnDanger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.tableBulkDeselect {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition:
        background 0.12s,
        color 0.12s;
    flex-shrink: 0;
}

.tableBulkDeselect:hover {
    background: #f1f5f9;
    color: #475569;
}


@media (max-width: 768px) {
    .tableHeader {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .tableBulkBar {
        gap: 5px;
    }

    .tableBulkGroup {
        flex-wrap: wrap;
    }
}._pageTitle_ta1f5_1 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* 🔥 Tabs Container */
._settingsTabsHeader_ta1f5_17 {
  display: flex;
  gap: 6px;

  overflow: scroll;

  white-space: nowrap;
  max-width: calc(100vw - var(--sidebar-width));
  flex-wrap: nowrap;

  border-bottom: 1px solid #e5e7eb;

  scroll-behavior: smooth;
}

/* 🔥 IMPORTANT FIX (add this only) */
._settingsTabsHeader_ta1f5_17 > * {
  flex-shrink: 0; /* 🔥 prevents items from shrinking */
}

/* 🔥 Scrollbar ONLY for tabs */
._settingsTabsHeader_ta1f5_17::-webkit-scrollbar {
  height: 6px;
}

._settingsTabsHeader_ta1f5_17::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

._settingsTabsHeader_ta1f5_17::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* 🔥 Individual Tab */
._tabsHeading_ta1f5_87 {
  flex-shrink: 0; /* prevent shrinking */
  min-width: max-content; /* keep full text width */

  font-size: 11px;
  font-weight: 500;
  color: #6b7280;

  padding: 6px 10px;
  border-radius: 4px;

  cursor: pointer;
  background: #fff;

  border: 2px solid transparent;
  transition: all 0.2s ease;

  margin-bottom: 1px;
}

/* 🔥 Hover */
._tabsHeading_ta1f5_87:hover {
  color: var(--color-primary); 
  background: #fff;
}

/* 🔥 Active Tab */
._activeTab_ta1f5_141 {
  color: var(--color-primary); 
  /* background: linear-gradient(135deg, #fef3c7, #fffbeb); */
  border-bottom: 2px solid var(--color-primary);
}

/* 🔥 OPTIONAL: Always force overflow (for testing or large screens) */
/* Uncomment if needed */
/*
.tabsHeading {
  min-width: 150px;
}
*/
/* Container */
body {
  overflow-x: hidden;
}
._container_1uvfz_9 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_1uvfz_23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}

._left_1uvfz_51 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_1uvfz_63 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_1uvfz_63 strong {
  color: #f59e0b;
  font-weight: 600;
}

._title_1uvfz_91 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_1uvfz_105 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._primaryBtn_1uvfz_131,
._secondaryBtn_1uvfz_133,
._cancelBtn_1uvfz_135 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_1uvfz_161 {
  font-size: 16px;
}

._primaryBtn_1uvfz_131 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

._primaryBtn_1uvfz_131:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

._secondaryBtn_1uvfz_133 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_1uvfz_133:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_1uvfz_135 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_1uvfz_135:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_1uvfz_237 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_1uvfz_253 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_1uvfz_253::-webkit-scrollbar {
  width: 6px;
}

._formSection_1uvfz_253::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_1uvfz_253::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_1uvfz_297 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_1uvfz_311 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_1uvfz_327 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_1uvfz_349 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_1uvfz_365 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_1uvfz_389 {
  position: relative;
  display: inline-block;
}

._profileAvatar_1uvfz_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* .avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .avatarPlaceholderIcon {
  color: #f59e0b;
} */

/* .cameraIcon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #f59e0b;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
} */

._cameraIcon_1uvfz_451:hover {
  transform: scale(1.1);
}

._profileText_1uvfz_489 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_1uvfz_501 {
  flex: 1;
}

/* FORM ROW */
._formRow_1uvfz_511 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_1uvfz_525 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_1uvfz_525 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_1uvfz_549 {
  color: #ef4444;
}

._inputWrapper_1uvfz_557 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_1uvfz_569 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_1uvfz_525 input,
._formGroup_1uvfz_525 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_1uvfz_525 input:focus,
._formGroup_1uvfz_525 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_1uvfz_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_1uvfz_633 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_1uvfz_623 ._inputWrapper_1uvfz_557 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_1uvfz_657 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_1uvfz_657 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_1uvfz_683 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_1uvfz_683:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_1uvfz_711 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_1uvfz_727 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_1uvfz_747 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_1uvfz_765 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_1uvfz_783 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_1uvfz_805 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_1uvfz_821 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_1uvfz_833 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_1uvfz_855 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_1uvfz_805 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_1uvfz_881 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_1uvfz_895 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_1uvfz_907 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_1uvfz_927 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_1uvfz_941 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_1uvfz_951 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_1uvfz_969 {
  text-align: left;
  margin: 2px 0;
}

._salary_1uvfz_969 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_1uvfz_989 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_1uvfz_1003 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_1uvfz_1013 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_1uvfz_1025 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_1uvfz_1041 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_1uvfz_1055 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_1uvfz_237 {
    grid-template-columns: 1fr;
  }

  ._previewSection_1uvfz_297 {
    position: static;
  }

  ._formSection_1uvfz_253 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_1uvfz_9 {
    padding: 16px;
  }

  ._header_1uvfz_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_1uvfz_119 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_1uvfz_131,
  ._secondaryBtn_1uvfz_133,
  ._cancelBtn_1uvfz_135 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_1uvfz_365 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_1uvfz_511 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_1uvfz_311 {
    padding: 20px;
  }

  ._title_1uvfz_91 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_1uvfz_379 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_1uvfz_389 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_1uvfz_399 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_1uvfz_443 {
  color: #f59e0b;
}

._profileAvatar_1uvfz_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_1uvfz_399 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_1uvfz_1301 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_1uvfz_451 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_1uvfz_489 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_1uvfz_1359 {
  position: relative;
}

._rightColumn_1uvfz_1367 {
  position: relative;
}

._stickyPreview_1uvfz_1375 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_1uvfz_525 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_1uvfz_525 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_1uvfz_525 input._form-control_1uvfz_1387,
._formGroup_1uvfz_525 select._form-control_1uvfz_1387 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_1uvfz_525 input._form-control_1uvfz_1387:focus,
._formGroup_1uvfz_525 select._form-control_1uvfz_1387:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_1uvfz_525 input._form-control_1uvfz_1387:hover,
._formGroup_1uvfz_525 select._form-control_1uvfz_1387:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_1uvfz_525 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_1uvfz_557 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_1uvfz_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_1uvfz_1537 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_1uvfz_1547 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_1uvfz_525 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_1uvfz_1573 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_1uvfz_525 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_1uvfz_557 {
  position: relative;
  width: 100%;
}

._inputIcon_1uvfz_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_1uvfz_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_1uvfz_633 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_1uvfz_623 ._inputWrapper_1uvfz_557 {
  flex: 1;
}

/* Info note */
._infoNote_1uvfz_1671 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_1uvfz_1699,
  ._col-3_1uvfz_1701 {
    width: 100%;
  }

  ._stickyPreview_1uvfz_1375 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_1uvfz_1723 {
  display: flex;
  gap: 8px;

  /* ✅ KEY FIXES */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;

  padding: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb;

  /* smooth scroll */
  scroll-behavior: smooth;
}

._tabsHeader_1uvfz_1723 {
  scroll-snap-type: x mandatory;
}

._tabsHeading_1uvfz_1765 {
  scroll-snap-align: start;
}

._tabsHeader_1uvfz_1723::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_1uvfz_1723::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 10px;
}

._tabsHeader_1uvfz_1723::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_1uvfz_1765 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_1uvfz_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_1uvfz_1849 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_1uvfz_1863 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_1uvfz_1875 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_1uvfz_1875:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_1uvfz_1875:active {
  transform: scale(0.95);
}

._thirdButton_1uvfz_1863:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_1uvfz_805 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_1uvfz_805:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_1uvfz_1965 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_1uvfz_1987 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_1uvfz_821 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_1uvfz_855 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_1uvfz_833 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_1uvfz_821 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_1uvfz_1987 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_1uvfz_1965 {
    height: 110px;
  }

  ._previewName_1uvfz_2087 {
    font-size: 18px;
  }

  ._salaryAmount_1uvfz_989 {
    font-size: 24px;
  }

  ._previewContent_1uvfz_2067 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_1uvfz_765 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_1uvfz_765:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_1uvfz_2357 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_1uvfz_2357:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_1uvfz_525 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_1uvfz_525 select:hover {
  border-color: #fbbf24;
}

._formGroup_1uvfz_525 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_1uvfz_2475 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_1uvfz_2497 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_1uvfz_2511 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_1uvfz_2525 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_1uvfz_2539 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_1uvfz_2553 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_1uvfz_2581 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_1uvfz_2599 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_1uvfz_2613 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_1uvfz_2629 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_1uvfz_2647 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_1uvfz_2647 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_1uvfz_2675 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_1uvfz_2675:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_1uvfz_2711 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_1uvfz_2725 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_1uvfz_2745 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_1uvfz_2759 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_1uvfz_2771 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_1uvfz_2745 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_1uvfz_2675 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_1uvfz_2745 {
    font-size: 16px;
  }

  ._miniLabel_1uvfz_2725 {
    font-size: 10px;
  }

  ._miniSub_1uvfz_2759 {
    font-size: 9px;
  }

  ._miniIcon_1uvfz_2771 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: 1fr;
  }
}

._page_1uvfz_2901 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1uvfz_2901 *,
._page_1uvfz_2901 *::before,
._page_1uvfz_2901 *::after {
  box-sizing: border-box;
}

._layout_1uvfz_2937 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_1uvfz_2951 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_1uvfz_2965 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_1uvfz_2977 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_1uvfz_3005 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_1uvfz_3023 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_1uvfz_3037 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_1uvfz_3053 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* .miniGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.miniCard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.14s;
}

.miniCard:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

.miniTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miniIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.miniLabel {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

.miniValue {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.miniSub {
    font-size: 8px;
    color: #94a3b8;
} */

/* TABLE SECTION */
._tableSection_1uvfz_3193 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1uvfz_3211 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1uvfz_3233 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1uvfz_3247 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_1uvfz_161 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1uvfz_3295 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1uvfz_3295:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_1uvfz_3315 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1uvfz_3315:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_1uvfz_3337 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1uvfz_3359 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1uvfz_3377 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1uvfz_3395 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1uvfz_3407,
._filterDate_1uvfz_3409 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_1uvfz_3407:focus,
._filterDate_1uvfz_3409:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1uvfz_3457 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_1uvfz_3457:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1uvfz_3509 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1uvfz_3523 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1uvfz_3523:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_1uvfz_3549 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_1uvfz_1 0.15s ease;
}

@keyframes _slideIn_1uvfz_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_1uvfz_3595 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_1uvfz_3609 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_1uvfz_3639 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_1uvfz_3653 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_1uvfz_3667 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1uvfz_3667:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1uvfz_3713 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1uvfz_3713:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_1uvfz_3733 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_1uvfz_3733:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_1uvfz_3781 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_1uvfz_3799 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_1uvfz_3821 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_1uvfz_3837 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_1uvfz_3853 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_1uvfz_3863 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_1uvfz_3881 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_1uvfz_3897 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_1uvfz_3897 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_1uvfz_3923 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_1uvfz_3945 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_1uvfz_3957 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_1uvfz_3973 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_1uvfz_3989 {
  width: 100%;
}

._barchartBars_1uvfz_3997 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_1uvfz_4011 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_1uvfz_3989 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_1uvfz_4035 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_1uvfz_4035 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_1uvfz_4063 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_1uvfz_4077 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_1uvfz_4103 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_1uvfz_4115 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_1uvfz_4127 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_1uvfz_4153 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_1uvfz_4153 strong {
  font-weight: 600;
}

._activityTime_1uvfz_4175 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_1uvfz_4185 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_1uvfz_4201 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_1uvfz_4213 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_1uvfz_4237 {
  display: flex;
  flex-direction: column;
}

._empName_1uvfz_4247 {
  font-size: 13px;
  font-weight: 600;
}

._empSub_1uvfz_4257 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_1uvfz_4269 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_1uvfz_4269 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_1uvfz_4299 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_1uvfz_4317 {
  display: flex;
  align-items: center;
}

._empRing_1uvfz_4327 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_1uvfz_4339 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_1uvfz_4351 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1uvfz_4371 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_1uvfz_2937 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_1uvfz_3781 {
    position: static;
  }
  ._asideBody_1uvfz_3837 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_1uvfz_2965 {
    grid-template-columns: 1fr;
  }
  ._heroCard_1uvfz_2977 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_1uvfz_2901 {
    padding: 9px 10px;
  }
  ._tableHeader_1uvfz_3211 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_1uvfz_3337 {
    gap: 7px;
  }
  ._filterField_1uvfz_3359 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_1uvfz_2647 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_1uvfz_3549 {
    gap: 5px;
  }
  ._bulkBtnGroup_1uvfz_3653 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_1uvfz_4501 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_1uvfz_4525 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_1uvfz_4547 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_1uvfz_4201 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_1uvfz_4213 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_1uvfz_4237 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_1uvfz_4247 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_1uvfz_4257 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_1uvfz_4269 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_1uvfz_4269 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_1uvfz_4299 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_1uvfz_4317 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_1uvfz_4327 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_1uvfz_4339 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_1uvfz_4351 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1uvfz_4371 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_1uvfz_3897 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_1uvfz_3897 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_1uvfz_3923 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_1uvfz_3897 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_1uvfz_3945 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_1uvfz_3957 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_1uvfz_3973 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_1uvfz_3989 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_1uvfz_3997 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_1uvfz_4011 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_1uvfz_3989 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_1uvfz_4035 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_1uvfz_4035 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._downloadAction_1uvfz_4955 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_1uvfz_4955:hover {
  background: #dcfce7; /* light green hover */
}

/* TAB */
._tabsHeading_1uvfz_1765 {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeader_1uvfz_1723 > * {
  flex-shrink: 0; /* ✅ prevents shrinking */
}

/* HOVER */
._tabsHeading_1uvfz_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

/* 🔥 ACTIVE TAB (IMPORTANT) */
._activeTab_1uvfz_1849 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}
/* Container */
body {
  overflow-x: hidden;
}
._container_8a926_9 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_8a926_23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}

._left_8a926_51 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_8a926_63 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_8a926_63 strong {
  color: #f59e0b;
  font-weight: 600;
}

._title_8a926_91 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_8a926_105 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._primaryBtn_8a926_131,
._secondaryBtn_8a926_133,
._cancelBtn_8a926_135 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_8a926_161 {
  font-size: 16px;
}

._primaryBtn_8a926_131 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

._primaryBtn_8a926_131:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

._secondaryBtn_8a926_133 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_8a926_133:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_8a926_135 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_8a926_135:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_8a926_237 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_8a926_253 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_8a926_253::-webkit-scrollbar {
  width: 6px;
}

._formSection_8a926_253::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_8a926_253::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_8a926_297 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_8a926_311 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_8a926_327 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_8a926_349 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_8a926_365 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_8a926_389 {
  position: relative;
  display: inline-block;
}

._profileAvatar_8a926_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* .avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .avatarPlaceholderIcon {
  color: #f59e0b;
} */

/* .cameraIcon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #f59e0b;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
} */

._cameraIcon_8a926_451:hover {
  transform: scale(1.1);
}

._profileText_8a926_489 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_8a926_501 {
  flex: 1;
}

/* FORM ROW */
._formRow_8a926_511 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_8a926_525 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_8a926_525 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_8a926_549 {
  color: #ef4444;
}

._inputWrapper_8a926_557 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_8a926_569 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_8a926_525 input,
._formGroup_8a926_525 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_8a926_525 input:focus,
._formGroup_8a926_525 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_8a926_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_8a926_633 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_8a926_623 ._inputWrapper_8a926_557 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_8a926_657 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_8a926_657 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_8a926_683 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_8a926_683:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_8a926_711 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_8a926_727 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_8a926_747 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_8a926_765 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_8a926_783 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_8a926_805 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_8a926_821 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_8a926_833 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_8a926_855 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_8a926_805 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_8a926_881 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_8a926_895 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_8a926_907 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_8a926_927 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_8a926_941 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_8a926_951 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_8a926_969 {
  text-align: left;
  margin: 2px 0;
}

._salary_8a926_969 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_8a926_989 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_8a926_1003 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_8a926_1013 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_8a926_1025 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_8a926_1041 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_8a926_1055 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_8a926_237 {
    grid-template-columns: 1fr;
  }

  ._previewSection_8a926_297 {
    position: static;
  }

  ._formSection_8a926_253 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_8a926_9 {
    padding: 16px;
  }

  ._header_8a926_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_8a926_119 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_8a926_131,
  ._secondaryBtn_8a926_133,
  ._cancelBtn_8a926_135 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_8a926_365 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_8a926_511 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_8a926_311 {
    padding: 20px;
  }

  ._title_8a926_91 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_8a926_379 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_8a926_389 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_8a926_399 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_8a926_443 {
  color: #f59e0b;
}

._profileAvatar_8a926_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_8a926_399 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_8a926_1301 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_8a926_451 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_8a926_489 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_8a926_1359 {
  position: relative;
}

._rightColumn_8a926_1367 {
  position: relative;
}

._stickyPreview_8a926_1375 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_8a926_525 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_8a926_525 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_8a926_525 input._form-control_8a926_1387,
._formGroup_8a926_525 select._form-control_8a926_1387 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_8a926_525 input._form-control_8a926_1387:focus,
._formGroup_8a926_525 select._form-control_8a926_1387:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_8a926_525 input._form-control_8a926_1387:hover,
._formGroup_8a926_525 select._form-control_8a926_1387:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_8a926_525 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_8a926_557 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_8a926_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_8a926_1537 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_8a926_1547 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_8a926_525 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_8a926_1573 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_8a926_525 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_8a926_557 {
  position: relative;
  width: 100%;
}

._inputIcon_8a926_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_8a926_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_8a926_633 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_8a926_623 ._inputWrapper_8a926_557 {
  flex: 1;
}

/* Info note */
._infoNote_8a926_1671 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_8a926_1699,
  ._col-3_8a926_1701 {
    width: 100%;
  }

  ._stickyPreview_8a926_1375 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_8a926_1723 {
  display: flex;
  gap: 8px;

  /* ✅ KEY FIXES */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;

  padding: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb;

  /* smooth scroll */
  scroll-behavior: smooth;
}

._tabsHeader_8a926_1723 {
  scroll-snap-type: x mandatory;
}

._tabsHeading_8a926_1765 {
  scroll-snap-align: start;
}

._tabsHeader_8a926_1723::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_8a926_1723::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 10px;
}

._tabsHeader_8a926_1723::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}


/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_8a926_1765 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_8a926_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_8a926_1851 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_8a926_1865 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_8a926_1877 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_8a926_1877:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_8a926_1877:active {
  transform: scale(0.95);
}

._thirdButton_8a926_1865:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_8a926_805 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_8a926_805:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_8a926_1967 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_8a926_1989 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_8a926_821 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_8a926_855 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_8a926_833 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_8a926_821 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_8a926_1989 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_8a926_1967 {
    height: 110px;
  }

  ._previewName_8a926_2089 {
    font-size: 18px;
  }

  ._salaryAmount_8a926_989 {
    font-size: 24px;
  }

  ._previewContent_8a926_2069 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_8a926_765 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_8a926_765:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_8a926_2359 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_8a926_2359:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_8a926_525 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_8a926_525 select:hover {
  border-color: #fbbf24;
}

._formGroup_8a926_525 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_8a926_2477 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_8a926_2499 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_8a926_2513 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_8a926_2527 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_8a926_2541 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_8a926_2555 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_8a926_2583 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_8a926_2601 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_8a926_2615 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_8a926_2631 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_8a926_2649 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_8a926_2649 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_8a926_2677 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_8a926_2677:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_8a926_2713 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_8a926_2727 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_8a926_2747 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_8a926_2761 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_8a926_2773 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_8a926_2649 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_8a926_2649 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_8a926_2747 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_8a926_2649 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_8a926_2677 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_8a926_2747 {
    font-size: 16px;
  }

  ._miniLabel_8a926_2727 {
    font-size: 10px;
  }

  ._miniSub_8a926_2761 {
    font-size: 9px;
  }

  ._miniIcon_8a926_2773 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_8a926_2649 {
    grid-template-columns: 1fr;
  }
}

._page_8a926_2903 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_8a926_2903 *,
._page_8a926_2903 *::before,
._page_8a926_2903 *::after {
  box-sizing: border-box;
}

._pageTitle_8a926_2939 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_8a926_2953 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_8a926_2967 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_8a926_2981 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_8a926_2993 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_8a926_3021 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_8a926_3039 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_8a926_3053 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_8a926_3069 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* .miniGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.miniCard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.14s;
}

.miniCard:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

.miniTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miniIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.miniLabel {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

.miniValue {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.miniSub {
    font-size: 8px;
    color: #94a3b8;
} */

/* TABLE SECTION */
._tableSection_8a926_3209 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_8a926_3227 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_8a926_3249 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_8a926_3263 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_8a926_161 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_8a926_3311 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_8a926_3311:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_8a926_3331 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_8a926_3331:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_8a926_3353 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_8a926_3375 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_8a926_3393 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_8a926_3411 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_8a926_3423,
._filterDate_8a926_3425 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_8a926_3423:focus,
._filterDate_8a926_3425:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_8a926_3473 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_8a926_3473:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_8a926_3525 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_8a926_3539 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_8a926_3539:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_8a926_3565 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_8a926_1 0.15s ease;
}

@keyframes _slideIn_8a926_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_8a926_3611 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_8a926_3625 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
 background: var(--color-primary-light);
    color: #fff; 
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_8a926_3655 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_8a926_3669 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_8a926_3683 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_8a926_3683:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_8a926_3729 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_8a926_3729:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_8a926_3749 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_8a926_3749:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_8a926_3797 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_8a926_3815 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_8a926_3837 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_8a926_3853 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_8a926_3869 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_8a926_3879 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_8a926_3897 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_8a926_3913 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_8a926_3913 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_8a926_3939 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_8a926_3961 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_8a926_3973 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_8a926_3989 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_8a926_4005 {
  width: 100%;
}

._barchartBars_8a926_4013 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_8a926_4027 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_8a926_4005 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_8a926_4051 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_8a926_4051 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_8a926_4079 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_8a926_4093 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_8a926_4119 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_8a926_4131 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_8a926_4143 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_8a926_4169 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_8a926_4169 strong {
  font-weight: 600;
}

._activityTime_8a926_4191 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_8a926_4201 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_8a926_4217 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_8a926_4229 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_8a926_4253 {
  display: flex;
  flex-direction: column;
}

._empName_8a926_4263 {
  font-size: 13px;
  font-weight: 600;
}

._empSub_8a926_4273 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_8a926_4285 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_8a926_4285 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_8a926_4315 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_8a926_4333 {
  display: flex;
  align-items: center;
}

._empRing_8a926_4343 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_8a926_4355 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_8a926_4367 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_8a926_4387 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_8a926_2953 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_8a926_3797 {
    position: static;
  }
  ._asideBody_8a926_3853 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_8a926_2981 {
    grid-template-columns: 1fr;
  }
  ._heroCard_8a926_2993 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_8a926_2649 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_8a926_2903 {
    padding: 9px 10px;
  }
  ._tableHeader_8a926_3227 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_8a926_3353 {
    gap: 7px;
  }
  ._filterField_8a926_3375 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_8a926_2649 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_8a926_3565 {
    gap: 5px;
  }
  ._bulkBtnGroup_8a926_3669 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_8a926_4517 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_8a926_4541 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_8a926_4563 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_8a926_4217 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_8a926_4229 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_8a926_4253 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_8a926_4263 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_8a926_4273 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_8a926_4285 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_8a926_4285 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_8a926_4315 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_8a926_4333 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_8a926_4343 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_8a926_4355 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_8a926_4367 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_8a926_4387 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_8a926_3913 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_8a926_3913 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_8a926_3939 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_8a926_3913 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_8a926_3961 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_8a926_3973 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_8a926_3989 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_8a926_4005 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_8a926_4013 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_8a926_4027 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_8a926_4005 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_8a926_4051 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_8a926_4051 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._downloadAction_8a926_4971 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_8a926_4971:hover {
  background: #dcfce7; /* light green hover */
}

/* TABS HEADER */
/* .tabsHeader {
  display: flex;
  gap: 8px;
  padding: 0 0 16px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #f3f4f6;
  scrollbar-width: thin;
} */

/* TAB */
._tabsHeading_8a926_1765 {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeader_8a926_1723 > * {
  flex-shrink: 0; /* ✅ prevents shrinking */
}
._tabsHeading_8a926_1765 {
  flex-shrink: 0;   /* 🔥 MOST IMPORTANT FIX */
}
/* HOVER */
._tabsHeading_8a926_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

/* 🔥 ACTIVE TAB (IMPORTANT) */
._activeTab_8a926_1851 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

/* ═══════════════════════════════════════════════
   MappingModal.module.css
   MD-size modal — multi-select employee table
═══════════════════════════════════════════════ */

/* ── overlay ── */
._overlay_1hi5b_13 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}

/* ── modal shell ── */
._modal_1hi5b_39 {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.18),
    0 4px 16px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow: hidden;
  animation: _modalIn_1hi5b_1 0.18s ease-out;
}

@keyframes _modalIn_1hi5b_1 {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── header ── */
._header_1hi5b_95 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

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

._headerIcon_1hi5b_125 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._title_1hi5b_149 {
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

._subtitle_1hi5b_165 {
  font-size: 12px;
  color: #64748b;
  margin: 2px 0 0;
}

._closeBtn_1hi5b_177 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  flex-shrink: 0;
}

._closeBtn_1hi5b_177:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

/* ── toolbar ── */
._toolbar_1hi5b_221 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

._searchWrap_1hi5b_239 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

._searchIcon_1hi5b_253 {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  pointer-events: none;
}

._searchInput_1hi5b_267 {
  width: 100%;
  padding: 7px 32px 7px 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #0f172a;
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

._searchInput_1hi5b_267:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

._searchClear_1hi5b_303 {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 2px;
  border-radius: 4px;
}

._searchClear_1hi5b_303:hover {
  color: #ef4444;
}

._selectionInfo_1hi5b_335 {
  flex-shrink: 0;
}

._selectionBadge_1hi5b_343 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-lighter);
  font-size: 11.5px;
  font-weight: 600;
}

._selectionEmpty_1hi5b_369 {
  font-size: 11.5px;
  color: #94a3b8;
}

/* ── error banner ── */
._errorBanner_1hi5b_381 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 20px 4px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── scrollable table area ── */
._tableWrap_1hi5b_411 {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
}

._tableWrap_1hi5b_411::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

._tableWrap_1hi5b_411::-webkit-scrollbar-track {
  background: #f8fafc;
}

._tableWrap_1hi5b_411::-webkit-scrollbar-thumb {
  background: var(--color-primary-lighter);
  border-radius: var(--radius-pill);
}

._tableWrap_1hi5b_411::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ── table ── */
._table_1hi5b_411 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

._thead_1hi5b_475 {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;

}

._th_1hi5b_475 {
  /* padding: 9px 12px; */
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

._thCheck_1hi5b_515 {
  width: 40px;
  padding: 10px !important;
}

._thStatus_1hi5b_525 {
  width: 70px;
}

/* ── rows ── */
._row_1hi5b_535 {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s;
}

._row_1hi5b_535:hover {
  background: #f8fafc;
}

._rowSelected_1hi5b_555 {
  background: var(--color-primary-lightest) !important;
}

._rowSelected_1hi5b_555:hover {
  background: var(--color-violet-bg-alt) !important;
}

._td_1hi5b_571 {
  padding: 9px 12px;
  vertical-align: middle;
  color: #334155;
}

._tdCheck_1hi5b_583 {
  padding-left: 20px;
  width: 40px;
}

/* ── checkbox ── */
._checkboxLabel_1hi5b_597 {
  display: flex;
  align-items: center;
  cursor: pointer;
}

._checkbox_1hi5b_597 {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── employee cell ── */
._empCell_1hi5b_625 {
  display: flex;
  align-items: center;
  gap: 9px;
}

._avatar_1hi5b_637 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

._empName_1hi5b_665 {
  font-weight: 500;
  color: #0f172a;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

._codeChip_1hi5b_683 {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._email_1hi5b_705 {
  color: #475569;
  font-size: 12px;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

._thumb_1hi5b_725 {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

._noPhoto_1hi5b_741 {
  color: #cbd5e1;
  font-size: 12px;
}

/* ── empty state ── */
._emptyCell_1hi5b_753 {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._emptyIcon_1hi5b_767 {
  display: block;
  margin: 0 auto 8px;
  color: #cbd5e1;
}

/* ── skeleton ── */
._skeletonRow_1hi5b_781 {
  border-bottom: 1px solid #f1f5f9;
  animation: _shimmer_1hi5b_1 1.4s ease infinite;
  padding: 10px !important;
}

._skeletonAvatar_1hi5b_793 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e2e8f0;
  flex-shrink: 0;
}

._skeletonCell_1hi5b_809 {
  background: #e2e8f0;
  border-radius: 4px;
}

._skeletonLine_1hi5b_819 {
  height: 11px;
  background: #e2e8f0;
  border-radius: 5px;
}

@keyframes _shimmer_1hi5b_1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ── pagination ── */
._pagination_1hi5b_857 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  gap: 8px;
  background: #fff;
}

._paginationInfo_1hi5b_879 {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
}

._paginationControls_1hi5b_891 {
  display: flex;
  align-items: center;
  gap: 3px;
}

._pageBtn_1hi5b_903 {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

._pageBtn_1hi5b_903:hover:not(:disabled) {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary-lighter);
  color: var(--color-primary);
}

._pageBtn_1hi5b_903:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._pageBtnActive_1hi5b_959 {
  background: var(--gradient-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-primary-sm);
}

._ellipsis_1hi5b_973 {
  padding: 0 4px;
  color: #94a3b8;
  font-size: 12px;
  user-select: none;
}

/* ── footer ── */
._footer_1hi5b_989 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  background: #fafbfc;
}

._saveBadge_1hi5b_1011 {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 0px 6px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* ── spinner ── */
._spinner_1hi5b_1033 {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: _spin_1hi5b_1033 0.7s linear infinite;
  display: inline-block;
}

@keyframes _spin_1hi5b_1033 {
  to {
    transform: rotate(360deg);
  }
}

/* ── responsive ── */
@media (max-width: 600px) {
  ._modal_1hi5b_39 {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 95vh;
    align-self: flex-end;
  }

  ._overlay_1hi5b_13 {
    align-items: flex-end;
  }

  ._empName_1hi5b_665 {
    max-width: 110px;
  }

  ._email_1hi5b_705 {
    max-width: 120px;
  }
}._container_1kocm_1 {
  padding: 16px;
}

._header_1kocm_9 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

._header_1kocm_9 h4 {
  font-size: 16px;
  font-weight: 600;
}

._header_1kocm_9 p {
  font-size: 12px;
  color: #6b7280;
}

._actions_1kocm_41 {
 display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;  
}

._select_1kocm_55 {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}

._saveBtn_1kocm_69 {
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-primary-sm);
  transition: all .2s ease;
}

._tableWrapper_1kocm_93 {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow-x: auto;
  min-height: 500px;
  /* table scroll */
   /* max-height: 400px;     
  overflow-y: auto;     */
}

._table_1kocm_93 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._table_1kocm_93 th {
  background: #f9fafb;
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
   text-align: center;
  vertical-align: middle;   /* ✅ important */
  
}

._table_1kocm_93 td {
  padding: 10px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

._table_1kocm_93 td:first-child {
  text-align: left;
}

._groupRow_1kocm_163 td {
  background: #f3f4f6;
  font-weight: 600;
}

/* checkbox table head */
._checkboxLabel_1kocm_175 {
  display: flex;              /* ✅ use flex */
  align-items: center;        /* vertical center */
  justify-content: center;    /* ✅ horizontal center */
  gap: 6px;
  width: 100%;                /* ✅ fill full column */
}
/* checkbox table body */
._rowLabel_1kocm_191 {
  display: inline-flex;   /* ✅ keeps inline + flex */
  align-items: center;    /* ✅ vertical alignment */
  gap: 6px;
  font-size: 10px;
  color: #111827;               /* ✅ space between checkbox & text */
}

._table_1kocm_93 td {
  padding: 10px;
  border-top: 1px solid #e5e7eb;

  text-align: center;        /* horizontal center */
  vertical-align: middle;    /* vertical center */
}

._table_1kocm_93 td {
  padding: 10px;
  border-top: 1px solid #e5e7eb;

  text-align: center;
  vertical-align: middle;
}

._table_1kocm_93 td input[type="checkbox"] {
  margin: 0;               /* ✅ remove auto centering */
}
._table_1kocm_93 th:first-child {
  text-align: left;        /* ✅ move "Module" to left */
  padding-left: 16px;      /* optional spacing like your UI */
}

._table_1kocm_93 tbody tr:not(._groupRow_1kocm_163):hover {
  background-color: #f9fafb;
}

._tableWrapper_1kocm_93 {
  max-height: 400px;
  overflow-y: auto;
}

._table_1kocm_93 thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f9fafb;
}

/* ── AI Toggle Switch ── */
._toggleSwitch_1kocm_289 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

._toggleSwitch_1kocm_289 input {
  display: none;
}

._toggleSlider_1kocm_313 {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

._toggleSlider_1kocm_313::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

._toggleSwitch_1kocm_289 input:checked + ._toggleSlider_1kocm_313 {
  background: var(--color-primary);
}

._toggleSwitch_1kocm_289 input:checked + ._toggleSlider_1kocm_313::after {
  transform: translateX(16px);
}

._toggleLabel_1kocm_375 {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

._toggleSwitch_1kocm_289 input:checked ~ ._toggleLabel_1kocm_375 {
  color: var(--color-primary);
}
._table_1kocm_93 .form-check-input {
  width: 13px;
  height: 13px;
}/* 
.miniGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.miniGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}


.miniCard {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; 
}

.miniCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}


.miniTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.miniLabel {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miniValue {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}


.miniSub {
  font-size: 10px;
  color: #9ca3af;
}


.miniIcon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}



@media (max-width: 1200px) {
  .miniGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}


@media (max-width: 992px) {
  .miniGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .miniValue {
    font-size: 18px;
  }
}


@media (max-width: 576px) {
  .miniGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .miniCard {
    padding: 10px;
    border-radius: 10px;
  }

  .miniValue {
    font-size: 16px;
  }

  .miniLabel {
    font-size: 10px;
  }

  .miniSub {
    font-size: 9px;
  }

  .miniIcon {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 400px) {
  .miniGrid {
    grid-template-columns: 1fr;
  }
} */

._page_6x89j_253 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_6x89j_253 *,
._page_6x89j_253 *::before,
._page_6x89j_253 *::after {
    box-sizing: border-box;
}

._pageTitle_6x89j_289 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}


._layout_6x89j_305 {
    display: grid;
    grid-template-columns: 1fr 232px;
    gap: 10px;
    align-items: start;
}

._layoutMain_6x89j_319 {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* 
.statsRow {
    display: grid;
    grid-template-columns: 182px 1fr;
    gap: 7px;
}

.heroCard {
    grid-row: 1 / 3;
    background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 108px;
    position: relative;
    overflow: hidden;
}

.sparkline {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.22;
    width: 92px;
    height: 38px;
}

.heroLabel {
    font-size: 10px;
    color: #92400e;
    font-weight: 500;
    margin: 0 0 3px;
}

.heroValue {
    font-size: 32px;
    font-weight: 800;
    color: #92400e;
    margin: 0;
    line-height: 1;
}

.heroGrowth {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 10px;
    font-weight: 600;
}
 */

/* GRID DEFAULT (Desktop) */
._miniGrid_6x89j_3 {
  display: flex;              
  flex-wrap: nowrap;          
  overflow-x: auto;           
  gap: 12px;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

/* .miniCard {
  flex: 0 0 auto;            
  min-width: 100px;         
  scroll-snap-align: start;
} */
/* .heroCard{
  flex: 0 0 auto;            
  min-width: 170px;         
  scroll-snap-align: start;
} */


/* Large screens (laptop) */
@media (max-width: 1400px) {
    ._miniGrid_6x89j_3 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    ._miniGrid_6x89j_3 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Small tablet */
@media (max-width: 768px) {
    ._miniGrid_6x89j_3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile → horizontal scroll */
@media (max-width: 576px) {
    ._miniGrid_6x89j_3 {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
    }

    ._miniGrid_6x89j_3::-webkit-scrollbar {
        height: 6px;
    }

    ._miniGrid_6x89j_3::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }

    ._miniCard_6x89j_29 {
        min-width: 160px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* CARD */
._miniCard_6x89j_29 {
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

._miniCard_6x89j_29:hover {
    transform: translateY(-2px);
}

/* TEXT */
._miniLabel_6x89j_79 {
    font-size: 11px;
    font-weight: 600;
}

._miniValue_6x89j_97 {
    font-size: 18px;
    font-weight: 700;
}

/* OPTIONAL: top section */
._miniTop_6x89j_65 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* OPTIONAL: icon */
._miniIcon_6x89j_123 {
    width: 17px;
    height: 17px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 3px;
}

/* table section  */

._tableSection_6x89j_669 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_6x89j_687 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_6x89j_709 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_6x89j_723 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_6x89j_737 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s, box-shadow 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_6x89j_767 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_6x89j_767:hover {
    background: #f5c036;
    box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_6x89j_787 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_6x89j_787:hover {
    background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_6x89j_809 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._filterField_6x89j_831 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 120px;
    max-width: 170px;
    min-width: 100px;
}

._filterLabel_6x89j_849 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

._filterInputWrap_6x89j_867 {
    position: relative;
    display: flex;
    align-items: center;
}

._filterSelect_6x89j_879,
._filterDate_6x89j_881 {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #ffffff;
    font-size: 10px;
    color: #374151;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.13s, box-shadow 0.13s;
}

._filterSelect_6x89j_879:focus,
._filterDate_6x89j_881:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_6x89j_925 {
    position: absolute;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    z-index: 1;
}

._filterClearX_6x89j_925:hover {
    background: #cbd5e1;
    color: #1e293b;
}

._filterActions_6x89j_973 {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}

._filterClearBtn_6x89j_987 {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._filterClearBtn_6x89j_987:hover {
    background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_6x89j_1013 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
    flex-shrink: 0;
    flex-wrap: wrap;
    animation: _slideIn_6x89j_1 0.15s ease;
}

@keyframes _slideIn_6x89j_1 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._bulkSelectedLeft_6x89j_1061 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

._bulkCountBadge_6x89j_1075 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 9999px;
     background: var(--color-primary-light);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

._bulkSelectedText_6x89j_1105 {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

._bulkBtnGroup_6x89j_1119 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

._bulkActionBtn_6x89j_1133 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 10px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

._bulkActionBtn_6x89j_1133:hover {
    background: #f8fafc;
}

._bulkActionBtnDanger_6x89j_1175 {
    color: #dc2626;
    border-color: #fecaca;
}

._bulkActionBtnDanger_6x89j_1175:hover {
    background: #fef2f2;
    border-color: #f87171;
}

._bulkDeselect_6x89j_1195 {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

._bulkDeselect_6x89j_1195:hover {
    background: #f1f5f9;
    color: #475569;
}

/* tabs  */

._tabs_6x89j_1241 {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid #e5e7eb;
    padding: 0 8px;
}

/* Base tab */
._tabBtn_6x89j_1257 {
    position: relative;
    padding: 10px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Hover */
._tabBtn_6x89j_1257:hover {
    color: #c29606;
}

/* Active tab */
._activeTab_6x89j_1293 {
    color: #a88837;
}

/* Underline */
._activeTab_6x89j_1293::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: #ffca40;
    border-radius: 2px;
}

._badge_6x89j_1325 {
    background: #6b7280;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Stats Accordion Styles */
._statsAccordion_6x89j_1345 {
  /* margin-bottom: 24px; */
  /* background: white; */
  border-radius: 12px;
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}

._accordionHeader_6x89j_1361 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}

._accordionHeader_6x89j_1361:hover {
  background-color: #f9fafb;
}

._accordionTitle_6x89j_1391 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 15px;
}

._accordionTitle_6x89j_1391 svg {
  color: #f59e0b;
}

._accordionToggle_6x89j_1417 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_6x89j_1417:hover {
  color: #374151;
}

._accordionContent_6x89j_1449 {
  padding: 20px;
  animation: _slideDown_6x89j_1 0.3s ease-out;
}

@keyframes _slideDown_6x89j_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._accordionHeader_6x89j_1361 {
    padding: 12px 16px;
  }
  
  ._accordionContent_6x89j_1449 {
    padding: 16px;
  }
}

/* ═════════════════════════════════════════════════════════════
   RolesAddModal.module.css — Add / Edit Role Modal
   Matching the AssignDesignationModal / DeleteConfirmModal styling
═════════════════════════════════════════════════════════════ */

/* ── Override Bootstrap modal backdrop & dialog ── */
.customModal {
    max-width: 420px;
    margin: auto;
}

.customModal .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 8px 16px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    animation: _modalIn_6x89j_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes _modalIn_6x89j_1 {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
._modalHeader_6x89j_1575 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

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

._headerIconBox_6x89j_1605 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-sm);
    color: var(--color-white);
}

._headerIconSvg_6x89j_1631 {
    width: 18px;
    height: 18px;
}

._modalHeader_6x89j_1575 h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px !important;
    line-height: 1.3;
}

._subText_6x89j_1657 {
    font-size: 11px !important;
    color: #64748b;
    line-height: 1.5;
    margin: 0 !important;
}

._closeIcon_6x89j_1671 {
    width: 20px;
    height: 20px;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color 0.13s, background 0.13s;
    padding: 2px;
}

._closeIcon_6x89j_1671:hover {
    color: #1e293b;
    background: #f1f5f9;
}

/* ══════════════════════════════
   BODY / CONTENT
══════════════════════════════ */
._modalContent_6x89j_1709 {
    padding: 20px 20px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Label ── */
._label_6x89j_1725 {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px !important;
}

/* ── Input Wrapper ── */
._inputBox_6x89j_1747 {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

._icon_6x89j_1761 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

._inputBox_6x89j_1747 .form-control {
    height: 38px;
   
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: none !important;
}

._inputBox_6x89j_1747 .form-control:hover:not(:disabled) {
    border-color: #cbd5e1;
}

._inputBox_6x89j_1747 .form-control:focus {
   border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-lightest) !important;
}

._inputBox_6x89j_1747 .form-control.is-invalid {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15) !important;
    background-image: none;
    padding-right: 12px;
}

._inputBox_6x89j_1747 .invalid-feedback {
    font-size: 10px;
    color: #dc2626;
    margin-top: 4px;
    font-weight: 500;
    width: 100%;
    display: block;
}

._modalFooter_6x89j_1861 {
    display: flex;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid #f1f5f9;
    margin-top: 12px;
}

._cancelBtn_6x89j_1877,
._primaryBtns_6x89j_1879 {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.14s ease;
}

._cancelBtn_6x89j_1877 {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

._cancelBtn_6x89j_1877:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

._cancelBtn_6x89j_1877:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._primaryBtns_6x89j_1879 {
   background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-primary-sm);
}

._primaryBtns_6x89j_1879:hover:not(:disabled) {
    background: var(--gradient-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

._primaryBtns_6x89j_1879:disabled {
    background: var(--gradient-primary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

/* ── Spinner (Bootstrap's) ── */
._primaryBtns_6x89j_1879 .spinner-border-sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 480px) {
    .customModal {
        max-width: calc(100% - 32px);
        margin: 0 16px;
    }

    ._modalHeader_6x89j_1575 {
        padding: 14px 14px 12px;
    }

    ._modalContent_6x89j_1709 {
        padding: 16px 14px 4px;
    }

    ._modalFooter_6x89j_1861 {
        flex-direction: column;
        padding: 12px 14px 16px;
    }
}

/* ══════════════════════════════
   ROLE TYPE RADIO CARDS
══════════════════════════════ */
._roleTypeGroup_6x89j_2051 {
  display: flex;
  gap: 10px;
}

._roleTypeCard_6x89j_2061 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
}

._roleTypeCard_6x89j_2061:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
}

._roleTypeCardActive_6x89j_2099 {
   border-color: var(--color-primary) !important;
  background: var(--color-primary-lightest) !important;
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._roleTypeRadio_6x89j_2111 {
  display: none;
}

._roleTypeIcon_6x89j_2119 {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

._roleTypeTitle_6x89j_2131 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

._roleTypeDesc_6x89j_2145 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
  line-height: 1.4;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_u5u1n_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._wrap_u5u1n_35 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

._pageTitle_u5u1n_57 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._loadingState_u5u1n_71 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
}

._spinner_u5u1n_91 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_u5u1n_91 0.7s linear infinite;
}

@keyframes _spin_u5u1n_91 {
  to {
    transform: rotate(360deg);
  }
}

._breadcrumb_u5u1n_121 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_u5u1n_121 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_u5u1n_121 strong {
  color: var(--color-primary);
}

._backBtn_u5u1n_155 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._backBtn_u5u1n_155:hover {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

._btn_u5u1n_197 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_u5u1n_231 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_u5u1n_231:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 7px rgba(245, 158, 11, 0.38);
}

._btnPrimary_u5u1n_231:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_u5u1n_261 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

._btnSecondary_u5u1n_261:hover {
  background: #f3f4f6;
}

._btnDanger_u5u1n_281 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._btnDanger_u5u1n_281:hover {
  background: #fef2f2;
}

._tableSection_u5u1n_301 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_u5u1n_319 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_u5u1n_341 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_u5u1n_355 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_u5u1n_369 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_u5u1n_391 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 160px;
  min-width: 100px;
}

._filterLabel_u5u1n_409 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_u5u1n_427 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_u5u1n_439,
._filterInput_u5u1n_427 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_u5u1n_439:focus,
._filterInput_u5u1n_427:focus {
   border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._filterClearX_u5u1n_485 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_u5u1n_485:hover {
  background: #fbbf24;
  color: #111827;
}

._filterActions_u5u1n_531 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_u5u1n_545 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_u5u1n_545:hover {
  background: #fef2f2 !important;
}

._header_u5u1n_563 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

._headerLeft_u5u1n_589 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._title_u5u1n_601 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._headerActions_u5u1n_615 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* 2-col split: main | sidebar */
._formLayout_u5u1n_631 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  ._formLayout_u5u1n_631 {
    grid-template-columns: 1fr;
  }
}

._leftCol_u5u1n_657 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._rightCol_u5u1n_669 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form card ── */
._formCard_u5u1n_683 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._sectionHeading_u5u1n_699 {
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-lightest);
}

/* ── Responsive field grids ── */
._formGrid3_u5u1n_717 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

._formGrid2_u5u1n_731 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_u5u1n_717 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._formGrid3_u5u1n_717,
  ._formGrid2_u5u1n_731 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_u5u1n_773 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_u5u1n_785 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_u5u1n_797 {
  color: #ef4444;
}

._input_u5u1n_805 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._input_u5u1n_805:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._inputError_u5u1n_845 {
  border-color: #f87171 !important;
}

._textarea_u5u1n_853 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}

._textarea_u5u1n_853:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._errorText_u5u1n_889 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

/* ── Approver rows ── */
._approverHeader_u5u1n_903 {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 10px;
  padding: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

._approverRow_u5u1n_931 {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

._removeBtn_u5u1n_947 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}

._removeBtn_u5u1n_947:hover {
  background: #fef2f2;
}

/* ── File upload ── */
._fileLabel_u5u1n_987 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    border-color 0.13s,
    background 0.13s;
}

._fileLabel_u5u1n_987:hover {
  border-color: var(--color-primary);
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary-dark);
}

._fileList_u5u1n_1035 {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._fileItem_u5u1n_1053 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

._fileName_u5u1n_1075 {
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

._removeFileBtn_u5u1n_1093 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._removeFileBtn_u5u1n_1093:hover {
  background: #fecaca;
}

._pageTitleRow_u5u1n_1131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

._projectIcon_u5u1n_1159 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 3-col info grid */
._mainGrid_u5u1n_1189 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  ._mainGrid_u5u1n_1189 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  ._mainGrid_u5u1n_1189 {
    grid-template-columns: 1fr;
  }
}

/* Generic card */
._card_u5u1n_1227 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._cardTitle_u5u1n_1243 {
  font-size: 10px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Detail key-value rows */
._detailRow_u5u1n_1263 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

._detailLabel_u5u1n_1279 {
  font-size: 11px;
  color: #6b7280;
  min-width: 110px;
  flex-shrink: 0;
}

._detailVal_u5u1n_1293 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Member / approver pills */
._memberGrid_u5u1n_1309 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

._memberCard_u5u1n_1325 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

._memberAvatar_u5u1n_1345 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

._memberInfo_u5u1n_1373 {
  flex: 1;
  min-width: 0;
}

._memberName_u5u1n_1383 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._memberRole_u5u1n_1401 {
  font-size: 10px;
  color: #6b7280;
}

._emptyMsg_u5u1n_1411 {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Description */
._description_u5u1n_1425 {
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* Attachments */
._attachmentList_u5u1n_1441 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._attachmentItem_u5u1n_1453 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

._attachmentName_u5u1n_1473 {
  flex: 1;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._downloadBtn_u5u1n_1491 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
}

._downloadBtn_u5u1n_1491:hover {
  background: #fef3c7;
  color: #f59e0b;
  border-color: #fde68a;
}

._bulkBtnGroup_u5u1n_1537 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  ._miniGrid_u5u1n_1553 {
    grid-template-columns: 1fr 1fr;
  }

  ._bulkSelectedBar_u5u1n_1561 {
    gap: 5px;
  }

  ._bulkBtnGroup_u5u1n_1537 {
    flex-wrap: wrap;
  }
}

._bulkActionBtnDanger_u5u1n_1579 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_u5u1n_1579:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkSelectedBar_u5u1n_1561 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);

  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_u5u1n_1 0.15s ease;
}

._bulkCountBadge_u5u1n_1625 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;

  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_u5u1n_1657 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkSelectedLeft_u5u1n_1671 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkBtnGroup_u5u1n_1537 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_u5u1n_1579 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_u5u1n_1579:hover {
  background: #f8fafc;
}

._bulkActionBtn_u5u1n_1579 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_u5u1n_1579:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_u5u1n_1579 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_u5u1n_1579:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* ════════════════════════════════════════════════════════════════
   ProjectView redesign — ADDED classes only.
   Everything above is your original file, untouched. The component
   reuses your existing .wrap, .card, .btn, .btnPrimary, .breadcrumb,
   .backBtn, .spinner, .loadingState and .emptyMsg as-is; the classes
   below are new and do not override anything you already had.
   ════════════════════════════════════════════════════════════════ */

/* breadcrumb pieces */
._bcLink_u5u1n_1829 {
  cursor: pointer;
  font-weight: 500;
}

._bcLink_u5u1n_1829:hover {
  color: var(--color-primary);
}

._bcSep_u5u1n_1847 {
  color: #cbd5e1;
}

._bcCurrent_u5u1n_1855 {
  color: #0f172a;
  font-weight: 600;
}

/* hero */
._hero_u5u1n_1867 {
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._heroTop_u5u1n_1889 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

._heroMain_u5u1n_1905 {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

._heroIcon_u5u1n_1919 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
 box-shadow: var(--shadow-primary-sm);
}

._heroTitleWrap_u5u1n_1949 {
  min-width: 0;
}

._heroName_u5u1n_1957 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.15;
  word-break: break-word;
}

._heroId_u5u1n_1977 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 10px;
}

._heroBadges_u5u1n_1997 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* hero stat strip */
._heroStats_u5u1n_2011 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border-top: 1px solid #f1f3f7;
  padding-top: 18px;
}

._statItem_u5u1n_2027 {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

._statIcon_u5u1n_2041 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
   background: var(--color-primary-lightest);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statLabel_u5u1n_2065 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}

._statValue_u5u1n_2083 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* content grid */
._grid_u5u1n_2103 {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 16px;
  align-items: start;
}

._colMain_u5u1n_2117,
._colSide_u5u1n_2119 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* card header row (sits inside your existing .card) */
._cardHead_u5u1n_2135 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* contextual tweak so your .cardTitle drops its underline only inside
   the new header row — your base .cardTitle rule stays untouched */
._cardHead_u5u1n_2135 ._cardTitle_u5u1n_1243 {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
  letter-spacing: -0.01em;
  color: #0f172a;
}

._cardIcon_u5u1n_2171 {
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._countPill_u5u1n_2195 {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px 10px;
}

/* definition grid */
._dlGrid_u5u1n_2215 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

._dlRow_u5u1n_2227 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f3f5f9;
}

._dlLabel_u5u1n_2245 {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}
.__desc_u5u1n_2257 ._dlValue_u5u1n_2257 {
  font-size: 9px;
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* attachments (new — separate from your .attachment* classes) */
._attachList_u5u1n_2275 {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

._attachItem_u5u1n_2287 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 11px;
  transition: all 0.14s;
}

._attachItem_u5u1n_2287:hover {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.12);
}

._attachIcon_u5u1n_2321 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #eef1f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._attachInfo_u5u1n_2345 {
  flex: 1;
  min-width: 0;
}

._attachName_u5u1n_2355 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._attachMeta_u5u1n_2373 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 1px;
}

._attachDownload_u5u1n_2387 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #e6e8ee;
  background: #fff;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.14s;
}

._attachDownload_u5u1n_2387:hover {
  background: #fff7ed;
  color: #d97706;
  border-color: #fed7aa;
}

/* people lists (new — separate from your .member* classes) */
._peopleList_u5u1n_2431 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._personRow_u5u1n_2443 {
  display: flex;
  align-items: center;
  gap: 11px;
}

._avatar_u5u1n_2455 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

._personInfo_u5u1n_2485 {
  flex: 1;
  min-width: 0;
}

._personName_u5u1n_2495 {
  font-size: 10px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._personRole_u5u1n_2513 {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 1px;
}

/* badges (new) */
._badge_u5u1n_2529 {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

._toneBlue_u5u1n_2549 {
  background: #e0f2fe;
  color: #0369a1;
}

._toneGreen_u5u1n_2559 {
  background: #dcfce7;
  color: #15803d;
}

._toneRed_u5u1n_2569 {
  background: #fee2e2;
  color: #b91c1c;
}

._toneAmber_u5u1n_2579 {
  background: #fef3c7;
  color: #b45309;
}

._toneGrey_u5u1n_2589 {
  background: #f1f5f9;
  color: #475569;
}

/* responsive for the new layout */
@media (max-width: 960px) {
  ._grid_u5u1n_2103 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  ._heroStats_u5u1n_2011 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }

  ._dlGrid_u5u1n_2215 {
    grid-template-columns: 1fr;
  }

  ._heroName_u5u1n_1957 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  ._heroStats_u5u1n_2011 {
    grid-template-columns: 1fr;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_zkzgv_15 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._wrap_zkzgv_37 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

._pageTitle_zkzgv_59 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}


._loadingState_zkzgv_75 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_zkzgv_97 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #ffca40;
  border-radius: 50%;
  animation: _spin_zkzgv_97 0.7s linear infinite;
}

@keyframes _spin_zkzgv_97 {
  to {
    transform: rotate(360deg);
  }
}


._breadcrumb_zkzgv_129 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
._breadcrumb_zkzgv_129 span:last-child {
  color: #1e293b;
  font-weight: 500;
}
._breadcrumb_zkzgv_129 strong {
  color: #1e293b;
}

._backBtn_zkzgv_159 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
._backBtn_zkzgv_159:hover {
  background: #f8fafc;
}


._btn_zkzgv_197 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_zkzgv_231 {
  background: #ffca40;
  color: #1e293b;
}
._btnPrimary_zkzgv_231:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}
._btnPrimary_zkzgv_231:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_zkzgv_257 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
._btnSecondary_zkzgv_257:hover {
  background: #f8fafc;
}

._btnDanger_zkzgv_275 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
._btnDanger_zkzgv_275:hover {
  background: #fef2f2;
}

._tableSection_zkzgv_293 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_zkzgv_311 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_zkzgv_333 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}
._sectionSub_zkzgv_345 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_zkzgv_359 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_zkzgv_381 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_zkzgv_399 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_zkzgv_417 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_zkzgv_429,
._filterInput_zkzgv_417 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}
._filterSelect_zkzgv_429:focus,
._filterInput_zkzgv_417:focus {
  border-color: #94a3b8;
}

._filterClearX_zkzgv_471 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}
._filterClearX_zkzgv_471:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_zkzgv_515 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}
._filterClearBtn_zkzgv_527 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
._filterClearBtn_zkzgv_527:hover {
  background: #fef2f2 !important;
}


._header_zkzgv_545 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

._headerLeft_zkzgv_569 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
._title_zkzgv_579 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
._headerActions_zkzgv_591 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}


._formLayout_zkzgv_607 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  ._formLayout_zkzgv_607 {
    grid-template-columns: 1fr;
  }
}

._leftCol_zkzgv_633 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._rightCol_zkzgv_643 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form card ── */
._formCard_zkzgv_657 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
}

._sectionHeading_zkzgv_671 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Responsive field grids ── */
._formGrid3_zkzgv_691 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}
._formGrid2_zkzgv_703 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}
._formGrid1_zkzgv_715 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_zkzgv_691 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  ._formGrid3_zkzgv_691,
  ._formGrid2_zkzgv_703 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_zkzgv_755 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_zkzgv_767 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}
._required_zkzgv_777 {
  color: #ef4444;
}

._input_zkzgv_785 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}
._input_zkzgv_785:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}
._inputError_zkzgv_821 {
  border-color: #f87171 !important;
}

._select_zkzgv_829 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}
._select_zkzgv_829:focus {
  border-color: #d1d1d1;
  box-shadow: 0 0 0 2px rgba(228, 229, 230, 0.15);
}
._selectError_zkzgv_871 {
  border-color: #f87171 !important;
}

._textarea_zkzgv_879 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}
._textarea_zkzgv_879:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._errorText_zkzgv_913 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

._componentHeader_zkzgv_925 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

._componentRow_zkzgv_947 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

@media (max-width: 680px) {
  ._componentHeader_zkzgv_925 {
    grid-template-columns: 1fr 1fr 36px;
  }
  ._componentRow_zkzgv_947 {
    grid-template-columns: 1fr 1fr 36px;
  }
  ._componentRow_zkzgv_947 > div:first-child {
    grid-column: 1 / -1;
  }
}

._removeBtn_zkzgv_987 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}
._removeBtn_zkzgv_987:hover {
  background: #fef2f2;
}
._removeBtn_zkzgv_987:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Hint / helper text ── */
._hintText_zkzgv_1033 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Alert ── */
._alertDanger_zkzgv_1047 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #dc2626;
  margin-top: 10px;
}


._pageTitleRow_zkzgv_1069 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
._pageTitleLeft_zkzgv_1083 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._appraisalIcon_zkzgv_1095 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 3-col info grid */
._mainGrid_zkzgv_1125 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  ._mainGrid_zkzgv_1125 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  ._mainGrid_zkzgv_1125 {
    grid-template-columns: 1fr;
  }
}

/* 2-col info grid */
._twoGrid_zkzgv_1159 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  ._twoGrid_zkzgv_1159 {
    grid-template-columns: 1fr;
  }
}

/* Generic card */
._card_zkzgv_1183 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

._cardTitle_zkzgv_1197 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Detail key-value rows */
._detailRow_zkzgv_1217 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}
._detailLabel_zkzgv_1231 {
  font-size: 11px;
  color: #6b7280;
  min-width: 110px;
  flex-shrink: 0;
}
._detailVal_zkzgv_1243 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Member / employee pills */
._memberGrid_zkzgv_1259 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 240px;
  overflow-y: auto;
}

._memberCard_zkzgv_1275 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

._memberAvatar_zkzgv_1295 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

._memberInfo_zkzgv_1323 {
  flex: 1;
  min-width: 0;
}
._memberName_zkzgv_1331 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._memberSub_zkzgv_1347 {
  font-size: 10px;
  color: #6b7280;
}
._emptyMsg_zkzgv_1355 {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Components table in view */
._componentTable_zkzgv_1369 {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
._componentTable_zkzgv_1369 th {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
._componentTable_zkzgv_1369 td {
  font-size: 11px;
  color: #374151;
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
}
._componentTable_zkzgv_1369 tr:last-child td {
  border-bottom: none;
}
._componentTable_zkzgv_1369 tr:hover td {
  background: #fafbfc;
}

/* Tags / multi-value chips */
._tagList_zkzgv_1429 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
._tag_zkzgv_1429 {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
._tagGreen_zkzgv_1463 {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
._tagYellow_zkzgv_1473 {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
._tagGrey_zkzgv_1483 {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
._bulkBtnGroup_zkzgv_1493 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  ._miniGrid_zkzgv_1507 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_zkzgv_1513 {
    gap: 5px;
  }
  ._bulkBtnGroup_zkzgv_1493 {
    flex-wrap: wrap;
  }
}
._bulkActionBtnDanger_zkzgv_1527 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_zkzgv_1527:hover {
  background: #fef2f2;
  border-color: #f87171;
}
._bulkSelectedLeft_zkzgv_1545 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
._bulkSelectedBar_zkzgv_1513 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_zkzgv_1 0.15s ease;
}
._bulkCountBadge_zkzgv_1579 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_zkzgv_1609 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_zkzgv_1493 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_zkzgv_1527 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_zkzgv_1527:hover {
  background: #f8fafc;
}
._bulkActionBtn_zkzgv_1527 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_zkzgv_1527:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_zkzgv_1527 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_zkzgv_1527:hover {
  background: #fef2f2;
  border-color: #f87171;
}
._reactSelect_zkzgv_1745 {
  width: 100%;
}

._reactSelect_zkzgv_1745 .rs__control {
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

._reactSelect_zkzgv_1745 .rs__control:hover {
  border-color: #f59e0b;
}

._reactSelect_zkzgv_1745 .rs__control--is-focused {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

._reactSelect_zkzgv_1745 .rs__value-container {
  padding: 0 10px;
}

._reactSelect_zkzgv_1745 .rs__input-container {
  margin: 0;
  padding: 0;
}

._reactSelect_zkzgv_1745 .rs__placeholder {
  color: #9ca3af;
  font-size: 12px;
}

._reactSelect_zkzgv_1745 .rs__single-value {
  font-size: 12px;
  color: #111827;
}

._reactSelect_zkzgv_1745 .rs__menu {
  z-index: 9999;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}

._reactSelect_zkzgv_1745 .rs__option {
  padding: 8px 10px;
  cursor: pointer;
}

._reactSelect_zkzgv_1745 .rs__option--is-focused {
  background: #fef3c7;
}

._reactSelect_zkzgv_1745 .rs__option--is-selected {
  background: #f59e0b;
  color: #111827;
}

._reactSelect_zkzgv_1745 .rs__indicator-separator {
  display: none;
}

._reactSelect_zkzgv_1745 .rs__dropdown-indicator {
  padding: 6px;
  color: #9ca3af;
}

._reactSelect_zkzgv_1745 .rs__dropdown-indicator:hover {
  color: #f59e0b;
}
/* Container */
body {
  overflow-x: hidden;
}
._container_1hkb7_9 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_1hkb7_23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}

._left_1hkb7_51 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_1hkb7_63 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_1hkb7_63 strong {
  color: #f59e0b;
  font-weight: 600;
}

._title_1hkb7_91 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_1hkb7_105 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._primaryBtn_1hkb7_131,
._secondaryBtn_1hkb7_133,
._cancelBtn_1hkb7_135 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_1hkb7_161 {
  font-size: 16px;
}

._primaryBtn_1hkb7_131 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

._primaryBtn_1hkb7_131:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

._secondaryBtn_1hkb7_133 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_1hkb7_133:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_1hkb7_135 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_1hkb7_135:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_1hkb7_237 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_1hkb7_253 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_1hkb7_253::-webkit-scrollbar {
  width: 6px;
}

._formSection_1hkb7_253::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_1hkb7_253::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_1hkb7_297 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_1hkb7_311 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_1hkb7_327 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_1hkb7_349 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_1hkb7_365 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_1hkb7_389 {
  position: relative;
  display: inline-block;
}

._profileAvatar_1hkb7_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* .avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .avatarPlaceholderIcon {
  color: #f59e0b;
} */

/* .cameraIcon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #f59e0b;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
} */

._cameraIcon_1hkb7_451:hover {
  transform: scale(1.1);
}

._profileText_1hkb7_489 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_1hkb7_501 {
  flex: 1;
}

/* FORM ROW */
._formRow_1hkb7_511 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_1hkb7_525 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_1hkb7_525 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_1hkb7_549 {
  color: #ef4444;
}

._inputWrapper_1hkb7_557 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_1hkb7_569 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_1hkb7_525 input,
._formGroup_1hkb7_525 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_1hkb7_525 input:focus,
._formGroup_1hkb7_525 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_1hkb7_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_1hkb7_633 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_1hkb7_623 ._inputWrapper_1hkb7_557 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_1hkb7_657 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_1hkb7_657 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_1hkb7_683 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_1hkb7_683:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_1hkb7_711 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_1hkb7_727 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_1hkb7_747 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_1hkb7_765 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_1hkb7_783 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_1hkb7_805 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_1hkb7_821 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_1hkb7_833 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_1hkb7_855 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_1hkb7_805 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_1hkb7_881 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_1hkb7_895 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_1hkb7_907 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_1hkb7_927 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_1hkb7_941 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_1hkb7_951 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_1hkb7_969 {
  text-align: left;
  margin: 2px 0;
}

._salary_1hkb7_969 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_1hkb7_989 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_1hkb7_1003 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_1hkb7_1013 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_1hkb7_1025 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_1hkb7_1041 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_1hkb7_1055 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_1hkb7_237 {
    grid-template-columns: 1fr;
  }

  ._previewSection_1hkb7_297 {
    position: static;
  }

  ._formSection_1hkb7_253 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_1hkb7_9 {
    padding: 16px;
  }

  ._header_1hkb7_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_1hkb7_119 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_1hkb7_131,
  ._secondaryBtn_1hkb7_133,
  ._cancelBtn_1hkb7_135 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_1hkb7_365 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_1hkb7_511 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_1hkb7_311 {
    padding: 20px;
  }

  ._title_1hkb7_91 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_1hkb7_379 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_1hkb7_389 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_1hkb7_399 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_1hkb7_443 {
  color: #f59e0b;
}

._profileAvatar_1hkb7_399 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_1hkb7_399 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_1hkb7_1301 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_1hkb7_451 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_1hkb7_489 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_1hkb7_1359 {
  position: relative;
}

._rightColumn_1hkb7_1367 {
  position: relative;
}

._stickyPreview_1hkb7_1375 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_1hkb7_525 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_1hkb7_525 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_1hkb7_525 input._form-control_1hkb7_1387,
._formGroup_1hkb7_525 select._form-control_1hkb7_1387 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_1hkb7_525 input._form-control_1hkb7_1387:focus,
._formGroup_1hkb7_525 select._form-control_1hkb7_1387:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_1hkb7_525 input._form-control_1hkb7_1387:hover,
._formGroup_1hkb7_525 select._form-control_1hkb7_1387:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_1hkb7_525 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_1hkb7_557 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_1hkb7_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_1hkb7_1537 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_1hkb7_1547 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_1hkb7_525 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_1hkb7_1573 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_1hkb7_525 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_1hkb7_557 {
  position: relative;
  width: 100%;
}

._inputIcon_1hkb7_569 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_1hkb7_623 {
  display: flex;
  gap: 10px;
}

._countrySelect_1hkb7_633 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_1hkb7_623 ._inputWrapper_1hkb7_557 {
  flex: 1;
}

/* Info note */
._infoNote_1hkb7_1671 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_1hkb7_1699,
  ._col-3_1hkb7_1701 {
    width: 100%;
  }

  ._stickyPreview_1hkb7_1375 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_1hkb7_1723 {
  display: flex;
  gap: 8px;

  /* ✅ KEY FIXES */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;

  padding: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb;

  /* smooth scroll */
  scroll-behavior: smooth;
}

._tabsHeader_1hkb7_1723 {
  scroll-snap-type: x mandatory;
}

._tabsHeading_1hkb7_1765 {
  scroll-snap-align: start;
}

._tabsHeader_1hkb7_1723::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_1hkb7_1723::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 10px;
}

._tabsHeader_1hkb7_1723::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}


/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_1hkb7_1765 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_1hkb7_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_1hkb7_1851 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_1hkb7_1865 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_1hkb7_1877 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_1hkb7_1877:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_1hkb7_1877:active {
  transform: scale(0.95);
}

._thirdButton_1hkb7_1865:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_1hkb7_805 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_1hkb7_805:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_1hkb7_1967 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_1hkb7_1989 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_1hkb7_821 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_1hkb7_855 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_1hkb7_833 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_1hkb7_821 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_1hkb7_1989 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_1hkb7_1967 {
    height: 110px;
  }

  ._previewName_1hkb7_2089 {
    font-size: 18px;
  }

  ._salaryAmount_1hkb7_989 {
    font-size: 24px;
  }

  ._previewContent_1hkb7_2069 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_1hkb7_765 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_1hkb7_765:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_1hkb7_2359 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_1hkb7_2359:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_1hkb7_525 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_1hkb7_525 select:hover {
  border-color: #fbbf24;
}

._formGroup_1hkb7_525 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_1hkb7_2477 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_1hkb7_2499 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_1hkb7_2513 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_1hkb7_2527 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_1hkb7_2541 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_1hkb7_2555 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_1hkb7_2583 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_1hkb7_2601 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_1hkb7_2615 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_1hkb7_2631 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_1hkb7_2649 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_1hkb7_2649 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_1hkb7_2677 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_1hkb7_2677:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_1hkb7_2713 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_1hkb7_2727 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_1hkb7_2747 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_1hkb7_2761 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_1hkb7_2773 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_1hkb7_2747 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_1hkb7_2677 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_1hkb7_2747 {
    font-size: 16px;
  }

  ._miniLabel_1hkb7_2727 {
    font-size: 10px;
  }

  ._miniSub_1hkb7_2761 {
    font-size: 9px;
  }

  ._miniIcon_1hkb7_2773 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: 1fr;
  }
}

._page_1hkb7_2903 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1hkb7_2903 *,
._page_1hkb7_2903 *::before,
._page_1hkb7_2903 *::after {
  box-sizing: border-box;
}

._pageTitle_1hkb7_2939 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_1hkb7_2953 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_1hkb7_2967 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_1hkb7_2981 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_1hkb7_2993 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_1hkb7_3021 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_1hkb7_3039 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_1hkb7_3053 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_1hkb7_3069 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* .miniGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.miniCard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.14s;
}

.miniCard:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

.miniTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miniIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.miniLabel {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

.miniValue {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.miniSub {
    font-size: 8px;
    color: #94a3b8;
} */

/* TABLE SECTION */
._tableSection_1hkb7_3209 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1hkb7_3227 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1hkb7_3249 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1hkb7_3263 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_1hkb7_161 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1hkb7_3311 {
  background: var( --gradient-primary);
  color: #fff;
}

._btnPrimary_1hkb7_3311:hover {
  background:var( --gradient-primary);
  box-shadow: 0 2px 7px var(--shadow-primary-sm);
}

._btnSecondary_1hkb7_3331 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1hkb7_3331:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_1hkb7_3353 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1hkb7_3375 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1hkb7_3393 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1hkb7_3411 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1hkb7_3423,
._filterDate_1hkb7_3425 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_1hkb7_3423:focus,
._filterDate_1hkb7_3425:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1hkb7_3473 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_1hkb7_3473:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1hkb7_3525 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1hkb7_3539 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1hkb7_3539:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_1hkb7_3565 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
   background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_1hkb7_1 0.15s ease;
}

@keyframes _slideIn_1hkb7_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_1hkb7_3611 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_1hkb7_3625 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
    color: #fff;

  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_1hkb7_3657 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_1hkb7_3671 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_1hkb7_3685 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1hkb7_3685:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1hkb7_3731 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1hkb7_3731:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_1hkb7_3751 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_1hkb7_3751:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_1hkb7_3799 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_1hkb7_3817 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_1hkb7_3839 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_1hkb7_3855 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_1hkb7_3871 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_1hkb7_3881 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_1hkb7_3899 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_1hkb7_3915 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_1hkb7_3915 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_1hkb7_3941 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_1hkb7_3963 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_1hkb7_3975 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_1hkb7_3991 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_1hkb7_4007 {
  width: 100%;
}

._barchartBars_1hkb7_4015 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_1hkb7_4029 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_1hkb7_4007 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_1hkb7_4053 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_1hkb7_4053 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_1hkb7_4081 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_1hkb7_4095 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_1hkb7_4121 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_1hkb7_4133 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_1hkb7_4145 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_1hkb7_4171 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_1hkb7_4171 strong {
  font-weight: 600;
}

._activityTime_1hkb7_4193 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_1hkb7_4203 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_1hkb7_4219 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_1hkb7_4231 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_1hkb7_4255 {
  display: flex;
  flex-direction: column;
}

._empName_1hkb7_4265 {
  font-size: 13px;
  font-weight: 600;
}

._empSub_1hkb7_4275 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_1hkb7_4287 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_1hkb7_4287 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_1hkb7_4317 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_1hkb7_4335 {
  display: flex;
  align-items: center;
}

._empRing_1hkb7_4345 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_1hkb7_4357 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_1hkb7_4369 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1hkb7_4389 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_1hkb7_2953 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_1hkb7_3799 {
    position: static;
  }
  ._asideBody_1hkb7_3855 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_1hkb7_2981 {
    grid-template-columns: 1fr;
  }
  ._heroCard_1hkb7_2993 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_1hkb7_2903 {
    padding: 9px 10px;
  }
  ._tableHeader_1hkb7_3227 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_1hkb7_3353 {
    gap: 7px;
  }
  ._filterField_1hkb7_3375 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_1hkb7_2649 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_1hkb7_3565 {
    gap: 5px;
  }
  ._bulkBtnGroup_1hkb7_3671 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_1hkb7_4519 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_1hkb7_4543 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_1hkb7_4565 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_1hkb7_4219 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_1hkb7_4231 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_1hkb7_4255 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_1hkb7_4265 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_1hkb7_4275 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_1hkb7_4287 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_1hkb7_4287 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_1hkb7_4317 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_1hkb7_4335 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_1hkb7_4345 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_1hkb7_4357 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_1hkb7_4369 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_1hkb7_4389 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_1hkb7_3915 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_1hkb7_3915 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_1hkb7_3941 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_1hkb7_3915 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_1hkb7_3963 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_1hkb7_3975 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_1hkb7_3991 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_1hkb7_4007 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_1hkb7_4015 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_1hkb7_4029 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_1hkb7_4007 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_1hkb7_4053 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_1hkb7_4053 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._downloadAction_1hkb7_4973 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_1hkb7_4973:hover {
  background: #dcfce7; /* light green hover */
}

/* TABS HEADER */
/* .tabsHeader {
  display: flex;
  gap: 8px;
  padding: 0 0 16px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #f3f4f6;
  scrollbar-width: thin;
} */

/* TAB */
._tabsHeading_1hkb7_1765 {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeader_1hkb7_1723 > * {
  flex-shrink: 0; /* ✅ prevents shrinking */
}
._tabsHeading_1hkb7_1765 {
  flex-shrink: 0;   /* 🔥 MOST IMPORTANT FIX */
}
/* HOVER */
._tabsHeading_1hkb7_1765:hover {
  color: #f59e0b;
  background: #fef3c7;
}

/* 🔥 ACTIVE TAB (IMPORTANT) */
._activeTab_1hkb7_1851 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_17l7h_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._wrap_17l7h_35 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

._pageTitle_17l7h_57 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._loadingState_17l7h_71 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
}

._spinner_17l7h_91 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_17l7h_91 0.7s linear infinite;
}

@keyframes _spin_17l7h_91 {
  to {
    transform: rotate(360deg);
  }
}

._breadcrumb_17l7h_121 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_17l7h_121 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_17l7h_121 strong {
  color: var(--color-primary);
}

._backBtn_17l7h_155 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._backBtn_17l7h_155:hover {
   background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

._btn_17l7h_197 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_17l7h_231 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnPrimary_17l7h_231:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 7px rgba(245, 158, 11, 0.38);
}

._btnPrimary_17l7h_231:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_17l7h_261 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

._btnSecondary_17l7h_261:hover {
  background: #f3f4f6;
}

._btnDanger_17l7h_281 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._btnDanger_17l7h_281:hover {
  background: #fef2f2;
}

._tableSection_17l7h_301 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_17l7h_319 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_17l7h_341 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_17l7h_355 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_17l7h_369 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_17l7h_391 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 160px;
  min-width: 100px;
}

._filterLabel_17l7h_409 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_17l7h_427 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_17l7h_439,
._filterInput_17l7h_427 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_17l7h_439:focus,
._filterInput_17l7h_427:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15);
}

._filterClearX_17l7h_485 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_17l7h_485:hover {
  background: #fbbf24;
  color: #111827;
}

._filterActions_17l7h_531 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_17l7h_545 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_17l7h_545:hover {
  background: #fef2f2 !important;
}

._header_17l7h_563 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
 border: 1px solid var(--color-primary-lightest);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

._headerLeft_17l7h_589 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._title_17l7h_601 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._headerActions_17l7h_615 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* 2-col split: main | sidebar */
._formLayout_17l7h_631 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  ._formLayout_17l7h_631 {
    grid-template-columns: 1fr;
  }
}

._leftCol_17l7h_657 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._rightCol_17l7h_669 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form card ── */
._formCard_17l7h_683 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._sectionHeading_17l7h_699 {
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 14px;
  padding-bottom: 8px;
   border-bottom: 2px solid var(--color-primary-lightest);
}

/* ── Responsive field grids ── */
._formGrid3_17l7h_717 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

._formGrid2_17l7h_731 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_17l7h_717 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {

  ._formGrid3_17l7h_717,
  ._formGrid2_17l7h_731 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_17l7h_775 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_17l7h_787 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_17l7h_799 {
  color: #ef4444;
}

._input_17l7h_807 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._input_17l7h_807:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._inputError_17l7h_847 {
  border-color: #f87171 !important;
}

._textarea_17l7h_855 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}

._textarea_17l7h_855:focus {
 border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._errorText_17l7h_891 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

/* ── Approver rows ── */
._approverHeader_17l7h_905 {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 10px;
  padding: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 8px;
}

._approverRow_17l7h_933 {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

._removeBtn_17l7h_949 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}

._removeBtn_17l7h_949:hover {
  background: #fef2f2;
}

/* ── File upload ── */
._fileLabel_17l7h_989 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition:
    border-color 0.13s,
    background 0.13s;
}

._fileLabel_17l7h_989:hover {
  border-color: #f59e0b;
  background: #fef3c7;
}

._fileList_17l7h_1035 {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._fileItem_17l7h_1053 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

._fileName_17l7h_1075 {
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

._removeFileBtn_17l7h_1093 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._removeFileBtn_17l7h_1093:hover {
  background: #fecaca;
}

._pageTitleRow_17l7h_1131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

._projectIcon_17l7h_1159 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 3-col info grid */
._mainGrid_17l7h_1189 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  ._mainGrid_17l7h_1189 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  ._mainGrid_17l7h_1189 {
    grid-template-columns: 1fr;
  }
}

/* Generic card */
._card_17l7h_1227 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._cardTitle_17l7h_1243 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Detail key-value rows */
._detailRow_17l7h_1263 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

._detailLabel_17l7h_1279 {
  font-size: 11px;
  color: #6b7280;
  min-width: 110px;
  flex-shrink: 0;
}

._detailVal_17l7h_1293 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Member / approver pills */
._memberGrid_17l7h_1309 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
}

._memberCard_17l7h_1325 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

._memberAvatar_17l7h_1345 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

._memberInfo_17l7h_1373 {
  flex: 1;
  min-width: 0;
}

._memberName_17l7h_1383 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._memberRole_17l7h_1401 {
  font-size: 10px;
  color: #6b7280;
}

._emptyMsg_17l7h_1411 {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Description */
._description_17l7h_1425 {
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* Attachments */
._attachmentList_17l7h_1441 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._attachmentItem_17l7h_1453 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
}

._attachmentName_17l7h_1473 {
  flex: 1;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._downloadBtn_17l7h_1491 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
}

._downloadBtn_17l7h_1491:hover {
  background: #fef3c7;
  color: #f59e0b;
  border-color: #fde68a;
}

._bulkBtnGroup_17l7h_1537 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  ._miniGrid_17l7h_1553 {
    grid-template-columns: 1fr 1fr;
  }

  ._bulkSelectedBar_17l7h_1561 {
    gap: 5px;
  }

  ._bulkBtnGroup_17l7h_1537 {
    flex-wrap: wrap;
  }
}

._bulkActionBtnDanger_17l7h_1579 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_17l7h_1579:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkSelectedBar_17l7h_1561 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
   background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_17l7h_1 0.15s ease;
}

._bulkCountBadge_17l7h_1623 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_17l7h_1653 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkSelectedLeft_17l7h_1667 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkBtnGroup_17l7h_1537 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_17l7h_1579 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_17l7h_1579:hover {
  background: #f8fafc;
}

._bulkActionBtn_17l7h_1579 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_17l7h_1579:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_17l7h_1579 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_17l7h_1579:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* Toggle Grid - 3 per row */
._toggleGrid_17l7h_1809 {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px 24px;
  margin-top: 16px;
}

._toggleSwitch_17l7h_1823 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

._toggleLabel_17l7h_1837 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.3;
}

@media (max-width: 768px) {
  ._toggleGrid_17l7h_1809 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._toggleGrid_17l7h_1809 {
    grid-template-columns: 1fr;
  }
}

/* Toggle Switch */
._toggleSwitch_17l7h_1823 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

._toggleSwitch_17l7h_1823 input {
  display: none;
}

._toggleSlider_17l7h_1901 {
  position: relative;
  width: 36px;
  height: 20px;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

._toggleSlider_17l7h_1901::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

._toggleSwitch_17l7h_1823 input:checked+._toggleSlider_17l7h_1901 {
  background: var(--color-primary);
}

._toggleSwitch_17l7h_1823 input:checked+._toggleSlider_17l7h_1901::after {
  transform: translateX(16px);
}

._toggleLabel_17l7h_1837 {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

._toggleSwitch_17l7h_1823 input:checked~._toggleLabel_17l7h_1837 {
  color: var(--color-primary);
}

._employeeSection_17l7h_1983 {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

._employeeTitle_17l7h_1999 {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

._employeeGrid_17l7h_2013 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

._employeeCard_17l7h_2025 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

._employeeCard_17l7h_2025:hover {
  background: #f9fafb;
  border-color: #fbbf24;
}

._employeeAvatar_17l7h_2055 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d1d5db;
}

._employeeName_17l7h_2071 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

._employeeCode_17l7h_2083 {
  font-size: 10px;
  color: #6b7280;
}

/* view  */

/* ── View Page Styles ── */

._viewSummaryCard_17l7h_2101 {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

._viewColorBadge_17l7h_2123 {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

._viewSummaryInfo_17l7h_2145 h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
}

._viewSummaryMeta_17l7h_2159 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._viewCodeBadge_17l7h_2173 {
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewTypeBadge_17l7h_2191 {
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewStatusBadge_17l7h_2209 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewStatusActive_17l7h_2229 {
  background: #dcfce7;
  color: #16a34a;
}

._viewStatusInactive_17l7h_2239 {
  background: #fee2e2;
  color: #dc2626;
}

._viewGrid3_17l7h_2249 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}

._viewItem_17l7h_2261 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._viewLabel_17l7h_2273 {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

._viewValue_17l7h_2289 {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

._viewDescription_17l7h_2301 {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 4px 0 0 0;
  white-space: pre-wrap;
}

._viewPill_17l7h_2317 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
}

._viewPillGreen_17l7h_2339 {
  background: #dcfce7;
  color: #16a34a;
}

._viewPillGray_17l7h_2349 {
  background: #f1f5f9;
  color: #64748b;
}

._viewColorRow_17l7h_2359 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._viewColorDot_17l7h_2371 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  display: inline-block;
}

@media (max-width: 768px) {
  ._viewGrid3_17l7h_2249 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._viewGrid3_17l7h_2249 {
    grid-template-columns: 1fr;
  }

  ._viewSummaryCard_17l7h_2101 {
    flex-direction: column;
    text-align: center;
  }
}

._page_17l7h_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_17l7h_13 *,
._page_17l7h_13 *::before,
._page_17l7h_13 *::after {
  box-sizing: border-box;
}

/* ── Stats Accordion ── */
._statsAccordion_17l7h_2459 {
  border-radius: 8px;
  overflow: hidden;
}

._accordionHeader_17l7h_2469 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._accordionHeader_17l7h_2469:hover {
  background-color: #f9fafb;
}

._accordionTitle_17l7h_2495 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 12px;
}

._accordionToggle_17l7h_2513 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

._accordionToggle_17l7h_2513:hover {
  color: #374151;
}

._statsGrid_17l7h_2543 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px 16px 16px;
}

._summaryCard_17l7h_2557 {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

._summaryCard_17l7h_2557:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

._summaryLeft_17l7h_2587 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._summaryIcon_17l7h_2599 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

._summaryTitle_17l7h_2621 {
  font-size: 10px;
  font-weight: 500;
  color: #475569;
}

._summaryRight_17l7h_2633 {
  text-align: right;
}

._summaryValue_17l7h_2641 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

._summaryTrend_17l7h_2653 {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

._trendUp_17l7h_2665 {
  color: #16a34a;
}

._trendDown_17l7h_2673 {
  color: #dc2626;
}

._trendNeutral_17l7h_2681 {
  color: #94a3b8;
  font-size: 8px;
  font-weight: 400;
}

/* ── Table Section ── */
._tableSection_17l7h_301 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_17l7h_319 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_17l7h_341 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_17l7h_355 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Buttons ── */
._btn_17l7h_197 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_17l7h_231 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnPrimary_17l7h_231:hover {
  background: var(--gradient-primary);
  box-shadow: 0 2px 5px var(--shadow-primary-sm);
}

._btnSecondary_17l7h_261 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_17l7h_261:hover {
  background: #f8fafc;
}

/* ── Filter Bar ── */
._filterBar_17l7h_369 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterWrapper_17l7h_2857 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

._filterBadge_17l7h_2871 {
  background: #ffca40;
  color: #1e293b;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
}

/* ── Bulk Bar ── */
._bulkSelectedBar_17l7h_1561 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest);

  flex-shrink: 0;
  flex-wrap: wrap;
}

._bulkSelectedLeft_17l7h_1667 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_17l7h_1623 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
 background: var(--color-primary-light);
    color: #fff;

  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_17l7h_1653 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_17l7h_1537 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_17l7h_1579 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_17l7h_1579 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_17l7h_1579:hover {
  background: #fef2f2;
}

._bulkDeselect_17l7h_3029 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_17l7h_3029:hover {
  background: #f1f5f9;
}

/* ── Badges ── */
._badge_17l7h_3067 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._typeBadge_17l7h_3089 {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Name cell ── */
._nameCell_17l7h_3109 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._colorDot_17l7h_3121 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._nameMain_17l7h_3135 {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

._nameSub_17l7h_3147 {
  font-size: 9px;
  color: #64748b;
  margin-top: 1px;
}

/* ── Date cell ── */
._dateCell_17l7h_3161 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._dateMain_17l7h_3173 {
  font-size: 11px;
  font-weight: 500;
  color: #334155;
}

._dateSub_17l7h_3185 {
  font-size: 9px;
  color: #94a3b8;
}

/* ── Half day / Applicable ── */
._halfDayYes_17l7h_3197 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #fef9c3;
  color: #a16207;
}

._halfDayNo_17l7h_3221 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
}

._applicableAll_17l7h_3245 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #dcfce7;
  color: #16a34a;
}

._applicableSpecific_17l7h_3269 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #dbeafe;
  color: #2563eb;
}

/* ── Avatar stack ── */
._avatarStack_17l7h_3295 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._avatarImg_17l7h_3307,
._avatarFallback_17l7h_3309 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  margin-left: -6px;
  flex-shrink: 0;
}

._avatarImg_17l7h_3307:first-child,
._avatarFallback_17l7h_3309:first-child {
  margin-left: 0;
}

._avatarImg_17l7h_3307 {
  object-fit: cover;
}

._avatarFallback_17l7h_3309 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}

._avatarExtra_17l7h_3363 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  margin-left: -6px;
  border: 1.5px solid #fff;
}

._avatarCount_17l7h_3393 {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  margin-left: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._page_17l7h_13 {
    padding: 8px 10px;
  }

  ._statsGrid_17l7h_2543 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._filterBar_17l7h_369 {
    flex-direction: column;
    align-items: stretch;
  }

  ._tableHeader_17l7h_319 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._summaryValue_17l7h_2641 {
    font-size: 16px;
  }

  ._summaryCard_17l7h_2557 {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  ._statsGrid_17l7h_2543 {
    grid-template-columns: 1fr;
  }

  ._summaryIcon_17l7h_2599 {
    width: 24px;
    height: 24px;
  }

  ._summaryValue_17l7h_2641 {
    font-size: 14px;
  }
}


/* css status  */
/* HolidayStatusModal.module.css */

._overlay_17l7h_3503 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

._modal_17l7h_3523 {
  background: #fff;
  border-radius: 12px;
  width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

._header_17l7h_563 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}

._headerLeft_17l7h_589 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._headerIcon_17l7h_3567 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

._title_17l7h_601 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

._sub_17l7h_3599 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
}

._closeBtn_17l7h_3611 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

._closeBtn_17l7h_3611:hover {
  background: #f1f5f9;
  color: #374151;
}

._closeBtn_17l7h_3611:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._body_17l7h_3653 {
  padding: 16px;
}

._label_17l7h_787 {
  font-size: 11px;
  color: #475569;
  margin: 0 0 12px;
}

._options_17l7h_3673 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._optionBtn_17l7h_3685 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-align: left;
}

._optionBtn_17l7h_3685:hover:not(:disabled) {
  opacity: 0.85;
  transform: translateX(2px);
}

._optionBtn_17l7h_3685:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._dot_17l7h_3735 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* css status  */
/* HolidayStatusModal.module.css */

._employeeCard_17l7h_2025 {
  position: relative;
}

._removeEmployeeBtn_17l7h_3765 {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

._removeEmployeeBtn_17l7h_3765:hover {
  background: #fecaca;
}

._employeeCardNew_17l7h_3805 {
  border-color: #86efac;
  background: #f0fdf4;
}

._employeeCardNew_17l7h_3805:hover {
  border-color: #4ade80;
}

._newBadge_17l7h_3823 {
  position: absolute;
  top: 6px;
  left: 8px;
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}


._multiSelectOption_17l7h_3851 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

._multiSelectOption_17l7h_3851 input[type="checkbox"] {
  accent-color: #f59e0b; 
  width: 16px;
  height: 16px;
}

._multiSelectOption_17l7h_3851._selected_17l7h_3877 {
  background: #f5f1e4; 
}

._multiSelectOption_17l7h_3851:hover {
  background: #f8f4e8;
}

._multiSelectOption_17l7h_3851 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._multiSelectOption_17l7h_3851 input[type="checkbox"] {
  accent-color: #f59e0b;
}

._multiSelectOption_17l7h_3851._selected_17l7h_3877 {
  background: #f5f1e4;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

._wrap_1ahr3_15 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

/* Header Styles */
._header_1ahr3_39 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

._headerLeft_1ahr3_65 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._title_1ahr3_77 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._headerActions_1ahr3_91 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

._backBtn_1ahr3_105 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}


._breadcrumb_1ahr3_137 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_1ahr3_137 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_1ahr3_137 strong {
  color: #10b981;
}

/* Layout */
._formLayout_1ahr3_173 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  ._formLayout_1ahr3_173 {
    grid-template-columns: 1fr;
  }
}

._leftCol_1ahr3_199 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Form Card */
._formCard_1ahr3_213 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._sectionHeading_1ahr3_229 {
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d1fae5;
  font-size: 13px;
}

/* View Summary Card */
._viewSummaryCard_1ahr3_249 {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

._viewColorBadge_1ahr3_271 {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

._viewSummaryInfo_1ahr3_293 h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
}

._viewSummaryMeta_1ahr3_307 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._viewCodeBadge_1ahr3_321 {
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewTypeBadge_1ahr3_339 {
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewStatusBadge_1ahr3_357 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
}

._viewStatusApproved_1ahr3_377 {
  background: #dcfce7;
  color: #16a34a;
}

._viewStatusPending_1ahr3_387 {
  background: #fef3c7;
  color: #d97706;
}

._viewStatusRejected_1ahr3_397 {
  background: #fee2e2;
  color: #dc2626;
}

._viewStatusReimbursed_1ahr3_407 {
  background: #dbeafe;
  color: #2563eb;
}

/* Grid Layout */
._viewGrid3_1ahr3_419 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}

._viewItem_1ahr3_431 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._viewLabel_1ahr3_443 {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

._viewValue_1ahr3_459 {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

._viewDescription_1ahr3_471 {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 4px 0 0 0;
  white-space: pre-wrap;
}

._viewPill_1ahr3_487 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
}

._viewPillGreen_1ahr3_509 {
  background: #dcfce7;
  color: #16a34a;
}

._viewPillGray_1ahr3_519 {
  background: #f1f5f9;
  color: #64748b;
}

/* Attachments */
._attachmentGrid_1ahr3_531 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

._attachmentCard_1ahr3_545 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s;
}

._attachmentCard_1ahr3_545:hover {
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

._attachmentIcon_1ahr3_577 {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  color: #10b981;
  font-size: 18px;
}

._attachmentInfo_1ahr3_601 {
  flex: 1;
  min-width: 0;
}

._attachmentName_1ahr3_611 {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

._downloadBtn_1ahr3_631 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s;
}

._downloadBtn_1ahr3_631:hover {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  ._viewGrid3_1ahr3_419 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._formCard_1ahr3_213 {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  ._viewGrid3_1ahr3_419 {
    grid-template-columns: 1fr;
  }

  ._viewSummaryCard_1ahr3_249 {
    flex-direction: column;
    text-align: center;
  }

  ._attachmentGrid_1ahr3_531 {
    grid-template-columns: 1fr;
  }

  ._formCard_1ahr3_213 {
    padding: 16px;
  }
}

/* Policy Violation Card */
._policyViolationCard_1ahr3_735 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fef2e8;
  border: 1px solid #f97316;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

._policyViolationIcon_1ahr3_757 {
  color: #f97316;
  flex-shrink: 0;
  margin-top: 2px;
}

._policyViolationContent_1ahr3_769 {
  flex: 1;
}

._policyViolationContent_1ahr3_769 strong {
  display: block;
  font-size: 13px;
  color: #9a3412;
  margin-bottom: 4px;
}

._policyViolationContent_1ahr3_769 p {
  margin: 0;
  font-size: 12px;
  color: #7c2d12;
  line-height: 1.5;
}

/* Employee Avatar */
._employeeAvatar_1ahr3_807 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #10b981;
}

/* ── BASE ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
._vdrawer_lc4fb_13 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

._wrap_lc4fb_23 {
  padding: 18px 22px;
  background: linear-gradient(135deg, #fafaf8 0%, #f8f5ef 100%);
  min-height: 100vh;
}

/* ── BREADCRUMB ── */
._breadcrumb_lc4fb_37 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._breadcrumb_lc4fb_37 span:first-child {
  cursor: pointer;
}

._breadcrumb_lc4fb_37 span:first-child:hover {
  color: #111827;
  text-decoration: underline;
}

._breadcrumb_lc4fb_37 span:last-child {
  color: #111827;
  font-weight: 600;
}

/* ── PAGE TITLE ROW ── */
._pageTitleRow_lc4fb_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

._pageTitleLeft_lc4fb_103 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._pageTitle_lc4fb_85 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* ── BADGES ── */
._badge_lc4fb_131 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

._badgeActive_lc4fb_151 {
  background: #dcfce7;
  color: #166534;
}

._badgeDot_lc4fb_161 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

._badgeType_lc4fb_177 {
  background: var(--gradient-primary);
  color: #fff;
}

._badgeSm_lc4fb_187 {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

._badgeGreen_lc4fb_201 {
  background: #dcfce7;
  color: #166534;
}

._badgeBlue_lc4fb_211 {
  background: #dbeafe;
  color: #1e40af;
}

/* ── BUTTONS ── */
._actions_lc4fb_223 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._btn_lc4fb_237 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._btn_lc4fb_237:hover {
  background: #f9fafb;
}

._btnPrimary_lc4fb_277 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  border: none;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
  font-size: 10px;
}

._btnPrimary_lc4fb_277:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

._btnFull_lc4fb_301 {
  width: 100%;
  padding: 8px;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

._btnFull_lc4fb_301:hover {
  background: var( --color-primary-dark);
}

._btnOutline_lc4fb_335 {
  width: 100%;
  padding: 7px;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}

._btnOutline_lc4fb_335:hover {
  background: #f9fafb;
}

/* ── PROFILE CARD ── */
._profileCard_lc4fb_369 {
  background: var(--color-primary-lighter);
  border: 1px solid var(--color-primary-light);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  box-shadow:var( --shadow-primary-sm);
}

._avatarWrap_lc4fb_395 {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-primary-lightest) 0%,
    var(--color-primary-lightest) 45%,
    var(--color-primary) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
   0 0 0 6px rgba(139, 92, 246, 0.20),
    0 0 0 12px rgba(139, 92, 246, 0.08);
}

._avatar_lc4fb_395 {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

._profileInfo_lc4fb_453 {
  flex: 1;
  min-width: 200px;
}

._profileName_lc4fb_463 {
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

._profileMeta_lc4fb_477 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 10px;
}

._profileMeta_lc4fb_477 span {
  display: flex;
  align-items: center;
  gap: 4px;
}

._profileTags_lc4fb_509 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

._tag_lc4fb_521 {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #374151;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

._tagEmp_lc4fb_541 {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: #fff;
  border: 1px solid var(--color-primary-light);
  font-weight: 500;
}

._statCard_lc4fb_561 {
  border: 2px solid #f59e0b;
  background: #ffff;
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

._sparkline_lc4fb_579 {
  width: 100%;
  height: 36px;
  display: block;
  margin-bottom: 4px;
}

._statLabel_lc4fb_593 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 2px;
}

._statSub_lc4fb_607 {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 4px;
}

._statValue_lc4fb_619 {
  font-size: 20px;
  color: #111827;
}

/* ── MAIN DASHBOARD GRID: 2 rows × 4 cols ── */
._dashGrid_lc4fb_631 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

._dashCol_lc4fb_645 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── DASH CARD ── */
._dashCard_lc4fb_659 {
  background: #ffffff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 12px;
  padding: 14px 16px;
}

._detailRow_lc4fb_673 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

._backBtn_lc4fb_689 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_lc4fb_689:hover {
  background: #f3f4f6;
  color: var(--color-primary);
}

._detailLabel_lc4fb_729 {
  font-size: 12px;
  color: #6b7280;
  min-width: 85px;
  flex-shrink: 0;
}

._detailVal_lc4fb_743 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  text-align: right;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  flex: 1;
  max-width: 55%;
}

/* ── STATS GRID ── */
._statsGrid_lc4fb_769 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* ── HERO CARD ── */
._heroCard_lc4fb_785 {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-primary-lightest);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._heroCard_lc4fb_785:hover {
  transform: translateY(-2px);
}

._sparkline_lc4fb_579 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_lc4fb_835 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

._heroValue_lc4fb_853 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

._heroGrowth_lc4fb_867 {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-primary);
  background:  rgba(139, 92, 246, 0.08);
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}

._dashCardTitle_lc4fb_891 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

._dashCardTitle_lc4fb_891 svg {
  color: #9ca3af;
  cursor: pointer;
  flex-shrink: 0;
}

._divider_lc4fb_925 {
  height: 1px;
  background: #f3f4f6;
  margin: 8px 0;
}

._payrollSub_lc4fb_937 {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;
}

/* ── SELECT ── */
._selectSm_lc4fb_953 {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

/* ── CHART LEGEND ── */
._chartLegend_lc4fb_975 {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

._legendItem_lc4fb_989 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

._legendLine_lc4fb_1003 {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── LEAVE SUMMARY ── */
._leaveGrid_lc4fb_1021 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

._leaveBox_lc4fb_1035 {
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-lighter);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

._leaveBoxLabel_lc4fb_1051 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 3px;
}

._leaveBoxVal_lc4fb_1063 {
  font-size: 14px;
  font-weight: 700;
}

._leaveAvail_lc4fb_1073 {
  color: #16a34a;
}

._leaveUsed_lc4fb_1081 {
  color: #f59e0b;
}

._leavePending_lc4fb_1089 {
  color: #6b7280;
}

/* ── PERFORMANCE ── */
._perfScoreRow_lc4fb_1099 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

._perfScore_lc4fb_1099 {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
}

._stars_lc4fb_1125 {
  color: #f59e0b;
  font-size: 15px;
  letter-spacing: 1px;
}

._perfBarWrap_lc4fb_1137 {
  margin: 4px 0 6px;
}

._perfBarLabel_lc4fb_1145 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

._perfBar_lc4fb_1137 {
  height: 6px;
  border-radius: 3px;
  background: #f3f4f6;
  overflow: hidden;
  margin-bottom: 4px;
}

._perfFill_lc4fb_1177 {
  height: 100%;
  border-radius: 3px;
}

._perfSub_lc4fb_1187 {
  font-size: 11px;
  color: #9ca3af;
}

._perfLabelRow_lc4fb_1197 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 5px;
}

/* ── DONUT ── */
._donutWrap_lc4fb_1213 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donutSvg_lc4fb_1225 {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donutLegend_lc4fb_1237 {
  flex: 1;
}

._legendRow_lc4fb_1245 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

._legendDot_lc4fb_1259 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendText_lc4fb_1273 {
  font-size: 11px;
  color: #374151;
  flex: 1;
}

._legendVal_lc4fb_1285 {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

/* ── TIMELINE ── */
._timelineItem_lc4fb_1299 {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

._timelineItem_lc4fb_1299:last-child {
  margin-bottom: 0;
}

._tlDot_lc4fb_1321 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
}

._tlTitle_lc4fb_1337 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

._tlTime_lc4fb_1349 {
  font-size: 11px;
  color: #9ca3af;
}

/* ── DOCUMENTS ── */
._docUpload_lc4fb_1361 {
  border: 1.5px dashed #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  margin-bottom: 8px;
}

._docUploadText_lc4fb_1377 {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.5;
}

._docRow_lc4fb_1389 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}

._docRow_lc4fb_1389:last-child {
  border-bottom: none;
}

._docName_lc4fb_1415 {
  color: #374151;
  font-weight: 500;
}

/* ── QUICK ACTIONS ── */
._quickGrid_lc4fb_1427 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

._qaBtn_lc4fb_1439 {
  background: var(--color-primary-lightest);
  border: 1px solid var(--color-primary-lighter);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s;
}

._qaBtn_lc4fb_1439:hover {
  background: var(--color-primary-lighter);
}

._qaIcon_lc4fb_1467 {
  width: 28px;
  height: 28px;
  background: var(--color-primary-dark);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
}

._qaLabel_lc4fb_1489 {
  font-size: 10px;
  color: #374151;
  font-weight: 600;
  line-height: 1.3;
}

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  ._dashGrid_lc4fb_631 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  ._statsGrid_lc4fb_769 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  ._wrap_lc4fb_23 {
    padding: 12px 14px;
  }

  ._dashGrid_lc4fb_631 {
    grid-template-columns: 1fr;
  }

  ._statsGrid_lc4fb_769 {
    grid-template-columns: 1fr;
  }

  ._pageTitleRow_lc4fb_85 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._profileCard_lc4fb_369 {
    flex-direction: column;
    align-items: flex-start;
  }
}

._dashGrid_lc4fb_631 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;

  /* 🔥 KEY FIX */
  align-items: stretch;
}

._dashCol_lc4fb_645 {
  display: flex;
  flex-direction: column;
  gap: 12px;

  /* 🔥 KEY FIX */
  height: 100%;
}

._dashGrid_lc4fb_631 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  /* 🔥 MAGIC LINE */
  grid-auto-rows: 1fr;
}

._dashCard_lc4fb_659 {
  background: #ffffff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 12px;
  padding: 14px 16px;

  /* 🔥 IMPORTANT */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* OVERLAY */
._vdrawer-overlay_lc4fb_1657 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  /* z-index: 999998; */
}


/* new */
/* DRAWER */
._vdrawer_lc4fb_13 {
  position: fixed;
  top: 0;
  right: 0;
 height: 100vh;
  background: #fafaf8;
  z-index: 999999; /* 🔥 increase */
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: _slideIn_lc4fb_1 0.25s ease;
  overflow: hidden;
}
._vdrawerHdr_lc4fb_1703 {
  flex-shrink: 0;
  background: #f59e0b;
 border-bottom: none;

  padding: 18px 20px;

  /* ✨ premium feel */
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
._vdrawerBody_lc4fb_1723 {
  flex: 1;
  overflow-y: auto;

  padding: 16px;
  background: #fafaf8;

  /* 🔥 CRITICAL FIX */
  min-height: 0;
}
/* HEADER */

._vdrawerTitle_lc4fb_1747 {
  font-size: 16px;          /* 🔥 bigger */
  font-weight: 700;         /* 🔥 bold */
  color: #0f172a;           /* 🔥 richer black */

   letter-spacing: -0.3px;   /* 🔥 premium tight spacing */
}


._vdrawerBody_lc4fb_1723 {
  scroll-behavior: smooth;
}
/* BODY */
._vdrawer-body_lc4fb_1773 {
  padding: 18px;
  background: #fafaf8; /* 🔥 match page bg */
  flex: 1; /* 🔥 takes remaining space */
  overflow-y: auto; /* 🔥 enables scroll */
  min-height: 0;

  
}



/* ANIMATION */
@keyframes _slideIn_lc4fb_1 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* new again */

/* ===== QUICK VIEW CARD SYSTEM (MATCH YOUR JSX) ===== */

._vcard_lc4fb_1825 {
  background: #ffffff;
  border: 1px solid #f3f4f6; /* 🔥 same as your site cards */
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
   box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* softer */
  transition: all 0.2s ease;
}

._vcard_lc4fb_1825:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

._vcardHdr_lc4fb_1853 {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._vcardTitle_lc4fb_1869 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

._vcardBody_lc4fb_1881 {
  padding: 16px 18px;
}

/* ===== GRID ===== */

._vgrid_lc4fb_1893 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

._vfield_lc4fb_1905 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== LABEL + VALUE ===== */

._vfLabel_lc4fb_1921 {
  font-size: 11px;
  color: #9ca3af;   /* softer gray */
  font-weight: 500;
}



._vfVal_lc4fb_1937 {
  font-size: 11px;
  font-weight: 600;
 color: #0f172a;   /* slightly darker */
  word-break: break-word;
  line-height: 1.4;
}

/* ===== STATUS ===== */

._vStatus_lc4fb_1957 {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

._active_lc4fb_1971 {
  background: #dcfce7;
  color: #16a34a;
}

/* ===== DRAWER FIX (IMPORTANT) ===== */

._vdrawer_lc4fb_13 {
  width: 500px; /* 🔥 REQUIRED */
}

._vdrawerOverlay_lc4fb_1993 {
  z-index: 9998;
}

/* .vdrawer {
  z-index: 9999;
} */

/* Close icon */
._vdrawerX_lc4fb_2011 {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  border: 1px solid #e5e7eb;

  background: #ffffff;
  color: #6b7280;

  cursor: pointer;
  transition: all 0.2s ease;
}

._vdrawerX_lc4fb_2011:hover {
  background: #f9fafb;
  color: #111827;
  border-color: #d1d5db;
}

._vdrawerHdrTop_lc4fb_2059 {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 🔥 pushes X to right */
}
/* Footer */
._vdrawerFooter_lc4fb_2071 {
  flex-shrink: 0;
  background: #ffffff;
  border-top: 1px solid #f0ebe0;

  padding: 12px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 12px;
}

._vfooterText_lc4fb_2099 {
  color: #9ca3af;
}

._vfooterLink_lc4fb_2107 {
  color: #f59e0b;;
  font-weight: 600;
  font-size: 12px;

  background: none;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 4px;
}

._vfooterLink_lc4fb_2107:hover {
  text-decoration: underline;
}
/* emploeyee view table  */
._eduExpGrid_lc4fb_2143 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
 
@media (max-width: 900px) {
  ._eduExpGrid_lc4fb_2143 {
    grid-template-columns: 1fr;
  }
}
 
._detailTable_lc4fb_2169 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
}
 
._detailTable_lc4fb_2169 thead tr {
  background: var(--color-primary-lightest);
}
 
._detailTable_lc4fb_2169 th {
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  border-bottom: 1px solid var(--color-primary-lightest);
  white-space: nowrap;
}
 
._detailTable_lc4fb_2169 td {
  padding: 7px 10px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  word-break: break-word;
}
 
._detailTable_lc4fb_2169 tbody tr:last-child td {
  border-bottom: none;
}
 
._detailTable_lc4fb_2169 tbody tr:hover td {
  background: var(--color-primary-lightest);
}
 
._trendBadge_lc4fb_2243 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
 
/* Empty state */
._emptyState_lc4fb_2261 {
  font-size: 12px;
  color: #9ca3af;
  padding: 16px 0;
  text-align: center;
}

/* new today */
._vdrawerActions_lc4fb_2277 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Edit button (left) */
._vbtnEdit_lc4fb_2293 {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 10px;
  font-weight: 600;

  padding: 4px 10px;
  border-radius: 8px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;

  cursor: pointer;
  transition: all 0.2s ease;
}

._vbtnEdit_lc4fb_2293:hover {
  background: #f9fafb;
}

/* Full view button (right) */
._vbtnFull_lc4fb_2341 {
  margin-left: auto;

  font-size: 10px;
  font-weight: 600;

  padding: 4px 10px;
  border-radius: 8px;

  background: #eef2ff;
  color: #c5a63f;

  border: 1px solid #e0e7ff;

  cursor: pointer;
  transition: all 0.2s ease;
}

._vbtnFull_lc4fb_2341:hover {
  background: #e0e7ff;
}

._vStatus_lc4fb_1957 {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* green confirmed style */
._active_lc4fb_1971 {
  background: #dcfce7;
  color: #16a34a;
}

._vStatus_lc4fb_1957::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

._vcardHdr_lc4fb_1853 {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;

  display: flex;
  align-items: center;
  justify-content: space-between;
}._page_1ktep_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1ktep_1 *,
._page_1ktep_1 *::before,
._page_1ktep_1 *::after {
  box-sizing: border-box;
}

._pageTitle_1ktep_37 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layoutMain_1ktep_51 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* ── Mini stat cards grid — 4 cols for payroll (vs 8 for attendance) ── */
._miniGrid_1ktep_67 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  ._miniGrid_1ktep_67 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  ._miniGrid_1ktep_67 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  ._miniGrid_1ktep_67::-webkit-scrollbar {
    height: 6px;
  }

  ._miniGrid_1ktep_67::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
  }

  ._miniCard_1ktep_127 {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ── Card ── */
._miniCard_1ktep_127 {
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

._miniCard_1ktep_127:hover {
  transform: translateY(-2px);
}

._miniTop_1ktep_165 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._miniLabel_1ktep_177 {
  font-size: 11px;
  font-weight: 600;
}

._miniValue_1ktep_187 {
  font-size: 18px;
  font-weight: 700;
}

._miniSub_1ktep_197 {
  font-size: 10px;
  color: #9ca3af;
}

._miniIcon_1ktep_207 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ── Table section ── */
._tableSection_1ktep_229 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1ktep_247 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ktep_269 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1ktep_283 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Buttons ── */
._btn_1ktep_297 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1ktep_331 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1ktep_331:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_1ktep_351 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
._bulkSelectedText_1ktep_361 {
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  color: #92400e;
  white-space: nowrap;
}
._bulkCountBadge_1ktep_375 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
    color: #fff;

  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
._btnSecondary_1ktep_351:hover {
  background: #f8fafc;
}

/* ── Filter bar ── */
._filterBar_1ktep_415 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1ktep_437 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1ktep_455 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1ktep_473 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1ktep_485,
._filterDate_1ktep_487 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_1ktep_485:focus,
._filterDate_1ktep_487:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1ktep_535 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_1ktep_535:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1ktep_587 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1ktep_601 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1ktep_601:hover {
  background: #fef2f2 !important;
}

._bulkSelectedBar_1ktep_619 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest); 
    border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_1ktep_1 0.15s ease;
}

._bulkBtnGroup_1ktep_643 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_1ktep_657 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1ktep_657:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1ktep_703 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1ktep_703:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_1ktep_723 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_1ktep_723:hover {
  background: #f1f5f9;
  color: #475569;
}

@media (max-width: 480px) {
  ._miniGrid_1ktep_67 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_1ktep_619 {
    gap: 5px;
  }
  ._bulkBtnGroup_1ktep_643 {
    flex-wrap: wrap;
  }
}
/* ── Trigger button ── */
._triggerBtn_vgux8_3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #ffca40;
  color: #1e293b;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
}

._triggerBtn_vgux8_3:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

/* ── Backdrop ── */
._backdrop_vgux8_49 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}

/* ── Modal box ── */
._modal_vgux8_73 {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _modalIn_vgux8_1 0.18s ease;
}

@keyframes _modalIn_vgux8_1 {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header ── */
._modalHeader_vgux8_109 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: var(--color-primary-lightest); 
}

._modalTitle_vgux8_127 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 3px;
}

._modalSub_vgux8_141 {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

._closeBtn_vgux8_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

._closeBtn_vgux8_153:hover {
  background: #f8fafc;
  color: #1e293b;
}

/* ── Body ── */
._modalBody_vgux8_195 {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Form group ── */
._formGroup_vgux8_211 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_vgux8_223 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_vgux8_235 {
  color: #ef4444;
  margin-left: 2px;
}

._input_vgux8_245 {
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.13s, box-shadow 0.13s;
  width: 100%;
}

._input_vgux8_245:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._inputError_vgux8_281 {
  border-color: #f87171;
}

._errorText_vgux8_289 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

/* ── Footer ── */
._modalFooter_vgux8_303 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #f1f5f9;
}

._cancelBtn_vgux8_321 {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s;
}

._cancelBtn_vgux8_321:hover {
  background: #f8fafc;
}

._submitBtn_vgux8_359 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  border: none;
  background: #ffca40;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
}

._submitBtn_vgux8_359:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._submitBtn_vgux8_359:disabled,
._cancelBtn_vgux8_321:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}._page_1ut8j_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1ut8j_1 *,
._page_1ut8j_1 *::before,
._page_1ut8j_1 *::after {
  box-sizing: border-box;
}

._pageTitle_1ut8j_37 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* ── Table section ── */
._tableSection_1ut8j_53 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1ut8j_71 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ut8j_93 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1ut8j_107 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Buttons ── */
._btn_1ut8j_121 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1ut8j_151 {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
}

._btnPrimary_1ut8j_151:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

._btnSecondary_1ut8j_173 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1ut8j_173:hover {
  background: #f8fafc;
}

/* ── Filter bar ── */
._filterBar_1ut8j_195 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1ut8j_217 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1ut8j_235 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1ut8j_253 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterInput_1ut8j_253,
._filterDate_1ut8j_267 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.13s, box-shadow 0.13s;
}

._filterInput_1ut8j_253:focus,
._filterDate_1ut8j_267:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1ut8j_309 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  z-index: 1;
}

._filterClearX_1ut8j_309:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1ut8j_357 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1ut8j_371 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1ut8j_371:hover {
  background: #fef2f2 !important;
}

/* ── Action icon buttons in table rows ── */
._iconBtn_1ut8j_391 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

._iconBtn_1ut8j_391:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

._iconBtnDanger_1ut8j_431 {
  color: #dc2626;
  border-color: #fecaca;
}

._iconBtnDanger_1ut8j_431:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
}
/* 
.triggerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
} *//* ── Trigger button ── */
._triggerBtn_lls45_3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: none;
   background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
}

._triggerBtn_lls45_3:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

/* ── Backdrop ── */
._backdrop_lls45_51 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}

/* ── Modal box ── */
._modal_lls45_75 {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _modalIn_lls45_1 0.18s ease;
}

@keyframes _modalIn_lls45_1 {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ── Header ── */
._modalHeader_lls45_111 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
}

._modalTitle_lls45_127 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 3px;
}

._modalSub_lls45_141 {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

._closeBtn_lls45_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

._closeBtn_lls45_153:hover {
  background: #f8fafc;
  color: #1e293b;
}

/* ── Body ── */
._modalBody_lls45_195 {
  padding: 20px;
}

/* ── Bank card grid ── */
._bankGrid_lls45_205 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

._bankCard_lls45_219 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  min-height: 110px;
}

._bankCard_lls45_219:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

._bankCardSelected_lls45_263 {
  border-color: #16a34a !important;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

._bankImg_lls45_275 {
  width: 72px;
  height: 52px;
  object-fit: contain;
}

._bankName_lls45_287 {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

._checkIcon_lls45_299 {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #16a34a;
}

/* ── Footer ── */
._modalFooter_lls45_315 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
  margin-top: 18px;
}

._cancelBtn_lls45_335 {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s;
}

._cancelBtn_lls45_335:hover { background: #f8fafc; }

._submitBtn_lls45_369 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  border: none;
   background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
}

._submitBtn_lls45_369:hover {
   background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

._submitBtn_lls45_369:disabled,
._cancelBtn_lls45_335:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Success state ── */
._successState_lls45_427 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0 6px;
  gap: 8px;
}

._successIcon_lls45_445 {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #bbf7d0;
}

._successTitle_lls45_467 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 4px 0 0;
}

._successSub_lls45_481 {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 8px;
}

._downloadBtn_lls45_493 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: #16a34a;
  color: #fff;
  cursor: pointer;
  transition: background 0.13s;
  margin-top: 4px;
}

._downloadBtn_lls45_493:hover { background: #15803d; }

/* .triggerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
} *//* Container */
body {
  overflow-x: hidden;
}
._container_559hi_9 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_559hi_23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}
._pageTitle_559hi_49 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._left_559hi_63 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_559hi_75 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_559hi_75 strong {
  color: #f59e0b;
  font-weight: 600;
}

._title_559hi_103 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_559hi_117 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._primaryBtn_559hi_143,
._secondaryBtn_559hi_145,
._cancelBtn_559hi_147 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_559hi_173 {
  font-size: 16px;
}

._primaryBtn_559hi_143 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

._primaryBtn_559hi_143:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

._secondaryBtn_559hi_145 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_559hi_145:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_559hi_147 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_559hi_147:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_559hi_249 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_559hi_265 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_559hi_265::-webkit-scrollbar {
  width: 6px;
}

._formSection_559hi_265::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_559hi_265::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_559hi_309 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_559hi_323 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_559hi_339 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_559hi_361 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_559hi_377 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

/* PROFILE UPLOAD */
/* .profileUploadBox {
  width: 140px;
  text-align: center;
} */

._profileInner_559hi_401 {
  position: relative;
  display: inline-block;
}

._profileAvatar_559hi_411 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

/* .avatarImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .avatarPlaceholderIcon {
  color: #f59e0b;
} */

/* .cameraIcon {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #f59e0b;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
} */

._cameraIcon_559hi_463:hover {
  transform: scale(1.1);
}

._profileText_559hi_501 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_559hi_513 {
  flex: 1;
}

/* FORM ROW */
._formRow_559hi_523 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_559hi_537 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_559hi_537 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_559hi_561 {
  color: #ef4444;
}

._inputWrapper_559hi_569 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_559hi_581 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_559hi_537 input,
._formGroup_559hi_537 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_559hi_537 input:focus,
._formGroup_559hi_537 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_559hi_635 {
  display: flex;
  gap: 10px;
}

._countrySelect_559hi_645 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_559hi_635 ._inputWrapper_559hi_569 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_559hi_669 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_559hi_669 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_559hi_695 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_559hi_695:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_559hi_723 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_559hi_739 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_559hi_759 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_559hi_777 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_559hi_795 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_559hi_817 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_559hi_833 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_559hi_845 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_559hi_867 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_559hi_817 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_559hi_893 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_559hi_907 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_559hi_919 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_559hi_939 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_559hi_953 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_559hi_963 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_559hi_981 {
  text-align: left;
  margin: 2px 0;
}

._salary_559hi_981 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_559hi_1001 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_559hi_1015 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_559hi_1025 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_559hi_1037 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_559hi_1053 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_559hi_1067 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_559hi_249 {
    grid-template-columns: 1fr;
  }

  ._previewSection_559hi_309 {
    position: static;
  }

  ._formSection_559hi_265 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_559hi_9 {
    padding: 16px;
  }

  ._header_559hi_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_559hi_131 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_559hi_143,
  ._secondaryBtn_559hi_145,
  ._cancelBtn_559hi_147 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_559hi_377 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_559hi_523 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_559hi_323 {
    padding: 20px;
  }

  ._title_559hi_103 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_559hi_391 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_559hi_401 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_559hi_411 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_559hi_455 {
  color: #f59e0b;
}

._profileAvatar_559hi_411 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_559hi_411 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_559hi_1313 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_559hi_463 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_559hi_501 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_559hi_1371 {
  position: relative;
}

._rightColumn_559hi_1379 {
  position: relative;
}

._stickyPreview_559hi_1387 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_559hi_537 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_559hi_537 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_559hi_537 input._form-control_559hi_1399,
._formGroup_559hi_537 select._form-control_559hi_1399 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_559hi_537 input._form-control_559hi_1399:focus,
._formGroup_559hi_537 select._form-control_559hi_1399:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_559hi_537 input._form-control_559hi_1399:hover,
._formGroup_559hi_537 select._form-control_559hi_1399:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_559hi_537 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_559hi_569 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_559hi_581 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_559hi_1549 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_559hi_1559 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_559hi_537 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_559hi_1585 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_559hi_537 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_559hi_569 {
  position: relative;
  width: 100%;
}

._inputIcon_559hi_581 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_559hi_635 {
  display: flex;
  gap: 10px;
}

._countrySelect_559hi_645 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_559hi_635 ._inputWrapper_559hi_569 {
  flex: 1;
}

/* Info note */
._infoNote_559hi_1683 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_559hi_1711,
  ._col-3_559hi_1713 {
    width: 100%;
  }

  ._stickyPreview_559hi_1387 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_559hi_1735 {
  display: flex;
  gap: 8px;

  /* ✅ KEY FIXES */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;

  padding: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb;

  /* smooth scroll */
  scroll-behavior: smooth;
}

._tabsHeader_559hi_1735 {
  scroll-snap-type: x mandatory;
}

._tabsHeading_559hi_1777 {
  scroll-snap-align: start;
}

._tabsHeader_559hi_1735::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_559hi_1735::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 10px;
}

._tabsHeader_559hi_1735::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_559hi_1777 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_559hi_1777:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_559hi_1861 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_559hi_1875 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_559hi_1887 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_559hi_1887:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_559hi_1887:active {
  transform: scale(0.95);
}

._thirdButton_559hi_1875:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_559hi_817 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_559hi_817:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_559hi_1977 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_559hi_1999 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_559hi_833 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_559hi_867 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_559hi_845 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_559hi_833 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_559hi_1999 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_559hi_1977 {
    height: 110px;
  }

  ._previewName_559hi_2099 {
    font-size: 18px;
  }

  ._salaryAmount_559hi_1001 {
    font-size: 24px;
  }

  ._previewContent_559hi_2079 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_559hi_777 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_559hi_777:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_559hi_2369 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_559hi_2369:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_559hi_537 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_559hi_537 select:hover {
  border-color: #fbbf24;
}

._formGroup_559hi_537 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_559hi_2487 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_559hi_2509 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_559hi_2523 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_559hi_2537 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_559hi_2551 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_559hi_2565 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_559hi_2593 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_559hi_2611 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_559hi_2625 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_559hi_2641 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_559hi_2659 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_559hi_2659 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_559hi_2687 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_559hi_2687:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_559hi_2723 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_559hi_2737 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_559hi_2757 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_559hi_2771 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_559hi_2783 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_559hi_2659 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_559hi_2659 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_559hi_2757 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_559hi_2659 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_559hi_2687 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_559hi_2757 {
    font-size: 16px;
  }

  ._miniLabel_559hi_2737 {
    font-size: 10px;
  }

  ._miniSub_559hi_2771 {
    font-size: 9px;
  }

  ._miniIcon_559hi_2783 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_559hi_2659 {
    grid-template-columns: 1fr;
  }
}

._page_559hi_49 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_559hi_49 *,
._page_559hi_49 *::before,
._page_559hi_49 *::after {
  box-sizing: border-box;
}


._layout_559hi_2951 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_559hi_2965 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_559hi_2979 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_559hi_2991 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_559hi_3019 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_559hi_3037 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_559hi_3051 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_559hi_3067 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* .miniGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.miniCard {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: box-shadow 0.14s;
}

.miniCard:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

.miniTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.miniIcon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.miniLabel {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

.miniValue {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.miniSub {
    font-size: 8px;
    color: #94a3b8;
} */

/* TABLE SECTION */
._tableSection_559hi_3207 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_559hi_3225 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_559hi_3247 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_559hi_3261 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_559hi_173 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_559hi_3309 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_559hi_3309:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_559hi_3329 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_559hi_3329:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_559hi_3351 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_559hi_3373 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_559hi_3391 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_559hi_3409 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_559hi_3421,
._filterDate_559hi_3423 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_559hi_3421:focus,
._filterDate_559hi_3423:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_559hi_3471 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_559hi_3471:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_559hi_3523 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_559hi_3537 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_559hi_3537:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_559hi_3563 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_559hi_1 0.15s ease;
}

@keyframes _slideIn_559hi_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_559hi_3609 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_559hi_3623 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_559hi_3653 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_559hi_3667 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_559hi_3681 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_559hi_3681:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_559hi_3727 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_559hi_3727:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_559hi_3747 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_559hi_3747:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_559hi_3795 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_559hi_3813 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_559hi_3835 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_559hi_3851 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_559hi_3867 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_559hi_3877 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_559hi_3895 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_559hi_3911 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_559hi_3911 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_559hi_3937 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_559hi_3959 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_559hi_3971 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_559hi_3987 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_559hi_4003 {
  width: 100%;
}

._barchartBars_559hi_4011 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_559hi_4025 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_559hi_4003 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_559hi_4049 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_559hi_4049 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_559hi_4077 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_559hi_4091 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_559hi_4117 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_559hi_4129 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_559hi_4141 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_559hi_4167 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_559hi_4167 strong {
  font-weight: 600;
}

._activityTime_559hi_4189 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_559hi_4199 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_559hi_4215 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_559hi_4227 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_559hi_4251 {
  display: flex;
  flex-direction: column;
}

._empName_559hi_4261 {
  font-size: 13px;
  font-weight: 600;
}

._empSub_559hi_4271 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_559hi_4283 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_559hi_4283 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_559hi_4313 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_559hi_4331 {
  display: flex;
  align-items: center;
}

._empRing_559hi_4341 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_559hi_4353 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_559hi_4365 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_559hi_4385 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_559hi_2951 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_559hi_3795 {
    position: static;
  }
  ._asideBody_559hi_3851 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_559hi_2979 {
    grid-template-columns: 1fr;
  }
  ._heroCard_559hi_2991 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_559hi_2659 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_559hi_49 {
    padding: 9px 10px;
  }
  ._tableHeader_559hi_3225 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_559hi_3351 {
    gap: 7px;
  }
  ._filterField_559hi_3373 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_559hi_2659 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_559hi_3563 {
    gap: 5px;
  }
  ._bulkBtnGroup_559hi_3667 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_559hi_4515 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_559hi_4539 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_559hi_4561 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_559hi_4215 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_559hi_4227 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_559hi_4251 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_559hi_4261 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_559hi_4271 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_559hi_4283 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_559hi_4283 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_559hi_4313 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_559hi_4331 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_559hi_4341 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_559hi_4353 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_559hi_4365 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_559hi_4385 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_559hi_3911 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_559hi_3911 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_559hi_3937 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_559hi_3911 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_559hi_3959 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_559hi_3971 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_559hi_3987 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_559hi_4003 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_559hi_4011 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_559hi_4025 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_559hi_4003 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_559hi_4049 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_559hi_4049 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._downloadAction_559hi_4969 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_559hi_4969:hover {
  background: #dcfce7; /* light green hover */
}

/* TABS HEADER */
/* .tabsHeader {
  display: flex;
  gap: 8px;
  padding: 0 0 16px 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #f3f4f6;
  scrollbar-width: thin;
} */

/* TAB */
._tabsHeading_559hi_1777 {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeader_559hi_1735 > * {
  flex-shrink: 0;   /* ✅ prevents shrinking */
}

/* HOVER */
._tabsHeading_559hi_1777:hover {
  color: #f59e0b;
  background: #fef3c7;
}

/* 🔥 ACTIVE TAB (IMPORTANT) */
._activeTab_559hi_1861 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}/* Container */
body {
  overflow-x: hidden;
}
._container_ei4tj_9 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_ei4tj_23 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 28px 32px;
  border-radius: 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}

._left_ei4tj_51 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._breadcrumb_ei4tj_63 {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

._breadcrumb_ei4tj_63 strong {
  color: #f59e0b;
  font-weight: 600;
}

._title_ei4tj_91 {
  font-size: 23px;
  font-weight: 800;
  margin: 0;
  color: #111827;
}

._subtitle_ei4tj_105 {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

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

._primaryBtn_ei4tj_131,
._secondaryBtn_ei4tj_133,
._cancelBtn_ei4tj_135 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

._btnIcon_ei4tj_161 {
  font-size: 16px;
}

._primaryBtn_ei4tj_131 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

._primaryBtn_ei4tj_131:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

._secondaryBtn_ei4tj_133 {
  background: #fff;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

._secondaryBtn_ei4tj_133:hover {
  background: #fffbeb;
  transform: translateY(-2px);
}

._cancelBtn_ei4tj_135 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._cancelBtn_ei4tj_135:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* MAIN LAYOUT */
._mainLayout_ei4tj_237 {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 24px;
  align-items: start;
}

/* LEFT - SCROLLABLE */
._formSection_ei4tj_253 {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

._formSection_ei4tj_253::-webkit-scrollbar {
  width: 6px;
}

._formSection_ei4tj_253::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

._formSection_ei4tj_253::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
}

/* RIGHT - STICKY */
._previewSection_ei4tj_297 {
  position: sticky;
  top: 24px;
  align-self: start;
}

/* FORM CARD */
._formCard_ei4tj_311 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

._stepBadge_ei4tj_327 {
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

._stepTitle_ei4tj_349 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 24px;
}

/* TOP ROW */
._topRow_ei4tj_365 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

._profileInner_ei4tj_377 {
  position: relative;
  display: inline-block;
}

._profileAvatar_ei4tj_387 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}


._cameraIcon_ei4tj_421:hover {
  transform: scale(1.1);
}

._profileText_ei4tj_429 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

._nameSection_ei4tj_441 {
  flex: 1;
}

/* FORM ROW */
._formRow_ei4tj_451 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

._formGroup_ei4tj_465 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._formGroup_ei4tj_465 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

._required_ei4tj_489 {
  color: #ef4444;
}

._inputWrapper_ei4tj_497 {
  position: relative;
  display: flex;
  align-items: center;
}

._inputIcon_ei4tj_509 {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  font-size: 16px;
}

._formGroup_ei4tj_465 input,
._formGroup_ei4tj_465 select {
  width: 100%;
  padding: 10px 12px;
  /* ✅ FIXED */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: white;
}

._formGroup_ei4tj_465 input:focus,
._formGroup_ei4tj_465 select:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Mobile Input */
._mobileInput_ei4tj_563 {
  display: flex;
  gap: 10px;
}

._countrySelect_ei4tj_573 {
  width: 80px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._mobileInput_ei4tj_563 ._inputWrapper_ei4tj_497 {
  flex: 1;
}

/* Input with icon */
._inputWithIcon_ei4tj_597 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._inputWithIcon_ei4tj_597 input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

._refreshIcon_ei4tj_623 {
  cursor: pointer;
  color: #f59e0b;
  padding: 8px;
  background: #fef3c7;
  border-radius: 8px;
  transition: all 0.3s ease;
}

._refreshIcon_ei4tj_623:hover {
  background: #fde68a;
  transform: rotate(180deg);
}

._checkboxLabel_ei4tj_651 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

._sectionDivider_ei4tj_667 {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 24px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #fef3c7;
}

/* Form Actions */
._formActions_ei4tj_687 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

._backBtn_ei4tj_705 {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
}

._nextBtn_ei4tj_723 {
  padding: 10px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #111827;
}

/* PREVIEW CARD */
._previewCard_ei4tj_745 {
  background: white;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
}

._previewAvatar_ei4tj_761 {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

._previewCircle_ei4tj_773 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

._previewAvatarImage_ei4tj_795 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

._previewCard_ei4tj_745 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

._previewId_ei4tj_821 {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
}

._muted_ei4tj_835 {
  font-size: 12px;
  color: #9ca3af;
  margin: 0;
}

._statusBadge_ei4tj_847 {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 12px 0;
}

._divider_ei4tj_867 {
  border: none !important;
  height: 1px;
  background: #e5e7eb !important;
  /* margin: 20px 0; */
}

._previewInfo_ei4tj_881 {
  text-align: left;
  margin: 16px 0;
}

._infoRow_ei4tj_891 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 10px;
}

._salary_ei4tj_909 {
  text-align: left;
  margin: 2px 0;
}

._salary_ei4tj_909 strong {
  font-size: 12px;
  color: #6b7280;
}

._salaryAmount_ei4tj_929 {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  margin: 4px 0;
}

._salaryNote_ei4tj_943 {
  font-size: 10px;
  color: #9ca3af;
}

._completionBar_ei4tj_953 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}

._completionHeader_ei4tj_965 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 8px;
}

._progressTrack_ei4tj_981 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._progressFill_ei4tj_995 {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 10px;
  transition: width 0.5s ease;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  ._mainLayout_ei4tj_237 {
    grid-template-columns: 1fr;
  }

  ._previewSection_ei4tj_297 {
    position: static;
  }

  ._formSection_ei4tj_253 {
    max-height: none;
  }
}

@media (max-width: 768px) {
  ._container_ei4tj_9 {
    padding: 16px;
  }

  ._header_ei4tj_23 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  ._actions_ei4tj_119 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._primaryBtn_ei4tj_131,
  ._secondaryBtn_ei4tj_133,
  ._cancelBtn_ei4tj_135 {
    flex: 1;
    justify-content: center;
  }

  ._topRow_ei4tj_365 {
    flex-direction: column;
    align-items: center;
  }

  ._formRow_ei4tj_451 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._formCard_ei4tj_311 {
    padding: 20px;
  }

  ._title_ei4tj_91 {
    font-size: 24px;
  }
}

/* PROFILE BOX */
._profileUploadBox_ei4tj_1127 {
  width: 150px;
  height: 160px;
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

/* INNER */
._profileInner_ei4tj_377 {
  position: relative;
  display: inline-block;
}

/* AVATAR */
._profileAvatar_ei4tj_387 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._avatarPlaceholderIcon_ei4tj_1187 {
  color: #f59e0b;
}

._profileAvatar_ei4tj_387 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

s ._profileAvatar_ei4tj_387 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PLACEHOLDER */
._profilePlaceholder_ei4tj_1241 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d5db, #e5e7eb);
  border-radius: 50%;
}

/* CAMERA ICON */
._cameraIcon_ei4tj_421 {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* TEXT */
._profileText_ei4tj_429 {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Additional styles for Bootstrap integration */
._leftColumn_ei4tj_1299 {
  position: relative;
}

._rightColumn_ei4tj_1307 {
  position: relative;
}

._stickyPreview_ei4tj_1315 {
  position: sticky;
  top: 24px;
}

/* Form control overrides to work with Bootstrap */
/* .formGroup input.form-control,
.formGroup select.form-control {
  padding-left: 38px;
}

.inputWrapper .form-control {
  padding-left: 38px;
} */

/* FORM GROUP */
._formGroup_ei4tj_465 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* LABEL */
._formGroup_ei4tj_465 label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* INPUT + SELECT */
._formGroup_ei4tj_465 input._form-control_ei4tj_1327,
._formGroup_ei4tj_465 select._form-control_ei4tj_1327 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_ei4tj_465 input._form-control_ei4tj_1327:focus,
._formGroup_ei4tj_465 select._form-control_ei4tj_1327:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_ei4tj_465 input._form-control_ei4tj_1327:hover,
._formGroup_ei4tj_465 select._form-control_ei4tj_1327:hover {
  border-color: #fbbf24;
}

/* 🔥 PLACEHOLDER */
._formGroup_ei4tj_465 input::placeholder {
  color: #9ca3af;
  font-size: 12px;
}

/* INPUT WRAPPER (ICON SUPPORT) */
._inputWrapper_ei4tj_497 {
  position: relative;
}

/* .inputWrapper .form-control {
  padding-left: 38px;
} */

/* ICON INSIDE INPUT */
._inputIcon_ei4tj_509 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

/* ERROR STATE */
._errorInput_ei4tj_1477 {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

._errorText_ei4tj_1487 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* DISABLED */
._formGroup_ei4tj_465 input:disabled {
  background: #f9fafb;
  cursor: not-allowed;
}

/* SMALL INPUT (OPTIONAL) */
._smallInput_ei4tj_1513 {
  height: 34px;
  font-size: 12px;
}

/* TEXTAREA */
._formGroup_ei4tj_465 textarea {
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  resize: none;
}

/* Make sure icons work with Bootstrap inputs */
._inputWrapper_ei4tj_497 {
  position: relative;
  width: 100%;
}

._inputIcon_ei4tj_509 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #9ca3af;
  font-size: 16px;
  pointer-events: none;
}

/* Mobile input wrapper */
._mobileInput_ei4tj_563 {
  display: flex;
  gap: 10px;
}

._countrySelect_ei4tj_573 {
  width: 100px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

._mobileInput_ei4tj_563 ._inputWrapper_ei4tj_497 {
  flex: 1;
}

/* Info note */
._infoNote_ei4tj_1611 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 10px;
  border-radius: 10px;
  margin-top: 16px;
}

/* Responsive */
@media (max-width: 992px) {
  ._col-9_ei4tj_1639,
  ._col-3_ei4tj_1641 {
    width: 100%;
  }

  ._stickyPreview_ei4tj_1315 {
    position: static;
    margin-top: 20px;
  }
}

/* TABS HEADER */
._tabsHeader_ei4tj_1663 {
  display: flex;
  gap: 8px;

  /* ✅ KEY FIXES */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;

  padding: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb;

  /* smooth scroll */
  scroll-behavior: smooth;
}

._tabsHeader_ei4tj_1663 {
  scroll-snap-type: x mandatory;
}

._tabsHeading_ei4tj_1705 {
  scroll-snap-align: start;
}

._tabsHeader_ei4tj_1663::-webkit-scrollbar {
  height: 6px;
}

._tabsHeader_ei4tj_1663::-webkit-scrollbar-thumb {
  background: #cbd5f5;
  border-radius: 10px;
}

._tabsHeader_ei4tj_1663::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}


/* .tabsHeader::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border-radius: 10px;
} */

._tabsHeading_ei4tj_1705 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeading_ei4tj_1705:hover {
  color: #f59e0b;
  background: #fef3c7;
}

._activeTab_ei4tj_1791 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
  /* margin-bottom: -2px; */
}

._thirdButton_ei4tj_1805 {
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}

._deleteBtn_ei4tj_1817 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

._deleteBtn_ei4tj_1817:hover {
  background: #fecaca;
  transform: scale(1.05);
}

._deleteBtn_ei4tj_1817:active {
  transform: scale(0.95);
}

._thirdButton_ei4tj_1805:hover {
  /* background: #fef3c7; */
  color: #f59e0b;
  border-color: #f59e0b;
}

/* RIGHT COLUMN STICKY PREVIEW - WITH HALF YELLOW BG */
._previewCard_ei4tj_745 {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

._previewCard_ei4tj_745:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Top Half Yellow Gradient Background */
._previewTopBg_ei4tj_1907 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #ffdb82;
  z-index: 0;
}

/* Avatar Wrapper - For Overlapping */
._previewAvatarWrapper_ei4tj_1929 {
  position: relative;
  z-index: 1;
  /* padding-top: 60px; */
  display: flex;
  justify-content: center;
}

/* Avatar Styles */
._previewAvatar_ei4tj_761 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 4px solid white;
  overflow: hidden;
}

._previewAvatarImage_ei4tj_795 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._previewCircle_ei4tj_773 {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

/* Content Section - White Bottom */
/* .previewContent {
  position: relative;
  z-index: 1;
  background: white;
  padding: 20px 24px 24px 24px;
  border-radius: 24px 24px 24px 24px;
  margin-top: 0;
} */

/* Name Styles */
/* .previewName {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
  text-align: center;
}

.previewId {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin: 0 0 4px 0;
  text-align: center;
} */

/* .muted {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 8px 0;
  text-align: center;
} */

/* Status Badge */
/* .statusBadge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 8px 0;
  text-align: center;
  width: auto;
  display: inline-block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
} */

/* Divider */
/* .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 16px 0;
} */

/* Salary Section */
/* .salary {
  text-align: left;
  margin: 8px 0;
} */

/* .salary strong {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
} */
/* 
.salaryAmount {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin: 8px 0 4px 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* .salaryNote {
  font-size: 11px;
  color: #9ca3af;
} */

/* Responsive */
@media (max-width: 768px) {
  ._previewAvatar_ei4tj_761 {
    width: 80px;
    height: 80px;
  }

  ._previewAvatarWrapper_ei4tj_1929 {
    /* padding-top: 50px; */
  }

  ._previewTopBg_ei4tj_1907 {
    height: 110px;
  }

  ._previewName_ei4tj_2029 {
    font-size: 18px;
  }

  ._salaryAmount_ei4tj_929 {
    font-size: 24px;
  }

  ._previewContent_ei4tj_2009 {
    padding: 16px 20px 20px 20px;
  }
}

._backBtn_ei4tj_705 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_ei4tj_705:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

/* .backBtn {
  padding: 10px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-weight: 600;
} */

._discardBtn_ei4tj_2299 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._discardBtn_ei4tj_2299:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

._formGroup_ei4tj_465 select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  /* space for arrow */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  background-color: #ffffff;

  /* 🔥 REMOVE DEFAULT */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 🔥 CUSTOM ARROW */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

._formGroup_ei4tj_465 select:hover {
  border-color: #fbbf24;
}

._formGroup_ei4tj_465 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._cmp-page_ei4tj_2417 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._cmp-page-title_ei4tj_2439 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._cmp-layout_ei4tj_2453 {
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: 10px;
  align-items: start;
}

._cmp-layout-main_ei4tj_2467 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._cmp-stats-row_ei4tj_2481 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

/* ── Hero card ── */
._cmp-hero-card_ei4tj_2495 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._cmp-sparkline_ei4tj_2523 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._cmp-hero-label_ei4tj_2541 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._cmp-hero-value_ei4tj_2555 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._cmp-hero-growth_ei4tj_2571 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}
/* GRID */
._miniGrid_ei4tj_2589 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 10px;
}
/* GRID */
._miniGrid_ei4tj_2589 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CARD */
._miniCard_ei4tj_2617 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
  min-width: 0; /* prevents overflow */
}

._miniCard_ei4tj_2617:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* TOP */
._miniTop_ei4tj_2653 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* LABEL */
._miniLabel_ei4tj_2667 {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE */
._miniValue_ei4tj_2687 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* SUB */
._miniSub_ei4tj_2701 {
  font-size: 10px;
  color: #9ca3af;
}

/* ICON */
._miniIcon_ei4tj_2713 {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 992px) {
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._miniValue_ei4tj_2687 {
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._miniCard_ei4tj_2617 {
    padding: 10px;
    border-radius: 10px;
  }

  ._miniValue_ei4tj_2687 {
    font-size: 16px;
  }

  ._miniLabel_ei4tj_2667 {
    font-size: 10px;
  }

  ._miniSub_ei4tj_2701 {
    font-size: 9px;
  }

  ._miniIcon_ei4tj_2713 {
    width: 22px;
    height: 22px;
  }
}

/* Extra small mobile */
@media (max-width: 400px) {
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: 1fr;
  }
}

._page_ei4tj_2843 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_ei4tj_2843 *,
._page_ei4tj_2843 *::before,
._page_ei4tj_2843 *::after {
  box-sizing: border-box;
}

._pageTitle_ei4tj_2879 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layout_ei4tj_2893 {
  display: grid;
  /* grid-template-columns: 1fr 232px; */
  gap: 10px;
  align-items: start;
}

._layoutMain_ei4tj_2907 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

._statsRow_ei4tj_2921 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 7px;
}

._heroCard_ei4tj_2933 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_ei4tj_2961 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_ei4tj_2979 {
  font-size: 10px;
  color: #92400e;
  font-weight: 500;
  margin: 0 0 3px;
}

._heroValue_ei4tj_2993 {
  font-size: 32px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

._heroGrowth_ei4tj_3009 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
}

/* TABLE SECTION */
._tableSection_ei4tj_3029 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_ei4tj_3047 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_ei4tj_3069 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_ei4tj_3083 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_ei4tj_161 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_ei4tj_3131 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_ei4tj_3131:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_ei4tj_3151 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_ei4tj_3151:hover {
  background: #f8fafc;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_ei4tj_3173 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_ei4tj_3195 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_ei4tj_3213 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_ei4tj_3231 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_ei4tj_3243,
._filterDate_ei4tj_3245 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_ei4tj_3243:focus,
._filterDate_ei4tj_3245:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_ei4tj_3293 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_ei4tj_3293:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_ei4tj_3345 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_ei4tj_3359 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_ei4tj_3359:hover {
  background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_ei4tj_3385 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_ei4tj_1 0.15s ease;
}

@keyframes _slideIn_ei4tj_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_ei4tj_3431 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_ei4tj_3445 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_ei4tj_3475 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_ei4tj_3489 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_ei4tj_3503 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_ei4tj_3503:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_ei4tj_3549 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_ei4tj_3549:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_ei4tj_3569 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_ei4tj_3569:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_ei4tj_3617 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 10px;
}

._asideHeader_ei4tj_3635 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._asideToggle_ei4tj_3657 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
}

._asideBody_ei4tj_3673 {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: calc(100vh - 50px);
  min-height: 500px;
}

._asideCard_ei4tj_3689 {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_ei4tj_3699 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._asideTitleRow_ei4tj_3717 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_ei4tj_3733 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._donut_ei4tj_3733 {
  position: relative;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

._donutCenter_ei4tj_3759 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._donutLegend_ei4tj_3781 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._legendItem_ei4tj_3793 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._legendDot_ei4tj_3809 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_ei4tj_3825 {
  width: 100%;
}

._barchartBars_ei4tj_3833 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 58px;
}

._barCol_ei4tj_3847 {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

._bar_ei4tj_3825 {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.28s;
}

._barLabels_ei4tj_3871 {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

._barLabel_ei4tj_3871 {
  flex: 1;
  font-size: 8px;
  color: #94a3b8;
  text-align: center;
}

/* ── Revenue ── */
._revenueValue_ei4tj_3899 {
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 3px;
}

._revenueBadge_ei4tj_3913 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Activity ── */
._activityFeed_ei4tj_3939 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._activityItem_ei4tj_3951 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._activityIcon_ei4tj_3963 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._activityText_ei4tj_3989 {
  flex: 1;
  font-size: 10px;
  color: #1e293b;
  line-height: 1.4;
}

._activityText_ei4tj_3989 strong {
  font-weight: 600;
}

._activityTime_ei4tj_4011 {
  font-size: 9px;
  color: #94a3b8;
}

._activityEmpty_ei4tj_4021 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

/* ═══════════════════ PROFILE CELL ═══════════════════ */
._empCell_ei4tj_4037 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_ei4tj_4049 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

._empInfo_ei4tj_4073 {
  display: flex;
  flex-direction: column;
}

._empName_ei4tj_4083 {
  font-size: 13px;
  font-weight: 600;
}

._empSub_ei4tj_4093 {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTACT */
._empContact_ei4tj_4105 {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #4b5563;
}

._empContact_ei4tj_4105 div {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* BADGE */
._empBadge_ei4tj_4135 {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ATTENDANCE */
._empAttendance_ei4tj_4153 {
  display: flex;
  align-items: center;
}

._empRing_ei4tj_4163 {
  position: relative;
  width: 40px;
  height: 40px;
}

._empRingBg_ei4tj_4175 {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 4;
}

._empRingFill_ei4tj_4187 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_ei4tj_4207 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
  ._layout_ei4tj_2893 {
    grid-template-columns: 1fr;
  }
  ._layoutAside_ei4tj_3617 {
    position: static;
  }
  ._asideBody_ei4tj_3673 {
    max-height: none;
  }
}

@media (max-width: 1024px) {
  ._statsRow_ei4tj_2921 {
    grid-template-columns: 1fr;
  }
  ._heroCard_ei4tj_2933 {
    grid-row: auto;
    min-height: 100px;
  }
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_ei4tj_2843 {
    padding: 9px 10px;
  }
  ._tableHeader_ei4tj_3047 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._filterBar_ei4tj_3173 {
    gap: 7px;
  }
  ._filterField_ei4tj_3195 {
    max-width: 100%;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  ._miniGrid_ei4tj_2589 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_ei4tj_3385 {
    gap: 5px;
  }
  ._bulkBtnGroup_ei4tj_3489 {
    flex-wrap: wrap;
  }
}

/* Status Badge */
._badge_ei4tj_4337 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Gender Badge */
._planBadge_ei4tj_4361 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._textMuted_ei4tj_4383 {
  color: #94a3b8;
  font-size: 11px;
}

/* Employee Cell */
._empCell_ei4tj_4037 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._empAvatar_ei4tj_4049 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._empInfo_ei4tj_4073 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_ei4tj_4083 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_ei4tj_4093 {
  font-size: 11px;
  color: #94a3b8;
}

/* Contact Cell */
._empContact_ei4tj_4105 {
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #475569;
}

._empContact_ei4tj_4105 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Employment Badge */
._empBadge_ei4tj_4135 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Attendance Cell */
._empAttendance_ei4tj_4153 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRing_ei4tj_4163 {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._empRingBg_ei4tj_4175 {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 3;
}

._empRingFill_ei4tj_4187 {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
  transform: rotate(-90deg);
  transform-origin: center;
}

._empRingText_ei4tj_4207 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}

/* Donut Chart */
._donut_ei4tj_3733 {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

._donut_ei4tj_3733 svg {
  width: 100%;
  height: 100%;
}

._donutCenter_ei4tj_3759 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 800;
  color: #1e293b;
}

/* Donut Wrapper */
._donutWrap_ei4tj_3733 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Donut Legend */
._donutLegend_ei4tj_3781 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_ei4tj_3793 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748b;
}

._legendDot_ei4tj_3809 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bar Chart */
._barchartWrap_ei4tj_3825 {
  width: 100%;
  margin-top: 8px;
}

._barchartBars_ei4tj_3833 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
}

._barCol_ei4tj_3847 {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

._bar_ei4tj_3825 {
  width: 100%;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 2px;
}

._barLabels_ei4tj_3871 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

._barLabel_ei4tj_3871 {
  flex: 1;
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
}

._downloadAction_ei4tj_4791 {
  color: #16a34a; /* green */
  font-weight: 500;
}

._downloadAction_ei4tj_4791:hover {
  background: #dcfce7; /* light green hover */
}

/* TAB */
._tabsHeading_ei4tj_1705 {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 16px;
  margin: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 2px solid transparent;
}

._tabsHeader_ei4tj_1663 > * {
  flex-shrink: 0; /* ✅ prevents shrinking */
}
._tabsHeading_ei4tj_1705 {
  flex-shrink: 0;   /* 🔥 MOST IMPORTANT FIX */
}
/* HOVER */
._tabsHeading_ei4tj_1705:hover {
  color: #f59e0b;
  background: #fef3c7;
}

/* 🔥 ACTIVE TAB (IMPORTANT) */
._activeTab_ei4tj_1791 {
  color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 2px solid #f59e0b;
}


/* ── Wrapper ── */
._wrap_1kjlu_3 {
  padding: 10px 14px;
  background: #f4f7fb;
  min-height: 100vh;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._wrap_1kjlu_3 *,
._wrap_1kjlu_3 *::before,
._wrap_1kjlu_3 *::after {
  box-sizing: border-box;
}

/* ── Breadcrumb ── */
._breadcrumb_1kjlu_41 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 16px;
}

._backBtn_1kjlu_59 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

._backBtn_1kjlu_59:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

._breadcrumb_1kjlu_41 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

/* ── Page title row ── */
._pageTitleRow_1kjlu_111 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

._pageTitleLeft_1kjlu_127 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._pageTitle_1kjlu_111 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

/* ── Badges ── */
._badge_1kjlu_155 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
}

._badgeActive_1kjlu_175 {
  background: #dcfce7;
  color: #166534;
}

._badgeDot_1kjlu_185 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

._badgeType_1kjlu_201 {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* ── Actions ── */
._actions_1kjlu_215 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* .searchInput {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  outline: none;
  width: 200px;
  transition: border-color 0.13s;
}

.searchInput:focus {
  border-color: #94a3b8;
} */


._searchInput_1kjlu_229 {
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    outline: none;
    width: 260px;
    transition: all 0.2s ease;
}

._searchInput_1kjlu_229:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

._btn_1kjlu_301 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: background 0.12s;
  white-space: nowrap;
}

._btn_1kjlu_301:hover {
  background: #f8fafc;
}

/* ── More dropdown ── */
._moreWrap_1kjlu_345 {
  position: relative;
}

._dropdown_1kjlu_353 {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 150px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

._dropdownItem_1kjlu_379 {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 12px;
  color: #374151;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

._dropdownItem_1kjlu_379:hover {
  background: #f8fafc;
}

/* ── Card grid ── */
._cardGrid_1kjlu_413 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  ._cardGrid_1kjlu_413 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  ._cardGrid_1kjlu_413 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  ._cardGrid_1kjlu_413 {
    grid-template-columns: 1fr;
  }
}

/* ── Card ── */
._cardLink_1kjlu_463 {
  text-decoration: none;
  color: inherit;
  display: block;
}

._card_1kjlu_413 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -moz-transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -ms-transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -o-transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

._card_1kjlu_413:hover {
  transform: translateY(-2px);
 box-shadow: var(--shadow-primary-md);
  border-color: var(--color-primary-light);
}

/* ── Card top ── */
._cardTop_1kjlu_529 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

._avatar_1kjlu_543 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f1f5f9;
  flex-shrink: 0;
}

._cardInfo_1kjlu_561 {
  flex: 1;
  min-width: 0;
}

._empName_1kjlu_571 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

._empCode_1kjlu_591 {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ── Card divider ── */
._cardDivider_1kjlu_615 {
  height: 1px;
  background: #f1f5f9;
  margin-bottom: 10px;
}

/* ── Card bottom ── */
._cardBottom_1kjlu_629 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._cardRow_1kjlu_641 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._amount_1kjlu_655 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

._cardEmail_1kjlu_667 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  overflow: hidden;
}

._emailLabel_1kjlu_683 {
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}

._emailVal_1kjlu_695 {
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Loading / empty ── */
._loadingState_1kjlu_711 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_1kjlu_733 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #ffca40;
  border-radius: 50%;
  animation: _spin_1kjlu_733 0.7s linear infinite;
}

@keyframes _spin_1kjlu_733 {
  to {
    transform: rotate(360deg);
  }
}

._emptyState_1kjlu_763 {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 13px;
}

/* ── Pagination ── */
._pagination_1kjlu_779 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
}

._paginationInfo_1kjlu_797 {
  font-size: 11px;
  color: #64748b;
}

._pageBtns_1kjlu_807 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._pageBtn_1kjlu_807 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

._pageBtn_1kjlu_807:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._pageBtn_1kjlu_807:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._pageBtnActive_1kjlu_873 {
  background: #ffca40 !important;
  border-color: #ffca40 !important;
  color: #1e293b !important;
  font-weight: 700;
}

._pageDots_1kjlu_887 {
  font-size: 12px;
  color: #94a3b8;
  padding: 0 4px;
}/* ── Wrapper ── */
._wrap_9t0vc_3 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_9t0vc_3 *,
._wrap_9t0vc_3 *::before,
._wrap_9t0vc_3 *::after {
    box-sizing: border-box;
}

/* ── Loading ── */
._loadingState_9t0vc_41 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_9t0vc_63 {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #ffca40;
    border-radius: 50%;
    animation: _spin_9t0vc_63 0.7s linear infinite;
}

@keyframes _spin_9t0vc_63 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Breadcrumb ── */
._breadcrumb_9t0vc_95 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

._backBtn_9t0vc_111 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

._backBtn_9t0vc_111:hover {
    background: #f8fafc;
}

._breadcrumb_9t0vc_95 span:last-child {
    color: #1e293b;
    font-weight: 500;
}

/* ── Page title row ── */
._pageTitleRow_9t0vc_161 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

._pageTitleLeft_9t0vc_177 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._pageTitle_9t0vc_161 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* ── Actions ── */
._actions_9t0vc_203 {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

._btn_9t0vc_217 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: background 0.12s;
    white-space: nowrap;
}

._btn_9t0vc_217:hover {
    background: #f8fafc;
}

._btnPrimary_9t0vc_259 {
    background: var(--gradient-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-primary-sm);
    font-weight: 600;
}

._btnPrimary_9t0vc_259:hover {
    background: var(--gradient-primary);
}

/* More dropdown */
._moreWrap_9t0vc_285 {
    position: relative;
}

._dropdown_9t0vc_293 {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

._dropdownItem_9t0vc_319 {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 12px;
    color: #374151;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

._dropdownItem_9t0vc_319:hover {
    background: #f8fafc;
}

/* ── Profile header card ── */
._profileCard_9t0vc_353 {
     background: var(--gradient-header);
    border: 1px solid var(--color-primary-lightest);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

._profileLeft_9t0vc_375 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 220px;
}

._avatar_9t0vc_391 {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
   border: 2px solid var(--color-primary-light);
    flex-shrink: 0;
}

._empName_9t0vc_409 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
}

._empMeta_9t0vc_423 {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
}

._empMeta_9t0vc_423 strong {
    color: #374151;
}

._profileMid_9t0vc_443 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 180px;
    border-left: 1.5px solid #f0ebe0;
    padding-left: 20px;
}

._metaRow_9t0vc_463 {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.8;
}

._metaRow_9t0vc_463 strong {
    color: #1e293b;
}

._profilePaidWrap_9t0vc_483 {
    display: flex;
    align-items: center;
}

._paidBadge_9t0vc_493 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid #bbf7d0;
}

._netPayWrap_9t0vc_519 {
    text-align: right;
    min-width: 160px;
    border-left: 1.5px solid #f0ebe0;
    padding-left: 20px;
}

._netPayLabel_9t0vc_533 {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

._netPayAmount_9t0vc_545 {
    font-size: 26px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

._netPaySub_9t0vc_559 {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
}

/* ── Main 2-col grid ── */
._mainGrid_9t0vc_573 {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 960px) {
    ._mainGrid_9t0vc_573 {
        grid-template-columns: 1fr;
    }
}

._leftCol_9t0vc_599 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._rightCol_9t0vc_611 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Section card wrapper ── */
._sectionCard_9t0vc_625 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

._sectionTitle_9t0vc_639 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding: 20px;
}

/* ── Earnings card ── */
._earningsCard_9t0vc_657 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    /* padding-bottom: 56px; */
}

._earningsTitle_9t0vc_673 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

._earningsTable_9t0vc_687 {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

._earningsTable_9t0vc_687 thead th {
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #374151;
}

._earningsTable_9t0vc_687 tbody td {
    padding: 7px 10px;
    border: 1px solid #f1f5f9;
    color: #374151;
}

._earningsTable_9t0vc_687 tbody tr:nth-child(even) td {
    background: #fafafa;
}

._textRight_9t0vc_735 {
    text-align: right !important;
}

._totalRow_9t0vc_743 td {
    background: #f8fafc !important;
    font-weight: 700;
    font-size: 12px;
    color: #1e293b;
    border-top: 2px solid #e2e8f0 !important;
}

/* Net pay row */
._netRow_9t0vc_761 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 12px;
    color: #166534;
}

._netFormula_9t0vc_791 {
    font-size: 11px;
    color: #374151;
}

._netFormula_9t0vc_791 strong {
    color: #166534;
}

._amountWords_9t0vc_809 {
    font-size: 10px;
    color: #6b7280;
    margin-top: 6px;
    padding: 5px 12px;
    font-style: italic;
}

/* ── Right panel cards ── */
._panelCard_9t0vc_827 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

._panelTitle_9t0vc_841 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

._panelRow_9t0vc_859 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
    gap: 8px;
}

._panelRow_9t0vc_859 strong {
    color: #1e293b;
    font-weight: 600;
}

._panelBtn_9t0vc_889 {
    width: 100%;
    margin-top: 10px;
    padding: 7px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s;
}

._panelBtn_9t0vc_889:hover {
    background: #f8fafc;
}

/* Progress bar */
._progressBar_9t0vc_927 {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
}

._progressFill_9t0vc_943 {
    height: 100%;
    background: #ffca40;
    border-radius: 3px;
}

/* ── Vertical Timeline (Right Column) ── */
._timeline_9t0vc_957 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._timelineItem_9t0vc_969 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

._tlIcon_9t0vc_981 {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

._tlDone_9t0vc_1003 {
    background: #dcfce7;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

._tlPending_9t0vc_1015 {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
}

._tlBody_9t0vc_1027 {
    flex: 1;
}

._tlLabel_9t0vc_1035 {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

._tlDate_9t0vc_1047 {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 1px;
}

/* ── Footer ── */
._footer_9t0vc_1061 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

._footerTitle_9t0vc_1085 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

._footerSub_9t0vc_1099 {
    font-size: 10px;
    color: #9ca3af;
}

._footerRight_9t0vc_1109 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 10px;
    color: #6b7280;
}

._footerNote_9t0vc_1127 {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
}

/* ──  TIMELINE  */
._timelineHorizontalWrap_9t0vc_1141 {
    margin-top: 16px;
    padding: 29px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: 100%;
    overflow-x: auto;
}

._timelineTitle_9t0vc_1161 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e293b;
}

._timelineHorizontal_9t0vc_1141 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    min-width: 600px;
}

/* Each step container */
._timelineStep_9t0vc_1193 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}

/* Circle indicator */
._timelineCircle_9t0vc_1213 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 3;
    position: relative;
    background: #fff;
    transition: all 0.2s ease;
}

/* Done state */
._timelineDone_9t0vc_1245 {
   background: var(--gradient-primary);
    color: #fff;
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-primary-sm);
}

/* Pending state */
._timelinePending_9t0vc_1261 {
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    color: #94a3b8;
}

/* Connecting line between circles */
._timelineStep_9t0vc_1193:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: calc(100% - 36px);
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    z-index: 1;
}


._timelineStep_9t0vc_1193._completedStep_9t0vc_1299:not(:last-child)::before {
        background: var(--gradient-primary); 
}


._timelineText_9t0vc_1309 {
    margin-top: 12px;
    width: 100%;
    min-width: 100px;
    padding: 0 8px;
}

._timelineLabel_9t0vc_1323 {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
}

._timelineDate_9t0vc_1339 {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Responsive horizontal timeline */
@media (max-width: 768px) {
    ._timelineHorizontalWrap_9t0vc_1141 {
        padding: 16px 12px;
    }
    
    ._timelineHorizontal_9t0vc_1141 {
        min-width: 500px;
    }
    
    ._timelineCircle_9t0vc_1213 {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    ._timelineStep_9t0vc_1193:not(:last-child)::before {
        top: 16px;
        width: calc(100% - 32px);
    }
    
    ._timelineLabel_9t0vc_1323 {
        font-size: 10px;
        white-space: normal;
        word-break: keep-all;
    }
    
    ._timelineDate_9t0vc_1339 {
        font-size: 9px;
    }
    
    ._timelineText_9t0vc_1309 {
        min-width: 80px;
    }
}

/* Status badge */
._status_9t0vc_1425 {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

._status_9t0vc_1425._yellow_9t0vc_1441 {
    background: #fef3c7;
    color: #92400e;
}


._totalRow_9t0vc_743 td {
  background: unset !important; 
  font-weight: 700;
  font-size: 12px;
  padding: 10px;
  border-top: 2px solid #e2e8f0;
}


._totalRow_9t0vc_743 td:nth-child(1),
._totalRow_9t0vc_743 td:nth-child(2) {
 background: #fef3c7 !important; 
  color: #92400e;
}


._totalRow_9t0vc_743 td:nth-child(3),
._totalRow_9t0vc_743 td:nth-child(4) {
  background:  #fee2e2 !important;
  color: #7f1d1d;
}


._totalRow_9t0vc_743 td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

._totalRow_9t0vc_743 td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ══════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════ */
._page_nv2qc_7 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_nv2qc_7 *,
._page_nv2qc_7 *::before,
._page_nv2qc_7 *::after {
  box-sizing: border-box;
}

._pageTitle_nv2qc_43 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* ══════════════════════════════════════════════
   SUMMARY STAT CARDS
══════════════════════════════════════════════ */
._summaryRow_nv2qc_63 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

._statCard_nv2qc_75 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.14s;
}

._statCard_nv2qc_75:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

._statTop_nv2qc_105 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._statLabel_nv2qc_117 {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

._statIcon_nv2qc_131 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statValue_nv2qc_151 {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
._layout_nv2qc_171 {
  display: grid;
  gap: 10px;
  align-items: start;
}

._layoutMain_nv2qc_183 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* ══════════════════════════════════════════════
   TABLE SECTION
══════════════════════════════════════════════ */
._tableSection_nv2qc_203 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_nv2qc_221 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_nv2qc_243 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_nv2qc_257 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
._btn_nv2qc_275 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_nv2qc_309 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnPrimary_nv2qc_309:hover {
  background: var(--gradient-primary-hover);
  box-shadow: 0 2px 7px var(--shadow-primary-sm);
}

._btnSecondary_nv2qc_329 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_nv2qc_329:hover {
  background: #f8fafc;
}

/* ══════════════════════════════════════════════
   BULK BAR
══════════════════════════════════════════════ */
._bulkSelectedBar_nv2qc_355 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_nv2qc_1 0.15s ease;
}

@keyframes _slideIn_nv2qc_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_nv2qc_403 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_nv2qc_417 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_nv2qc_447 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_nv2qc_461 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_nv2qc_475 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_nv2qc_475:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_nv2qc_521 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_nv2qc_521:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_nv2qc_541 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_nv2qc_541:hover {
  background: #f1f5f9;
  color: #475569;
}

/* ══════════════════════════════════════════════
   STATUS BADGE
══════════════════════════════════════════════ */
._badge_nv2qc_593 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   HALF DAY BADGE
══════════════════════════════════════════════ */
._halfDayBadge_nv2qc_621 {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  background: #ede9fe;
  color: #7c3aed;
  margin-top: 2px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   EMPLOYEE CELL
══════════════════════════════════════════════ */
._empCell_nv2qc_655 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_nv2qc_667 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

._empInfo_nv2qc_693 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_nv2qc_705 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._empSub_nv2qc_717 {
  font-size: 10px;
  color: #94a3b8;
}

/* ══════════════════════════════════════════════
   APPROVER STACK
══════════════════════════════════════════════ */
._approverStack_nv2qc_733 {
  display: flex;
  align-items: center;
}

._approverAvatar_nv2qc_743 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

._approverImg_nv2qc_775 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════
   DATE RANGE CELL
══════════════════════════════════════════════ */
._dateRange_nv2qc_793 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._dateFrom_nv2qc_805 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._dateTo_nv2qc_817 {
  font-size: 10px;
  color: #94a3b8;
}

/* ══════════════════════════════════════════════
   DAYS CELL
══════════════════════════════════════════════ */
._daysCell_nv2qc_833 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

._daysValue_nv2qc_847 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

._daysLabel_nv2qc_861 {
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════
   REASON CELL
══════════════════════════════════════════════ */
._reasonCell_nv2qc_881 {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
  max-width: 200px;
}

/* ══════════════════════════════════════════════
   MUTED TEXT
══════════════════════════════════════════════ */
._textMuted_nv2qc_901 {
  color: #94a3b8;
  font-size: 11px;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  ._summaryRow_nv2qc_63 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_nv2qc_7 {
    padding: 9px 10px;
  }

  ._summaryRow_nv2qc_63 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._tableHeader_nv2qc_221 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  ._summaryRow_nv2qc_63 {
    grid-template-columns: 1fr 1fr;
  }

  ._bulkSelectedBar_nv2qc_355 {
    gap: 5px;
  }

  ._bulkBtnGroup_nv2qc_461 {
    flex-wrap: wrap;
  }
}

/* cards new */
._accordionHeader_nv2qc_989 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  border-radius: 1px;
  background: transparent;
  /* border: 1px solid rgba(226, 232, 240, 0.5); */
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s ease;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  -ms-border-radius: 1px;
  -o-border-radius: 1px;
}

._accordionHeader_nv2qc_989:hover {
  /* color: #ffffff; */
  /* background: rgba(255, 255, 255, 0.4);  */
  border-color: #fcfbf9;
}

._accordionTitle_nv2qc_1037 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  font-weight: 600;
}

._accordionTitlesvg_nv2qc_1055 {
  color: #f59e0b;
}

._accordionToggle_nv2qc_1063 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_nv2qc_1063:hover {
  color: #374151;
}

._accordionRight_nv2qc_1095 {
  display: flex;
  align-items: center;
  color: #64748b;
}

/* ✅ ACTIVE STATE (THIS IS THE MAIN FIX) */
._activeAccordion_nv2qc_1109 {
  color: #334155;
  /* dark grey text */
  background: rgba(255, 255, 255, 0.5);
  /* ✅ light transparent white */
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* subtle shadow */
}

/* ===== STATS ROW LAYOUT ===== */
._cmp-stats-row_nv2qc_1131 {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 10px;
  align-items: stretch;
}

/* ===== HERO CARD (YELLOW) ===== */
._cmp-hero-card_nv2qc_1147 {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  position: relative;
  overflow: hidden;
  grid-row: 1 / 3;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
}

._cmp-hero-card_nv2qc_1147:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

._cmp-hero-label_nv2qc_1195 {
  font-size: 11px;
  color: #92400e;
  font-weight: 600;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._cmp-hero-value_nv2qc_1213 {
  font-size: 30px;
  font-weight: 800;
  color: #92400e;
  margin: 0;
  line-height: 1;
}

/* ===== MINI GRID ===== */
._miniGrid_nv2qc_1231 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ✅ FIX */
  gap: 12px;
}

/* ===== MINI CARD ===== */
._miniCard_nv2qc_1247 {
  background: linear-gradient(145deg, #ffffff, #fafafa);
  /* ✅ MAIN FIX */
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.25s ease;
  min-width: 0;
}

._miniCard_nv2qc_1247:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* ===== TOP ROW ===== */
._miniTop_nv2qc_1285 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== LABEL ===== */
._miniLabel_nv2qc_1299 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

/* ===== VALUE ===== */
._miniValue_nv2qc_1313 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* ===== ICON ===== */
._miniIcon_nv2qc_1327 {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* new again */
._heroCard_nv2qc_1349 {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

._sparkline_nv2qc_1377 {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.22;
  width: 92px;
  height: 38px;
}

._heroLabel_nv2qc_1395 {
  font-size: 11px;
  font-weight: 600;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

._heroValue_nv2qc_1413 {
  font-size: 22px;
  font-weight: 700;
  color: #78350f;
  margin: 0;
  line-height: 1.2;
}

._accordionHeader_nv2qc_989 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 6px 14px;

  background: transparent;
  /* border: 1px solid rgba(226, 232, 240, 0.5); */

  font-size: 12px;
  font-weight: 500;
  color: #6b7280;

  transition: all 0.2s ease;
  margin-bottom: 8px;
  /* 🔥 IMPORTANT (spacing fix) */
}

._accordionHeader_nv2qc_989:hover {
  border-color: #fcfbf9;
}

._accordionLeft_nv2qc_1475 {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  color: #334155;
  font-weight: 600;
}

._accordionRight_nv2qc_1095 {
  display: flex;
  align-items: center;
  color: #64748b;
}

._activeAccordion_nv2qc_1109 {
  color: #334155;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* old referal */
._accordionHeader_nv2qc_989 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}

._accordionHeader_nv2qc_989:hover {
  background-color: #f9fafb;
}

._statsAccordion_nv2qc_1553 {
  /* margin-bottom: 24px; */
  /* background: white; */
  border-radius: 12px;
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}

._heroGrowth_nv2qc_1569 {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}

._heroCard_nv2qc_1349:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

/* ===== COMPACT TOP CARDS ===== */

._statsGrid_nv2qc_1609 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

._summaryCard_nv2qc_1623 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  min-height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: 0.2s ease;
}

._summaryCard_nv2qc_1623:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

._summaryTop_nv2qc_1657 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._summaryIcon_nv2qc_1669 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryValue_nv2qc_1689 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

._summaryTitle_nv2qc_1701 {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-top: 2px;
  white-space: nowrap;
}

/* RIGHT SIDE VALUE */
._summaryRight_nv2qc_1719 {
  display: flex;
  align-items: center;
}

/* TABLET */
@media (max-width: 1100px) {
  ._statsGrid_nv2qc_1609 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE */
@media (max-width: 600px) {
  ._statsGrid_nv2qc_1609 {
    grid-template-columns: 1fr;
  }

  ._summaryCard_nv2qc_1623 {
    min-height: 52px;
    padding: 9px 10px;
  }

  ._summaryValue_nv2qc_1689 {
    font-size: 17px;
  }

  ._summaryTitle_nv2qc_1701 {
    font-size: 10px;
  }

  ._summaryIcon_nv2qc_1669 {
    width: 30px;
    height: 30px;
  }
}

._balanceFooter_nv2qc_1793 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  margin-top: 20px;
}

._balanceFooterItem_nv2qc_1817 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: #ffffff;
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

._balanceFooterItem_nv2qc_1817::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.25s ease;
}

._balanceFooterItem_nv2qc_1817:hover::before {
  opacity: 1;
}

._balanceFooterItem_nv2qc_1817:first-child::before {
  background: #3b82f6;
}

._balanceFooterItem_nv2qc_1817:nth-child(2)::before {
  background: #10b981;
}

._balanceFooterItem_nv2qc_1817:last-child::before {
  background: #f59e0b;
}

._balanceFooterItem_nv2qc_1817:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

._balanceFooterLabel_nv2qc_1913 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icon styling (if you add icons) */
._balanceFooterIcon_nv2qc_1937 {
  width: 14px;
  height: 14px;
}

._balanceFooterValue_nv2qc_1947 {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

/* Color variations based on item */
._balanceFooterItem_nv2qc_1817:first-child ._balanceFooterValue_nv2qc_1947 {
  color: #3b82f6;
}

._balanceFooterItem_nv2qc_1817:nth-child(2) ._balanceFooterValue_nv2qc_1947 {
  color: #10b981;
}

._balanceFooterItem_nv2qc_1817:last-child ._balanceFooterValue_nv2qc_1947 {
  color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
  ._balanceFooter_nv2qc_1793 {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  ._balanceFooterItem_nv2qc_1817 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
  }

  ._balanceFooterLabel_nv2qc_1913 {
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
  }

  ._balanceFooterValue_nv2qc_1947 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  ._balanceFooter_nv2qc_1793 {
    padding: 8px;
  }

  ._balanceFooterItem_nv2qc_1817 {
    padding: 10px 12px;
  }

  ._balanceFooterLabel_nv2qc_1913 {
    font-size: 11px;
  }

  ._balanceFooterValue_nv2qc_1947 {
    font-size: 18px;
  }
}

._empAvatar_nv2qc_667 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
}

._empAvatarImg_nv2qc_2099 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}/* ── Page ── */
._page_mscfv_3 {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f8fafc;
  min-height: 100%;
}

/* ── Page Header ── */
._pageHeader_mscfv_21 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

._backBtn_mscfv_39 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  width: fit-content;
}

._backBtn_mscfv_39:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

._backBtn_mscfv_39:active {
  transform: translateX(-1px);
}

._headerInfo_mscfv_93 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._headerIcon_mscfv_105 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f0fdf4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._headerTitle_mscfv_127 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._headerSub_mscfv_143 {
  font-size: 11px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* ── Search ── */
._searchBar_mscfv_159 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

._searchIcon_mscfv_177 {
  color: #94a3b8;
  flex-shrink: 0;
}

._searchInput_mscfv_187 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 11px;
  color: #374151;
  outline: none;
}

._searchInput_mscfv_187::placeholder {
  color: #b0bec8;
}

/* ── Table Wrap ── */
._tableWrap_mscfv_215 {
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

/* ── Table ── */
._table_mscfv_215 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

._thead_mscfv_241 {
  background: #f8fafc;
}

._th_mscfv_241 {
  padding: 10px 14px;
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

._tableRow_mscfv_273 {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s ease;
}

._tableRow_mscfv_273:hover {
  background: #f8fafc;
}

._tableRowOpen_mscfv_293 {
  background: #fafbff;
}

._td_mscfv_301 {
  padding: 10px 14px;
  vertical-align: middle;
  color: #374151;
}

/* ── Employee cell ── */
._empCell_mscfv_315 {
  display: flex;
  align-items: center;
  gap: 9px;
}

._empAvatar_mscfv_327 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

._avatarImg_mscfv_355 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

._empInfo_mscfv_369 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._empName_mscfv_381 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

._empCode_mscfv_395 {
  font-size: 10px;
  color: #94a3b8;
}

/* ── Leave type ── */
._leaveType_mscfv_407 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._halfDay_mscfv_419 {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  font-weight: 600;
}

/* ── Date ── */
._dateFrom_mscfv_443 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._dateTo_mscfv_455 {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* ── Days ── */
._daysVal_mscfv_469 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

._daysLabel_mscfv_481 {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Reason ── */
._reason_mscfv_493 {
  font-size: 12px;
  color: #4b5563;
}

._muted_mscfv_503 {
  color: #cbd5e1;
}

/* ── Badge ── */
._badge_mscfv_513 {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Expand cell ── */
._expandCell_mscfv_535 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._approverCount_mscfv_547 {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

._expandBtn_mscfv_559 {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

._expandBtn_mscfv_559:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #374151;
}

/* ── View button ── */
._viewBtn_mscfv_603 {
  padding: 4px 14px;
  background: transparent;
  color: #454444d0;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
/* ── Accordion row ── */
._accordionRow_mscfv_629 {
  background: #f8fafc;
}

._accordionTd_mscfv_637 {
  padding: 0 14px 12px 52px;
  border-bottom: 1px solid #e2e8f0;
}

._approverAccordion_mscfv_647 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}

._approverAccordionTitle_mscfv_663 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* ── Approver list ── */
._approverList_mscfv_689 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._approverItem_mscfv_701 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
}

._approverAvatarWrap_mscfv_721 {
  position: relative;
  flex-shrink: 0;
}

._approverAvatar_mscfv_721 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

._statusDot_mscfv_757 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

._approverInfo_mscfv_777 {
  flex: 1;
  min-width: 0;
}

._approverName_mscfv_787 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._approverMeta_mscfv_805 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

._approverRole_mscfv_819 {
  font-size: 10px;
  color: #94a3b8;
  text-transform: capitalize;
}

._currentApproverTag_mscfv_831 {
  padding: 1px 6px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Loading & Empty states ── */
._loadingState_mscfv_855,
._emptyState_mscfv_857 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_mscfv_879 {
  width: 24px;
  height: 24px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_mscfv_879 0.7s linear infinite;
}

@keyframes _spin_mscfv_879 {
  to {
    transform: rotate(360deg);
  }
}

/* ── Pagination ── */
._pagination_mscfv_911 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

._pageInfo_mscfv_929 {
  font-size: 12px;
  color: #64748b;
}

._pageControls_mscfv_939 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._pageBtn_mscfv_951 {
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

._pageBtn_mscfv_951:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._pageBtn_mscfv_951:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._pageCurrent_mscfv_995 {
  font-size: 12px;
  color: #374151;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
}._wrap_sioph_1 {
  padding: 10px 14px;
  background: #f4f7fb;
  min-height: 100vh;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._wrap_sioph_1 *,
._wrap_sioph_1 *::before,
._wrap_sioph_1 *::after {
  box-sizing: border-box;
}

._loadingState_sioph_37 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_sioph_59 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #ffca40;
  border-radius: 50%;
  animation: _spin_sioph_59 0.7s linear infinite;
}

@keyframes _spin_sioph_59 {
  to {
    transform: rotate(360deg);
  }
}

/* Breadcrumb */
._breadcrumb_sioph_91 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._backBtn_sioph_107 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
}

._backBtn1_sioph_135 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  padding: 5px 20px;
  font-size: 12px;
  font-weight: 500;
}
._backBtn_sioph_107:hover {
  background: #f8fafc;
}

._breadcrumb_sioph_91 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

/* Title row */
._pageTitleRow_sioph_183 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

._letterIcon_sioph_211 {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

._pageTitle_sioph_183 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 3px;
}

._actions_sioph_253 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._btn_sioph_265 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 0.13s;
}

._btnPrimary_sioph_295 {
  background: var(--gradient-primary);
  color: var(--color-white);
}

._btnPrimary_sioph_295:hover {
  background: var(--gradient-primary-hover);
  color: var(--color-white);
}
._detailVal_sioph_313 {
  border: none;
  outline: none;
  width: 100%;
  background: transparent;
  padding: 3px;
}
._tableActionIcon_sioph_327 {
  margin-top: 8px;
  color: red;
}
._btnDanger_sioph_335 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._btnDanger_sioph_335:hover {
  background: #fef2f2;
}

/* Grid */
._mainGrid_sioph_357 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  ._mainGrid_sioph_357 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  ._mainGrid_sioph_357 {
    grid-template-columns: 1fr;
  }
}

._card_sioph_393 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

._cardTitle_sioph_407 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Detail rows */
._detailRow_sioph_427 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

._detailLabel_sioph_443 {
  font-size: 11px;
  color: #6b7280;
  min-width: 100px;
  flex-shrink: 0;
}

._detailVal_sioph_313 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: left; /* ✅ FIX */
  word-break: break-word; /* ✅ prevent overflow */
  white-space: normal; /* ✅ allow wrapping */
}

/* Description HTML */
._descriptionHtml_sioph_477 {
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
}

._descriptionHtml_sioph_477 p {
  margin: 0 0 6px;
}

/* Features */
._featuresGrid_sioph_499 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  ._featuresGrid_sioph_499 {
    grid-template-columns: 1fr;
  }
}

._featTable_sioph_523 {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

._featTable_sioph_523 th {
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  text-align: left;
}

._featTable_sioph_523 td {
  padding: 6px 10px;
  border: 1px solid #f1f5f9;
  color: #374151;
}

._featTable_sioph_523 tr:nth-child(even) td {
  background: #fafafa;
}

._featureKey_sioph_573 {
  text-transform: capitalize;
}

._center_sioph_581 {
  text-align: center;
}
._wrap_9isq1_1 {
  padding: 10px 14px;
  background: #f4f7fb;
  min-height: 100vh;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._wrap_9isq1_1 *,
._wrap_9isq1_1 *::before,
._wrap_9isq1_1 *::after {
  box-sizing: border-box;
}

/* Header */
._header_9isq1_39 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

._headerLeft_9isq1_63 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._backBtn_9isq1_75 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

._backBtn_9isq1_75:hover {
  background: #f8fafc;
}

._breadcrumb_9isq1_113 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 3px;
}

._breadcrumb_9isq1_113 strong {
  color: #1e293b;
}

._title_9isq1_139 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._headerActions_9isq1_153 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

._btn_9isq1_167 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 0.13s;
}

._btnPrimary_9isq1_197 {
  background: var(--gradient-primary);
  color: var(--color-white);
}

._btnPrimary_9isq1_197:hover {
  background: var(--gradient-primary-hover);
  color: var(--color-white);
}

._btnSecondary_9isq1_217 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_9isq1_217:hover {
  background: #f8fafc;
}

._btnPrimary_9isq1_197:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form card */
._formCard_9isq1_249 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px 22px;
}

._sectionHeading_9isq1_263 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* 3-col responsive grid */
._formGrid_9isq1_283 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  ._formGrid_9isq1_283 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  ._formGrid_9isq1_283 {
    grid-template-columns: 1fr;
  }
}

._formGroup_9isq1_321 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_9isq1_333 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_9isq1_345 {
  color: #ef4444;
}

._input_9isq1_353 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.13s;
}

._input_9isq1_353:focus {
  border-color: #94a3b8;
}

._inputError_9isq1_385 {
  border-color: #f87171;
}

._errorText_9isq1_393 {
  font-size: 10px;
  color: #ef4444;
}

/* Toggle switch */
._toggleRow_9isq1_405 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._toggle_9isq1_405 {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

._toggle_9isq1_405 input {
  opacity: 0;
  width: 0;
  height: 0;
}

._toggleSlider_9isq1_445 {
  position: absolute;
  inset: 0;
  background: #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

._toggleSlider_9isq1_445::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

._toggle_9isq1_405 input:checked + ._toggleSlider_9isq1_445 {
  background: #ffca40;
}

._toggle_9isq1_405 input:checked + ._toggleSlider_9isq1_445::before {
  transform: translateX(16px);
}

._toggleLabel_9isq1_503 {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
}

/* Features grid */
._featuresGrid_9isq1_517 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}

@media (max-width: 900px) {
  ._featuresGrid_9isq1_517 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  ._featuresGrid_9isq1_517 {
    grid-template-columns: 1fr;
  }
}

._featureItem_9isq1_553 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._featureLabel_9isq1_565 {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
}
/* Checkbox */
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}

/*# sourceMappingURL=quill.snow.css.map*//* ── Page ── */
._page_izvfv_3 {
  display: flex;
  flex-direction: column;
  background: #f4f7fb;
  min-height: 100%;
  gap: 0;
}

/* ── Page Header ── */
._pageHeader_izvfv_21 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  background: #fff;
  /* border-bottom: 1px solid #e2e8f0; */
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

._headerLeft_izvfv_45 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._headerTitle_izvfv_57 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

._headerSub_izvfv_73 {
  font-size: 10px;
  color: #6b7280;
  margin: 0;
}

._headerRight_izvfv_85 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._totalBadge_izvfv_97 {
  padding: 4px 12px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

._exportBtn_izvfv_117 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

._exportBtn_izvfv_117:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ── Search ── */
._searchBar_izvfv_159 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

._searchIcon_izvfv_177 {
  color: #94a3b8;
  flex-shrink: 0;
}

._searchInput_izvfv_187 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #374151;
  outline: none;
}

._searchInput_izvfv_187::placeholder {
  color: #b0bec8;
}

._searchClear_izvfv_213 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._searchClear_izvfv_213:hover {
  background: #cbd5e1;
}

/* ── Table Wrap ── */
._tableWrap_izvfv_253 {
  overflow-x: auto;
  background: #fff;
  flex: 1;
}

/* ── Table ── */
._table_izvfv_253 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

._theadRow_izvfv_279 {
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

._th_izvfv_279 {
  padding: 9px 14px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

/* ── Body row ── */
._tableRow_izvfv_319 {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.1s ease;
  animation: _rowFadeIn_izvfv_1 0.25s ease both;
}

@keyframes _rowFadeIn_izvfv_1 {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._tableRow_izvfv_319:hover {
  background: #f8fafc;
}

._tableRowOpen_izvfv_363 {
  background: #fafbff;
}

._td_izvfv_371 {
  padding: 10px 14px;
  vertical-align: middle;
  color: #374151;
}

/* ── Employee cell ── */
._empCell_izvfv_385 {
  display: flex;
  align-items: center;
  gap: 9px;
}

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

._empInfo_izvfv_423 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._empName_izvfv_435 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

._empCode_izvfv_449 {
  font-size: 9px;
  color: #94a3b8;
}

/* ── Leave type pills ── */
._leaveTypePills_izvfv_461 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

._leaveTypePill_izvfv_461 {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._leaveTypePillMore_izvfv_489 {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
}

/* ── Numbers ── */
._numVal_izvfv_509 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._numLabel_izvfv_521 {
  font-size: 10px;
  color: #94a3b8;
}

/* ── Usage bar ── */
._usageBarWrap_izvfv_533 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._usageTrack_izvfv_545 {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  min-width: 60px;
}

._usageFill_izvfv_563 {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

._usagePct_izvfv_575 {
  font-size: 10px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

/* ── Action cell ── */
._actionCell_izvfv_591 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._iconBtn_izvfv_603 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.13s ease;
  flex-shrink: 0;
}

._iconBtn_izvfv_603:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #374151;
}

._iconBtnDanger_izvfv_645 {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff;
}

._iconBtnDanger_izvfv_645:hover {
  background: #fee2e2;
  border-color: #f87171;
}

._expandBtn_izvfv_667 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.13s ease;
  flex-shrink: 0;
}

._expandBtn_izvfv_667:hover {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

/* ── Accordion row ── */
._accordionRow_izvfv_711 {
  background: #f8fafc;
}

._accordionTd_izvfv_719 {
  padding: 0 14px 14px 58px;
  border-bottom: 1px solid #e2e8f0;
}

._accordionPanel_izvfv_729 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 6px;
}

._accordionPanelTitle_izvfv_745 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  /* text-transform: uppercase; */
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* ── Balance grid (cards inside accordion) ── */
._balanceGrid_izvfv_771 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

._balanceCard_izvfv_783 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s ease;
}

._balanceCard_izvfv_783:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

._balanceCardHeader_izvfv_813 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

._balanceTypeBadge_izvfv_827 {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

._balanceYear_izvfv_841 {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

._balanceNumbers_izvfv_853 {
  display: flex;
  align-items: center;
  gap: 0;
}

._balanceStat_izvfv_865 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._balanceStatVal_izvfv_881 {
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

._balanceStatLabel_izvfv_895 {
  font-size: 9px;
  color: #94a3b8;
  /* text-transform: uppercase; */
  letter-spacing: 0.04em;
  font-weight: 600;
}

._balanceDivider_izvfv_911 {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
  flex-shrink: 0;
}

._balanceTrack_izvfv_925 {
  height: 5px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

._balanceFill_izvfv_939 {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

._balancePctRow_izvfv_951 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._balancePctLabel_izvfv_963 {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 0.04em;
}

._balancePctVal_izvfv_979 {
  font-size: 10px;
  font-weight: 700;
}

/* ── Loading & Empty ── */
._loadingState_izvfv_991,
._emptyState_izvfv_993 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 12px;
}

._spinner_izvfv_1015 {
  width: 22px;
  height: 22px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_izvfv_1015 0.65s linear infinite;
}

@keyframes _spin_izvfv_1015 {
  to {
    transform: rotate(360deg);
  }
}

/* ── Pagination ── */
._pagination_izvfv_1047 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 8px;
}

._pageInfo_izvfv_1069 {
  font-size: 11px;
  color: #64748b;
}

._pageControls_izvfv_1079 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._pageBtn_izvfv_1091 {
  padding: 4px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.13s ease;
}

._pageBtn_izvfv_1091:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._pageBtn_izvfv_1091:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._pageCurrent_izvfv_1135 {
  font-size: 11px;
  color: #374151;
  font-weight: 700;
  min-width: 42px;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._balanceGrid_izvfv_771 {
    grid-template-columns: 1fr 1fr;
  }

  ._accordionTd_izvfv_719 {
    padding: 0 8px 10px 8px;
  }

  ._pageHeader_izvfv_21 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  ._balanceGrid_izvfv_771 {
    grid-template-columns: 1fr;
  }
}

/* Stats card overview */
._statsAccordion_izvfv_1197 {
  border-radius: 12px;
  overflow: hidden;
}
._accordionHeader_izvfv_1205 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
}

._accordionHeader_izvfv_1205:hover {
  background-color: #f9fafb;
  border-color: #fcfbf9;
}

._accordionTitle_izvfv_1237 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  font-weight: 600;
}

._accordionTitlesvg_izvfv_1255 {
  color: #f59e0b;
}

._accordionToggle_izvfv_1263 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}
._accordionToggle_izvfv_1263:hover {
  color: #374151;
}

._statsGrid_izvfv_1293 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
}

._summaryCard_izvfv_1307 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  min-height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: 0.2s ease;
}
._summaryTop_izvfv_1329 {
  display: flex;
  align-items: center;
  gap: 10px;
}
._summaryIcon_izvfv_1339 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryTitle_izvfv_1359 {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-top: 2px;
  white-space: nowrap;
}
/* RIGHT SIDE VALUE */
._summaryRight_izvfv_1375 {
  display: flex;
  align-items: center;
}
._summaryValue_izvfv_1383 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

._syncBtn_izvfv_1395 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

._syncBtn_izvfv_1395:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
}

._syncBtn_izvfv_1395:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._syncBtn_izvfv_1395._syncing_izvfv_1443 {
  background: var(--color-primary-lightest);
}

._spinning_izvfv_1451 {
  animation: _spin_izvfv_1015 1s linear infinite;
}

@keyframes _spin_izvfv_1015 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── Department Chart Accordion ── */
._chartAccordion_izvfv_1479 {
  /* background: white; */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #f1f5f9;
}

._chartContainer_izvfv_1497 {
  padding: 20px;
}

/* ── Department Chart Card ── */
._departmentChartCard_izvfv_1507 {
  background: #fafbfc;
  border-radius: 8px;
  padding: 20px;
}

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

._chartTitle_izvfv_1537 {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

._chartStats_izvfv_1551 {
  display: flex;
  gap: 16px;
}

._chartStat_izvfv_1551 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._statDot_izvfv_1577 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

._chartWrapper_izvfv_1591 {
  height: 280px;
  position: relative;
}

._chartFooter_izvfv_1601 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

._legendGrid_izvfv_1613 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 16px;
}

._legendItem_izvfv_1625 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #374151;
}

._legendColor_izvfv_1641 {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

._legendName_izvfv_1655 {
  font-weight: 500;
  flex: 1;
}

._legendValue_izvfv_1665 {
  color: #6b7280;
  font-size: 11px;
}

._noDataMessage_izvfv_1675 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #9ca3af;
}

._noDataMessage_izvfv_1675 p {
  margin-top: 12px;
  font-size: 14px;
}

/* ── Sync Button Styles ── */
._syncBtn_izvfv_1395 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

._syncBtn_izvfv_1395:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
}

._syncBtn_izvfv_1395:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

._syncBtn_izvfv_1395._syncing_izvfv_1443 {
  background: var(--color-primary-lightest);
}

._spinning_izvfv_1451 {
  animation: _spin_izvfv_1015 1s linear infinite;
}

@keyframes _spin_izvfv_1015 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._chartHeader_izvfv_1519 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._chartStats_izvfv_1551 {
    flex-wrap: wrap;
  }

  ._chartWrapper_izvfv_1591 {
    height: 200px;
  }

  ._legendGrid_izvfv_1613 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  ._legendGrid_izvfv_1613 {
    grid-template-columns: 1fr;
  }
}

._deptCardGrid_izvfv_1839 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

._deptEmpty_izvfv_1853 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px;
  /* color: #94a3b8; */
  font-size: 13px;
}

._deptCard_izvfv_1839 {
  /* background: #fff; */
  /* border: 0.5px solid #e5e7eb; */
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

._deptCard_izvfv_1839:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

._deptCardAccent_izvfv_1901 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}

._deptCardTop_izvfv_1919 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 14px;
}

._deptCardIcon_izvfv_1935 {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

._deptCardName_izvfv_1959 {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
}

._deptCardEmp_izvfv_1973 {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

._deptMiniStats_izvfv_1985 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
}

._deptMiniStat_izvfv_1985 {
  text-align: center;
}

._deptMiniVal_izvfv_2007 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

._deptMiniLbl_izvfv_2019 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* usage bar */
._deptMiniTrack_izvfv_2033 {
  height: 5px;
  border-radius: 99px;
  background: #f1f5f9;
  overflow: hidden;
  margin-bottom: 5px;
}

._deptMiniFill_izvfv_2049 {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
  -webkit-transition: width 0.4s ease;
  -moz-transition: width 0.4s ease;
  -ms-transition: width 0.4s ease;
  -o-transition: width 0.4s ease;
}

._deptMiniPctRow_izvfv_2069 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._deptMiniPctLbl_izvfv_2081 {
  font-size: 11px;
  color: #94a3b8;
}

._deptMiniPctVal_izvfv_2091 {
  font-size: 11px;
  font-weight: 600;
}

/* responsive */
@media (max-width: 640px) {
  ._deptCardGrid_izvfv_1839 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
._deptCard_izvfv_1839 {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.08);
}

._deptCard_izvfv_1839:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.15);
}
/* ── BASE ── */
._wrap_15lsm_3 {
  background: var(--color-primary-warm);
  min-height: 100vh;
  padding: 20px 28px;
  font-size: 12px;
}

/* ── KEYFRAMES ── */
@keyframes _shimmer_15lsm_1 {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes _fadeUp_15lsm_1 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._fadeIn_15lsm_63 {
  animation: _fadeUp_15lsm_1 0.3s ease both;
}

/* ── BREADCRUMB ── */
._breadcrumb_15lsm_73 {
  font-size: 10.5px;
  color: #9ca3af;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

._breadcrumbLink_15lsm_91 {
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s;
}

._breadcrumbLink_15lsm_91:hover {
  color: #111827;
}

._breadcrumbCurrent_15lsm_111 {
  color: #374151;
  font-weight: 500;
}

._backBtn_15lsm_121 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  width: fit-content;
}

/* ── PAGE HEADER ── */
._pageHeader_15lsm_155 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

._pageTitle_15lsm_173 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.3px;
}

._headerActions_15lsm_189 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── STATUS PILL ── */
._statusPill_15lsm_205 {
  background: #fef3c7;
  color: #d97706;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid #fde68a;
}

/* ── STATUS BADGE (workflow) ── */
._badge_15lsm_229 {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0.1px;
}

._badgePending_15lsm_247 {
   background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
}

._badgeApproved_15lsm_259 {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

._badgeRejected_15lsm_271 {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._badgeCompleted_15lsm_283 {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

/* ── BUTTONS ── */
._btnApprove_15lsm_297 {
  background: transparent;
  color: #16a34a;
  border: 1.5px solid #16a34a;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 3px;
}

._btnApprove_15lsm_297:hover {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

._btnReject_15lsm_341 {
  background: #fff;
  color: #dc2626;
  border: 1.5px solid #dc2626;
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

._btnReject_15lsm_341:hover {
  background: #fef2f2;
}

._btnRetry_15lsm_379 {
  margin-top: 12px;
  padding: 7px 18px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
}

/* ── CARD ── */
._card_15lsm_405 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0f0ee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

/* ── LOADING / SKELETON ── */
._loadingGrid_15lsm_423 {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
}

._skeletonRow_15lsm_435 {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  align-items: center;
}

._skeletonInner_15lsm_449 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._skeleton_15lsm_435 {
  border-radius: 5px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: _shimmer_15lsm_1 1.4s infinite;
}

/* ── ERROR STATE ── */
._errorCard_15lsm_479 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0f0ee;
  color: #dc2626;
  text-align: center;
  padding: 36px;
}

._errorIcon_15lsm_497 {
  font-size: 26px;
  margin-bottom: 8px;
}

._errorText_15lsm_507 {
  font-weight: 600;
  font-size: 12px;
}

/* ── MAIN CONTENT GRID ── */
._mainGrid_15lsm_519 {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}

/* ── EMPLOYEE HEADER ── */
._empHeader_15lsm_535 {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

._empName_15lsm_553 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}

._empMeta_15lsm_567 {
  font-size: 10.5px;
  color: #6b7280;
  line-height: 1.6;
}

/* ── 2-COL INFO GRID ── */
._infoGrid_15lsm_581 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._infoCol_15lsm_593 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── FIELD LABEL ── */
._fieldLabel_15lsm_607 {
  font-size: 9px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

/* ── LEAVE TYPE BADGE ── */
._leaveTypeBadge_15lsm_627 {
  display: inline-block;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
}

/* ── DAYS REQUESTED ── */
._daysValue_15lsm_653 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-top: 2px;
  line-height: 1.2;
}

._halfDayNote_15lsm_669 {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  margin-left: 5px;
}

/* ── DATE VALUE ── */
._dateValue_15lsm_685 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  margin-top: 2px;
}

/* ── STATUS FIELD ── */
._statusField_15lsm_701 {
  margin-top: 4px;
}

/* ── REASON BLOCK ── */
._reasonBlock_15lsm_711 {
  margin-top: 4px;
 background: var(--color-primary-lightest);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  font-size: 11px;
  color: #374151;
  font-style: italic;
  line-height: 1.5;
}

/* ── CALENDAR COLUMN ── */
._calDateRange_15lsm_737 {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--gradient-primary);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  margin-top: 4px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-primary-sm);
}

._calMonthLabel_15lsm_763 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._calendarCard_15lsm_781 {
  background: #fafafa;
  border: 1px solid #f0f0ee;
  border-radius: 12px;
  padding: 14px 12px 10px;
  margin-top: 2px;
}

._calGrid_15lsm_797 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 3px;
  text-align: center;
  user-select: none;
}

._calDayHeader_15lsm_813 {
  color: #b0b7c3;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 8px;
}

._calCell_15lsm_831 {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  color: #374151;
  font-weight: 400;
  transition: background 0.1s;
  cursor: default;
}

._calCell_15lsm_831:hover:not(._calCellActive_15lsm_861):not(._calCellEmpty_15lsm_861) {
  background: #f3f4f6;
}

._calCellActive_15lsm_861 {
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 700;
   box-shadow: var(--shadow-primary-sm);
}

._calCellEmpty_15lsm_861 {
  color: transparent;
  pointer-events: none;
}

/* two-month wrapper */
._calTwoMonth_15lsm_895 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._calTwoMonth_15lsm_895 > div {
  flex: 1;
  min-width: 180px;
}

/* ── WORKFLOW ── */
._workflowTitle_15lsm_919 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 18px;
}

._workflowWrap_15lsm_933 {
  position: relative;
}

._stepRow_15lsm_941 {
  display: flex;
  gap: 12px;
}

._stepLeft_15lsm_951 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* ── STEP CIRCLES ── */
._stepCircleCompleted_15lsm_967 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

._stepCircleRejected_15lsm_991 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._stepCirclePendingActive_15lsm_1013 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffca40;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

._stepCirclePendingUpcoming_15lsm_1031 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  flex-shrink: 0;
}

/* ── STEP LINES ── */
._stepLineCompleted_15lsm_1051 {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: linear-gradient(to bottom, #059669, #6ee7b7);
  margin: 3px 0;
  border-radius: 1px;
}

._stepLinePending_15lsm_1069 {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: #e5e7eb;
  margin: 3px 0;
  border-radius: 1px;
}

/* ── STEP CONTENT ── */
._stepContent_15lsm_1089 {
  padding-bottom: 18px;
  flex: 1;
  min-width: 0;
}

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

._stepTitle_15lsm_1119 {
  font-weight: 700;
  font-size: 11.5px;
  color: #111827;
}

._stepSubLabel_15lsm_1131 {
  font-size: 9.5px;
  color: #9ca3af;
  margin-bottom: 6px;
  font-weight: 500;
}

/* ── APPROVER ── */
._approverRow_15lsm_1147 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 5px;
}

._approverName_15lsm_1161 {
  font-weight: 600;
  font-size: 11px;
  color: #111827;
}

._approverRole_15lsm_1173 {
  font-size: 10px;
  color: #6b7280;
}

._stepDetail_15lsm_1183 {
  font-size: 10.5px;
  color: #6b7280;
  line-height: 1.4;
}

/* ── EMPTY STATE ── */
._emptyState_15lsm_1197 {
  text-align: center;
  color: #9ca3af;
  font-size: 11px;
  padding: 14px 0;
}

/* ── AVATAR FALLBACK ── */
._avatarFallback_15lsm_1213 {
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #6b7280;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  ._mainGrid_15lsm_519,
  ._loadingGrid_15lsm_423 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  ._wrap_15lsm_3 {
    padding: 14px;
  }

  ._infoGrid_15lsm_581 {
    grid-template-columns: 1fr;
  }

  ._pageHeader_15lsm_155 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._calTwoMonth_15lsm_895 {
    flex-direction: column;
  }
}

/* ─── Add these to your LeaveListView.module.css ─── */

._calMonthHeader_15lsm_1295 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._calMonthLabel_15lsm_763 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._calNavBtn_15lsm_1321 {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
}

._calNavBtn_15lsm_1321:hover:not(:disabled) {
  background: #f1f5f9;
  color: #1e293b;
}

._calNavBtn_15lsm_1321:disabled {
  opacity: 0.3;
  cursor: default;
}
/* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} */

* {
  box-sizing: border-box;
}

/* ── ROOT ── */
._wrap_yc8la_23 {
  padding: 20px 24px 40px;
  background: var(--color-primary-warm);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── LOADING ── */
._loadingWrap_yc8la_39 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 14px;
  color: #9ca3af;
  font-size: 13px;
}

._spinner_yc8la_61 {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_yc8la_61 0.7s linear infinite;
}

@keyframes _spin_yc8la_61 {
  to {
    transform: rotate(360deg);
  }
}

/* ── HEADER ── */
._header_yc8la_93 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}

._headerLeft_yc8la_109 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._backBtn_yc8la_121 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--color-primary-lightest);
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

._backBtn_yc8la_121:hover {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary-lighter);
  color: var(--color-primary);
}

._headerTitle_yc8la_163 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

._headerSub_yc8la_177 {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
  font-weight: 400;
}

._statusBadge_yc8la_191 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

._statusDot_yc8la_219 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── HERO CARD ── */
._heroCard_yc8la_235 {
  background: var(--color-primary-lighter);
  border: 1.5px solid var(--color-primary-lightest);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-primary-sm);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

._heroGlow_yc8la_267 {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.16) 0%,
    transparent 70%
  );
  pointer-events: none;
}

._heroLeft_yc8la_295 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* Avatar */
._avatarRing_yc8la_313 {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(99, 102, 241, 0.25);
}

._avatarImg_yc8la_335 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

._defaultStatusChip_yc8la_351 {
  position: absolute;
  bottom: -2px;
  right: -6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid #fff;
  white-space: nowrap;
}

._heroInfo_yc8la_381 {
  position: relative;
  z-index: 1;
}

._empName_yc8la_391 {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}

._empMeta_yc8la_407 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

._codeTag_yc8la_421 {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-lighter);
  letter-spacing: 0.04em;
}

._modePill_yc8la_443 {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* Hero Stats */
._heroStats_yc8la_465 {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 12px;
  padding: 12px 0;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-primary-sm);
}

._heroStat_yc8la_465 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  gap: 3px;
}

._hsVal_yc8la_511 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

._hsLabel_yc8la_523 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

._hsDivider_yc8la_541 {
  width: 1px;
  height: 32px;
  background: var(--color-primary-lightest);
}

/* ── SECTION CARD ── */
._sectionCard_yc8la_555 {
  background: #fff;
  border: 1.5px solid var(--color-primary-lightest);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

._sectionCard_yc8la_555:last-child {
  margin-bottom: 0;
}

._secHeader_yc8la_579 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

._secIconWrap_yc8la_593 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._secTitle_yc8la_615 {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._secBadge_yc8la_631 {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #db2777;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  padding: 2px 9px;
  border-radius: 999px;
}

/* ── TIMELINE ── */
._timelineRow_yc8la_655 {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

._timeBlock_yc8la_673 {
  flex: 1;
  min-width: 110px;
  background: #f9fafb;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 10px;
  padding: 12px 14px;
}

._timeBlockLabel_yc8la_691 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

._timeBlockVal_yc8la_709 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

._timeBlockSub_yc8la_723 {
  font-size: 10px;
  color: #9ca3af;
}

._timelineConnector_yc8la_733 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 0 4px;
}

._tcLine_yc8la_749 {
  width: 18px;
  height: 1.5px;
  background: #e5e7eb;
}

._tcArrow_yc8la_761 {
  font-size: 12px;
  color: #9ca3af;
}

/* ── MEDIA ROW ── */
._mediaRow_yc8la_773 {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

._mediaItem_yc8la_787 {
  flex: 1;
  min-width: 100px;
}

._mediaLabel_yc8la_797 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

._checkInImg_yc8la_815 {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  display: block;
}

._checkInImg_yc8la_815:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

._mapFrame_yc8la_851 {
  width: 100%;
  height: 110px;
  border: none;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  display: block;
}

/* ── TWO COLUMN ── */
._twoCol_yc8la_871 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

._twoCol_yc8la_871 ._sectionCard_yc8la_555 {
  margin-bottom: 0;
}

/* ── INFO TABLE ── */
._infoTable_yc8la_895 {
  width: 100%;
  border-collapse: collapse;
}

._infoTr_yc8la_905 {
  border-bottom: 1px solid #f3f4f6;
}

._infoTr_yc8la_905:last-child {
  border-bottom: none;
}

._infoTdLabel_yc8la_921 {
  font-size: 11.5px;
  color: #6b7280;
  padding: 7px 0;
  vertical-align: middle;
  width: 48%;
  font-weight: 500;
}

._infoTdVal_yc8la_939 {
  font-size: 11.5px;
  font-weight: 700;
  color: #111827;
  padding: 7px 0;
  text-align: right;
  vertical-align: middle;
}

/* ── WORKING TIME GRID ── */
._wtGrid_yc8la_959 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

._wtCard_yc8la_971 {
  background: #f9fafb;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._wtCardIcon_yc8la_991 {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 2px;
}

._wtCardLabel_yc8la_1013 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._wtCardVal_yc8la_1029 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── BREAK LOG ── */
._breakTable_yc8la_1043 {
  border: 1.5px solid #f0ebe0;
  border-radius: 10px;
  overflow: hidden;
}

._breakHead_yc8la_1055 {
  display: grid;
  grid-template-columns: 30px 1fr 80px 80px 80px;
  padding: 8px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #f0ebe0;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 8px;
}

._breakRow_yc8la_1083 {
  display: grid;
  grid-template-columns: 30px 1fr 80px 80px 80px;
  padding: 9px 14px;
  font-size: 12px;
  gap: 8px;
  border-bottom: 1px solid #f9fafb;
  align-items: center;
  transition: background 0.1s;
}

._breakRow_yc8la_1083:hover {
  background: #fffbf0;
}

._breakRow_yc8la_1083:last-child {
  border-bottom: none;
}

._breakNum_yc8la_1121 {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

._breakName_yc8la_1133 {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

._breakTime_yc8la_1145 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

._breakDur_yc8la_1157 {
  font-size: 12px;
  font-weight: 700;
  color: #db2777;
}

._activePill_yc8la_1169 {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._breakTotal_yc8la_1195 {
  display: grid;
  grid-template-columns: 30px 1fr 80px 80px 80px;
  padding: 9px 14px;
  background: #f9fafb;
  border-top: 1.5px solid #f0ebe0;
  gap: 8px;
  align-items: center;
}

._breakTotalVal_yc8la_1215 {
  font-size: 13px;
  font-weight: 800;
  color: #db2777;
}

/* ── SHARED ── */
._muted_yc8la_1229 {
  color: #9ca3af;
  font-weight: 400;
}

/* ── IMAGE MODAL ── */
._modalBackdrop_yc8la_1241 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  backdrop-filter: blur(4px);
  cursor: pointer;
}

._modalImg_yc8la_1265 {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  object-fit: contain;
}

._modalClose_yc8la_1281 {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}

._modalClose_yc8la_1281:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  ._twoCol_yc8la_871 {
    grid-template-columns: 1fr;
  }

  ._heroStats_yc8la_465 {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  ._wrap_yc8la_23 {
    padding: 14px 14px 32px;
  }

  ._heroCard_yc8la_235 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._heroStats_yc8la_465 {
    width: 100%;
  }

  ._heroStat_yc8la_465 {
    padding: 0 14px;
  }

  ._timelineRow_yc8la_655 {
    flex-direction: column;
  }

  ._timelineConnector_yc8la_733 {
    display: none;
  }

  ._breakHead_yc8la_1055,
  ._breakRow_yc8la_1083,
  ._breakTotal_yc8la_1195 {
    grid-template-columns: 28px 1fr 60px 60px 60px;
    font-size: 10px;
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  ._wtGrid_yc8la_959 {
    grid-template-columns: 1fr;
  }

  ._heroStats_yc8la_465 {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  ._hsDivider_yc8la_541 {
    display: none;
  }
}
/* EmployeeDashboard.module.css */

/* ─── CSS Variables ─────────────────────────── */
._root_x1rzb_7 {
  --primary: #f4b43d;
  --primary-light: #f2cf5dd6;
  --primary-dark: #f1ad1a;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Light mode */
  --bg-page: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-header: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-input: #f8fafc;
  --bg-tag: #f1f5f9;
  --bg-badge: #eef2ff;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-accent: #6366f1;

  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);

  --avatar-bg: #6366f1;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

/* ─── Dark Mode ─────────────────────────────── */
._root_x1rzb_7._dark_x1rzb_81 {
  --bg-page: #0f1117;
  --bg-card: #1a1d27;
  --bg-card-hover: #1e2130;
  --bg-header: #14161f;
  --bg-input: #1e2130;
  --bg-tag: #252836;
  --bg-badge: #1e2130;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-accent: #818cf8;

  --border: #252836;
  --border-light: #1e2130;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ─── Layout ─────────────────────────────────── */
._root_x1rzb_7 {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
}

._topbar_x1rzb_139 {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

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

._topbarTitle_x1rzb_177 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

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

._themeToggle_x1rzb_203 {
  background: var(--bg-tag);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s;
}

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

._btnEdit_x1rzb_245 {
  background: var(--bg-tag);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 7px 16px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

._btnEdit_x1rzb_245:hover {
  background: var(--bg-card-hover);
}

._btnExport_x1rzb_277 {
  background: var(--primary);
  border: none;
  border-radius: var(--radius-xs);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

._btnExport_x1rzb_277:hover {
  background: var(--primary-dark);
}

._container_x1rzb_315 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 40px;
}

/* ─── Profile Header ─────────────────────────── */
._profileCard_x1rzb_329 {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 22px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

._avatarCircle_x1rzb_355 {
  width: 85px;
  height: 85px;
  min-width: 80px;
  min-height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary-lightest);
  object-fit: cover;
  object-position: center;
  display: block;
}

._profileInfo_x1rzb_381 {
  flex: 1;
}

._profileName_x1rzb_389 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 3px;
  letter-spacing: -0.4px;
}

._profileMeta_x1rzb_405 {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

._profileMeta_x1rzb_405 span {
  margin: 0 10px 0 0;
}

._profileMeta_x1rzb_405 span::before {
  content: '· ';
  color: var(--text-muted);
  margin-right: 4px;
}

._profileMeta_x1rzb_405 span:first-child::before {
  display: none;
}

._tags_x1rzb_445 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

._tag_x1rzb_445 {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--bg-tag);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._tagActive_x1rzb_483 {
  background: #dcfce7;
  color: #16a34a;
  border-color: #bbf7d0;
}

._tagFulltime_x1rzb_495 {
  background: #ede9fe;
  color: #7c3aed;
  border-color: #ddd6fe;
}

._tagEngineering_x1rzb_507 {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

._tagHybrid_x1rzb_519 {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

._root_x1rzb_7._dark_x1rzb_81 ._tagActive_x1rzb_483 {
  background: #14532d44;
  color: #4ade80;
  border-color: #16a34a44;
}

._root_x1rzb_7._dark_x1rzb_81 ._tagFulltime_x1rzb_495 {
  background: #3b0764aa;
  color: #a78bfa;
  border-color: #7c3aed44;
}

._root_x1rzb_7._dark_x1rzb_81 ._tagEngineering_x1rzb_507 {
  background: #1e3a5faa;
  color: #60a5fa;
  border-color: #1d4ed844;
}

._root_x1rzb_7._dark_x1rzb_81 ._tagHybrid_x1rzb_519 {
  background: #78350f44;
  color: #fbbf24;
  border-color: #b4530944;
}

/* ─── Stats Row ──────────────────────────────── */
._statsRow_x1rzb_581 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

._statCard_x1rzb_595 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}

._statCard_x1rzb_595:hover {
  box-shadow: var(--shadow-md);
}

._statLabel_x1rzb_621 {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

._statValue_x1rzb_639 {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.8px;
  line-height: 1.1;
  margin-bottom: 4px;
}

._statSub_x1rzb_657 {
  font-size: 10px;
  color: var(--text-muted);
}

._statBadge_x1rzb_667 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  margin-top: 4px;
}

._statBadgeUp_x1rzb_689 {
  background: #dcfce7;
  color: #16a34a;
}

._statBadgeDown_x1rzb_699 {
  background: #fee2e2;
  color: #dc2626;
}

._root_x1rzb_7._dark_x1rzb_81 ._statBadgeUp_x1rzb_689 {
  background: #14532d44;
  color: #4ade80;
}

._root_x1rzb_7._dark_x1rzb_81 ._statBadgeDown_x1rzb_699 {
  background: #7f1d1d44;
  color: #f87171;
}

._statIcon_x1rzb_729 {
  float: right;
  font-size: 19px;
  opacity: 0.15;
  margin-top: -4px;
}

/* ─── Main Grid ──────────────────────────────── */
._mainGrid_x1rzb_745 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

._col2_x1rzb_759 {
  grid-column: span 2;
}

._card_x1rzb_767 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

._cardHeader_x1rzb_783 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

._cardTitle_x1rzb_797 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

._cardLink_x1rzb_811 {
  font-size: 10px;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
}

._liveDot_x1rzb_831 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--success);
}

._liveDot_x1rzb_831::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: _pulse_x1rzb_1 1.5s infinite;
}

@keyframes _pulse_x1rzb_1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Donut Chart ────────────────────────────── */
._donutWrapper_x1rzb_879 {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}

._donutSvg_x1rzb_893 {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

._donutCenter_x1rzb_905 {
  text-align: center;
}

._donutPercent_x1rzb_913 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.8px;
}

._donutSubtitle_x1rzb_927 {
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
}

._legendList_x1rzb_939 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_x1rzb_957 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-secondary);
}

._legendDot_x1rzb_973 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendValue_x1rzb_987 {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Check-in Details ───────────────────────── */
._checkinGrid_x1rzb_1001 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

._checkinBlock_x1rzb_1015 {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

._checkinBlockLabel_x1rzb_1027 {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

._checkinTime_x1rzb_1045 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.6px;
}

._checkinSub_x1rzb_1059 {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}

._checkinRow_x1rzb_1071 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}

._checkinRow_x1rzb_1071:last-child {
  border-bottom: none;
}

._checkinRowVal_x1rzb_1097 {
  font-weight: 600;
  color: var(--text-primary);
}

._statusBadge_x1rzb_1107 {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._statusPresent_x1rzb_1125 {
  background: #dcfce7;
  color: #16a34a;
}

._statusHalfDay_x1rzb_1135 {
  background: #fef3c7;
  color: #b45309;
}

._statusAbsent_x1rzb_1145 {
  background: #fee2e2;
  color: #dc2626;
}

._statusPending_x1rzb_1155 {
  background: #fef3c7;
  color: #b45309;
}

._statusApproved_x1rzb_1165 {
  background: #dcfce7;
  color: #16a34a;
}

._statusRejected_x1rzb_1175 {
  background: #fee2e2;
  color: #dc2626;
}

._statusInProgress_x1rzb_1185 {
  background: #dbeafe;
  color: #1d4ed8;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusPresent_x1rzb_1125 {
  background: #14532d44;
  color: #4ade80;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusHalfDay_x1rzb_1135 {
  background: #78350f44;
  color: #fbbf24;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusAbsent_x1rzb_1145 {
  background: #7f1d1d44;
  color: #f87171;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusPending_x1rzb_1155 {
  background: #78350f44;
  color: #fbbf24;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusApproved_x1rzb_1165 {
  background: #14532d44;
  color: #4ade80;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusRejected_x1rzb_1175 {
  background: #7f1d1d44;
  color: #f87171;
}

._root_x1rzb_7._dark_x1rzb_81 ._statusInProgress_x1rzb_1185 {
  background: #1e3a5f44;
  color: #60a5fa;
}

/* ─── Leave Balance ──────────────────────────── */
._leaveBalanceList_x1rzb_1267 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._leaveBalanceItem_x1rzb_1279 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._leaveBalanceHeader_x1rzb_1291 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
}

._leaveBalanceHeader_x1rzb_1291 span:last-child {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

._leaveBarTrack_x1rzb_1317 {
  height: 6px;
  background: var(--bg-tag);
  border-radius: 50px;
  overflow: hidden;
}

._leaveBarFill_x1rzb_1331 {
  height: 100%;
  border-radius: 50px;
  transition: width 0.6s ease;
}

/* ─── Recent Leave ───────────────────────────── */
._leaveRequestItem_x1rzb_1345 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

._leaveRequestItem_x1rzb_1345:last-child {
  border-bottom: none;
}

._leaveRequestDot_x1rzb_1369 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._leaveRequestInfo_x1rzb_1383 {
  flex: 1;
}

._leaveRequestName_x1rzb_1391 {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

._leaveRequestDates_x1rzb_1403 {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ─── Monthly Chart ──────────────────────────── */
._chartWrapper_x1rzb_1417 {
  width: 100%;
  overflow-x: auto;
}

._chartLegend_x1rzb_1427 {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

._chartLegendItem_x1rzb_1441 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
}

._chartLegendDot_x1rzb_1459 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ─── Payroll ────────────────────────────────── */
._payrollAmounts_x1rzb_1473 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

._payrollAmountBox_x1rzb_1487 {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 14px;
}

._payrollAmountLabel_x1rzb_1499 {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

._payrollAmountValue_x1rzb_1517 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.6px;
}

._payrollAmountSub_x1rzb_1531 {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

._earningsBreakdown_x1rzb_1543 {
  margin-top: 12px;
}

._earningsTitle_x1rzb_1551 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

._earningsRow_x1rzb_1569 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._earningsRowLabel_x1rzb_1583 {
  font-size: 12px;
  color: var(--text-secondary);
  width: 100px;
  flex-shrink: 0;
}

._earningsBarTrack_x1rzb_1597 {
  flex: 1;
  height: 5px;
  background: var(--bg-tag);
  border-radius: 50px;
  overflow: hidden;
}

._earningsBarFill_x1rzb_1613 {
  height: 100%;
  border-radius: 50px;
}

._earningsRowValue_x1rzb_1623 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  width: 70px;
  text-align: right;
}

/* ─── Bottom Grid ────────────────────────────── */
._bottomGrid_x1rzb_1641 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* ─── Projects ───────────────────────────────── */
._projectItem_x1rzb_1657 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

._projectItem_x1rzb_1657:last-child {
  border-bottom: none;
}

._projectIcon_x1rzb_1681 {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: var(--bg-tag);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

._projectInfo_x1rzb_1705 {
  flex: 1;
}

._projectName_x1rzb_1713 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

._projectMeta_x1rzb_1727 {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Assets ─────────────────────────────────── */
._assetItem_x1rzb_1739 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

._assetItem_x1rzb_1739:last-child {
  border-bottom: none;
}

._assetIcon_x1rzb_1763 {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: var(--bg-tag);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

._assetInfo_x1rzb_1787 {
  flex: 1;
}

._assetName_x1rzb_1795 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

._assetMeta_x1rzb_1807 {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ─── Expense Claims ─────────────────────────── */
._expenseSummary_x1rzb_1821 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

._expenseSummaryBox_x1rzb_1835 {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}

._expenseSummaryValue_x1rzb_1849 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

._expenseSummaryLabel_x1rzb_1863 {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

._expenseItem_x1rzb_1881 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}

._expenseItem_x1rzb_1881:last-child {
  border-bottom: none;
}

._expenseIcon_x1rzb_1905 {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--bg-tag);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._expenseInfo_x1rzb_1929 {
  flex: 1;
}

._expenseName_x1rzb_1937 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

._expenseMeta_x1rzb_1949 {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

._expenseAmount_x1rzb_1961 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

._expenseTotal_x1rzb_1973 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

._expenseTotalValue_x1rzb_1997 {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

/* ─── Professional Details ───────────────────── */
._profCard_x1rzb_2011 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
}

._profGrid_x1rzb_2029 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

._profItem_x1rzb_2041 {}

._profItemLabel_x1rzb_2045 {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

._profItemValue_x1rzb_2063 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

._skillTags_x1rzb_2075 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

._skillTag_x1rzb_2075 {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-badge);
  color: var(--primary);
  border: 1px solid var(--border);
}

/* ─── Empty State ────────────────────────────── */
._emptyState_x1rzb_2111 {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── Loading ────────────────────────────────── */
._loadingScreen_x1rzb_2127 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  gap: 16px;
}

._loadingSpinner_x1rzb_2147 {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: _spin_x1rzb_1 0.8s linear infinite;
}

@keyframes _spin_x1rzb_1 {
  to { transform: rotate(360deg); }
}

._loadingText_x1rzb_2173 {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── Error ──────────────────────────────────── */
._errorScreen_x1rzb_2187 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  gap: 12px;
  text-align: center;
  padding: 24px;
}

._errorIcon_x1rzb_2211 {
  font-size: 40px;
}

._errorTitle_x1rzb_2219 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

._errorMsg_x1rzb_2231 {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
}

._btnRetry_x1rzb_2243 {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

._btnRetry_x1rzb_2243:hover {
  background: var(--primary-dark);
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1200px) {
  ._statsRow_x1rzb_581 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._mainGrid_x1rzb_745 {
    grid-template-columns: 1fr 1fr;
  }

  ._col2_x1rzb_759 {
    grid-column: span 2;
  }

  ._bottomGrid_x1rzb_1641 {
    grid-template-columns: 1fr 1fr;
  }

  ._profGrid_x1rzb_2029 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  ._container_x1rzb_315 {
    padding: 16px;
  }

  ._statsRow_x1rzb_581 {
    grid-template-columns: 1fr 1fr;
  }

  ._mainGrid_x1rzb_745,
  ._bottomGrid_x1rzb_1641 {
    grid-template-columns: 1fr;
  }

  ._col2_x1rzb_759 {
    grid-column: span 1;
  }

  ._profGrid_x1rzb_2029 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._payrollAmounts_x1rzb_1473 {
    grid-template-columns: 1fr;
  }
}
._page_1dt5u_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1dt5u_1 *,
._page_1dt5u_1 *::before,
._page_1dt5u_1 *::after {
  box-sizing: border-box;
}

._pageTitle_1dt5u_37 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._layoutMain_1dt5u_51 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* ── Mini stat cards grid — 4 cols for payroll (vs 8 for attendance) ── */
._miniGrid_1dt5u_67 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  ._miniGrid_1dt5u_67 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  ._miniGrid_1dt5u_67 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  ._miniGrid_1dt5u_67::-webkit-scrollbar {
    height: 6px;
  }

  ._miniGrid_1dt5u_67::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
  }

  ._miniCard_1dt5u_127 {
    min-width: 160px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* ── Card ── */
._miniCard_1dt5u_127 {
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

._miniCard_1dt5u_127:hover {
  transform: translateY(-2px);
}

._miniTop_1dt5u_165 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._miniLabel_1dt5u_177 {
  font-size: 11px;
  font-weight: 600;
}

._miniValue_1dt5u_187 {
  font-size: 18px;
  font-weight: 700;
}

._miniSub_1dt5u_197 {
  font-size: 10px;
  color: #9ca3af;
}

._miniIcon_1dt5u_207 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ── Table section ── */
._tableSection_1dt5u_229 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1dt5u_247 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1dt5u_269 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1dt5u_283 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Buttons ── */
._btn_1dt5u_297 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1dt5u_327 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1dt5u_327:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_1dt5u_347 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1dt5u_347:hover {
  background: #f8fafc;
}

/* ── Filter bar ── */
._filterBar_1dt5u_369 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1dt5u_391 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_1dt5u_409 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1dt5u_427 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1dt5u_439,
._filterDate_1dt5u_441 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s, box-shadow 0.13s;
}

._filterSelect_1dt5u_439:focus,
._filterDate_1dt5u_441:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_1dt5u_485 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  z-index: 1;
}

._filterClearX_1dt5u_485:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1dt5u_533 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_1dt5u_547 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1dt5u_547:hover {
  background: #fef2f2 !important;
}



._bulkActionBtn_1dt5u_569 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1dt5u_569:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1dt5u_615 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1dt5u_615:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_1dt5u_635 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

._bulkDeselect_1dt5u_635:hover {
  background: #f1f5f9;
  color: #475569;
}/* ── Wrapper ── */
._wrap_1x46t_3 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_1x46t_3 *,
._wrap_1x46t_3 *::before,
._wrap_1x46t_3 *::after {
    box-sizing: border-box;
}

/* ── Loading ── */
._loadingState_1x46t_41 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_1x46t_63 {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #ffca40;
    border-radius: 50%;
    animation: _spin_1x46t_63 0.7s linear infinite;
}

@keyframes _spin_1x46t_63 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Breadcrumb ── */
._breadcrumb_1x46t_95 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

._backBtn_1x46t_111 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}

._backBtn_1x46t_111:hover {
    background: #f8fafc;
}

._breadcrumb_1x46t_95 span:last-child {
    color: #1e293b;
    font-weight: 500;
}

/* ── Page title row ── */
._pageTitleRow_1x46t_161 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

._pageTitleLeft_1x46t_177 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._pageTitle_1x46t_161 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

/* ── Actions ── */
._actions_1x46t_203 {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

._btn_1x46t_217 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: background 0.12s;
    white-space: nowrap;
}

._btn_1x46t_217:hover {
    background: #f8fafc;
}

._btnPrimary_1x46t_259 {
    background: #ffca40;
    color: #1e293b;
    border-color: #ffca40;
    font-weight: 600;
}

._btnPrimary_1x46t_259:hover {
    background: #f5c036;
}

/* More dropdown */
._moreWrap_1x46t_283 {
    position: relative;
}

._dropdown_1x46t_291 {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

._dropdownItem_1x46t_317 {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 12px;
    color: #374151;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

._dropdownItem_1x46t_317:hover {
    background: #f8fafc;
}

/* ── Profile header card ── */
._profileCard_1x46t_351 {
    background: linear-gradient(135deg, #fffdf7 0%, #fff9ee 100%);
    border: 1px solid #f0ebe0;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

._profileLeft_1x46t_373 {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 220px;
}

._avatar_1x46t_389 {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fde68a;
    flex-shrink: 0;
}

._empName_1x46t_407 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
}

._empMeta_1x46t_421 {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.6;
}

._empMeta_1x46t_421 strong {
    color: #374151;
}

._profileMid_1x46t_441 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 180px;
    border-left: 1.5px solid #f0ebe0;
    padding-left: 20px;
}

._metaRow_1x46t_461 {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.8;
}

._metaRow_1x46t_461 strong {
    color: #1e293b;
}

._profilePaidWrap_1x46t_481 {
    display: flex;
    align-items: center;
}

._paidBadge_1x46t_491 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid #bbf7d0;
}

._netPayWrap_1x46t_517 {
    text-align: right;
    min-width: 160px;
    border-left: 1.5px solid #f0ebe0;
    padding-left: 20px;
}

._netPayLabel_1x46t_531 {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

._netPayAmount_1x46t_543 {
    font-size: 26px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

._netPaySub_1x46t_557 {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 4px;
}

/* ── Main 2-col grid ── */
._mainGrid_1x46t_571 {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 960px) {
    ._mainGrid_1x46t_571 {
        grid-template-columns: 1fr;
    }
}

._leftCol_1x46t_597 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._rightCol_1x46t_609 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Section card wrapper ── */
._sectionCard_1x46t_623 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

._sectionTitle_1x46t_637 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding: 20px;
}

/* ── Earnings card ── */
._earningsCard_1x46t_655 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    /* padding-bottom: 56px; */
}

._earningsTitle_1x46t_671 {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

._earningsTable_1x46t_685 {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

._earningsTable_1x46t_685 thead th {
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #374151;
}

._earningsTable_1x46t_685 tbody td {
    padding: 7px 10px;
    border: 1px solid #f1f5f9;
    color: #374151;
}

._earningsTable_1x46t_685 tbody tr:nth-child(even) td {
    background: #fafafa;
}

._textRight_1x46t_733 {
    text-align: right !important;
}

._totalRow_1x46t_741 td {
    background: #f8fafc !important;
    font-weight: 700;
    font-size: 12px;
    color: #1e293b;
    border-top: 2px solid #e2e8f0 !important;
}

/* Net pay row */
._netRow_1x46t_759 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 12px;
    color: #166534;
}

._netFormula_1x46t_789 {
    font-size: 11px;
    color: #374151;
}

._netFormula_1x46t_789 strong {
    color: #166534;
}

._amountWords_1x46t_807 {
    font-size: 10px;
    color: #6b7280;
    margin-top: 6px;
    padding: 5px 12px;
    font-style: italic;
}

/* ── Right panel cards ── */
._panelCard_1x46t_825 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

._panelTitle_1x46t_839 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

._panelRow_1x46t_857 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
    gap: 8px;
}

._panelRow_1x46t_857 strong {
    color: #1e293b;
    font-weight: 600;
}

._panelBtn_1x46t_887 {
    width: 100%;
    margin-top: 10px;
    padding: 7px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background 0.12s;
}

._panelBtn_1x46t_887:hover {
    background: #f8fafc;
}

/* Progress bar */
._progressBar_1x46t_925 {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0;
}

._progressFill_1x46t_941 {
    height: 100%;
    background: #ffca40;
    border-radius: 3px;
}

/* ── Vertical Timeline (Right Column) ── */
._timeline_1x46t_955 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._timelineItem_1x46t_967 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

._tlIcon_1x46t_979 {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

._tlDone_1x46t_1001 {
    background: #dcfce7;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}

._tlPending_1x46t_1013 {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
}

._tlBody_1x46t_1025 {
    flex: 1;
}

._tlLabel_1x46t_1033 {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

._tlDate_1x46t_1045 {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 1px;
}

/* ── Footer ── */
._footer_1x46t_1059 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

._footerTitle_1x46t_1083 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

._footerSub_1x46t_1097 {
    font-size: 10px;
    color: #9ca3af;
}

._footerRight_1x46t_1107 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 10px;
    color: #6b7280;
}

._footerNote_1x46t_1125 {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
}

/* ──  TIMELINE  */
._timelineHorizontalWrap_1x46t_1139 {
    margin-top: 16px;
    padding: 29px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    width: 100%;
    overflow-x: auto;
}

._timelineTitle_1x46t_1159 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e293b;
}

._timelineHorizontal_1x46t_1139 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    min-width: 600px;
}

/* Each step container */
._timelineStep_1x46t_1191 {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}

/* Circle indicator */
._timelineCircle_1x46t_1211 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 3;
    position: relative;
    background: #fff;
    transition: all 0.2s ease;
}

/* Done state */
._timelineDone_1x46t_1243 {
    background: #fde68a;
    color: #92400e;
    border: 2px solid #facc15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2);
}

/* Pending state */
._timelinePending_1x46t_1259 {
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    color: #94a3b8;
}

/* Connecting line between circles */
._timelineStep_1x46t_1191:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: calc(100% - 36px);
    height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
    z-index: 1;
}


._timelineStep_1x46t_1191._completedStep_1x46t_1297:not(:last-child)::before {
    background: linear-gradient(90deg, #facc15, #fde68a);
}


._timelineText_1x46t_1307 {
    margin-top: 12px;
    width: 100%;
    min-width: 100px;
    padding: 0 8px;
}

._timelineLabel_1x46t_1321 {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
}

._timelineDate_1x46t_1337 {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Responsive horizontal timeline */
@media (max-width: 768px) {
    ._timelineHorizontalWrap_1x46t_1139 {
        padding: 16px 12px;
    }
    
    ._timelineHorizontal_1x46t_1139 {
        min-width: 500px;
    }
    
    ._timelineCircle_1x46t_1211 {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    ._timelineStep_1x46t_1191:not(:last-child)::before {
        top: 16px;
        width: calc(100% - 32px);
    }
    
    ._timelineLabel_1x46t_1321 {
        font-size: 10px;
        white-space: normal;
        word-break: keep-all;
    }
    
    ._timelineDate_1x46t_1337 {
        font-size: 9px;
    }
    
    ._timelineText_1x46t_1307 {
        min-width: 80px;
    }
}

/* Status badge */
._status_1x46t_1423 {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

._status_1x46t_1423._yellow_1x46t_1439 {
    background: #fef3c7;
    color: #92400e;
}


._totalRow_1x46t_741 td {
  background: unset !important; 
  font-weight: 700;
  font-size: 12px;
  padding: 10px;
  border-top: 2px solid #e2e8f0;
}


._totalRow_1x46t_741 td:nth-child(1),
._totalRow_1x46t_741 td:nth-child(2) {
 background: #fef3c7 !important; 
  color: #92400e;
}


._totalRow_1x46t_741 td:nth-child(3),
._totalRow_1x46t_741 td:nth-child(4) {
  background:  #fee2e2 !important;
  color: #7f1d1d;
}


._totalRow_1x46t_741 td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

._totalRow_1x46t_741 td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

._page_zd2wh_1 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_zd2wh_1 *,
._page_zd2wh_1 *::before,
._page_zd2wh_1 *::after {
    box-sizing: border-box;
}

/* Stats Accordion */
._statsAccordion_zd2wh_39 {
    border-radius: 8px;
    overflow: hidden;

}

._accordionHeader_zd2wh_51 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* background: white; */
}

._accordionHeader_zd2wh_51:hover {
    background-color: #f9fafb;
}

._accordionTitle_zd2wh_79 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 12px;
}

._accordionTitle_zd2wh_79 svg {
    color: #f59e0b;
}

._accordionToggle_zd2wh_105 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

._accordionToggle_zd2wh_105:hover {
    color: #374151;
}

._statsGrid_zd2wh_135 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    padding: 12px 16px 16px;

}

._summaryCard_zd2wh_151 {
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

._summaryCard_zd2wh_151:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

._summaryLeft_zd2wh_181 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._summaryIcon_zd2wh_193 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

._summaryTitle_zd2wh_215 {
    font-size: 10px;
    font-weight: 500;
    color: #475569;
}

._summaryRight_zd2wh_227 {
    text-align: right;
}

._summaryValue_zd2wh_235 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

._summaryTrend_zd2wh_247 {
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
}

._trendUp_zd2wh_259 {
    color: #16a34a;
}

._trendDown_zd2wh_267 {
    color: #dc2626;
}

._summarySub_zd2wh_275 {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 1px;
}

/* Layout */
._layout_zd2wh_289 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

._layoutMain_zd2wh_303 {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* Table Section */
._tableSection_zd2wh_319 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_zd2wh_337 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_zd2wh_359 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_zd2wh_373 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

/* Buttons */
._btn_zd2wh_387 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s, box-shadow 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_zd2wh_417 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_zd2wh_417:hover {
    background: #f5c036;
    box-shadow: 0 2px 5px rgba(255, 202, 64, 0.3);
}

._btnSecondary_zd2wh_437 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_zd2wh_437:hover {
    background: #f8fafc;
}

/* Search and Filter Bar */
._filterBar_zd2wh_459 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._searchWrapper_zd2wh_481 {
    position: relative;
    flex: 1;
    max-width: 260px;
}

._searchIcon_zd2wh_493 {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
}

._searchInput_zd2wh_511 {
    width: 100%;
    padding: 6px 8px 6px 28px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    background: white;
    height: 28px;
}

._searchInput_zd2wh_511:focus {
    outline: none;
    border-color: #ffca40;
    box-shadow: 0 0 0 2px rgba(255, 202, 64, 0.1);
}

._filterWrapper_zd2wh_543 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

._filterBadge_zd2wh_557 {
    background: #ffca40;
    color: #1e293b;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
}

/* Bulk Selection Bar */
._bulkSelectedBar_zd2wh_577 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
     background: var(--color-primary-lightest);
    border-bottom: 1px solid var(--color-primary-lightest); 
    flex-shrink: 0;
    flex-wrap: wrap;
}

._bulkSelectedLeft_zd2wh_599 {
    display: flex;
    align-items: center;
    gap: 6px;
}

._bulkCountBadge_zd2wh_611 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--color-primary-light);
    color: #fff; 
    font-size: 9px;
    font-weight: 700;
}

._bulkSelectedText_zd2wh_639 {
    font-size: 10px;
    font-weight: 600;
    color: #92400e;
}

._bulkBtnGroup_zd2wh_651 {
    display: flex;
    align-items: center;
    gap: 5px;
}

._bulkActionBtn_zd2wh_663 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 9px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

._bulkActionBtnDanger_zd2wh_693 {
    color: #dc2626;
    border-color: #fecaca;
}

._bulkActionBtnDanger_zd2wh_693:hover {
    background: #fef2f2;
}

._bulkDeselect_zd2wh_711 {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

._bulkDeselect_zd2wh_711:hover {
    background: #f1f5f9;
}

/* Badge */
._badge_zd2wh_749 {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Survey Name Cell */
._surveyNameCell_zd2wh_773 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._surveyName_zd2wh_773 {
    font-weight: 600;
    font-size: 12px;
    color: #0f172a;
}

._surveyDesc_zd2wh_797 {
    font-size: 9px;
    color: #64748b;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Assigned Cell */
._assignedCell_zd2wh_817 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._assignedCount_zd2wh_829 {
    font-weight: 500;
    font-size: 12px;
    color: #334155;
}

/* Response Rate Cell */
._responseRateCell_zd2wh_843 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._rateValue_zd2wh_855 {
    font-weight: 600;
    font-size: 12px;
    color: #0f172a;
}

._rateDetail_zd2wh_867 {
    font-size: 9px;
    color: #64748b;
}

/* Created By Cell */
._createdByCell_zd2wh_879 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._avatar_zd2wh_891 {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: white;
}

._createdByName_zd2wh_915 {
    font-weight: 500;
    font-size: 11px;
    color: #1e293b;
}

._createdByRole_zd2wh_927 {
    font-size: 9px;
    color: #64748b;
}

/* Deadline Cell */
._deadlineCell_zd2wh_939 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

._deadlineDate_zd2wh_951 {
    font-size: 11px;
    font-weight: 500;
    color: #334155;
}

._deadlineDays_zd2wh_963 {
    font-size: 9px;
}

._deadlineUrgent_zd2wh_971 {
    color: #f97316;
}

._deadlineOverdue_zd2wh_979 {
    color: #dc2626;
}

._deadlineClosed_zd2wh_987 {
    font-size: 9px;
    color: #94a3b8;
}

/* Progress Cell */
._progressCell_zd2wh_999 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

._progressBar_zd2wh_1013 {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

._progressFill_zd2wh_1029 {
    height: 100%;
    background: #ffca40;
    border-radius: 4px;
    transition: width 0.3s ease;
}

._progressValue_zd2wh_1043 {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    min-width: 35px;
    text-align: right;
}

._textMuted_zd2wh_1059 {
    color: #94a3b8;
    font-size: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    ._page_zd2wh_1 {
        padding: 8px 10px;
    }

    ._statsGrid_zd2wh_135 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._filterBar_zd2wh_459 {
        flex-direction: column;
        align-items: stretch;
    }

    ._searchWrapper_zd2wh_481 {
        max-width: 100%;
    }

    ._tableHeader_zd2wh_337 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._summaryValue_zd2wh_235 {
        font-size: 16px;
    }

    ._summaryCard_zd2wh_151 {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    ._statsGrid_zd2wh_135 {
        grid-template-columns: 1fr;
    }

    ._summaryIcon_zd2wh_193 {
        width: 24px;
        height: 24px;
    }

    ._summaryValue_zd2wh_235 {
        font-size: 14px;
    }
}

._npsNumbers_zd2wh_1165 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

@media (max-width: 1250px) {
    ._npsNumbers_zd2wh_1165 {
        gap: 0;
    }
}

/* Add to SurveyAdd.module.css */
._questionBody_zd2wh_1193 {
    padding: 16px 20px 20px 44px;
    border-top: 1px solid #f0f2f5;
    background: #ffffff;
}

._questionBody_zd2wh_1193 ._emojiRow_zd2wh_1205,
._questionBody_zd2wh_1193 ._npsRow_zd2wh_1207,
._questionBody_zd2wh_1193 ._ratingRow_zd2wh_1209,
._questionBody_zd2wh_1193 ._optionsRow_zd2wh_1211,
._questionBody_zd2wh_1193 ._textInputPreview_zd2wh_1213,
._questionBody_zd2wh_1193 ._yesNoRow_zd2wh_1215,
._questionBody_zd2wh_1193 ._starsRow_zd2wh_1217 {
    opacity: 0.8;
}

._questionBody_zd2wh_1193 ._emojiRow_zd2wh_1205 ._emoji_zd2wh_1205 {
    font-size: 20px;
}

._questionBody_zd2wh_1193 ._npsNumber_zd2wh_1165 {
    font-size: 11px;
    width: 28px;
    height: 28px;
}

._questionBody_zd2wh_1193 ._ratingNumber_zd2wh_1245 {
    font-size: 13px;
    width: 36px;
    height: 36px;
}

/* Make preview interactive indicators */
._questionBody_zd2wh_1193 ._optionLabel_zd2wh_1259 input:disabled,
._questionBody_zd2wh_1193 ._textInputPreview_zd2wh_1213 input:disabled,
._questionBody_zd2wh_1193 ._textInputPreview_zd2wh_1213 textarea:disabled {
    background: #fafbfc;
    cursor: default;
}

/* Add hover effect on question card */
._questionCard_zd2wh_1275 {
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

._questionCard_zd2wh_1275:hover {
    border-color: #fbbf24;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

._bannerWrapper_zd2wh_1295 {
    width: 100%;
    /* margin-bottom: 20px; */
}

._bannerImage_zd2wh_1305 {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    object-fit: cover;
}

._employeeStatusWrapper_zd2wh_1321 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

._employeeStatusCard_zd2wh_1335 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

._employeeStatusHeader_zd2wh_1351 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

._employeeStatusHeader_zd2wh_1351 h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

._employeeStatusHeader_zd2wh_1351 p {
  margin: 2px 0 0;
  font-size: 10px;
  color: #6b7280;
}

._completedBadgeTop_zd2wh_1391,
._pendingBadgeTop_zd2wh_1393 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

._completedBadgeTop_zd2wh_1391 {
  background: #dcfce7;
  color: #166534;
}

._pendingBadgeTop_zd2wh_1393 {
  background: #fee2e2;
  color: #991b1b;
}

._employeeStatusList_zd2wh_1435 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
}

._employeeStatusItem_zd2wh_1451 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 10px;
  background: #f9fafb;
}

._employeeLeft_zd2wh_1469 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._employeeAvatar_zd2wh_1481 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fbbf24;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

._employeeLeft_zd2wh_1469 h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

._employeeLeft_zd2wh_1469 span {
  font-size: 10px;
  color: #6b7280;
}

._completedTag_zd2wh_1531,
._pendingTag_zd2wh_1533 {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
}

._completedTag_zd2wh_1531 {
  background: #dcfce7;
  color: #166534;
}

._pendingTag_zd2wh_1533 {
  background: #fee2e2;
  color: #991b1b;
}

/* Alternative Compact Stats Grid */
._statsGridCompact_zd2wh_1569 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 12px 16px 16px;
}

._summaryCardCompact_zd2wh_1583 {
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

._summaryLeftCompact_zd2wh_1603 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._summaryIconCompact_zd2wh_1615 {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 4px;
}

._summaryTitleCompact_zd2wh_1639 {
    font-size: 9px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
}

._summaryValueCompact_zd2wh_1653 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

._summaryRightCompact_zd2wh_1665 {
    text-align: right;
}

._summaryTrendCompact_zd2wh_1673 {
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    ._statsGridCompact_zd2wh_1569 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    ._statsGridCompact_zd2wh_1569 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    ._statsGridCompact_zd2wh_1569 {
        grid-template-columns: 1fr;
    }
}

/* SurveyAdd.module.css */
._page_1bhdc_3 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 16px 20px;
    background: #f5f7fa;
    gap: 20px;
}

/* HEADER */
._pageHeader_1bhdc_23 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
}

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

._backBtn_1bhdc_57 {
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary);
    cursor: pointer;
    
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

._backBtn_1bhdc_57:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary);
}

._pageHeader_1bhdc_23 h1 {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

._pageHeader_1bhdc_23 p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

._headerActions_1bhdc_121 {
    display: flex;
    gap: 10px;
}

._discardBtn_1bhdc_131,
._previewBtn_1bhdc_133,
._publishBtn_1bhdc_135 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

._discardBtn_1bhdc_131 {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

._discardBtn_1bhdc_131:hover {
    background: #e5e7eb;
    color: #ef4444;
}

._previewBtn_1bhdc_133 {
    background: white;
    color: #f59e0b;
    border: 1px solid #fbbf24;
}

._previewBtn_1bhdc_133:hover {
    background: #fffbeb;
}

._publishBtn_1bhdc_135 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111827;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

._publishBtn_1bhdc_135:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

/* TOP ROW - Settings + Assignment side by side */
._topRow_1bhdc_227 {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* FULL WIDTH CARD for Builder */
._fullWidthCard_1bhdc_243 {
    background: white;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* CARDS */
._card_1bhdc_261 {
    background: white;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

._cardTitle_1bhdc_277 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef2f6;
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
}

/* FORM GROUPS */
._formGroup_1bhdc_301 {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f2f5;
}

._formGroup_1bhdc_301 label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

._required_1bhdc_331 {
    color: #ef4444;
}

._formGroup_1bhdc_301 input,
._formGroup_1bhdc_301 textarea,
._formGroup_1bhdc_301 select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    transition: all 0.2s;
    background: white;
}

._formGroup_1bhdc_301 input:focus,
._formGroup_1bhdc_301 textarea:focus,
._formGroup_1bhdc_301 select:focus {
    outline: none;
     border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
._inputIcon_1bhdc_377 input[type="date"] {
  outline: none;
  box-shadow: none;
}

._inputIcon_1bhdc_377 input[type="date"]:focus {
  outline: none;
  box-shadow: none;
}
._selectWrap_1bhdc_395 {
    position: relative;
}

._selectWrap_1bhdc_395 select {
    appearance: none;
    padding-right: 32px;
    cursor: pointer;
}

._selectIcon_1bhdc_415 {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

._inputIcon_1bhdc_377 {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 12px;
    background: white;
}

._inputIcon_1bhdc_377 svg {
    color: #9ca3af;
}

._inputIcon_1bhdc_377 input {
    flex: 1;
    border: none;
    padding: 9px 0;
    background: transparent;
}

._inputIcon_1bhdc_377 input:focus {
    outline: none;
}

/* TOGGLE ROW */
._toggleRow_1bhdc_485 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 13px;
    font-weight: 500;
}

._switch_1bhdc_505 {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

._switch_1bhdc_505 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._slider_1bhdc_531 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.3s;
    border-radius: 34px;
}

._slider_1bhdc_531:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked+._slider_1bhdc_531 {
    background-color: #f59e0b;
}

input:checked+._slider_1bhdc_531:before {
    transform: translateX(22px);
}

/* ASSIGNMENT LIST */
._assignList_1bhdc_597 {
    padding: 12px 16px;
    border-bottom: 1px solid #eef2f6;
}

._radioRow_1bhdc_607 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #374151;
}

._radioRow_1bhdc_607 input {
    margin: 0;
    cursor: pointer;
}

/* TAGS */
._tagContainer_1bhdc_641 {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #eef2f6;
}

._tag_1bhdc_641 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    color: #92400e;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

._tag_1bhdc_641 button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    color: #92400e;
}

._tag_1bhdc_641 button:hover {
    color: #ef4444;
}

._addTagBtn_1bhdc_709 {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px dashed #fbbf24;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 10px;
    color: #f59e0b;
    cursor: pointer;
}

/* ASSIGNMENT STATS */
._assignmentStats_1bhdc_737 {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    border-bottom: 1px solid #eef2f6;
    text-align: center;
}

._statItem_1bhdc_753 h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}

._statItem_1bhdc_753 p {
    font-size: 10px;
    color: #6b7280;
    margin: 4px 0 0;
}

._statSub_1bhdc_779 {
    font-size: 9px;
    color: #9ca3af;
}

/* SUMMARY INFO */
._summaryInfo_1bhdc_791 {
    padding: 14px 16px;
}

._summaryItem_1bhdc_799 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
    padding: 6px 0;
}

._summaryDivider_1bhdc_817 {
    height: 1px;
    background: #eef2f6;
    margin: 10px 0;
}

/* BUILDER HEADER */
._builderHeader_1bhdc_831 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #eef2f6;
}

._previewSmall_1bhdc_847 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    color: #4b5563;
}

._previewSmall_1bhdc_847:hover {
    background: #e5e7eb;
}

/* BUILDER LAYOUT */
._builderLayout_1bhdc_885 {
    display: flex;
    gap: 0;
}

/* TOOLBOX */
._toolbox_1bhdc_897 {
    width: 290px;
    background: #fafbfc;
    border-right: 1px solid #eef2f6;
    padding: 16px;
}

._toolboxTitle_1bhdc_911 {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    margin-bottom: 12px;
}

._toolList_1bhdc_927 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._toolItem_1bhdc_939 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 11px;
    color: #4b5563;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

._toolItem_1bhdc_939:hover {
     border-color: var(--color-primary-light);
    background: var(--color-primary-lightest);
    transform: translateX(2px);
}

/* QUESTION AREA */
._questionArea_1bhdc_981 {
    flex: 1;
    /* padding: 20px; */
    /* max-height: 55vh; */
    overflow-y: auto;
}

._questionCard_1bhdc_995 {
    background: white;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

._questionTop_1bhdc_1011 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fafbfc;
    border-bottom: 1px solid #eef2f6;
}

._questionInfo_1bhdc_1029 {
    flex: 1;
}

._questionType_1bhdc_1037 {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 8px;
}

._questionInfo_1bhdc_1029 h4 {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

._editHint_1bhdc_1081 {
    font-size: 10px;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 0.2s;
}

._questionInfo_1bhdc_1029 h4:hover ._editHint_1bhdc_1081 {
    opacity: 1;
}

._editQuestionContainer_1bhdc_1103 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

._editInput_1bhdc_1117 {
    flex: 1;
    padding: 6px 10px; 
    border: 1px solid var(--color-primary-light); 
    border-radius: 8px;
    font-size: 13px;
}
._editInput_1bhdc_1117:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
._saveEditBtn_1bhdc_1139 {
    padding: 4px 12px;
     background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

._requiredBadge_1bhdc_1159 {
    font-size: 9px;
    color: #ef4444;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

._questionActions_1bhdc_1177 {
    display: flex;
    gap: 6px;
}

._questionActions_1bhdc_1177 button {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

._questionActions_1bhdc_1177 button:hover {
    background: #f3f4f6;
    color: var(--color-primary);
}

._deleteBtn_1bhdc_1219:hover {
    color: #ef4444 !important;
}

/* QUESTION PREVIEWS */
._emojiRow_1bhdc_1229 {
    display: flex;
    gap: 20px;
    padding: 16px;
    justify-content: center;
}

._emoji_1bhdc_1229 {
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.2s;
}

._emoji_1bhdc_1229:hover {
    transform: scale(1.2);
}

._npsRow_1bhdc_1263,
._ratingRow_1bhdc_1265 {
    padding: 12px 16px;
}

._npsNumbers_1bhdc_1273,
._ratingNumbers_1bhdc_1275 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

._npsNumber_1bhdc_1273,
._ratingNumber_1bhdc_1275 {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
    padding: 4px 0;
}

._npsNumber_1bhdc_1273:hover,
._ratingNumber_1bhdc_1275:hover {
    background: var(--color-primary);
    border-radius: 6px;
}

._npsLabels_1bhdc_1325,
._ratingLabels_1bhdc_1327 {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #9ca3af;
    padding: 0 8px;
}

._optionsRow_1bhdc_1343 {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._optionLabel_1bhdc_1357 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #4b5563;
}

._optionLabel_1bhdc_1357 input {
    margin: 0;
}

._yesNoRow_1bhdc_1381 {
    padding: 12px 16px;
    display: flex;
    gap: 24px;
}

._yesNoLabel_1bhdc_1393 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

._starsRow_1bhdc_1407 {
    padding: 12px 16px;
    display: flex;
    gap: 10px;
}

._starIcon_1bhdc_1419 {
    color: #fbbf24;
}

._textInputPreview_1bhdc_1427 {
    padding: 12px 16px;
}

._textInputPreview_1bhdc_1427 input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    background: #fafbfc;
}

/* ADD QUESTION BUTTON */
._addQuestionBtn_1bhdc_1455 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #fffbeb;
    border: 1px dashed #fbbf24;
    border-radius: 12px;
    color: #f59e0b;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
}

._addQuestionBtn_1bhdc_1455:hover {
    background: #fef3c7;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    ._topRow_1bhdc_227 {
        grid-template-columns: 1fr;
    }

    ._builderLayout_1bhdc_885 {
        flex-direction: column;
    }

    ._toolbox_1bhdc_897 {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eef2f6;
    }

    ._toolList_1bhdc_927 {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    ._page_1bhdc_3 {
        padding: 12px;
    }

    ._pageHeader_1bhdc_23 {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    ._headerActions_1bhdc_121 {
        width: 100%;
        flex-wrap: wrap;
    }

    ._questionArea_1bhdc_981 {
        max-height: 60vh;
    }
}

/* Add these new styles to your existing SurveyAdd.module.css */

/* Drag & Drop Styles */
._questionCard_1bhdc_995 {
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    animation: _slideIn_1bhdc_1 0.3s ease-out;
}

@keyframes _slideIn_1bhdc_1 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._questionCard_1bhdc_995._dragOver_1bhdc_1623 {
    border: 2px dashed #f59e0b;
    background: #fffbeb;
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

._questionDragHandle_1bhdc_1637 {
    cursor: grab;
    display: flex;
    align-items: center;
    padding-right: 12px;
}

._dragIcon_1bhdc_1651 {
    color: #9ca3af;
    transition: color 0.2s;
}

._dragIcon_1bhdc_1651:hover {
    color: var(--color-primary);
}

._questionCard_1bhdc_995:active ._dragIcon_1bhdc_1651 {
    cursor: grabbing;
}

/* Collapsible Body Animation */
._questionBody_1bhdc_1679 {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1), padding 0.3s ease;
}

._questionBody_1bhdc_1679._expanded_1bhdc_1689 {
    max-height: 500px;
    padding: 0 16px 16px 16px;
}

._questionBody_1bhdc_1679._collapsed_1bhdc_1699 {
    max-height: 0;
    padding: 0 16px;
}

/* Question Actions with transitions */
._questionActions_1bhdc_1177 button {
    transition: all 0.2s ease;
}

._questionActions_1bhdc_1177 button:hover:not(:disabled) {
    transform: translateY(-2px);
}

._questionActions_1bhdc_1177 button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Required Toggle */
._requiredToggleLabel_1bhdc_1739 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

._requiredToggleLabel_1bhdc_1739 input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Preview Modal Styles */
._modalOverlay_1bhdc_1775 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: _fadeIn_1bhdc_1 0.2s ease-out;
}

@keyframes _fadeIn_1bhdc_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

._modalContainer_1bhdc_1825 {
    background: white;
    border-radius: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: _slideUp_1bhdc_1 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes _slideUp_1bhdc_1 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._modalHeader_1bhdc_1875 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f6;
    background: linear-gradient(135deg, #fff8dc, #fff);
}

._modalHeaderLeft_1bhdc_1893 {
    display: flex;
    align-items: center;
    gap: 14px;
}

._modalIcon_1bhdc_1905 {
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

._modalHeaderLeft_1bhdc_1893 h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1f2937;
}

._modalHeaderLeft_1bhdc_1893 p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

._modalClose_1bhdc_1953 {
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

._modalClose_1bhdc_1953:hover {
    background: #e5e7eb;
    color: #ef4444;
}

._modalContent_1bhdc_1991 {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

._previewHeader_1bhdc_2003 {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef2f6;
    margin-bottom: 20px;
}

._previewHeader_1bhdc_2003 h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

._previewHeader_1bhdc_2003 p {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

._previewMeta_1bhdc_2045 {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 11px;
    color: #9ca3af;
}

._previewMeta_1bhdc_2045 span {
    display: flex;
    align-items: center;
    gap: 5px;
}

._previewQuestions_1bhdc_2073 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

._previewQuestionCard_1bhdc_2085 {
    background: #f9fafb;
    border-radius: 16px;
    padding: 18px;
    transition: all 0.2s;
    animation: _fadeSlideUp_1bhdc_1 0.4s ease-out;
    animation-fill-mode: both;
}

@keyframes _fadeSlideUp_1bhdc_1 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._previewQuestionCard_1bhdc_2085:nth-child(1) {
    animation-delay: 0.05s;
}

._previewQuestionCard_1bhdc_2085:nth-child(2) {
    animation-delay: 0.1s;
}

._previewQuestionCard_1bhdc_2085:nth-child(3) {
    animation-delay: 0.15s;
}

._previewQuestionCard_1bhdc_2085:nth-child(4) {
    animation-delay: 0.2s;
}

._previewQuestionCard_1bhdc_2085:nth-child(5) {
    animation-delay: 0.25s;
}

._previewQuestionHeader_1bhdc_2167 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

._previewQuestionNumber_1bhdc_2181 {
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    background: #fef3c7;
    padding: 2px 10px;
    border-radius: 20px;
}

._previewQuestionType_1bhdc_2199 {
    font-size: 10px;
    color: #9ca3af;
}

._previewRequired_1bhdc_2209 {
    color: #ef4444;
    font-size: 14px;
}

._previewQuestionText_1bhdc_2219 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 14px;
}

._modalFooter_1bhdc_2233 {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eef2f6;
    background: #fafbfc;
}

._cancelPreviewBtn_1bhdc_2251 {
    padding: 10px 20px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #4b5563;
    transition: all 0.2s;
}

._cancelPreviewBtn_1bhdc_2251:hover {
    background: #e5e7eb;
}

._submitPreviewBtn_1bhdc_2283 {
    padding: 10px 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

._submitPreviewBtn_1bhdc_2283:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Preview Interactive Elements */
._previewEmoji_1bhdc_2325 {
    cursor: pointer;
}

._selectedNps_1bhdc_2333,
._selectedRating_1bhdc_2335 {
    background: #f59e0b;
    color: white;
    border-radius: 6px;
}

._starFilled_1bhdc_2347 {
    fill: #fbbf24;
    color: #fbbf24;
}

/* Remove Option Button in Preview */
._removeOptionBtn_1bhdc_2359 {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

._optionLabel_1bhdc_1357:hover ._removeOptionBtn_1bhdc_2359 {
    opacity: 1;
}

._removeOptionBtn_1bhdc_2359:hover {
    color: #ef4444;
}

/* Hover Effects */
._questionCard_1bhdc_995:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary-light);
}

/* Tool Item Animation */
._toolItem_1bhdc_939 {
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

._toolItem_1bhdc_939:active {
    transform: scale(0.98);
}

/* Add Question Button Animation */
._addQuestionBtn_1bhdc_1455 {
    transition: all 0.2s ease;
}

._addQuestionBtn_1bhdc_1455:active {
    transform: scale(0.98);
}

/* Responsive Modal */
@media (max-width: 768px) {
    ._modalContainer_1bhdc_1825 {
        width: 95%;
        max-height: 90vh;
    }

    ._modalContent_1bhdc_1991 {
        padding: 16px;
    }

    ._previewHeader_1bhdc_2003 h2 {
        font-size: 18px;
    }

    ._previewQuestionCard_1bhdc_2085 {
        padding: 14px;
    }

    ._modalFooter_1bhdc_2233 {
        flex-direction: column;
    }

    ._cancelPreviewBtn_1bhdc_2251,
    ._submitPreviewBtn_1bhdc_2283 {
        width: 100%;
        justify-content: center;
    }
}

/* Add to SurveyAdd.module.css */
._dragHandle_1bhdc_2505 {
    cursor: grab;
    display: flex;
    align-items: center;
    padding-right: 12px;
}

._dragHandle_1bhdc_2505:active {
    cursor: grabbing;
}

._dragIcon_1bhdc_1651 {
    color: #9ca3af;
    transition: color 0.2s;
}

._dragIcon_1bhdc_1651:hover {
     color: var(--color-primary);
}

._questionCard_1bhdc_995._dragOver_1bhdc_1623 {
    border: 2px dashed var(--color-primary);
    background: var(--color-primary-lightest);
    transform: scale(1.01);
    transition: all 0.2s;
}

._questionCard_1bhdc_995 {
    transition: transform 0.2s, box-shadow 0.2s;
}

._questionCard_1bhdc_995:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* LivePreview.module.css */
._modalOverlay_1bhdc_1775 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: _fadeIn_1bhdc_1 0.2s ease;
}

@keyframes _fadeIn_1bhdc_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

._modalContainer_1bhdc_1825 {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: _slideUp_1bhdc_1 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes _slideUp_1bhdc_1 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

._modalHeader_1bhdc_1875 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f6;
    background: var(--color-primary-lightest);
    border-radius: 20px 20px 0 0;
}

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

._modalIcon_1bhdc_1905 {
    width: 40px;
    height: 40px;
     background: var(--gradient-primary);
  color: var(--color-white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

._modalHeaderLeft_1bhdc_1893 h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

._modalHeaderLeft_1bhdc_1893 p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

._modalClose_1bhdc_1953 {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

._modalClose_1bhdc_1953:hover {
    background: #e5e7eb;
    color: #ef4444;
}

._modalContent_1bhdc_1991 {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

._previewHeader_1bhdc_2003 {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f2f5;
}

._previewHeader_1bhdc_2003 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

._previewHeader_1bhdc_2003 p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

._previewMeta_1bhdc_2045 {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: var(--color-primary);
}

._previewMeta_1bhdc_2045 span {
    display: flex;
    align-items: center;
    gap: 6px;
}

._progressBar_1bhdc_2877 {
    height: 4px;
    background: #eef2f6;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

._progressFill_1bhdc_2893 {
    height: 100%;
   background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

._progressText_1bhdc_2907 {
    text-align: right;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 24px;
}

._previewQuestions_1bhdc_2073 {
    margin-top: 20px;
}

._previewQuestionCard_1bhdc_2085 {
    background: #fafbfc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--color-primary-light);
}

._previewQuestionHeader_1bhdc_2167 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

._previewQuestionNumber_1bhdc_2181 {
    background: var(--gradient-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

._previewQuestionType_1bhdc_2199 {
    background: #f3f4f6;
    color: #4b5563;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

._previewRequired_1bhdc_2209 {
    color: #ef4444;
    font-size: 11px;
    font-weight: 500;
}

._previewQuestionText_1bhdc_2219 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Question Styles */
._emojiRow_1bhdc_1229 {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 12px;
}

._emoji_1bhdc_1229 {
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.2s;
    opacity: 0.7;
}

._emoji_1bhdc_1229:hover {
    transform: scale(1.2);
    opacity: 1;
}

._selectedEmoji_1bhdc_3063 {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 0 2px #fbbf24;
    border-radius: 50%;
}

._npsRow_1bhdc_1263 {
    padding: 12px;
}

._npsNumbers_1bhdc_1273 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

._npsNumber_1bhdc_1273 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

._npsNumber_1bhdc_1273:hover {
     background: var(--color-primary-lightest);
    color: var(--color-primary);
    transform: scale(1.05);
}

._selectedNps_1bhdc_2333 {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.05);
}

._npsLabels_1bhdc_1325 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    padding: 0 8px;
}

._ratingRow_1bhdc_1265 {
    padding: 12px;
}

._ratingNumbers_1bhdc_1275 {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

._ratingNumber_1bhdc_1275 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s; 
}

._ratingNumber_1bhdc_1275:hover {
   background: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

._selectedRating_1bhdc_2335 {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.05);
}

._ratingLabels_1bhdc_1327 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    padding: 0 8px;
}

._optionsRow_1bhdc_1343 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._optionLabel_1bhdc_1357 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

._optionLabel_1bhdc_1357:hover {
   background: var(--color-primary-lightest);
}

._optionLabel_1bhdc_1357 input {
    margin: 0;
    cursor: pointer;
}

._textInputPreview_1bhdc_1427 textarea,
._textInputPreview_1bhdc_1427 input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

._textInputPreview_1bhdc_1427 textarea:focus,
._textInputPreview_1bhdc_1427 input:focus {
    outline: none;
     border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

._yesNoRow_1bhdc_1381 {
    display: flex;
    gap: 24px;
    padding: 12px;
}

._yesNoLabel_1bhdc_1393 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

._starsRow_1bhdc_1407 {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
}

._starIcon_1bhdc_1419 {
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}

._starIcon_1bhdc_1419:hover {
    transform: scale(1.1);
    color: var(--color-primary);
}

._starFilled_1bhdc_2347 {
    color: var(--color-primary);
    fill: var(--color-primary);
}

._modalFooter_1bhdc_2233 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eef2f6;
    background: #fafbfc;
    border-radius: 0 0 20px 20px;
}

._previousBtn_1bhdc_3445,
._nextBtn_1bhdc_3447,
._submitBtn_1bhdc_3449 {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

._previousBtn_1bhdc_3445 {
    background: #f3f4f6;
    color: #4b5563;
}

._previousBtn_1bhdc_3445:hover:not(:disabled) {
    background: #e5e7eb;
}

._previousBtn_1bhdc_3445:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._nextBtn_1bhdc_3447,
._submitBtn_1bhdc_3449 {
     background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-primary-sm);
}

._nextBtn_1bhdc_3447:hover:not(:disabled),
._submitBtn_1bhdc_3449:hover:not(:disabled) {
    transform: translateY(-1px);
   box-shadow: var(--shadow-primary-md);
}

._nextBtn_1bhdc_3447:disabled,
._submitBtn_1bhdc_3449:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

._thankYouContainer_1bhdc_3537 {
    background: white;
    border-radius: 24px;
    width: 400px;
    max-width: 90%;
    animation: _slideUp_1bhdc_1 0.3s ease;
}

._thankYouContent_1bhdc_3553 {
    text-align: center;
    padding: 48px 32px;
}

._thankYouIcon_1bhdc_3563 {
    color: #10b981;
    margin-bottom: 16px;
    animation: _checkmark_1bhdc_1 0.5s ease;
}

@keyframes _checkmark_1bhdc_1 {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

._thankYouContent_1bhdc_3553 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

._thankYouContent_1bhdc_3553 p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    ._modalContainer_1bhdc_1825 {
        width: 95%;
        max-height: 90vh;
    }

    ._npsNumber_1bhdc_1273 {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    ._ratingNumber_1bhdc_1275 {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    ._emoji_1bhdc_1229 {
        font-size: 28px;
    }

    ._previewQuestionCard_1bhdc_2085 {
        padding: 16px;
    }
}

/* Add these additional styles to your existing SurveyAdd.module.css */

._dateRange_1bhdc_3685 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._dateRange_1bhdc_3685 ._inputIcon_1bhdc_377 {
    flex: 1;
}

._dateRange_1bhdc_3685 span {
    color: #9ca3af;
    font-size: 12px;
}

._errorInput_1bhdc_3715 {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

._errorText_1bhdc_3725 {
    font-size: 10px;
    color: #ef4444;
    margin-top: 4px;
}

._requiredCheckbox_1bhdc_3737 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

._requiredCheckbox_1bhdc_3737 input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

._requiredCheckbox_1bhdc_3737 span {
    user-select: none;
}

/* Move buttons styling */
._questionActions_1bhdc_1177 button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Option row with remove button */
._optionLabel_1bhdc_1357 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #4b5563;
    padding: 4px 0;
}

._optionLabel_1bhdc_1357 input {
    margin: 0;
}

._removeOptionBtn_1bhdc_2359 {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

._optionLabel_1bhdc_1357:hover ._removeOptionBtn_1bhdc_2359 {
    opacity: 1;
}

._removeOptionBtn_1bhdc_2359:hover {
    color: #ef4444;
}

._addOptionBtn_1bhdc_3855 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px dashed var(--color-primary-light);
  background: var(--color-primary-lightest);
  color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0 4px;
    margin-top: 4px;
}

._addOptionBtn_1bhdc_3855:hover {
     color: var(--color-primary);
}

/* Spinner */
._spinner-border-sm_1bhdc_3893 {
    width: 12px;
    height: 12px;
    border-width: 2px;
    margin-right: 6px;
}

._optionInputRow_1bhdc_3907 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._optionInput_1bhdc_3907 {
    flex: 1;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 12px;
    background: white;
}

._optionInput_1bhdc_3907:focus {
    outline: none;
     border-color: var(--color-primary);
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}

._removeOptionBtn_1bhdc_2359 {
    width: 34px;
    height: 34px;
    border: none;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 8px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

._addOptionBtn_1bhdc_3855 {
    margin-top: 10px;
    height: 36px;
    padding: 0 14px;
    border:1px dashed var(--color-primary-light);
    background:var(--color-primary-lightest);
    color:var(--color-primary);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Add these styles for loading state and required checkbox */

._loadingContainer_1bhdc_4017 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
}

._spinner_1bhdc_3893 {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: _spin_1bhdc_3893 0.8s linear infinite;
}

@keyframes _spin_1bhdc_3893 {
    to {
        transform: rotate(360deg);
    }
}

._loadingContainer_1bhdc_4017 p {
    font-size: 13px;
    color: #6b7280;
}

._requiredCheckbox_1bhdc_3737 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

._requiredCheckbox_1bhdc_3737 input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

._requiredCheckbox_1bhdc_3737 span {
    user-select: none;
}

/* Option Input Row */
._optionInputRow_1bhdc_3907 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

._optionInput_1bhdc_3907 {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 12px;
    background: white;
}

._optionInput_1bhdc_3907:focus {
    outline: none;
    border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* Disabled button styles */
._questionActions_1bhdc_1177 button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

._questionActions_1bhdc_1177 button:disabled:hover {
    background: none;
    transform: none;
}

/* Error text */
._errorText_1bhdc_3725 {
    font-size: 10px;
    color: #ef4444;
    margin-top: 4px;
}

._errorInput_1bhdc_3715 {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* Date range */
._dateRange_1bhdc_3685 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._dateRange_1bhdc_3685 ._inputIcon_1bhdc_377 {
    flex: 1;
}

._dateRange_1bhdc_3685 span {
    color: #9ca3af;
    font-size: 12px;
}

._newQuestionBox_1bhdc_4241 {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

._questionTypePreview_1bhdc_4265 {
    width: fit-content;
    padding: 6px 12px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

._newQuestionInput_1bhdc_4285 {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

._newQuestionInput_1bhdc_4285:focus {
   border-color: var(--color-primary-light);
box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

._newQuestionActions_1bhdc_4315 {
    display: flex;
    gap: 10px;
}

._newQuestionActions_1bhdc_4315 button {
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

._newQuestionActions_1bhdc_4315 button:first-child {
   background: var(--gradient-primary);
box-shadow: var(--shadow-primary-sm);
color: var(--color-white);
}

._newQuestionActions_1bhdc_4315 button:first-child:hover {
    background: var(--gradient-primary);
box-shadow: var(--shadow-primary-sm);
color: var(--color-white);
}

._newQuestionActions_1bhdc_4315 button:last-child {
    background: #f3f4f6;
    color: #374151;
}

._newQuestionActions_1bhdc_4315 button:last-child:hover {
    background: #e5e7eb;
}

._builderLayout_1bhdc_885 {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 18px;
    padding: 18px;
    transition: all 0.3s ease;
    align-items: start;
}

._builderLayoutExpanded_1bhdc_4405 {
    grid-template-columns: 210px 360px 1fr;
}



._toolbox_1bhdc_897 {
    width: 100%;
    transition: all 0.3s ease;
}

._newQuestionBox_1bhdc_4241 {
    background: white;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    padding: 18px;
    animation: _fadeSlide_1bhdc_1 0.25s ease;
}

._questionArea_1bhdc_981 {
    min-width: 0;
}

@keyframes _fadeSlide_1bhdc_1 {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

._stepDotActive_1bhdc_4475 {
    background: #f59e0b;
    color: white;
}


._submitBtn_1bhdc_3449 {
   background: var(--gradient-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-primary-sm);
}

._ratingBtnActive_1bhdc_4499 {
    background: #f59e0b;
}

._npsBtnActive_1bhdc_4507 {
    background: #f59e0b;
}

._toggleOn_1bhdc_4515 {
    background: #f59e0b;
}

._checkBoxOn_1bhdc_4523 {
    background: #f59e0b;
    border-color: #f59e0b;
}

._dropIcon_1bhdc_4533 {
    color: #f59e0b;
}

._dropZone_1bhdc_4541:hover {
    border-color: #fbbf24;
    background: #fffbeb;
}

._sideProgressRing_1bhdc_4551 {
    stroke: #f59e0b;
}

._qNumBadge_1bhdc_4559 {
    background: #fffbeb;
    color: #d97706;
}

._sectionBanner_1bhdc_4569 {
    background:
        linear-gradient(135deg,
            #fffbeb 0%,
            #ffffff 100%);

    border: 1px solid #fde68a;
}

._sectionIcon_1bhdc_4587 {
    box-shadow: 0 4px 10px rgba(245, 158, 11, .12);
}



._starActive_1bhdc_4599 {
    color: #fbbf24;
}

._emptyPreview_1bhdc_4607 {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    color: #6b7280;
}

._emptyPreviewIcon_1bhdc_4629 {
    opacity: 0.7;
}

._emptyPreview_1bhdc_4607 h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

._emptyPreview_1bhdc_4607 p {
    font-size: 14px;
    margin: 0;
}

._requiredCheckbox_1bhdc_3737 {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

._requiredCheckbox_1bhdc_3737 label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #6b7280;
    user-select: none;
}

._requiredCheckbox_1bhdc_3737 input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

._requiredCheckbox_1bhdc_3737 input[type="checkbox"]:checked+span {
    accent-color: var(--color-primary);
    font-weight: 500;
}


._dropZone_1bhdc_4541 {
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

._dropZone_1bhdc_4541:hover {
    border-color: #fbbf24;
    background: #fffbeb;
}

._dropZoneDrag_1bhdc_4755 {
    border-color: #f59e0b;
    background: #fef3c7;
}

._dropIcon_1bhdc_4533 {
    color: #f59e0b;
    font-size: 22px;
}

._dropLabel_1bhdc_4775 {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

._dropHint_1bhdc_4787 {
    font-size: 10px;
    color: #9ca3af;
}


._questionTop_1bhdc_1011 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fafbfc;
  border-bottom: 1px solid #eef2f6;
}

._questionInfo_1bhdc_1029 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


._questionMeta_1bhdc_4835 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Badge on its own row */
._questionType_1bhdc_1037 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-primary);
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
  padding: 2px 9px;
  border-radius: 20px;
  
  white-space: nowrap;
}

/* Title on its own row below badge */
._questionMeta_1bhdc_4835 h4 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}


._questionControls_1bhdc_4907 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* Action buttons row */
._questionActions_1bhdc_1177 {
  display: flex;
  gap: 4px;
}._page_1hbtp_1 {
  padding: 20px;
  background: #f8fafc;
  min-height: 100vh;
}

/* Loading State */
._loadingContainer_1hbtp_15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 12px;
}

._spinner_1hbtp_33 {
  width: 32px;
  height: 32px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: _spin_1hbtp_33 0.8s linear infinite;
}

@keyframes _spin_1hbtp_33 {
  to {
    transform: rotate(360deg);
  }
}

/* Error State */
._errorContainer_1hbtp_65 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 12px;
  color: #64748b;
}

._errorContainer_1hbtp_65 h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

/* Header */
._header_1hbtp_99 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._headerLeft_1hbtp_121 {
  display: flex;
  gap: 12px;
  flex: 1;
}

._backBtn_1hbtp_133 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #64748b;
}

._backBtn_1hbtp_133:hover {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

._headerLeft_1hbtp_121 h1 {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px 0;
}

._description_1hbtp_187 {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

._headerActions_1hbtp_199 {
  display: flex;
  gap: 10px;
}

._editBtn_1hbtp_209,
._deleteBtn_1hbtp_211 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

._editBtn_1hbtp_209 {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
}

._editBtn_1hbtp_209:hover {
   box-shadow: var(--shadow-primary-md);
}

._deleteBtn_1hbtp_211 {
  background: #fee2e2;
  color: #dc2626;
}

._deleteBtn_1hbtp_211:hover {
  background: #fecaca;
}

/* Stats Grid */
._statsGrid_1hbtp_277 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

._statCard_1hbtp_291 {
  background: white;
  padding: 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._statIcon_1hbtp_311 {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._statContent_1hbtp_329 {
  flex: 1;
}

._statLabel_1hbtp_337 {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-bottom: 2px;
}

._statValue_1hbtp_351 {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

/* Two Column Layout */
._twoColumnLayout_1hbtp_365 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

/* Questions Section */
._questionsSection_1hbtp_379 {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._sectionHeader_1hbtp_393 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

._sectionHeader_1hbtp_393 h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

._questionCount_1hbtp_425 {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 16px;
}

._questionsList_1hbtp_441 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._questionCard_1hbtp_453 {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  transition: all 0.2s;
}

._questionCard_1hbtp_453:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

._questionHeader_1hbtp_477 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

._questionNumber_1hbtp_493 {
  width: 24px;
  height: 24px;
   background: var(--gradient-primary);
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

._questionType_1hbtp_519 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

._requiredBadge_1hbtp_541 {
  font-size: 9px;
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 6px;
  border-radius: 4px;
}

._questionText_1hbtp_557 {
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 12px;
}

._questionPreview_1hbtp_571 {
  background: #f8fafc;
  padding: 12px;
  border-radius: 6px;
}

/* Question Preview Styles */
._emojiRow_1hbtp_585 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._emojiOption_1hbtp_597 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._emoji_1hbtp_585 {
  font-size: 20px;
}

._emojiLabel_1hbtp_619 {
  font-size: 9px;
  color: #64748b;
}

._npsRow_1hbtp_629,
._ratingRow_1hbtp_631 {
  width: 100%;
}

._npsNumbers_1hbtp_639,
._ratingNumbers_1hbtp_641 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

._npsNumber_1hbtp_639,
._ratingNumber_1hbtp_641 {
  font-size: 10px;
  font-weight: 500;
  color: #0f172a;
  background: white;
  padding: 2px 6px;
  border-radius: 4px;
}

._npsLabels_1hbtp_673,
._ratingLabels_1hbtp_675 {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #64748b;
}

._optionsList_1hbtp_689 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._optionItem_1hbtp_701 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #0f172a;
}

._optionItem_1hbtp_701 input {
  margin: 0;
}

._yesNoRow_1hbtp_725 {
  display: flex;
  gap: 16px;
}

._yesNoLabel_1hbtp_735 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #0f172a;
}

._starsRow_1hbtp_751 {
  display: flex;
  gap: 6px;
}

._starIcon_1hbtp_761 {
 color: var(--color-primary);
  width: 16px;
  height: 16px;
}

._textPreview_1hbtp_773 input,
._textPreview_1hbtp_773 textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  background: white;
}

._textPreview_1hbtp_773 textarea {
  resize: vertical;
}

/* Info Section */
._infoSection_1hbtp_803 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._infoCard_1hbtp_815 {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

._infoCard_1hbtp_815 h4 {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

._infoRow_1hbtp_847 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

._infoLabel_1hbtp_861 {
  color: #64748b;
}

._infoValue_1hbtp_869 {
  color: #0f172a;
  font-weight: 500;
}

/* Employee List */
._employeeList_1hbtp_881 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._employeeItem_1hbtp_893 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  background: #f8fafc;
  border-radius: 8px;
}

._employeeAvatar_1hbtp_911 {
  width: 28px;
  height: 28px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

._employeeName_1hbtp_937 {
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
}

._moreEmployees_1hbtp_949 {
  font-size: 11px;
 color: var(--color-primary);
  background: var(--color-primary-lightest);
  padding: 6px;
  text-align: center;
  background: #fef3c7;
  border-radius: 6px;
}

._noData_1hbtp_969 {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  padding: 12px;
}

/* Action Buttons */
._actionButtons_1hbtp_985 {
  display: flex;
  gap: 10px;
}

._actionBtn_1hbtp_995 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 8px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

._actionBtn_1hbtp_995:hover {
 border-color: var(--color-primary-light);
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}

._statusBadge_1hbtp_1039 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
}

._backButton_1hbtp_1059 {
  padding: 6px 14px;
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
  ._twoColumnLayout_1hbtp_365 {
    grid-template-columns: 1fr;
  }

  ._statsGrid_1hbtp_277 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  ._page_1hbtp_1 {
    padding: 12px;
  }

  ._header_1hbtp_99 {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  ._headerActions_1hbtp_199 {
    width: 100%;
  }

  ._editBtn_1hbtp_209,
  ._deleteBtn_1hbtp_211 {
    flex: 1;
    justify-content: center;
  }

  ._statsGrid_1hbtp_277 {
    grid-template-columns: 1fr;
  }
}._page_1kqh5_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1kqh5_1 *,
._page_1kqh5_1 *::before,
._page_1kqh5_1 *::after {
  box-sizing: border-box;
}
/* Stats Accordion */
._statsAccordion_1kqh5_37 {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

._accordionHeader_1kqh5_49 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._accordionHeader_1kqh5_49:hover {
  background-color: #f9fafb;
}

._accordionTitle_1kqh5_75 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #374151;
  font-size: 11px;
}

._accordionTitle_1kqh5_75 svg {
  color: #f59e0b;
}

._accordionToggle_1kqh5_101 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

._accordionToggle_1kqh5_101:hover {
  color: #374151;
}

._statsGrid_1kqh5_131 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px 12px;
}

@media (max-width: 1100px) {
  ._statsGrid_1kqh5_131 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  ._statsGrid_1kqh5_131 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*Summary Cards */
._summaryCard_1kqh5_171 {
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

._summaryCard_1kqh5_171:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

._summaryTop_1kqh5_201 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._summaryIcon_1kqh5_213 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

._summaryIcon_1kqh5_213 svg {
  width: 12px;
  height: 12px;
}

._summaryTitle_1kqh5_247 {
  font-size: 9px;
  font-weight: 500;
  color: #475569;
  line-height: 1.3;
}

._summaryBottom_1kqh5_261 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}

._summaryValue_1kqh5_275 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

._sparklineWrap_1kqh5_287 {
  flex-shrink: 0;
}

._summaryTrend_1kqh5_295 {
  font-size: 8px;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._trendUp_1kqh5_313 {
  color: #16a34a;
}

._trendDown_1kqh5_321 {
  color: #dc2626;
}

._trendNeutral_1kqh5_329 {
  color: #94a3b8;
}

._summarySub_1kqh5_337 {
  font-size: 7px;
  color: #94a3b8;
  margin-top: 1px;
}

/* Layout */
._layout_1kqh5_351 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

._layoutMain_1kqh5_365 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* Table Section */
._tableSection_1kqh5_381 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1kqh5_399 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1kqh5_421 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1kqh5_435 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* Buttons */
._btn_1kqh5_449 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1kqh5_479 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1kqh5_479:hover {
  background: #f5c036;
  box-shadow: 0 2px 5px rgba(255, 202, 64, 0.3);
}

._btnSecondary_1kqh5_499 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1kqh5_499:hover {
  background: #f8fafc;
}

/* Search and Filter Bar */
._filterBar_1kqh5_521 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._searchWrapper_1kqh5_543 {
  position: relative;
  flex: 1;
  max-width: 260px;
}

._searchIcon_1kqh5_555 {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
}

._searchInput_1kqh5_573 {
  width: 100%;
  padding: 6px 8px 6px 28px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  background: white;
  height: 28px;
}

._searchInput_1kqh5_573:focus {
  outline: none;
  border-color: #ffca40;
  box-shadow: 0 0 0 2px rgba(255, 202, 64, 0.1);
}

._filterWrapper_1kqh5_605 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

._filterBadge_1kqh5_619 {
  background: #ffca40;
  color: #1e293b;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
}

/* Bulk Selection Bar */
._bulkSelectedBar_1kqh5_639 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._bulkSelectedLeft_1kqh5_661 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_1kqh5_673 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_1kqh5_701 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_1kqh5_713 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_1kqh5_725 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_1kqh5_755 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1kqh5_755:hover {
  background: #fef2f2;
}

._bulkDeselect_1kqh5_773 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_1kqh5_773:hover {
  background: #f1f5f9;
}

/* Badge */
._badge_1kqh5_811 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* Survey Name Cell */
._surveyNameCell_1kqh5_835 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._surveyName_1kqh5_835 {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

._surveyDesc_1kqh5_859 {
  font-size: 9px;
  color: #64748b;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Assigned Cell */
._assignedCell_1kqh5_879 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._assignedCount_1kqh5_891 {
  font-weight: 500;
  font-size: 12px;
  color: #334155;
}

/* Response Rate Cell */
._responseRateCell_1kqh5_905 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._rateValue_1kqh5_917 {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

._rateDetail_1kqh5_929 {
  font-size: 9px;
  color: #64748b;
}

/* Created By Cell */
._createdByCell_1kqh5_941 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._avatar_1kqh5_953 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

._createdByName_1kqh5_977 {
  font-weight: 500;
  font-size: 11px;
  color: #1e293b;
}

._createdByRole_1kqh5_989 {
  font-size: 9px;
  color: #64748b;
}

/* Deadline Cell */
._deadlineCell_1kqh5_1001 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._deadlineDate_1kqh5_1013 {
  font-size: 11px;
  font-weight: 500;
  color: #334155;
}

._deadlineDays_1kqh5_1025 {
  font-size: 9px;
}

._deadlineUrgent_1kqh5_1033 {
  color: #f97316;
}

._deadlineOverdue_1kqh5_1041 {
  color: #dc2626;
}

._deadlineClosed_1kqh5_1049 {
  font-size: 9px;
  color: #94a3b8;
}

/* Progress Cell */
._progressCell_1kqh5_1061 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 90px;
}

._progressBar_1kqh5_1075 {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

._progressFill_1kqh5_1091 {
  height: 100%;
  background: #ffca40;
  border-radius: 4px;
  transition: width 0.3s ease;
}

._progressValue_1kqh5_1105 {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  min-width: 35px;
  text-align: right;
}

._textMuted_1kqh5_1121 {
  color: #94a3b8;
  font-size: 10px;
}

/* questionBody etc */
._questionBody_1kqh5_1133 {
  padding: 16px 20px 20px 44px;
  border-top: 1px solid #f0f2f5;
  background: #ffffff;
}

._questionBody_1kqh5_1133 ._emojiRow_1kqh5_1145,
._questionBody_1kqh5_1133 ._npsRow_1kqh5_1147,
._questionBody_1kqh5_1133 ._ratingRow_1kqh5_1149,
._questionBody_1kqh5_1133 ._optionsRow_1kqh5_1151,
._questionBody_1kqh5_1133 ._textInputPreview_1kqh5_1153,
._questionBody_1kqh5_1133 ._yesNoRow_1kqh5_1155,
._questionBody_1kqh5_1133 ._starsRow_1kqh5_1157 {
  opacity: 0.8;
}

._questionBody_1kqh5_1133 ._emojiRow_1kqh5_1145 ._emoji_1kqh5_1145 {
  font-size: 20px;
}

._questionBody_1kqh5_1133 ._npsNumber_1kqh5_1173 {
  font-size: 11px;
  width: 28px;
  height: 28px;
}

._questionBody_1kqh5_1133 ._ratingNumber_1kqh5_1185 {
  font-size: 13px;
  width: 36px;
  height: 36px;
}

._questionBody_1kqh5_1133 ._optionLabel_1kqh5_1197 input:disabled,
._questionBody_1kqh5_1133 ._textInputPreview_1kqh5_1153 input:disabled,
._questionBody_1kqh5_1133 ._textInputPreview_1kqh5_1153 textarea:disabled {
  background: #fafbfc;
  cursor: default;
}

._questionCard_1kqh5_1211 {
  transition: all 0.2s ease;
  margin-bottom: 16px;
}

._questionCard_1kqh5_1211:hover {
  border-color: #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

._npsNumbers_1kqh5_1231 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

@media (max-width: 1250px) {
  ._npsNumbers_1kqh5_1231 {
    gap: 0;
  }
}

/* Banner */
._bannerWrapper_1kqh5_1259 {
  width: 100%;
}

._bannerImage_1kqh5_1267 {
  width: 100%;
  height: auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
}

._bannerMetaRow_1kqh5_1283 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

._bannerMetricCard_1kqh5_1295 {
  background: white;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  flex: 1;
  min-width: 120px;
}

._metricLabel_1kqh5_1313 {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

._metricRow_1kqh5_1327 {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 4px;
}

._metricValue_1kqh5_1341 {
  font-size: 22px;
  font-weight: 800;
  color: #1e1b4b;
}

._metricSub_1kqh5_1353 {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

._metricEmoji_1kqh5_1365 {
  font-size: 18px;
  margin-left: 4px;
}

._emojiFeedbackRow_1kqh5_1375 {
  display: flex;
  gap: 8px;
  font-size: 20px;
  margin-top: 6px;
}

._pulseRingWrap_1kqh5_1389 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

._pulsePositive_1kqh5_1405 {
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
}

._rewardCardInner_1kqh5_1417 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._rewardTopRow_1kqh5_1429 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

._rewardBigVal_1kqh5_1443 {
  font-size: 20px;
  font-weight: 800;
  color: #ea580c;
}

._rewardTrendText_1kqh5_1455 {
  font-size: 9px;
  color: #16a34a;
  font-weight: 600;
}

._participRowInner_1kqh5_1467 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

._participSmLabel_1kqh5_1481 {
  font-size: 9px;
  color: #64748b;
}

._participBigVal_1kqh5_1491 {
  font-size: 14px;
  font-weight: 800;
  color: #1e1b4b;
}

._participBigVal_1kqh5_1491 span {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 400;
}




._mainContent_1kqh5_1521 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

._sectionHeader_1kqh5_1535 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


._surveyCardsGrid_1kqh5_1549 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: 1fr;
  }
}

._surveyCard_1kqh5_1549 {
  background: white;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s;
}

._surveyCard_1kqh5_1549:hover {
  border-color: #a5b4fc;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
}

._surveyCardHeader_1kqh5_1617 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._surveyCardInfo_1kqh5_1629 {
  flex: 1;
  min-width: 0;
}

._surveyCardName_1kqh5_1639 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 3px;
}

._surveyCardDesc_1kqh5_1655 {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._moreBtn_1kqh5_1675 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

._moreBtn_1kqh5_1675:hover {
  color: #374151;
}

._surveyCardMeta_1kqh5_1705 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._categoryPill_1kqh5_1717 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
}

._surveyCardFooterMeta_1kqh5_1737 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._metaItem_1kqh5_1749 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #64748b;
}

._surveyProgressRow_1kqh5_1765 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._progressBarWrap_1kqh5_1777 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

._progressBarTrack_1kqh5_1791 {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

._progressBarFill_1kqh5_1807 {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 4px;
  transition: width 0.4s ease;
}

._progressLabel_1kqh5_1821 {
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  min-width: 24px;
  text-align: right;
}

._surveyCardActions_1kqh5_1837 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

._pointsBadge_1kqh5_1851 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #ea580c;
  background: #fff7ed;
  padding: 2px 8px;
  border-radius: 9999px;
}

._anonBadge_1kqh5_1875 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #64748b;
}

._surveyBtn_1kqh5_1891 {
  margin-left: auto;
  height: 28px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

._surveyBtnStart_1kqh5_1915 {
  background: #4f46e5;
  color: white;
}

._surveyBtnStart_1kqh5_1915:hover {
  background: #4338ca;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

._surveyBtnContinue_1kqh5_1935 {
  background: linear-gradient(90deg, #16a34a, #15803d);
  color: white;
}

._surveyBtnContinue_1kqh5_1935:hover {
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3);
}


._surveyIconSmall_1kqh5_1955 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._categoryPillSm_1kqh5_1975 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

._dateCell_1kqh5_1997 {
  font-size: 11px;
  color: #334155;
}

._timeCell_1kqh5_2007 {
  font-size: 11px;
  color: #334155;
}

._badgePill_1kqh5_2017 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

._pointsCell_1kqh5_2041 {
  font-size: 11px;
  font-weight: 600;
  color: #ea580c;
}

._certificateCell_1kqh5_2053 {
  display: flex;
  align-items: center;
}

._statusCompleted_1kqh5_2063 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 9999px;
}

._certBtn_1kqh5_2087 {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: #4f46e5;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}

._certBtn_1kqh5_2087:hover {
  background: #f0f0ff;
  border-color: #a5b4fc;
}

/* ── Sidebar ── */

._sideCard_1kqh5_2125 {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
}

._sideCardTitleRow_1kqh5_2139 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

._sideCardTitle_1kqh5_2139 {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

._sideCardText_1kqh5_2165 {
  font-size: 10px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

._timerDisplay_1kqh5_2179 {
  font-size: 20px;
  font-weight: 800;
  color: #1e1b4b;
  letter-spacing: 0.02em;
}

._timerDue_1kqh5_2193 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

._rewardPointsBig_1kqh5_2205 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._rewardGiftIcon_1kqh5_2217 {
  font-size: 22px;
}

._rewardPointsVal_1kqh5_2225 {
  font-size: 15px;
  font-weight: 800;
  color: #ea580c;
}

._rewardPointsSub_1kqh5_2237 {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 2px;
}

._hrProfile_1kqh5_2251 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._hrAvatar_1kqh5_2265 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._hrName_1kqh5_2293 {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

._hrRole_1kqh5_2305 {
  font-size: 9px;
  color: #64748b;
}

._hrContact_1kqh5_2315 {
  font-size: 10px;
  color: #4f46e5;
  margin-top: 3px;
}

._aiDot_1kqh5_2327 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4f46e5;
  flex-shrink: 0;
}

._aiChat_1kqh5_2343 {
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

._aiChatBubble_1kqh5_2357 {
  font-size: 10px;
  color: #374151;
  line-height: 1.5;
  font-style: italic;
}

._aiInputRow_1kqh5_2371 {
  display: flex;
  gap: 6px;
}

._aiInput_1kqh5_2371 {
  flex: 1;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 10px;
  background: #f8fafc;
}

._aiInput_1kqh5_2371:focus {
  outline: none;
  border-color: #a5b4fc;
}

._aiSendBtn_1kqh5_2411 {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._aiSendBtn_1kqh5_2411:hover {
  background: #4338ca;
}

._stepRow_1kqh5_2447 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

._stepName_1kqh5_2461 {
  font-size: 13px;
  font-weight: 700;
  color: #1e1b4b;
}

._stepSub_1kqh5_2473 {
  font-size: 9px;
  color: #94a3b8;
}

._stepCount_1kqh5_2483 {
  font-size: 18px;
  font-weight: 800;
  color: #4f46e5;
  margin-bottom: 4px;
}

._estimatedTime_1kqh5_2497 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
  ._page_1kqh5_1 {
    padding: 8px 10px;
  }

  ._statsGrid_1kqh5_131 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._filterBar_1kqh5_521 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchWrapper_1kqh5_543 {
    max-width: 100%;
  }

  ._tableHeader_1kqh5_399 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._summaryValue_1kqh5_275 {
    font-size: 16px;
  }

  ._summaryCard_1kqh5_171 {
    padding: 8px 10px;
  }

  ._bannerMetaRow_1kqh5_1283 {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  ._statsGrid_1kqh5_131 {
    grid-template-columns: 1fr;
  }

  ._summaryIcon_1kqh5_213 {
    width: 24px;
    height: 24px;
  }

  ._summaryValue_1kqh5_275 {
    font-size: 14px;
  }
}

._surveyCardsGrid_1kqh5_1549 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1200px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: 1fr;
  }
}


._surveyCard_1kqh5_1549 {
  background: #ffffff;

  border: 1px solid #eceff5;

  border-radius: 14px;

  padding: 14px;

  display: flex;
  flex-direction: column;

  gap: 12px;

  transition: 0.2s ease;

  position: relative;

  overflow: hidden;
}

._surveyCard_1kqh5_1549:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.05);
}


._surveyCardHeader_1kqh5_1617 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ICON */

._surveyIconSmall_1kqh5_1955 {
  width: 42px;
  height: 42px;

  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}


._surveyCardInfo_1kqh5_1629 {
  flex: 1;
}

._surveyCardName_1kqh5_1639 {
  font-size: 12px;
  font-weight: 700;

  color: #111827;

  line-height: 1.4;

  margin-bottom: 3px;
}

._surveyCardDesc_1kqh5_1655 {
  font-size: 10px;
  line-height: 1.5;

  color: #6b7280;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* MORE */

._moreBtn_1kqh5_1675 {
  border: none;
  background: transparent;

  color: #9ca3af;

  cursor: pointer;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

._moreBtn_1kqh5_1675:hover {
  color: #374151;
}


._categoryPill_1kqh5_1717 {
  width: fit-content;

  height: 20px;

  padding: 0 8px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;

  font-size: 9px;
  font-weight: 700;
}


._surveyCardFooterMeta_1kqh5_1737 {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: -4px;
}

._metaItem_1kqh5_1749 {
  display: flex;
  align-items: center;
  gap: 4px;

  font-size: 10px;
  color: #6b7280;
}

._surveyProgressRow_1kqh5_1765 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

._progressBarWrap_1kqh5_1777 {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 8px;
}

._progressBarTrack_1kqh5_1791 {
  flex: 1;

  height: 6px;

  background: #eceff5;

  border-radius: 999px;

  overflow: hidden;
}

._progressBarFill_1kqh5_1807 {
  height: 100%;

  background:
    linear-gradient(90deg,
      #6d5efc 0%,
      #4f46e5 100%);

  border-radius: 999px;
}

._progressLabel_1kqh5_1821 {
  font-size: 10px;
  font-weight: 700;

  color: #6b7280;

  min-width: 26px;
}

._surveyCardActions_1kqh5_1837 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 2px;
}

/* POINTS */

._pointsBadge_1kqh5_1851 {
  display: flex;
  align-items: center;
  gap: 4px;

  font-size: 9px;
  font-weight: 700;

  color: #7c3aed;

  background: #f3f0ff;

  padding: 4px 8px;

  border-radius: 999px;
}

/* ANON */

._anonBadge_1kqh5_1875 {
  display: flex;
  align-items: center;
  gap: 4px;

  font-size: 9px;

  color: #6b7280;
}

/* BUTTON */

._surveyBtn_1kqh5_1891 {
  margin-left: auto;

  height: 30px;

  padding: 0 16px;

  border: none;

  border-radius: 8px;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;
}

/* START */

._surveyBtnStart_1kqh5_1915 {
  background:
    linear-gradient(90deg,
      #6d5efc 0%,
      #4f46e5 100%);

  color: white;
}

._surveyBtnStart_1kqh5_1915:hover {
  opacity: 0.95;
}

/* CONTINUE */

._surveyBtnContinue_1kqh5_1935 {
  background:
    linear-gradient(90deg,
      #65c466 0%,
      #45b649 100%);

  color: white;
}

._surveyBtnContinue_1kqh5_1935:hover {
  opacity: 0.95;
}

._surveyCardActions_1kqh5_1837 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: auto;

  flex-wrap: wrap;
}

/* BUTTON */

._surveyBtn_1kqh5_1891 {
  width: 100%;

  height: 32px;

  border: none;

  border-radius: 8px;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 8px;
}

/* START */

._surveyBtnStart_1kqh5_1915 {
  background:
    linear-gradient(90deg,
      #6d5efc 0%,
      #4f46e5 100%);

  color: white;
}

._surveyBtnStart_1kqh5_1915:hover {
  opacity: 0.95;
}

/* CONTINUE */

._surveyBtnContinue_1kqh5_1935 {
  background:
    linear-gradient(90deg,
      #67c23a 0%,
      #4caf50 100%);

  color: white;
}

._surveyBtnContinue_1kqh5_1935:hover {
  opacity: 0.95;
}

._mainLayout_1kqh5_3331 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

._mainContent_1kqh5_1521 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

._sectionHeader_1kqh5_1535 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

._sectionTitle_1kqh5_421 {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
}

._sectionSub_1kqh5_435 {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}


._surveyCardsGrid_1kqh5_1549 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

/* Responsive  */
@media (max-width: 1200px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 900px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 560px) {
  ._surveyCardsGrid_1kqh5_1549 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


._surveyCard_1kqh5_1549 {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e9edf2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

._surveyCard_1kqh5_1549:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #d1d9e8;
}


._surveyCardHeader_1kqh5_1617 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Survey Icon */
._surveyIconSmall_1kqh5_1955 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f3f0ff;
  color: #7c3aed;
}

._surveyCardInfo_1kqh5_1629 {
  flex: 1;
  min-width: 0;
}

._surveyCardName_1kqh5_1639 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._surveyCardDesc_1kqh5_1655 {
  font-size: 10px;
  line-height: 1.45;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


._surveyCardMeta_1kqh5_1705 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

._categoryPill_1kqh5_1717 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: #f3f0ff;
  color: #7c3aed;
  width: fit-content;
}

._surveyCardFooterMeta_1kqh5_1737 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

._metaItem_1kqh5_1749 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #6c757d;
  font-weight: 500;
}

._metaItem_1kqh5_1749 svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Progress row */
._surveyProgressRow_1kqh5_1765 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

._progressBarWrap_1kqh5_1777 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

._progressBarTrack_1kqh5_1791 {
  flex: 1;
  height: 6px;
  background: #e9edf2;
  border-radius: 10px;
  overflow: hidden;
}

._progressBarFill_1kqh5_1807 {
  height: 100%;
  background: linear-gradient(90deg, #6d5efc, #4f46e5);
  border-radius: 10px;
  transition: width 0.25s ease;
}

._progressLabel_1kqh5_1821 {
  font-size: 10px;
  font-weight: 700;
  color: #4b5563;
  min-width: 36px;
  text-align: right;
}


._progressRingWrap_1kqh5_3769 {
  flex-shrink: 0;
}

/* Action Buttons */
._surveyCardActions_1kqh5_1837 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

._surveyBtn_1kqh5_1891 {
  flex: 1;
  height: 36px;
  border: none;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #4f46e5;
  color: white;
}

._surveyBtnStart_1kqh5_1915 {
  background: linear-gradient(90deg, #6d5efc, #4f46e5);
  color: white;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
}

._surveyBtnStart_1kqh5_1915:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

._surveyBtnContinue_1kqh5_1935 {
  background: linear-gradient(90deg, #10b981, #059669);
  color: white;
}

._surveyBtnContinue_1kqh5_1935:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

._surveyBtn_1kqh5_1891:active {
  transform: translateY(0);
}

/* No surveys message alignment */
._noSurveysMessage_1kqh5_3883 {
  grid-column: 1 / -1;
  background: #f9fafb;
  border-radius: 20px;
  padding: 48px 20px;
  text-align: center;
  color: #6c757d;
  font-size: 13px;
  border: 1px dashed #cbd5e1;
}


._sectionHeader_1kqh5_1535 + ._surveyCardsGrid_1kqh5_1549 {
  margin-top: 4px;
}


._deadlineUrgent_1kqh5_1033 {
  color: #f97316;
  font-weight: 600;
}

._deadlineOverdue_1kqh5_1041 {
  color: #dc2626;
  font-weight: 600;
}


@keyframes _subtlePulse_1kqh5_1 {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}


._page_1kqh5_1 {
  padding: 10px 14px;
}


._mainContent_1kqh5_1521 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


@media (max-width: 480px) {
  ._surveyCard_1kqh5_1549 {
    padding: 14px;
  }
  
  ._surveyCardName_1kqh5_1639 {
    font-size: 12px;
  }
  
  ._surveyBtn_1kqh5_1891 {
    height: 34px;
    font-size: 10px;
  }
  
  ._metaItem_1kqh5_1749 {
    font-size: 9px;
  }
}/* StartSurvey.module.css */

._modalOverlay_1osh2_5 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: _fadeIn_1osh2_1 0.2s ease;
}

@keyframes _fadeIn_1osh2_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

._modalContainer_1osh2_55 {
    background: white;
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: _slideUp_1osh2_1 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes _slideUp_1osh2_1 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

._modalHeader_1osh2_103 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eef2f6;
    background: linear-gradient(135deg, #f59e0b10, #fbbf2410);
    border-radius: 20px 20px 0 0;
}

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

._modalIcon_1osh2_135 {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

._modalHeaderLeft_1osh2_123 h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
}

._modalHeaderLeft_1osh2_123 p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

._modalClose_1osh2_183 {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.2s;
}

._modalClose_1osh2_183:hover {
    background: #e5e7eb;
    color: #ef4444;
}

._modalContent_1osh2_221 {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

._previewHeader_1osh2_233 {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f2f5;
}

._previewHeader_1osh2_233 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

._previewHeader_1osh2_233 p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

._previewMeta_1osh2_275 {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: #f59e0b;
}

._previewMeta_1osh2_275 span {
    display: flex;
    align-items: center;
    gap: 6px;
}

._progressBar_1osh2_303 {
    height: 4px;
    background: #eef2f6;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

._progressFill_1osh2_319 {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 2px;
    transition: width 0.3s ease;
}

._progressText_1osh2_333 {
    text-align: right;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 24px;
}

._previewQuestions_1osh2_347 {
    margin-top: 20px;
}

._previewQuestionCard_1osh2_355 {
    background: #fafbfc;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #eef2f6;
}

._previewQuestionHeader_1osh2_369 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

._previewQuestionNumber_1osh2_385 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

._previewQuestionType_1osh2_403 {
    background: #f3f4f6;
    color: #4b5563;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
}

._previewRequired_1osh2_423 {
    color: #ef4444;
    font-size: 11px;
    font-weight: 500;
}

._previewQuestionText_1osh2_435 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Emoji Feedback Styles */
._emojiRow_1osh2_453 {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 12px;
    flex-wrap: wrap;
}

._emojiBtn_1osh2_469 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

._emojiBtn_1osh2_469:hover {
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

._emojiBtnActive_1osh2_507 {
    border-color: #f59e0b;
    background: #fffbeb;
    transform: scale(1.02);
}

._emojiGlyph_1osh2_519 {
    font-size: 32px;
}

._emojiLabel_1osh2_527 {
    font-size: 12px;
    color: #4b5563;
}

/* NPS Score Styles */
._npsRow_1osh2_539 {
    padding: 12px;
}

._npsNumbers_1osh2_547 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

._npsBtn_1osh2_563 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    border: none;
    background: white;
}

._npsBtn_1osh2_563:hover {
    background: #fef3c7;
    transform: scale(1.05);
}

._npsBtnActive_1osh2_605 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    transform: scale(1.05);
}

._npsLabels_1osh2_617 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    padding: 0 8px;
}

/* Rating Scale Styles */
._ratingRow_1osh2_635 {
    padding: 12px;
}

._ratingNumbers_1osh2_643 {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

._ratingBtn_1osh2_659 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 16px;
    font-weight: 700;
    color: #f59e0b;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s;
    background: #fef3c7;
    border: none;
}

._ratingBtn_1osh2_659:hover {
    background: #fbbf24;
    color: white;
    transform: scale(1.05);
}

._ratingBtnActive_1osh2_703 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    transform: scale(1.05);
}

._ratingLabels_1osh2_715 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9ca3af;
    padding: 0 8px;
}

/* Multiple Choice & Checkbox Styles */
._optionsRow_1osh2_733 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._optionLabel_1osh2_745 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 0.2s;
}

._optionLabel_1osh2_745:hover {
    background: #fef3c7;
}

._optionLabel_1osh2_745 input {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
}

/* Text Input & Paragraph Styles */
._textInputPreview_1osh2_795 textarea,
._textInputPreview_1osh2_795 input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

._textInputPreview_1osh2_795 textarea:focus,
._textInputPreview_1osh2_795 input:focus {
    outline: none;
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Yes/No Styles */
._yesNoRow_1osh2_833 {
    display: flex;
    gap: 24px;
    padding: 12px;
}

._yesNoLabel_1osh2_845 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

._yesNoLabel_1osh2_845 input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #f59e0b;
}

/* Star Rating Styles */
._starsRow_1osh2_877 {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
}

._starIcon_1osh2_891 {
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}

._starIcon_1osh2_891:hover {
    transform: scale(1.1);
    color: #fbbf24;
}

._starFilled_1osh2_913 {
    color: #fbbf24;
    fill: #fbbf24;
}

/* Footer Buttons */
._modalFooter_1osh2_925 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eef2f6;
    background: #fafbfc;
    border-radius: 0 0 20px 20px;
}

._previousBtn_1osh2_945,
._nextBtn_1osh2_947,
._submitBtn_1osh2_949 {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

._previousBtn_1osh2_945 {
    background: #f3f4f6;
    color: #4b5563;
}

._previousBtn_1osh2_945:hover:not(:disabled) {
    background: #e5e7eb;
}

._previousBtn_1osh2_945:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._nextBtn_1osh2_947,
._submitBtn_1osh2_949 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #111827;
}

._nextBtn_1osh2_947:hover:not(:disabled),
._submitBtn_1osh2_949:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

._nextBtn_1osh2_947:disabled,
._submitBtn_1osh2_949:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Thank You Screen */
._thankYouContainer_1osh2_1043 {
    background: white;
    border-radius: 24px;
    width: 400px;
    max-width: 90%;
    animation: _slideUp_1osh2_1 0.3s ease;
}

._thankYouContent_1osh2_1059 {
    text-align: center;
    padding: 48px 32px;
}

._thankYouIcon_1osh2_1069 {
    color: #10b981;
    margin-bottom: 16px;
    animation: _checkmark_1osh2_1 0.5s ease;
}

@keyframes _checkmark_1osh2_1 {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

._thankYouContent_1osh2_1059 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

._thankYouContent_1osh2_1059 p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Loading State */
._loadingContainer_1osh2_1133 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

._spinner_1osh2_1151 {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: _spin_1osh2_1151 0.8s linear infinite;
}

@keyframes _spin_1osh2_1151 {
    to {
        transform: rotate(360deg);
    }
}

._loadingContainer_1osh2_1133 p {
    font-size: 13px;
    color: #6b7280;
}

/* Error State */
._errorContainer_1osh2_1193 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    text-align: center;
    padding: 32px;
}

._errorContainer_1osh2_1193 svg {
    color: #ef4444;
}

._errorContainer_1osh2_1193 p {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

._publishBtn_1osh2_1235 {
    padding: 10px 24px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #111827;
    transition: all 0.2s;
    margin-top: 8px;
}

._publishBtn_1osh2_1235:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Empty Preview */
._emptyPreview_1osh2_1273 {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    color: #6b7280;
}

._emptyPreview_1osh2_1273 svg {
    opacity: 0.7;
}

._emptyPreview_1osh2_1273 h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

._emptyPreview_1osh2_1273 p {
    font-size: 14px;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    ._modalContainer_1osh2_55 {
        width: 95%;
        max-height: 90vh;
    }

    ._modalContent_1osh2_221 {
        padding: 16px;
    }

    ._previewHeader_1osh2_233 h2 {
        font-size: 18px;
    }

    ._previewQuestionCard_1osh2_355 {
        padding: 16px;
    }

    ._modalFooter_1osh2_925 {
        flex-direction: column;
    }

    ._previousBtn_1osh2_945,
    ._nextBtn_1osh2_947,
    ._submitBtn_1osh2_949 {
        width: 100%;
        justify-content: center;
    }

    ._npsBtn_1osh2_563 {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    ._ratingBtn_1osh2_659 {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    ._emojiGlyph_1osh2_519 {
        font-size: 24px;
    }

    ._emojiBtn_1osh2_469 {
        padding: 8px 12px;
    }

    ._emojiLabel_1osh2_527 {
        font-size: 10px;
    }

    ._starsRow_1osh2_877 {
        gap: 8px;
    }

    ._starIcon_1osh2_891 {
        width: 24px;
        height: 24px;
    }
}

/* Animation for question transitions */
._previewQuestionCard_1osh2_355 {
    animation: _fadeSlideUp_1osh2_1 0.4s ease-out;
}

@keyframes _fadeSlideUp_1osh2_1 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar styling */
._modalContent_1osh2_221::-webkit-scrollbar {
    width: 6px;
}

._modalContent_1osh2_221::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

._modalContent_1osh2_221::-webkit-scrollbar-thumb {
    background: #fbbf24;
    border-radius: 3px;
}

._modalContent_1osh2_221::-webkit-scrollbar-thumb:hover {
    background: #f59e0b;
}

/* File Upload */

._fileUploadWrapper_1osh2_1531 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._fileUploadBox_1osh2_1543 {
    position: relative;
    border: 2px dashed #fbbf24;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    background: #fffbeb;
    transition: all 0.25s ease;
    cursor: pointer;
}

._fileUploadBox_1osh2_1543:hover {
    border-color: #f59e0b;
    background: #fef3c7;
}

._fileUploadInput_1osh2_1575 {
    width: 100%;
    cursor: pointer;
}

._fileUploadText_1osh2_1585 {
    margin-top: 10px;
    font-size: 13px;
    color: #6b7280;
}

._fileUploadIcon_1osh2_1597 {
    font-size: 40px;
    color: #f59e0b;
    margin-bottom: 10px;
}

._uploadSuccess_1osh2_1609 {
    padding: 10px 14px;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #10b981;
    color: #065f46;
    font-size: 13px;
    font-weight: 500;
}

._imagePreviewContainer_1osh2_1629 {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

._imagePreview_1osh2_1629 {
    max-width: 250px;
    max-height: 180px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

._fileName_1osh2_1659 {
    margin-top: 8px;
    font-size: 12px;
    color: #4b5563;
    word-break: break-word;
}

._uploadLoader_1osh2_1673 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 500;
}

._uploadLoader_1osh2_1673::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #fbbf24;
    border-top-color: transparent;
    border-radius: 50%;
    animation: _uploadSpin_1osh2_1 0.8s linear infinite;
}

@keyframes _uploadSpin_1osh2_1 {
    to {
        transform: rotate(360deg);
    }
}

._dropZone_1osh2_1723 {
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: #fff;
}

._dropZone_1osh2_1723:hover {
    border-color: #fbbf24;
    background: #fffbeb;
}

._dropIcon_1osh2_1761 {
    font-size: 28px;
    color: #f59e0b;
}

._dropLabel_1osh2_1771 {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

._dropHint_1osh2_1783 {
    font-size: 11px;
    color: #9ca3af;
}

._imagePreviewWrapper_1osh2_1793 {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

._imagePreview_1osh2_1629 {
    width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}:root {
  /* Brand */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-primary-bg: #eef2ff;
  --color-background: linear-gradient(
    90deg,
    #ece9ff 0%,
    #c5c8fc 80%,
    #fedf81 100%
  );
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-light),
    var(--color-primary)
  );
  --color-success: #10b981;
  --color-success-light: #6ee7b7;
  --color-success-bg: #ecfdf5;
  --color-primary: #f59e0b;
  --color-primary-light: #fbbf24;
  --color-warning: #f59e0b;
  --color-warning-light: #fcd34d;
  --color-warning-bg: #fffbeb;

  --color-danger: #ef4444;
  --color-danger-light: #fca5a5;
  --color-danger-bg: #fef2f2;

  --color-info: #3b82f6;
  --color-info-light: #93c5fd;
  --color-info-bg: #eff6ff;

  --color-purple: #8b5cf6;
  --color-purple-bg: #f5f3ff;

  --color-teal: #14b8a6;
  --color-teal-bg: #f0fdfa;

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg: #f8f9ff;
  --color-bg1: #f6f8fa;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* Category accent colors */
  --color-java: #f97316;
  --color-sql: #3b82f6;
  --color-react: #06b6d4;
  --color-aws: #f59e0b;
  --color-hr: #10b981;
  --color-ai: #8b5cf6;
  --color-cyber: #6366f1;

  /* Misc */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(99, 102, 241, 0.12);

  --transition: 250ms ease;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  background: var(--color-bg);
  font-size: 14px;
}

/* ============================================================
   DASHBOARD WRAPPER
   ============================================================ */
._dashboard_1yo43_171 {
  background: var(--color-bg);
  padding: 6px;
}

/* ============================================================
   HERO BANNER
   ============================================================ */
._hero_1yo43_187 {
  background: var(--color-background);
  border-radius: var(--radius-sm);
  padding: 2px 28px;
  position: relative;
  overflow: hidden;
  min-height: 160px;
}

._hero_1yo43_187::before {
  content: "";
  position: absolute;
  top: -50px;
  right: 240px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

/* hero title / subtitle */
._heroTitle_1yo43_231 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}
._heroSubtitle_1yo43_243 {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

._labelCard_1yo43_255 {
  background: var(--color-bg1);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  gap: 12px;
  /* align-items: stretch; */
}
._featureLabel_1yo43_271 {
  font-size: 10px;
  font-weight: 600;
  color: #111827;
}
._featureCard_1yo43_281 {
  display: flex;
  align-items: center;
}
._featureSub_1yo43_289 {
  font-size: 10px;
  color: #6b7280;
}
._featureIcon_1yo43_297 {
  font-size: 20px;
  width: 28px; /*  gives consistent alignment space */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
._featureLabel_1yo43_271,
._featureSub_1yo43_289 {
  line-height: 1.2; /*  removes vertical drift */
  margin: 0;
}
/* feature pill */
/* ============================================================
   FLOATING CARDS WRAPPER & STRUCTURAL BASE
   ============================================================ */
._floatCardBase_1yo43_333 {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 25px rgba(163, 177, 198, 0.25);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
  min-width: 160px;
  text-align: left;
}

/* Floating speech bubble pointers */
._pointerBottom_1yo43_369::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 28px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.85) transparent transparent transparent;
}
/* Floating speech bubble pointers */
._pointerBottom1_1yo43_389::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 28px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.85) transparent transparent transparent;
}
._pointerTop_1yo43_407::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 28px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.85) transparent;
}

/* Exact layout positioning onto the hero banner area */
._floatCardUiUx_1yo43_429 {
  /* composes: floatCardBase; */
  top: 10px;
  left: 8%;
}

._floatCardAws_1yo43_441 {
  top: 10%;
  left: 52%;
}

._floatCertificateLeft_1yo43_453 {
  bottom: 12%;
  left: 1%;
  min-width: 110px;
  padding: 6px 12px;
}

._floatCertificateCenter_1yo43_469 {
  bottom: 8%;
  left: 44%;
  min-width: 110px;
  padding: 6px 12px;
}

/* AI Floating Banner Placement (Bottom Right) */
._floatAiAssistant_1yo43_487 {
  position: absolute;
  bottom: 8%;
  right: 4%;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  color: var(--color-white);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
  z-index: 5;
  min-width: 240px;
  text-align: left;
}

._badgeAi_1yo43_515 {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  font-size: 9px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
}

/* Inside Typography & Track Adjustments */
._floatTitleText_1yo43_537 {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

._floatSubText_1yo43_551 {
  font-size: 9px;
  color: var(--color-text-secondary);
  margin: 0;
}

._innerProgressContainer_1yo43_563 {
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-light);
  overflow: hidden;
  width: 100%;
}

._pctText_1yo43_579 {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-primary);
}
/* Wrapper */
._heroWrapper_1yo43_591 {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

._heroImage_1yo43_603 {
  max-width: 250px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
}

/* Common Floating Card Style */
._floatCardUiUx_1yo43_429,
._floatCardAws_1yo43_441,
._floatCertificateLeft_1yo43_453,
._floatCertificateCenter_1yo43_469 {
  position: absolute;
  background: #ffffff;
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 2;
  min-width: 170px;
}

/* UI/UX Card */
._floatCardUiUx_1yo43_429 {
  top: 1%;
  left: -120px;
}

/* AWS Card */
._floatCardAws_1yo43_441 {
  top: 10%;
  right: -40px;
  margin-left: 25px;
}

/* Left Certificate */
._floatCertificateLeft_1yo43_453 {
  bottom: 22%;
  left: -150px;
}

/* Bottom Center Certificate */
._floatCertificateCenter_1yo43_469 {
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Text */
._floatTitleText_1yo43_537 {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

._floatSubText_1yo43_551 {
  font-size: 11px;
  color: #7a7a7a;
  margin: 0;
}

/* Progress */
._innerProgressContainer_1yo43_563 {
  width: 90px;
  height: 6px;
  background: #ececec;
  border-radius: 10px;
  overflow: hidden;
}

._pctText_1yo43_579 {
  font-size: 11px;
  font-weight: 600;
}

/* Optional Pointer Styles */
._pointerBottom_1yo43_369::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 140px;
  width: 16px !important;
  height: 16px;
  background: white;
  transform: rotate(45deg);
}
._pointerBottom1_1yo43_389::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 10px;
  width: 16px;
  height: 16px;
  background: white;
  transform: rotate(135deg);
}
._pointerTop_1yo43_407::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 158px;
  width: 16px;
  height: 16px;
  background: white;
  transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 768px) {
  ._heroImage_1yo43_603 {
    max-width: 100%;
  }

  ._floatCardUiUx_1yo43_429 {
    left: 0;
    top: 5%;
  }

  ._floatCardAws_1yo43_441 {
    right: 0;
    top: 5%;
  }

  ._floatCertificateLeft_1yo43_453 {
    left: 0;
    bottom: 15%;
  }

  ._floatCertificateCenter_1yo43_469 {
    bottom: -10px;
  }

  ._floatCardUiUx_1yo43_429,
  ._floatCardAws_1yo43_441,
  ._floatCertificateLeft_1yo43_453,
  ._floatCertificateCenter_1yo43_469 {
    transform: scale(0.9);
  }
}
/* ============================================================
   STATS SUMMARY CARDS (Bootstrap Layout System Integration)
   ============================================================ */
._statsRowContainer_1yo43_889 {
  margin-top: 0px;
}

._statCard_1yo43_897 {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 7px;

  width: 100%;
  height: 90px;

  box-shadow: var(--shadow-card);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

._cardBottomGrid_1yo43_931 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* key for baseline alignment */
  margin-top: 0 !important;
}
._statCard_1yo43_897:hover {
  transform: translateY(-2px);
}
._trendBlock_1yo43_949 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
._btnPrimary_1yo43_959 {
  background: var(--gradient-primary) !important;
  color: #fff;
  border: none;
  box-shadow: var(--shadow-primary-sm) !important;
  font-size: var(--fs-2xs);
  border-radius: 8px !important;
  padding: 2px 6px;
  font-weight: 600;
  border-radius: 3px;
}
._sparkline_1yo43_981 {
  display: block;
}
/* Rounded Icon Components */
._iconWrap_1yo43_989 {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  font-size: 18px;
  line-height: 38px;
  text-align: center;
}

/* Palette Matching */
._blueGroup_1yo43_1009 {
  background-color: var(--color-info-bg);
  color: var(--color-info);
}
._greenGroup_1yo43_1017 {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}
._purpleGroup_1yo43_1025 {
  background-color: var(--color-purple-bg);
  color: var(--color-purple);
}
._yellowGroup_1yo43_1033 {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}
._tealGroup_1yo43_1041 {
  background-color: var(--color-teal-bg);
  color: var(--color-teal);
}
._redGroup_1yo43_1049 {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Typography */
._statLabelText_1yo43_1061 {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 1px;
}

._statValueBig_1yo43_1075 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1;
  margin: 0;
}

._trendText_1yo43_1091 {
  font-size: 11px;
  font-weight: 700;
}

._trendUp_1yo43_1101 {
  color: var(--color-success);
}
._trendDown_1yo43_1107 {
  color: var(--color-danger);
}

._periodText_1yo43_1115 {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: 2px;
}

/* Custom layout adjustments for mobile breakpoints */
@media (max-width: 576px) {
  ._statCard_1yo43_897 {
    max-width: 100%;
    min-height: auto;
    padding: 12px;
  }
}
._stat-label_1yo43_1143 {
  font-size: 14px;
  color: #6c757d;
}

._stat-value_1yo43_1153 {
  font-size: 28px;
  font-weight: 700;
}

._icon-box_1yo43_1163 {
  width: 48px;
  height: 48px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* =========================================================
   COURSE ROW
========================================================= */

._courseRow_1yo43_1189 {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;

  scrollbar-width: thin;
}

._courseCol_1yo43_1209 {
  flex: 0 0 auto;
}
/* =========================================================
   COURSE ROW
========================================================= */

._courseRow_1yo43_1189 {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;

  scrollbar-width: thin;
}

._courseCol_1yo43_1209 {
  flex: 0 0 auto;
}

/* =========================================================
   COURSE CARD
========================================================= */

._courseCardCustom_1yo43_1259 {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid #f1f1f1;

  width: 220px;
  height: 280px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  transition: 0.3s ease;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  flex-shrink: 0;
}

._courseCardCustom_1yo43_1259:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Header */

._courseHeader_1yo43_1313 {
  margin-bottom: 12px;
}

._courseFolder_1yo43_1321 {
  font-size: 20px;
}

._courseTitle_1yo43_1329 {
  font-size: 10px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

._courseMenuBtn_1yo43_1343 {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
}

/* Banner */

._courseBanner_1yo43_1361 {
  height: 78px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._courseBannerIcon_1yo43_1377 {
  font-size: 12px;
}

/* Banner Colors */

._javaBanner_1yo43_1389,
._sqlBanner_1yo43_1391,
._reactBanner_1yo43_1393,
._awsBanner_1yo43_1395,
._hrBanner_1yo43_1397,
._aiBanner_1yo43_1399,
._cyberBanner_1yo43_1401 {
  background-color: rgb(221, 221, 233);
}

/* Lessons */

._courseLessonText_1yo43_1413 {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

._courseFiles_1yo43_1425 {
  display: flex;
  gap: 5px;
}

._fileBox_1yo43_1435 {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

._pdfBox_1yo43_1455 {
  background: #fee2e2;
}

._docBox_1yo43_1463 {
  background: #dbeafe;
}

._videoBox_1yo43_1471 {
  background: #ede9fe;
}

._gameBox_1yo43_1479 {
  background: #dcfce7;
}

/* Progress */

._progressTrack_1yo43_1491 {
  width: 100%;
  height: 7px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

._progressFill_1yo43_1507 {
  height: 100%;
  border-radius: 999px;
}
._btn_1yo43_959 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}
._btnSecondary_1yo43_1547 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1yo43_1547:hover {
  background: #f8fafc;
}

._javaProgress_1yo43_1567 {
  background: #f97316;
}

._sqlProgress_1yo43_1575 {
  background: #3b82f6;
}

._reactProgress_1yo43_1583 {
  background: #06b6d4;
}

._awsProgress_1yo43_1591 {
  background: #f59e0b;
}

._hrProgress_1yo43_1599 {
  background: #10b981;
}

._aiProgress_1yo43_1607 {
  background: #8b5cf6;
}

._cyberProgress_1yo43_1615 {
  background: #6366f1;
}

._progressText_1yo43_1623 {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

/* Footer */

._courseFooterCustom_1yo43_1639 {
  margin-top: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

._avatarCircle_1yo43_1655 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 13px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
}

._instructorTitle_1yo43_1681 {
  font-size: 9px;
  font-weight: 700;
  color: #111827;
}

._instructorSub_1yo43_1693 {
  font-size: 8px;
  color: #9ca3af;
}

._openCourseBtn_1yo43_1703 {
  margin-left: 5px;
  border: none;
  background: #fef3c7;
  color: #92400e;

  font-size: 10px;
  font-weight: 700;

  padding: 8px 12px;
  border-radius: 10px;

  transition: 0.3s ease;
}

._openCourseBtn_1yo43_1703:hover {
  background: #f59e0b;
  color: white;
}
/* =========================
   GRID LAYOUT
========================= */

._courseRow_1yo43_1189 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}

._courseCol_1yo43_1209 {
  width: 100%;
}

/* =========================
   CARD
========================= */

._courseCardCustom_1yo43_1259 {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid #f1f1f1;

  width: 100%;
  height: 280px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  transition: 0.3s ease;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;
}

._courseCardCustom_1yo43_1259:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* =========================
   HEADER
========================= */

._courseHeader_1yo43_1313 {
  margin-bottom: 12px;
}

._courseFolder_1yo43_1321 {
  font-size: 18px;
  flex-shrink: 0;
}

._courseTitle_1yo43_1329 {
  font-size: 10px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

._courseMenuBtn_1yo43_1343 {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
}

/* =========================
   BANNER
========================= */

._courseBanner_1yo43_1361 {
  height: 78px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
}

._courseBannerIcon_1yo43_1377 {
  font-size: 12px !important;
}

/* Banner Colors */

._javaBanner_1yo43_1389,
._sqlBanner_1yo43_1391,
._reactBanner_1yo43_1393,
._awsBanner_1yo43_1395,
._hrBanner_1yo43_1397,
._aiBanner_1yo43_1399,
._cyberBanner_1yo43_1401 {
  background-color: rgb(221, 221, 233);
}

/* =========================
   LESSONS
========================= */

._courseLessonText_1yo43_1413 {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}

._courseFiles_1yo43_1425 {
  display: flex;
  gap: 4px;
}

._fileBox_1yo43_1435 {
  width: 18px;
  height: 18px;
  border-radius: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 9px;
}

._pdfBox_1yo43_1455 {
  background: #fee2e2;
}

._docBox_1yo43_1463 {
  background: #dbeafe;
}

._videoBox_1yo43_1471 {
  background: #ede9fe;
}

._gameBox_1yo43_1479 {
  background: #dcfce7;
}

/* =========================
   PROGRESS
========================= */

._progressTrack_1yo43_1491 {
  width: 100%;
  height: 7px;
  background: #f3f4f6;
  border-radius: 999px;
  overflow: hidden;
}

._progressFill_1yo43_1507 {
  height: 100%;
  border-radius: 999px;
}

._javaProgress_1yo43_1567 {
  background: #f97316;
}

._sqlProgress_1yo43_1575 {
  background: #3b82f6;
}

._reactProgress_1yo43_1583 {
  background: #06b6d4;
}

._awsProgress_1yo43_1591 {
  background: #f59e0b;
}

._hrProgress_1yo43_1599 {
  background: #10b981;
}

._aiProgress_1yo43_1607 {
  background: #8b5cf6;
}

._cyberProgress_1yo43_1615 {
  background: #6366f1;
}

._progressText_1yo43_1623 {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}

/* =========================
   FOOTER
========================= */

._courseFooterCustom_1yo43_1639 {
  margin-top: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

._avatarCircle_1yo43_1655 {
  width: 24px;
  height: 24px;
  border-radius: 50%;

  color: white;
  font-size: 12px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

._instructorTitle_1yo43_1681 {
  font-size: 9px;
  font-weight: 700;
  color: #111827;
  width: 70px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

._instructorSub_1yo43_1693 {
  font-size: 8px;
  color: #9ca3af;
}

._openCourseBtn_1yo43_1703 {
  border: 1px solid var(--color-primary-light);
  background: var(--color-primary-lightest);
  color: var(--color-primary);

  font-size: 9px;
  font-weight: 700;

  padding: 7px 10px;
  border-radius: 10px;

  transition: 0.3s ease;

  white-space: nowrap;
}

._openCourseBtn_1yo43_1703:hover {
  background: var(--gradient-primary);
  color: #fff;
}
._accordionTitle_1yo43_2259 span {
  font-weight: 600 !important;
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1600px) {
  ._courseRow_1yo43_1189 {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

@media (max-width: 1200px) {
  ._courseRow_1yo43_1189 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  ._courseRow_1yo43_1189 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  ._courseRow_1yo43_1189 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._courseRow_1yo43_1189 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ============ CONTAINER ============ */
._trainingContainer_1yo43_2337 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background-color: #f9fafc;
  color: #222;
}

/* ============ TOP BAR ============ */
._trainingTopBar_1yo43_2357 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background: #fff; */
}

._trainingSearchInput_1yo43_2371 {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}

._trainingSearchInput_1yo43_2371:focus {
  border-color: var(--color-primary-light);
}

._trainingFilterWrapper_1yo43_2395 {
  display: flex;
  gap: 10px;
}

._trainingSelect_1yo43_2405 {
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  font-size: 12px;
}

._trainingButtonGroup_1yo43_2421 {
  display: flex;
  gap: 10px;
}

._trainingDownloadBtn_1yo43_2431,
._trainingUploadBtn_1yo43_2433 {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

._trainingDownloadBtn_1yo43_2431 {
  background-color: #007bff;
  color: #fff;
}

._trainingDownloadBtn_1yo43_2431:hover {
  background-color: #0056b3;
}

._trainingUploadBtn_1yo43_2433 {
  background-color: #28a745;
  color: #fff;
}

._trainingUploadBtn_1yo43_2433:hover {
  background-color: #1e7e34;
}

/* ============ TABS ============ */

._trainingTabs_1yo43_2491 {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #e5e5e5;
}

._trainingTabs_1yo43_2491 button {
  padding: 10px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  color: #555;
  position: relative;
}

._trainingTabs_1yo43_2491 button:hover {
  color: #000;
}

._trainingActiveTab_1yo43_2531 {
  color: #000;
}

._trainingActiveTab_1yo43_2531::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}
._trainingActiveTab_1yo43_2531 {
  background-color: #007bff;
  color: #fff;
}

/* ============ GRID ============ */
._trainingGrid_1yo43_2571 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ============ CARD ============ */
._trainingCard_1yo43_2585,
._trainingNotesCard_1yo43_2587 {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

._trainingCardHeader_1yo43_2601 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
._trainingCardHeader_1yo43_2601 span {
  color: rgb(0, 85, 241);
}

._trainingCardHeader_1yo43_2601 h3 {
  font-size: 16px;
  font-weight: 600;
}

/* ============ VIDEO CARD ============ */
._trainingVideoCard_1yo43_2633 {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

._trainingThumbnail_1yo43_2645 {
  position: relative;
  width: 120px;
  height: 80px;
  background-color: #ddd;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

._trainingPlayBtn_1yo43_2667 {
  font-size: 20px;
  color: #007bff;
}

._trainingDuration_1yo43_2677 {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

._trainingVideoInfo_1yo43_2699 h4 {
  font-size: 12px;
  font-weight: 700;
}

._trainingVideoInfo_1yo43_2699 p {
  font-size: 10px;
  color: #5c5b5b;
}

._trainingProgressInfo_1yo43_2719 {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 10px;
  margin-top: 4px;
}

._trainingProgressBar_1yo43_2737 {
  width: 160px; /* fixed width */

  height: 6px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

._trainingProgressFill_1yo43_2757 {
  height: 100%;
  background-color: #007bff;
}

/* ============ LIST ITEM (PDF/DOC) ============ */
._trainingListItem_1yo43_2769 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f7f7f7;
}

._trainingListItem_1yo43_2769 h4 {
  font-size: 14px;
  font-weight: 500;
}

._trainingListItem_1yo43_2769 p {
  font-size: 12px;
  color: #666;
}

._trainingIconButton_1yo43_2805 {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #007bff;
}
._downloadimage_1yo43_2819 {
  color: #4d4d4d;
  border: 1px solid #dfdfdf;
  padding: 4px;
  border-radius: 50%;
  font-size: 25px;
}
/* ============ IMAGE GRID ============ */
._trainingImageGrid_1yo43_2835 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

._trainingImageBox_1yo43_2847 {
  height: 100px;
  background-color: #e9ecef;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #555;
}

/* ============ NOTES ============ */
._trainingNoteBox_1yo43_2871 {
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
  background-color: rgb(255, 240, 212);
}

._trainingAddNoteBtn_1yo43_2889 {
  background: var(--color-bg);
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: var;
  color: var(--color-aws);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-aws);
  transition: background 0.3s ease;
}

._trainingAddNoteBtn_1yo43_2889:hover {
  background: var(--gradient-primary);
  color: var(--color-text-primary);
}
._backBtn_1yo43_2925 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
    background: #fff;
  color: #6b7280;
   border: 1.5px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-right: 5px;
}

._backBtn_1yo43_2925:hover {
   background: var(--color-primary);
  color: var(--color-white);
}
._trainingSearchBox_1yo43_2965 {
  position: relative;
  width: 100%;
  max-width: 600px;
}
._trainingFilterWrapper_1yo43_2395 {
  display: flex;
  gap: 12px;
  margin-left: 20px;
}
._searchIcon_1yo43_2985 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
}

._trainingSearchInput_1yo43_2371 {
  padding: 6px 12px 6px 40px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
._viewToggle_1yo43_3013 {
  display: flex;
  gap: 10px;
  align-items: center;
}

._toggleBtn_1yo43_3025 {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bolder;
  border: 1px solid var(--color-primary-light);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-primary);
  background: var(--color-white);
  transition: all 0.2s ease;
}

._toggleBtn_1yo43_3025:hover {
  background: var(--color-primary-lightest);
  transform: scale(1.05);
  color: var(--color-primary);
}

._activeView_1yo43_3069 {
  background: var(--gradient-primary);
  color: #fff;
}
._upload_1yo43_3077 {
  background: #fff;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
  font-size: 10px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
}
._courseBannerIcon_1yo43_1377 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
._trainingThumbnail_1yo43_2645 {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

._trainingThumbImage_1yo43_3121 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* CENTER PLAY ICON */
._playOverlay_1yo43_3139 {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.25);

  opacity: 0;
  transition: 0.3s ease;

  border-radius: inherit;
}

._trainingThumbnail_1yo43_2645:hover ._playOverlay_1yo43_3139 {
  opacity: 1;
}

/* show on hover */
/* .trainingThumbnail:hover .playOverlay {
  opacity: 1;
} */

._playIcon_1yo43_3189 {
  font-size: 25px;
  color: white;
  cursor: pointer;
  /* transition: transform 0.2s ease; */
}

._playIcon_1yo43_3189:hover {
  transform: scale(1.1);
}
._videoTitleRow_1yo43_3209 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  gap: 8px;
}

._videoTitleRow_1yo43_3209 h4 {
  margin: 0;

  flex: 1;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* THREE DOT MENU */
._videoMenuBtn_1yo43_3249 {
  width: 28px;
  height: 28px;

  border: none;
  outline: none;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 6px;
  cursor: pointer;

  color: #6b7280;
  font-size: 15px;

  transition: all 0.2s ease;
}

._videoMenuBtn_1yo43_3249:hover {
  background: #f3f4f6;
  color: #111827;
}
._progressWrapper_1yo43_3303 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._trainingProgressBar_1yo43_2737 {
  flex: 1;

  height: 6px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
}

._trainingProgressFill_1yo43_2757 {
  height: 100%;
  background: #007bff;
  border-radius: 4px;
}

._progressPercent_1yo43_3345 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;

  min-width: 36px;
  text-align: right;
}
._pdfLeft_1yo43_3361 h4,
._pdfLeft_1yo43_3361 p {
  margin: 0;
}

._pdfLeft_1yo43_3361 h4 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

._pdfLeft_1yo43_3361 p {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* ICON ALIGNMENT */
._pdfLeft_1yo43_3361 svg {
  margin-top: 2px;
  flex-shrink: 0;
}
._trainingImageBox_1yo43_2847 {
  position: relative;
  height: 100px;
  overflow: hidden;
  border-radius: 10px;
}

._trainingGridImage_1yo43_3419 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

._imageOverlay_1yo43_3433 {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.45);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
._noteFooter_1yo43_3463 {
  margin-top: 18px;
  padding-top: 10px;

  border-top: 1px solid #e5e7eb;

  color: rgb(173, 173, 173);
}

._noteFooter_1yo43_3463 small {
  color: inherit;
}

._noteFooter_1yo43_3463 svg {
  color: inherit;
}
._uploadBox_1yo43_3495 {
  width: 100%;
}

._uploadLabel_1yo43_3503 {
  width: 100%;
  /* min-height: 160px; */
  border: 2px dashed #d1d5db;
  border-radius: 14px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 20px;
  text-align: center;
}

._uploadLabel_1yo43_3503:hover {
   border-color: var(--color-primary-light);
  background: var(--color-primary-lightest);
}

._uploadTitle_1yo43_3545 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

._uploadSubText_1yo43_3559 {
  font-size: 10px;
  color: #6b7280;
}

._selectedFileName_1yo43_3569 {
  margin-top: 12px;
  background: #e0e7ff;
  color: #080808;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  word-break: break-word;
}
._uploadTabWrapper_1yo43_3589 {
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  display: flex;
  gap: 6px;
}

._uploadTabBtn_1yo43_3605 {
  border: none;
  background: transparent;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  transition: 0.3s ease;
}

._activeUploadTab_1yo43_3627 {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
 
}
._descriptionTextarea_1yo43_3639 {
  min-height: 90px !important;
  resize: vertical;
}
._accordionToggle_1yo43_3647 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_1yo43_3647:hover {
  color: #374151;
}

._accordionHeader_1yo43_3679 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}
._accordionHeader_1yo43_3679 span {
  font-weight: 500;
}

._accordionHeader_1yo43_3679:hover {
  background-color: #f9fafb;
}
._trainAddWrapper_1yo43_3713 {
  position: relative;
}

._trainAddBtn_1yo43_3721 {
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}

._trainAddDropdown_1yo43_3737 {
  position: absolute;
  top: 20px;
  right: 0px;
  min-width: 80px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  z-index: 10;
}
._trainAddDropdown1_1yo43_3759 {
  position: absolute;
  top: 22px;
  left: 12px;
  min-width: 80px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  z-index: 10;
}

._trainAddItem_1yo43_3783 {
  width: 100%;
  border: none;
  background: none;
  padding: 2px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 11px;
}

._trainAddItem_1yo43_3783:hover {
  background: #f5f5f5;
}

._trainDeleteIcon_1yo43_3811 {
  color: #dc2626;
}
/* Dropdown container */
._multiSelectWrapper_1yo43_3819 {
  position: relative;
}

/* Fake input button */
._multiSelectInput_1yo43_3829 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}

/* Dropdown box */
._dropdownBox_1yo43_3853 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Each checkbox row */
._optionItem_1yo43_3885 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}

._optionItem_1yo43_3885:hover {
  background: #f5f5f5;
}
._multiSelectWrapper_1yo43_3819 {
  position: relative;
  width: 100%;
}

._multiSelectInput_1yo43_3829 {
  min-height: 45px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

._placeholder_1yo43_3943 {
  color: #999;
}

._selectedContainer_1yo43_3951 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._selectedTag_1yo43_3963 {
  background: #eef2ff;
  color: #333;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

._closeTag_1yo43_3985 {
  cursor: pointer;
  font-weight: bold;
  color: #666;
}

._closeTag_1yo43_3985:hover {
  color: red;
}

._dropdownBox_1yo43_3853 {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

._optionItem_1yo43_3885 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

._optionItem_1yo43_3885:hover {
  background: #f5f5f5;
}
/* =========================================
   BOOTSTRAP MODAL FIX
========================================= */

._customModal_1yo43_4067 ._modal-dialog_1yo43_4067 {
  overflow: visible !important;
}

._customModal_1yo43_4067 ._modal-content_1yo43_4075 {
  overflow: visible !important;
  border-radius: 14px;
}

._customModal_1yo43_4067 ._modal-body_1yo43_4085 {
  overflow: visible !important;
  position: relative;
}

._modalContent_1yo43_4095 {
  overflow: visible !important;
  position: relative;
}

/* =========================================
   MULTI SELECT DROPDOWN
========================================= */

._trainDropdownWrapper_1yo43_4113 {
  position: relative;
  width: 100%;
}

._trainDropdownInput_1yo43_4123 {
  min-height: 45px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  background: #fff;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

._trainPlaceholder_1yo43_4151 {
  color: #9ca3af;
  font-size: 13px;
}

._trainSelectedContainer_1yo43_4161 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._trainSelectedTag_1yo43_4173 {
  background: #eef2ff;
  color: #374151;

  padding: 5px 10px;
  border-radius: 20px;

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 12px;
  font-weight: 500;
}

._trainCloseTag_1yo43_4203 {
  cursor: pointer;
  font-weight: bold;
  color: #6b7280;
}

._trainCloseTag_1yo43_4203:hover {
  color: #ef4444;
}

/* =========================================
   DROPDOWN BOX
========================================= */

._trainDropdownBox_1yo43_4231 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 250px;
  overflow-y: auto;

  background: #fff;
  border: 1px solid #ddd;
}

/* =========================================
   OPTION ITEM
========================================= */

._trainOptionItem_1yo43_4265 {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;

  border-radius: 8px;

  cursor: pointer;

  font-size: 13px;
  transition: background 0.2s ease;
}

._trainOptionItem_1yo43_4265:hover {
  background: #f3f4f6;
}

/* =========================================
   SCROLLBAR
========================================= */

._trainDropdownBox_1yo43_4231::-webkit-scrollbar {
  width: 6px;
}

._trainDropdownBox_1yo43_4231::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 20px;
}

._trainDropdownBox_1yo43_4231::-webkit-scrollbar-track {
  background: transparent;
}

._courseBannerVideo_1yo43_4337 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

._videoPlayOverlay_1yo43_4351 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: all 0.3s ease;
}

._courseBanner_1yo43_1361:hover ._videoPlayOverlay_1yo43_4351 {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}
._paginationWrapper_1yo43_4389 {
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 6px;
  margin: 20px 0;
  flex-wrap: wrap;
}

._pageBtn_1yo43_4407 {
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
}

._pageBtn_1yo43_4407:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._activePage_1yo43_4435 {
  background: #fdc430;
  color: #fff;
  border-color: #2563eb;
}
/* Worklogs.module.css – complete file */

/* ══════════════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════════════ */
._page_r065s_11 {
  background: #f5f7fb;
  min-height: 100vh;
  padding: 14px 16px;
  overflow-x: hidden;
  font-size: 12px;
}

/* ══════════════════════════════════════════════as
   HEADER
══════════════════════════════════════════════ */
._pageHeader_r065s_33 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

._pageTitle_r065s_51 {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

._pageSubtitle_r065s_65 {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}

/* ══════════════════════════════════════════════
   TOGGLE SWITCH
══════════════════════════════════════════════ */
._chatToggleBtn_r065s_83 {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
}

._chatToggle_r065s_83 {
  width: 32px;
  height: 17px;
  border-radius: 20px;
  position: relative;
  transition: background 0.3s;
}

._toggleActive_r065s_129 {
  background: #4f46e5;
}

._toggleInactive_r065s_137 {
  background: #d1d5db;
}

._chatToggleCircle_r065s_145 {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  transition: left 0.3s;
}

._toggleActive_r065s_129 ._chatToggleCircle_r065s_145 {
  left: 17px;
}

._toggleInactive_r065s_137 ._chatToggleCircle_r065s_145 {
  left: 2px;
}

/* ══════════════════════════════════════════════
   STATS CARDS
══════════════════════════════════════════════ */
._statsGrid_r065s_187 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

._statsCard_r065s_201 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 88px;
  overflow: hidden;
}

._statsLeft_r065s_225 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

._statsTop_r065s_239 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

._statsIconBlue_r065s_253 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef4ff;
  color: #4f7cff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

._statsIconGreen_r065s_279 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eafbf1;
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

._statsTitle_r065s_305 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 2px;
  font-weight: 500;
  line-height: 1.3;
}

._statsValue_r065s_321 {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.1;
}

._statsGrowth_r065s_337 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._growthGreen_r065s_349 {
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
}

._statsGrowth_r065s_337 small {
  color: #9ca3af;
  font-size: 9px;
}

/* mini bar chart */
._chartBars_r065s_373 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  align-self: flex-end;
}

._chartBars_r065s_373 span {
  width: 5px;
  border-radius: 4px;
  background: #4f7cff;
  display: block;
}

/* sparkline wrappers */
._greenChart_r065s_403,
._blueWaveChart_r065s_405 {
  width: 56px;
  height: 34px;
  flex-shrink: 0;
  align-self: flex-end;
}

/* ══════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════ */
._topFilterBar_r065s_425 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

._filterField_r065s_449 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._filterLabel_r065s_461 {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.3px;
  display: block;
}

._filterDate_r065s_477,
._smallSelect_r065s_479 {
  height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  font-size: 11px;
  padding: 0 10px;
  background: #f9fafb;
  outline: none;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s;
}

._filterDate_r065s_477:focus,
._smallSelect_r065s_479:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

._smallSelect_r065s_479 {
  min-width: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  appearance: none;
}

._searchEmployee_r065s_535 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  padding: 0 10px;
  background: #f9fafb;
  min-width: 160px;
  transition: border-color 0.15s;
}

._searchEmployee_r065s_535:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

._searchEmployee_r065s_535 i {
  font-size: 10px;
  color: #9ca3af;
}

._searchEmployee_r065s_535 input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 11px;
  color: #374151;
  flex: 1;
  width: 100%;
}

._searchEmployee_r065s_535 input::placeholder {
  color: #c4c9d4;
}

._btnPrimary_r065s_609 {
  height: 30px;
  padding: 0 16px;
  border: none;
  background: #f59e0b;
  color: #fff;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

._btnPrimary_r065s_609:hover {
  background: #d97706;
}

._btnSecondary_r065s_645 {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #ef4444;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

._btnSecondary_r065s_645:hover {
  background: #fef2f2;
}

/* ══════════════════════════════════════════════
   TABLE WRAPPER
══════════════════════════════════════════════ */
._tableWrapper_r065s_687 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  padding: 14px 16px;
}

._tableLoading_r065s_701 {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

/* table overrides */
table thead th {
  font-size: 10px !important;
  color: #9ca3af !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #edf0f5 !important;
  white-space: nowrap;
}

table tbody td {
  font-size: 11px !important;
  padding: 8px 6px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

table tbody tr {
  height: 46px;
}

/* ══════════════════════════════════════════════
   TABLE CELL HELPERS
══════════════════════════════════════════════ */
._cellText_r065s_759 {
  font-size: 11px;
  color: #374151;
}

._cellTextBold_r065s_769 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}

._cellTextSmall_r065s_781 {
  font-size: 10px;
  color: #6b7280;
}

/* ══════════════════════════════════════════════
   EMPLOYEE CELL
══════════════════════════════════════════════ */
._empCell_r065s_797 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._empAvatar_r065s_809 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  flex-shrink: 0;
}

._empNameRow_r065s_837 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._empName_r065s_837 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}

._greenDot_r065s_861 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

._empRole_r065s_877 {
  font-size: 9px;
  color: #9ca3af;
  margin: 0;
}

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
._projectBadge_r065s_895 {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eef2ff;
  color: #6366f1;
}

._categoryBadge_r065s_913 {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f3e8ff;
  color: #7c3aed;
}

._taskText_r065s_931 {
  font-size: 10px;
  color: #6b7280;
  max-width: 80px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   EXPANDED ROW – WORK LOGS TIMELINE
══════════════════════════════════════════════ */
._expandedWrapper_r065s_957 {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 16px;
}

._expandedTitle_r065s_969 {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}

/* loading / empty states inside expanded row */
._loadingRow_r065s_985 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

._loadingText_r065s_999 {
  font-size: 11px;
  color: #9ca3af;
}

._emptyText_r065s_1009 {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  padding: 16px 0;
}

/* timeline */
._timelineContainer_r065s_1025 {
  position: relative;
}

._timelineLine_r065s_1033 {
  position: absolute;
  left: 6px;
  top: 7px;
  bottom: 8px;
  width: 2px;
  background: #e5e7eb;
  border-radius: 2px;
}

._timelineRow_r065s_1053 {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
}

._timelineDot_r065s_1067 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 20px;
  z-index: 1;
}

._dotFirst_r065s_1085 {
  background: #f3cd44;
  border: 2px solid #f9af66;
}

._dotInactive_r065s_1095 {
  background: #fff;
  border: 2px solid #d1d5db;
}

/* log card inside expanded row */
._logCard_r065s_1107 {
  flex: 1;
  border-bottom: 1px solid #e0e0e077;
  display: grid;
  grid-template-columns: 140px 220px 160px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px;
}

/* log card text styles */

/* time range: "09:00 AM - 11:30 AM" */
._logTimeRange_r065s_1133 {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  margin: 0 0 2px 0;
  white-space: nowrap;
}

/* duration: "02h 30m" */
._logDuration_r065s_1151 {
  font-size: 10px;
  font-weight: 700;
  color: #424242;
  margin: 0;
}

._logValue_r065s_1165 {
  font-size: 12px;
  font-weight: 700;
  color: #6a6a6b;
  margin: 0;
}


._logDesc_r065s_1181 {
  font-size: 12px;
  color: #4b5563;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

._logTime_r065s_1133 {
  font-size: 10px;
  color: #9ca3af;
  margin: 0;
}

._logProject_r065s_1215 {
  font-size: 10px;
  color: #6b7280;
  margin: 0;
}

/* status pills */
._statusPill_r065s_1229 {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  width: fit-content;
}

._statusCompleted_r065s_1247 {
  background: #dcfce7;
  color: #16a34a;
}

._statusInProgress_r065s_1257 {
  background: #fff7ed;
  color: #d97706;
}

._statusDefault_r065s_1267 {
  background: #f1f5f9;
  color: #64748b;
}

/* load more */
._loadMoreWrap_r065s_1279 {
  text-align: center;
  padding-top: 4px;
}

._loadMoreBtn_r065s_1289 {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

._loadMoreBtn_r065s_1289:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   ANALYTICS GRID (kept for potential use)
══════════════════════════════════════════════ */
._rightAnalyticsWrap_r065s_1331 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

._analyticsCard_r065s_1345 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}

._analyticsHeader_r065s_1365 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

._analyticsHeader_r065s_1365 h6 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

._analyticsHeader_r065s_1365 small {
  font-size: 12px;
  font-weight: 600;
  color: #8b5cf6;
}

._deptItem_r065s_1403 {
  margin-bottom: 10px;
}

._deptTop_r065s_1411 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}

._deptTop_r065s_1411 span,
._deptTop_r065s_1411 strong {
  font-size: 12px;
  font-weight: 600;
}

._deptTrack_r065s_1435 {
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._deptFill_r065s_1449 {
  height: 100%;
  background: #6366f1;
  border-radius: 10px;
}

._deptFill1_r065s_1461 {
  height: 100%;
  background: #78fa83;
  border-radius: 10px;
}

._viewReportBtn_r065s_1473 {
  border: none;
  background: none;
  color: #6366f1;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: auto;
}

._workLegend_r065s_1495 {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

._workLegend_r065s_1495 div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

._blueDot_r065s_1521 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f7cff;
}

._purpleDot_r065s_1535 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
}

._workChartWrap_r065s_1549 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

._yAxisLabels_r065s_1561 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70px;
}

._yAxisLabels_r065s_1561 span {
  font-size: 10px;
  color: #9ca3af;
}

._daysRow_r065s_1585 {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

._daysRow_r065s_1585 span {
  font-size: 10px;
  color: #9ca3af;
}

/* ══════════════════════════════════════════════
   MISC
══════════════════════════════════════════════ */
._wltableLabele_r065s_1613 {
  color: #5f5f5f;
  font-size: 10px;
  font-weight: 500;
  margin: 0;
}

._expandBtn_r065s_1627 {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

._expandBtn_r065s_1627:hover {
  background: #f3f4f6;
}

/* productivity bar */
._productivityWrap_r065s_1659 {
  min-width: 80px;
}

._progressWrap_r065s_1667 {
  height: 5px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 3px;
}

._progressBar_r065s_1683 {
  height: 100%;
  border-radius: 10px;
}

._logProgressBar_r065s_1693 {
  height: 5px;
  background: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._logProgressFill_r065s_1707 {
  height: 100%;
  border-radius: 10px;
}

/* action buttons */
._actionBtn_r065s_1719 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  transition: color 0.12s;
}

._actionEdit_r065s_1739 {
  color: #9ca3af;
}

._actionEdit_r065s_1739:hover {
  color: #6366f1;
}

._actionDelete_r065s_1755 {
  color: #fca5a5;
}

._actionDelete_r065s_1755:hover {
  color: #ef4444;
}

/* tag pill */
._tagPill_r065s_1773 {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}

/* status */
._status_r065s_1229 {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

._online_r065s_1803 {
  background: #dcfce7;
  color: #16a34a;
}

._break_r065s_1813 {
  background: #fef3c7;
  color: #d97706;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  ._statsGrid_r065s_187 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._rightAnalyticsWrap_r065s_1331 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._logCard_r065s_1107 {
    grid-template-columns: 130px auto 140px;
  }
}

@media (max-width: 768px) {
  ._statsGrid_r065s_187 {
    grid-template-columns: 1fr;
  }

  ._rightAnalyticsWrap_r065s_1331 {
    grid-template-columns: 1fr;
  }

  ._topFilterBar_r065s_425 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._searchEmployee_r065s_535 {
    min-width: 100%;
  }

  ._logCard_r065s_1107 {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}

._logDesc_r065s_1181 {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}/* ── Shift Module CSS ──────────────────────────────────────────────────────── */

/* Page Layout */
._page_1fa2o_7 {
  background: #f8fafc;
  min-height: 100vh;
}

/* ── Stats Accordion ────────────────────────────────────────────────────────── */
._statsAccordion_1fa2o_19 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 5px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

._accordionHeader_1fa2o_37 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}

._accordionHeader_1fa2o_37:hover {
  background: #f8fafc;
}

._accordionTitle_1fa2o_67 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

._accordionToggle_1fa2o_85 {
  color: #64748b;
}

._statsGrid_1fa2o_93 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(111px, 1fr));
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid #f1f5f9;
}

._summaryCard_1fa2o_109 {
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s;
}

._summaryCard_1fa2o_109:hover {
  transform: translateY(-1px);
}

._summaryTop_1fa2o_135 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._summaryIcon_1fa2o_147 {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

._summaryTitle_1fa2o_169 {
  font-size: 9px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.3;
}

._summaryRight_1fa2o_183 {
  display: flex;
  align-items: center;
}

._summaryValue_1fa2o_193 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
._layout_1fa2o_207 {
  display: flex;
  gap: 20px;
}

._layoutMain_1fa2o_217 {
  flex: 1;
  min-width: 0;
}

/* ── Table Section ──────────────────────────────────────────────────────────── */
._tableSection_1fa2o_229 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

._tableHeader_1fa2o_245 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}

._sectionTitle_1fa2o_259 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._sectionSub_1fa2o_273 {
  font-size: 9px;
  color: #94a3b8;
  margin: 2px 0 0;
}

/* ── Badge ──────────────────────────────────────────────────────────────────── */
._badge_1fa2o_287 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._typeBadge_1fa2o_307 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  background: #eff6ff;
  color: #2563eb;
}

/* ── Employee / Avatar cells ────────────────────────────────────────────────── */
._empCell_1fa2o_331 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._empAvatar_1fa2o_343 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._empInfo_1fa2o_369 {
  display: flex;
  flex-direction: column;
}

._empName_1fa2o_379 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

._empSub_1fa2o_393 {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Assigned Employees Avatar Stack ────────────────────────────────────────── */
._approverStack_1fa2o_405 {
  display: flex;
  align-items: center;
}

._approverAvatar_1fa2o_415 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  overflow: hidden;
  flex-shrink: 0;
}

._approverImg_1fa2o_445 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Time Cell ──────────────────────────────────────────────────────────────── */
._timeCell_1fa2o_459 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._timeFrom_1fa2o_471 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

._timeTo_1fa2o_483 {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Days Cell ──────────────────────────────────────────────────────────────── */
._daysCell_1fa2o_495 {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

._daysValue_1fa2o_507 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

._daysLabel_1fa2o_519 {
  font-size: 10.5px;
  color: #94a3b8;
}

._textMuted_1fa2o_529 {
  color: #cbd5e1;
  font-size: 13px;
}

/* ── Bulk Action Bar ────────────────────────────────────────────────────────── */
._bulkSelectedBar_1fa2o_541 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
}

._bulkSelectedLeft_1fa2o_561 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

._bulkCountBadge_1fa2o_575 {
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

._bulkSelectedText_1fa2o_593 {
  font-size: 12.5px;
  font-weight: 500;
  color: #1e40af;
}

._bulkBtnGroup_1fa2o_605 {
  display: flex;
  gap: 8px;
}

._bulkActionBtn_1fa2o_615 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

._bulkActionBtnDanger_1fa2o_641 {
  background: #fee2e2;
  color: #dc2626;
}

._bulkActionBtnDanger_1fa2o_641:hover {
  background: #fecaca;
}

._bulkDeselect_1fa2o_659 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

._bulkDeselect_1fa2o_659:hover {
  background: #dbeafe;
}

/* ── Weekly Off Pills ───────────────────────────────────────────────────────── */
._weekOffCell_1fa2o_697 {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

._weekOffPill_1fa2o_709 {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CREATE / EDIT SHIFT PAGE
══════════════════════════════════════════════════════════════════════════════ */

._createPage_1fa2o_735 {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}

/* Left main form */
._formMain_1fa2o_753 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Topbar inside create page */
._createTopbar_1fa2o_771 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

._createTopbarLeft_1fa2o_785 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._backBtn_1fa2o_797 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.15s;
}

._backBtn_1fa2o_797:hover {
  background: #f1f5f9;
}

._createTitle_1fa2o_835 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._createSub_1fa2o_849 {
  font-size: 10px;
  color: #94a3b8;
  margin: 2px 0 0;
}

._createActions_1fa2o_861 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._btnOutline_1fa2o_873 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.15s;
}

._btnOutline_1fa2o_873:hover {
  background: #f1f5f9;
}

._btnPublish_1fa2o_911 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #3b82f6;
  color: #fff;
  transition: all 0.15s;
}

._btnPublish_1fa2o_911:hover {
  background: #2563eb;
}

._btnPublish_1fa2o_911:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnDraft_1fa2o_959 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  transition: all 0.15s;
}

._btnDraft_1fa2o_959:hover {
  background: #f1f5f9;
}

/* Section Cards */
._sectionCard_1fa2o_999 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: visible;
}

._sectionCardHeader_1fa2o_1015 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  user-select: none;
}

._sectionCardHeader_1fa2o_1015:hover {
  background: #fafafa;
}

._sectionCardTitle_1fa2o_1043 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._sectionStep_1fa2o_1061 {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._sectionCardBody_1fa2o_1089 {
  padding: 20px;
  overflow: visible;
}

/* Form Grid */
._formGrid_1fa2o_1101 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

._formGrid2_1fa2o_1113 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

._formGrid4_1fa2o_1125 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

._formColSpan2_1fa2o_1137 {
  grid-column: span 2;
}

._formColSpan3_1fa2o_1145 {
  grid-column: span 3;
}

._formColSpan4_1fa2o_1153 {
  grid-column: span 4;
}

/* Form Fields */
._formGroup_1fa2o_1163 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._formLabel_1fa2o_1175 {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
}

._required_1fa2o_1187 {
  color: #ef4444;
  margin-left: 2px;
}

._formInput_1fa2o_1197 {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1e293b;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

._formInput_1fa2o_1197:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._formSelect_1fa2o_1239 {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1e293b;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

._formSelect_1fa2o_1239:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._formTextarea_1fa2o_1293 {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1e293b;
  background: #fff;
  resize: vertical;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
}

._formTextarea_1fa2o_1293:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._charCount_1fa2o_1337 {
  font-size: 10.5px;
  color: #94a3b8;
  text-align: right;
}

/* Toggle */
._toggleGroup_1fa2o_1351 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._toggleLabel_1fa2o_1363 {
  font-size: 8px;
  color: #374151;
  font-weight: 500;
}

._toggleSub_1fa2o_1375 {
  font-size: 7px;
  color: #94a3b8;
}

._toggle_1fa2o_1351 {
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

._toggle_1fa2o_1351 input {
  opacity: 0;
  width: 0;
  height: 0;
}

._toggleSlider_1fa2o_1411 {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 22px;
  transition: background 0.2s;
}

._toggleSlider_1fa2o_1411::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #d6d6d6;
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

._toggle_1fa2o_1351 input:checked + ._toggleSlider_1fa2o_1411 {
  background: var(--color-primary);
}

._toggle_1fa2o_1351 input:checked + ._toggleSlider_1fa2o_1411::before {
  transform: translateX(18px);
  background: #f0eeee;
}

/* Computed field */
._computedField_1fa2o_1477 {
  height: 30px;
  padding: 0 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #1e293b;
  font-weight: 600;
}

._computedTag_1fa2o_1505 {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  margin-left: 4px;
}

/* Day Pill Selector */
._dayPills_1fa2o_1521 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

._dayPill_1fa2o_1521 {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-black);
  transition: all 0.15s;
  user-select: none;
}

._dayPill_1fa2o_1521._active_1fa2o_1559 {
  background: #f1f5f9;
  color: #94a3b8;
}

/* Multi-select tags */
._tagInput_1fa2o_1571 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  min-height: 36px;
  align-items: center;
  cursor: text;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

._tagInput_1fa2o_1571:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._tag_1fa2o_1571 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #eff6ff;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: #1d4ed8;
}

._tagRemove_1fa2o_1637 {
  cursor: pointer;
  color: #93c5fd;
  display: flex;
  align-items: center;
}

._tagRemove_1fa2o_1637:hover {
  color: #2563eb;
}

/* ── Preview Panel ──────────────────────────────────────────────────────────── */
._previewPanel_1fa2o_1661 {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
  height: fit-content;
}

._previewCard_1fa2o_1683 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._previewHeader_1fa2o_1699 {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
}

._previewHeaderTop_1fa2o_1709 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._previewHeaderTitle_1fa2o_1723 {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}

._activePill_1fa2o_1735 {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
  background: #dcfce7;
  color: #16a34a;
}

._previewShiftName_1fa2o_1753 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._previewShiftIcon_1fa2o_1765 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}

._previewShiftLabel_1fa2o_1789 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

._previewShiftSub_1fa2o_1803 {
  font-size: 11px;
  color: #94a3b8;
}

._previewBody_1fa2o_1813 {
  padding: 14px 16px;
}

._previewRow_1fa2o_1821 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid #f8fafc;
}

._previewRow_1fa2o_1821:last-child {
  border-bottom: none;
}

._previewKey_1fa2o_1845 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

._previewVal_1fa2o_1857 {
  font-size: 11.5px;
  color: #1e293b;
  font-weight: 600;
  text-align: right;
  max-width: 160px;
}

._previewHighlight_1fa2o_1873 {
  color: #3b82f6;
}

/* Duration Summary */
._durationSummary_1fa2o_1883 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #f1f5f9;
}

._durationItem_1fa2o_1899 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._durationKey_1fa2o_1911 {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}

._durationVal_1fa2o_1923 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

._durationValHighlight_1fa2o_1935 {
  font-size: 13px;
  font-weight: 700;
  color: #3b82f6;
}

/* Working Days Preview */
._workingDaysPreview_1fa2o_1949 {
  padding: 14px 16px;
  border-top: 1px solid #f1f5f9;
}

._workingDaysTitle_1fa2o_1959 {
  font-size: 11.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

._workingDayPills_1fa2o_1979 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

._workingDayPill_1fa2o_1979 {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 500;
  background: var(--color-primary);
  color: var(--color-black);
}

._workingDayPillOff_1fa2o_2009 {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 400;
  background: #f1f5f9;
  color: #94a3b8;
}

/* Employee Count */
._empCount_1fa2o_2029 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #f1f5f9;
}

._empCountNumber_1fa2o_2045 {
  font-size: 26px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

._empCountLabel_1fa2o_2059 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

._empAvatarStack_1fa2o_2071 {
  display: flex;
  margin-left: auto;
}

._empAvatarSmall_1fa2o_2081 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  margin-left: -6px;
  flex-shrink: 0;
}

._empAvatarSmall_1fa2o_2081:first-child {
  margin-left: 0;
}

/* Rule Summary */
._ruleSummary_1fa2o_2121 {
  padding: 14px 16px;
  border-top: 1px solid #f1f5f9;
}

._ruleSummaryTitle_1fa2o_2131 {
  font-size: 11.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

._ruleItem_1fa2o_2145 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: #475569;
}

._ruleCheck_1fa2o_2163 {
  color: #22c55e;
  flex-shrink: 0;
}

/* Templates */
._templatesCard_1fa2o_2175 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._templatesHeader_1fa2o_2191 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

._templatesTitle_1fa2o_2207 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._templatesViewAll_1fa2o_2219 {
  font-size: 11px;
  color: #3b82f6;
  cursor: pointer;
  text-decoration: none;
}

._templateItem_1fa2o_2233 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
}

._templateItem_1fa2o_2233:last-child {
  border-bottom: none;
}

._templateItem_1fa2o_2233:hover {
  background: #f8fafc;
}

._templateIcon_1fa2o_2269 {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

._templateName_1fa2o_2291 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._templateMeta_1fa2o_2303 {
  font-size: 10.5px;
  color: #94a3b8;
}

/* ── Shift Name Cell ─────────────────────────────────────────────────────────── */
._shiftNameCell_1fa2o_2315 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._shiftIcon_1fa2o_2327 {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

._shiftNameInfo_1fa2o_2349 {
  display: flex;
  flex-direction: column;
}

._shiftNameLabel_1fa2o_2359 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

._shiftCodeLabel_1fa2o_2371 {
  font-size: 11px;
  color: #94a3b8;
}

/* time badge */
._timeBadge_1fa2o_2383 {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eff6ff;
  color: #2563eb;
}

._timeBadgeGreen_1fa2o_2401 {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f0fdf4;
  color: #16a34a;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
._btn_1fa2o_873 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}

._btnPrimary_1fa2o_2449 {
  background: #3b82f6;
  color: #ffffff;
}

._btnPrimary_1fa2o_2449:hover {
  background: #2563eb;
}

._btnSecondary_1fa2o_2467 {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

._btnSecondary_1fa2o_2467:hover {
  background: #e2e8f0;
}

/* ── Color Tag ─────────────────────────────────────────────────────────────── */
._colorTagWrapper_1fa2o_2489 {
  position: relative;
}

._colorTagPreview_1fa2o_2497 {
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.15s;
}

._colorTagPreview_1fa2o_2497:hover {
  opacity: 0.9;
}

._colorTagHex_1fa2o_2531 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

._colorPickerDropdown_1fa2o_2541 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 180px;
}

._colorSwatch_1fa2o_2573 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s;
  outline-offset: 2px;
}

._colorSwatch_1fa2o_2573:hover {
  transform: scale(1.15);
}

/* ── formGrid5 (5-col for timing row) ──────────────────────────────────────── */
._formGrid5_1fa2o_2601 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* ── Toggle Row (horizontal flex of toggles) ───────────────────────────────── */
._toggleRow_1fa2o_2615 {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}

/* ── Shift Sub Type Tabs ────────────────────────────────────────────────────── */
._shiftSubTabs_1fa2o_2631 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

._shiftSubTab_1fa2o_2631 {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  transition: all 0.15s;
}

._shiftSubTab_1fa2o_2631:hover {
  background: #f1f5f9;
}

._shiftSubTabActive_1fa2o_2677 {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-black);
}

/* ── Rotation Pattern Grid ──────────────────────────────────────────────────── */
._rotationPatternGrid_1fa2o_2691 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

._rotationDayCard_1fa2o_2703 {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: grab;
  transition: box-shadow 0.15s;
}

._rotationDayCard_1fa2o_2703:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

._rotationDayHeader_1fa2o_2737 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

._rotationDayLabel_1fa2o_2751 {
  flex: 1;
}

._rotationDragHandle_1fa2o_2759 {
  font-size: 13px;
  color: #cbd5e1;
  cursor: grab;
  line-height: 1;
}

._rotationDayIcon_1fa2o_2773 {
  font-size: 20px;
  margin: 2px 0;
}

._rotationDayShiftName_1fa2o_2783 {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

._rotationDayTime_1fa2o_2797 {
  font-size: 9px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.3;
}

/* ── Additional Settings Grid ───────────────────────────────────────────────── */
._additionalGrid_1fa2o_2813 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

._additionalToggleCard_1fa2o_2825 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fafafa;
  transition: background 0.15s;
  gap: 8px;
}

._additionalToggleCard_1fa2o_2825:hover {
  background: #f1f5f9;
}

/* ── Form Footer ─────────────────────────────────────────────────────────────── */
._formFooter_1fa2o_2859 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 4px;
}

/* ── Preview Sections ────────────────────────────────────────────────────────── */
._previewSection_1fa2o_2883 {
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
}

._previewSectionTitle_1fa2o_2893 {
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

._previewTimingRow_1fa2o_2913 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._previewTimingMeta_1fa2o_2925 {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

._previewBulletRow_1fa2o_2937 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}

._previewBulletDot_1fa2o_2951 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

._patternCardStyle_1fa2o_2967 {
  position: relative;
  width: 130px;
  min-height: 120px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PATTERN CARD STYLES  (moved from inline JS objects in ShiftAddEdit)
══════════════════════════════════════════════════════════════════════════════ */

/* Overlay backdrop for the pattern modal */
._modalOverlay_1fa2o_3013 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal container */
._modalBox_1fa2o_3035 {
  background: #fff;
  border-radius: 12px;
  width: 400px;
  max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Modal header row */
._modalHeader_1fa2o_3055 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
}

/* Modal header title text */
._modalHeaderTitle_1fa2o_3073 {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}

/* Modal close icon button */
._modalClose_1fa2o_3087 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 2px;
}

/* Modal body content area */
._modalBody_1fa2o_3109 {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Modal footer actions row */
._modalFooter_1fa2o_3125 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #f1f5f9;
}

/* Wrapper for a single modal form field */
._modalFieldWrap_1fa2o_3143 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label inside the modal */
._modalLabel_1fa2o_3157 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

/* Input inside the modal */
._modalInput_1fa2o_3171 {
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  width: 100%;
}

/* Error state for modal inputs */
._modalInputErr_1fa2o_3193 {
  border-color: #ef4444;
  background: #fef2f2;
}

/* Inline validation error text */
._errText_1fa2o_3205 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* Duration hint row shown below time fields */
._modalDurationHint_1fa2o_3219 {
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 10px;
}

/* ── DayCheckboxGroup ───────────────────────────────────────────────────────── */

/* Outer wrapper label */
._dayCheckGroupLabel_1fa2o_3241 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  display: block;
  margin-bottom: 10px;
}

/* Flex row of day checkbox pills */
._dayCheckGroupRow_1fa2o_3259 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Helper text showing selected days */
._dayCheckGroupMeta_1fa2o_3273 {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}

/* ── MultiSelectDropdown ────────────────────────────────────────────────────── */

/* Outer wrapper (position:relative anchor) */
._multiSelectWrap_1fa2o_3291 {
  position: relative;
}

/* The visible trigger / pill container */
._multiSelectTrigger_1fa2o_3301 {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  background: #fff;
  min-height: 36px;
  flex-wrap: wrap;
}

/* Placeholder text when nothing is selected */
._multiSelectPlaceholder_1fa2o_3329 {
  font-size: 13px;
  color: #94a3b8;
}

/* Pill chip for a selected item */
._multiSelectChip_1fa2o_3341 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
}

/* Remove button inside a chip */
._multiSelectChipRemove_1fa2o_3369 {
  background: none;
  border: none;
  cursor: pointer;
  color: #1d4ed8;
  display: flex;
  padding: 0;
  opacity: 0.7;
}

/* Chevron icon inside the trigger */
._multiSelectChevron_1fa2o_3391 {
  transition: transform 0.15s;
}

._multiSelectChevronOpen_1fa2o_3399 {
  transform: rotate(180deg);
}

/* Floating dropdown panel */
._multiSelectDropdown_1fa2o_3409 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  z-index: 999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Search row inside dropdown */
._multiSelectSearch_1fa2o_3437 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* Search text input */
._multiSelectSearchInput_1fa2o_3455 {
  border: none;
  outline: none;
  font-size: 13px;
  flex: 1;
  color: #1e293b;
  background: transparent;
}

/* Clear search icon button */
._multiSelectSearchClear_1fa2o_3475 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 0;
}

/* "Select All" header row */
._multiSelectSelectAll_1fa2o_3495 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

/* Scrollable options list */
._multiSelectList_1fa2o_3523 {
  max-height: 180px;
  overflow-y: auto;
}

/* State message (loading / no results) */
._multiSelectStateMsg_1fa2o_3535 {
  padding: 12px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

/* Individual option row */
._multiSelectOption_1fa2o_3551 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #1e293b;
}

/* Sub-label inside an option */
._multiSelectOptionSub_1fa2o_3573 {
  color: #94a3b8;
  font-size: 11px;
  margin-left: 6px;
}

/* Footer row with count + clear-all */
._multiSelectFooter_1fa2o_3587 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-top: 1px solid #f1f5f9;
}

/* Selected count label */
._multiSelectCount_1fa2o_3605 {
  font-size: 11px;
  color: #64748b;
}

/* Clear all button */
._multiSelectClearAll_1fa2o_3617 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #3b82f6;
  padding: 0;
}

/* ── Weekly Off / Working Days info banner ───────────────────────────────────── */
._weeklyOffInfo_1fa2o_3637 {
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
}

/* ── Rotation Pattern cards row ─────────────────────────────────────────────── */

/* Flex row that wraps pattern cards + add-card */
._patternCardsRow_1fa2o_3663 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Individual pattern card */
._patternCard_1fa2o_2967 {
  position: relative;
  width: 130px;
  min-height: 120px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Delete button on a pattern card */
._patternDeleteBtn_1fa2o_3715 {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #fee2e2;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ef4444;
  padding: 0;
}

/* Icon circle inside a pattern card */
._patternIconWrap_1fa2o_3751 {
  width: 40px;
  height: 40px;
  background: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

/* Emoji icon size inside icon wrap */
._patternIcon_1fa2o_3751 {
  font-size: 20px;
}

/* Shift name text on a pattern card */
._patternShiftName_1fa2o_3785 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  margin-bottom: 3px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Time range text on a pattern card */
._patternTimeRange_1fa2o_3811 {
  font-size: 10px;
  color: #64748b;
  text-align: center;
  margin-bottom: 4px;
}

/* "Week N" label pill on a pattern card */
._patternWeekLabel_1fa2o_3827 {
  font-size: 10px;
  font-weight: 600;
  color: #3b82f6;
  background: #eff6ff;
  border-radius: 4px;
  padding: 2px 7px;
  margin-top: auto;
}

/* "click to edit" hint text */
._patternEditHint_1fa2o_3849 {
  font-size: 9px;
  color: #94a3b8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* "Add Shift" dashed placeholder card */
._addPatternCard_1fa2o_3869 {
  width: 130px;
  min-height: 120px;
  border: 1.5px dashed #93c5fd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #f0f9ff;
  transition: background 0.15s;
}

/* Label text inside the add-pattern card */
._addPatternLabel_1fa2o_3899 {
  font-size: 12px;
  color: #3b82f6;
  font-weight: 500;
  margin-top: 6px;
}

/* ── Rotation section header (label + pattern count hint) ───────────────────── */
._rotationHeaderRow_1fa2o_3915 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Pattern count text */
._patternCountHint_1fa2o_3931 {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
}

/* ── Assignment section ──────────────────────────────────────────────────────── */

/* Filter & Search button */
._searchBtn_1fa2o_3949 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  background: var(--gradient-primary);
  color: #fff;

  white-space: nowrap;
  gap: 6px;
}
._searchBtn_1fa2o_3949:hover {
  color: #fff;
}
/* "Selected Employees" sub-header row */
._selectedEmpHeader_1fa2o_3979 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* "Selected Employees (N)" label */
._selectedEmpTitle_1fa2o_3995 {
  margin: 0;
  color: #334155;
  font-size: 13px;
}

/* "Remove All" link-button */
._removeAllBtn_1fa2o_4009 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #ef4444;
  padding: 0;
}

/* Grid of employee cards */
._empCardsGrid_1fa2o_4029 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Individual employee card */
._empCard_1fa2o_4029 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

/* Avatar image inside employee card */
._empCardAvatar_1fa2o_4065 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

/* Text block inside employee card */
._empCardInfo_1fa2o_4081 {
  flex: 1;
  min-width: 0;
}

/* Employee name inside card */
._empCardName_1fa2o_4093 {
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}

/* Employee code inside card */
._empCardCode_1fa2o_4107 {
  font-size: 11px;
  color: #64748b;
}

/* Remove icon button on employee card */
._empCardRemove_1fa2o_4119 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 0;
}

/* ── Validation error messages ───────────────────────────────────────────────── */
._fieldError_1fa2o_4139 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 3px;
  display: block;
}

/* Input / select with error state */
._inputError_1fa2o_4155 {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

/* ── Loading state ───────────────────────────────────────────────────────────── */
._loadingPage_1fa2o_4167 {
  align-items: center;
  justify-content: center;
}

._loadingText_1fa2o_4177 {
  color: #64748b;
  font-size: 14px;
}

/* ── Footer actions row ──────────────────────────────────────────────────────── */
._footerActions_1fa2o_4189 {
  display: flex;
  gap: 8px;
}

._colorCard_1fa2o_4199 {
  width: 45px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid white !important;
  outline: none !important;
}
/* SurveyTake.module.css */
/* Colors sourced from SurveyAdd.module.css */

/* ── Page Layout ── */
._page_gmn3r_9 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f7fa;
}

/* ── Header ── */
._header_gmn3r_25 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 14px 24px;
  border-bottom: 1px solid #eef2f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  gap: 16px;
  flex-wrap: wrap;
}

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

._backBtn_gmn3r_61 {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

._backBtn_gmn3r_61:hover {
  background: #fffbeb;
  color: #f59e0b;
}

._surveyTitle_gmn3r_95 {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 2px 0;
}

._surveyDesc_gmn3r_109 {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

._headerRight_gmn3r_121 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._progressInfo_gmn3r_133 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 160px;
}

._progressPct_gmn3r_149 {
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
}

._progressBarOuter_gmn3r_161 {
  width: 160px;
  height: 5px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

._progressBarInner_gmn3r_177 {
  height: 100%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ── Section Stepper ── */
._stepper_gmn3r_193 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 24px;
  background: white;
  border-bottom: 1px solid #eef2f6;
  overflow-x: auto;
  flex-wrap: nowrap;
}

._stepBtn_gmn3r_217 {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

._stepBtn_gmn3r_217:hover {
  background: #fffbeb;
}

._stepDot_gmn3r_253 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

._stepDotActive_gmn3r_283 {
  background: #f59e0b;
  color: white;
}

._stepDotDone_gmn3r_293 {
  background: #fef3c7;
  color: #d97706;
}

._stepLabel_gmn3r_303 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

._stepBtnActive_gmn3r_315 ._stepLabel_gmn3r_303 {
  color: #f59e0b;
}

._stepBtnDone_gmn3r_323 ._stepLabel_gmn3r_303 {
  color: #92400e;
}

._stepLine_gmn3r_331 {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  min-width: 20px;
  max-width: 48px;
  transition: background 0.3s;
}

._stepLineDone_gmn3r_349 {
  background: #fbbf24;
}

/* ── Body ── */
._body_gmn3r_359 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px 24px;
  flex: 1;
  align-items: start;
}

/* ── Questions Wrap ── */
._questionsWrap_gmn3r_379 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._sectionBanner_gmn3r_391 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border: 1px solid #fde68a;
  border-radius: 14px;
}

._sectionIcon_gmn3r_413 {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
 justify-content: space-between;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.12);
  flex-shrink: 0;
}

._sectionName_gmn3r_439 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

._sectionMeta_gmn3r_451 {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

._questionsGrid_gmn3r_463 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Question Card ── */
._qCard_gmn3r_477 {
  background: white;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

._qCard_gmn3r_477:hover {
  border-color: #fde68a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

._qCardAnswered_gmn3r_503 {
  border-color: #fde68a;
}

._qHeader_gmn3r_511 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
}

._qNumBadge_gmn3r_527 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fffbeb;
  color: #d97706;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._qText_gmn3r_555 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
}

._reqBadge_gmn3r_569 {
  font-size: 9px;
  font-weight: 600;
  color: #ef4444;
  background: #fef2f2;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

._answeredTick_gmn3r_589 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._qBody_gmn3r_613 {
  padding: 4px 16px 16px;
}

._qSubLabel_gmn3r_621 {
  font-size: 11px;
  color: #9ca3af;
  margin: 0 0 10px 0;
}

/* ── Rating Scale ── */
._ratingTrack_gmn3r_635 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._ratingBtn_gmn3r_647 {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

._ratingBtn_gmn3r_647:hover {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #d97706;
}

._ratingBtnActive_gmn3r_685 {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

._axisLabels_gmn3r_697 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 8px;
}

/* ── Emoji Feedback ── */
._emojiRow_gmn3r_715 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._emojiBtn_gmn3r_727 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s;
}

._emojiBtn_gmn3r_727:hover {
  border-color: #fbbf24;
  background: #fffbeb;
  transform: translateY(-2px);
}

._emojiBtnActive_gmn3r_765 {
  border-color: #fbbf24;
  background: #fef3c7;
}

._emojiGlyph_gmn3r_775 {
  font-size: 26px;
}

._emojiLabel_gmn3r_783 {
  font-size: 9px;
  color: #6b7280;
  white-space: nowrap;
}

/* ── Star Rating ── */
._starsRow_gmn3r_797 {
  display: flex;
  gap: 6px;
}

._starBtn_gmn3r_807 {
  background: none;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, transform 0.15s;
}

._starBtn_gmn3r_807:hover {
  transform: scale(1.1);
}

._starActive_gmn3r_837 {
  color: #fbbf24;
}

/* ── Checkbox Group ── */
._checkList_gmn3r_847 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._checkRow_gmn3r_859 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  color: #374151;
  transition: all 0.15s;
}

._checkRow_gmn3r_859:hover {
  border-color: #fbbf24;
  background: #fffbeb;
}

._checkRowActive_gmn3r_895 {
  border-color: #fbbf24;
  background: #fef3c7;
}

._checkBox_gmn3r_905 {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

._checkBoxOn_gmn3r_929 {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

/* ── Paragraph ── */
._paraArea_gmn3r_943 {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: all 0.2s;
  box-sizing: border-box;
}

._paraArea_gmn3r_943:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

._charCount_gmn3r_979 {
  text-align: right;
  font-size: 10px;
  color: #9ca3af;
  margin-top: 4px;
}

/* ── NPS ── */
._npsRow_gmn3r_995 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

._npsBtn_gmn3r_1007 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

._npsBtn_gmn3r_1007:hover {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #d97706;
}

._npsBtnActive_gmn3r_1051 {
  background: #f59e0b;
  border-color: #f59e0b;
  color: white;
}

/* ── Yes / No ── */
._yesNoRow_gmn3r_1065 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._ynBtn_gmn3r_1077 {
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

._ynBtn_gmn3r_1077:hover {
  border-color: #fbbf24;
  background: #fffbeb;
}

._ynBtnYes_gmn3r_1111 {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}

._ynBtnNo_gmn3r_1123 {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

._toggleTrack_gmn3r_1135 {
  width: 48px;
  height: 24px;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}

._toggleOn_gmn3r_1157 {
  background: #f59e0b;
}

._toggleOff_gmn3r_1165 {
  background: #fca5a5;
}

._toggleThumb_gmn3r_1173 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

._toggleOn_gmn3r_1157 ._toggleThumb_gmn3r_1173 {
  transform: translateX(24px);
}

._toggleOff_gmn3r_1165 ._toggleThumb_gmn3r_1173 {
  transform: translateX(0);
}

/* ── File Upload ── */
._dropZone_gmn3r_1215 {
  border: 2px dashed #e5e7eb;
  border-radius: 12px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

._dropZone_gmn3r_1215:hover {
  border-color: #fbbf24;
  background: #fffbeb;
}

._dropZoneDrag_gmn3r_1251 {
  border-color: #f59e0b;
  background: #fef3c7;
}

._dropIcon_gmn3r_1261 {
  color: #f59e0b;
}

._dropLabel_gmn3r_1269 {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
}

._dropHint_gmn3r_1281 {
  font-size: 10px;
  color: #9ca3af;
}

/* ── Sidebar ── */
._sidebar_gmn3r_1293 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 20px;
}

._sideCard_gmn3r_1309 {
  background: white;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

._sideCardHead_gmn3r_1325 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f6;
}

._sideCardTitle_gmn3r_1341 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}

._sideInfoRow_gmn3r_1353 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 11px;
  color: #6b7280;
  border-bottom: 1px solid #f0f2f5;
}

._sideInfoRow_gmn3r_1353:last-child {
  border-bottom: none;
}

._sideProgressRow_gmn3r_1381 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
}

._sideStepName_gmn3r_1397 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

._sideStepMeta_gmn3r_1409 {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

._sideStepsAll_gmn3r_1421 {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._sideStep_gmn3r_1397 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.15s;
}

._sideStep_gmn3r_1397:hover {
  background: #fffbeb;
  color: #d97706;
}

._sideStepActive_gmn3r_1471 {
  background: #fffbeb;
  color: #d97706;
}

._sideStepDone_gmn3r_1481 {
  color: #92400e;
}

._sideStepDot_gmn3r_1489 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

._sideStepDotActive_gmn3r_1519 {
  background: #f59e0b;
  color: white;
}

._sideStepDotDone_gmn3r_1529 {
  background: #fef3c7;
  color: #d97706;
}

/* ── HR Support ── */
._hrRow_gmn3r_1541 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
}

._hrAvatar_gmn3r_1557 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._hrName_gmn3r_1585 {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

._hrRole_gmn3r_1597 {
  font-size: 10px;
  color: #9ca3af;
}

._hrContact_gmn3r_1607 {
  padding: 8px 16px 12px;
  font-size: 11px;
  color: #f59e0b;
}

/* ── Footer ── */
._footer_gmn3r_1621 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: white;
  border-top: 1px solid #eef2f6;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
  gap: 12px;
  position: sticky;
  bottom: 0;
}

._prevBtn_gmn3r_1647 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s;
}

._prevBtn_gmn3r_1647:hover:not(:disabled) {
  background: #e5e7eb;
}

._prevBtn_gmn3r_1647:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._footerCenter_gmn3r_1695 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._footerLabel_gmn3r_1709 {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

._footerSub_gmn3r_1721 {
  font-size: 10px;
  color: #9ca3af;
}

._nextBtn_gmn3r_1731 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #d97706;
  cursor: pointer;
  transition: all 0.2s;
}

._nextBtn_gmn3r_1731:hover {
  background: #fef3c7;
  transform: translateY(-1px);
}

._submitBtn_gmn3r_1771 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

._submitBtn_gmn3r_1771:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* ── Thank You Screen ── */
._tyWrap_gmn3r_1815 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5f7fa;
  padding: 24px;
}

._tyCard_gmn3r_1833 {
  background: white;
  border-radius: 24px;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 48px 40px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

._tyIconWrap_gmn3r_1863 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fef3c7;
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: _popIn_gmn3r_1 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes _popIn_gmn3r_1 {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

._tyCard_gmn3r_1833 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

._tyCard_gmn3r_1833 p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

._tyPoints_gmn3r_1925 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #fef3c7;
  border-radius: 999px;
  font-size: 13px;
  color: #92400e;
}

._tyMeta_gmn3r_1947 {
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: #9ca3af;
}

._tyMeta_gmn3r_1947 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

._tyBtn_gmn3r_1973 {
  padding: 11px 24px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
  margin-top: 4px;
}

._tyBtn_gmn3r_1973:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  ._body_gmn3r_359 {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  ._sidebar_gmn3r_1293 {
    position: static;
  }
}

@media (max-width: 640px) {
  ._header_gmn3r_25 {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  ._stepper_gmn3r_193 {
    padding: 10px 12px;
    justify-content: flex-start;
  }

  ._stepLabel_gmn3r_303 {
    display: none;
  }

  ._stepBtnActive_gmn3r_315 ._stepLabel_gmn3r_303 {
    display: inline;
  }

  ._body_gmn3r_359 {
    padding: 12px;
  }

  ._footer_gmn3r_1621 {
    padding: 12px 16px;
  }

  ._prevBtn_gmn3r_1647,
  ._nextBtn_gmn3r_1731,
  ._submitBtn_gmn3r_1771 {
    padding: 9px 14px;
    font-size: 11px;
  }

  ._npsRow_gmn3r_995 {
    gap: 3px;
  }

  ._npsBtn_gmn3r_1007 {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  ._emojiRow_gmn3r_715 {
    gap: 8px;
  }

  ._emojiBtn_gmn3r_727 {
    padding: 8px 10px;
  }
}

._headerRight_gmn3r_121{
  width:320px;

  display:flex;
  flex-direction:column;
  gap:16px;
}

._headerNavBtns_gmn3r_2159{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* BUTTONS */

._prevBtn_gmn3r_1647,
._nextBtn_gmn3r_1731,
._submitBtn_gmn3r_1771{
  height:42px;

  padding:0 18px;

  border:none;

  border-radius:12px;

  font-size:12px;
  font-weight:700;

  display:flex;
  align-items:center;
  gap:7px;

  cursor:pointer;

  transition:.2s;
}

._prevBtn_gmn3r_1647{
  background:#f3f4f6;
  color:#374151;
}

._prevBtn_gmn3r_1647:hover{
  background:#e5e7eb;
}

._nextBtn_gmn3r_1731{
  background:#fffbeb;
  color:#d97706;
}

._nextBtn_gmn3r_1731:hover{
  background:#fef3c7;
}

._submitBtn_gmn3r_1771{
  background:
    linear-gradient(
      135deg,
      #fbbf24 0%,
      #f59e0b 100%
    );

  color:white;
}

._submitBtn_gmn3r_1771:hover{
  transform:translateY(-1px);
}

._prevBtn_gmn3r_1647:disabled{
  opacity:.5;
  cursor:not-allowed;
}

._sectionBanner_gmn3r_391 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;

  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
  margin-bottom: 18px;
}

._sectionLeft_gmn3r_2329 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

._sectionIcon_gmn3r_413 {
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 14px;

  font-size: 24px;

  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.12);

  flex-shrink: 0;
}

._sectionContent_gmn3r_2379 {
  display: flex;
  flex-direction: column;
}

._sectionName_gmn3r_439 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}

._sectionMeta_gmn3r_451 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

._headerNavBtns_gmn3r_2159 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* SurveyEmpView.module.css */
._page_153hb_3 {
    padding: 24px;
    background: #f8fafc;
    min-height: 100vh;
}

/* Loading State */
._loadingContainer_153hb_17 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
}

._spinner_153hb_35 {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: _spin_153hb_35 0.8s linear infinite;
}

@keyframes _spin_153hb_35 {
    to {
        transform: rotate(360deg);
    }
}

/* Error State */
._errorContainer_153hb_67 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    color: #64748b;
    text-align: center;
}

._errorContainer_153hb_67 h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

/* Header */
._header_153hb_103 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    padding: 20px 24px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._headerLeft_153hb_125 {
    display: flex;
    gap: 16px;
    flex: 1;
}

._backBtn_153hb_137 {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #64748b;
}

._backBtn_153hb_137:hover {
    background: #f8fafc;
    border-color: #f59e0b;
    color: #f59e0b;
}

._headerLeft_153hb_125 h1 {
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px 0;
}

._description_153hb_191 {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Stats Grid */
._statsGrid_153hb_205 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

._statCard_153hb_219 {
    background: white;
    padding: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._statIcon_153hb_239 {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

._statContent_153hb_257 {
    flex: 1;
}

._statLabel_153hb_265 {
    font-size: 11px;
    color: #64748b;
    display: block;
    margin-bottom: 4px;
}

._statValue_153hb_279 {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* Progress Section */
._progressSection_153hb_293 {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._progressHeader_153hb_309 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 8px;
}

._progressBarTrack_153hb_327 {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

._progressBarFill_153hb_341 {
    height: 100%;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Questions Section */
._questionsSection_153hb_357 {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._sectionHeader_153hb_373 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

._sectionHeader_153hb_373 h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

._questionCount_153hb_405 {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 20px;
}

._questionsList_153hb_421 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Question Card */
._questionCard_153hb_435 {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

._questionCard_153hb_435:hover {
    border-color: #fde68a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

._questionHeader_153hb_459 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

._questionType_153hb_475 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
}

._requiredBadge_153hb_497 {
    font-size: 10px;
    color: #dc2626;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 4px;
}

._questionText_153hb_513 {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 12px;
}

._questionAnswer_153hb_527 {
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 8px;
}

._answerLabel_153hb_541 {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 8px;
}

._answerContent_153hb_557 {
    font-size: 13px;
    color: #0f172a;
}

._notAnswered_153hb_567 {
    color: #94a3b8;
    font-style: italic;
}

/* Answer Styles */
._answerEmoji_153hb_579 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._answerEmojiIcon_153hb_591 {
    font-size: 28px;
}

._answerEmojiLabel_153hb_599 {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

._answerNps_153hb_611 {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

._answerNpsValue_153hb_623 {
    font-size: 24px;
    font-weight: 700;
    color: #f59e0b;
}

._answerNpsLabel_153hb_635 {
    font-size: 11px;
    color: #64748b;
}

._answerRating_153hb_645 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

._ratingStars_153hb_659 {
    display: flex;
    gap: 4px;
}

._starFilled_153hb_669 {
    color: #fbbf24;
    fill: #fbbf24;
}

._starEmpty_153hb_679 {
    color: #cbd5e1;
}

._answerRatingValue_153hb_687 {
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

._answerOptions_153hb_699 {
    display: inline-block;
    padding: 4px 12px;
    background: #e0f2fe;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #0284c7;
}

._answerCheckboxGroup_153hb_719 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

._answerCheckboxItem_153hb_731 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fef3c7;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    color: #92400e;
}

._answerText_153hb_755 {
    font-size: 13px;
    line-height: 1.5;
    color: #0f172a;
    white-space: pre-wrap;
}

._answerYesNo_153hb_769 {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

._answerYes_153hb_769 {
    background: #dcfce7;
    color: #16a34a;
}

._answerNo_153hb_795 {
    background: #fee2e2;
    color: #dc2626;
}

._answerValue_153hb_805 {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

/* Status Badge */
._statusBadge_153hb_819 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Footer Info */
._footerInfo_153hb_841 {
    background: white;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 11px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

._infoRow_153hb_865 {
    display: flex;
    gap: 24px;
}

/* Back Button */
._backButton_153hb_877 {
    padding: 8px 20px;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

._backButton_153hb_877:hover {
    background: #d97706;
}

/* Responsive */
@media (max-width: 1024px) {
    ._statsGrid_153hb_205 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    ._page_153hb_3 {
        padding: 16px;
    }

    ._header_153hb_103 {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    ._headerRight_153hb_943 {
        align-self: flex-start;
    }

    ._statsGrid_153hb_205 {
        grid-template-columns: 1fr;
    }

    ._footerInfo_153hb_841 {
        flex-direction: column;
    }

    ._infoRow_153hb_865 {
        flex-direction: column;
        gap: 8px;
    }
}

._answerImageContainer_153hb_979 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

._answerImage_153hb_979 {
    width: 250px;
    max-width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

._viewImageLink_153hb_1011 {
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

._viewImageLink_153hb_1011:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   ShiftView.module.css  — compact, small-font UI
   ═══════════════════════════════════════════════ */

/* ── Page ── */
._page_gc74l_11 {
  background: #f8fafc;
  min-height: 100vh;
}

._loadingWrap_gc74l_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 200px;
  font-size: 12px;
  color: #64748b;
}

._spinner_gc74l_41 {
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: _spin_gc74l_41 0.7s linear infinite;
}

@keyframes _spin_gc74l_41 {
  to { transform: rotate(360deg); }
}

/* ── Hero Header ── */
._heroHeader_gc74l_69 {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

._heroLeft_gc74l_89 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 220px;
}

._backBtn_gc74l_105 {
  width: 26px;
  height: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
  color: #475569;
  transition: background 0.15s;
}

._backBtn_gc74l_105:hover {
  background: #f1f5f9;
}

._shiftIconWrap_gc74l_145 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._heroInfo_gc74l_165 {
  flex: 1;
}

._heroTitleRow_gc74l_173 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

._heroTitle_gc74l_173 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

._statusBadge_gc74l_201 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
}

._heroMeta_gc74l_217 {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

._heroDot_gc74l_235 {
  color: #cbd5e1;
}

._heroDesc_gc74l_243 {
  font-size: 11px;
  color: #94a3b8;
}

._heroStats_gc74l_253 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

._heroStatItem_gc74l_267 {
  min-width: 90px;
}

._heroStatLabel_gc74l_275 {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 2px;
  white-space: nowrap;
}

._heroStatValue_gc74l_289 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

._heroActions_gc74l_303 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

._editBtn_gc74l_317 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #3b82f6;
  background: #fff;
  color: #3b82f6;
  cursor: pointer;
  transition: background 0.15s;
}

._editBtn_gc74l_317:hover {
  background: #eff6ff;
}

._menuWrap_gc74l_355 {
  position: relative;
}

._menuBtn_gc74l_363 {
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
}

._menuDropdown_gc74l_389 {
  position: absolute;
  right: 0;
  top: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 99;
  min-width: 120px;
  overflow: hidden;
}

._menuItem_gc74l_415 {
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  color: #334155;
  transition: background 0.1s;
}

._menuItem_gc74l_415:hover {
  background: #f1f5f9;
}

._menuItemDanger_gc74l_439 {
  color: #dc2626;
}

/* ── Tab Bar ── */
._tabBar_gc74l_449 {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  gap: 0;
  padding: 0 20px;
}

._tab_gc74l_449 {
  font-size: 12px;
  font-weight: 500;
  padding: 9px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: #64748b;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

._tab_gc74l_449:hover {
  color: #3b82f6;
}

._tabActive_gc74l_501 {
  color:var(--color-black);
  border-bottom-color: var(--color-primary);
}

/* ── Tab Content ── */
._tabContent_gc74l_513 {
  padding: 16px 20px;
}

._comingSoon_gc74l_521 {
  text-align: center;
  padding: 60px;
  color: #94a3b8;
  font-size: 12px;
}

/* ── Overview Layout ── */
._overviewLayout_gc74l_537 {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

._overviewMain_gc74l_549 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._overviewSide_gc74l_565 {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}

/* ── Section Card ── */
._sectionCard_gc74l_581 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

._sectionCardHead_gc74l_595 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

._sectionIcon_gc74l_613 {
  display: flex;
  align-items: center;
}

._sectionTitle_gc74l_623 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._sectionCardBody_gc74l_635 {
  padding: 12px 14px;
}

._sectionSubTitle_gc74l_643 {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

/* ── Field Grid ── */
._fieldGrid4_gc74l_659 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 14px;
}

._fieldGrid5_gc74l_671 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 14px;
}

._field_gc74l_659 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._fieldLabel_gc74l_695 {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._fieldValue_gc74l_711 {
  font-size: 12px;
  color: #1e293b;
  font-weight: 500;
}

/* ── Inline Badges ── */
._inlineBadge_gc74l_725 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-block;
}

._colorTagDisplay_gc74l_741 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._colorDot_gc74l_753 {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Toggles ── */
._toggleRow_gc74l_771 {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

._toggleGrid_gc74l_785 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

._toggleItem_gc74l_797 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  background: #fafbfc;
}

._toggleIcon_gc74l_817 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

._toggleLabel_gc74l_829 {
  font-size: 11px;
  color: #334155;
  flex: 1;
}

._toggleVal_gc74l_841 {
  font-size: 10px;
  font-weight: 600;
}

/* ── Day Pills ── */
._dayPillsRow_gc74l_853 {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

._dayPill_gc74l_853 {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: default;
}

._dayPillActive_gc74l_883 {
  background: var( --color-primary-lighter);
  color: var(--color-black);
  border: 1px solid var( --color-primary);
}

._dayPillOff_gc74l_895 {
  background: #f8fafc;
  color: #cbd5e1;
  border: 1px solid #e2e8f0;
}

/* ── View Rotation Button ── */
._viewRotBtn_gc74l_909 {
  font-size: 11px;
  color: #3b82f6;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Notes ── */
._notesBox_gc74l_931 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._noteItem_gc74l_943 {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: #334155;
}

._noteDot_gc74l_957 {
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── Preview Card (side) ── */
._previewCard_gc74l_969 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

._previewCardHead_gc74l_983 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

._previewCardTitle_gc74l_1001 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._previewStatusBadge_gc74l_1013 {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}

._previewShiftRow_gc74l_1027 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._previewShiftIcon_gc74l_1043 {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._previewShiftName_gc74l_1065 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._previewShiftMeta_gc74l_1077 {
  font-size: 10px;
  color: #94a3b8;
}

._previewSection_gc74l_1087 {
  padding: 8px 12px;
  border-bottom: 1px solid #f8fafc;
}

._previewSectionTitle_gc74l_1097 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._previewVal_gc74l_1121 {
  font-size: 11px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

._previewMeta_gc74l_1135 {
  font-size: 10px;
  color: #64748b;
  line-height: 1.5;
}

._dayPillsRowSm_gc74l_1147 {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 5px;
}

._dayPillSmActive_gc74l_1161 {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  background: var( --color-primary-lighter);
  color: var(--color-black);
  border: 1px solid var( --color-primary);
}

._dayPillSmOff_gc74l_1181 {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  background: #f8fafc;
  color: #cbd5e1;
  border: 1px solid #e2e8f0;
}

._additionalBullets_gc74l_1201 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._bulletRow_gc74l_1213 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulletDot_gc74l_1225 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

._bulletText_gc74l_1241 {
  font-size: 10px;
  color: #334155;
}

/* ── Employees Tab ── */
._employeesWrap_gc74l_1253 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

._empAvatarCell_gc74l_1267 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._empAvatar_gc74l_1267 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._empAvatarImg_gc74l_1305 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

._empName_gc74l_1319 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._empEmail_gc74l_1331 {
  font-size: 10px;
  color: #94a3b8;
}

._empIdText_gc74l_1341 {
  font-size: 11px;
  color: #3b82f6;
  font-weight: 500;
}

._empField_gc74l_1353 {
  font-size: 11px;
  color: #334155;
}

._shiftBadgeWrap_gc74l_1363 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._shiftBadgeIcon_gc74l_1375 {
  font-size: 14px;
  flex-shrink: 0;
}

._shiftBadgeName_gc74l_1385 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._shiftBadgeTime_gc74l_1397 {
  font-size: 10px;
  color: #94a3b8;
}

._empStatusBadge_gc74l_1407 {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

._timeBadge_gc74l_1421 {
  font-size: 11px;
  font-weight: 500;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

._timeBadgeGreen_gc74l_1441 {
  font-size: 11px;
  font-weight: 500;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  ._overviewLayout_gc74l_537 {
    flex-direction: column;
  }
  ._overviewSide_gc74l_565 {
    width: 100%;
    position: static;
  }
  ._fieldGrid4_gc74l_659 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._fieldGrid5_gc74l_671 {
    grid-template-columns: repeat(3, 1fr);
  }
  ._toggleGrid_gc74l_785 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  ._heroHeader_gc74l_69 {
    flex-direction: column;
    gap: 10px;
  }
  ._heroStats_gc74l_253 {
    gap: 12px;
  }
  ._fieldGrid4_gc74l_659,
  ._fieldGrid5_gc74l_671 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._tabBar_gc74l_449 {
    overflow-x: auto;
    padding: 0 12px;
  }
  ._tabContent_gc74l_513 {
    padding: 12px;
  }
}

._departmentWrap_gc74l_1543 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._moreDept_gc74l_1555 {
  position: relative;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
}

._deptTooltip_gc74l_1571 {
  position: absolute;
  top: 24px;
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 999;
}

._moreDept_gc74l_1555:hover ._deptTooltip_gc74l_1571 {
  display: block;
}

._deptTooltip_gc74l_1571 div {
  padding: 4px 0;
  font-size: 12px;
  color: #374151;
}

/* ── Two-column overview layout ─────────────────────────────────────────────── */
._overviewLayout_gc74l_537 {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
  align-items: flex-start;
}
 
._overviewMain_gc74l_549 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
 
._overviewSide_gc74l_565 {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}
 
/* ── Section card ────────────────────────────────────────────────────────────── */
._sectionCard_gc74l_581 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
 
._sectionCardHead_gc74l_595 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
}
 
._sectionIcon_gc74l_613 {
  display: flex;
  align-items: center;
}
 
._sectionTitle_gc74l_623 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}
 
._sectionCardBody_gc74l_635 {
  padding: 18px 20px;
}
 
/* ── Field grid layouts ──────────────────────────────────────────────────────── */
._fieldGrid4_gc74l_659 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
 
._fieldGrid5_gc74l_671 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
 
/* ── Individual field ────────────────────────────────────────────────────────── */
._field_gc74l_659 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
 
._fieldLabel_gc74l_695 {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
 
._fieldValue_gc74l_711 {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
}
 
/* ── Inline badge (status, approval, etc.) ───────────────────────────────────── */
._inlineBadge_gc74l_725 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
 
/* ── Color tag display ───────────────────────────────────────────────────────── */
._colorTagDisplay_gc74l_741 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}
 
._colorDot_gc74l_753 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
 
/* ── Toggle item row ─────────────────────────────────────────────────────────── */
._toggleRow_gc74l_771 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 6px 0;
}
 
._toggleGrid_gc74l_785 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
 
._toggleItem_gc74l_797 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  background: #fafafa;
}
 
._toggleIcon_gc74l_817 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
 
._toggleLabel_gc74l_829 {
  font-size: 11.5px;
  color: #374151;
  font-weight: 500;
  flex: 1;
}
 
._toggleVal_gc74l_841 {
  font-size: 11px;
  font-weight: 600;
}
 
/* ── Day pills row ───────────────────────────────────────────────────────────── */
._dayPillsRow_gc74l_853 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
 
._dayPill_gc74l_853 {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
 
/* Active working day */
._dayPillActive_gc74l_883 {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
 
/* Weekly off / rest day */
._dayPillOff_gc74l_895 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
 
/* Not in either set */
._dayPillInactive_gc74l_2003 {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}
 
/* Meta text below pills */
._dayPillMeta_gc74l_2017 {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}
 
/* ── Smaller day pills for the preview panel ─────────────────────────────────── */
._dayPillsRowSm_gc74l_1147 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
 
._dayPillSmActive_gc74l_1161 {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #dcfce7;
  color: #16a34a;
}
 
._dayPillSmOff_gc74l_1181 {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 400;
  background: #f1f5f9;
  color: #94a3b8;
}
 
/* ── Rotation pattern section header ─────────────────────────────────────────── */
._patternHeaderRow_gc74l_2083 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
 
._patternHeaderLabel_gc74l_2097 {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
 
._patternNameBadge_gc74l_2109 {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 2px 8px;
}
 
/* ── Pattern cards flex row ──────────────────────────────────────────────────── */
._patternCardsRow_gc74l_2129 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
 
/* Individual read-only pattern card */
._patternCard_gc74l_2129 {
  position: relative;
  width: 130px;
  min-height: 120px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
 
/* "#1" sequence badge (top-left of card) */
._patternSeqBadge_gc74l_2173 {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #3b82f6;
  background: #eff6ff;
  border-radius: 4px;
  padding: 1px 5px;
}
 
/* Icon circle inside card */
._patternIconWrap_gc74l_2199 {
  width: 40px;
  height: 40px;
  background: #f8fafc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
 
._patternIcon_gc74l_2199 {
  font-size: 20px;
}
 
/* Shift name text */
._patternShiftName_gc74l_2231 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  margin-bottom: 3px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
/* Time range text */
._patternTimeRange_gc74l_2257 {
  font-size: 10px;
  color: #64748b;
  text-align: center;
}
 
/* Pattern count hint */
._patternCountHint_gc74l_2271 {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 8px;
}
 
/* ── Assignment employee cards ───────────────────────────────────────────────── */
._empCardsRow_gc74l_2285 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
 
._empCard_gc74l_2285 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
}
 
/* Initials avatar */
._empCardAvatar_gc74l_2321 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
 
._empCardInfo_gc74l_2349 {
  display: flex;
  flex-direction: column;
}
 
._empCardName_gc74l_2359 {
  font-weight: 500;
  color: #1e293b;
  line-height: 1.2;
}
 
._empCardCode_gc74l_2371 {
  font-size: 11px;
  color: #64748b;
}
 
/* ── Notes box ───────────────────────────────────────────────────────────────── */
._notesBox_gc74l_931 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
 
._noteItem_gc74l_943 {
  display: flex;
  gap: 6px;
  font-size: 12.5px;
  color: #374151;
}
 
._noteDot_gc74l_957 {
  color: #94a3b8;
  flex-shrink: 0;
}
 
/* ── RIGHT PREVIEW PANEL ─────────────────────────────────────────────────────── */
._previewCard_gc74l_969 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
 
._previewCardHead_gc74l_983 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
}
 
._previewCardTitle_gc74l_1001 {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}
 
._previewStatusBadge_gc74l_1013 {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
}
 
._previewShiftRow_gc74l_1027 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
 
._previewShiftIcon_gc74l_1043 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}
 
._previewShiftName_gc74l_1065 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}
 
._previewShiftMeta_gc74l_1077 {
  font-size: 11px;
  color: #94a3b8;
}
 
._previewSection_gc74l_1087 {
  padding: 10px 16px;
  border-top: 1px solid #f1f5f9;
}
 
._previewSectionTitle_gc74l_1097 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 5px;
}
 
._previewVal_gc74l_1121 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}
 
._previewMeta_gc74l_1135 {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
 
/* ── Additional bullets in preview panel ─────────────────────────────────────── */
._additionalBullets_gc74l_1201 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
 
._bulletRow_gc74l_1213 {
  display: flex;
  align-items: center;
  gap: 6px;
}
 
._bulletDot_gc74l_1225 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
 
._bulletText_gc74l_1241 {
  font-size: 11px;
  color: #475569;
}/* ══════════════════════════════════════════════════════════════════════════════
   ShiftRoster.module.css
   ══════════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Page ── */
._page_a5ily_25 {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-size: 11px;
  background: #f4f5f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #1e293b;
  overflow: hidden;
}

/* ── Header ── */
._header_a5ily_49 {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  flex-shrink: 0;
}

._headerLeft_a5ily_71 {
  display: flex;
  flex-direction: column;
}

._pageTitle_a5ily_81 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

._breadcrumb_a5ily_95 {
  font-size: 9.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

._breadcrumbSep_a5ily_111 {
  color: #94a3b8;
}

._breadcrumbActive_a5ily_119 {
  color: #64748b;
}

/* ── Tabs ── */
._tabBar_a5ily_129 {
  display: flex;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

._tab_a5ily_129 {
  padding: 9px 14px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  color: #94a3b8;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

._tab_a5ily_129:hover {
  color: #475569;
}

._tabActive_a5ily_175 {
  color:var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);;
  font-weight: 600;
}

/* ── Date Range Bar ── */
._dateRangeBar_a5ily_189 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._dateRangeLabel_a5ily_211 {
  font-size: 10.5px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._dateInputGroup_a5ily_225 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dateInputLabel_a5ily_237 {
  font-size: 9.5px;
  color: #94a3b8;
}

._dateInput_a5ily_225 {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10.5px;
  color: #374151;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

._loadBtn_a5ily_271 {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

._loadBtn_a5ily_271:hover {
  background: var(--color-primary);
}

._loadBtn_a5ily_271:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

._dateRangeInfo_a5ily_315 {
  font-size: 9.5px;
  color: #94a3b8;
}

/* ── Error / Loading ── */
._errorBanner_a5ily_327 {
  padding: 8px 16px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  color: #dc2626;
  font-size: 10.5px;
  flex-shrink: 0;
}

._loadingState_a5ily_345 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 40px;
}

._loadingIcon_a5ily_369 {
  font-size: 24px;
}

/* ── Tab Content ── */
._tabContent_a5ily_379 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIST VIEW
   ══════════════════════════════════════════════════════════════════════════════ */
._listViewWrapper_a5ily_401 {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 14px 24px;
  gap: 10px;
  overflow-y: auto;
}

._statsAccordion_a5ily_419 {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}

._accordionHeader_a5ily_433 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

._accordionHeader_a5ily_433:hover {
  background: #f3f4f6;
}

._accordionTitle_a5ily_459 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1f2937;
  font-size: 12px;
}

._accordionToggle_a5ily_477 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

._accordionContent_a5ily_497 {
  padding: 12px 16px 16px;
  border-top: 1px solid #f0f2f5;
}

._statRow_a5ily_507 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

._statCard_a5ily_519 {
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

._statCard_a5ily_519:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

._statIcon_a5ily_553 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statInfo_a5ily_573 {
  min-width: 0;
}

._statLabel_a5ily_581 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 2px;
  white-space: nowrap;
}

._statValue_a5ily_595 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

._searchInput_a5ily_607 {
  flex: 1;
  border: none;
  outline: none;
  font-size: 11px;
  color: #374151;
  background: transparent;
  min-width: 0;
  font-family: inherit;
}

._searchInput_a5ily_607::placeholder {
  color: #9ca3af;
}

._checkbox_a5ily_637 {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #6366f1;
  flex-shrink: 0;
}

._listEmpAvatar_a5ily_653 {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

._listEmpName_a5ily_679 {
  font-size: 11.5px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._listEmpEmail_a5ily_697 {
  font-size: 10px;
  color: #6b7280;
}

._empMeta_a5ily_707 {
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._empCell_a5ily_723 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

._teamCell_a5ily_737 {
  white-space: nowrap;
}

._shiftBadge_a5ily_745 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 7px;
  min-width: 148px;
  border: 1px solid transparent;
}

._shiftBadgeIcon_a5ily_765 {
  font-size: 13px;
  flex-shrink: 0;
}

._shiftBadgeName_a5ily_775 {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

._shiftBadgeTime_a5ily_789 {
  font-size: 9px;
  opacity: 0.85;
  white-space: nowrap;
}

._statusBadge_a5ily_801 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._btn_a5ily_821 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}

._btnSecondary_a5ily_853 {
  background: white;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._btnSecondary_a5ily_853:hover {
  background: #f3f4f6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — SCV BLOCK START
   All calendar-specific classes prefixed with "scv" are scoped here.
   ══════════════════════════════════════════════════════════════════════════════ */

._scvRoot_a5ily_883 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-size: 11px;
}

/* ── Legend bar ── */
._scvLegendBar_a5ily_907 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._scvLegendItem_a5ily_929 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._scvLegendDot_a5ily_945 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Body: left panel + grid area side by side ── */
._scvBody_a5ily_961 {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ── Left Panel ── */
._scvLeftPanel_a5ily_979 {
  width: 230px;
  min-width: 230px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar {
  width: 4px;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar-track {
  background: #f8fafc;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}

._scvLeftPanelSection_a5ily_1029 {
  padding: 10px 10px 8px;
  border-bottom: 1px solid #f1f5f9;
}

._scvLeftPanelPoolSection_a5ily_1039 {
  padding: 10px;
  flex: 1;
}

._scvLeftPanelSectionHeader_a5ily_1049 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._scvLeftPanelSectionTitle_a5ily_1061 {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

._scvLeftPanelFooter_a5ily_1073 {
  padding: 8px 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Select-all bar ── */
._scvSelectAllBar_a5ily_1091 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
  margin-bottom: 2px;
}

/* ── Badges ── */
._scvBadgeCount_a5ily_1109 {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

._scvBadgeCountAlert_a5ily_1123 {
  background: #fee2e2;
  color: #dc2626;
}

._scvBadgeCountNeutral_a5ily_1133 {
  background: #f1f5f9;
  color: #64748b;
}

/* ── Search bar (grid top) ── */
._scvSearchBar_a5ily_1145 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 9px;
  margin-bottom: 10px;
}

._scvSearchIcon_a5ily_1167 {
  color: #94a3b8;
  flex-shrink: 0;
}

._scvSearchInput_a5ily_1177 {
  border: none;
  background: transparent;
  font-size: 10.5px;
  color: #374151;
  width: 100%;
  outline: none;
  font-family: inherit;
}

._scvSearchInput_a5ily_1177::placeholder {
  color: #94a3b8;
}

._scvSearchClearBtn_a5ily_1205 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 0;
}

/* ── Unassigned panel search ── */
._scvPanelSearchBar_a5ily_1225 {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 7px;
}

._scvPanelSearchIcon_a5ily_1247 {
  color: #94a3b8;
  flex-shrink: 0;
}

._scvPanelSearchInput_a5ily_1257 {
  border: none;
  background: transparent;
  font-size: 10.5px;
  color: #374151;
  width: 100%;
  outline: none;
  font-family: inherit;
}

._scvPanelSearchInput_a5ily_1257::placeholder {
  color: #94a3b8;
}

._scvPanelEmpty_a5ily_1285 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

._scvUnassignedList_a5ily_1299 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

._scvUnassignedList_a5ily_1299::-webkit-scrollbar {
  width: 3px;
}

._scvUnassignedList_a5ily_1299::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}

._scvUnassignedCard_a5ily_1335 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  background: #f8fafc;
  border-radius: 7px;
  border: 1px solid #f1f5f9;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s, background 0.15s;
}

._scvUnassignedCard_a5ily_1335:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}

._scvUnassignedCard_a5ily_1335:active {
  cursor: grabbing;
}

._scvUnassignedCardInfo_a5ily_1381 {
  min-width: 0;
  flex: 1;
}

._scvUnassignedCardName_a5ily_1391 {
  font-size: 10.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._scvUnassignedCardMeta_a5ily_1409 {
  font-size: 9px;
  color: #94a3b8;
}

._scvDragHandle_a5ily_1419 {
  font-size: 14px;
  color: #c7d2fe;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Shift Pool ── */
._scvShiftPoolList_a5ily_1435 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

._scvPoolCard_a5ily_1449 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: default;
}

._scvPoolCardIcon_a5ily_1469 {
  font-size: 16px;
  flex-shrink: 0;
}

._scvPoolCardBody_a5ily_1479 {
  flex: 1;
  min-width: 0;
}

._scvPoolCardName_a5ily_1489 {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._scvPoolCardTime_a5ily_1505 {
  font-size: 9px;
  opacity: 0.8;
}

._scvPoolCardCount_a5ily_1515 {
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Avatar ── */
._scvAvatar_a5ily_1529 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — GRID LAYOUT BLOCK START
   Fixed two-panel layout:
     scvGridArea        → column flex, clips overflow, holds topbar + container + statsbar
     scvGridContainer   → row flex, ONLY overflow-x:auto here for horizontal scroll
       scvGridLabelPanel  → sticky left column, no overflow of its own
       scvGridScrollPane  → takes remaining width, overflow-x:auto + overflow-y:auto
                            this is the ONLY element that scrolls in both axes
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Grid area wrapper (right of left panel) ── */
._scvGridArea_a5ily_1573 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* max-width: calc(100vw - 230px); */
  width: 0; 
}

/* ── Top filter bar inside grid area ── */
._scvGridTopBar_a5ily_1597 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* ── Main container: label col + scroll pane side by side ── */
/* .scvGridContainer {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
  max-width: 100%; 
} */

._scvGridContainer_a5ily_1619 {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* ── Sticky label column ── */
._scvGridLabelPanel_a5ily_1663 {
  width: 130px;
  min-width: 130px;
  flex-shrink: 0;
  z-index: 10;
  background: #fff;
  border-right: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  /* ← REMOVE position:sticky and left:0 — not needed here, panel is in normal flow */
}

/* Corner header — height must match date header row height exactly (70px) */
._scvCornerCell_a5ily_1691 {
  height: 70px;
  min-height: 50px;
  flex-shrink: 0;
  background: #f1f5f9;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

/* One label row per shift — must match .scvShiftCellsRow min-height */
._scvShiftLabelCell_a5ily_1717 {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  min-height: 90px;
  flex-shrink: 0;
}

._scvShiftLabelCell_a5ily_1717:last-child {
  border-bottom: none;
}

/* Skeleton label */
._scvShiftLabelSkel_a5ily_1745 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  min-height: 90px;
  flex-shrink: 0;
}

._scvLabelEmptyCell_a5ily_1765 {
  flex: 1;
  min-height: 120px;
}

._scvGridScrollPane_a5ily_1775 {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  width: 0; /* ← ADD THIS — forces flex to shrink properly */
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-track {
  background: #f1f5f9;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

/* ── Date header row — sticky top inside scroll pane ── */
._scvDateHeaderRow_a5ily_1839 {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f8fafc;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
}

/* Individual date header cell */
._scvDateHeaderCell_a5ily_1863 {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 2px solid #e5e7eb;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

._scvDateHeaderCellWeekend_a5ily_1893 {
  background: #fafafa;
}

._scvDateHeaderCellToday_a5ily_1901 {
  background: #eef2ff;
}

._scvDateHeaderDay_a5ily_1909 {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 2px;
}

._scvDateHeaderDate_a5ily_1923 {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
}

._scvDateHeaderMonth_a5ily_1935 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

._scvDateHeaderCellToday_a5ily_1901 ._scvDateHeaderDate_a5ily_1923 {
  color: #6366f1;
}

._scvDateHeaderCellWeekend_a5ily_1893 ._scvDateHeaderDate_a5ily_1923 {
  color: #94a3b8;
}

._scvTodayIndicator_a5ily_1963 {
  width: 18px;
  height: 3px;
  background: #6366f1;
  border-radius: 2px;
  margin: 3px auto 0;
}

/* ── Shift data row (one per shift) ── */
._scvShiftCellsRow_a5ily_1715 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb;
  min-height: 90px;
  width: max-content;
}

._scvShiftCellsRow_a5ily_1715:last-child {
  border-bottom: none;
}

/* ── Individual date cell ── */
._scvShiftCell_a5ily_1715 {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  background: #fff;
  border-right: 1px solid #f1f5f9;
  padding: 5px;
  flex-shrink: 0;
  transition: background 0.1s;
  min-height: 90px;
  display: flex;
  flex-direction: column;
}

._scvShiftCellWeekend_a5ily_2039 {
  background: #fafafa;
}

._scvShiftCellOver_a5ily_2047 {
  background: #eef2ff !important;
}

/* ── Shift card ── */
._scvShiftCard_a5ily_2057 {
  flex: 1;
  min-height: 76px;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
}

._scvShiftCard_a5ily_2057:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

._scvShiftCardTopRow_a5ily_2095 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

._scvShiftCardIcon_a5ily_2111 {
  font-size: 11px;
}

._scvShiftCardName_a5ily_2119 {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

._scvShiftCardTime_a5ily_2131 {
  font-size: 9.5px;
  opacity: 0.8;
}

._scvShiftCardCount_a5ily_2141 {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  opacity: 0.7;
  margin-top: 3px;
}

/* ── Empty / off / holiday ── */
._scvEmptyCell_a5ily_2161 {
  flex: 1;
  min-height: 76px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: 10px;
  font-weight: 500;
  background: transparent;
  transition: all 0.15s;
}

._scvEmptyCellOver_a5ily_2191 {
  border-color: #6366f1;
  color: #6366f1;
  background: #eef2ff;
}

._scvWeeklyOffCell_a5ily_2203 {
  flex: 1;
  min-height: 76px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
}

._scvWeeklyOffDot_a5ily_2233 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  display: inline-block;
}

._scvHolidayCell_a5ily_2249 {
  flex: 1;
  min-height: 76px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: #f43f5e;
  font-weight: 600;
}

/* ── Skeleton ── */
._scvSkelCard_a5ily_2281 {
  flex: 1;
  min-height: 76px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
  animation: _scvSkelPulse_a5ily_1 1.4s ease-in-out infinite;
}

@keyframes _scvSkelPulse_a5ily_1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ── Shift row label ── */
._scvShiftRowLabel_a5ily_2325 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-left: 3px solid transparent;
  width: 100%;
  min-height: 90px;
}

._scvShiftRowLabelIcon_a5ily_2345 {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

._scvShiftRowLabelBody_a5ily_2357 {
  min-width: 0;
  flex: 1;
}

._scvShiftRowLabelName_a5ily_2367 {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

._scvShiftRowLabelTime_a5ily_2381 {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}

._scvRotBadge_a5ily_2393 {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  margin-top: 4px;
}

/* ── Stats bar ── */
._scvStatsBar_a5ily_2413 {
  display: flex;
  border-top: 2px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
  overflow-x: auto;
}

._scvStatItem_a5ily_2429 {
  flex: 1;
  padding: 8px 14px;
  min-width: 90px;
}

._scvStatItemBorder_a5ily_2441 {
  border-right: 1px solid #e5e7eb;
}

._scvStatLabel_a5ily_2449 {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 2px;
}

._scvStatValueRow_a5ily_2463 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._scvStatValue_a5ily_2463 {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
}

._scvStatPct_a5ily_2487 {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
}

._scvStatPctGreen_a5ily_2501 {
  background: #dcfce7;
  color: #16a34a;
}

._scvStatPctOrange_a5ily_2511 {
  background: #fff7ed;
  color: #ea580c;
}

/* ── Drag ghost ── */
._scvDragGhost_a5ily_2523 {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: _scvGhostIn_a5ily_1 0.2s ease;
}

@keyframes _scvGhostIn_a5ily_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — GRID LAYOUT BLOCK END
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   POPUP BLOCK START
   ══════════════════════════════════════════════════════════════════════════════ */

._scvPopupOverlay_a5ily_2603 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

._scvPopupCard_a5ily_2625 {
  background: #fff;
  border-radius: 14px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

._scvPopupHdr_a5ily_2645 {
  padding: 13px 14px 11px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid transparent;
}

._scvPopupHdrLeft_a5ily_2661 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._scvPopupHdrIcon_a5ily_2673 {
  font-size: 20px;
}

._scvPopupShiftName_a5ily_2681 {
  font-size: 13px;
  font-weight: 700;
}

._scvPopupShiftTime_a5ily_2691 {
  font-size: 10px;
  color: #64748b;
}

._scvPopupCloseBtn_a5ily_2701 {
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}

._scvPopupCloseBtn_a5ily_2701:hover {
  background: #e2e8f0;
}

._scvPopupInfoRow_a5ily_2737 {
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #f1f5f9;
}

._scvPopupInfoCol_a5ily_2751 {
  flex: 1;
}

._scvPopupEmpRow_a5ily_2759 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

._scvPopupEmpName_a5ily_2773 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._scvPopupEmpCode_a5ily_2785 {
  font-size: 10px;
  color: #94a3b8;
}

._scvPopupDateLabel_a5ily_2795 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 4px;
}

._scvPopupDateSub_a5ily_2809 {
  font-size: 10px;
  color: #64748b;
}

._scvFieldLabel_a5ily_2819 {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._scvPopupReasonWrap_a5ily_2835 {
  padding: 12px 16px;
}

._scvPopupTextarea_a5ily_2843 {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: inherit;
  resize: none;
  outline: none;
  color: #374151;
  margin-top: 4px;
  transition: border-color 0.15s;
}

._scvPopupTextarea_a5ily_2843:focus {
  border-color: #6366f1;
}

._scvPopupActions_a5ily_2879 {
  padding: 8px 16px 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f1f5f9;
}

._scvPopupFooter_a5ily_2895 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px;
  border-top: 1px solid #f1f5f9;
  text-align: right;
}

._scvBtnCancel_a5ily_2913 {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

._scvBtnCancel_a5ily_2913:hover {
  background: #f8fafc;
}

._scvBtnPrimary_a5ily_2945 {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}

._scvBtnPrimary_a5ily_2945:hover {
  opacity: 0.9;
}

._scvBtnPrimaryDisabled_a5ily_2985 {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

._scvPopupMsg_a5ily_2995 {
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  padding: 16px 0;
}

._scvPopupMsgErr_a5ily_3009 {
  color: #ef4444;
}

._scvDetailEmpList_a5ily_3017 {
  padding: 12px 16px;
  max-height: 300px;
  overflow-y: auto;
}

._scvDetailEmpRow_a5ily_3029 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #f8fafc;
}

._scvDetailEmpInfo_a5ily_3045 {
  flex: 1;
}

._scvDetailEmpName_a5ily_3053 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._scvDetailEmpMeta_a5ily_3065 {
  font-size: 10px;
  color: #94a3b8;
}

._scvAttendanceBadge_a5ily_3075 {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

._scvAttendanceBadgePresent_a5ily_3089 {
  background: #dcfce7;
  color: #16a34a;
}

._scvAttendanceBadgeAbsent_a5ily_3099 {
  background: #fee2e2;
  color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════════════════════
   POPUP BLOCK END
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  ._statRow_a5ily_507 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  ._statRow_a5ily_507 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._scvLeftPanel_a5ily_979 {
    width: 190px;
    min-width: 190px;
  }
}

@media (max-width: 640px) {
  ._scvLeftPanel_a5ily_979 {
    display: none;
  }
}
._overlay_1w3y9_3 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

._modal_1w3y9_27 {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: _popIn_1w3y9_1 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes _popIn_1w3y9_1 {
  from { transform: scale(0.93); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── header ── */
._header_1w3y9_63 {
  background: linear-gradient(180deg, #f8e7a0 0%, #ecd98b 100%);
  border-bottom: 1px solid #ead57c;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._headerLeft_1w3y9_81 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._avatar_1w3y9_93 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

._empName_1w3y9_115 {
  font-size: 13px;
  font-weight: 700;
  color: #172036;
  line-height: 1.3;
}

._empCode_1w3y9_129 {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #4f6484;
  margin-top: 2px;
  font-weight: 500;
}

._closeBtn_1w3y9_149 {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  color: #374151;
}

._closeBtn_1w3y9_149:hover {
  background: #ffffff;
}

/* ── body ── */
._body_1w3y9_189 {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  max-height: 55vh;
  background: #ffffff;
}

._body_1w3y9_189::-webkit-scrollbar {
  width: 4px;
}

._body_1w3y9_189::-webkit-scrollbar-thumb {
  background: #d4b15f;
  border-radius: 20px;
}

/* ── section ── */
._section_1w3y9_229 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._sectionLabel_1w3y9_241 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

._dateChip_1w3y9_263 {
  font-size: 9px;
  background: #f3f4f6;
  color: #475569;
  padding: 1px 6px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
}

._countPill_1w3y9_287 {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #111827;
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* ── current shift card ── */
._shiftCard_1w3y9_313 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._shiftCardTop_1w3y9_333 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._shiftBadge_1w3y9_345 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}

._shiftId_1w3y9_365 {
  font-size: 9.5px;
  color: #9ca3af;
  font-weight: 500;
}

._shiftTimes_1w3y9_377 {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

._timeChip_1w3y9_395 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  font-size: 10.5px;
  color: #6b7280;
}

._timeChip_1w3y9_395 strong {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

._timeDivider_1w3y9_429 {
  width: 1px;
  height: 28px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* ── attendance card ── */
._attendanceCard_1w3y9_445 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  overflow: hidden;
}

._attRow_1w3y9_459 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11.5px;
}

._attRow_1w3y9_459 + ._attRow_1w3y9_459 {
  border-top: 1px solid #fef3c7;
}

._attRow_1w3y9_459 span {
  color: #6b7280;
  font-weight: 500;
}

._attRow_1w3y9_459 strong {
  color: #111827;
  font-weight: 700;
}

._attStatus_1w3y9_503 {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid transparent;
}

._attStatus_1w3y9_503[data-status="present"] {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

._attStatus_1w3y9_503[data-status="absent"] {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

._attStatus_1w3y9_503[data-status="late"] {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

/* ── shift history ── */
._historyList_1w3y9_561 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._historyRow_1w3y9_573 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

._historyRow_1w3y9_573:hover {
  border-color: #fcd34d;
  background: #fffbeb;
}

._historyLeft_1w3y9_607 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._historyDot_1w3y9_619 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

._historyTime_1w3y9_639 {
  font-size: 10px;
  color: #6b7280;
  margin-top: 4px;
  font-weight: 500;
}

._historyDates_1w3y9_653 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: #9ca3af;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

._historyArrow_1w3y9_675 {
  color: #d1d5db;
  font-size: 9px;
}

/* ── empty / error ── */
._emptyState_1w3y9_687 {
  font-size: 11px;
  color: #9ca3af;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
}

._errorBox_1w3y9_707 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 500;
}

/* ── skeleton ── */
._skeleton_1w3y9_735 {
  border-radius: 6px;
  background: linear-gradient(90deg, #fef3c7 25%, #fde68a 50%, #fef3c7 75%);
  background-size: 200% 100%;
  animation: _shimmer_1w3y9_1 1.4s infinite;
  display: block;
}

@keyframes _shimmer_1w3y9_1 {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── footer ── */
._footer_1w3y9_763 {
  padding: 10px 14px 12px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #ececec;
  background: #ffffff;
}

._closeFooterBtn_1w3y9_779 {
  min-width: 90px;
  height: 30px;
  font-size: 10px;
  font-weight: 500;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #d5dae3;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s ease;
}

._closeFooterBtn_1w3y9_779:hover {
  background: #f9fafb;
}

._modal_1w3y9_27 {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

._header_1w3y9_63 {
  position: sticky;
  top: 0;
  z-index: 10;
}

._body_1w3y9_189 {
  flex: 1;
  overflow-y: auto;
  max-height: none;
}

._footer_1w3y9_763 {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #fff;
}/* ============================================================
   Shift Schedule — compact, professional dashboard
   Refined enterprise look: tight spacing, calm palette,
   consistent type scale. Accent color = #2563eb (blue).
   To re-brand, search/replace #2563eb.
   ============================================================ */

/* ── Page ── */
._page_1qvvw_17 {
  padding: 16px 20px 28px;
  background: #f8fafc;
  min-height: 100vh;
  box-sizing: border-box;
  color: #0f172a;
}

/* ── Loading / Error states ── */
._stateBox_1qvvw_35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 55vh;
  color: #64748b;
  font-size: 13px;
}

._spinner_1qvvw_57 {
  width: 34px;
  height: 34px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: _spin_1qvvw_57 0.8s linear infinite;
}

@keyframes _spin_1qvvw_57 {
  to {
    transform: rotate(360deg);
  }
}

._errorText_1qvvw_87 {
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
}

._retryBtn_1qvvw_99 {
  padding: 7px 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Header ── */
._header_1qvvw_123 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._headerTitle_1qvvw_137 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

._headerSub_1qvvw_155 {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* ── Top cards grid ── */
._topCards_1qvvw_169 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

._card_1qvvw_183 {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #e8edf5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

._cardHeader_1qvvw_205 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

._cardTitle_1qvvw_221 {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

._viewLink_1qvvw_235 {
  font-size: 11px;
  color: #2563eb;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}

/* Card 1 — Upcoming Shift */
._ucTop_1qvvw_253 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

._ucLeft_1qvvw_267 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._ucIconWrap_1qvvw_279 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

._ucIconWrap_1qvvw_279 svg {
  width: 16px;
  height: 16px;
}

._ucLabel_1qvvw_311 {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

._todayPill_1qvvw_325 {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: default;
}

._ucShift_1qvvw_347 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

._ucTime_1qvvw_363 {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 0 0 4px;
}

._ucDate_1qvvw_377 {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

/* Card 2 — This Week Summary */
._summaryRow_1qvvw_391 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 4px 0;
}

._summaryItem_1qvvw_409 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

._summaryNum_1qvvw_423 {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
}

._summaryItem_1qvvw_409 p {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
  text-align: center;
}

._green_1qvvw_461 {
  background: #dcfce7;
  color: #16a34a;
}

._purple_1qvvw_471 {
  background: #ede9fe;
  color: #7c3aed;
}

._orange_1qvvw_481 {
  background: #ffedd5;
  color: #ea580c;
}

/* Card 3 — Overview */
._overviewBody_1qvvw_493 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

._overviewLegend_1qvvw_507 {
  flex: 1;
  min-width: 0;
}

._legendItem_1qvvw_517 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #475569;
}

._legendLabel_1qvvw_535 {
  flex: 1;
}

._legendNum_1qvvw_543 {
  font-weight: 700;
  color: #0f172a;
}

._dot_1qvvw_553 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

._dotGreen_1qvvw_569 {
  background: #22c55e;
}

._dotGray_1qvvw_577 {
  background: #cbd5e1;
}

._dotRed_1qvvw_585 {
  background: #ef4444;
}

._viewCalLink_1qvvw_593 {
  font-size: 11px;
  color: #2563eb;
  cursor: pointer;
  font-weight: 500;
  margin-top: 6px;
}

/* Card 4 — Quick Actions */
._actionBtn_1qvvw_611 {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e8edf5;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

._actionBtn_1qvvw_611:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

._actionBtn_1qvvw_611+._actionBtn_1qvvw_611 {
  margin-top: 8px;
}

._actionIcon_1qvvw_651 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

._actionIcon_1qvvw_651 svg {
  width: 16px;
  height: 16px;
}

._actionText_1qvvw_683 h5 {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 2px;
}

._actionText_1qvvw_683 p {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

/* ── Date range bar ── */
._dateRangeBar_1qvvw_711 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

._dateRangeLabel_1qvvw_737 {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

._dateInputGroup_1qvvw_755 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._dateInputLabel_1qvvw_767 {
  font-size: 11px;
  color: #94a3b8;
}

._dateInput_1qvvw_755 {
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  background: #f8fafc;
  color: #0f172a;
}

._dateInput_1qvvw_755:focus {
  outline: none;
  border-color: #93c5fd;
  background: #fff;
}

._loadBtn_1qvvw_807 {
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._loadBtn_1qvvw_807:hover {
  background: #1d4ed8;
}

._loadBtn_1qvvw_807:disabled {
  opacity: 0.6;
  cursor: default;
}

._dateRangeInfo_1qvvw_853 {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

._viewBtns_1qvvw_865 {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

._viewBtn_1qvvw_865 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}

._viewBtn_1qvvw_865:hover {
  background: #f1f5f9;
}

._viewBtnActive_1qvvw_917 {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

/* ── Schedule grid (Week / Month) ── */
._scheduleGrid_1qvvw_931 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

._shiftCol_1qvvw_943 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._dayHeader_1qvvw_955 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 6px;
}

._dayLabel_1qvvw_969 {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

._todayChip_1qvvw_981 {
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border-radius: 999px;
  padding: 1px 7px;
}

/* Shift card */
._shiftCard_1qvvw_1001 {
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  padding: 11px;
  flex: 1;
  transition: box-shadow 0.15s, transform 0.15s;
  min-width: 0;
}

._shiftCard_1qvvw_1001:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

._shiftTop_1qvvw_1031 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

._shiftIconWrap_1qvvw_1045 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._shiftIconWrap_1qvvw_1045 svg {
  width: 16px;
  height: 16px;
}

._shiftMeta_1qvvw_1075 {
  min-width: 0;
}

._shiftType_1qvvw_1083 {
  font-size: 10px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

._shiftTime_1qvvw_1099 {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.25;
}

._statusBadge_1qvvw_1113 {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 9px;
  align-self: flex-start;
}

._sep_1qvvw_1133 {
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 9px;
}

._breaksRow_1qvvw_1145 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._breaksRow_1qvvw_1145 svg {
  margin-top: 1px;
  flex-shrink: 0;
}

._breaksLabel_1qvvw_1167 {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}

._breaksTime_1qvvw_1181 {
  font-size: 11px;
  color: #334155;
  font-weight: 600;
  margin-top: 1px;
  line-height: 1.25;
  word-break: break-word;
}

._viewDetails_1qvvw_1199 {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
}

._viewDetails_1qvvw_1199 svg {
  width: 12px;
  height: 12px;
}

/* ── List view ── */
._listView_1qvvw_1239 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._listRow_1qvvw_1251 {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: box-shadow 0.15s;
}

._listRow_1qvvw_1251:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

._listDate_1qvvw_1283 {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

._listIconWrap_1qvvw_1305 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._listIconWrap_1qvvw_1305 svg {
  width: 15px;
  height: 15px;
}

._listMain_1qvvw_1335 {
  flex: 1;
  min-width: 0;
}

._listShift_1qvvw_1345 {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

._listTime_1qvvw_1357 {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
}

._listInfo_1qvvw_1369 {
  width: 150px;
  flex-shrink: 0;
  font-size: 11px;
  color: #64748b;
}

._listInfo_1qvvw_1369 b {
  color: #334155;
  font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  ._topCards_1qvvw_169 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._scheduleGrid_1qvvw_931 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  ._scheduleGrid_1qvvw_931 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._listRow_1qvvw_1251 {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  ._listDate_1qvvw_1283,
  ._listInfo_1qvvw_1369 {
    width: auto;
  }
}

@media (max-width: 560px) {
  ._page_1qvvw_17 {
    padding: 14px 14px 24px;
  }

  ._topCards_1qvvw_169 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._scheduleGrid_1qvvw_931 {
    grid-template-columns: minmax(0, 1fr);
  }

  ._viewBtns_1qvvw_865 {
    margin-left: 0;
    width: 100%;
  }

  ._dateRangeInfo_1qvvw_853 {
    width: 100%;
  }
}/* Header */
._header_e277h_3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-primary-lightest);
  position: relative;
  overflow: hidden;
}

._left_e277h_31 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._breadcrumb_e277h_43 {
  font-size: 10px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

._breadcrumb_e277h_43 strong {
  color: var(--color-primary);
  font-weight: 600;
}

._backBtn_e277h_71 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-right: 6px;
  border: 1px solid #e5e7eb;
}

._backBtn_e277h_71:hover {
  background: #f3f4f6;
  color: var(--color-primary);
}

._title_e277h_111 {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

._subtitle_e277h_125 {
  font-size: 10px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

._actions_e277h_139 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._contentHead_e277h_151 {
  border-radius: 10px;
}

._addtitle_e277h_159 {
  font-size: 12px !important;
  font-weight: 600;
  margin-bottom: 12px;
  color: #374151;
}

._form_label_e277h_173 {
  color: #515151;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

/* Form Group */
._formGroup_e277h_191 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

._formGroup_e277h_191 input,
._formGroup_e277h_191 select,
._formGroup_e277h_191 textarea,
._formGroup_e277h_191 .form-control {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 11px;
  background: white;
  transition: all 0.3s ease;
}

._formGroup_e277h_191 input:focus,
._formGroup_e277h_191 select:focus,
._formGroup_e277h_191 textarea:focus,
._formGroup_e277h_191 .form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

/* Current Shift Box */
._currentShiftBox_e277h_251 {
  background: #fef3c7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border-left: 3px solid #f59e0b;
}

._currentShiftLabel_e277h_267 {
  font-size: 9px;
  font-weight: 600;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

._currentShiftContent_e277h_285 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._shiftName_e277h_297 {
  font-size: 12px;
  font-weight: 700;
  color: #78350f;
}

._shiftMeta_e277h_309 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #92400e;
}

._metaIcon_e277h_325 {
  width: 12px;
  height: 12px;
}

/* Radio Group */
._radioGroup_e277h_337 {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

._radioLabel_e277h_351 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
}

._radioLabel_e277h_351 input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Swap Card */
._swapCard_e277h_385 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

._swapAvatar_e277h_405 {
  width: 32px;
  height: 32px;
  background: #fef3c7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 14px;
}

._swapInfo_e277h_429 {
  flex: 1;
}

._swapName_e277h_437 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

._swapDept_e277h_449 {
  font-size: 9px;
  color: #64748b;
}

._swapChangeBtn_e277h_459 {
  padding: 4px 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #f59e0b;
  cursor: pointer;
  transition: all 0.2s;
}

._swapChangeBtn_e277h_459:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* File Input */
._fileInputWrapper_e277h_495 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._fileInputLabel_e277h_509 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

._fileInputLabel_e277h_509:hover {
  background: #f1f5f9;
  border-color: #f59e0b;
}

._fileIcon_e277h_549 {
  width: 12px;
  height: 12px;
}

._fileInput_e277h_495 {
  display: none;
}

._fileName_e277h_567 {
  font-size: 10px;
  color: #94a3b8;
}

/* Guidelines Cards */
._guidelinesCard_e277h_579 {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
}

._guidelinesTitle_e277h_595 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

._guidelinesIcon_e277h_615 {
  width: 14px;
  height: 14px;
  color: #f59e0b;
}

._guidelinesList_e277h_627 {
  margin: 0;
  padding-left: 16px;
}

._guidelinesList_e277h_627 li {
  font-size: 10px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 4px;
}

._noteCard_e277h_651 {
  background: #fffbeb;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #fde68a;
}

._noteTitle_e277h_667 {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 6px 0;
}

._noteText_e277h_681 {
  font-size: 10px;
  color: #78350f;
  line-height: 1.4;
  margin: 0;
}

._policyCard_e277h_695 {
  background: #eff6ff;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #bfdbfe;
}

._policyTitle_e277h_709 {
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 6px 0;
}

._policyList_e277h_723 {
  margin: 0;
  padding-left: 16px;
}

._policyList_e277h_723 li {
  font-size: 10px;
  color: #1e3a8a;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Tabs */
._tabsHeader_e277h_749 {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-primary-lightest);
  scrollbar-width: thin;
}

._tabsHeader_e277h_749::-webkit-scrollbar {
  height: 3px;
}

._tabsHeader_e277h_749::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

._tabsHeading_e277h_787 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 5px 12px;
  margin: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  background: #f9fafb;
  border: 1.5px solid transparent;
}

._tabsHeading_e277h_787:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

._activeTab_e277h_827 {
  background: var(--gradient-primary);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-primary-sm);
}

/* Coming Soon */
._comingSoon_e277h_843 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: #f8fafc;
  border-radius: 12px;
}

._comingSoonContent_e277h_861 {
  text-align: center;
}

._comingSoonIcon_e277h_869 {
  font-size: 48px;
  margin-bottom: 12px;
}

._comingSoonContent_e277h_861 h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px;
}

._comingSoonContent_e277h_861 p {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

/* Buttons in header */
._actions_e277h_139 button {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  ._header_e277h_3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  ._actions_e277h_139 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._radioGroup_e277h_337 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  ._swapCard_e277h_385 {
    flex-wrap: wrap;
  }

  ._fileInputWrapper_e277h_495 {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Badge */
._badge_e277h_981 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* My Requests Table Container */
._myRequestsTable_e277h_1003 {
  min-height: 400px;
}

/* Button Styles for Toolbar */
._btn_e277h_1013 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_e277h_1043 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_e277h_1043:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_e277h_1063 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_e277h_1063:hover {
  background: #f8fafc;
}

/* Stat summary row shown above the My Requests table */
._statsRow_e277h_1085 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

._statCard_e277h_1099 {
  flex: 1 1 120px;
  min-width: 100px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s;
}
._statCard_e277h_1099:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

._statValue_e277h_1129 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

._statLabel_e277h_1141 {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ══════════════════════════════════════════════════════
   Paste these into your ShiftChange.module.css
   (stat card classes from ShiftRoster.module.css)
   ══════════════════════════════════════════════════════ */

._statsAccordion_e277h_1169 {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}

._accordionHeader_e277h_1183 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

._accordionHeader_e277h_1183:hover {
  background: #f3f4f6;
}

._accordionTitle_e277h_1209 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1f2937;
  font-size: 12px;
}

._accordionToggle_e277h_1227 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

._accordionContent_e277h_1247 {
  padding: 12px 16px 16px;
  border-top: 1px solid #f0f2f5;
}

/* Grid of stat cards */
._statRow_e277h_1259 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 5px;
}

/* Individual stat card */
._statCard_e277h_1099 {
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

._statCard_e277h_1099:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

._statIcon_e277h_1309 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statInfo_e277h_1329 {
  min-width: 0;
}

._statLabel_e277h_1141 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 2px;
  white-space: nowrap;
}

._statValue_e277h_1129 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1100px) {
  ._statRow_e277h_1259 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  ._statRow_e277h_1259 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  ._statRow_e277h_1259 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._dashboard_1ncll_1 {
  min-height: 100vh;
  padding: 18px 20px 28px;
  background: #f7f9fd;
  color: #111827;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Top Header ── */
._topHeader_1ncll_19 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._topHeaderLeft_1ncll_33 h1 {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px;
  line-height: 1.2;
}

._topHeaderLeft_1ncll_33 p {
  font-size: 9px;
  color: #7b8498;
  margin: 0;
}

._mainContent_1ncll_61 {
  width: 100%;
}


._statsRow_1ncll_71 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

._statCard_1ncll_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

._statCard_1ncll_85:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

._statCardLeft_1ncll_117 {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

._statIcon_1ncll_131 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
}

._statIcon_1ncll_131 svg {
  width: 15px;
  height: 15px;
}

._statLabel_1ncll_163 {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._statValue_1ncll_183 {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

._statSubText_1ncll_199 {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
}

._statCard_1ncll_85._pending_1ncll_213 {
  background: #fffbeb;
}

._statIcon_1ncll_131._pending_1ncll_213,
._statValue_1ncll_183._pending_1ncll_213 {
  color: #d97706;
}

._statCard_1ncll_85._approved_1ncll_231 {
  background: #f0fdf4;
}

._statIcon_1ncll_131._approved_1ncll_231,
._statValue_1ncll_183._approved_1ncll_231 {
  color: #16a34a;
}

._statCard_1ncll_85._rejected_1ncll_249 {
  background: #fef2f2;
}

._statIcon_1ncll_131._rejected_1ncll_249,
._statValue_1ncll_183._rejected_1ncll_249 {
  color: #dc2626;
}

._statCard_1ncll_85._totalHours_1ncll_267 {
  background: #eff6ff;
}

._statIcon_1ncll_131._totalHours_1ncll_267,
._statValue_1ncll_183._totalHours_1ncll_267 {
  color: #2563eb;
}

._statCard_1ncll_85._synced_1ncll_285 {
  background: #f5f3ff;
}

._statIcon_1ncll_131._synced_1ncll_285,
._statValue_1ncll_183._synced_1ncll_285 {
  color: #7c3aed;
}

._statCard_1ncll_85._cost_1ncll_303 {
  background: #fdf2f8;
}

._statIcon_1ncll_131._cost_1ncll_303,
._statValue_1ncll_183._cost_1ncll_303 {
  color: #db2777;
}

._statCard_1ncll_85._pendingApprovals_1ncll_321 {
  background: #ecfeff;
}

._statIcon_1ncll_131._pendingApprovals_1ncll_321,
._statValue_1ncll_183._pendingApprovals_1ncll_321 {
  color: #0891b2;
}

/* ── Analytics Row ── */
._analyticsRow_1ncll_341 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

._analyticsCard_1ncll_355 {
  background: #fff;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

._analyticsCardTitle_1ncll_371 {
  font-size: 10px;
  font-weight: 700;
  color: #182033;
  margin-bottom: 10px;
}

._donutContainer_1ncll_385 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._donutChart_1ncll_397 {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

._donutCenter_1ncll_411 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

._donutCenterValue_1ncll_431 {
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

._donutCenterLabel_1ncll_445 {
  font-size: 7px;
  color: #7b8498;
  font-weight: 500;
  margin-top: 2px;
}

._donutLegend_1ncll_459 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._legendItem_1ncll_471 {
  font-size: 9px;
  color: #374151;
  font-weight: 500;
  display: flex;
  align-items: center;
}

._legendDot_1ncll_487 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}

._legendDot_1ncll_487._weekdays_1ncll_505 {
  background: #2563eb;
}

._legendDot_1ncll_487._weekends_1ncll_513 {
  background: #f59e0b;
}

._legendDot_1ncll_487._holidays_1ncll_521 {
  background: #ef4444;
}

._legendDot_1ncll_487._others_1ncll_529 {
  background: #94a3b8;
}

._analyticsTrend_1ncll_537 {
  margin-top: 10px;
  font-size: 9px;
  font-weight: 600;
  color: #16a34a;
}

._deptBar_1ncll_551 {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

._deptBar_1ncll_551:last-child {
  margin-bottom: 0;
}

._deptName_1ncll_575 {
  font-size: 9px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._deptBarTrack_1ncll_593 {
  height: 6px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

._deptBarFill_1ncll_607 {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

._deptHours_1ncll_619 {
  font-size: 9px;
  color: #6b7280;
  font-weight: 600;
  text-align: right;
}

._syncRow_1ncll_633 {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
}

._syncRow_1ncll_633:last-child {
  border-bottom: none;
}

._syncDate_1ncll_659 {
  font-size: 9px;
  color: #6b7280;
  font-weight: 500;
}

._syncCount_1ncll_671 {
  font-size: 9px;
  color: #374151;
}

._syncBadge_1ncll_681 {
  font-size: 8px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Filter Panel (matches screenshot: title + subtitle + labeled grid) ── */
._filterPanel_1ncll_703 {
  background: #fff;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

._filterPanelTitle_1ncll_721 {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 2px;
}

._filterPanelSub_1ncll_735 {
  font-size: 9px;
  color: #7b8498;
  margin: 0 0 14px;
}

._filterGrid_1ncll_747 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

._filterField_1ncll_763 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

._filterFieldLabel_1ncll_777 {
  font-size: 8px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._filterSelect_1ncll_793,
._filterDateInput_1ncll_795 {
  height: 32px;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0 10px;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.2s;
}

._filterSelect_1ncll_793:focus,
._filterDateInput_1ncll_795:focus {
  border-color: #7047e8;
  background: #fff;
}

._applyBtn_1ncll_839 {
  height: 32px;
  padding: 0 18px;
  border-radius: 7px;
  border: none;
  background: #8b5cf6;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

._applyBtn_1ncll_839:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.3);
}

._filterBottomRow_1ncll_879 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

._searchBox_1ncll_893 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 7px 12px;
  width: 260px;
}

._searchBox_1ncll_893 svg {
  width: 11px;
  height: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}

._searchBox_1ncll_893 input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 9px;
  color: #374151;
  width: 100%;
  font-family: inherit;
}

._viewActions_1ncll_949 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._viewIconBtn_1ncll_961 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
}

._viewIconBtn_1ncll_961 svg {
  width: 12px;
  height: 12px;
}

._viewIconBtn_1ncll_961:hover {
  background: #f8fafc;
}

._exportBtn_1ncll_1005 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #8b5cf6;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

._exportBtn_1ncll_1005 svg {
  width: 11px;
  height: 11px;
}

._exportBtn_1ncll_1005:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.3);
}

/* ── Table header ── */
._tableHeader_1ncll_1061 {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

/* ── Employee cell ── */
._employeeCell_1ncll_1077 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._empAvatar_1ncll_1089 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._empName_1ncll_1115 {
  font-size: 10px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

._empId_1ncll_1129 {
  font-size: 8px;
  color: #94a3b8;
}

._dateMain_1ncll_1139 {
  font-size: 9px;
  color: #374151;
  font-weight: 500;
}

/* ── Status badges ── */
._badge_1ncll_1153 {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: capitalize;
}

._badge_1ncll_1153._approved_1ncll_231 {
  background: #dcfce7;
  color: #16a34a;
}

._badge_1ncll_1153._pending_1ncll_213 {
  background: #fef9c3;
  color: #ca8a04;
}

._badge_1ncll_1153._rejected_1ncll_249 {
  background: #fee2e2;
  color: #dc2626;
}

._badge_1ncll_1153._synced_1ncll_285 {
  background: #dcfce7;
  color: #16a34a;
}

._badge_1ncll_1153._notsynced_1ncll_1215,
._badge_1ncll_1153._notSynced_1ncll_1217 {
  background: #f1f5f9;
  color: #64748b;
}

/* ── Action buttons ── */
._actions_1ncll_1229 {
  display: flex;
  align-items: center;
}

._actionBtn_1ncll_1239 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

._actionBtn_1ncll_1239 svg {
  width: 12px;
  height: 12px;
}

._actionBtn_1ncll_1239._approve_1ncll_231 {
  color: #16a34a;
}

._actionBtn_1ncll_1239._approve_1ncll_231:hover {
  background: #f0fdf4;
}

._actionBtn_1ncll_1239._reject_1ncll_249 {
  color: #dc2626;
}

._actionBtn_1ncll_1239._reject_1ncll_249:hover {
  background: #fef2f2;
}

._actionBtn_1ncll_1239._comment_1ncll_1307 {
  color: #2563eb;
}

._actionBtn_1ncll_1239._comment_1ncll_1307:hover {
  background: #eff6ff;
}

._actionBtn_1ncll_1239._view_1ncll_949 {
  color: #6b7280;
}

._actionBtn_1ncll_1239._view_1ncll_949:hover {
  background: #f1f5f9;
}

/* ── Expand arrow ── */
._expandArrow_1ncll_1341 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

._expandArrow_1ncll_1341 svg {
  width: 12px;
  height: 12px;
}

._detailPanels_1ncll_1365 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: #f9fafc;
}

._detailCard_1ncll_1381 {
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

._cardWide_1ncll_1397 {
  grid-column: span 2;
}

._cardMedium_1ncll_1405 {
  grid-column: span 1;
}

._cardNarrow_1ncll_1413 {
  grid-column: span 1;
}

._detailCardTitle_1ncll_1421 {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

._timeline_1ncll_1439 {
  position: relative;
  padding: 18px 0 0;
}

._timelineLine_1ncll_1449 {
  position: relative;
  height: 3px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-bottom: 10px;
}

._timelineFilled_1ncll_1465 {
  position: absolute;
  inset: 0;
  width: 65%;
  background: #7047e8;
  border-radius: 3px;
}

._timelineDots_1ncll_1481 {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

._timelineDot_1ncll_1481 {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7047e8;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #7047e8;
  transform: translateY(-50%);
}

._timelineDot_1ncll_1481._inactive_1ncll_1519 {
  background: #e2e8f0;
  box-shadow: 0 0 0 1px #e2e8f0;
}

._timelineLabel_1ncll_1529 {
  display: inline-flex;
  flex-direction: column;
  width: 19%;
  text-align: center;
  font-size: 8px;
  color: #6b7280;
  line-height: 1.4;
  font-weight: 500;
}

._timelineLabelBold_1ncll_1551 {
  display: inline-flex;
  flex-direction: column;
  width: 19%;
  text-align: center;
  font-size: 8px;
  color: #7047e8;
  line-height: 1.4;
  font-weight: 700;
}

._workedHoursInfo_1ncll_1573 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._workedValue_1ncll_1585 {
  font-size: 10px;
  color: #374151;
  font-weight: 500;
}

._totalWorkedValue_1ncll_1597 {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
}

._calcPolicy_1ncll_1611 {
  font-size: 8px;
  color: #94a3b8;
  margin-bottom: 8px;
}

._calcRow_1ncll_1623 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

._calcRow_1ncll_1623:last-child {
  border-bottom: none;
}

._calcLabel_1ncll_1649 {
  color: #6b7280;
}

._calcValue_1ncll_1657 {
  font-weight: 700;
  color: #111827;
}

._impactRow_1ncll_1667 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

._impactRow_1ncll_1667:last-child {
  border-bottom: none;
}

._impactLabel_1ncll_1693 {
  color: #6b7280;
}

._impactValue_1ncll_1701 {
  font-weight: 700;
  color: #111827;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
  ._analyticsRow_1ncll_341 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1100px) {
  ._statsRow_1ncll_71 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._filterGrid_1ncll_747 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  ._detailPanels_1ncll_1365 {
    grid-template-columns: 1fr 1fr;
  }

  ._cardWide_1ncll_1397 {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  ._analyticsRow_1ncll_341 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  ._statsRow_1ncll_71 {
    grid-template-columns: 1fr;
  }

  ._filterGrid_1ncll_747 {
    grid-template-columns: 1fr;
  }

  ._filterBottomRow_1ncll_879 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchBox_1ncll_893 {
    width: 100%;
  }

  ._detailPanels_1ncll_1365 {
    grid-template-columns: 1fr;
  }

  ._cardWide_1ncll_1397 {
    grid-column: span 1;
  }
}


._tableSection_1ncll_1829 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

._tableHeader_1ncll_1061 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ncll_1871 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1ncll_1885 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}


._filterBar_1ncll_1899 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1ncll_763 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_1ncll_1939 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1ncll_1957 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1ncll_793,
._filterInput_1ncll_1957 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_1ncll_793:focus,
._filterInput_1ncll_1957:focus {
  border-color: #94a3b8;
}

._filterClearX_1ncll_2013 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_1ncll_2013:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterClearX_1ncll_2013 svg {
  width: 8px;
  height: 8px;
}

._filterActions_1ncll_2069 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}


._btn_1ncll_2085 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btn_1ncll_2085 svg {
  width: 10px;
  height: 10px;
}

._btnPrimary_1ncll_2129 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1ncll_2129:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_1ncll_2149 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1ncll_2149:hover {
  background: #f8fafc;
}

._filterClearBtn_1ncll_2169 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_1ncll_2169:hover {
  background: #fef2f2 !important;
}


._filterBar_1ncll_1899 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1ncll_763 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_1ncll_1939 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1ncll_1957 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1ncll_793,
._filterDate_1ncll_795 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_1ncll_793:focus,
._filterDate_1ncll_795:focus {
  border-color: #94a3b8;
}

._filterDate_1ncll_795 {
  cursor: pointer;
  padding-right: 22px;
}

._filterClearX_1ncll_2013 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_1ncll_2013:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1ncll_2069 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
  padding-bottom: 0;
}

._filterActions_1ncll_2069 ._btn_1ncll_2085 {
  height: 28px;
  padding: 0 12px;
  font-size: 10px;
}


._btn_1ncll_2085 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 0.13s, box-shadow 0.13s;
  font-family: inherit;
}

._btnPrimary_1ncll_2129 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1ncll_2129:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnPrimary_1ncll_2129:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_1ncll_2149 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1ncll_2149:hover {
  background: #f8fafc;
}

._btnDanger_1ncll_2471 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._btnDanger_1ncll_2471:hover {
  background: #fef2f2;
}


._tableSection_1ncll_1829 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

._tableHeader_1ncll_1061 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ncll_1871 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1ncll_1885 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}


@media (max-width: 1100px) {
  ._filterField_1ncll_763 {
    flex: 1 1 150px;
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  ._filterBar_1ncll_1899 {
    gap: 8px;
    padding: 10px 12px;
  }

  ._filterField_1ncll_763 {
    flex: 1 1 140px;
    max-width: 180px;
    min-width: 90px;
  }

  ._filterActions_1ncll_2069 {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

@media (max-width: 600px) {
  ._filterBar_1ncll_1899 {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  ._filterField_1ncll_763 {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  ._filterActions_1ncll_2069 {
    flex: 1 1 auto;
    justify-content: stretch;
    gap: 6px;
  }

  ._filterActions_1ncll_2069 ._btn_1ncll_2085 {
    flex: 1;
    justify-content: center;
  }
}

._otAnalytics_1ncll_2665 {
  display: flex;
  align-items: center;
  gap: 20px;
}

._legend_1ncll_471 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

._legendRow_1ncll_2691 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

._legendDot_1ncll_487 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

._trend_1ncll_2717 {
  margin-top: 12px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
}

._statsRow_1ncll_71 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* 7 cards, change to match your count */
  gap: 10px;
  margin-bottom: 16px;
}

._statCard_1ncll_85 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 14px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8edf3;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s;
  min-width: 0;
}

._statCard_1ncll_85:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transform: none;
}

._statCardTop_1ncll_2783 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

._statLabel_1ncll_163 {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.3;
}

._statIcon_1ncll_131 {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0;
}

._statIcon_1ncll_131 svg {
  width: 13px;
  height: 13px;
}

._statValue_1ncll_183 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

._statSubText_1ncll_199 {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 3px;
}


._statValue_1ncll_183._pending_1ncll_213 {
  color: #d97706;
}

._statValue_1ncll_183._approved_1ncll_231 {
  color: #16a34a;
}

._statValue_1ncll_183._rejected_1ncll_249 {
  color: #dc2626;
}

._statValue_1ncll_183._totalHours_1ncll_267 {
  color: #2563eb;
}

._statValue_1ncll_183._synced_1ncll_285 {
  color: #7c3aed;
}

._statValue_1ncll_183._cost_1ncll_303 {
  color: #db2777;
}

._statValue_1ncll_183._pendingApprovals_1ncll_321 {
  color: #0891b2;
}


._statIcon_1ncll_131._pending_1ncll_213 {
  color: #d97706;
}

._statIcon_1ncll_131._approved_1ncll_231 {
  color: #16a34a;
}

._statIcon_1ncll_131._rejected_1ncll_249 {
  color: #dc2626;
}

._statIcon_1ncll_131._totalHours_1ncll_267 {
  color: #2563eb;
}

._statIcon_1ncll_131._synced_1ncll_285 {
  color: #7c3aed;
}

._statIcon_1ncll_131._cost_1ncll_303 {
  color: #db2777;
}

._statIcon_1ncll_131._pendingApprovals_1ncll_321 {
  color: #0891b2;
}


._statCard_1ncll_85._pending_1ncll_213,
._statCard_1ncll_85._approved_1ncll_231,
._statCard_1ncll_85._rejected_1ncll_249,
._statCard_1ncll_85._totalHours_1ncll_267,
._statCard_1ncll_85._synced_1ncll_285,
._statCard_1ncll_85._cost_1ncll_303,
._statCard_1ncll_85._pendingApprovals_1ncll_321 {
  background: #fff;
  border-color: #e8edf3;
}

/* Responsive */
@media (max-width: 1200px) {
  ._statsRow_1ncll_71 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  ._statsRow_1ncll_71 {
    grid-template-columns: repeat(2, 1fr);
  }
}


._analyticsRow_1ncll_341 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

._analyticsCard_1ncll_355 {
  background: #fff;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  min-height: 0;
}

._analyticsCardTitle_1ncll_371 {
  font-size: 10px;
  font-weight: 700;
  color: #182033;
  margin-bottom: 8px;
}


._donutContainer_1ncll_385 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._donutChart_1ncll_397 {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

._donutCenter_1ncll_411 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

._donutCenterValue_1ncll_431 {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}

._donutCenterLabel_1ncll_445 {
  font-size: 7px;
  color: #7b8498;
  font-weight: 500;
  margin-top: 2px;
}


._deptBar_1ncll_551 {
  display: grid;
  grid-template-columns: 60px 1fr 44px;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

._deptBar_1ncll_551:last-child {
  margin-bottom: 0;
}

._deptName_1ncll_575 {
  font-size: 9px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._deptBarTrack_1ncll_593 {
  height: 5px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

._deptBarFill_1ncll_607 {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

._deptHours_1ncll_619 {
  font-size: 9px;
  color: #6b7280;
  font-weight: 600;
  text-align: right;
}


._syncRow_1ncll_633 {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f9;
}

._syncRow_1ncll_633:last-child {
  border-bottom: none;
}

._syncDate_1ncll_659 {
  font-size: 8px;
  color: #6b7280;
  font-weight: 500;
}

._syncCount_1ncll_671 {
  font-size: 8px;
  color: #374151;
}

._syncBadge_1ncll_681 {
  font-size: 8px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}


@media (max-width: 1400px) {
  ._analyticsRow_1ncll_341 {
    grid-template-columns: 1fr 1fr 1fr;
    /* keep 3 cols */
  }
}

@media (max-width: 900px) {
  ._analyticsRow_1ncll_341 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  ._analyticsRow_1ncll_341 {
    grid-template-columns: 1fr;
  }
}


._deptBarList_1ncll_3365 {
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

._syncList_1ncll_3379 {
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}


._deptBarList_1ncll_3365::-webkit-scrollbar,
._syncList_1ncll_3379::-webkit-scrollbar {
  width: 3px;
}

._deptBarList_1ncll_3365::-webkit-scrollbar-track,
._syncList_1ncll_3379::-webkit-scrollbar-track {
  background: transparent;
}

._deptBarList_1ncll_3365::-webkit-scrollbar-thumb,
._syncList_1ncll_3379::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

._deptBarList_1ncll_3365::-webkit-scrollbar-thumb:hover,
._syncList_1ncll_3379::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

._tableSection_1ncll_1829 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

._tableHeader_1ncll_1061 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ncll_1871 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1ncll_1885 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

._topHeaderLeft_1ncll_33 h1 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 2px;
  line-height: 1.3;
}

._topHeaderLeft_1ncll_33 p {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
  font-weight: 400;
}

._btnPrimary_1ncll_2129 {
  background: #8b5cf6;
  color: white;
}

._btnPrimary_1ncll_2129:hover {
  background: #8b5cf6;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}


._statCard_1ncll_85._pending_1ncll_213 {
  background: #fff8ea;
}

._statCard_1ncll_85._pending_1ncll_213::before {
  background: #f59e0b;
}

._statIcon_1ncll_131._pending_1ncll_213 {
  background: #fdecc8;
  color: #d97706;
}

._statValue_1ncll_183._pending_1ncll_213 {
  color: #d97706;
}

._statCard_1ncll_85._approved_1ncll_231 {
  background: #ecfdf3;
}

._statCard_1ncll_85._approved_1ncll_231::before {
  background: #22c55e;
}

._statIcon_1ncll_131._approved_1ncll_231 {
  background: #d9fbe8;
  color: #16a34a;
}

._statValue_1ncll_183._approved_1ncll_231 {
  color: #16a34a;
}


._statCard_1ncll_85._rejected_1ncll_249 {
  background: #fef2f2;
}

._statCard_1ncll_85._rejected_1ncll_249::before {
  background: #ef4444;
}

._statIcon_1ncll_131._rejected_1ncll_249 {
  background: #fee2e2;
  color: #dc2626;
}

._statValue_1ncll_183._rejected_1ncll_249 {
  color: #dc2626;
}

._statCard_1ncll_85._totalHours_1ncll_267 {
  background: #eef5ff;
}

._statCard_1ncll_85._totalHours_1ncll_267::before {
  background: #3b82f6;
}

._statIcon_1ncll_131._totalHours_1ncll_267 {
  background: #dbeafe;
  color: #2563eb;
}

._statValue_1ncll_183._totalHours_1ncll_267 {
  color: #2563eb;
}

._statCard_1ncll_85._synced_1ncll_285 {
  background: #f5f3ff;
}

._statCard_1ncll_85._synced_1ncll_285::before {
  background: #8b5cf6;
}

._statIcon_1ncll_131._synced_1ncll_285 {
  background: #ede9fe;
  color: #7c3aed;
}

._statValue_1ncll_183._synced_1ncll_285 {
  color: #7c3aed;
}

._statCard_1ncll_85._cost_1ncll_303 {
  background: #fdf2f8;
}

._statCard_1ncll_85._cost_1ncll_303::before {
  background: #ec4899;
}

._statIcon_1ncll_131._cost_1ncll_303 {
  background: #fce7f3;
  color: #db2777;
}

._statValue_1ncll_183._cost_1ncll_303 {
  color: #db2777;
}

._statCard_1ncll_85._pendingApprovals_1ncll_321 {
  background: #ecfeff;
}

._statCard_1ncll_85._pendingApprovals_1ncll_321::before {
  background: #06b6d4;
}

._statIcon_1ncll_131._pendingApprovals_1ncll_321 {
  background: #cffafe;
  color: #0891b2;
}

._statValue_1ncll_183._pendingApprovals_1ncll_321 {
  color: #0891b2;
}._hero_4xx4u_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f9fafb;
  padding: 32px 20px;
  opacity: 1;
  transition: opacity 0.28s ease;
}

._heroFading_4xx4u_23 {
  opacity: 0;
  pointer-events: none;
}

._heroInner_4xx4u_33 {
  max-width: 560px;
  width: 100%;
  text-align: center;
}

._heroTitle_4xx4u_45 {
  font-size: 26px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

._heroSub_4xx4u_67 {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 24px;
}

._textareaWrap_4xx4u_81 {
  position: relative;
  text-align: left;
}

._heroTextarea_4xx4u_91 {
  width: 100%;
  border-radius: 16px;
  border: 1.5px solid var(--color-primary-light);
  background: #fff;
  padding: 14px 16px 52px;
  font-size: 14px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 100px;
}

._heroTextarea_4xx4u_91:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112, 71, 232, 0.12);
}

._heroTextarea_4xx4u_91::placeholder {
  color: #9ca3af;
}

._heroGenBtn_4xx4u_141 {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 7px 22px;
  border-radius: 10px;
  border: none;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

._heroGenBtn_4xx4u_141:disabled {
  background: #c4b5fd;
  cursor: not-allowed;
}

._heroGenBtn_4xx4u_141:not(:disabled):hover {
  transform: translateY(-1px);
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

._chips_4xx4u_195 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

._chip_4xx4u_195 {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid var(--color-primary-light);
  background: #fff;
  cursor: pointer;
  color: #4b5563;
  transition: all 0.2s ease;
  font-family: inherit;
}

._chip_4xx4u_195:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-1px);
}

._splitLayout_4xx4u_251 {
  display: flex;
  min-height: 100vh;
  background: #f5f7fc;
  animation: _cr-fadeUp_4xx4u_1 0.3s ease;
}

._leftCol_4xx4u_265 {
  width: 220px;
  flex-shrink: 0;
  padding: 20px 16px;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

._leftLogo_4xx4u_295 {
  font-size: 14px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

._leftTextarea_4xx4u_317 {
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid var(--color-primary-light);
  background: #fff;
  padding: 9px 10px;
  font-size: 12.5px;
  resize: none;
  outline: none;
  font-family: inherit;
  color: #111827;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

._leftTextarea_4xx4u_317:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(112, 71, 232, 0.12);
}

._leftTextarea_4xx4u_317::placeholder {
  color: #9ca3af;
}

._leftGenBtn_4xx4u_365 {
  width: 100%;
  padding: 8px;
  border-radius: 9px;
  border: none;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s;
}

._leftGenBtn_4xx4u_365:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._leftGenBtn_4xx4u_365:not(:disabled):hover {
  transform: translateY(-1px);
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-md);
}

._newQueryBtn_4xx4u_423 {
  width: 100%;
  padding: 7px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

._newQueryBtn_4xx4u_423:hover {
  background: #f5f3ff;
}

._leftChipsSection_4xx4u_457 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

._chipsLabel_4xx4u_471 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: rgba(112, 71, 232, 0.08);
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
}

._leftChips_4xx4u_457 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._leftChip_4xx4u_457 {
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 11px;
  border: 1px solid var(--color-primary-light);
  background: #fff;
  cursor: pointer;
  color: #4b5563;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  line-height: 1.4;
}

._leftChip_4xx4u_457:hover {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary-sm);
}

._rightCol_4xx4u_549 {
  flex: 1;
  min-width: 0;
  padding: 22px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Loader ── */
._loaderCard_4xx4u_569 {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #ede9fe;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: _cr-fadeUp_4xx4u_1 0.3s ease;
}

._loaderIcon_4xx4u_593 {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  animation: _cr-pulse_4xx4u_1 1.5s ease-in-out infinite;
}

._steps_4xx4u_617 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 380px;
}

._step_4xx4u_617 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  background: #fafafa;
  transition: all 0.3s ease;
}

._stepPending_4xx4u_655 {
  opacity: 0.4;
}

._stepActive_4xx4u_663 {
  border: 1px solid var(--color-primary-light);
  background: rgba(112, 71, 232, 0.06);
  transform: scale(1.015);
}

._stepDone_4xx4u_675 {
  border-color: #bbf7d0;
  background: #f0fdf4;
  opacity: 1;
}

._stepEmoji_4xx4u_687 {
  font-size: 16px;
}

._stepLabel_4xx4u_695 {
  flex: 1;
  font-size: 12.5px;
  color: #9ca3af;
}

._stepActive_4xx4u_663 ._stepLabel_4xx4u_695 {
  font-weight: 600;
  color: var(--color-primary);
}

._stepDone_4xx4u_675 ._stepLabel_4xx4u_695 {
  color: #166534;
}

._dots_4xx4u_725 {
  display: flex;
  gap: 3px;
  align-items: center;
}

._dot_4xx4u_725 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7c3aed;
  display: inline-block;
  animation: _cr-dotBounce_4xx4u_1 0.9s ease-in-out infinite;
}

/* ── Insight ── */
._insightCard_4xx4u_757 {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, #f5f3ff, #ffffff);
  border: 1px solid #ede9fe;
  border-left: 4px solid var(--color-primary);
  border-radius: 16px;
  padding: 16px 20px;
  animation: _cr-fadeUp_4xx4u_1 0.4s ease;
  box-shadow: 0 2px 8px rgba(112, 71, 232, 0.08);
}

._insightIconWrap_4xx4u_783 {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

._insightLabel_4xx4u_807 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c3aed;
  margin-bottom: 4px;
}

._insightText_4xx4u_825 {
  color: #374151;
  line-height: 1.75;
  font-size: 13.5px;
}

/* ── Query badge ── */
._queryBadge_4xx4u_839 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  animation: _cr-fadeUp_4xx4u_1 0.3s ease;
}

._qbadgeLabel_4xx4u_863 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c3aed;
  background: #f5f3ff;
  padding: 2px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}

._qbadgeText_4xx4u_887 {
  font-size: 13px;
  color: #374151;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._qbadgeCount_4xx4u_907 {
  font-size: 11px;
  color: #7c3aed;
  background: #f5f3ff;
  padding: 2px 9px;
  border-radius: 20px;
  flex-shrink: 0;
  font-weight: 600;
}

/* ── KPI grid ── */
._kpiGrid_4xx4u_929 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  animation: _cr-fadeUp_4xx4u_1 0.4s ease;
}

._kpiCard_4xx4u_943 {
  background: #fff;
  border-radius: 13px;
  padding: 12px 14px;
  border: 1px solid #ede9fe;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
}

._kpiCard_4xx4u_943:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.12);
}

._kpiIcon_4xx4u_975 {
  font-size: 20px;
  flex-shrink: 0;
}

._kpiBody_4xx4u_985 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._kpiTitle_4xx4u_997 {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._kpiValue_4xx4u_1019 {
  font-size: 15px;
  font-weight: 700;
  color: #1e1b4b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Results panel ── */
._resultsPanel_4xx4u_1039 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: _cr-fadeUp_4xx4u_1 0.4s ease;
}

/* ── Table card ── */
._tableCard_4xx4u_1055 {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(124, 58, 237, 0.1);
  overflow: hidden;
  animation: _cr-fadeUp_4xx4u_1 0.5s ease;
}

._tableHead_4xx4u_1071 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 11px;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid #ede9fe;
}

._tableTitle_4xx4u_1091 {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
}

._tableSearch_4xx4u_1103 {
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 12px;
  font-family: inherit;
  background: #faf9ff;
  color: #374151;
  width: 180px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

._tableSearch_4xx4u_1103:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

._tableScroll_4xx4u_1139 {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #c4b5fd #f5f3ff;
}

._tableScroll_4xx4u_1139::-webkit-scrollbar {
  height: 5px;
}

._tableScroll_4xx4u_1139::-webkit-scrollbar-track {
  background: #f5f3ff;
}

._tableScroll_4xx4u_1139::-webkit-scrollbar-thumb {
  background: #c4b5fd;
  border-radius: 10px;
}

._table_4xx4u_1055 {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

._table_4xx4u_1055 thead tr {
  background: linear-gradient(90deg, #f5f3ff, #ede9fe);
  border-bottom: 2px solid #c4b5fd;
}

._table_4xx4u_1055 thead th {
  padding: 9px 15px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
  white-space: nowrap;
}

._table_4xx4u_1055 tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s;
}

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

._table_4xx4u_1055 tbody tr:hover {
  background: #f5f3ff;
}

._table_4xx4u_1055 tbody td {
  padding: 9px 15px;
  color: #374151;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

._noData_4xx4u_1269 {
  text-align: center;
  color: #9ca3af;
  padding: 2rem !important;
  white-space: normal;
}

._badgeActive_4xx4u_1283 {
  display: inline-flex;
  align-items: center;
  background: #dcfce7;
  color: #166534;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._badgeInactive_4xx4u_1307 {
  display: inline-flex;
  align-items: center;
  background: #fee2e2;
  color: #991b1b;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Pagination ── */
._pagination_4xx4u_1333 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #ede9fe;
  font-size: 12px;
  color: #6b7280;
}

._pagBtn_4xx4u_1355 {
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

._pagBtn_4xx4u_1355:hover:not(:disabled) {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #7c3aed;
}

._pagBtn_4xx4u_1355:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Error / Empty ── */
._errorBox_4xx4u_1407 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 13px;
  padding: 13px 18px;
  color: #dc2626;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  animation: _cr-fadeUp_4xx4u_1 0.3s ease;
}

._emptyBox_4xx4u_1433 {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #ede9fe;
  padding: 52px 24px;
  text-align: center;
  animation: _cr-fadeUp_4xx4u_1 0.3s ease;
}

._emptyIcon_4xx4u_1451 {
  font-size: 42px;
  margin-bottom: 12px;
}

._emptyTitle_4xx4u_1461 {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

._emptyText_4xx4u_1475 {
  font-size: 13px;
  color: #9ca3af;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._splitLayout_4xx4u_251 {
    flex-direction: column;
  }

  ._leftCol_4xx4u_265 {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  ._leftChipsSection_4xx4u_457 {
    display: none;
  }

  ._rightCol_4xx4u_549 {
    padding: 16px;
  }

  ._kpiGrid_4xx4u_929 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  ._tableSearch_4xx4u_1103 {
    width: 100%;
  }

  ._heroTitle_4xx4u_45 {
    font-size: 22px;
  }

  ._heroSub_4xx4u_67 {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  ._hero_4xx4u_1 {
    padding: 24px 14px;
  }

  ._chips_4xx4u_195 {
    gap: 5px;
  }

  ._chip_4xx4u_195 {
    font-size: 11px;
    padding: 4px 10px;
  }

  ._kpiGrid_4xx4u_929 {
    grid-template-columns: 1fr 1fr;
  }
}._page_1rgag_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1rgag_1 *,
._page_1rgag_1 *::before,
._page_1rgag_1 *::after {
  box-sizing: border-box;
}

/* ── Stats Accordion ── */
._statsAccordion_1rgag_39 {
  border-radius: 8px;
  overflow: hidden;
}

._accordionHeader_1rgag_49 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._accordionHeader_1rgag_49:hover {
  background-color: #f9fafb;
}

._accordionTitle_1rgag_75 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 12px;
}

._accordionToggle_1rgag_93 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

._accordionToggle_1rgag_93:hover {
  color: #374151;
}

._statsGrid_1rgag_123 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px 16px 16px;
}

._summaryCard_1rgag_137 {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

._summaryCard_1rgag_137:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

._summaryLeft_1rgag_167 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._summaryIcon_1rgag_179 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

._summaryTitle_1rgag_201 {
  font-size: 10px;
  font-weight: 500;
  color: #475569;
}

._summaryRight_1rgag_213 {
  text-align: right;
}

._summaryValue_1rgag_221 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

._summaryTrend_1rgag_233 {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

._trendUp_1rgag_245 {
  color: #16a34a;
}
._trendDown_1rgag_251 {
  color: #dc2626;
}
._trendNeutral_1rgag_257 {
  color: #64748b;
}

._summarySub_1rgag_265 {
  font-size: 8px;
  color: #94a3b8;
  margin-top: 1px;
}

/* ── Layout ── */
._layout_1rgag_279 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

._layoutMain_1rgag_293 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* ── Table Section ── */
._tableSection_1rgag_309 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1rgag_327 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1rgag_349 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1rgag_363 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Buttons ── */
._btn_1rgag_377 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
}

._btnPrimary_1rgag_411 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_1rgag_411:hover {
  background: #f5c036;
  box-shadow: 0 2px 5px rgba(255, 202, 64, 0.3);
}

._btnSecondary_1rgag_431 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1rgag_431:hover {
  background: #f8fafc;
}

/* ── Filter Bar ── */
._filterBar_1rgag_453 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterWrapper_1rgag_475 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

._filterBadge_1rgag_489 {
  background: #ffca40;
  color: #1e293b;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 10px;
}

/* ── Bulk Bar ── */
._bulkSelectedBar_1rgag_509 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._bulkSelectedLeft_1rgag_531 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_1rgag_543 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_1rgag_571 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_1rgag_583 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_1rgag_595 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_1rgag_625 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1rgag_625:hover {
  background: #fef2f2;
}

._bulkDeselect_1rgag_643 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_1rgag_643:hover {
  background: #f1f5f9;
}

/* ── Badge ── */
._badge_1rgag_681 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Category Badge ── */
._categoryBadge_1rgag_705 {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Policy Name Cell ── */
._policyNameCell_1rgag_725 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._policyName_1rgag_725 {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

._policyDesc_1rgag_749 {
  font-size: 9px;
  color: #64748b;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Version Cell ── */
._versionCell_1rgag_769 {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ── Assigned Cell ── */
._assignedCell_1rgag_789 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._assignedCount_1rgag_801 {
  font-weight: 600;
  font-size: 12px;
  color: #0f172a;
}

._assignedPct_1rgag_813 {
  font-size: 10px;
  font-weight: 600;
  color: #16a34a;
}

/* ── Ack Cell ── */
._ackCell_1rgag_827 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

._progressBar_1rgag_841 {
  flex: 1;
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

._progressFill_1rgag_857 {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

._progressValue_1rgag_869 {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  min-width: 30px;
  text-align: right;
}

/* ── Created By Cell ── */
._createdByCell_1rgag_887 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._avatar_1rgag_899 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

._createdByName_1rgag_925 {
  font-weight: 500;
  font-size: 11px;
  color: #1e293b;
}

._createdByRole_1rgag_937 {
  font-size: 9px;
  color: #64748b;
}

/* ── Deadline / Last Updated Cell ── */
._deadlineCell_1rgag_949 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._deadlineDate_1rgag_961 {
  font-size: 11px;
  font-weight: 500;
  color: #334155;
}

._deadlineSub_1rgag_973 {
  font-size: 9px;
  color: #94a3b8;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  ._page_1rgag_1 {
    padding: 8px 10px;
  }
  ._statsGrid_1rgag_123 {
    grid-template-columns: repeat(2, 1fr);
  }
  ._filterBar_1rgag_453 {
    flex-direction: column;
    align-items: stretch;
  }
  ._tableHeader_1rgag_327 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._summaryValue_1rgag_221 {
    font-size: 16px;
  }
  ._summaryCard_1rgag_137 {
    padding: 8px 10px;
  }
}

@media (max-width: 480px) {
  ._statsGrid_1rgag_123 {
    grid-template-columns: 1fr;
  }
  ._summaryIcon_1rgag_179 {
    width: 24px;
    height: 24px;
  }
  ._summaryValue_1rgag_221 {
    font-size: 14px;
  }
}

/* ── Layout Update ── */
._layout_1rgag_279 {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 14px;
  align-items: start;
}

/* ── Sidebar ── */
._sidebar_1rgag_1075 {
  width: 100%;
}

._sidebarCard_1rgag_1083 {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
}

._sidebarTitle_1rgag_1097 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
}

._categoryList_1rgag_1111 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

._categoryItem_1rgag_1129 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
  border: 1px solid transparent;
}

._categoryItem_1rgag_1129:hover {
  background:var( --color-primary-warm);
}

._categoryItemActive_1rgag_1159 {
  background: var(--color-primary-lightest);
  border: var(--color-primary-lighter);
}

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

._categoryIcon_1rgag_1185 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

._categoryText_1rgag_1199 {
  font-size: 11px;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._categoryCount_1rgag_1217 {
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
  min-width: 10px;
  text-align: center;
}

._newCategoryBtn_1rgag_1233 {
  margin-top: 18px;
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  transition: 0.2s ease;
}

._newCategoryBtn_1rgag_1233:hover {
  background: #f9fafb;
}

/* ── Mobile ── */
@media (max-width: 1024px) {
  ._layout_1rgag_279 {
    grid-template-columns: 1fr;
  }
}
._sidebarTitle_1rgag_1097 {
  font-size: 13px;
}
._categoryIcon_1rgag_1185 svg {
  width: 12px;
  height: 12px;
}

._newCategoryBtn_1rgag_1233 {
  height: 34px;
  font-size: 11px;
}

._newCategoryBtn_1rgag_1233 svg {
  width: 12px;
  height: 12px;
}

._layout_1rgag_279 {
  grid-template-columns: 220px 1fr;
}

._categoryRight_1rgag_1333 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
._categoryActions_1rgag_1345 {
  display: flex;
  align-items: center;
  gap: 5px;
}
._actionIcon_1rgag_1355,
._deleteIcon_1rgag_1357 {
  font-size: 11px;
  cursor: pointer;
  color: #6b7280;
}
._deleteIcon_1rgag_1357 {
  color: #ef4444;
}

._categoryBadgeCount_1rgag_1375 {
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
   background: var(--color-violet-bg);
   border: 1px solid var(--color-violet-border);
   color: var(--color-violet-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

._categoryActions_1rgag_1345 {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
}

._categoryItem_1rgag_1129:hover ._categoryActions_1rgag_1345 {
  opacity: 1;
  visibility: visible;
}

._trendNeutral_1rgag_257 {
  color: #94a3b8;
  font-size: 8px;
  font-weight: 400;
}/* ─────────────────────────────────────────────
   Base
───────────────────────────────────────────── */
._page_1d9fd_7 {
    padding: 24px 28px;
    background: #f5f6fa;
    min-height: 100vh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a2e;
    max-width: 1400px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   Loading / Error
───────────────────────────────────────────── */
._loadingWrap_1d9fd_33 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 14px;
    font-size: 13px;
    color: #9ca3af;
}

._spinner_1d9fd_55 {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: _spin_1d9fd_55 0.7s linear infinite;
}

@keyframes _spin_1d9fd_55 {
    to {
        transform: rotate(360deg);
    }
}

._errorWrap_1d9fd_85 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 14px;
}

/* ─────────────────────────────────────────────
   Breadcrumb
───────────────────────────────────────────── */
._breadcrumb_1d9fd_109 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 14px;
}

._breadLink_1d9fd_127 {
    color: #3b82f6;
    cursor: pointer;
    font-weight: 500;
}

._breadLink_1d9fd_127:hover {
    text-decoration: underline;
}

._breadSep_1d9fd_147 {
    color: #9ca3af;
    font-size: 11px;
}

._breadCurrent_1d9fd_157 {
    color: #374151;
    font-weight: 500;
}

/* ─────────────────────────────────────────────
   Title Row
───────────────────────────────────────────── */
._titleRow_1d9fd_173 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

._titleLeft_1d9fd_191 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

._mainTitle_1d9fd_205 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
}

._titleActions_1d9fd_221 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   Buttons
───────────────────────────────────────────── */
._btnBlue_1d9fd_241 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    white-space: nowrap;
}

._btnBlue_1d9fd_241:hover {
    background: #1d4ed8;
}

._btnOutline_1d9fd_281 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: white;
    color: #374151;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}

._btnOutline_1d9fd_281:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

._btnDangerOutline_1d9fd_325:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* ─────────────────────────────────────────────
   Status Badges
───────────────────────────────────────────── */
._statusBadge_1d9fd_343 {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

._status_ACTIVE_1d9fd_363 {
    background: #dcfce7;
    color: #16a34a;
}

._status_DRAFT_1d9fd_373 {
    background: #f1f5f9;
    color: #64748b;
}

._status_ARCHIVED_1d9fd_383 {
    background: #fef3c7;
    color: #d97706;
}

._status_PENDING_1d9fd_393 {
    background: #dbeafe;
    color: #2563eb;
}

/* ─────────────────────────────────────────────
   Meta Chips Row
───────────────────────────────────────────── */
._metaRow_1d9fd_409 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

._metaChip_1d9fd_425 {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

._metaChipPurple_1d9fd_449 {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ede9fe;
}

/* ─────────────────────────────────────────────
   Content Description
───────────────────────────────────────────── */
._contentDesc_1d9fd_467 {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 18px;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────
   Info + Attachments Row
───────────────────────────────────────────── */
._infoAttachRow_1d9fd_487 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

._infoChipsWrap_1d9fd_503 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

._infoChip_1d9fd_503 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 150px;
    flex: 1;
}

._infoChipIcon_1d9fd_543 {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}

._infoChipLabel_1d9fd_555 {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 3px;
}

._infoChipValue_1d9fd_569 {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

/* Attachments box */
._attachBox_1d9fd_583 {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 260px;
    max-width: 320px;
}

._attachBoxTitle_1d9fd_601 {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}

._attachRow_1d9fd_619 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._attachThumb_1d9fd_631 {
    width: 38px;
    height: 38px;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
}

._attachMeta_1d9fd_655 {
    flex: 1;
}

._attachName_1d9fd_663 {
    font-size: 12.5px;
    font-weight: 600;
    color: #111827;
}

._attachType_1d9fd_675 {
    font-size: 11px;
    color: #9ca3af;
}

._attachDownBtn_1d9fd_685 {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}

._attachDownBtn_1d9fd_685:hover {
    background: #dbeafe;
}

/* ─────────────────────────────────────────────
   4 Stat Cards
───────────────────────────────────────────── */
._statCards_1d9fd_727 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

._statCard_1d9fd_727 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid transparent;
}

._statCardLabel_1d9fd_759 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

._statCardValue_1d9fd_773 {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

._statCardIcon_1d9fd_785 {
    opacity: 0.5;
}

._statCard_1d9fd_727 {
    background: #e7ebf0;
    border-color: #bcbdbe;
    color: #212121;
    font-size: 11px;
}

/* ─────────────────────────────────────────────
   Two Column
───────────────────────────────────────────── */
._twoCol_1d9fd_813 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: start;
}

/* ─────────────────────────────────────────────
   Cards
───────────────────────────────────────────── */
._detailCard_1d9fd_835,
._statsCard_1d9fd_837,
._empCard_1d9fd_839 {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

._cardHeader_1d9fd_853 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

._cardHeaderIcon_1d9fd_875 {
    color: #3b82f6;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   Detail Table (Policy Details & Stats)
───────────────────────────────────────────── */
._detailTableWrap_1d9fd_891 {
    max-height: 420px;
    overflow-y: auto;
}

._detailTableWrap_1d9fd_891::-webkit-scrollbar {
    width: 4px;
}

._detailTableWrap_1d9fd_891::-webkit-scrollbar-track {
    background: #f9fafb;
}

._detailTableWrap_1d9fd_891::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

._detailTable_1d9fd_891 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

._detailRow_1d9fd_939 td {
    padding: 10px 20px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

._detailRow_1d9fd_939:last-child td {
    border-bottom: none;
}

._detailLabel_1d9fd_959 {
    width: 42%;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

._detailColon_1d9fd_973 {
    width: 20px;
    color: #9ca3af;
    text-align: center;
}

._detailValue_1d9fd_985 {
    color: #111827;
    font-weight: 500;
    word-break: break-word;
}

/* ─────────────────────────────────────────────
   Progress Section (inside Stats Card)
───────────────────────────────────────────── */
._progressSection_1d9fd_1003 {
    padding: 16px 20px;
    border-top: 1px solid #f3f4f6;
}

._progressTitle_1d9fd_1013 {
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

._progressSubtitle_1d9fd_1027 {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

._progressBarWrap_1d9fd_1039 {
    margin-bottom: 8px;
}

._progressBarBg_1d9fd_1047 {
    width: 100%;
    height: 22px;
    background: #f3f4f6;
    border-radius: 99px;
    overflow: hidden;
}

._progressBarFill_1d9fd_1063 {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    min-width: 44px;
    transition: width 0.5s ease;
}

._progressLabel_1d9fd_1087 {
    font-size: 11px;
    font-weight: 700;
    color: white;
}

._progressFooter_1d9fd_1099 {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 500;
}

/* ─────────────────────────────────────────────
   Employee Table
───────────────────────────────────────────── */
._empCard_1d9fd_839 {
    margin-bottom: 0;
}

._tableScrollWrap_1d9fd_1129 {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
}

._tableScrollWrap_1d9fd_1129::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

._tableScrollWrap_1d9fd_1129::-webkit-scrollbar-track {
    background: #f9fafb;
}

._tableScrollWrap_1d9fd_1129::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

._empTable_1d9fd_1169 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 600px;
}

._empTable_1d9fd_1169 thead tr {
    background: #f9fafb;
    border-bottom: 1.5px solid #e5e7eb;
}

._empTable_1d9fd_1169 thead th {
    padding: 11px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

._empRow_1d9fd_1213 {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

._empRow_1d9fd_1213:last-child {
    border-bottom: none;
}

._empRow_1d9fd_1213:hover {
    background: #fafafa;
}

._empRow_1d9fd_1213 td {
    padding: 10px 16px;
    vertical-align: middle;
}

._empNum_1d9fd_1249 {
    color: #9ca3af;
    font-size: 12.5px;
    font-weight: 500;
}

._empNameCell_1d9fd_1261 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._empAvatar_1d9fd_1273 {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

._empAvatarInitials_1d9fd_1289 {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

._empName_1d9fd_1261 {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

._empDesig_1d9fd_1329 {
    font-size: 12.5px;
    color: #6b7280;
}

._empViewedOn_1d9fd_1339 {
    font-size: 12.5px;
    color: #374151;
    font-weight: 500;
}

._badgeViewed_1d9fd_1351 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

._badgeNotViewed_1d9fd_1379 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Pagination
───────────────────────────────────────────── */
._paginationRow_1d9fd_1413 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid #f3f4f6;
    flex-wrap: wrap;
    gap: 10px;
}

._paginationInfo_1d9fd_1433 {
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
}

._paginationBtns_1d9fd_1445 {
    display: flex;
    align-items: center;
    gap: 5px;
}

._pageBtn_1d9fd_1457 {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: white;
    color: #374151;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

._pageBtn_1d9fd_1457:hover:not(:disabled) {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

._pageBtn_1d9fd_1457:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

._pageBtnActive_1d9fd_1511 {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* ─────────────────────────────────────────────
   Print
───────────────────────────────────────────── */
@media print {

    ._titleActions_1d9fd_221,
    ._paginationRow_1d9fd_1413,
    ._attachDownBtn_1d9fd_685 {
        display: none !important;
    }

    ._page_1d9fd_7 {
        padding: 0;
    }

    ._detailCard_1d9fd_835,
    ._statsCard_1d9fd_837,
    ._empCard_1d9fd_839 {
        box-shadow: none;
        break-inside: avoid;
    }

    ._tableScrollWrap_1d9fd_1129 {
        max-height: none;
        overflow: visible;
    }

    ._detailTableWrap_1d9fd_891 {
        max-height: none;
        overflow: visible;
    }
}

/* ─────────────────────────────────────────────
   Responsive
───────────────────────────────────────────── */
@media (max-width: 1100px) {
    ._statCards_1d9fd_727 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._twoCol_1d9fd_813 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    ._page_1d9fd_7 {
        padding: 16px;
    }

    ._statCards_1d9fd_727 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._infoAttachRow_1d9fd_487 {
        flex-direction: column;
    }

    ._attachBox_1d9fd_583 {
        max-width: 100%;
        min-width: 100%;
    }

    ._mainTitle_1d9fd_205 {
        font-size: 12px;
    }

    ._titleRow_1d9fd_173 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._titleActions_1d9fd_221 {
        width: 100%;
    }

    ._twoCol_1d9fd_813 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    ._statCards_1d9fd_727 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    ._statCardValue_1d9fd_773 {
        font-size: 16px;
    }

    ._infoChipsWrap_1d9fd_503 {
        flex-direction: column;
    }

    ._infoChip_1d9fd_503 {
        min-width: 100%;
    }
}/* ══════════════════════════════════════════════════════════════════════════════
   ShiftRoster.module.css
   ══════════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Page ── */
._page_a5ily_25 {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-size: 11px;
  background: #f4f5f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #1e293b;
  overflow: hidden;
}

/* ── Header ── */
._header_a5ily_49 {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  flex-shrink: 0;
}

._headerLeft_a5ily_71 {
  display: flex;
  flex-direction: column;
}

._pageTitle_a5ily_81 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

._breadcrumb_a5ily_95 {
  font-size: 9.5px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

._breadcrumbSep_a5ily_111 {
  color: #94a3b8;
}

._breadcrumbActive_a5ily_119 {
  color: #64748b;
}

/* ── Tabs ── */
._tabBar_a5ily_129 {
  display: flex;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

._tab_a5ily_129 {
  padding: 9px 14px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  color: #94a3b8;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

._tab_a5ily_129:hover {
  color: #475569;
}

._tabActive_a5ily_175 {
  color:var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);;
  font-weight: 600;
}

/* ── Date Range Bar ── */
._dateRangeBar_a5ily_189 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 16px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._dateRangeLabel_a5ily_211 {
  font-size: 10.5px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._dateInputGroup_a5ily_225 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dateInputLabel_a5ily_237 {
  font-size: 9.5px;
  color: #94a3b8;
}

._dateInput_a5ily_225 {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10.5px;
  color: #374151;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

._loadBtn_a5ily_271 {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

._loadBtn_a5ily_271:hover {
  background: var(--color-primary);
}

._loadBtn_a5ily_271:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

._dateRangeInfo_a5ily_315 {
  font-size: 9.5px;
  color: #94a3b8;
}

/* ── Error / Loading ── */
._errorBanner_a5ily_327 {
  padding: 8px 16px;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  color: #dc2626;
  font-size: 10.5px;
  flex-shrink: 0;
}

._loadingState_a5ily_345 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 40px;
}

._loadingIcon_a5ily_369 {
  font-size: 24px;
}

/* ── Tab Content ── */
._tabContent_a5ily_379 {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIST VIEW
   ══════════════════════════════════════════════════════════════════════════════ */
._listViewWrapper_a5ily_401 {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 10px 14px 24px;
  gap: 10px;
  overflow-y: auto;
}

._statsAccordion_a5ily_419 {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
}

._accordionHeader_a5ily_433 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

._accordionHeader_a5ily_433:hover {
  background: #f3f4f6;
}

._accordionTitle_a5ily_459 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1f2937;
  font-size: 12px;
}

._accordionToggle_a5ily_477 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

._accordionContent_a5ily_497 {
  padding: 12px 16px 16px;
  border-top: 1px solid #f0f2f5;
}

._statRow_a5ily_507 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

._statCard_a5ily_519 {
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

._statCard_a5ily_519:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

._statIcon_a5ily_553 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statInfo_a5ily_573 {
  min-width: 0;
}

._statLabel_a5ily_581 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 2px;
  white-space: nowrap;
}

._statValue_a5ily_595 {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

._searchInput_a5ily_607 {
  flex: 1;
  border: none;
  outline: none;
  font-size: 11px;
  color: #374151;
  background: transparent;
  min-width: 0;
  font-family: inherit;
}

._searchInput_a5ily_607::placeholder {
  color: #9ca3af;
}

._checkbox_a5ily_637 {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #6366f1;
  flex-shrink: 0;
}

._listEmpAvatar_a5ily_653 {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

._listEmpName_a5ily_679 {
  font-size: 11.5px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._listEmpEmail_a5ily_697 {
  font-size: 10px;
  color: #6b7280;
}

._empMeta_a5ily_707 {
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._empCell_a5ily_723 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

._teamCell_a5ily_737 {
  white-space: nowrap;
}

._shiftBadge_a5ily_745 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 7px;
  min-width: 148px;
  border: 1px solid transparent;
}

._shiftBadgeIcon_a5ily_765 {
  font-size: 13px;
  flex-shrink: 0;
}

._shiftBadgeName_a5ily_775 {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

._shiftBadgeTime_a5ily_789 {
  font-size: 9px;
  opacity: 0.85;
  white-space: nowrap;
}

._statusBadge_a5ily_801 {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._btn_a5ily_821 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.13s;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}

._btnSecondary_a5ily_853 {
  background: white;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

._btnSecondary_a5ily_853:hover {
  background: #f3f4f6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — SCV BLOCK START
   All calendar-specific classes prefixed with "scv" are scoped here.
   ══════════════════════════════════════════════════════════════════════════════ */

._scvRoot_a5ily_883 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-size: 11px;
}

/* ── Legend bar ── */
._scvLegendBar_a5ily_907 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  flex-wrap: wrap;
}

._scvLegendItem_a5ily_929 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
}

._scvLegendDot_a5ily_945 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Body: left panel + grid area side by side ── */
._scvBody_a5ily_961 {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ── Left Panel ── */
._scvLeftPanel_a5ily_979 {
  width: 230px;
  min-width: 230px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar {
  width: 4px;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar-track {
  background: #f8fafc;
}

._scvLeftPanel_a5ily_979::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}

._scvLeftPanelSection_a5ily_1029 {
  padding: 10px 10px 8px;
  border-bottom: 1px solid #f1f5f9;
}

._scvLeftPanelPoolSection_a5ily_1039 {
  padding: 10px;
  flex: 1;
}

._scvLeftPanelSectionHeader_a5ily_1049 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._scvLeftPanelSectionTitle_a5ily_1061 {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

._scvLeftPanelFooter_a5ily_1073 {
  padding: 8px 10px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Select-all bar ── */
._scvSelectAllBar_a5ily_1091 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 6px;
  margin-bottom: 2px;
}

/* ── Badges ── */
._scvBadgeCount_a5ily_1109 {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

._scvBadgeCountAlert_a5ily_1123 {
  background: #fee2e2;
  color: #dc2626;
}

._scvBadgeCountNeutral_a5ily_1133 {
  background: #f1f5f9;
  color: #64748b;
}

/* ── Search bar (grid top) ── */
._scvSearchBar_a5ily_1145 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 9px;
  margin-bottom: 10px;
}

._scvSearchIcon_a5ily_1167 {
  color: #94a3b8;
  flex-shrink: 0;
}

._scvSearchInput_a5ily_1177 {
  border: none;
  background: transparent;
  font-size: 10.5px;
  color: #374151;
  width: 100%;
  outline: none;
  font-family: inherit;
}

._scvSearchInput_a5ily_1177::placeholder {
  color: #94a3b8;
}

._scvSearchClearBtn_a5ily_1205 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 0;
}

/* ── Unassigned panel search ── */
._scvPanelSearchBar_a5ily_1225 {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 7px;
}

._scvPanelSearchIcon_a5ily_1247 {
  color: #94a3b8;
  flex-shrink: 0;
}

._scvPanelSearchInput_a5ily_1257 {
  border: none;
  background: transparent;
  font-size: 10.5px;
  color: #374151;
  width: 100%;
  outline: none;
  font-family: inherit;
}

._scvPanelSearchInput_a5ily_1257::placeholder {
  color: #94a3b8;
}

._scvPanelEmpty_a5ily_1285 {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

._scvUnassignedList_a5ily_1299 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

._scvUnassignedList_a5ily_1299::-webkit-scrollbar {
  width: 3px;
}

._scvUnassignedList_a5ily_1299::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 3px;
}

._scvUnassignedCard_a5ily_1335 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  background: #f8fafc;
  border-radius: 7px;
  border: 1px solid #f1f5f9;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.15s, background 0.15s;
}

._scvUnassignedCard_a5ily_1335:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}

._scvUnassignedCard_a5ily_1335:active {
  cursor: grabbing;
}

._scvUnassignedCardInfo_a5ily_1381 {
  min-width: 0;
  flex: 1;
}

._scvUnassignedCardName_a5ily_1391 {
  font-size: 10.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._scvUnassignedCardMeta_a5ily_1409 {
  font-size: 9px;
  color: #94a3b8;
}

._scvDragHandle_a5ily_1419 {
  font-size: 14px;
  color: #c7d2fe;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Shift Pool ── */
._scvShiftPoolList_a5ily_1435 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

._scvPoolCard_a5ily_1449 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: default;
}

._scvPoolCardIcon_a5ily_1469 {
  font-size: 16px;
  flex-shrink: 0;
}

._scvPoolCardBody_a5ily_1479 {
  flex: 1;
  min-width: 0;
}

._scvPoolCardName_a5ily_1489 {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._scvPoolCardTime_a5ily_1505 {
  font-size: 9px;
  opacity: 0.8;
}

._scvPoolCardCount_a5ily_1515 {
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Avatar ── */
._scvAvatar_a5ily_1529 {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — GRID LAYOUT BLOCK START
   Fixed two-panel layout:
     scvGridArea        → column flex, clips overflow, holds topbar + container + statsbar
     scvGridContainer   → row flex, ONLY overflow-x:auto here for horizontal scroll
       scvGridLabelPanel  → sticky left column, no overflow of its own
       scvGridScrollPane  → takes remaining width, overflow-x:auto + overflow-y:auto
                            this is the ONLY element that scrolls in both axes
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Grid area wrapper (right of left panel) ── */
._scvGridArea_a5ily_1573 {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* max-width: calc(100vw - 230px); */
  width: 0; 
}

/* ── Top filter bar inside grid area ── */
._scvGridTopBar_a5ily_1597 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* ── Main container: label col + scroll pane side by side ── */
/* .scvGridContainer {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
  max-width: 100%; 
} */

._scvGridContainer_a5ily_1619 {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* ── Sticky label column ── */
._scvGridLabelPanel_a5ily_1663 {
  width: 130px;
  min-width: 130px;
  flex-shrink: 0;
  z-index: 10;
  background: #fff;
  border-right: 2px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
  /* ← REMOVE position:sticky and left:0 — not needed here, panel is in normal flow */
}

/* Corner header — height must match date header row height exactly (70px) */
._scvCornerCell_a5ily_1691 {
  height: 70px;
  min-height: 50px;
  flex-shrink: 0;
  background: #f1f5f9;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

/* One label row per shift — must match .scvShiftCellsRow min-height */
._scvShiftLabelCell_a5ily_1717 {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  min-height: 90px;
  flex-shrink: 0;
}

._scvShiftLabelCell_a5ily_1717:last-child {
  border-bottom: none;
}

/* Skeleton label */
._scvShiftLabelSkel_a5ily_1745 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
  min-height: 90px;
  flex-shrink: 0;
}

._scvLabelEmptyCell_a5ily_1765 {
  flex: 1;
  min-height: 120px;
}

._scvGridScrollPane_a5ily_1775 {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  width: 0; /* ← ADD THIS — forces flex to shrink properly */
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-track {
  background: #f1f5f9;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

._scvGridScrollPane_a5ily_1775::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

/* ── Date header row — sticky top inside scroll pane ── */
._scvDateHeaderRow_a5ily_1839 {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f8fafc;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
}

/* Individual date header cell */
._scvDateHeaderCell_a5ily_1863 {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 2px solid #e5e7eb;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

._scvDateHeaderCellWeekend_a5ily_1893 {
  background: #fafafa;
}

._scvDateHeaderCellToday_a5ily_1901 {
  background: #eef2ff;
}

._scvDateHeaderDay_a5ily_1909 {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 2px;
}

._scvDateHeaderDate_a5ily_1923 {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
}

._scvDateHeaderMonth_a5ily_1935 {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

._scvDateHeaderCellToday_a5ily_1901 ._scvDateHeaderDate_a5ily_1923 {
  color: #6366f1;
}

._scvDateHeaderCellWeekend_a5ily_1893 ._scvDateHeaderDate_a5ily_1923 {
  color: #94a3b8;
}

._scvTodayIndicator_a5ily_1963 {
  width: 18px;
  height: 3px;
  background: #6366f1;
  border-radius: 2px;
  margin: 3px auto 0;
}

/* ── Shift data row (one per shift) ── */
._scvShiftCellsRow_a5ily_1715 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb;
  min-height: 90px;
  width: max-content;
}

._scvShiftCellsRow_a5ily_1715:last-child {
  border-bottom: none;
}

/* ── Individual date cell ── */
._scvShiftCell_a5ily_1715 {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  background: #fff;
  border-right: 1px solid #f1f5f9;
  padding: 5px;
  flex-shrink: 0;
  transition: background 0.1s;
  min-height: 90px;
  display: flex;
  flex-direction: column;
}

._scvShiftCellWeekend_a5ily_2039 {
  background: #fafafa;
}

._scvShiftCellOver_a5ily_2047 {
  background: #eef2ff !important;
}

/* ── Shift card ── */
._scvShiftCard_a5ily_2057 {
  flex: 1;
  min-height: 76px;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid transparent;
}

._scvShiftCard_a5ily_2057:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

._scvShiftCardTopRow_a5ily_2095 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

._scvShiftCardIcon_a5ily_2111 {
  font-size: 11px;
}

._scvShiftCardName_a5ily_2119 {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

._scvShiftCardTime_a5ily_2131 {
  font-size: 9.5px;
  opacity: 0.8;
}

._scvShiftCardCount_a5ily_2141 {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  opacity: 0.7;
  margin-top: 3px;
}

/* ── Empty / off / holiday ── */
._scvEmptyCell_a5ily_2161 {
  flex: 1;
  min-height: 76px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  font-size: 10px;
  font-weight: 500;
  background: transparent;
  transition: all 0.15s;
}

._scvEmptyCellOver_a5ily_2191 {
  border-color: #6366f1;
  color: #6366f1;
  background: #eef2ff;
}

._scvWeeklyOffCell_a5ily_2203 {
  flex: 1;
  min-height: 76px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
}

._scvWeeklyOffDot_a5ily_2233 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ca3af;
  display: inline-block;
}

._scvHolidayCell_a5ily_2249 {
  flex: 1;
  min-height: 76px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: #f43f5e;
  font-weight: 600;
}

/* ── Skeleton ── */
._scvSkelCard_a5ily_2281 {
  flex: 1;
  min-height: 76px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
  animation: _scvSkelPulse_a5ily_1 1.4s ease-in-out infinite;
}

@keyframes _scvSkelPulse_a5ily_1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ── Shift row label ── */
._scvShiftRowLabel_a5ily_2325 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-left: 3px solid transparent;
  width: 100%;
  min-height: 90px;
}

._scvShiftRowLabelIcon_a5ily_2345 {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

._scvShiftRowLabelBody_a5ily_2357 {
  min-width: 0;
  flex: 1;
}

._scvShiftRowLabelName_a5ily_2367 {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

._scvShiftRowLabelTime_a5ily_2381 {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}

._scvRotBadge_a5ily_2393 {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  margin-top: 4px;
}

/* ── Stats bar ── */
._scvStatsBar_a5ily_2413 {
  display: flex;
  border-top: 2px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
  overflow-x: auto;
}

._scvStatItem_a5ily_2429 {
  flex: 1;
  padding: 8px 14px;
  min-width: 90px;
}

._scvStatItemBorder_a5ily_2441 {
  border-right: 1px solid #e5e7eb;
}

._scvStatLabel_a5ily_2449 {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 2px;
}

._scvStatValueRow_a5ily_2463 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._scvStatValue_a5ily_2463 {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
}

._scvStatPct_a5ily_2487 {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
}

._scvStatPctGreen_a5ily_2501 {
  background: #dcfce7;
  color: #16a34a;
}

._scvStatPctOrange_a5ily_2511 {
  background: #fff7ed;
  color: #ea580c;
}

/* ── Drag ghost ── */
._scvDragGhost_a5ily_2523 {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: _scvGhostIn_a5ily_1 0.2s ease;
}

@keyframes _scvGhostIn_a5ily_1 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW — GRID LAYOUT BLOCK END
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   POPUP BLOCK START
   ══════════════════════════════════════════════════════════════════════════════ */

._scvPopupOverlay_a5ily_2603 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

._scvPopupCard_a5ily_2625 {
  background: #fff;
  border-radius: 14px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

._scvPopupHdr_a5ily_2645 {
  padding: 13px 14px 11px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid transparent;
}

._scvPopupHdrLeft_a5ily_2661 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._scvPopupHdrIcon_a5ily_2673 {
  font-size: 20px;
}

._scvPopupShiftName_a5ily_2681 {
  font-size: 13px;
  font-weight: 700;
}

._scvPopupShiftTime_a5ily_2691 {
  font-size: 10px;
  color: #64748b;
}

._scvPopupCloseBtn_a5ily_2701 {
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}

._scvPopupCloseBtn_a5ily_2701:hover {
  background: #e2e8f0;
}

._scvPopupInfoRow_a5ily_2737 {
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #f1f5f9;
}

._scvPopupInfoCol_a5ily_2751 {
  flex: 1;
}

._scvPopupEmpRow_a5ily_2759 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

._scvPopupEmpName_a5ily_2773 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._scvPopupEmpCode_a5ily_2785 {
  font-size: 10px;
  color: #94a3b8;
}

._scvPopupDateLabel_a5ily_2795 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 4px;
}

._scvPopupDateSub_a5ily_2809 {
  font-size: 10px;
  color: #64748b;
}

._scvFieldLabel_a5ily_2819 {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._scvPopupReasonWrap_a5ily_2835 {
  padding: 12px 16px;
}

._scvPopupTextarea_a5ily_2843 {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: inherit;
  resize: none;
  outline: none;
  color: #374151;
  margin-top: 4px;
  transition: border-color 0.15s;
}

._scvPopupTextarea_a5ily_2843:focus {
  border-color: #6366f1;
}

._scvPopupActions_a5ily_2879 {
  padding: 8px 16px 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f1f5f9;
}

._scvPopupFooter_a5ily_2895 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px;
  border-top: 1px solid #f1f5f9;
  text-align: right;
}

._scvBtnCancel_a5ily_2913 {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

._scvBtnCancel_a5ily_2913:hover {
  background: #f8fafc;
}

._scvBtnPrimary_a5ily_2945 {
  padding: 7px 18px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}

._scvBtnPrimary_a5ily_2945:hover {
  opacity: 0.9;
}

._scvBtnPrimaryDisabled_a5ily_2985 {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

._scvPopupMsg_a5ily_2995 {
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  padding: 16px 0;
}

._scvPopupMsgErr_a5ily_3009 {
  color: #ef4444;
}

._scvDetailEmpList_a5ily_3017 {
  padding: 12px 16px;
  max-height: 300px;
  overflow-y: auto;
}

._scvDetailEmpRow_a5ily_3029 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #f8fafc;
}

._scvDetailEmpInfo_a5ily_3045 {
  flex: 1;
}

._scvDetailEmpName_a5ily_3053 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._scvDetailEmpMeta_a5ily_3065 {
  font-size: 10px;
  color: #94a3b8;
}

._scvAttendanceBadge_a5ily_3075 {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

._scvAttendanceBadgePresent_a5ily_3089 {
  background: #dcfce7;
  color: #16a34a;
}

._scvAttendanceBadgeAbsent_a5ily_3099 {
  background: #fee2e2;
  color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════════════════════
   POPUP BLOCK END
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  ._statRow_a5ily_507 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  ._statRow_a5ily_507 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._scvLeftPanel_a5ily_979 {
    width: 190px;
    min-width: 190px;
  }
}

@media (max-width: 640px) {
  ._scvLeftPanel_a5ily_979 {
    display: none;
  }
}._dashboard_6d8al_1 {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: #1f2937;
  background: #f8fafc;
  padding: 16px;
}

/* Header */
._topHeader_6d8al_25 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
}

._topHeaderLeft_6d8al_45 p {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
  color: #1e2937;
}

._topHeaderLeft_6d8al_45 span {
  color: #64748b;
  font-size: 11px;
}

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

._userMenu_6d8al_81 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
}

._userAvatar_6d8al_97 {
  width: 30px;
  height: 30px;
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

/* Stats */
._statsRow_6d8al_125 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 4fr));
  gap: 16px;
  margin-bottom: 24px;
}

._statCard_6d8al_139 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 5px;
  display: flex;
  align-items: flex-start;
  gap: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._statIcon_6d8al_161 {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._statIcon_6d8al_161._blue_6d8al_181 {
  background: #eff6ff;
  color: #3b82f6;
}

._statIcon_6d8al_161._green_6d8al_191 {
  background: #f0fdf4;
  color: #22c55e;
}

._statIcon_6d8al_161._orange_6d8al_201 {
  background: #fffbeb;
  color: #f59e0b;
}

._statIcon_6d8al_161._purple_6d8al_211 {
  background: #f3e8ff;
  color: #a855f7;
}

._statIcon_6d8al_161._indigo_6d8al_221 {
  background: #ede9fe;
  color: #6366f1;
}

._statIcon_6d8al_161._teal_6d8al_231 {
  background: #f0fdfa;
  color: #14b8a6;
}

._statInfo1_6d8al_241 {
  font-size: 10px;
  font-weight: 500;
  margin: 5px;
}

._statValue_6d8al_253 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

._statTrend_6d8al_265 {
  font-size: 11px;
  color: #64748b;
}

/* Filters */
._otHeaderRow_6d8al_277,
._otFilterCol_6d8al_279,
._otSearchCol_6d8al_281,
._otActionCol_6d8al_283 {
}

._otFilterLabel_6d8al_289 {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}

._otSelect_6d8al_305,
._otSearchInput_6d8al_307 {
  width: 100%;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  transition: 0.2s ease;
}

._otSelect_6d8al_305:focus,
._otSearchInput_6d8al_307:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

._otPrimaryBtn_6d8al_343,
._otSecondaryBtn_6d8al_345 {
  width: 100%;
  height: 28px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

._otPrimaryBtn_6d8al_343 {
  background: #3b82f6;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

._otSecondaryBtn_6d8al_345 {
  background: #fff;
  border: 1px solid #dbe2ea;
  color: #475569;
}

/* Main Form */
._otWrapper_6d8al_397 {
  margin-top: 10px;
}

._cardBox_6d8al_405,
._overtimeContainer_6d8al_407 {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  padding: 10px;
  height: 100%;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}

._formSidebarCardTitle_6d8al_425,
._formSectionTitle_6d8al_427 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.25;
  margin-top: 5px;
}

._formFilterLabel_6d8al_445 {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 6px;
}

._formInput_6d8al_461,
._formSelect_6d8al_463 {
  width: 100%;
  height: 28px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 10px;
  background: #fff;
  outline: none;
  transition: 0.2s ease;
}

._formInput_6d8al_461:focus,
._formSelect_6d8al_463:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

._multiSelectBox_6d8al_499 {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  overflow: hidden;
}

._selectedItems_6d8al_525 {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  flex: 1;
}

._selectedItems_6d8al_525::-webkit-scrollbar {
  display: none;
}

._selectedTag_6d8al_553 {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

._dropdownIcon_6d8al_573 {
  margin-left: 8px;
  color: #6b7280;
  font-size: 11px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Toggle */
._otEligibilityRow_6d8al_591 {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
}

._otToggleSwitch_6d8al_605 {
  position: relative;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}

._otToggleSwitch_6d8al_605 input {
  opacity: 0;
  width: 0;
  height: 0;
}

._otToggleSlider_6d8al_631 {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

._otToggleSlider_6d8al_631::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

._otToggleSwitch_6d8al_605 input:checked + ._otToggleSlider_6d8al_631 {
  background: #2563eb;
}

._otToggleSwitch_6d8al_605 input:checked + ._otToggleSlider_6d8al_631::before {
  transform: translateX(16px);
}

._otEligibilityText_6d8al_689 {
  font-size: 10px;
  color: #374151;
  line-height: 1;
}

/* Multipliers */
._sectionHeading_6d8al_703 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 2px;
}

._multiplierRow_6d8al_717 {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  margin-bottom: 10px !important;
}

._multiplierCol_6d8al_731 {
  flex: 1;
  min-width: 0;
  height: 92px;
}

._multiplierBox_6d8al_743 {
  height: 102px !important;
  min-height: 102px;
  max-height: 102px;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #edf1f7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

._multiplierBox_6d8al_743:hover {
  transform: translateY(-2px);
}

._weekendBox_6d8al_777 {
  background: #faf7ff;
}

._holidayBox_6d8al_785 {
  background: #fff7f5;
}

._nightBox_6d8al_793 {
  background: #f5faff;
}

._doubleOtBox_6d8al_801 {
  background: #fffaf1;
}

._customRateBox_6d8al_809 {
  background: #f5fcf7;
}

._multiplierLabel_6d8al_817 {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #667085;
  margin-bottom: 5px;
}

._multiplierInput_6d8al_833 {
  width: 100%;
  height: 22px;
  border: 1px solid #dfe5ef;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  outline: none;
  transition: 0.2s ease;
}

._multiplierInput_6d8al_833:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

._multiplierText_6d8al_873 {
  margin: 2px 0 0;
  font-size: 10px;
  color: #8b95a7;
}

._horizontalDivider_6d8al_885 {
  height: 1px;
  background: #edf1f5;
  margin-top: 15px;
  margin-bottom: 12px;
}

._configCard_6d8al_899 {
  background: #fff;
  /* border: 1px solid #edf1f7; */
  border-radius: 10px;
  padding: 8px;
  height: 100%;
}

._configTitle_6d8al_915 {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #5b6472;
  margin-bottom: 5px;
}

._buttonContainer_6d8al_931 {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Table */
._formTableHeader_6d8al_945 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 5px 0 6px;
}

._badge_6d8al_959 {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

._badge_6d8al_959._active_6d8al_973 {
  background: #dcfce7;
  color: #166534;
}

/* Right Sidebar */
._formSidebarStack_6d8al_985 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  flex: 0 0 280px;
  max-width: 280px;
}

._formSidebarCard_6d8al_425 {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

._formSidebarHeader_6d8al_1019 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

._formSidebarTitleWrap_6d8al_1035 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #334155;
  min-width: 0;
}

._formSidebarTitleWrap_6d8al_1035 svg {
  color: #64748b;
  flex-shrink: 0;
}

._formNewRuleBadge_6d8al_1061 {
  background: #ede9fe;
  color: #8b5cf6;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

._formPreviewContent_6d8al_1081 p {
  font-size: 11px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 10px;
}

._formLinkBtn_6d8al_1095 {
  border: none;
  background: transparent;
  color: #3b82f6;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

._formMetricRow_6d8al_1121 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

._formMetricLabel_6d8al_1135 {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  margin-bottom: 8px;
}

._formImpactSummary_6d8al_1149 {
  margin-bottom: 0;
  min-width: 0;
}

._formImpactValue_6d8al_1159,
._formCostValue_6d8al_1161 {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  margin-bottom: 7px;
}

._formBigNumber_6d8al_1177 {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  margin-bottom: 5px;
}

._formSubText_6d8al_1193 {
  font-size: 10px;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 8px;
}

._formImpactTrend_6d8al_1207 {
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

._formSparkline_6d8al_1227 {
  width: 96px;
  height: 58px;
  flex-shrink: 0;
}

._formSparkline_6d8al_1227 svg {
  width: 100%;
  height: 100%;
  display: block;
}

._formPeopleIcon_6d8al_1251 {
  color: #3b82f6;
  flex-shrink: 0;
  padding-bottom: 8px;
}

._formDonutChart_6d8al_1263 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(#49c7d9 0 34%, #3b82f6 34% 50%, #7c3aed 50% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

._formDonutChart_6d8al_1263::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
}

._formDonutIcon_6d8al_1305 {
  display: none;
}

/* Bottom Analytics Layout */
._bottomAnalyticsRow_6d8al_1315 {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

._bottomAnalyticsRow_6d8al_1315 > div {
  flex: 0 0 25%;
  max-width: 25%;
  min-width: 0;
}

._auditLogsCard_6d8al_1339,
._historyCard_6d8al_1341,
._payrollCard_6d8al_1343,
._departmentCard_6d8al_1345 {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #edf1f7;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  height: 210px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

._auditLogsList_6d8al_1369,
._historyList_6d8al_1371,
._payrollList_6d8al_1373 {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

._cardHeader_6d8al_1385 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._cardTitle_6d8al_1399 {
  font-size: 10px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._cardSubTitle_6d8al_1413 {
  font-size: 9px;
  color: #6b7280;
}

._auditLogsList_6d8al_1369,
._historyList_6d8al_1371,
._payrollList_6d8al_1373 {
  display: flex;
  flex-direction: column;
}

._auditLogsList_6d8al_1369 {
  gap: 8px;
}

._historyList_6d8al_1371 {
  gap: 9px;
}

._payrollList_6d8al_1373 {
  gap: 14px;
}

._auditLogItem_6d8al_1461 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

._auditDot_6d8al_1475 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  margin-top: 5px;
  flex-shrink: 0;
}

._auditContent_6d8al_1493 {
  flex: 1;
  min-width: 0;
}

._auditAction_6d8al_1503 {
  font-size: 9px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

._auditMeta_6d8al_1521 {
  margin-top: 2px;
  font-size: 8px;
  color: #6b7280;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

._metaDivider_6d8al_1539 {
  color: #9ca3af;
}

._auditStatus_6d8al_1547 {
  flex-shrink: 0;
  background: #dcfce7;
  color: #15803d;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

._historyDate_6d8al_1569 {
  font-size: 8px;
  color: #9ca3af;
}

._historyTitle_6d8al_1579 {
  font-size: 9px;
  font-weight: 700;
  color: #111827;
  margin-top: 1px;
  line-height: 1.35;
}

._historyUser_6d8al_1595 {
  font-size: 8px;
  color: #6b7280;
  margin-top: 2px;
}

._payrollTop_6d8al_1607 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #374151;
}

._payrollTop_6d8al_1607 span {
  font-size: 9px;
}

._progressBar_6d8al_1629 {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

._progressSuccess_6d8al_1645,
._progressPending_6d8al_1647,
._progressFailed_6d8al_1649 {
  height: 100%;
  border-radius: 999px;
}

._progressSuccess_6d8al_1645 {
  background: #22c55e;
}

._progressPending_6d8al_1647 {
  background: #f59e0b;
}

._progressFailed_6d8al_1649 {
  background: #ef4444;
}

/* Department Analytics Compact */
._analyticsWrapper_6d8al_1685 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding-right: 0;
}

._analyticsCircle_6d8al_1703 {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0% 38%,
    #d97706 38% 62%,
    #6366f1 62% 80%,
    #9333ea 80% 92%,
    #06b6d4 92% 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

._analyticsCircle_6d8al_1703::before {
  content: "";
  width: 68px;
  height: 68px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
}

._analyticsInner_6d8al_1757 {
  position: relative;
  z-index: 2;
  text-align: center;
}

._analyticsInner_6d8al_1757 span {
  display: block;
  font-size: 8px;
  color: #94a3b8;
  margin-bottom: 2px;
}

._analyticsInner_6d8al_1757 strong {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

._analyticsLegend_6d8al_1795 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

._legendRow_6d8al_1811 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._legendLeft_6d8al_1825 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 500;
  color: #334155;
  min-width: 0;
}

._legendLeft_6d8al_1825 span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._legendRight_6d8al_1857 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._legendPercent_6d8al_1871,
._legendHours_6d8al_1873 {
  font-size: 9px;
}

._legendPercent_6d8al_1871 {
  font-weight: 700;
  color: #0f172a;
}

._legendHours_6d8al_1873 {
  color: #64748b;
}

._legendDot_6d8al_1899 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._viewLinkBtn_6d8al_1913 {
  margin-top: 8px;
  border: none;
  background: transparent;
  color: #3b82f6;
  font-size: 9px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  align-self: flex-start;
}

/* Responsive */
@media (max-width: 1200px) {
  ._bottomAnalyticsRow_6d8al_1315 {
    flex-wrap: wrap;
  }

  ._bottomAnalyticsRow_6d8al_1315 > div {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  ._bottomAnalyticsRow_6d8al_1315 > div {
    flex: 0 0 100%;
    max-width: 100%;
  }

  ._analyticsWrapper_6d8al_1685 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._analyticsCircle_6d8al_1703 {
    margin: 0 auto;
  }

  ._analyticsLegend_6d8al_1795 {
    width: 100%;
  }
}
._multiplierSummary_6d8al_1999 {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

._weekdayRate_6d8al_2013,
._holidayRate_6d8al_2015,
._nightRate_6d8al_2017 {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
}

._weekdayRate_6d8al_2013 {
  background: #eff6ff;
  color: #2563eb;
}

._holidayRate_6d8al_2015 {
  background: #fef2f2;
  color: #ef4444;
}

._nightRate_6d8al_2017 {
  background: #fff7ed;
  color: #f97316;
}

._payrollIcon_6d8al_2061 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

._payrollFailed_6d8al_2087 {
  background: #fee2e2;
  color: #ef4444;
}

._badge_6d8al_959._inactive_6d8al_2097 {
  background: #ffedd5;
  color: #f97316;
}
._formTableHeader_6d8al_945 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 6px 0 6px;
}

/* CommonTable fixed no-scroll layout */
._formTableWrapper_6d8al_2121 {
  height: 240px;
  overflow: hidden;
}

._multiplierSummary_6d8al_1999 {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

._weekdayRate_6d8al_2013,
._holidayRate_6d8al_2015,
._nightRate_6d8al_2017 {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  line-height: 1;
}

._weekdayRate_6d8al_2013 {
  background: #eff6ff;
  color: #2563eb;
}

._holidayRate_6d8al_2015 {
  background: #fef2f2;
  color: #ef4444;
}

._nightRate_6d8al_2017 {
  background: #fff7ed;
  color: #f97316;
}

._payrollIcon_6d8al_2061 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

._payrollFailed_6d8al_2087 {
  background: #fee2e2;
  color: #ef4444;
}

._badge_6d8al_959 {
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

._badge_6d8al_959._active_6d8al_973 {
  background: #dcfce7;
  color: #166534;
}

._badge_6d8al_959._inactive_6d8al_2097 {
  background: #ffedd5;
  color: #f97316;
}
/* OverTimeRuleAdd.module.css */

._container_7h21l_5 {
  padding: 24px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  min-height: 100vh;
}

/* HEADER */
._header_7h21l_19 {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 12px 20px;
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(251, 191, 36, 0.12);
}

._left_7h21l_49 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 70%;
}

._breadcrumb_7h21l_63 {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 500;
}

._breadcrumb_7h21l_63 strong {
  color: #f59e0b;
  font-weight: 700;
}

._backBtn_7h21l_93 {
  background: none;
  border: none;
  color: #6b7280;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._backBtn_7h21l_93:hover {
  color: #f59e0b;
}

._title_7h21l_121 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #111827;
  line-height: 1.3;
}

._subtitle_7h21l_137 {
  font-size: 11px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
  max-width: 520px;
}

._actions_7h21l_153 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* FORM CARD */
._formCard_7h21l_169 {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f3f4f6;
}

/* FORM GROUP */
._formGroup_7h21l_187 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._form_label_7h21l_199 {
  color: #515151;
  font-size: 12px;
  font-weight: 600;
}

._required_7h21l_211 {
  color: #ef4444;
}

._formGroup_7h21l_187 input._formcontrol_7h21l_219,
._formGroup_7h21l_187 select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fccd78;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

._formGroup_7h21l_187 input._formcontrol_7h21l_219:focus,
._formGroup_7h21l_187 select:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

._formGroup_7h21l_187 input._formcontrol_7h21l_219:hover,
._formGroup_7h21l_187 select:hover {
  border-color: #fbbf24;
}

._errorText_7h21l_265 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

/* BUTTONS */
._btnIcon_7h21l_279 {
  font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  ._header_7h21l_19 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  ._actions_7h21l_153 {
    width: 100%;
    gap: 8px;
  }

  ._formCard_7h21l_169 {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  ._container_7h21l_5 {
    padding: 16px;
  }
}
._backBtn_7h21l_93 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 4px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-right: 8px;
  border: 1px solid #e5e7eb;
}

._backBtn_7h21l_93:hover {
  background: #f3f4f6;
  color: #f59e0b;
}
/* Before select (unchecked) */
._form-check-input_7h21l_375 {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-primary) !important;
  box-shadow: none !important;
}

/* After select (checked) */
._form-check-input_7h21l_375:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Focus effect */
._form-check-input_7h21l_375:focus {
  box-shadow: var(--shadow-focus-checkbox) !important;
}
._toggleWrapper_7h21l_407 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-top: 10px;
}

._toggleInput_7h21l_423 {
  display: none;
}

._toggleSlider_7h21l_431 {
  position: relative;
  width: 46px;
  height: 24px;
  background: #d1d5db;
  border-radius: 999px;
  transition: 0.3s ease;
}

._toggleSlider_7h21l_431::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

._toggleInput_7h21l_423:checked + ._toggleSlider_7h21l_431 {
  background: #fbbf24;
}

._toggleInput_7h21l_423:checked + ._toggleSlider_7h21l_431::before {
  transform: translateX(22px);
}

._toggleLabel_7h21l_491 {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
/* INPUT + SELECT */
._formGroup_7h21l_187 input._formcontrol_7h21l_219,
._formGroup_7h21l_187 select._formcontrol_7h21l_219 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #ffffff;
  transition: all 0.2s ease;
}

/* 🔥 FOCUS EFFECT */
._formGroup_7h21l_187 input._formcontrol_7h21l_219:focus,
._formGroup_7h21l_187 select._formcontrol_7h21l_219:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
  outline: none;
}

/* 🔥 HOVER EFFECT */
._formGroup_7h21l_187 input._formcontrol_7h21l_219:hover,
._formGroup_7h21l_187 select._formcontrol_7h21l_219:hover {
  border-color: #fbbf24;
}
._viewCard_7h21l_551 {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 82px;
  transition: all 0.2s ease;
}

._viewCard_7h21l_551:hover {
  border-color: #fbbf24;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.12);
}

._viewLabel_7h21l_579 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
}

._viewValue_7h21l_595 {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  word-break: break-word;
}
/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_7h21l_609 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_7h21l_1 0.15s ease;
}

@keyframes _slideIn_7h21l_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._bulkSelectedLeft_7h21l_657 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkCountBadge_7h21l_671 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_7h21l_701 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_7h21l_715 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_7h21l_729 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_7h21l_729:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_7h21l_775 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_7h21l_775:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkDeselect_7h21l_795 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}
/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_7h21l_831 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_7h21l_853 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 170px;
  min-width: 100px;
}

._filterLabel_7h21l_871 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_7h21l_889 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_7h21l_901,
._filterDate_7h21l_903 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #ffffff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._filterSelect_7h21l_901:focus,
._filterDate_7h21l_903:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_7h21l_951 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.12s,
    color 0.12s;
  z-index: 1;
}

._filterClearX_7h21l_951:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_7h21l_1003 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_7h21l_1017 {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_7h21l_1017:hover {
  background: #fef2f2 !important;
}
/* ─── Page Shell ─────────────────────────────────────────────────────────── */

._page_1x22v_5 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f8fafc;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

._header_1x22v_23 {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

._headerLeft_1x22v_53 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._backBtn_1x22v_67 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

._backBtn_1x22v_67:hover {
  background: #f3f4f6;
  border-color: #6366f1;
  color: #6366f1;
}

._headerMeta_1x22v_109 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

._ruleId_1x22v_123 {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

._activeBadge_1x22v_139 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

._activeBadgeOn_1x22v_159 {
  background: #dcfce7;
  color: #16a34a;
}

._activeBadgeOff_1x22v_169 {
  background: #fee2e2;
  color: #dc2626;
}

._pageTitle_1x22v_179 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._pageSub_1x22v_199 {
  margin: 1px 0 0;
  font-size: 12px;
  color: #6b7280;
}

._headerActions_1x22v_211 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._editBtn_1x22v_225 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

._editBtn_1x22v_225:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

._body_1x22v_269 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ─── Top Grid (Basic + Calc) ────────────────────────────────────────────── */

._topGrid_1x22v_295 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

._midGrid_1x22v_307 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ─── Section Card ───────────────────────────────────────────────────────── */

._sectionCard_1x22v_323 {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

._sectionHeader_1x22v_339 {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid #6366f1;
  background: #fafafa;
}

._sectionTitleRow_1x22v_353 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._sectionIconWrap_1x22v_365 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

._sectionTitle_1x22v_353 {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  flex: 1;
}

._sectionBadge_1x22v_399 {
  font-size: 10px;
  font-weight: 600;
  color: #6366f1;
  background: #ede9fe;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

._sectionBody_1x22v_419 {
  padding: 14px 18px;
}

/* ─── Info Row ───────────────────────────────────────────────────────────── */

._infoRow_1x22v_431 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
}

._infoRow_1x22v_431:last-child {
  border-bottom: none;
}

._infoLabel_1x22v_457 {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

._infoValue_1x22v_473 {
  font-size: 12.5px;
  color: #111827;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

._infoAccent_1x22v_489 {
  color: #6366f1;
  font-weight: 700;
}

._nilValue_1x22v_499 {
  color: #9ca3af;
  font-style: italic;
}

/* ─── Calc Type Banner ───────────────────────────────────────────────────── */

._calcTypeBanner_1x22v_513 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f5f3ff;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid #ede9fe;
}

._calcTypeIcon_1x22v_535 {
  font-size: 24px;
  flex-shrink: 0;
}

._calcTypeLabel_1x22v_545 {
  font-size: 13px;
  font-weight: 700;
  color: #4c1d95;
}

._calcTypeDesc_1x22v_557 {
  font-size: 11.5px;
  color: #7c3aed;
  margin-top: 2px;
}

._calcTypePill_1x22v_569 {
  font-size: 12px;
  color: #6b7280;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-top: 10px;
}

/* ─── Limits Grid ────────────────────────────────────────────────────────── */

._limitsGrid_1x22v_593 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

._limitCard_1x22v_605 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: #f0f9ff;
  border-radius: 10px;
  border: 1px solid #bae6fd;
  text-align: center;
  min-height: 72px;
}

._limitValue_1x22v_631 {
  font-size: 22px;
  font-weight: 800;
  color: #0369a1;
  line-height: 1;
}

._limitLabel_1x22v_645 {
  font-size: 10.5px;
  color: #0ea5e9;
  font-weight: 500;
  margin-top: 5px;
  text-align: center;
}

/* ─── Date Grid ──────────────────────────────────────────────────────────── */

._dateGrid_1x22v_665 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._dateCard_1x22v_677 {
  flex: 1;
  padding: 14px 16px;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
  text-align: center;
}

._dateCardLabel_1x22v_695 {
  font-size: 11px;
  color: #16a34a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

._dateCardValue_1x22v_713 {
  font-size: 15px;
  font-weight: 700;
  color: #14532d;
}

._dateCardDivider_1x22v_725 {
  font-size: 20px;
  color: #86efac;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── Toggles Row ────────────────────────────────────────────────────────── */

._togglesRow_1x22v_743 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

._togglePill_1x22v_755 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid;
  transition: all 0.15s;
}

._toggleOn_1x22v_779 {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

._toggleOff_1x22v_791 {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}

._togglePillDot_1x22v_803 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

._toggleOn_1x22v_779 ._togglePillDot_1x22v_803 {
  background: #16a34a;
}

._toggleOff_1x22v_791 ._togglePillDot_1x22v_803 {
  background: #d1d5db;
}

._togglePillIcon_1x22v_833 {
  font-size: 13px;
}

._togglePillLabel_1x22v_841 {
  white-space: nowrap;
}

/* ─── Approver Table ─────────────────────────────────────────────────────── */

._approverTableWrap_1x22v_853 {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  min-height: 60px;
}

._approverTable_1x22v_853 {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

._approverTable_1x22v_853 thead tr {
  background: #f8fafc;
}

._approverTable_1x22v_853 th {
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

._approverTable_1x22v_853 td {
  padding: 10px 14px;
  font-size: 12.5px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

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

._approverTable_1x22v_853 tbody tr:hover {
  background: #fafafa;
}

._approverCell_1x22v_943 {
  display: flex;
  align-items: center;
  gap: 9px;
}

._approverAvatar_1x22v_955 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #e5e7eb;
  flex-shrink: 0;
}

._approverName_1x22v_973 {
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

._approverSub_1x22v_987 {
  font-size: 11px;
  color: #9ca3af;
}

._levelBadge_1x22v_997 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #ede9fe;
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
}

._roleTag_1x22v_1023 {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

._subtleCell_1x22v_1045 {
  color: #9ca3af;
  font-size: 12px;
  white-space: nowrap;
}

/* ─── Status Badges ──────────────────────────────────────────────────────── */

._badge_1x22v_1061 {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

._badgePending_1x22v_1081 {
  background: #fef9c3;
  color: #a16207;
}

._badgeApproved_1x22v_1091 {
  background: #dcfce7;
  color: #15803d;
}

._badgeRejected_1x22v_1101 {
  background: #fee2e2;
  color: #dc2626;
}

/* ─── Employee Table ─────────────────────────────────────────────────────── */

._empTableWrap_1x22v_1115 {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  min-height: 60px;
}

._empTable_1x22v_1115 {
  width: 100%;
  border-collapse: collapse;
  min-width: 400px;
}

._empTable_1x22v_1115 thead tr {
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

._empTable_1x22v_1115 th {
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

._empTable_1x22v_1115 td {
  padding: 9px 14px;
  font-size: 12.5px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

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

._empTable_1x22v_1115 tbody tr:hover {
  background: #f0f9ff;
}

._empCodeTag_1x22v_1215 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

._allEmpNotice_1x22v_1237 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #eff6ff;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
}

._allEmpNotice_1x22v_1237 span:first-child {
  font-size: 20px;
  flex-shrink: 0;
}

/* ─── Loading / Error ────────────────────────────────────────────────────── */

._loadingWrap_1x22v_1277,
._errorWrap_1x22v_1279 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60vh;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

._spinner_1x22v_1303 {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: _spin_1x22v_1303 0.75s linear infinite;
}

@keyframes _spin_1x22v_1303 {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  ._topGrid_1x22v_295,
  ._midGrid_1x22v_307 {
    grid-template-columns: 1fr;
  }

  ._limitsGrid_1x22v_593 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  ._body_1x22v_269 {
    padding: 14px 12px 24px;
  }

  ._header_1x22v_23 {
    padding: 12px 14px;
  }

  ._pageTitle_1x22v_179 {
    font-size: 15px;
  }

  ._limitsGrid_1x22v_593 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._dateGrid_1x22v_665 {
    flex-direction: column;
  }

  ._dateCardDivider_1x22v_725 {
    transform: rotate(90deg);
  }

  ._togglesRow_1x22v_743 {
    gap: 7px;
  }
}/* ── Page ── */
._page_zart9_3 {
  min-height: 100vh;
  background: #f8fafc;
  padding: 24px 28px 40px;
  /* font-family:
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif; */
  color: #1f2937;
  max-width: 1200px; /* adjust 1360-1500px as needed */
  margin: 0 auto;
}

/* ── Header ── */
._header_zart9_33 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

._dashTitle_zart9_47 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px;
}

._dashSub_zart9_61 {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

._headerRight_zart9_73 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._datePicker_zart9_85 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: #374151;
}

._dateInput_zart9_109 {
  border: none;
  outline: none;
  font-size: 12px;
  color: #374151;
  background: transparent;
  cursor: pointer;
  width: 110px;
}

._dateSep_zart9_129 {
  color: #9ca3af;
  font-size: 12px;
}

._exportBtn_zart9_139 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}

._exportBtn_zart9_139:hover {
  background: #f9fafb;
}

._exportBtn_zart9_139:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Summary Cards ── */
._summaryRow_zart9_189 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

._summaryCard_zart9_203 {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

._summaryIcon_zart9_225 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryInfo_zart9_245 {
  flex: 1;
  min-width: 0;
}

._summaryLabel_zart9_255 {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

._summaryValue_zart9_273 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

._summarySub_zart9_289 {
  font-size: 11px;
  color: #9ca3af;
  margin: 2px 0 0;
}

._genderRow_zart9_301 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16;
}

/* ── Chart Grid ── */
._row3col_zart9_317 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

/* ── Card ── */
._card_zart9_333 {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

._cardTitle_zart9_349 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 14px;
}

._cardSubLabel_zart9_363 {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
}

/* ── Donut layout ── */
._donutRow_zart9_377 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._empTypeWrap_zart9_389 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._countryWrap_zart9_401 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._donutLegend_zart9_413 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

._donutLegendItem_zart9_427 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

._legendDot_zart9_441 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendText_zart9_455 {
  color: #374151;
  flex: 1;
}

._legendCount_zart9_465 {
  color: #6b7280;
  font-size: 11px;
  white-space: nowrap;
}

/* ── Experience Table ── */
._tableWrap_zart9_479 {
  overflow-x: auto;
}

._expTable_zart9_487 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

._expTh_zart9_499 {
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

._expTh_zart9_499:first-child {
  text-align: left;
}

._expThGroup_zart9_527 {
  padding: 6px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #f0f0f0;
}

._expTd_zart9_545 {
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  color: #374151;
  border-bottom: 1px solid #f9fafb;
}

._expTd_zart9_545:first-child {
  text-align: left;
}

._expBadge_zart9_569 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

._expDash_zart9_585 {
  color: #d1d5db;
}

/* ── Error ── */
._errorBanner_zart9_595 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── Footer ── */
._footer_zart9_617 {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  margin-top: 24px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  ._summaryRow_zart9_189 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._row3col_zart9_317 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  ._page_zart9_3 {
    padding: 16px 12px 32px;
  }

  ._summaryRow_zart9_189 {
    grid-template-columns: 1fr;
  }

  ._row3col_zart9_317 {
    grid-template-columns: 1fr;
  }

  ._header_zart9_33 {
    flex-direction: column;
    gap: 12px;
  }
}
._dateControls_zart9_689 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._dateRangeLabel_zart9_701 {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._dateInputGroup_zart9_715 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 8px;
}
._dateInputLabel_zart9_733 {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}
._dateInput_zart9_109 {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 9px;
  color: #374151;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s;
}
._dateInput_zart9_109:focus {
  border-color: #7047e8;
  background: #fff;
}
._dateInput_zart9_109 {
   border: none;
  outline: none;
  background: transparent;
  width: 95px;
  font-size: 10px;
  padding: 0;
}

._loadBtn_zart9_797 {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 5px 16px;
  height: auto;

  border: none;
  border-radius: 6px;
  background: #8b5cf6;
  color: #fff;

  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

._loadBtn_zart9_797:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.3);
}

._loadBtn_zart9_797:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
._dateRangeInfo_zart9_859 {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Small Laptop (1366px / 1280px) ---------- */
@media (max-width: 1366px) {
  ._page_zart9_3 {
    max-width: 1120px;
    padding: 18px;
  }

  ._summaryRow_zart9_189 {
    gap: 12px;
  }

  ._summaryCard_zart9_203 {
    padding: 14px 16px;
  }

  ._summaryValue_zart9_273 {
    font-size: 20px;
  }

  ._summaryLabel_zart9_255,
  ._summarySub_zart9_289 {
    font-size: 10px;
  }

  ._row3col_zart9_317 {
    gap: 12px;
  }

  ._card_zart9_333 {
    padding: 14px 16px;
  }

  ._cardTitle_zart9_349 {
    font-size: 12px;
  }

  ._donutRow_zart9_377,
  ._empTypeWrap_zart9_389,
  ._countryWrap_zart9_401 {
    gap: 12px;
  }

  ._dateControls_zart9_689 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  ._dateInput_zart9_109 {
    width: 95px;
    font-size: 10px;
  }

  ._loadBtn_zart9_797 {
    padding: 6px 12px;
    font-size: 10px;
  }

  ._dateRangeInfo_zart9_859 {
      width: auto;
    margin-top: 0;
    white-space: nowrap;
  }
}

/* ---------- Tablet / Small Laptop ---------- */
@media (max-width: 1024px) {
  ._page_zart9_3 {
    max-width: 100%;
    padding: 16px;
  }

  ._header_zart9_33 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._dateControls_zart9_689 {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  ._summaryRow_zart9_189 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._row3col_zart9_317 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._donutRow_zart9_377,
  ._empTypeWrap_zart9_389,
  ._countryWrap_zart9_401 {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  ._summaryRow_zart9_189,
  ._row3col_zart9_317 {
    grid-template-columns: 1fr;
  }

  ._dateControls_zart9_689 {
    flex-direction: column;
    align-items: stretch;
  }

  ._dateInputGroup_zart9_715 {
    width: 100%;
    justify-content: space-between;
  }

  ._loadBtn_zart9_797 {
    width: 100%;
  }

  ._dateRangeInfo_zart9_859 {
    text-align: center;
  }
}
._page_15dys_1 {
  min-height: 100vh;
  padding: 18px 20px 20px;
  background: #f7f9fd;
  color: #111827;
}

._header_15dys_15 {
  margin-bottom: 16px;
  padding: 0 4px;
}

/* .header span {
  font-size: 9px;
  color: #7b8498;
} */

/* Date Range Styles */
._dateRangeLabel_15dys_37 {
  font-size: 9px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._dateInputGroup_15dys_51 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dateInputLabel_15dys_63 {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 500;
}

._dateInput_15dys_51 {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 9px;
  color: #374151;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s;
}

._dateInput_15dys_51:focus {
  border-color: #7047e8;
  background: #fff;
}

._loadBtn_15dys_111 {
  padding: 5px 16px;
  border-radius: 6px;
  border: none;
  background: #8b5cf6;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

._loadBtn_15dys_111:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.3);
}

._loadBtn_15dys_111:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

._dateRangeInfo_15dys_163 {
  font-size: 8px;
  color: #94a3b8;
  font-weight: 500;
}

/* Stats Grid - 6 columns */
._statsGrid_15dys_177 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

._statCard_15dys_191 {
  height: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e7ebf3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.2s;
}

._statCard_15dys_191:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

._statIcon_15dys_227 {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

._statCard_15dys_191 p {
  margin: 0 0 2px;
  font-size: 8px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._statCard_15dys_191 h3 {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #111827;
}

._statCard_15dys_191 h3 small {
  margin-left: 2px;
  font-size: 9px;
  font-weight: 600;
  color: #596278;
}

._statCard_15dys_191 em {
  display: flex;
  align-items: center;
  font-style: normal;
  gap: 3px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}

._statCard_15dys_191 em._positive_15dys_321 {
  color: #16a34a;
}

._statCard_15dys_191 em._negative_15dys_329 {
  color: #dc2626;
}

._statCard_15dys_191 em._neutral_15dys_337 {
  color: #6b7280;
}

._statValueWrapper_15dys_345 {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

._statTrendIcon_15dys_357 {
  font-size: 8px;
}

/* Insights Section */
._insightsSection_15dys_367 {
  background: #fff;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

._insightIcon_15dys_385 {
  color: #7047e8;
  font-size: 14px;
}

._insightsList_15dys_395 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

._insightBadge_15dys_409 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #f3f0ff;
  border-radius: 20px;
  font-size: 9px;
  color: #374151;
  font-weight: 500;
}

._insightBadge_15dys_409._growth_15dys_433 {
  background: #ecfdf5;
  color: #065f46;
}

._insightBadge_15dys_409._warning_15dys_443 {
  background: #fef3c7;
  color: #92400e;
}

._insightBadge_15dys_409._info_15dys_453 {
  background: #eff6ff;
  color: #1e40af;
}

._insightDot_15dys_463 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7047e8;
  display: inline-block;
}

._insightDot_15dys_463._growth_15dys_433 {
  background: #16a34a;
}

._insightDot_15dys_463._warning_15dys_443 {
  background: #f59e0b;
}

._insightDot_15dys_463._info_15dys_453 {
  background: #3b82f6;
}

/* Charts Grid */
._chartsGrid_15dys_505 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Panel */
._panel_15dys_521 {
  position: relative;
  min-height: 220px;
  padding: 15px 17px;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

._panelTitle_15dys_543 {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  color: #182033;
}

._infoDot_15dys_557 {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cbd4e4;
  border-radius: 50%;
  color: #a7b0c2;
  font-size: 8px;
  font-weight: 800;
  cursor: help;
}

._smallSelect_15dys_583 {
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: 1px solid #e4e8f2 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #4b5567 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
}

._bulbIcon_15dys_611 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3efff;
  color: #7047e8;
  font-size: 10px;
  flex-shrink: 0;
}

/* Chart Wrap for custom SVG charts */
._chartWrap_15dys_639 {
  position: relative;
  height: 160px;
  padding-left: 40px;
  padding-bottom: 22px;
  margin-top: 4px;
}

._yLabels_15dys_655 {
  position: absolute;
  top: 4px;
  left: 0;
  bottom: 23px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #69758c;
  font-size: 8px;
  font-weight: 500;
  padding-right: 4px;
}

._lineSvg_15dys_683 {
  width: 100%;
  height: 124px;
  overflow: visible;
}

._gridLine_15dys_695 {
  stroke: #e9edf5;
  stroke-width: 0.7;
  stroke-dasharray: 3 3;
}

._linePath_15dys_707 {
  fill: none;
  stroke: #744df0;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

._linePoint_15dys_725 {
  fill: #fff;
  stroke: #744df0;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

._linePoint_15dys_725:hover {
  fill: #744df0;
  stroke-width: 3;
}

._lineBadge_15dys_751 {
  position: absolute;
  top: 28px;
  right: -2px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #744df0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(116, 77, 240, 0.3);
}

._monthRow_15dys_777 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  color: #7b8498;
  font-size: 8px;
  text-align: center;
  margin-top: 4px;
}

/* Donut Chart */
._donutBox_15dys_799 {
  width: 130px;
  height: 130px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

._donutSvg_15dys_817 {
  width: 130px;
  height: 130px;
  transform: rotate(-90deg);
}

._donutCenter_15dys_829 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

._donutCenter_15dys_829 strong {
  font-size: 15px;
  line-height: 1;
  color: #182033;
}

._donutCenter_15dys_829 span {
  font-size: 8px;
  color: #7b8498;
  font-weight: 500;
}

._legendList_15dys_873 {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._legendItem_15dys_887 {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
}

._legendItem_15dys_887 span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendItem_15dys_887 small {
  font-size: 9px;
  color: #344054;
  font-weight: 500;
}

._legendItem_15dys_887 b {
  font-size: 9px;
  color: #111827;
  font-weight: 700;
}

/* Gender Ring */
._genderRing_15dys_941 {
  width: 120px;
  height: 120px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

._genderRing_15dys_941 svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

._genderRing_15dys_941 > svg ~ * {
  position: absolute;
  color: #8a90a5;
  font-size: 18px;
}

._genderStat_15dys_983 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._genderStat_15dys_983 b {
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

._genderStat_15dys_983 span {
  margin-top: 2px;
  color: #616b80;
  font-size: 8px;
  font-weight: 500;
}

._pinkText_15dys_1021 {
  color: #ff62ad;
}

/* Employment Donut */
._smallDonut_15dys_1031 {
  width: 74px;
  height: 74px;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

._smallDonut_15dys_1031 svg {
  width: 74px;
  height: 74px;
  transform: rotate(-90deg);
}

._smallDonut_15dys_1031 > svg ~ * {
  position: absolute;
  color: #8a90a5;
  font-size: 14px;
}

/* Performance Bars */
._performanceBars_15dys_1075 {
  height: 150px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 16px;
  padding: 8px 16px 24px;
  position: relative;
}

._ratingCol_15dys_1095 {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

._ratingCol_15dys_1095 b {
  font-size: 8px;
  color: #5b6476;
  font-weight: 700;
}

._ratingCol_15dys_1095 span {
  width: 32px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #8663ee, #6d4bec);
  min-height: 4px;
  transition: height 0.3s ease;
}

._ratingCol_15dys_1095 small {
  color: #101828;
  font-size: 8px;
  font-weight: 700;
}

._performanceBars_15dys_1075 p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: 0;
  color: #7047e8;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}

/* Hiring vs Resignation */
._hiringChart_15dys_1179 {
  padding: 8px 4px 0;
}

._hiringLegend_15dys_1187 {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 8px;
  font-weight: 600;
  color: #374151;
}

._hireDot_15dys_1207 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #2f86ee;
  margin-right: 4px;
}

._resignDot_15dys_1225 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #ff62ad;
  margin-right: 4px;
}

._hiringBars_15dys_1243 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 80px;
  padding: 0 4px;
}

._hiringBarGroup_15dys_1259 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

._hiringBarColumn_15dys_1275 {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 70px;
}

._hireBar_15dys_1289 {
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: #2f86ee;
  min-height: 4px;
  transition: height 0.3s ease;
}

._resignBar_15dys_1305 {
  width: 8px;
  border-radius: 3px 3px 0 0;
  background: #ff62ad;
  min-height: 4px;
  transition: height 0.3s ease;
}

._hiringMonth_15dys_1321 {
  font-size: 7px;
  color: #7b8498;
  font-weight: 500;
}

/* Department Summary Table */
._summary_15dys_1335 {
  grid-column: span 2;
  min-height: auto;
  margin-top: 0;
}

/* Pending Actions */
._pendingActions_15dys_1349 {
  background: #fff;
  border: 1px solid #e2e7f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

._pendingGrid_15dys_1367 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

._pendingGrid_15dys_1367 span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #f3f4f6;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
}

/* Responsive */
@media (max-width: 1400px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1199px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._chartsGrid_15dys_505 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  ._page_15dys_1 {
    padding: 12px;
  }

  ._statsGrid_15dys_177 {
    grid-template-columns: 1fr 1fr;
  }

  ._chartsGrid_15dys_505 {
    grid-template-columns: 1fr;
  }

  ._header_15dys_15 {
    flex-direction: column;
    align-items: flex-start !important;
  }

  ._header_15dys_15 ._d-flex_15dys_1475 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._statCard_15dys_191 {
    height: auto;
    padding: 12px 14px;
    min-height: 70px;
  }

  ._statCard_15dys_191 h3 {
    font-size: 12px;
  }

  ._panel_15dys_521 {
    padding: 12px 14px;
    min-height: 200px;
  }

  ._donutBox_15dys_799 {
    width: 110px;
    height: 110px;
  }

  ._donutSvg_15dys_817 {
    width: 110px;
    height: 110px;
  }

  ._genderRing_15dys_941 {
    width: 100px;
    height: 100px;
  }

  ._genderRing_15dys_941 svg {
    width: 100px;
    height: 100px;
  }

  ._hiringBars_15dys_1243 {
    height: 60px;
  }

  ._hiringBarColumn_15dys_1275 {
    height: 50px;
  }

  ._performanceBars_15dys_1075 {
    height: 130px;
    padding: 4px 8px 20px;
    gap: 10px;
  }

  ._ratingCol_15dys_1095 {
    height: 90px;
  }

  ._ratingCol_15dys_1095 span {
    width: 24px;
  }

  ._chartWrap_15dys_639 {
    height: 140px;
    padding-left: 32px;
  }

  ._lineSvg_15dys_683 {
    height: 100px;
  }

  ._dateRangeInfo_15dys_163 {
    display: none;
  }

  ._dateInput_15dys_51 {
    font-size: 8px;
    padding: 3px 6px;
    width: 100px;
  }
}

@media (max-width: 480px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: 1fr;
  }

  ._statCard_15dys_191 {
    padding: 10px 12px;
  }

  ._statCard_15dys_191 h3 {
    font-size: 11px;
  }

  ._statIcon_15dys_227 {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

/* Utility */
._trendUp_15dys_1681 {
  color: #16a34a;
}

._trendDown_15dys_1689 {
  color: #dc2626;
}

._text-primary_15dys_1697 {
  color: #2f86ee;
}

._text-secondary_15dys_1705 {
  color: #8a97ad;
}

._text-success_15dys_1713 {
  color: #16a34a;
}

._text-danger_15dys_1721 {
  color: #dc2626;
}

._text-warning_15dys_1729 {
  color: #f59e0b;
}

._fw-bold_15dys_1737 {
  font-weight: 700;
}

._mb-0_15dys_1745 {
  margin-bottom: 0;
}

._mb-2_15dys_1753 {
  margin-bottom: 8px;
}

._mt-2_15dys_1761 {
  margin-top: 8px;
}

._gap-2_15dys_1769 {
  gap: 8px;
}

._gap-3_15dys_1777 {
  gap: 12px;
}

._gap-4_15dys_1785 {
  gap: 16px;
}

._d-flex_15dys_1475 {
  display: flex;
}

._align-items-center_15dys_1801 {
  align-items: center;
}

._align-items-baseline_15dys_1809 {
  align-items: baseline;
}

._justify-content-between_15dys_1817 {
  justify-content: space-between;
}

._justify-content-center_15dys_1825 {
  justify-content: center;
}

._flex-wrap_15dys_1833 {
  flex-wrap: wrap;
}

._flex-column_15dys_1841 {
  flex-direction: column;
}

._w-100_15dys_1849 {
  width: 100%;
}

._h-100_15dys_1857 {
  height: 100%;
}

._btn-light_15dys_1865 {
  background: #f8f9fa;
  border: 1px solid #e4e8f2;
  color: #4b5567;
}

._btn-sm_15dys_1877 {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
}

/* Animations */
@keyframes _shimmer_15dys_1 {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes _pulse_15dys_1 {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

._page_15dys_1 {
  padding: 24px 28px 40px;
  background: #f8fafc;
  min-height: 100vh;
  font-family:
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: #1f2937;
}

/* ─────────────────────────────────────────
   Header
───────────────────────────────────────── */
._header_15dys_15 {
  margin-bottom: 20px;
}
/* .header > div > span {
  font-size: 9px;
  color: #6b7280;
} */

/* ─────────────────────────────────────────
   Date Range Controls
───────────────────────────────────────── */
._dateRangeLabel_15dys_37 {
  font-size: 9px;
  font-weight: 500;
  color: #374151;
}

._dateInputGroup_15dys_51 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 2px 8px;
  height: 23px;
}

._dateInputLabel_15dys_63 {
  font-size: 9px;
  color: #9ca3af;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

._dateInput_15dys_51 {
  border: none;
  outline: none;
  background: transparent;
  font-size: 9px;
  width: 110px;
  height: 24px;
  padding: 0;
}

._dateRangeInfo_15dys_163 {
  font-size: 9px;
  color: #9ca3af;
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   Stat Cards
───────────────────────────────────────── */
._statsGrid_15dys_177 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

._statCard_15dys_191 {
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

._statIcon_15dys_227 {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

._statCard_15dys_191 p {
  font-size: 9px;
  color: #6b7280;
  margin: 0 0 2px;
  font-weight: 500;
}

._statCard_15dys_191 h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #111827;
  line-height: 1.1;
}

._statCard_15dys_191 h3 small {
  font-size: 9px;
  font-weight: 400;
  margin-left: 2px;
  color: #6b7280;
}

._statCard_15dys_191 em {
  font-size: 9px;
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 4px;
}

._trendUp_15dys_1681::before {
  content: "▲";
  font-size: 7px;
  color: #16a34a;
}

._trendDown_15dys_1689::before {
  content: "▼";
  font-size: 7px;
  color: #dc2626;
}

._negative_15dys_329 {
  color: #dc2626 !important;
}

._tripleGrid_15dys_2221 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

._triplePanel_15dys_2235 {
  min-height: 280px;
}

._panel_15dys_521 {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  padding: 18px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

._panelTitle_15dys_543 {
  font-size: 10px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

._infoDot_15dys_557 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

._bulbIcon_15dys_611 {
  color: #f59e0b;
  font-size: 12px;
  display: flex;
  align-items: center;
}

._smallSelect_15dys_583 {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #374151;
  border: 1px solid #e5e7eb;
}

._dashboardGrid_15dys_2343 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

._summary_15dys_1335 {
  min-width: 0;
}

._sidePanels_15dys_2363 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._department_15dys_2375 {
  flex: 1;
  min-height: 220px;
}

._gender_15dys_941 {
  flex: 1;
  min-height: 160px;
}

._donutBox_15dys_799 {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

._donutSvg_15dys_817 {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

._donutCenter_15dys_829 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

._donutCenter_15dys_829 strong {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

._donutCenter_15dys_829 span {
  font-size: 8px;
  color: #6b7280;
  margin-top: 2px;
}

._legendList_15dys_873 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0 4px;
}

._legendItem_15dys_887 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
}

._legendItem_15dys_887 span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

._legendItem_15dys_887 small {
  flex: 1;
  color: #374151;
  font-size: 9px;
}

._legendItem_15dys_887 b {
  color: #6b7280;
  font-weight: 500;
  font-size: 9px;
}

._genderRing_15dys_941 {
  position: relative;
  width: 100px;
  height: 100px;
}

._genderRing_15dys_941 svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

._genderRing_15dys_941 > svg + * {
  display: none;
}

/* FiUsers icon centered */
._genderRing_15dys_941 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._genderRing_15dys_941 svg {
  position: absolute;
  inset: 0;
}

._genderStat_15dys_983 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

._genderStat_15dys_983 b {
  font-size: 14px;
  font-weight: 700;
}

._genderStat_15dys_983 span {
  font-size: 8px;
  color: #6b7280;
}

._pinkText_15dys_1021 {
  color: #ec4899;
}

@media (max-width: 1100px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._tripleGrid_15dys_2221 {
    grid-template-columns: 1fr 1fr;
  }

  ._dashboardGrid_15dys_2343 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  ._page_15dys_1 {
    padding: 16px 12px 32px;
  }

  ._statsGrid_15dys_177 {
    grid-template-columns: 1fr;
  }

  ._tripleGrid_15dys_2221 {
    grid-template-columns: 1fr;
  }

  ._dashboardGrid_15dys_2343 {
    grid-template-columns: 1fr;
  }
}

._midGrid_15dys_2699 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

._midPanel_15dys_2713 {
  min-height: 240px;
}

._attendanceLegend_15dys_2721 {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 9px;
  color: #374151;
}

._attendanceLegend_15dys_2721 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

._barSwatch_15dys_2749 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  font-style: normal;
}

._lineSwatch_15dys_2767 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7c3aed;
  font-style: normal;
}

@media (max-width: 1100px) {
  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr;
  }
}

._midGrid_15dys_2699 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

._midPanel_15dys_2713 {
  min-height: 240px;
}

._attendanceLegend_15dys_2721 {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 9px;
  color: #374151;
}

._attendanceLegend_15dys_2721 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

._barSwatch_15dys_2749 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3b82f6;
  font-style: normal;
}

._lineSwatch_15dys_2767 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7c3aed;
  font-style: normal;
}

@media (max-width: 1100px) {
  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr;
  }
}

/* ── Header ── */
._headerTitle_15dys_2921 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px;
  line-height: 1.1;
}

._headerSub_15dys_2937 {
  font-size: 11px;
  color: #7b8498;
  margin-top: 0px;
}

._dateControls_15dys_2949 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._statsGrid_15dys_177 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

._statLabel_15dys_2977 {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

._statValue_15dys_345 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

._statTrend_15dys_357 {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

._trendUp_15dys_1681 {
  color: #16a34a;
}

._trendDown_15dys_1689 {
  color: #dc2626;
}

._trendNeutral_15dys_3049 {
  color: #6b7280;
}

/* ── Panel header row ── */
._panelHeader_15dys_3059 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

._panelHeaderLeft_15dys_3075 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Chart canvas wrappers ── */
._chartBox200_15dys_3089 {
  position: relative;
  height: 200px;
}

._chartBox160_15dys_3099 {
  position: relative;
  height: 160px;
}

/* ── Donut / gender layout ── */
._donutWrap_15dys_3111 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
}

._donutIcon_15dys_3129 {
  font-size: 20px;
  color: #9ca3af;
}

._genderWrap_15dys_3139 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

._genderIcon_15dys_3155 {
  font-size: 18px;
  color: #8a90a5;
  position: absolute;
}

._genderStats_15dys_3167 {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ── Department table cells ── */
._deptCell_15dys_3187 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

._deptDot_15dys_3203 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

._perfCell_15dys_3219 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

._starIcon_15dys_3233 {
  color: #7047e8;
  font-size: 12px;
}

._tableWrap_15dys_3243 {
  width: 100%;
  overflow-x: auto;
}

._dashboardGrid_15dys_2343 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

._summary_15dys_1335 {
  min-height: auto;
}

._expPanel_15dys_3273 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 6px;
}

._expPanelTitle_15dys_3289 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

._expPanelTitle_15dys_3289 strong {
  font-weight: 700;
  color: #111827;
  text-transform: none;
  letter-spacing: 0;
}

._expPanelCount_15dys_3327 {
  font-weight: 400;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}

._expCenter_15dys_3341 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  color: #94a3b8;
  font-size: 12px;
}

._expSpinner_15dys_3361 {
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _expSpin_15dys_3361 0.65s linear infinite;
}

@keyframes _expSpin_15dys_3361 {
  to {
    transform: rotate(360deg);
  }
}

/* Legend */
._expLegend_15dys_3393 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 16px;
}

._expLegendItem_15dys_3407 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #6b7280;
}

._expLegendDot_15dys_3423 {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Employee block */
._empBlock_15dys_3439 {
  margin-bottom: 20px;
}

._empBlock_15dys_3439:last-child {
  margin-bottom: 0;
}

._empRow_15dys_3455 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px;
}

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

._empInfo_15dys_3495 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

._empName_15dys_3509 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}

._empCode_15dys_3521 {
  font-size: 9px;
  color: #94a3b8;
}

/* Attendance % badge */
._pctBadge_15dys_3533 {
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

._pctHigh_15dys_3551 {
  background: #dcfce7;
  color: #16a34a;
}

._pctMid_15dys_3561 {
  background: #fef9c3;
  color: #ca8a04;
}

._pctLow_15dys_3571 {
  background: #fee2e2;
  color: #dc2626;
}

/* No records */
._noRecords_15dys_3583 {
  font-size: 11px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Cards scroll row */
._attCardsScroll_15dys_3597 {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

._attCardsScroll_15dys_3597::-webkit-scrollbar {
  height: 4px;
}

._attCardsScroll_15dys_3597::-webkit-scrollbar-track {
  background: transparent;
}

._attCardsScroll_15dys_3597::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

/* Single attendance card */
._attCard_15dys_3597 {
  flex: 0 0 220px;
  background: #fff;
  border: 1px solid #e8ecf3;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}

._attCard_15dys_3597:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09);
}

._attCardHeader_15dys_3675 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

._attCardDate_15dys_3691 {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._attStatusBadge_15dys_3705 {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Status colour tokens */
._statusPresent_15dys_3723 {
  background: #dcfce7;
  color: #16a34a;
}

._statusAbsent_15dys_3733 {
  background: #fee2e2;
  color: #dc2626;
}

._statusHalfDay_15dys_3743 {
  background: #fef9c3;
  color: #ca8a04;
}

._statusLater_15dys_3753 {
  background: #fff7ed;
  color: #ea580c;
}

._statusHoliday_15dys_3763 {
  background: #ede9fe;
  color: #7c3aed;
}

._statusLeave_15dys_3773 {
  background: #e0f2fe;
  color: #0369a1;
}

._statusDefault_15dys_3783 {
  background: #f1f5f9;
  color: #64748b;
}

._attCardDivider_15dys_3793 {
  height: 1px;
  background: #f1f5f9;
  margin-bottom: 10px;
}

/* 2-column field grid */
._attCardGrid_15dys_3807 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

._attCardField_15dys_3819 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._attCardLabel_15dys_3831 {
  font-size: 8px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

._attCardValue_15dys_3849 {
  font-size: 10px;
  font-weight: 500;
  color: #111827;
  line-height: 1.3;
}

/* Legend dot colour overrides */
._expLegendDot_15dys_3423._statusPresent_15dys_3723 {
  background: #dcfce7;
  border: 1px solid #86efac;
}

._expLegendDot_15dys_3423._statusAbsent_15dys_3733 {
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

._expLegendDot_15dys_3423._statusHalfDay_15dys_3743 {
  background: #fef9c3;
  border: 1px solid #fde047;
}

._expLegendDot_15dys_3423._statusLater_15dys_3753 {
  background: #fff7ed;
  border: 1px solid #fdba74;
}

._expLegendDot_15dys_3423._statusHoliday_15dys_3763 {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
}

._expLegendDot_15dys_3423._statusLeave_15dys_3773 {
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
}

._expLegendDot_15dys_3423._statusDefault_15dys_3783 {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._tripleGrid_15dys_2221 {
    grid-template-columns: 1fr 1fr;
  }

  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: 1fr 1fr;
  }

  ._tripleGrid_15dys_2221 {
    grid-template-columns: 1fr;
  }

  ._midGrid_15dys_2699 {
    grid-template-columns: 1fr;
  }

  ._dateControls_15dys_2949 {
    flex-wrap: wrap;
  }

  ._dateRangeInfo_15dys_163 {
    display: none;
  }
}

@media (max-width: 480px) {
  ._statsGrid_15dys_177 {
    grid-template-columns: 1fr;
  }
}

._header_15dys_15 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

._dateControls_15dys_2949 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._wrapper_177ak_1 {
  position: relative;
  width: 100%;
  font-family: inherit;
}

/* ================= Input ================= */

._inputBox_177ak_17 {
  min-height: 44px;
  border: 1px solid #d8e0ef;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: 0.2s;
  padding: 6px 12px;
}

._inputBox_177ak_17:hover {
  border-color: #6d5ef5;
}

._inputBox_177ak_17:focus-within {
  border-color: #6d5ef5;
  box-shadow: 0 0 0 3px rgba(109, 94, 245, 0.12);
}

._inputContent_177ak_61 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

._placeholder_177ak_75 {
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
}

._arrow_177ak_87 {
  color: #94a3b8;
  transition: 0.25s;
  font-size: 18px;
}

._rotate_177ak_99 {
  transform: rotate(180deg);
}

/* ================= Chips ================= */

._chip_177ak_111 {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f3efff;
  border: 1px solid #c8bdfd;
  color: #6d5ef5;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
}

._chip_177ak_111 button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 13px;
}

._chip_177ak_111 button:hover {
  color: #4f46e5;
}

/* ================= Dropdown ================= */

._dropdown_177ak_171 {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #d8e0ef;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  z-index: 999;
  overflow: hidden;
}

/* ================= Search ================= */

._searchBox_177ak_201 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #edf2f7;
}

._searchIcon_177ak_217 {
  color: #94a3b8;
  font-size: 16px;
}

._searchBox_177ak_201 input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}

._searchBox_177ak_201 input::placeholder {
  color: #94a3b8;
}

/* ================= Select All ================= */

._selectAll_177ak_255 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

._selectAll_177ak_255 input {
  width: 16px;
  height: 16px;
}

/* ================= List ================= */

._list_177ak_293 {
  max-height: 260px;
  overflow-y: auto;
}

._row_177ak_303 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: 0.18s;
  border-bottom: 1px solid #f3f4f6;
}

._row_177ak_303:last-child {
  border-bottom: none;
}

._row_177ak_303:hover {
  background: #f8f7ff;
}

._row_177ak_303 input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ================= Avatar ================= */

._avatar_177ak_355 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #6d5ef5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

._avatar_177ak_355 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= Info ================= */

._info_177ak_401 {
  flex: 1;
  overflow: hidden;
}

._name_177ak_411 {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._code_177ak_429 {
  margin-top: 3px;
  font-size: 12px;
  color: #94a3b8;
}

/* ================= Empty ================= */

._empty_177ak_445 {
  padding: 35px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

/* ================= Pagination ================= */

/* .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-top: 1px solid #edf2f7;
}

.pagination button {
  border: none;
  background: #6d5ef5;
  color: white;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}

.pagination button:hover:not(:disabled) {
  background: #5b4ee0;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination span {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
} */

._loadingMore_177ak_533 {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}

/* ================= Footer ================= */

._footer_177ak_551 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid #edf2f7;
  background: #fafcff;
}

._footer_177ak_551 span {
  color: #64748b;
  font-size: 13px;
}

._footer_177ak_551 button {
  border: none;
  background: transparent;
  color: #6d5ef5;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

._footer_177ak_551 button:hover {
  text-decoration: underline;
}

/* ================= Scrollbar ================= */

._list_177ak_293::-webkit-scrollbar {
  width: 6px;
}

._list_177ak_293::-webkit-scrollbar-track {
  background: transparent;
}

._list_177ak_293::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 20px;
}

/* ================= Responsive ================= */

@media (max-width: 768px) {
  ._dropdown_177ak_171 {
    max-height: 420px;
  }

  ._row_177ak_303 {
    padding: 10px;
  }

  ._avatar_177ak_355 {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  ._name_177ak_411 {
    font-size: 13px;
  }

  ._code_177ak_429 {
    font-size: 11px;
  }

  ._pagination_177ak_463 {
    flex-wrap: wrap;
  }
}
._modalHeader_24hcy_1 {
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 16px 12px;
}

._modalTitle_24hcy_11 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

._modalBody_24hcy_23 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 16px;
    text-align: center;
    gap: 12px;
}

._iconCircle_24hcy_41 {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

._confirmText_24hcy_59 {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

._empName_24hcy_73 {
    color: #0f172a;
}

._requestIdText_24hcy_81 {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

._modalFooter_24hcy_93 {
    border-top: 1px solid #f1f5f9;
    padding: 10px 16px;
    gap: 8px;
    display: flex;
    justify-content: flex-end;
}

._cancelBtn_24hcy_109 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
}

._cancelBtn_24hcy_109:hover {
    background: #e2e8f0 !important;
}

._confirmBtn_24hcy_137 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    min-width: 100px !important;
    padding: 5px 14px !important;
    border-radius: 6px !important;
}

._confirmBtn_24hcy_137:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}._page_i8bx1_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f4f7fb;
  min-height: 100%;
}

._statsAccordion_i8bx1_19 {
  border-radius: 10px;
  overflow: hidden;
}

._accordionHeader_i8bx1_29 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

._accordionHeader_i8bx1_29:hover {
  background: #f8fafc;
}

._accordionTitle_i8bx1_57 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

._accordionTitle_i8bx1_57 svg {
  color: #f59e0b;
}

._accordionToggle_i8bx1_83 {
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._accordionToggle_i8bx1_83:hover {
  color: #374151;
}

._accordionContent_i8bx1_113 {
  padding: 12px;
  animation: _slideDown_i8bx1_1 0.25s ease-out;
  border-top: 1px solid #e2e8f0;
}

@keyframes _slideDown_i8bx1_1 {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

._statsGrid_i8bx1_135 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  ._statsGrid_i8bx1_135 {
    grid-template-columns: repeat(2, 1fr);
  }
}

._summaryCard_i8bx1_159 {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

._summaryCard_i8bx1_159:hover {
  transform: translateY(-2px);
}

._summaryTop_i8bx1_187 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._summaryTitle_i8bx1_199 {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.3;
  flex: 1;
  padding-right: 6px;
}

._summaryIcon_i8bx1_217 {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryValue_i8bx1_237 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}


._layout_i8bx1_251 {
  display: flex;
  gap: 16px;
}

._layoutMain_i8bx1_261 {
  flex: 1;
  min-width: 0;
}

._tableSection_i8bx1_271 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

._tableHeader_i8bx1_285 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 0 16px;
}

._sectionTitle_i8bx1_299 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

._sectionSub_i8bx1_313 {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}



._badge_i8bx1_329 {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}



._employeeCell_i8bx1_351 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._empAvatar_i8bx1_363 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._empInfo_i8bx1_389 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._empName_i8bx1_401 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

._empCode_i8bx1_415 {
  font-size: 11px;
  color: #94a3b8;
}



._requestIdCell_i8bx1_429 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._requestIdLabel_i8bx1_441 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._requestIdDate_i8bx1_453 {
  font-size: 11px;
  color: #94a3b8;
}



._shiftSwapCell_i8bx1_467 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._shiftBlock_i8bx1_479 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._shiftBlockName_i8bx1_491 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  text-transform: capitalize;
}

._shiftBlockTime_i8bx1_505 {
  font-size: 11px;
  color: #64748b;
}

._shiftArrow_i8bx1_515 {
  color: #94a3b8;
  flex-shrink: 0;
}



._textMuted_i8bx1_529 {
  color: #94a3b8;
  font-size: 12px;
}



._bulkSelectedBar_i8bx1_543 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
}

._bulkSelectedLeft_i8bx1_563 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

._bulkCountBadge_i8bx1_577 {
  background: #2563eb;
  color: #fff;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

._bulkSelectedText_i8bx1_595 {
  font-size: 13px;
  color: #1e40af;
  font-weight: 500;
}

._bulkBtnGroup_i8bx1_607 {
  display: flex;
  gap: 6px;
}

._bulkActionBtn_i8bx1_617 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

._bulkActionBtn_i8bx1_617:hover {
  opacity: 0.85;
}

._bulkActionBtnDanger_i8bx1_651 {
  background: #fee2e2;
  color: #dc2626;
}

._bulkDeselect_i8bx1_661 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: #dbeafe;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.15s;
}

._bulkDeselect_i8bx1_661:hover {
  background: #bfdbfe;
}



._dropdownWrapper_i8bx1_701 {
  position: static;
  display: inline-block;
}

._dropdownTrigger_i8bx1_711 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

._dropdownTrigger_i8bx1_711:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

._dropdownBackdrop_i8bx1_751 {
  position: fixed;
  inset: 0;
  z-index: 99;
}

._dropdownMenu_i8bx1_763 {
  z-index: 9999;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 130px;
  overflow: hidden;
}

._dropdownItem_i8bx1_783 {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}

._dropdownApprove_i8bx1_813 {
  color: #16a34a;
}

._dropdownApprove_i8bx1_813:hover {
  background: #f0fdf4;
}

._dropdownReject_i8bx1_829 {
  color: #dc2626;
}

._dropdownReject_i8bx1_829:hover {
  background: #fef2f2;
}._page_udnh7_1 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    min-height: 100%;
}


._loadingWrapper_udnh7_21,
._emptyWrapper_udnh7_23 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 300px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_udnh7_45 {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: _spin_udnh7_45 0.7s linear infinite;
}

@keyframes _spin_udnh7_45 {
    to {
        transform: rotate(360deg);
    }
}

._loadingText_udnh7_75 {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}


._topBar_udnh7_89 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

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

._backBtn_udnh7_117 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

._backBtn_udnh7_117:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

._pageTitle_udnh7_157 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px 0;
}

._pageSubtitle_udnh7_171 {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

._topBarRight_udnh7_183 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._dangerBtn_udnh7_195 {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._dangerBtn_udnh7_195:hover {
    background: #fee2e2 !important;
}


._heroBanner_udnh7_215 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    gap: 12px;
    flex-wrap: wrap;
}

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

._heroStatusIcon_udnh7_249 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._heroStatusLabel_udnh7_269 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

._heroStatusSub_udnh7_281 {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
}

._heroMeta_udnh7_293 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

._badge_udnh7_307 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

._badgeIcon_udnh7_329 {
    display: flex;
    align-items: center;
}

._shiftSwapVisual_udnh7_339 {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

._shiftCard_udnh7_359 {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._shiftCard_udnh7_359:first-child {
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

._shiftCard_udnh7_359:last-child {
    background: #eff6ff;
}

._shiftCardLabel_udnh7_393 {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

._shiftCardName_udnh7_409 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    text-transform: capitalize;
}

._shiftCardTime_udnh7_423 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

._shiftTimeSep_udnh7_443 {
    color: #94a3b8;
    font-weight: 400;
}

._swapArrowWrapper_udnh7_453 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    gap: 0;
}

._swapArrowLine_udnh7_471 {
    width: 1px;
    flex: 1;
    background: #e2e8f0;
}

._swapArrowIcon_udnh7_483 {
    width: 34px;
    height: 34px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

._contentGrid_udnh7_511 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    ._contentGrid_udnh7_511 {
        grid-template-columns: 1fr;
    }
}

._sectionCard_udnh7_535 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

._sectionCardHeader_udnh7_549 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

._sectionCardIcon_udnh7_567 {
    display: flex;
    align-items: center;
    color: #64748b;
}

._sectionCardTitle_udnh7_579 {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

._sectionCardBody_udnh7_595 {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


._infoRow_udnh7_611 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    padding: 2px 0;
}

._infoLabel_udnh7_629 {
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
}

._infoValue_udnh7_641 {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
}

._empRow_udnh7_653 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

._empBlock_udnh7_667 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

._empAvatar_udnh7_681 {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

._empMeta_udnh7_707 {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

._empRole_udnh7_719 {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

._empName_udnh7_735 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

._empCode_udnh7_749 {
    font-size: 11px;
    color: #94a3b8;
}


._reasonBlock_udnh7_761 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._reasonLabel_udnh7_773 {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

._reasonText_udnh7_789 {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.6;
}

._divider_udnh7_801 {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

._textMuted_udnh7_813 {
    color: #94a3b8;
    font-style: italic;
}

._impactGrid_udnh7_823 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

._impactItem_udnh7_835 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

._impactItem_udnh7_835[data-status="warn"] {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #92400e;
}

._impactItem_udnh7_835[data-status="ok"] {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

._impactVal_udnh7_885 {
    margin-left: auto;
    font-weight: 700;
    font-size: 12px;
}._page_1w8dw_1 {
  background: #f5f7fb;
  min-height: 100vh;
  padding: 14px 16px;
}

._headerRight_1w8dw_13 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._searchBox_1w8dw_25 {
  width: 220px;
  height: 34px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

._searchBox_1w8dw_25 input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  background: transparent;
}

._iconWrapper_1w8dw_65 {
  position: relative;
}

._iconCircle_1w8dw_73 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

._badge_1w8dw_95 {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #f59e0b;
  color: white;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

._avatarWrapper_1w8dw_127 {
  position: relative;
}

._avatar_1w8dw_127 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

._onlineDot_1w8dw_147 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
}

._statsCard_1w8dw_169 {
  position: relative;
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 12px;
  min-height: 92px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

._statsInner_1w8dw_195 {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}

._statsLeft_1w8dw_207 {
  flex: 1;
}

._statsTop_1w8dw_215 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._statsTitle_1w8dw_227 {
  font-size: 10px;
  color: #6b7280;
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 1;
}

._statsValue_1w8dw_243 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

._statsGrowth_1w8dw_257 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._growthGreen_1w8dw_269 {
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
}

._statsGrowth_1w8dw_257 small {
  color: #9ca3af;
  font-size: 9px;
}

._menuBtn_1w8dw_291 {
  position: absolute;
  top: 10px;
  right: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
}

._statsIconBlue_1w8dw_309,
._statsIconGreen_1w8dw_311,
._statsIconPurple_1w8dw_313 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

._statsIconBlue_1w8dw_309 {
  background: #eef4ff;
  color: #4f7cff;
}

._statsIconGreen_1w8dw_311 {
  background: #eafbf1;
  color: #22c55e;
}

._statsIconPurple_1w8dw_313 {
  background: #f3e8ff;
  color: #8b5cf6;
}

._chartBars_1w8dw_363 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-top: 26px;
  height: 42px;
}

._chartBars_1w8dw_363 span {
  width: 5px;
  border-radius: 6px;
  background: #4f7cff;
}

._chartBars_1w8dw_363 span:nth-child(1) {
  height: 12px;
}

._chartBars_1w8dw_363 span:nth-child(2) {
  height: 20px;
}

._chartBars_1w8dw_363 span:nth-child(3) {
  height: 30px;
}

._chartBars_1w8dw_363 span:nth-child(4) {
  height: 18px;
}

._chartBars_1w8dw_363 span:nth-child(5) {
  height: 38px;
}

._greenChart_1w8dw_431,
._purpleChart_1w8dw_433 {
  width: 56px;
  height: 34px;
  margin-top: 24px;
}
/* //Card size */
._statsCard_1w8dw_169 > div {
  min-width: 0;
}

._statsLeft_1w8dw_207 {
  flex: 1;
  min-width: 0;
}

._statsTitle_1w8dw_227 {
  white-space: normal;
}

._statsInner_1w8dw_195 {
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

._row_1w8dw_485._gx-2_1w8dw_485._gy-2_1w8dw_485._mb-3_1w8dw_485 {
  --bs-gutter-x: 10px;
}

._greenChart_1w8dw_431,
._purpleChart_1w8dw_433 {
  width: 56px;
  flex-shrink: 0;
}

._chartBars_1w8dw_363 {
  flex-shrink: 0;
}

._statsIconOrange_1w8dw_513 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff7ed;
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

._statsIconRed_1w8dw_537 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

._statsIconYellow_1w8dw_561 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fefce8;
  color: #eab308;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

._orangeChart_1w8dw_585 {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  margin-top: 24px;
}

._orangeChart_1w8dw_585 span {
  width: 5px;
  background: #f59e0b;
  border-radius: 6px;
}

._orangeChart_1w8dw_585 span:nth-child(1) {
  height: 12px;
}

._orangeChart_1w8dw_585 span:nth-child(2) {
  height: 20px;
}

._orangeChart_1w8dw_585 span:nth-child(3) {
  height: 30px;
}

._orangeChart_1w8dw_585 span:nth-child(4) {
  height: 38px;
}

._redCircleChart_1w8dw_645 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 5px solid #fecdd3;
  border-top-color: #ef4444;
  margin-top: 18px;
}

._waveChart_1w8dw_663 {
  width: 56px;
  height: 34px;
  margin-top: 24px;
}

._growthRed_1w8dw_675 {
  color: #ef4444;
  font-size: 10px;
  font-weight: 700;
}

._growthOrange_1w8dw_687 {
  color: #f59e0b;
  font-size: 10px;
  font-weight: 700;
}

/* PRODUCTIVE BANNER */

._productiveBanner_1w8dw_703 {
  height: 120px;
  background: linear-gradient(to right, #fff7ed, #f5f3ff);
  border-radius: 14px;
  border: 1px solid #edf0f5;
  padding: 14px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  overflow: hidden;
}

._bannerMiniCard_1w8dw_733 {
  width: 90px;
  height: 78px;
  background: #ffffffcc;
  backdrop-filter: blur(10px);
  border: 1px solid #edf0f5;
  border-radius: 12px;

  padding: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

._miniIcon_1w8dw_763 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff7ed;
  color: #f59e0b;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;

  margin-bottom: 6px;
}

._bannerMiniCard_1w8dw_733 small {
  font-size: 8px;
  color: #9ca3af;
  margin-bottom: 2px;
}

._bannerMiniCard_1w8dw_733 h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #22c55e;
}

._bannerImageWrap_1w8dw_821 {
  width: 220px;
  height: 110px;

  position: relative;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}
._bannerImage_1w8dw_821 {
  width: 180px;
  height: 110px;
  object-fit: contain;

  position: relative;
  z-index: 2;
}

._bannerContent_1w8dw_863 {
  flex: 1;
}

._bannerContent_1w8dw_863 h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  line-height: 1.4;
}

._bannerContent_1w8dw_863 h3 span {
  color: #f59e0b;
}

._bannerContent_1w8dw_863 p {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

._aiCard_1w8dw_911 {
  width: 150px;
  background: #ffffffcc;
  backdrop-filter: blur(10px);
  border: 1px solid #edf0f5;
  border-radius: 12px;

  padding: 12px;
}

._aiCircle_1w8dw_931 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef2ff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;

  margin-bottom: 8px;
}

._aiCard_1w8dw_911 h6 {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
}

._aiCard_1w8dw_911 p {
  font-size: 8px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* QUICK WORK LOG */

._quickWorkCard_1w8dw_991 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 14px;
}

._quickHeader_1w8dw_1005 h6 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

._quickHeader_1w8dw_1005 p {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}

._inputLabel_1w8dw_1029 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 5px;
  display: block;
}

._quickInput_1w8dw_1045 {
  width: 100%;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 11px;
  outline: none;
  background: #fff;
}

._categoryWrap_1w8dw_1067 {
  display: flex;
  gap: 6px;
}

._categoryWrap_1w8dw_1067 button {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid transparent;
  height: 28px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

._categoryWrap_1w8dw_1067 button::before {
  content: "";
  position: absolute;

  width: 0;
  height: 0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  transition:
    width 0.5s ease,
    height 0.5s ease,
    opacity 0.5s ease;

  opacity: 0;

  z-index: -1;
}

._categoryWrap_1w8dw_1067 button:hover::before {
  width: 160px;
  height: 160px;
  opacity: 1;
}

._categoryWrap_1w8dw_1067 button:not(._activeCategory_1w8dw_1175):hover {
  transform: translateY(-1px);
}

/* Design */
._activeCategory_1w8dw_1175 {
  border: 1px solid #93c5fd !important;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.15);
}
._activeCategory_1w8dw_1175:hover {
  background: #6d5dfc !important;
  color: #ffffff !important;
  border-color: #6d5dfc !important;
}

/* Development */
._categoryWrap_1w8dw_1067 button:nth-child(2) {
  background: #e9f2ff;
  color: #3b82f6;
  border-color: #bfdbfe;
}

/* Meeting */
._categoryWrap_1w8dw_1067 button:nth-child(3) {
  background: #fff1e8;
  color: #f97316;
  border-color: #fed7aa;
}

/* Other */
._categoryWrap_1w8dw_1067 button:nth-child(4) {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

._timeText_1w8dw_1247 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

._rangeSlider_1w8dw_1259 {
  width: 100%;
  accent-color: #8b5cf6;
}

._rangeLabels_1w8dw_1269 {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  color: #9ca3af;
  margin-top: 2px;
}

._timeButtons_1w8dw_1285 {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

._timeButtons_1w8dw_1285 button {
  width: 42px;
  height: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  font-size: 8px;
}

._activeTime_1w8dw_1317 {
  background: #ede9fe !important;
  color: #7c3aed;
  border-color: #c4b5fd !important;
}

._notesBox_1w8dw_1329 {
  width: 100%;
  height: 120px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  resize: none;
  outline: none;
  font-size: 11px;
}

._uploadBox_1w8dw_1351 {
  height: 82px;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 8px;
  color: #9ca3af;
  margin-bottom: 10px;
}

._aiSuggestBtn_1w8dw_1377 {
  width: 100%;
  height: 34px;
  border: 1px solid #e9ddff;
  border-radius: 10px;
  background: #f7f3ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #7c3aed;
  font-size: 8px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.04);
}
._quickFooter_1w8dw_1407 {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._footerLeft_1w8dw_1421 {
  display: flex;
  gap: 8px;
}

._startBtn_1w8dw_1431 {
  height: 32px;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  background: #22c55e;
  color: white;
  font-size: 9px;
  font-weight: 600;
}

._stopBtn_1w8dw_1453 {
  height: 32px;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  background: #fee2e2;
  color: #ef4444;
  font-size: 9px;
  font-weight: 600;
}

._saveBtn_1w8dw_1475 {
  height: 32px;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  background: #7c3aed;
  color: white;
  font-size: 9px;
  font-weight: 600;
}

/* LIVE TIMER */

._liveTimerCard_1w8dw_1501 {
  height: 100%;
  min-height: 320px;

  border-radius: 14px;

  background: radial-gradient(
    circle at center,
    #18245b 0%,
    #0b1335 45%,
    #050b1d 100%
  );

  position: relative;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 18px 14px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    inset 0 0 40px rgba(99, 102, 241, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

._timerTitle_1w8dw_1563 {
  color: white;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 22px;
}

._timerCircleWrap_1w8dw_1577 {
  position: relative;

  width: 170px;
  height: 170px;

  display: flex;
  align-items: center;
  justify-content: center;
}

._outerGlow_1w8dw_1599 {
  position: absolute;

  width: 170px;
  height: 170px;
  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    #8b5cf6,
    #a855f7,
    #6366f1,
    #3b82f6,
    #8b5cf6
  );

  filter: blur(10px);

  opacity: 0.9;
}

._timerCircle_1w8dw_1577 {
  position: relative;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background: radial-gradient(circle, #111c4d 0%, #091126 70%);

  border: 3px solid rgba(255, 255, 255, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
}

._timerCircle_1w8dw_1577::before {
  content: "";

  position: absolute;
  inset: -8px;

  border-radius: 50%;

  border: 3px dashed rgba(167, 139, 250, 0.9);

  animation: _spinTimer_1w8dw_1 18s linear infinite;
}

@keyframes _spinTimer_1w8dw_1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

._timerInner_1w8dw_1725 {
  text-align: center;
}

._timerInner_1w8dw_1725 h2 {
  color: white;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1;
}

._timerInner_1w8dw_1725 h6 {
  color: white;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

._timerInner_1w8dw_1725 p {
  color: #cbd5e1;
  font-size: 9px;
  margin: 0;
}

._pauseBtn_1w8dw_1775 {
  width: 48px;
  height: 48px;

  border-radius: 50%;

  border: 1px solid rgba(139, 92, 246, 0.4);

  background: radial-gradient(circle, #141d4f 0%, #0b122d 100%);

  color: white;

  font-size: 16px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;

  box-shadow: 0 0 18px rgba(139, 92, 246, 0.35);

  cursor: pointer;
}

/* FLOATING TIME CARD */

._bannerTimeCard_1w8dw_1831 {
  position: absolute;

  left: 8px;
  top: 4px;

  width: 72px;
  height: 78px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(10px);

  border-radius: 12px;

  border: 1px solid #edf0f5;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: 4;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

._bannerTimeCard_1w8dw_1831 small {
  font-size: 6px;

  color: #94a3b8;

  margin-bottom: 6px;
}

._timeCircle_1w8dw_1901 {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: conic-gradient(#6d5dfc 0deg, #6d5dfc 280deg, #e5e7eb 280deg);

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

._timeCircle_1w8dw_1901::before {
  content: "";

  position: absolute;

  width: 31px;
  height: 31px;

  border-radius: 50%;

  background: white;
}

._timeCircle_1w8dw_1901 span {
  position: relative;

  z-index: 2;

  font-size: 7px;
  font-weight: 700;

  color: #111827;
}

/* FLOATING TASK CARD */

._bannerTaskCard_1w8dw_1983 {
  position: absolute;

  right: 0;
  top: 6px;

  width: 96px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(10px);

  border-radius: 12px;

  border: 1px solid #edf0f5;

  padding: 10px;

  z-index: 4;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

._bannerTaskCard_1w8dw_1983 small {
  display: block;

  font-size: 6px;

  color: #94a3b8;

  margin-bottom: 8px;
}

._bannerTaskCard_1w8dw_1983 ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

._bannerTaskCard_1w8dw_1983 li {
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 7px;

  color: #475569;

  margin-bottom: 6px;
}

._bannerTaskCard_1w8dw_1983 li:last-child {
  margin-bottom: 0;
}

._bannerTaskCard_1w8dw_1983 li span:last-child {
  color: #22c55e;

  font-size: 8px;

  font-weight: 700;
}

._sidePanel_1w8dw_2111 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._sideCard_1w8dw_2123 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 12px;
}

._sideHeader_1w8dw_2137 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._sideHeader_1w8dw_2137 h6 {
  font-size: 10px;
  font-weight: 700;
  margin: 0;
}

._sideHeader_1w8dw_2137 span {
  font-size: 8px;
  color: #6366f1;
  font-weight: 600;
}

._scheduleItem_1w8dw_2175 {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

._scheduleItem_1w8dw_2175 small {
  font-size: 7px;
  color: #9ca3af;
}

._scheduleItem_1w8dw_2175 h5 {
  font-size: 8px;
  font-weight: 700;
  margin: 0 0 2px;
}

._scheduleItem_1w8dw_2175 p {
  font-size: 7px;
  color: #9ca3af;
  margin: 0;
}

._taskRow_1w8dw_2221 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

._taskLeft_1w8dw_2235 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._taskLeft_1w8dw_2235 p {
  margin: 0;
  font-size: 8px;
  color: #374151;
}

._greenDot_1w8dw_2259,
._orangeDot_1w8dw_2261,
._grayDot_1w8dw_2263 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

._greenDot_1w8dw_2259 {
  background: #22c55e;
}

._orangeDot_1w8dw_2261 {
  background: #f59e0b;
}

._grayDot_1w8dw_2263 {
  background: #d1d5db;
}

._greenText_1w8dw_2299 {
  color: #22c55e;
  font-size: 8px;
  font-weight: 700;
}

._orangeText_1w8dw_2311 {
  color: #f59e0b;
  font-size: 8px;
  font-weight: 700;
}

._redText_1w8dw_2323 {
  color: #ef4444;
  font-size: 8px;
  font-weight: 700;
}

._productivityText_1w8dw_2335 {
  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}

._peakText_1w8dw_2349 {
  font-size: 7px;
  color: #9ca3af;
}

._barChart_1w8dw_2359 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 42px;
  margin-top: 12px;
}

._barChart_1w8dw_2359 span {
  width: 10px;
  border-radius: 8px;
  background: #8b5cf6;
}

._barChart_1w8dw_2359 span:nth-child(1) {
  height: 14px;
}
._barChart_1w8dw_2359 span:nth-child(2) {
  height: 30px;
}
._barChart_1w8dw_2359 span:nth-child(3) {
  height: 22px;
}
._barChart_1w8dw_2359 span:nth-child(4) {
  height: 38px;
}
._barChart_1w8dw_2359 span:nth-child(5) {
  height: 18px;
}
._barChart_1w8dw_2359 span:nth-child(6) {
  height: 26px;
}
._barChart_1w8dw_2359 span:nth-child(7) {
  height: 10px;
}

._daysRow_1w8dw_2431 {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

._daysRow_1w8dw_2431 small {
  font-size: 6px;
  color: #9ca3af;
}

._weeklyRow_1w8dw_2453 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._weeklyRow_1w8dw_2453 h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

._weeklyRow_1w8dw_2453 p {
  margin: 0;
  font-size: 7px;
  color: #22c55e;
  font-weight: 700;
}

._lineChart_1w8dw_2491 {
  margin-top: 10px;
}

._aiRecommend_1w8dw_2499 {
  background: #faf5ff;
  border: 1px solid #eadcff;
  border-radius: 12px;
  padding: 10px;
}

._aiTop_1w8dw_2513 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._aiTop_1w8dw_2513 h6 {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
}

._newBadge_1w8dw_2539 {
  background: #f59e0b;
  color: white !important;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 6px !important;
}

._aiRecommend_1w8dw_2499 h5 {
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 4px;
}

._aiRecommend_1w8dw_2499 p {
  font-size: 7px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

._deadlineRow_1w8dw_2581 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

._deadlineRow_1w8dw_2581 h5 {
  font-size: 8px;
  font-weight: 700;
  margin: 0 0 2px;
}

._deadlineRow_1w8dw_2581 p {
  margin: 0;
  font-size: 7px;
  color: #9ca3af;
}

._scheduleContent_1w8dw_2619 {
  flex: 1;
}

._scheduleTitle_1w8dw_2627 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

._scheduleDot_1w8dw_2641 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6366f1;
  flex-shrink: 0;
}

._taskTick_1w8dw_2657 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 7px;
  font-weight: 700;

  flex-shrink: 0;
}

._weekChartWrap_1w8dw_2691 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 10px;
}

._weekYAxis_1w8dw_2705 {
  height: 60px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding-bottom: 6px;
}

._weekYAxis_1w8dw_2705 span {
  font-size: 6px;
  color: #9ca3af;
  line-height: 1;
}

._lineChart_1w8dw_2491 {
  width: 100%;
  height: 60px;
}

._lineChart_1w8dw_2491 svg {
  width: 100%;
  height: 100%;
  display: block;
}

._aiRecommend_1w8dw_2499 {
  background: #faf5ff;
  border: 1px solid #eadcff;
  border-radius: 12px;
  padding: 12px;
}

._aiTop_1w8dw_2513 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

._aiHeading_1w8dw_2787 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._aiIconCircle_1w8dw_2799 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f3e8ff;
  color: #8b5cf6;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
}

._aiTop_1w8dw_2513 h6 {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  color: #111827;
}

._newBadge_1w8dw_2539 {
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 6px;
  font-weight: 700;
  line-height: 1;
}

._aiRecommend_1w8dw_2499 h5 {
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}

._aiRecommend_1w8dw_2499 p {
  font-size: 7px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

._deadlineLeft_1w8dw_2889 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._deadlineIcon_1w8dw_2901,
._deadlineIconRed_1w8dw_2903 {
  width: 20px;
  height: 20px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

._deadlineIcon_1w8dw_2901 {
  background: #fef2f2;
  color: #f87171;
}

._deadlineIconRed_1w8dw_2903 {
  background: #fef2f2;
  color: #ef4444;
}

._deadlineIcon_1w8dw_2901 i,
._deadlineIconRed_1w8dw_2903 i {
  font-size: 8px;
}

._workLogsCard_1w8dw_2957 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

._workLogsHeader_1w8dw_2973 {
  margin-bottom: 4px;
}

._workLogsHeader_1w8dw_2973 h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  margin-bottom: 0;

  color: #111827;
}

._workLogRow_1w8dw_2999 {
  display: grid;
  grid-template-columns:
    70px
    180px
    140px
    60px
    110px
    1fr
    90px
    70px;

  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f3f4f6;
}

._timelineSection_1w8dw_3035 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

._timelineSection_1w8dw_3035 small {
  font-size: 9px;
  color: #6b7280;
  font-weight: 600;
}

._timelineGray_1w8dw_3063 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
}

._taskInfo_1w8dw_3077 h6 {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #111827;
}

._taskInfo_1w8dw_3077 p {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 6px;
}

._tagWrap_1w8dw_3103 {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}

._purpleTag_1w8dw_3115,
._blueTag_1w8dw_3117,
._orangeTag_1w8dw_3119 {
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
}

._purpleTag_1w8dw_3115 {
  background: #f3e8ff;
  color: #7c3aed;
}

._blueTag_1w8dw_3117 {
  background: #dbeafe;
  color: #2563eb;
}

._orangeTag_1w8dw_3119 {
  background: #ffedd5;
  color: #ea580c;
}

._timeInfo_1w8dw_3163 span {
  font-size: 10px;
  color: #6b7280;
  display: block;
  margin-bottom: 4px;
}

._timeInfo_1w8dw_3163 h6 {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

._progressCircleGreen_1w8dw_3189,
._progressCircleOrange_1w8dw_3191 {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  position: relative;
}

._progressCircleGreen_1w8dw_3189 {
  border: 3px solid #22c55e;
  color: #22c55e;
}

._progressCircleOrange_1w8dw_3191 {
  border: 3px solid #f59e0b;
  color: #f59e0b;
}

._completedBadge_1w8dw_3235,
._progressBadge_1w8dw_3237 {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

._completedBadge_1w8dw_3235 {
  background: #dcfce7;
  color: #16a34a;
}

._progressBadge_1w8dw_3237 {
  background: #fef3c7;
  color: #d97706;
}

._descriptionBox_1w8dw_3271 {
  font-size: 10px;
  line-height: 16px;
  color: #6b7280;
}

._progressBarWrap_1w8dw_3283 {
  display: flex;
  align-items: center;
}

._progressBar_1w8dw_3283 {
  width: 80px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

._progressBar_1w8dw_3283 span {
  display: block;
  height: 100%;
  background: #22c55e;
  border-radius: 999px;
}

._actionBtns_1w8dw_3323 {
  display: flex;
  gap: 6px;
}

._actionBtns_1w8dw_3323 button {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid #f1f5f9;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
}

/* EDIT ICON */
._actionBtns_1w8dw_3323 button:first-child {
  color: #9ca3af;
  background: #f8fafc;
}

/* DELETE ICON */
._actionBtns_1w8dw_3323 button:last-child {
  color: #f87171;
  background: #fff5f5;
}

._actionBtns_1w8dw_3323 i {
  font-size: 10px;
}

._loadMore_1w8dw_3393 {
  text-align: center;
  font-size: 11px;
  color: #6b7280;
  padding-top: 10px;
  font-weight: 600;
}
/* ANALYTICS CARDS */
._analyticsCard_1w8dw_3409 {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 12px;

  height: 165px;
  min-height: 165px;
  max-height: 165px;

  overflow: hidden;

  display: flex;
  flex-direction: column;
}
._analyticsHeader_1w8dw_3439 {
  min-height: 32px;
}
._activityItem_1w8dw_3445,
._summaryItem_1w8dw_3447 {
  min-width: 0;
}

._activityItem_1w8dw_3445 p,
._summaryLeft_1w8dw_3457 p {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

._activityList_1w8dw_3469,
._summaryList_1w8dw_3471,
._donutWrap_1w8dw_3473,
._heatmapWrap_1w8dw_3475,
._calendarDays_1w8dw_3477 {
  flex: 1;
}
._analyticsHeader_1w8dw_3439 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

._analyticsHeader_1w8dw_3439 h6 {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

._analyticsHeader_1w8dw_3439 p,
._analyticsHeader_1w8dw_3439 span {
  font-size: 9px;
  color: #9ca3af;
  margin: 0;
  white-space: nowrap;
}

/* CALENDAR */
._calendarDays_1w8dw_3477 {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: -6px;
}

._calendarDays_1w8dw_3477 div {
  text-align: center;
  flex: 1;
}

._calendarDays_1w8dw_3477 small {
  font-size: 8px;
  color: #9ca3af;
}

._calendarDays_1w8dw_3477 h5 {
  font-size: 12px;
  font-weight: 700;
  margin: 1px 0;
}

._calendarDays_1w8dw_3477 p {
  font-size: 7px;
  color: #6b7280;
  margin: 0;
  line-height: 1;
}

._activeCalendarDay_1w8dw_3589 {
  background: #fff7df;
  border-radius: 10px;
  padding: 4px 0 2px;
  height: auto;
  align-self: flex-start;
}

/* HEATMAP */
/* PRODUCTIVITY HEATMAP ONLY */

._heatmapWrap_1w8dw_3475 {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: -2px;
}

._heatLabels_1w8dw_3627 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 58px;
  padding-top: 16px;

  flex-shrink: 0;
}

._heatLabels_1w8dw_3627 small {
  font-size: 8px;
  color: #9ca3af;
  line-height: 1;
}

._heatmapContent_1w8dw_3661 {
  flex: 1;
  min-width: 0;
}

._heatmapDays_1w8dw_3671 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  margin-bottom: 6px;
}

._heatmapDays_1w8dw_3671 small {
  font-size: 7px;
  color: #9ca3af;
  text-align: center;
}

._heatmapGrid_1w8dw_3697 {
  display: grid;
  grid-template-columns: repeat(5, 14px);
  gap: 6px;
}

._heatmapGrid_1w8dw_3697 span {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #bbf7d0;
}
/* DONUT */
._donutWrap_1w8dw_3473 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -10px;
}

._donutChart_1w8dw_3737 {
  width: 58px;
  height: 58px;
  flex-shrink: 0;

  border-radius: 50%;

  background: conic-gradient(#22c55e 0% 70%, #f59e0b 70% 90%, #ef4444 90% 100%);

  position: relative;
}

._donutChart_1w8dw_3737::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: #fff;
  border-radius: 50%;
}

._donutStats_1w8dw_3777 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
._donutStats_1w8dw_3777 {
  margin-top: 4px;
}
._donutStats_1w8dw_3777 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

._donutStats_1w8dw_3777 p {
  margin: 0;
  font-size: 9px;
  color: #6b7280;
}

/* .donutStats small {
  font-size: 8px;
  color: #9ca3af;
} */

._greenDot_1w8dw_2259,
._orangeDot_1w8dw_2261,
._redDot_1w8dw_3833 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

._greenDot_1w8dw_2259 {
  background: #22c55e;
}

._orangeDot_1w8dw_2261 {
  background: #f59e0b;
}

._redDot_1w8dw_3833 {
  background: #ef4444;
}

/* ACTIVITIES */
._activityList_1w8dw_3469 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._activityItem_1w8dw_3445 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._activityItem_1w8dw_3445 p {
  margin: 0;
  font-size: 10px;
  color: #374151;
}
._scheduleDot_1w8dw_2641 {
  margin-top: -1px;
}
._blueActivity_1w8dw_3911,
._greenActivity_1w8dw_3913,
._orangeActivity_1w8dw_3915,
._pinkActivity_1w8dw_3917 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

._blueActivity_1w8dw_3911 {
  background: #6366f1;
}

._greenActivity_1w8dw_3913 {
  background: #22c55e;
}

._orangeActivity_1w8dw_3915 {
  background: #f59e0b;
}

._pinkActivity_1w8dw_3917 {
  background: #ec4899;
}

/* DAILY SUMMARY */
._summaryList_1w8dw_3471 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0px;
}

._summaryItem_1w8dw_3447 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._summaryLeft_1w8dw_3457 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._summaryLeft_1w8dw_3457 p {
  margin: 0;
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

._summaryItem_1w8dw_3447 small {
  font-size: 10px;
  color: #374151;
  font-weight: 600;
}

._summaryIconPurple_1w8dw_4027,
._summaryIconBlue_1w8dw_4029,
._summaryIconGreen_1w8dw_4031,
._summaryIconOrange_1w8dw_4033 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
}

._summaryIconPurple_1w8dw_4027 {
  background: #f3e8ff;
}

._summaryIconBlue_1w8dw_4029 {
  background: #dbeafe;
}

._summaryIconGreen_1w8dw_4031 {
  background: #dcfce7;
}

._summaryIconOrange_1w8dw_4033 {
  background: #ffedd5;
}

._summaryIconPurple_1w8dw_4027::after,
._summaryIconBlue_1w8dw_4029::after,
._summaryIconGreen_1w8dw_4031::after,
._summaryIconOrange_1w8dw_4033::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

._summaryIconPurple_1w8dw_4027::after {
  background: #8b5cf6;
}

._summaryIconBlue_1w8dw_4029::after {
  background: #3b82f6;
}

._summaryIconGreen_1w8dw_4031::after {
  background: #22c55e;
}

._summaryIconOrange_1w8dw_4033::after {
  background: #f59e0b;
}

._heatmapWrap_1w8dw_3475 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: -2px;
}

._heatmapContent_1w8dw_3661 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* DAYS */
._heatmapDays_1w8dw_3671 {
  display: grid;
  grid-template-columns: repeat(5, 14px);
  gap: 6px;
  padding-left: 2px;
}

._heatmapDays_1w8dw_3671 small {
  width: 14px;
  text-align: center;
  font-size: 7px;
  color: #9ca3af;
  line-height: 1;
}

/* LEFT TIMINGS */
._heatLabels_1w8dw_3627 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 74px; /* SAME HEIGHT AS GRID */

  padding-top: 18px; /* PUSH BELOW DAY LABELS */
}

._heatLabels_1w8dw_3627 small {
  font-size: 8px;
  color: #9ca3af;
  line-height: 1;
}

/* GRID */
._heatmapGrid_1w8dw_3697 {
  display: grid;
  grid-template-columns: repeat(5, 14px);
  gap: 4px;
}

._heatmapGrid_1w8dw_3697 span {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #bbf7d0;
}

._activityIconBlue_1w8dw_4259,
._activityIconGreen_1w8dw_4261,
._activityIconOrange_1w8dw_4263,
._activityIconRed_1w8dw_4265,
._summaryIconPurple_1w8dw_4027,
._summaryIconBlue_1w8dw_4029,
._summaryIconGreen_1w8dw_4031,
._summaryIconOrange_1w8dw_4033 {
  width: 18px;
  height: 18px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

._activityIconBlue_1w8dw_4259,
._summaryIconBlue_1w8dw_4029 {
  background: #eef4ff;
  color: #4f7cff;
}

._activityIconGreen_1w8dw_4261,
._summaryIconGreen_1w8dw_4031 {
  background: #eafbf1;
  color: #22c55e;
}

._activityIconOrange_1w8dw_4263,
._summaryIconOrange_1w8dw_4033 {
  background: #fff7ed;
  color: #f59e0b;
}

._activityIconRed_1w8dw_4265 {
  background: #fef2f2;
  color: #ef4444;
}

._summaryIconPurple_1w8dw_4027 {
  background: #f3e8ff;
  color: #8b5cf6;
}

._activityItem_1w8dw_3445 i,
._summaryLeft_1w8dw_3457 i {
  font-size: 8px;
}

._donutStatRow_1w8dw_4363 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  gap: 10px;
}

._statLeft_1w8dw_4381 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._statLeft_1w8dw_4381 p {
  margin: 0;
  font-size: 9px;
  color: #6b7280;
  white-space: nowrap;
}

._greenValue_1w8dw_4407,
._orangeValue_1w8dw_4409,
._redValue_1w8dw_4411 {
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

._greenValue_1w8dw_4407 {
  color: #22c55e;
}

._orangeValue_1w8dw_4409 {
  color: #f59e0b;
}

._redValue_1w8dw_4411 {
  color: #ef4444;
}
/* ONLY FOR THESE 3 CARDS */

._donutWrap_1w8dw_3473,
._activityList_1w8dw_3469,
._summaryList_1w8dw_3471 {
  flex: unset !important;
  height: auto !important;
}
._donutWrap_1w8dw_3473 {
  margin-top: -5px;
}

._activityList_1w8dw_3469,
._summaryList_1w8dw_3471 {
  padding-top: 0;
}

._attachmentBox_1w8dw_4479 {
  height: 82px;
  margin-bottom: 10px;
}

._attachmentLabel_1w8dw_4489 {
  width: 100%;
  height: 82px;

  border: 1px dashed #d1d5db;
  border-radius: 10px;

  background: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  cursor: pointer;

  padding: 6px;
}

/* ICON */
._attachmentLabel_1w8dw_4489 svg {
  font-size: 14px !important;
  margin-bottom: 2px !important;
  color: #9ca3af;
}

/* TITLE */
._uploadTitle_1w8dw_4545 {
  font-size: 8px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1px;
  line-height: 1.2;
}

/* SUBTEXT */
._uploadSubText_1w8dw_4563 {
  font-size: 7px;
  color: #9ca3af;
  line-height: 1.2;
}

/* FILE NAME */
._selectedFileName_1w8dw_4577 {
  font-size: 7px;
  margin-top: 3px;
  color: #6b7280;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._previewImage_1w8dw_4597 {
  width: calc(100% - 12px);
  height: 45px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 8px;
  padding: 4px;
}

._attachmentLabel_1w8dw_4489 {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

._startBtn_1w8dw_1431,
._stopBtn_1w8dw_1453,
._saveBtn_1w8dw_1475 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease;
}

._startBtn_1w8dw_1431::before,
._stopBtn_1w8dw_1453::before,
._saveBtn_1w8dw_1475::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.5s ease,
    height 0.5s ease,
    opacity 0.6s ease;
  opacity: 0;
  z-index: -1;
}

._startBtn_1w8dw_1431:hover::before,
._stopBtn_1w8dw_1453:hover::before,
._saveBtn_1w8dw_1475:hover::before {
  width: 220px;
  height: 220px;
  opacity: 1;
}

._startBtn_1w8dw_1431:hover,
._stopBtn_1w8dw_1453:hover,
._saveBtn_1w8dw_1475:hover {
  transform: scale(0.97);
}
._designCategory_1w8dw_4715 {
  background: #6d5dfc;
  color: #ffffff;
  border-color: #6d5dfc;
}

._topFilterBar_1w8dw_4727 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  margin-bottom: 12px;
}

/* ── Left cluster ──────────────────────────────── */
._filterLeft_1w8dw_4755 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

._filterRight_1w8dw_4769 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Period toggle group ───────────────────────── */
._toggleGroup_1w8dw_4785 {
  display: flex;
  align-items: center;
  background: #f3f4f6;
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}

._toggleBtn_1w8dw_4803 {
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

._toggleBtn_1w8dw_4803:hover {
  background: #e5e7eb;
  color: #374151;
}

._activeToggle_1w8dw_4845 {
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

._selectInput_1w8dw_4859,
._smallSelect_1w8dw_4861,
._filterDate_1w8dw_4863 {
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  /* chevron icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

._selectInput_1w8dw_4859 {
  min-width: 120px;
}

._smallSelect_1w8dw_4861 {
  min-width: 108px;
}

._filterDate_1w8dw_4863 {
  min-width: 126px;
  padding-right: 10px;
  background-image: none;
  cursor: text;
}

._selectInput_1w8dw_4859:focus,
._smallSelect_1w8dw_4861:focus,
._filterDate_1w8dw_4863:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
  background-color: #fff;
}

._filterField_1w8dw_4953 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._filterLabel_1w8dw_4965 {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* ── Search input ──────────────────────────────── */
._searchEmployee_1w8dw_4983 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  min-width: 172px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

._searchEmployee_1w8dw_4983:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
  background: #fff;
}

._searchEmployee_1w8dw_4983 i {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}

._searchEmployee_1w8dw_4983 input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 11px;
  color: #374151;
  min-width: 0;
}

._searchEmployee_1w8dw_4983 input::placeholder {
  color: #c4c9d4;
}

/* clear ✕ inside search */
._searchEmployee_1w8dw_4983 button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}

._searchEmployee_1w8dw_4983 button:hover {
  color: #ef4444;
}

._filterSelectWrap_1w8dw_5099 {
  position: relative;
  display: inline-flex;
  align-items: center;
}

._filterClearX_1w8dw_5111 {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 10px;
  color: #9ca3af;
  line-height: 1;
  z-index: 1;
  transition: color 0.12s;
}

._filterClearX_1w8dw_5111:hover {
  color: #ef4444;
}

._btnPrimary_1w8dw_5151 {
  height: 30px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: #6366f1;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}

._btnPrimary_1w8dw_5151:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

._btnPrimary_1w8dw_5151:active {
  transform: scale(0.97);
}

._btnSecondary_1w8dw_5203 {
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}

._btnSecondary_1w8dw_5203:hover {
  background: #e5e7eb;
  color: #374151;
}

._lightBtn_1w8dw_5245 {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s;
}

._lightBtn_1w8dw_5245:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._lightBtn_1w8dw_5245 i {
  font-size: 12px;
  color: #6b7280;
}

._filterBadge_1w8dw_5303 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #6366f1;
  background: #ffffff;
  border-radius: 99px;
  margin-left: 5px;
  line-height: 1;
}

@media (max-width: 768px) {
  ._topFilterBar_1w8dw_4727 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._filterLeft_1w8dw_4755,
  ._filterRight_1w8dw_4769 {
    width: 100%;
  }

  ._filterRight_1w8dw_4769 {
    justify-content: flex-end;
  }

  ._searchEmployee_1w8dw_4983 {
    min-width: 100%;
  }

  ._selectInput_1w8dw_4859,
  ._smallSelect_1w8dw_4861 {
    min-width: 0;
    flex: 1;
  }
}

._projectText_1w8dw_5387 {
  font-size: 12px;
  color: #4b5563;
  font-weight: 500;
}

._timeCell_1w8dw_5399 {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

._durationText_1w8dw_5411 {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
}

._productivityWrap_1w8dw_5423 {
  min-width: 100px;
}

._productivityText_1w8dw_2335 {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 4px;
}

._productivityBar_1w8dw_5447 {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

._productivityFill_1w8dw_5463 {
  height: 100%;
  background: #22c55e;
  border-radius: 999px;
  transition: width 0.3s ease;
}

._notesText_1w8dw_5477 {
  display: block;
  max-width: 250px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._completedBadge_1w8dw_3235 {
  background: #dcfce7;
  color: #15803d;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

._progressBadge_1w8dw_3237 {
  background: #fef3c7;
  color: #b45309;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Timeline ── */
._timelineWrapper_1w8dw_5535 {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

._timelineHeader_1w8dw_5551 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

._timelineTitle_1w8dw_5567 {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

._timelineCount_1w8dw_5581 {
  font-size: 11px;
  color: #9ca3af;
}

._timelineScroll_1w8dw_5591 {
  max-height: 500px;
  overflow-y: auto;
}

/* Task + category */
._timelineTask_1w8dw_5603 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._timelineTaskTitle_1w8dw_5615 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

._timelineCategory_1w8dw_5627 {
  font-size: 10px;
  color: #9ca3af;
}

/* Range + duration */
._timelineRange_1w8dw_5639 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._timelineRangeText_1w8dw_5651 {
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
}

._timelineDuration_1w8dw_5663 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

/* Notes */
._timelineNotes_1w8dw_5677 {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Action buttons */
._timelineActions_1w8dw_5699 {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

._tlBtn_1w8dw_5713 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

._tlBtn_1w8dw_5713:hover {
  background: #f3f4f6;
  color: #374151;
}

._tlBtnDanger_1w8dw_5751:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

/* Loading / empty */
._timelineLoading_1w8dw_5765,
._timelineEmpty_1w8dw_5767 {
  text-align: center;
  padding: 40px;
  font-size: 12px;
  color: #9ca3af;
}

/* Pagination */
._timelinePagination_1w8dw_5783 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

._pageBtn_1w8dw_5801 {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

._pageBtn_1w8dw_5801:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._pageInfo_1w8dw_5831 {
  font-size: 11px;
  color: #9ca3af;
}

._closeIcon_1w8dw_5841 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  font-size: 16px;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
}

._closeIcon_1w8dw_5841:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Make the dot column hold both dot + connector line */
._timelineDotCol_1w8dw_5889 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

._timelineDot_1w8dw_5889 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2.5px solid #d1d5db;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

._dotActive_1w8dw_5925 {
  background: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Line that hangs DOWN from dot to next row */
._timelineLine_1w8dw_5939 {
  width: 2px;
  flex: 1;
  min-height: 32px;
  background: #e5e7eb;
  margin-top: 2px;
}

/* Hide line on last row */
._timelineRow_1w8dw_5957:last-child ._timelineLine_1w8dw_5939 {
  display: none;
}

/* Grid: dot | time | rest of content */
._timelineRow_1w8dw_5957 {
  display: grid;
  grid-template-columns:
    20px   /* dot */
    72px   /* time */
    220px  /* task */
    110px  /* attachment */
    170px  /* time range */
    1fr    /* notes */
    72px;  /* actions */

  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: none;
  cursor: pointer;
  transition: background 0.15s;
}

._timelineRow_1w8dw_5957:hover {
  background: #f9fafb;
  border-radius: 8px;
}

._timelineTime_1w8dw_6015 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  padding-top: 1px;
}

._timelineAttachment_1w8dw_6031 {
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._attachmentLink_1w8dw_6045 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #2563eb;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

._attachmentLink_1w8dw_6045:hover {
  text-decoration: underline;
}

._noAttachment_1w8dw_6073 {
  color: #9ca3af;
  font-size: 12px;
}
._page_11hwj_1 {
  min-height: 100vh;
  width: 100%;
  padding: clamp(12px, 1.25vw, 22px);
  background: #f8f9fd;
  color: #18213a;
  font-size: 11px;
}

/* ── Top Bar ── */
._topbar_11hwj_21 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
._topbar_11hwj_21 h6 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
}
._topbar_11hwj_21 > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0;
}
._topbar_11hwj_21 > div:first-child h6 {
  margin: 0;
  line-height: 1;
}
._topbar_11hwj_21 > div:first-child > span {
  margin-top: 2px;
  color: #69738a;
  font-size: 11px;
  line-height: 1;
}

/* ── Date Range Bar (in topbar) ── */
._dateRangeBar_11hwj_85 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
._dateRangeLabel_11hwj_97 {
  font-size: 10.5px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
._dateInputGroup_11hwj_109 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._dateInputLabel_11hwj_119 {
  font-size: 9.5px;
  color: #94a3b8;
}
._dateInput_11hwj_109 {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10.5px;
  color: #374151;
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}
._loadBtn_11hwj_149 {
  padding: 5px 16px;
  border-radius: 6px;
  border: none;
  background: #8b5cf6;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
._loadBtn_11hwj_149:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(112, 71, 232, 0.3);
}
._loadBtn_11hwj_149:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
._dateRangeInfo_11hwj_195 {
  font-size: 9.5px;
  color: #94a3b8;
}

/* ── Dashboard layout── */
._dashboard_11hwj_207 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Stats ── */
._statsGrid_11hwj_221 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
._statCard_11hwj_231,
._card_11hwj_233 {
  border: 1px solid #e5e8f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(33, 43, 77, 0.035);
}
._statCard_11hwj_231 {
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  overflow: hidden;
}
._statIcon_11hwj_261 {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  border-radius: 9px;
  font-size: 21px;
}
._purple_11hwj_279  { color: #7139ee; background: #f0e9ff; }
._blue_11hwj_281    { color: #3d7ef2; background: #eaf3ff; }
._orange_11hwj_283  { color: #f18a31; background: #fff0e5; }
._green_11hwj_285   { color: #20ad67; background: #e9faef; }
._violet_11hwj_287  { color: #7b42ed; background: #eee8ff; }

._statCard_11hwj_231 > div { min-width: 0; }
._statCard_11hwj_231 p {
  margin: 0 0 6px;
  color: #46516a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
._statCard_11hwj_231 strong {
  display: block;
  margin-bottom: 7px;
  font-size: 18px;
  line-height: 1;
}
._statCard_11hwj_231 small {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #27ad66;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
._statCard_11hwj_231 small span { color: #7a8499; font-weight: 500; }
._statCard_11hwj_231 ._down_11hwj_343 { color: #ee5c5c; }


._statCardpurple_11hwj_349 { background: #f3f0ff; }
._statCardblue_11hwj_351   { background: #eff6ff; }
._statCardgreen_11hwj_353  { background: #f0fdf4; }
._statCardviolet_11hwj_355 { background: #f5f3ff; }


._chartsGrid_11hwj_361 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
}
._card_11hwj_233 {
  position: relative;
  padding: 12px;
  min-width: 0;
}
._chartsGrid_11hwj_361 ._card_11hwj_233 {
  min-height: 280px;
}
._cardHeader_11hwj_387 {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
._cardHeader_11hwj_387 h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  color: #222c46;
}
._cardHeader_11hwj_387 button {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #e3e6ef;
  border-radius: 7px;
  background: #fff;
  color: #263049;
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
._info_11hwj_451 {
  width: 13px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b9c1d1;
  border-radius: 50%;
  color: #96a0b4;
  font-size: 8px;
}
._legend_11hwj_471 {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #69738b;
  font-size: 8px;
}
._legend_11hwj_471 span {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-left: 8px;
  border-radius: 2px;
}
._legend_11hwj_471 ._totalDot_11hwj_503     { background: #713bee; }
._legend_11hwj_471 ._productiveDot_11hwj_505 { background: #ad8df8; }
._legend_11hwj_471 ._worklogDot_11hwj_507   { background: #c9b7f7; }
._chart_11hwj_361 { height: 165px; }


._donutContent_11hwj_515 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
._donut_11hwj_515 {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  flex-shrink: 0;
}
._donut_11hwj_515 > div:last-child {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
._donut_11hwj_515 strong { font-size: 15px; }
._donut_11hwj_515 span   { color: #748096; font-size: 8px; }
._departmentLegend_11hwj_565 {
  width: 100%;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 100px;
  overflow-y: auto;
  padding-right: 4px;
}
._departmentLegend_11hwj_565 p {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #526078;
  font-size: 11px;
}
._departmentLegend_11hwj_565 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
._departmentLegend_11hwj_565 b    { color: #374158; font-size: 8px; }
._departmentLegend_11hwj_565 b span { color: #8490a4; font-weight: 500; }

/* ── Table card ── */
._tableCard_11hwj_621 {
  padding-bottom: 8px;
}
._tableCard_11hwj_621 > div:last-child { margin-top: 6px; }


._filterBar_11hwj_633 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 0 10px;
  flex-wrap: wrap;
}
._filterField_11hwj_647 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}
._filterLabel_11hwj_663 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
._filterInputWrap_11hwj_679 {
  position: relative;
  display: flex;
  align-items: center;
}
._filterSelect_11hwj_689 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
  font-family: inherit;
}
._filterSelect_11hwj_689:focus { border-color: #94a3b8; }
._filterClearX_11hwj_723 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}
._filterClearX_11hwj_723:hover { background: #cbd5e1; color: #1e293b; }
._filterClearX_11hwj_723 svg   { width: 8px; height: 8px; }
._filterActions_11hwj_761 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}
._filterBtn_11hwj_773 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 0.13s, box-shadow 0.13s;
  font-family: inherit;
}
._filterBtn_11hwj_773 svg { width: 10px; height: 10px; }
._filterBtnPrimary_11hwj_805 {
  background: #ffca40;
  color: #1e293b;
}
._filterBtnPrimary_11hwj_805:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}
._filterBtnClear_11hwj_821 {
  background: #fff;
  border: 1px solid #fecaca;
  color: #dc2626;
}
._filterBtnClear_11hwj_821:hover { background: #fef2f2; }

/* ── Table cells ── */
._employeeCell_11hwj_837 {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
._avatar_11hwj_849 {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #faad75, #8755e8);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}
._avatarSmall_11hwj_873 { width: 22px; height: 22px; font-size: 7px; }
._overtime_11hwj_875 { color: #f08428 !important; font-weight: 700; }
._status_11hwj_877 {
  display: inline-block;
  min-width: 52px;
  padding: 3px 7px;
  border-radius: 20px;
  text-align: center;
  font-weight: 700;
}
._pending_11hwj_893  { color: #dc9516; background: #fff4cd; }
._approved_11hwj_895 { color: #31a66a; background: #e5f8ec; }
._rejected_11hwj_897 { color: #e65c66; background: #ffe9eb; }
._active_11hwj_899   { background: #e8f7ec; color: #1f9d55; }

/* ── Team Utilization ── */
._teamUtilizationCard_11hwj_905 
._utilization_11hwj_907 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
._utilization_11hwj_907 > div {
  display: grid;
  grid-template-columns: 92px 1fr 30px;
  align-items: center;
  gap: 8px;
}
._utilization_11hwj_907 span  { display: flex; gap: 7px; color: #445067; font-size: 11px; }
._utilization_11hwj_907 > div > div {
  height: 5px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef0f5;
}
._utilization_11hwj_907 b     { display: block; height: 100%; border-radius: inherit; }
._utilization_11hwj_907 strong { font-size: 8px; text-align: right; }

/* ── Efficiency cell ── */
._efficiencyCell_11hwj_953 { display: flex; align-items: center; gap: 8px; }
._progressTrack_11hwj_955  { width: 70px; height: 4px; border-radius: 999px; background: #e8f2eb; }
._progressBar_11hwj_957    { height: 100%; border-radius: inherit; background: #31ad60; }


._donut_11hwj_515 :focus, ._chart_11hwj_361 :focus { outline: none !important; }

/* ── Responsive ── */
@media (max-width: 1350px) {
  ._statCard_11hwj_231  { padding: 9px; }
  ._statIcon_11hwj_261  { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  ._statCard_11hwj_231 strong { font-size: 15px; }
}

@media (max-width: 1100px) {
  ._topbar_11hwj_21 { align-items: flex-start; flex-direction: column; }
  ._chartsGrid_11hwj_361 { grid-template-columns: 1fr 1fr; }
  ._statsGrid_11hwj_221  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  ._chartsGrid_11hwj_361 { grid-template-columns: 1fr; }
  ._chartsGrid_11hwj_361 ._card_11hwj_233 { min-height: 245px; }
  ._chart_11hwj_361 { height: 185px; }
  ._statsGrid_11hwj_221 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ._filterField_11hwj_647 { flex: 1 1 140px; max-width: 200px; min-width: 90px; }
  ._filterActions_11hwj_761 { flex: 1 1 100%; justify-content: flex-end; margin-top: 4px; }
}

@media (max-width: 520px) {
  ._page_11hwj_1      { padding: 10px; }
  ._statsGrid_11hwj_221 { grid-template-columns: 1fr; }
  ._filterBar_11hwj_633 { flex-direction: column; align-items: stretch; }
  ._filterField_11hwj_647 { flex: 1 1 auto; max-width: 100%; min-width: 0; }
  ._filterActions_11hwj_761 { justify-content: stretch; gap: 6px; }
  ._filterActions_11hwj_761 ._filterBtn_11hwj_773 { flex: 1; justify-content: center; }
  ._dateRangeBar_11hwj_85 { gap: 6px; }
}

._tableSection_11hwj_1031 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableSectionHeader_11hwj_1049 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_11hwj_1071 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_11hwj_1085 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_11hwj_633 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_11hwj_647 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_11hwj_663 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_11hwj_679 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_11hwj_689,
._filterInput_11hwj_679 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_11hwj_689:focus,
._filterInput_11hwj_679:focus {
  border-color: #94a3b8;
}

._filterClearX_11hwj_723 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_11hwj_723:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterClearX_11hwj_723 svg {
  width: 8px;
  height: 8px;
}

._filterActions_11hwj_761 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ── Buttons ── */
._btn_11hwj_1285 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btn_11hwj_1285 svg {
  width: 10px;
  height: 10px;
}

._btn_11hwj_1285:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnPrimary_11hwj_1339 {
  background: #8b5cf6;
  color: white;
}

._btnPrimary_11hwj_1339:hover {
  background: #8b5cf6;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondaryFilter_11hwj_1359 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondaryFilter_11hwj_1359:hover {
  background: #f8fafc;
}

._filterClearBtn_11hwj_1379 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_11hwj_1379:hover {
  background: #fef2f2 !important;
}


._statsGrid_11hwj_221 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;   
}


._chartsGrid_11hwj_361 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 12px;
  margin-bottom: 18px;   
}


._tableSection_11hwj_1031 {
  margin-top: 6px;      
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_mucfn_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._wrap_mucfn_35 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

._pageTitle_mucfn_57 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}


._loadingState_mucfn_73 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_mucfn_95 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #ffca40;
  border-radius: 50%;
  animation: _spin_mucfn_95 0.7s linear infinite;
}

@keyframes _spin_mucfn_95 {
  to {
    transform: rotate(360deg);
  }
}


._breadcrumb_mucfn_127 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_mucfn_127 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_mucfn_127 strong {
  color: #1e293b;
}

._backBtn_mucfn_161 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._backBtn_mucfn_161:hover {
  background: #f8fafc;
}


._btn_mucfn_201 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_mucfn_235 {
  background: #ffca40;
  color: #1e293b;
}

._btnPrimary_mucfn_235:hover {
  background: #f5c036;
  box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnPrimary_mucfn_235:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_mucfn_265 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_mucfn_265:hover {
  background: #f8fafc;
}

._btnDanger_mucfn_285 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

._btnDanger_mucfn_285:hover {
  background: #fef2f2;
}

._tableSection_mucfn_305 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_mucfn_323 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_mucfn_345 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_mucfn_359 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_mucfn_373 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_mucfn_395 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_mucfn_413 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_mucfn_431 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_mucfn_443,
._filterInput_mucfn_431 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_mucfn_443:focus,
._filterInput_mucfn_431:focus {
  border-color: #94a3b8;
}

._filterClearX_mucfn_487 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_mucfn_487:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_mucfn_533 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}

._filterClearBtn_mucfn_547 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_mucfn_547:hover {
  background: #fef2f2 !important;
}


._header_mucfn_567 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

._headerLeft_mucfn_591 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._title_mucfn_603 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._headerActions_mucfn_617 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}


/* .formLayout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  .formLayout {
    grid-template-columns: 1fr;
  }
} */

._leftCol_mucfn_659 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._rightCol_mucfn_671 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form card ── */
._formCard_mucfn_685 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
}

._sectionHeading_mucfn_699 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Responsive field grids ── */
._formGrid3_mucfn_719 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
  position: relative;
  z-index: 10;
  /* ⬅️ added */
}

._formGrid2_mucfn_739 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}

._formGrid1_mucfn_753 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_mucfn_719 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {

  ._formGrid3_mucfn_719,
  ._formGrid2_mucfn_739 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_mucfn_797 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_mucfn_809 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_mucfn_821 {
  color: #ef4444;
}

._input_mucfn_829 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._input_mucfn_829:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._inputError_mucfn_869 {
  border-color: #f87171 !important;
}

._select_mucfn_877 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._select_mucfn_877:focus {
  border-color: #d1d1d1;
  box-shadow: 0 0 0 2px rgba(228, 229, 230, 0.15);
}

._selectError_mucfn_923 {
  border-color: #f87171 !important;
}

._textarea_mucfn_931 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}

._textarea_mucfn_931:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._errorText_mucfn_967 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

._componentHeader_mucfn_979 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

._componentRow_mucfn_1001 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

@media (max-width: 680px) {
  ._componentHeader_mucfn_979 {
    grid-template-columns: 1fr 1fr 36px;
  }

  ._componentRow_mucfn_1001 {
    grid-template-columns: 1fr 1fr 36px;
  }

  ._componentRow_mucfn_1001>div:first-child {
    grid-column: 1 / -1;
  }
}

._removeBtn_mucfn_1045 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}

._removeBtn_mucfn_1045:hover {
  background: #fef2f2;
}

._removeBtn_mucfn_1045:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Hint / helper text ── */
._hintText_mucfn_1095 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Alert ── */
._alertDanger_mucfn_1109 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #dc2626;
  margin-top: 10px;
}


._pageTitleRow_mucfn_1131 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

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

._appraisalIcon_mucfn_1159 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 3-col info grid */
._mainGrid_mucfn_1189 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  ._mainGrid_mucfn_1189 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  ._mainGrid_mucfn_1189 {
    grid-template-columns: 1fr;
  }
}

/* 2-col info grid */
._twoGrid_mucfn_1227 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  ._twoGrid_mucfn_1227 {
    grid-template-columns: 1fr;
  }
}

/* Generic card */
._card_mucfn_1253 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

._cardTitle_mucfn_1267 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Detail key-value rows */
._detailRow_mucfn_1287 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

._detailLabel_mucfn_1303 {
  font-size: 11px;
  color: #6b7280;
  min-width: 110px;
  flex-shrink: 0;
}

._detailVal_mucfn_1317 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Member / employee pills */
._memberGrid_mucfn_1333 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 240px;
  overflow-y: auto;
}

._memberCard_mucfn_1349 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

._memberAvatar_mucfn_1369 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

._memberInfo_mucfn_1397 {
  flex: 1;
  min-width: 0;
}

._memberName_mucfn_1407 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._memberSub_mucfn_1425 {
  font-size: 10px;
  color: #6b7280;
}

._emptyMsg_mucfn_1435 {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Components table in view */
._componentTable_mucfn_1449 {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

._componentTable_mucfn_1449 th {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

._componentTable_mucfn_1449 td {
  font-size: 11px;
  color: #374151;
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
}

._componentTable_mucfn_1449 tr:last-child td {
  border-bottom: none;
}

._componentTable_mucfn_1449 tr:hover td {
  background: #fafbfc;
}

/* Tags / multi-value chips */
._tagList_mucfn_1517 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

._tag_mucfn_1517 {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

._tagGreen_mucfn_1555 {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}

._tagYellow_mucfn_1567 {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

._tagGrey_mucfn_1579 {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

._bulkBtnGroup_mucfn_1591 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  ._miniGrid_mucfn_1607 {
    grid-template-columns: 1fr 1fr;
  }

  ._bulkSelectedBar_mucfn_1615 {
    gap: 5px;
  }

  ._bulkBtnGroup_mucfn_1591 {
    flex-wrap: wrap;
  }
}

._bulkActionBtnDanger_mucfn_1633 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_mucfn_1633:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._bulkSelectedLeft_mucfn_1653 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

._bulkSelectedBar_mucfn_1615 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_mucfn_1 0.15s ease;
}

._bulkCountBadge_mucfn_1691 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_mucfn_1721 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_mucfn_1591 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_mucfn_1633 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_mucfn_1633:hover {
  background: #f8fafc;
}

._bulkActionBtn_mucfn_1633 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_mucfn_1633:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_mucfn_1633 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_mucfn_1633:hover {
  background: #fef2f2;
  border-color: #f87171;
}

._reactSelect_mucfn_1861 {
  width: 100%;
}

._reactSelect_mucfn_1861 .rs__control {
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

._reactSelect_mucfn_1861 .rs__control:hover {
  border-color: #f59e0b;
}

._reactSelect_mucfn_1861 .rs__control--is-focused {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

._reactSelect_mucfn_1861 .rs__value-container {
  padding: 0 10px;
}

._reactSelect_mucfn_1861 .rs__input-container {
  margin: 0;
  padding: 0;
}

._reactSelect_mucfn_1861 .rs__placeholder {
  color: #9ca3af;
  font-size: 12px;
}

._reactSelect_mucfn_1861 .rs__single-value {
  font-size: 12px;
  color: #111827;
}

._reactSelect_mucfn_1861 .rs__menu {
  z-index: 9999;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}

._reactSelect_mucfn_1861 .rs__option {
  padding: 8px 10px;
  cursor: pointer;
}

._reactSelect_mucfn_1861 .rs__option--is-focused {
  background: #fef3c7;
}

._reactSelect_mucfn_1861 .rs__option--is-selected {
  background: #f59e0b;
  color: #111827;
}

._reactSelect_mucfn_1861 .rs__indicator-separator {
  display: none;
}

._reactSelect_mucfn_1861 .rs__dropdown-indicator {
  padding: 6px;
  color: #9ca3af;
}

._reactSelect_mucfn_1861 .rs__dropdown-indicator:hover {
  color: #f59e0b;
}

/* ── Add these to your existing Appraisal.module.css ── */

/* Toggle switches row */
._toggleGrid_mucfn_2015 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}

._toggleSwitch_mucfn_2035 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  user-select: none;
}

._toggleSwitch_mucfn_2035 input[type="checkbox"] {
  display: none;
}

._toggleSlider_mucfn_2065 {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 99px;
  transition: background 0.2s;
  flex-shrink: 0;
}

._toggleSlider_mucfn_2065::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

._toggleSwitch_mucfn_2035 input[type="checkbox"]:checked+._toggleSlider_mucfn_2065 {
  background: #ffca40;
}

._toggleSwitch_mucfn_2035 input[type="checkbox"]:checked+._toggleSlider_mucfn_2065::after {
  transform: translateX(16px);
}

._toggleLabel_mucfn_2129 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

/* Approver levels table */
._approverHeader_mucfn_2143 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._approverRow_mucfn_2169 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  ._approverHeader_mucfn_2143 {
    grid-template-columns: 1fr 36px;
  }

  ._approverRow_mucfn_2169 {
    grid-template-columns: 1fr 36px;
  }

  ._approverRow_mucfn_2169>div:first-child {
    grid-column: 1 / -1;
  }
}

/* apprasial view  */

._toggleGrid_mucfn_2015 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}

._toggleSwitch_mucfn_2035 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  user-select: none;
}

._toggleSwitch_mucfn_2035 input[type="checkbox"] {
  display: none;
}

._toggleSlider_mucfn_2065 {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 99px;
  transition: background 0.2s;
  flex-shrink: 0;
}

._toggleSlider_mucfn_2065::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

._toggleSwitch_mucfn_2035 input[type="checkbox"]:checked+._toggleSlider_mucfn_2065 {
  background: var(--color-primary-light);
}

._toggleSwitch_mucfn_2035 input[type="checkbox"]:checked+._toggleSlider_mucfn_2065::after {
  transform: translateX(16px);
}

._toggleLabel_mucfn_2129 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}


._approverHeader_mucfn_2143 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._approverRow_mucfn_2169 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  ._approverHeader_mucfn_2143 {
    grid-template-columns: 1fr 36px;
  }

  ._approverRow_mucfn_2169 {
    grid-template-columns: 1fr 36px;
  }

  ._approverRow_mucfn_2169>div:first-child {
    grid-column: 1 / -1;
  }
}


._cycleNameCell_mucfn_2417 {
  display: flex;
  align-items: center;
  gap: 9px;
}

._cycleIcon_mucfn_2429 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._cycleName_mucfn_2417 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

._cycleId_mucfn_2465 {
  font-size: 10px;
  color: #94a3b8;
}

._yearBadge_mucfn_2475 {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._freqChip_mucfn_2497 {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 600;
}

._periodDates_mucfn_2517 {
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
}

._assignedCell_mucfn_2529 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
}

._ratingScaleText_mucfn_2547 {
  font-size: 11px;
  color: #6b7280;
}

._expandedWrapper_mucfn_2557 {
  padding: 14px 20px 16px;
  background: #fafbfd;
  border-top: 1px solid #f1f5f9;
  animation: _slideDown_mucfn_1 0.15s ease;
}

@keyframes _slideDown_mucfn_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._expandedTitle_mucfn_2595 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 14px;
}

._expandedEmpty_mucfn_2615 {
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 0;
}


._timelineContainer_mucfn_2629 {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._timelineLine_mucfn_2645 {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e2e8f0;
  border-radius: 99px;
}

._timelineRow_mucfn_2665 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._timelineDot_mucfn_2679 {
  position: absolute;
  left: -22px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  background: #fff;
  flex-shrink: 0;
}

._dotFirst_mucfn_2703 {
  background: #ffca40 !important;
  border-color: #ffca40 !important;
  box-shadow: 0 0 0 3px rgba(255, 202, 64, 0.25);
}

._dotInactive_mucfn_2715 {
  background: #fff;
  border-color: #cbd5e1;
}


._approverCard_mucfn_2727 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 16px;
  flex: 1;
  min-width: 0;
}

._approverCardLevel_mucfn_2753 {
  flex-shrink: 0;
}

._approverCardLabel_mucfn_2761 {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}


._levelBadge_mucfn_2781 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

._roleChip_mucfn_2803 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

._approverNameCell_mucfn_2821 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._approverAvatar_mucfn_2833 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._approverName_mucfn_2821 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

._statusPill_mucfn_2869 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
}

._chipTrue_mucfn_2889 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

._chipFalse_mucfn_2915 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

._naText_mucfn_2941 {
  font-size: 11px;
  color: #94a3b8;
}

/* ── Inline Employee Table ── */
._empTableWrap_mucfn_2953 {
  margin-top: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  position: relative;
  z-index: 0;
  /* ⬅️ added */
}

._empTable_mucfn_2953 thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: #475569;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e2e8f0;
  z-index: 1;
  /* keep this lower than the select menu's 60/9999 */
}


._empToolbar_mucfn_3009 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  flex-wrap: wrap;
}

._empSearchWrap_mucfn_3031 {
  position: relative;
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
}

._empSearchIcon_mucfn_3047 {
  position: absolute;
  left: 10px;
  color: #94a3b8;
}

._empSearchInput_mucfn_3059 {
  width: 100%;
  padding: 8px 30px 8px 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
}

._empSearchInput_mucfn_3059:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

._empSearchClear_mucfn_3089 {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 2px;
}

._empSelectionInfo_mucfn_3111 {
  flex-shrink: 0;
}

._empSelectionBadge_mucfn_3119 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

._empSelectionEmpty_mucfn_3145 {
  font-size: 11.5px;
  color: #94a3b8;
}

._empErrorBanner_mucfn_3155 {
  padding: 10px 14px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12.5px;
  border-bottom: 1px solid #fecaca;
}

._empTableScroll_mucfn_3171 {
  max-height: 360px;
  overflow-y: auto;
}

._empTable_mucfn_2953 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

._empThCheck_mucfn_3193 {
  width: 36px;
}

._empTable_mucfn_2953 tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

._empRow_mucfn_3215 {
  cursor: pointer;
  transition: background 0.12s;
}

._empRow_mucfn_3215:hover {
  background: #f8fafc;
}

._empRowSelected_mucfn_3233 {
  background: var(--color-primary-lightest);
}

._empAvatar_mucfn_3241 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

._empAvatar_mucfn_3241 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._empThumb_mucfn_3281 {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}

._empEmptyCell_mucfn_3295 {
  text-align: center;
  padding: 30px 0;
  color: #94a3b8;
}

._empSkeletonRow_mucfn_3307 td {
  padding: 10px 12px;
}

._empSkeletonCell_mucfn_3315,
._empSkeletonAvatar_mucfn_3317,
._empSkeletonLine_mucfn_3319 {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: _empShimmer_mucfn_1 1.4s ease infinite;
  border-radius: 4px;
}

._empSkeletonAvatar_mucfn_3317 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

._empSkeletonLine_mucfn_3319 {
  height: 10px;
  border-radius: 4px;
}

@keyframes _empShimmer_mucfn_1 {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

._empPagination_mucfn_3375 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  flex-wrap: wrap;
  gap: 8px;
}

._empPaginationInfo_mucfn_3397 {
  font-size: 11.5px;
  color: #64748b;
}

._empPaginationControls_mucfn_3407 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._empPageBtn_mucfn_3419 {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}

._empPageBtn_mucfn_3419:hover:not(:disabled) {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

._empPageBtn_mucfn_3419:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._empPageBtnActive_mucfn_3463 {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

._empEllipsis_mucfn_3475 {
  padding: 0 4px;
  color: #94a3b8;
  font-size: 12px;
}/* * {
  outline: 1px solid red;
} */
/* ── Page ── */
._page_1usu2_9 {
  display: flex;
  flex-direction: column;
  background: #f4f7fb;
  min-height: 100vh;
  gap: 0;
}

/* ── Page Header ── */
._pageHeader_1usu2_27 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 14px 18px;

  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;

  gap: 16px;
}

._headerLeft_1usu2_55 {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}

._headerTitle_1usu2_71 {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 0;

  color: #111827;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;

  white-space: nowrap;
}

._headerTitle_1usu2_71 svg {
  color: #111827;
  flex-shrink: 0;
}

._headerSub_1usu2_113 {
  margin: 0;

  color: #64748b;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* Right side */

._headerRight_1usu2_137 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  margin-left: auto;
  flex-shrink: 0;
}

/* Cycle + Frequency */

._cycleDetails_1usu2_161 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  flex-wrap: wrap;
}

._cycleBadge_1usu2_179,
._frequencyBadge_1usu2_181 {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 12px;

  border-radius: 20px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

._cycleBadge_1usu2_179 {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

._cycleBadge_1usu2_179 svg {
  color: #2563eb;
  flex-shrink: 0;
}

._frequencyBadge_1usu2_181 {
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

._frequencyBadge_1usu2_181 svg {
  color: #f97316;
  flex-shrink: 0;
}

._cycleBadge_1usu2_179 strong,
._frequencyBadge_1usu2_181 strong {
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

/* Employee count */

/* .totalBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 12px;

  color: #ffffff;
  background: var(--gradient-primary);

  border-radius: 20px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
} */

/* Tablet */

@media (max-width: 900px) {
  ._pageHeader_1usu2_27 {
    align-items: flex-start;
  }

  ._headerRight_1usu2_137 {
    flex-wrap: wrap;
  }
}

/* Mobile */

@media (max-width: 768px) {
  ._pageHeader_1usu2_27 {
    flex-direction: column;
    align-items: flex-start;

    padding: 12px 14px;
  }

  ._headerRight_1usu2_137 {
    width: 100%;

    margin-left: 0;

    justify-content: flex-start;
    flex-wrap: wrap;
  }

  ._cycleDetails_1usu2_161 {
    justify-content: flex-start;
  }
}

/* Small Mobile */

@media (max-width: 480px) {
  ._headerRight_1usu2_137,
  ._cycleDetails_1usu2_161 {
    align-items: flex-start;
    flex-direction: column;
  }
}

._totalBadge_1usu2_275 {
  padding: 4px 12px;
  background: var(--gradient-primary);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

._exportBtn_1usu2_423 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

._exportBtn_1usu2_423:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ── Search ── */
._searchBar_1usu2_465 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

._searchIcon_1usu2_483 {
  color: #94a3b8;
  flex-shrink: 0;
}

._searchInput_1usu2_493 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #374151;
  outline: none;
}

._searchInput_1usu2_493::placeholder {
  color: #b0bec8;
}

._searchClear_1usu2_519 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._searchClear_1usu2_519:hover {
  background: #cbd5e1;
}

/* ── Table Wrap ── */
._tableWrap_1usu2_559 {
  overflow-x: auto;
  background: #fff;
  flex: 1;
}

/* ── Employee Cell ── */
._empCell_1usu2_573 {
  display: flex;
  align-items: center;
  gap: 9px;
}

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

._empAvatarImage_1usu2_611 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._empInfo_1usu2_627 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._empName_1usu2_639 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

._empCode_1usu2_653 {
  font-size: 9px;
  color: #94a3b8;
}

._reviewPeriod_1usu2_663 {
  font-size: 11px;
  color: #374151;
}

/* ── Status Badge ── */
._statusBadge_1usu2_675 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._ratingBadge_1usu2_697 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #fef3c7;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
}

._scoreValue_1usu2_721 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

._incrementBadge_1usu2_733 {
  padding: 3px 10px;
  border-radius: 6px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}

/* ── Loading & Empty ── */
._loadingState_1usu2_753,
._emptyState_1usu2_755 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 12px;
}

._spinner_1usu2_777 {
  width: 22px;
  height: 22px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: _spin_1usu2_777 0.65s linear infinite;
}

@keyframes _spin_1usu2_777 {
  to {
    transform: rotate(360deg);
  }
}

/* ── Stats Accordion ── */
._statsAccordion_1usu2_809 {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 10px;
  padding: 6px 18px 12px;
}

._accordionHeader_1usu2_825 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
}

._accordionHeader_1usu2_825:hover {
  background-color: #f9fafb;
}

._accordionTitle_1usu2_855 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  font-weight: 600;
}

._accordionToggle_1usu2_873 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_1usu2_873:hover {
  color: #374151;
}

._statsGrid_1usu2_905 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
}

._summaryCard_1usu2_919 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  min-height: 58px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transition: 0.2s ease;
}

._summaryTop_1usu2_943 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._summaryIcon_1usu2_955 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryTitle_1usu2_975 {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-top: 2px;
  white-space: nowrap;
}

._summaryRight_1usu2_991 {
  display: flex;
  align-items: center;
}

._summaryValue_1usu2_1001 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* ── Expanded Row ── */
._expandedWrapper_1usu2_1015 {
  padding: 12px 0;
}

._expandedHeader_1usu2_1023 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

._expandedTitle_1usu2_1039 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._expandedCount_1usu2_1061 {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

._approverCardsContainer_1usu2_1073 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

._approverCard_1usu2_1073 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow 0.15s ease;
}

._approverCard_1usu2_1073:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

._approverCardHeader_1usu2_1109 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

._levelBadge_1usu2_1125 {
  padding: 2px 10px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
}

._levelNumber_1usu2_1143 {
  font-size: 10px;
  font-weight: 600;
}

._roleBadge_1usu2_1153 {
  padding: 2px 10px;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

._statusBadgeSmall_1usu2_1171 {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ─────────────────────────────────────────────
   Expanded Row
───────────────────────────────────────────── */

._expandedWrapper_1usu2_1015 {
  width: 100%;
  padding: 14px 6px;
  background: #ffffff;
}

/* Approver Actions heading */

._expandedHeader_1usu2_1023 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 14px;
  padding: 0 4px;
}

._expandedTitle_1usu2_1039 {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #64748b;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

._expandedTitle_1usu2_1039 svg {
  flex-shrink: 0;
}

._expandedCount_1usu2_1061 {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Approver Cards Container
───────────────────────────────────────────── */

._approverCardsContainer_1usu2_1073 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Individual card */

._approverCard_1usu2_1073 {
  min-width: 0;
  padding: 14px 16px;

  background: #f8fafc;
  border: 1px solid #dbe3ed;
  border-radius: 11px;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

._approverCard_1usu2_1073:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
}

/* ─────────────────────────────────────────────
   Card Header
───────────────────────────────────────────── */

._approverCardHeader_1usu2_1109 {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  margin-bottom: 14px;

  flex-wrap: wrap;
}

/* Level badge */

._levelBadge_1usu2_1125 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 11px;

  color: #475569;
  background: #e2e8f0;
  border-radius: 4px;

  white-space: nowrap;
}

._levelNumber_1usu2_1143 {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

/* Role badge */

._roleBadge_1usu2_1153 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 11px;

  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 4px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;

  white-space: nowrap;
}

/* Rating badge beside role badge */

._approverCardHeader_1usu2_1109 ._ratingBadge_1usu2_697 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  margin: 0;
  padding: 3px 8px;

  color: #b45309;
  background: #fef3c7;
  border-radius: 6px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
  flex-shrink: 0;
}

._approverCardHeader_1usu2_1109 ._ratingBadge_1usu2_697 svg {
  flex-shrink: 0;
}

/* Status badge on right */

._statusBadgeSmall_1usu2_1171 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  margin-left: auto;
  padding: 3px 11px;

  border-radius: 20px;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   Card Body
───────────────────────────────────────────── */

._approverCardBody_1usu2_1563 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
}

._cardItem_1usu2_1575 {
  display: flex;
  flex-direction: column;
  gap: 5px;

  min-width: 0;
}

._cardItemFull_1usu2_1591 {
  grid-column: auto;
}

._cardLabel_1usu2_1599 {
  margin: 0;

  color: #94a3b8;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

._cardValue_1usu2_1623 {
  min-width: 0;

  color: #1e293b;
  font-size: 12px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────
   Approver Information
───────────────────────────────────────────── */

._approverInfo_1usu2_1647 {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

._approverAvatar_1usu2_1663 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  color: #475569;
  background: #e2e8f0;
  border-radius: 50%;

  font-size: 9px;
  font-weight: 700;

  flex-shrink: 0;
}

._approverAvatarImage_1usu2_1699 {
  width: 30px;
  height: 30px;

  border-radius: 50%;
  object-fit: cover;

  flex-shrink: 0;
}

._approverName_1usu2_1719 {
  min-width: 0;

  color: #111827;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._notAssigned_1usu2_1747 {
  color: #94a3b8;
  font-size: 11px;
  font-style: italic;
}

/* ─────────────────────────────────────────────
   Action Time
───────────────────────────────────────────── */

._actionTime_1usu2_1767 {
  display: block;

  color: #64748b;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;

  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Remarks and Comments
───────────────────────────────────────────── */

._remarksText_1usu2_1799,
._commentsText_1usu2_1801 {
  display: block;

  max-width: 100%;

  color: #374151;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;

  overflow-wrap: anywhere;
  word-break: break-word;
}

._commentsText_1usu2_1801 {
  color: #475569;
}

/* ─────────────────────────────────────────────
   Empty State
───────────────────────────────────────────── */

._emptyState_1usu2_755 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 100px;
  padding: 24px;

  color: #94a3b8;
  text-align: center;
}

._emptyState_1usu2_755 p {
  margin: 0;
  font-size: 12px;
}

/* ─────────────────────────────────────────────
   Responsive
───────────────────────────────────────────── */

@media (max-width: 1200px) {
  ._approverCardsContainer_1usu2_1073 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  ._approverCardsContainer_1usu2_1073 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  ._expandedWrapper_1usu2_1015 {
    padding: 12px 4px;
  }

  ._approverCard_1usu2_1073 {
    padding: 13px;
  }

  ._approverCardBody_1usu2_1563 {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  ._cardItemFull_1usu2_1591 {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  ._expandedHeader_1usu2_1023 {
    align-items: flex-start;
    gap: 8px;
  }

  ._approverCardHeader_1usu2_1109 {
    gap: 6px;
  }

  ._statusBadgeSmall_1usu2_1171 {
    margin-left: 0;
  }

  ._approverName_1usu2_1719 {
    white-space: normal;
  }
}

._backBtn_1usu2_1993 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  color: #374151;
}

._backBtn_1usu2_1993:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_1ogu2_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._wrap_1ogu2_35 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

._pageTitle_1ogu2_57 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

._loadingState_1ogu2_71 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: 13px;
}

._spinner_1ogu2_93 {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #ffca40;
  border-radius: 50%;
  animation: _spin_1ogu2_93 0.7s linear infinite;
}

@keyframes _spin_1ogu2_93 {
  to {
    transform: rotate(360deg);
  }
}

._breadcrumb_1ogu2_123 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
._breadcrumb_1ogu2_123 span:last-child {
  color: #1e293b;
  font-weight: 500;
}
._breadcrumb_1ogu2_123 strong {
  color: #1e293b;
}

._backBtn_1ogu2_153 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
._backBtn_1ogu2_153:hover {
  background: #f8fafc;
}

._btn_1ogu2_189 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_1ogu2_223 {
  background: var(--gradient-primary);
  color: #fff;
}
._btnPrimary_1ogu2_223:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-sm);
}
._btnPrimary_1ogu2_223:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_1ogu2_249 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
._btnSecondary_1ogu2_249:hover {
  background: #f8fafc;
}

._btnDanger_1ogu2_267 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
._btnDanger_1ogu2_267:hover {
  background: #fef2f2;
}

._tableSection_1ogu2_285 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1ogu2_303 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1ogu2_325 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}
._sectionSub_1ogu2_337 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ── Filter bar ── */
._filterBar_1ogu2_351 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_1ogu2_373 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_1ogu2_391 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_1ogu2_409 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_1ogu2_421,
._filterInput_1ogu2_409 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}
._filterSelect_1ogu2_421:focus,
._filterInput_1ogu2_409:focus {
  border-color: #94a3b8;
}

._filterClearX_1ogu2_463 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}
._filterClearX_1ogu2_463:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterActions_1ogu2_507 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}
._filterClearBtn_1ogu2_519 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
._filterClearBtn_1ogu2_519:hover {
  background: #fef2f2 !important;
}

._header_1ogu2_535 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
}

._headerLeft_1ogu2_559 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
._title_1ogu2_569 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
._headerActions_1ogu2_581 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* .formLayout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  .formLayout {
    grid-template-columns: 1fr;
  }
} */

._leftCol_1ogu2_621 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._rightCol_1ogu2_631 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Form card ── */
._formCard_1ogu2_645 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
}

._sectionHeading_1ogu2_659 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* ── Responsive field grids ── */
._formGrid3_1ogu2_679 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}
._formGrid2_1ogu2_691 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}
._formGrid1_1ogu2_703 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_1ogu2_679 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  ._formGrid3_1ogu2_679,
  ._formGrid2_1ogu2_691 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_1ogu2_743 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_1ogu2_755 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}
._required_1ogu2_765 {
  color: #ef4444;
}

._input_1ogu2_773 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}
._input_1ogu2_773:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}
._inputError_1ogu2_809 {
  border-color: #f87171 !important;
}

._select_1ogu2_817 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}
._select_1ogu2_817:focus {
  border-color: #d1d1d1;
  box-shadow: 0 0 0 2px rgba(228, 229, 230, 0.15);
}
._selectError_1ogu2_859 {
  border-color: #f87171 !important;
}

._textarea_1ogu2_867 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}
._textarea_1ogu2_867:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._errorText_1ogu2_901 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

._componentHeader_1ogu2_913 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

._componentRow_1ogu2_935 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

@media (max-width: 680px) {
  ._componentHeader_1ogu2_913 {
    grid-template-columns: 1fr 1fr 36px;
  }
  ._componentRow_1ogu2_935 {
    grid-template-columns: 1fr 1fr 36px;
  }
  ._componentRow_1ogu2_935 > div:first-child {
    grid-column: 1 / -1;
  }
}

._removeBtn_1ogu2_975 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.12s;
}
._removeBtn_1ogu2_975:hover {
  background: #fef2f2;
}
._removeBtn_1ogu2_975:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Hint / helper text ── */
._hintText_1ogu2_1021 {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Alert ── */
._alertDanger_1ogu2_1035 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #dc2626;
  margin-top: 10px;
}

._pageTitleRow_1ogu2_1055 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
._pageTitleLeft_1ogu2_1069 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._appraisalIcon_1ogu2_1081 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 3-col info grid */
._mainGrid_1ogu2_1111 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  ._mainGrid_1ogu2_1111 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  ._mainGrid_1ogu2_1111 {
    grid-template-columns: 1fr;
  }
}

/* 2-col info grid */
._twoGrid_1ogu2_1145 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px) {
  ._twoGrid_1ogu2_1145 {
    grid-template-columns: 1fr;
  }
}

/* Generic card */
._card_1ogu2_1169 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

._cardTitle_1ogu2_1183 {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* Detail key-value rows */
._detailRow_1ogu2_1203 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}
._detailLabel_1ogu2_1217 {
  font-size: 11px;
  color: #6b7280;
  min-width: 110px;
  flex-shrink: 0;
}
._detailVal_1ogu2_1229 {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
}

/* Member / employee pills */
._memberGrid_1ogu2_1245 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 240px;
  overflow-y: auto;
}

._memberCard_1ogu2_1261 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

._memberAvatar_1ogu2_1281 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

._memberInfo_1ogu2_1309 {
  flex: 1;
  min-width: 0;
}
._memberName_1ogu2_1317 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._memberSub_1ogu2_1333 {
  font-size: 10px;
  color: #6b7280;
}
._emptyMsg_1ogu2_1341 {
  font-size: 12px;
  color: #94a3b8;
  padding: 8px 0;
}

/* Components table in view */
._componentTable_1ogu2_1355 {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
._componentTable_1ogu2_1355 th {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
._componentTable_1ogu2_1355 td {
  font-size: 11px;
  color: #374151;
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
}
._componentTable_1ogu2_1355 tr:last-child td {
  border-bottom: none;
}
._componentTable_1ogu2_1355 tr:hover td {
  background: #fafbfc;
}

/* Tags / multi-value chips */
._tagList_1ogu2_1415 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
._tag_1ogu2_1415 {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
._tagGreen_1ogu2_1449 {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
._tagYellow_1ogu2_1459 {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
._tagGrey_1ogu2_1469 {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
._bulkBtnGroup_1ogu2_1479 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  ._miniGrid_1ogu2_1493 {
    grid-template-columns: 1fr 1fr;
  }
  ._bulkSelectedBar_1ogu2_1499 {
    gap: 5px;
  }
  ._bulkBtnGroup_1ogu2_1479 {
    flex-wrap: wrap;
  }
}
._bulkActionBtnDanger_1ogu2_1513 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1ogu2_1513:hover {
  background: #fef2f2;
  border-color: #f87171;
}
._bulkSelectedLeft_1ogu2_1531 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
._bulkSelectedBar_1ogu2_1499 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  flex-shrink: 0;
  flex-wrap: wrap;
  animation: _slideIn_1ogu2_1 0.15s ease;
}
._bulkCountBadge_1ogu2_1565 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #ffca40;
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

._bulkSelectedText_1ogu2_1595 {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

._bulkBtnGroup_1ogu2_1479 {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

._bulkActionBtn_1ogu2_1513 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1ogu2_1513:hover {
  background: #f8fafc;
}
._bulkActionBtn_1ogu2_1513 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s;
}

._bulkActionBtn_1ogu2_1513:hover {
  background: #f8fafc;
}

._bulkActionBtnDanger_1ogu2_1513 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1ogu2_1513:hover {
  background: #fef2f2;
  border-color: #f87171;
}
._reactSelect_1ogu2_1731 {
  width: 100%;
}

._reactSelect_1ogu2_1731 .rs__control {
  min-height: 38px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

._reactSelect_1ogu2_1731 .rs__control:hover {
  border-color: #f59e0b;
}

._reactSelect_1ogu2_1731 .rs__control--is-focused {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

._reactSelect_1ogu2_1731 .rs__value-container {
  padding: 0 10px;
}

._reactSelect_1ogu2_1731 .rs__input-container {
  margin: 0;
  padding: 0;
}

._reactSelect_1ogu2_1731 .rs__placeholder {
  color: #9ca3af;
  font-size: 12px;
}

._reactSelect_1ogu2_1731 .rs__single-value {
  font-size: 12px;
  color: #111827;
}

._reactSelect_1ogu2_1731 .rs__menu {
  z-index: 9999;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}

._reactSelect_1ogu2_1731 .rs__option {
  padding: 8px 10px;
  cursor: pointer;
}

._reactSelect_1ogu2_1731 .rs__option--is-focused {
  background: #fef3c7;
}

._reactSelect_1ogu2_1731 .rs__option--is-selected {
  background: #f59e0b;
  color: #111827;
}

._reactSelect_1ogu2_1731 .rs__indicator-separator {
  display: none;
}

._reactSelect_1ogu2_1731 .rs__dropdown-indicator {
  padding: 6px;
  color: #9ca3af;
}

._reactSelect_1ogu2_1731 .rs__dropdown-indicator:hover {
  color: #f59e0b;
}

/* ── Add these to your existing Appraisal.module.css ── */

/* Toggle switches row */
._toggleGrid_1ogu2_1885 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}

._toggleSwitch_1ogu2_1905 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  user-select: none;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"] {
  display: none;
}

._toggleSlider_1ogu2_1935 {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 99px;
  transition: background 0.2s;
  flex-shrink: 0;
}

._toggleSlider_1ogu2_1935::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"]:checked + ._toggleSlider_1ogu2_1935 {
  background: #ffca40;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"]:checked + ._toggleSlider_1ogu2_1935::after {
  transform: translateX(16px);
}

._toggleLabel_1ogu2_1999 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

/* Approver levels table */
._approverHeader_1ogu2_2013 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._approverRow_1ogu2_2039 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  ._approverHeader_1ogu2_2013 {
    grid-template-columns: 1fr 36px;
  }
  ._approverRow_1ogu2_2039 {
    grid-template-columns: 1fr 36px;
  }
  ._approverRow_1ogu2_2039 > div:first-child {
    grid-column: 1 / -1;
  }
}

/* Toggle switches row */
._toggleGrid_1ogu2_1885 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  align-items: center;
}

._toggleSwitch_1ogu2_1905 {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  user-select: none;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"] {
  display: none;
}

._toggleSlider_1ogu2_1935 {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: #e2e8f0;
  border-radius: 99px;
  transition: background 0.2s;
  flex-shrink: 0;
}

._toggleSlider_1ogu2_1935::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"]:checked + ._toggleSlider_1ogu2_1935 {
  background: #ffca40;
}

._toggleSwitch_1ogu2_1905 input[type="checkbox"]:checked + ._toggleSlider_1ogu2_1935::after {
  transform: translateX(16px);
}

._toggleLabel_1ogu2_1999 {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

/* Approver levels table */
._approverHeader_1ogu2_2013 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._approverRow_1ogu2_2039 {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  ._approverHeader_1ogu2_2013 {
    grid-template-columns: 1fr 36px;
  }
  ._approverRow_1ogu2_2039 {
    grid-template-columns: 1fr 36px;
  }
  ._approverRow_1ogu2_2039 > div:first-child {
    grid-column: 1 / -1;
  }
}

._cycleNameCell_1ogu2_2275 {
  display: flex;
  align-items: center;
  gap: 9px;
}
._cycleIcon_1ogu2_2285 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
._cycleName_1ogu2_2275 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}
._cycleId_1ogu2_2317 {
  font-size: 10px;
  color: #94a3b8;
}
._yearBadge_1ogu2_2325 {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
._freqChip_1ogu2_2345 {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10px;
  font-weight: 600;
}
._periodDates_1ogu2_2363 {
  font-size: 11px;
  color: #374151;
  white-space: nowrap;
}
._assignedCell_1ogu2_2373 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
}
._ratingScaleText_1ogu2_2389 {
  font-size: 11px;
  color: #6b7280;
}

/* ── Expanded approver levels panel (mirrors Worklogs timeline) ── */
._expandedWrapper_1ogu2_2401 {
  padding: 14px 20px 16px;
  background: #fafbfd;
  border-top: 1px solid #f1f5f9;
  animation: _slideDown_1ogu2_1 0.15s ease;
}
@keyframes _slideDown_1ogu2_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
._expandedTitle_1ogu2_2433 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin: 0 0 14px;
}
._expandedEmpty_1ogu2_2451 {
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 0;
}

._timelineContainer_1ogu2_2463 {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._timelineLine_1ogu2_2477 {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e2e8f0;
  border-radius: 99px;
}
._timelineRow_1ogu2_2495 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
._timelineDot_1ogu2_2507 {
  position: absolute;
  left: -22px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  background: #fff;
  flex-shrink: 0;
}
._dotFirst_1ogu2_2529 {
  background: #ffca40 !important;
  border-color: #ffca40 !important;
  box-shadow: 0 0 0 3px rgba(255, 202, 64, 0.25);
}
._dotInactive_1ogu2_2539 {
  background: #fff;
  border-color: #cbd5e1;
}

._approverCard_1ogu2_2549 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 16px;
  flex: 1;
  min-width: 0;
}
._approverCardLevel_1ogu2_2573 {
  flex-shrink: 0;
}
._approverCardLabel_1ogu2_2579 {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}

/* Shared atoms */
._levelBadge_1ogu2_2599 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
._roleChip_1ogu2_2619 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
._approverNameCell_1ogu2_2635 {
  display: flex;
  align-items: center;
  gap: 7px;
}
._approverAvatar_1ogu2_2645 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
._approverName_1ogu2_2635 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}
._statusPill_1ogu2_2677 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
}
._chipTrue_1ogu2_2695 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
._chipFalse_1ogu2_2719 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
._naText_1ogu2_2743 {
  font-size: 11px;
  color: #94a3b8;
}

._page_1ogu2_13,
._wrap_1ogu2_35 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 9px;
  font-size: 11px;
  color: #374151;
}

._tableSection_1ogu2_285 {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableScrollWrap_1ogu2_2803 {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

._tableScrollWrap_1ogu2_2803 table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
}

._formCard_1ogu2_645,
._card_1ogu2_1169 {
  width: 100%;
  min-width: 0;
}

._pagination_1ogu2_2839 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px;
}

._paginationInfo_1ogu2_2857 {
  font-size: 13px;
  white-space: nowrap;
}

._paginationControls_1ogu2_2867 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

._paginationControls_1ogu2_2867 button {
  min-width: 30px;
}

._actionBtn_1ogu2_2889 {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

._actionBtn_1ogu2_2889:hover {
  transform: translateY(-1px);
}

._actionApprove_1ogu2_2923 {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

._actionApprove_1ogu2_2923:hover {
  background: #dcfce7;
  border-color: #16a34a;
}

._actionReject_1ogu2_2945 {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

._actionReject_1ogu2_2945:hover {
  background: #fee2e2;
  border-color: #dc2626;
}

._actionBtn_1ogu2_2889:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

._page_1dwd4_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 16px;
  background: #f4f7fb;
  gap: 12px;
}

/* Header */
._header_1dwd4_33 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

._backBtn_1dwd4_47 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  font-size: 11px;
}

._backBtn_1dwd4_47:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

._headerContent_1dwd4_91 {
  flex: 1;
}

._pageTitle_1dwd4_99 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

._pageSubtitle_1dwd4_115 {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

/* Filters Section */
._filtersSection_1dwd4_129 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

._searchBox_1dwd4_153 {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fafbfc;
}

._searchIcon_1dwd4_177 {
  color: #94a3b8;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

._searchInput_1dwd4_191 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 11px;
  color: #1e293b;
  outline: none;
  font-family: inherit;
}

._searchInput_1dwd4_191::placeholder {
  color: #94a3b8;
}

._filterGroup_1dwd4_219 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._statusFilterWrapper_1dwd4_231 {
  position: relative;
}

._statusSelect_1dwd4_239 {
  appearance: none;
  padding: 6px 20px 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  color: #1e293b;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

._statusSelect_1dwd4_239:hover {
  border-color: #cbd5e1;
}

._statusSelect_1dwd4_239:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lightest);
}

._selectIcon_1dwd4_283 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
  width: 12px;
  height: 12px;
}

._pageSizeWrapper_1dwd4_305 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._showLabel_1dwd4_317 {
  font-size: 10px;
  color: #475569;
  font-weight: 500;
}

._pageSizeSelect_1dwd4_329 {
  appearance: none;
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  background: #fff;
  font-size: 10px;
  color: #1e293b;
  cursor: pointer;
  outline: none;
}

._entriesLabel_1dwd4_353 {
  font-size: 10px;
  color: #475569;
}

/* Bulk Action Bar */
._bulkActionBar_1dwd4_365 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  gap: 8px;
}

._selectedCount_1dwd4_387 {
  font-size: 11px;
  font-weight: 600;
  color: #1e40af;
}

._bulkActionButtons_1dwd4_399 {
  display: flex;
  gap: 6px;
}

/* Save Section */
._saveSection_1dwd4_411 {
  display: flex;
  justify-content: flex-end;
}

/* Buttons */
._btn_1dwd4_423 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._btnPrimary_1dwd4_457 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnPrimary_1dwd4_457:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

._btnPrimary_1dwd4_457:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnSecondary_1dwd4_487 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_1dwd4_487:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._btnSecondary_1dwd4_487:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnSuccess_1dwd4_519 {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

._btnSuccess_1dwd4_519:hover:not(:disabled) {
  background: #bbf7d0;
}

._btnSuccess_1dwd4_519:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._btnDanger_1dwd4_549 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

._btnDanger_1dwd4_549:hover:not(:disabled) {
  background: #fecaca;
}

._btnDanger_1dwd4_549:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Content Wrapper */
._contentWrapper_1dwd4_581 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Rows Container (Cards) */
._rowsContainer_1dwd4_597 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
}

._rowsContainer_1dwd4_597::-webkit-scrollbar {
  width: 6px;
}

._rowsContainer_1dwd4_597::-webkit-scrollbar-track {
  background: transparent;
}

._rowsContainer_1dwd4_597::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

._rowsContainer_1dwd4_597::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Employee Card */
._employeeCard_1dwd4_649 {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 1.2fr 0.5fr;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s ease;
  align-items: start;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

._employeeCard_1dwd4_649:hover {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

._cardChanged_1dwd4_685 {
  background: linear-gradient(135deg, #fef8f0 0%, #fff9f5 100%);
  border-color: #fed7aa;
}

/* Employee Section */
._employeeSection_1dwd4_697 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

._checkboxWrapper_1dwd4_709 {
  display: flex;
  align-items: center;
  height: 32px;
  padding-top: 2px;
}

._checkbox_1dwd4_709 {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #7c3aed;
  flex-shrink: 0;
}

._checkbox_1dwd4_709:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

._employeeAvatar_1dwd4_749 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

._employeeInfo_1dwd4_777 {
  flex: 1;
}

._employeeName_1dwd4_785 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
  line-height: 1.2;
}

._employeeId_1dwd4_801 {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 1px;
}

._employeeDept_1dwd4_813 {
  font-size: 10px;
  color: #64748b;
}

/* Performance Section */
._performanceSection_1dwd4_825 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._columnGroup_1dwd4_837 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

._fieldGroup_1dwd4_849 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._fieldLabel_1dwd4_861 {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

._textareaInput_1dwd4_877 {
  width: 100%;
  min-height: 80px;
  max-height: 80px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fafbfc;
  font-size: 10px;
  color: #374151;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
  line-height: 1.3;
}

._textareaInput_1dwd4_877:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
  background: #fff;
}

._textareaInput_1dwd4_877:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Ratings Section */
._ratingsSection_1dwd4_937 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._ratingGroup_1dwd4_949 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

._incrementGroup_1dwd4_961 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

._numberInput_1dwd4_973,
._dateInput_1dwd4_975 {
  width: 100%;
  height: 26px;
  padding: 5px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fafbfc;
  font-size: 10px;
  color: #374151;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

._numberInput_1dwd4_973:focus,
._dateInput_1dwd4_975:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
  background: #fff;
}

._numberInput_1dwd4_973:disabled,
._dateInput_1dwd4_975:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Status & Actions Section */
._statusActionsSection_1dwd4_1033 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
}

._statusWrapper_1dwd4_1051 {
  width: 100%;
}

._statusBadge_1dwd4_1059 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
}

._statusGreen_1dwd4_1083 {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

._statusYellow_1dwd4_1095 {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}

._statusRed_1dwd4_1107 {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

._statusBlue_1dwd4_1119 {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

._statusGrey_1dwd4_1131 {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

._actionsWrapper_1dwd4_1143 {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
}

._actionBtn_1dwd4_1157 {
  flex: 1;
  height: 26px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 11px;
}

._actionBtn_1dwd4_1157:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

._actionApprove_1dwd4_1197 {
  color: #16a34a;
  border-color: #86efac;
  background: #f0fdf4;
}

._actionApprove_1dwd4_1197:hover:not(:disabled) {
  background: #dcfce7;
  border-color: #16a34a;
}

._actionReject_1dwd4_1219 {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fef2f2;
}

._actionReject_1dwd4_1219:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #dc2626;
}

._actionBtn_1dwd4_1157:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  transform: none !important;
}

/* Loading & Empty States */
._loadingState_1dwd4_1261,
._emptyState_1dwd4_1263 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* Pagination */
._pagination_1dwd4_1285 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

._paginationInfo_1dwd4_1313 {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

._paginationControls_1dwd4_1325 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._paginationControls_1dwd4_1325 ._btn_1dwd4_423 {
  font-size: 10px;
  height: 26px;
  padding: 0 10px;
}

._pageIndicator_1dwd4_1349 {
  font-size: 10px;
  color: #374151;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

._pageInput_1dwd4_1367 {
  width: 36px;
  height: 24px;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  background: #fafbfc;
  font-size: 10px;
  color: #1e293b;
  outline: none;
  text-align: center;
}

._pageInput_1dwd4_1367:focus {
  border-color: #7c3aed;
}

/* Responsive - Compact Version (Already Smaller) */
@media (max-width: 1200px) {
  ._employeeCard_1dwd4_649 {
    grid-template-columns: 0.85fr 1.3fr 1.1fr 0.5fr;
    gap: 10px;
  }

  ._columnGroup_1dwd4_837 {
    grid-template-columns: 1fr 1fr;
  }

  ._ratingGroup_1dwd4_949 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 992px) {
  ._employeeCard_1dwd4_649 {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  ._columnGroup_1dwd4_837 {
    grid-template-columns: 1fr;
  }

  ._ratingGroup_1dwd4_949 {
    grid-template-columns: 1fr;
  }

  ._incrementGroup_1dwd4_961 {
    grid-template-columns: 1fr;
  }

  ._filtersSection_1dwd4_129 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchBox_1dwd4_153 {
    min-width: 100%;
  }

  ._filterGroup_1dwd4_219 {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  ._page_1dwd4_13 {
    padding: 10px 12px;
    gap: 10px;
  }

  ._header_1dwd4_33 {
    gap: 10px;
  }

  ._pageTitle_1dwd4_99 {
    font-size: 14px;
  }

  ._pageSubtitle_1dwd4_115 {
    font-size: 10px;
  }

  ._bulkActionBar_1dwd4_365 {
    padding: 8px 10px;
  }

  ._btn_1dwd4_423 {
    height: 26px;
    padding: 0 10px;
    font-size: 10px;
  }

  ._textareaInput_1dwd4_877 {
    min-height: 40px;
    max-height: 40px;
    font-size: 9px;
  }

  ._numberInput_1dwd4_973,
  ._dateInput_1dwd4_975 {
    height: 24px;
    font-size: 9px;
  }

  ._fieldLabel_1dwd4_861 {
    font-size: 8px;
  }

  ._ratingGroup_1dwd4_949,
  ._incrementGroup_1dwd4_961 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  ._page_1dwd4_13 {
    padding: 8px 10px;
    gap: 8px;
  }

  ._pageTitle_1dwd4_99 {
    font-size: 14px;
  }

  ._employeeCard_1dwd4_649 {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }

  ._employeeSection_1dwd4_697 {
    gap: 8px;
  }

  ._employeeAvatar_1dwd4_749 {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  ._checkboxWrapper_1dwd4_709 {
    height: 28px;
  }

  ._columnGroup_1dwd4_837,
  ._ratingGroup_1dwd4_949,
  ._incrementGroup_1dwd4_961 {
    grid-template-columns: 1fr;
  }

  ._btn_1dwd4_423 {
    height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  ._textareaInput_1dwd4_877 {
    min-height: 38px;
    max-height: 38px;
    font-size: 9px;
  }

  ._numberInput_1dwd4_973,
  ._dateInput_1dwd4_975 {
    height: 22px;
    font-size: 9px;
  }

  ._statusBadge_1dwd4_1059 {
    font-size: 8px;
    padding: 3px 6px;
  }

  ._actionBtn_1dwd4_1157 {
    height: 24px;
    font-size: 10px;
  }

  ._filtersSection_1dwd4_129 {
    padding: 8px 10px;
  }

  ._searchBox_1dwd4_153 {
    padding: 5px 8px;
  }

  ._searchIcon_1dwd4_177 {
    width: 12px;
    height: 12px;
  }

  ._statusSelect_1dwd4_239,
  ._pageSizeSelect_1dwd4_329 {
    font-size: 10px;
    padding: 5px;
  }

  ._paginationControls_1dwd4_1325 {
    gap: 6px;
  }

  ._pageInput_1dwd4_1367 {
    width: 32px;
    height: 22px;
    font-size: 9px;
  }
}/* PolicyManagementAddEdit.module.css */

._page_8vdl7_5 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px 20px;
  background: #f5f7fa;
  gap: 20px;
}

/* ─── HEADER ─────────────────────────────────────────────── */
._pageHeader_8vdl7_25 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 24px;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #eef2f6;
}

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

._backBtn_8vdl7_59 {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

._backBtn_8vdl7_59:hover {
  background: #f3f4f6;
  color: #f59e0b;
}

._pageHeader_8vdl7_25 h1 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 4px 0;
}

._pageHeader_8vdl7_25 p {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

._headerActions_8vdl7_119 {
  display: flex;
  gap: 10px;
}

._discardBtn_8vdl7_129,
._previewBtn_8vdl7_131,
._publishBtn_8vdl7_133 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

._discardBtn_8vdl7_129 {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

._discardBtn_8vdl7_129:hover {
  background: #e5e7eb;
  color: #ef4444;
}

._previewBtn_8vdl7_131 {
  background: white;
  color: #f59e0b;
  border: 1px solid #fbbf24;
}

._previewBtn_8vdl7_131:hover {
  background: #fffbeb;
}

._publishBtn_8vdl7_133 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

._publishBtn_8vdl7_133:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

._publishBtn_8vdl7_133:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
._topRow_8vdl7_235 {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

/* ─── CARDS ──────────────────────────────────────────────── */
._card_8vdl7_251 {
  background: white;
  border-radius: 16px;
  border: 1px solid #eef2f6;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

._cardTitle_8vdl7_267 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef2f6;
  font-weight: 700;
  font-size: 14px;
  color: #1f2937;
}

._cardTitle_8vdl7_267 svg {
 color: var(--color-primary);
}

/* ─── FORM GROUPS ─────────────────────────────────────────── */
._twoCol_8vdl7_299 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid #f0f2f5;
}

._twoCol_8vdl7_299 ._formGroup_8vdl7_313 {
  border-bottom: none;
  border-right: 1px solid #f0f2f5;
}

._twoCol_8vdl7_299 ._formGroup_8vdl7_313:last-child {
  border-right: none;
}

._formGroup_8vdl7_313 {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
}

._formGroupPad_8vdl7_341 {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f2f5;
}

._formGroupPad_8vdl7_341 label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._formGroup_8vdl7_313 label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._required_8vdl7_391 {
  color: #ef4444;
}

._formGroup_8vdl7_313 input,
._formGroup_8vdl7_313 textarea,
._formGroup_8vdl7_313 select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.2s;
  background: white;
  color: #1f2937;
}

._formGroup_8vdl7_313 input:focus,
._formGroup_8vdl7_313 textarea:focus,
._formGroup_8vdl7_313 select:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

._errorInput_8vdl7_441 {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

._errorText_8vdl7_451 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 4px;
}

._inputIcon_8vdl7_463 {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 12px;
  background: white;
  transition: all 0.2s;
}

._inputIcon_8vdl7_463:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

._inputIcon_8vdl7_463 svg {
  color: #9ca3af;
  flex-shrink: 0;
}

._inputIcon_8vdl7_463 input {
  flex: 1;
  border: none !important;
  padding: 8px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px;
  color: #1f2937;
  outline: none;
}

/* ─── RICH TEXT EDITOR ────────────────────────────────────── */
._editorSection_8vdl7_529 {
  border-bottom: 1px solid #f0f2f5;
}

._editorLabel_8vdl7_537 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._editorLabel_8vdl7_537 svg {
  color: var(--color-primary);
}

._quillWrap_8vdl7_569 {
  padding: 0 20px 16px;
}

._quillWrap_8vdl7_569 .ql-toolbar {
  border-radius: 10px 10px 0 0;
  border-color: #e5e7eb;
  background: #fafbfc;
  font-size: 12px;
  padding: 6px 10px;
}

._quillWrap_8vdl7_569 .ql-container {
  border-radius: 0 0 10px 10px;
  border-color: #e5e7eb;
  font-size: 13px;
  min-height: 180px;
  color: #1f2937;
}

._quillWrap_8vdl7_569 .ql-editor {
  min-height: 160px;
  padding: 14px 16px;
  line-height: 1.6;
}

._quillWrap_8vdl7_569 .ql-editor.ql-blank::before {
  color: #9ca3af;
  font-style: normal;
  font-size: 13px;
}

._quillWrap_8vdl7_569 .ql-toolbar .ql-stroke {
  stroke: #6b7280;
}

._quillWrap_8vdl7_569 .ql-toolbar .ql-fill {
  fill: #6b7280;
}

._quillWrap_8vdl7_569 .ql-toolbar button:hover .ql-stroke,
._quillWrap_8vdl7_569 .ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--color-primary);
}

._quillWrap_8vdl7_569 .ql-toolbar button:hover .ql-fill,
._quillWrap_8vdl7_569 .ql-toolbar button.ql-active .ql-fill {
  fill: var(--color-primary);
}

._quillWrap_8vdl7_569 .ql-toolbar .ql-picker-label:hover,
._quillWrap_8vdl7_569 .ql-toolbar .ql-picker-label.ql-active {
  color: var(--color-primary);
}

._quillWrap_8vdl7_569 .ql-container:focus-within {
  border-color: var(--color-primary-light);
}

/* ─── FILE UPLOAD ─────────────────────────────────────────── */
._uploadSection_8vdl7_689 {
  padding: 14px 20px 16px;
}

._uploadLabel_8vdl7_697 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

._dropZone_8vdl7_721 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 1.5px dashed var(--color-primary-light);
  background: var(--color-primary-lightest);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

._dropZone_8vdl7_721:hover {
  background: #f5f3ff;
  border-color: var(--color-primary);
}

._dropIcon_8vdl7_761 {
  color: var(--color-primary);
}

._dropZone_8vdl7_721 p {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

._dropZone_8vdl7_721 span {
  font-size: 11px;
  color: #4b5563;
}

._dropZone_8vdl7_721 span strong {
  color: var(--color-primary);
  cursor: pointer;
}

._uploadedList_8vdl7_803 {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._uploadedFile_8vdl7_817 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 11px;
  color: #374151;
}

._uploadedFile_8vdl7_817 svg {
 color: var(--color-primary);
  flex-shrink: 0;
}

._uploadedFile_8vdl7_817 span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._uploadedFile_8vdl7_817 button {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: all 0.15s;
}

._uploadedFile_8vdl7_817 button:hover {
  color: #ef4444;
  background: #fef2f2;
}

._fileTypes_8vdl7_899 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

._fileTypeBadge_8vdl7_913 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.3px;
}

/* ─── ASSIGNMENT LIST ─────────────────────────────────────── */
._assignList_8vdl7_943 {
  padding: 8px 14px;
  border-bottom: 1px solid #eef2f6;
}

._radioRow_8vdl7_953 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

._radioRow_8vdl7_953:hover {
  background: var(--color-primary-lightest);
}

._radioRow_8vdl7_953 input[type="radio"] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

._radioContent_8vdl7_999 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._radioLabel_8vdl7_1011 {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}

._radioSub_8vdl7_1023 {
  font-size: 10px;
  color: #9ca3af;
}

._conditionalGroup_8vdl7_1033 {
  padding: 10px 16px;
  border-bottom: 1px solid #eef2f6;
}

._conditionalGroup_8vdl7_1033 label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── MULTI-SELECT CHECKBOX OPTIONS (Departments / Designations) ─────────── */
/* Each row inside the open dropdown menu — a checkbox + label.
   The whole row is clickable because it sits inside react-select's own
   <components.Option>, so the visual checkbox itself ignores pointer
   events and just reflects isSelected. */
._checkboxOptionRow_8vdl7_1073 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

._checkboxBox_8vdl7_1087 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #fff;
  flex-shrink: 0;
  pointer-events: none;
  transition: all 0.15s;
}

._checkboxBoxChecked_8vdl7_1117 {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

._checkboxOptionLabel_8vdl7_1127 {
  font-size: 13px;
  color: #1f2937;
}

/* Selected value "tag" chips rendered in the control itself.
   Base chip look comes from selectStyles (multiValue / multiValueLabel /
   multiValueRemove); this just tidies the label text inside the chip. */
._tagLabel_8vdl7_1143 {
  display: inline-flex;
  align-items: center;
}

/* ─── TOGGLES ─────────────────────────────────────────────── */
._togglesSection_8vdl7_1155 {
  padding: 4px 16px 8px;
  border-bottom: 1px solid #eef2f6;
}

._toggleRow_8vdl7_1165 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f5f7fa;
}

._toggleRow_8vdl7_1165:last-child {
  border-bottom: none;
}

._toggleLabel_8vdl7_1189 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

._toggleLabel_8vdl7_1189 svg {
  color: #f59e0b;
}

._switch_8vdl7_1215 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

._switch_8vdl7_1215 input {
  opacity: 0;
  width: 0;
  height: 0;
}

._slider_8vdl7_1243 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: 0.3s;
  border-radius: 34px;
}

._slider_8vdl7_1243:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

._switch_8vdl7_1215 input:checked + ._slider_8vdl7_1243 {
  background-color: #f59e0b;
}

._switch_8vdl7_1215 input:checked + ._slider_8vdl7_1243:before {
  transform: translateX(18px);
}

/* ─── AUDIENCE PREVIEW ────────────────────────────────────── */
._audienceSection_8vdl7_1311 {
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f6;
}

._audienceHeader_8vdl7_1321 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

._audienceTitle_8vdl7_1335 {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
}

._audienceCount_8vdl7_1347 {
  font-size: 11px;
  color: #6b7280;
}

._avatarRow_8vdl7_1357 {
  display: flex;
  align-items: center;
}

._avatar_8vdl7_1357 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  margin-left: -5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

._avatar_8vdl7_1357:first-child {
  margin-left: 0;
}

._avatarMore_8vdl7_1403 {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 8px;
}

/* ─── SUMMARY ─────────────────────────────────────────────── */
._summaryInfo_8vdl7_1417 {
  padding: 12px 16px;
}

._summaryItem_8vdl7_1425 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6b7280;
  padding: 5px 0;
}

._summaryItem_8vdl7_1425 svg {
  color: #f59e0b;
  flex-shrink: 0;
}

._summaryDivider_8vdl7_1453 {
  height: 1px;
  background: #eef2f6;
  margin: 6px 0;
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  ._topRow_8vdl7_235 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  ._page_8vdl7_5 {
    padding: 12px;
  }

  ._pageHeader_8vdl7_25 {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  ._headerActions_8vdl7_119 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._twoCol_8vdl7_299 {
    grid-template-columns: 1fr;
  }

  ._twoCol_8vdl7_299 ._formGroup_8vdl7_313 {
    border-right: none;
    border-bottom: 1px solid #f0f2f5;
  }
}

/* View Mode Specific Styles */
._loadingContainer_8vdl7_1533 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

._errorContainer_8vdl7_1547 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 400px;
  background: white;
  border-radius: 20px;
  padding: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

._errorContainer_8vdl7_1547 svg {
  color: #ef4444;
  margin-bottom: 16px;
}

._errorContainer_8vdl7_1547 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

._errorContainer_8vdl7_1547 p {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 24px;
}

/* Status Badge */
._statusBadgeContainer_8vdl7_1611 {
  margin-bottom: 20px;
}

._statusBadge_8vdl7_1611 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}

._statusDot_8vdl7_1641 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Policy Header */
._policyHeader_8vdl7_1657 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

._policyTitle_8vdl7_1669 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
  line-height: 1.3;
}

._policyMeta_8vdl7_1685 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

._metaItem_8vdl7_1699 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  background: #f9fafb;
  padding: 4px 10px;
  border-radius: 6px;
}

/* View Content Section */
._viewContentSection_8vdl7_1723 {
  margin-bottom: 32px;
}

._sectionTitle_8vdl7_1731 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fbbf24;
  width: fit-content;
}

._quillViewer_8vdl7_1757 {
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
}

._readOnlyQuill_8vdl7_1769 {
  background: white;
}

._readOnlyQuill_8vdl7_1769 ._ql-container_8vdl7_593 {
  border: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 300px;
}

._readOnlyQuill_8vdl7_1769 ._ql-editor_8vdl7_609 {
  padding: 20px;
  color: #374151;
}

._readOnlyQuill_8vdl7_1769 ._ql-toolbar_8vdl7_577 {
  display: none;
}

/* Attachments Section */
._viewAttachmentsSection_8vdl7_1813 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

._attachmentsList_8vdl7_1825 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._attachmentItem_8vdl7_1837 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #e5e7eb;
}

._attachmentItem_8vdl7_1837:hover {
  background: #fef3c7;
  border-color: #fbbf24;
  transform: translateX(4px);
}

._attachmentInfo_8vdl7_1873 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._attachmentName_8vdl7_1887 {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
}

._attachmentSize_8vdl7_1899 {
  font-size: 11px;
  color: #6b7280;
}

._downloadIcon_8vdl7_1909 {
  color: #6b7280;
  transition: color 0.2s;
}

._attachmentItem_8vdl7_1837:hover ._downloadIcon_8vdl7_1909 {
  color: #fbbf24;
}

/* Stats Grid */
._statsGrid_8vdl7_1929 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

._statCard_8vdl7_1947 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  transition: all 0.2s;
}

._statCard_8vdl7_1947:hover {
  background: #fef3c7;
  transform: translateY(-2px);
}

._statIcon_8vdl7_1977 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
  color: #fbbf24;
}

._statContent_8vdl7_1999 {
  flex: 1;
}

._statValue_8vdl7_2007 {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin-bottom: 4px;
}

._statLabel_8vdl7_2025 {
  font-size: 12px;
  color: #6b7280;
}

/* Info Section */
._infoSection_8vdl7_2037 {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

._infoSection_8vdl7_2037:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

._infoRow_8vdl7_2061 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 13px;
}

._infoLabel_8vdl7_2077 {
  font-weight: 500;
  color: #6b7280;
  width: 40%;
}

._infoValue_8vdl7_2089 {
  color: #111827;
  width: 60%;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}

/* Assignment Type Card */
._assignmentTypeCard_8vdl7_2109 {
  background: #f9fafb;
  border-radius: 10px;
  padding: 12px 16px;
}

._assignmentTypeLabel_8vdl7_2121 {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

._assignmentDetails_8vdl7_2135 {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

/* Settings List */
._settingsList_8vdl7_2153 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._settingItem_8vdl7_2165 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
}

._settingIcon_8vdl7_2187 {
  color: #10b981;
}

._noSettings_8vdl7_2195 {
  color: #9ca3af;
  font-style: italic;
}

/* Acknowledgment List */
._acknowledgmentList_8vdl7_2207 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

._acknowledgmentItem_8vdl7_2221 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 10px;
  transition: all 0.2s;
}

._acknowledgmentItem_8vdl7_2221:hover {
  background: #fef3c7;
}

._acknowledgmentAvatar_8vdl7_2249 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

._acknowledgmentInfo_8vdl7_2273 {
  flex: 1;
}

._acknowledgmentName_8vdl7_2281 {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 2px;
}

._acknowledgmentDate_8vdl7_2295 {
  font-size: 11px;
  color: #6b7280;
}

._acknowledgedIcon_8vdl7_2305 {
  color: #10b981;
}

._viewAllBtn_8vdl7_2313 {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

._viewAllBtn_8vdl7_2313:hover {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #111827;
}

/* Print Styles */
@media print {
  ._pageHeader_8vdl7_25,
  ._headerActions_8vdl7_119,
  ._backBtn_8vdl7_59,
  ._discardBtn_8vdl7_129,
  ._previewBtn_8vdl7_131,
  ._publishBtn_8vdl7_133,
  ._viewAllBtn_8vdl7_2313,
  ._attachmentItem_8vdl7_1837 {
    display: none !important;
  }

  ._card_8vdl7_251 {
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    page-break-inside: avoid;
  }

  ._statusBadge_8vdl7_1611 {
    border: 1px solid #e5e7eb;
  }

  ._statsGrid_8vdl7_1929 {
    break-inside: avoid;
  }

  ._quillViewer_8vdl7_1757 {
    break-inside: avoid;
  }

  ._infoSection_8vdl7_2037 {
    break-inside: avoid;
  }
}

/* Responsive Styles */
@media (max-width: 1024px) {
  ._statsGrid_8vdl7_1929 {
    grid-template-columns: 1fr;
  }

  ._infoRow_8vdl7_2061 {
    flex-direction: column;
    gap: 4px;
  }

  ._infoLabel_8vdl7_2077,
  ._infoValue_8vdl7_2089 {
    width: 100%;
  }

  ._policyTitle_8vdl7_1669 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  ._statsGrid_8vdl7_1929 {
    gap: 12px;
  }

  ._statCard_8vdl7_1947 {
    padding: 12px;
  }

  ._statValue_8vdl7_2007 {
    font-size: 18px;
  }

  ._policyMeta_8vdl7_1685 {
    gap: 10px;
  }

  ._metaItem_8vdl7_1699 {
    font-size: 11px;
  }

  ._acknowledgmentItem_8vdl7_2221 {
    padding: 8px 10px;
  }

  ._acknowledgmentAvatar_8vdl7_2249 {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  ._statsGrid_8vdl7_1929 {
    grid-template-columns: 1fr;
  }

  ._attachmentItem_8vdl7_1837 {
    padding: 10px 12px;
  }

  ._attachmentName_8vdl7_1887 {
    font-size: 12px;
  }
}
/* ── Page Layout ──────────────────────────────────────────────────────────── */

._page_1gurt_5 {
  min-height: 100vh;
  background: #f8fafc;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

._header_1gurt_19 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 18px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

._headerLeft_1gurt_47 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._backBtn_1gurt_59 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.15s;
  margin-top: 2px;
  flex-shrink: 0;
}

._backBtn_1gurt_59:hover {
  background: #f1f5f9;
  border-color: #6366f1;
  color: #6366f1;
}

._breadcrumb_1gurt_103 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

._breadcrumb_1gurt_103 span {
  color: #6366f1;
  cursor: pointer;
  transition: color 0.15s;
}

._breadcrumb_1gurt_103 span:hover {
  color: #4f46e5;
}

._breadcrumbSep_1gurt_141 {
  color: #d1d5db !important;
  cursor: default !important;
}

._breadcrumb_1gurt_103 strong {
  color: #374151;
  font-weight: 600;
}

._pageTitle_1gurt_161 {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}

._pageSub_1gurt_177 {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
}

._headerActions_1gurt_189 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

._body_1gurt_207 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Section Card ──────────────────────────────────────────────────────── */

._sectionCard_1gurt_229 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
  /* overflow: hidden;  ← DELETE this line */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s;
}

._sectionCard_1gurt_229:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

._sectionHeader_1gurt_255 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.15s;
}

._sectionHeader_1gurt_255:hover {
  background: #fafbff;
}

._sectionTitle_1gurt_285 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
}

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

._chevronIcon_1gurt_329 {
  font-size: 10px;
  color: #94a3b8;
}

._sectionBody_1gurt_339 {
  padding: 20px;
  overflow: visible;
}

/* ── Grid Layouts ──────────────────────────────────────────────────────── */

._grid3_1gurt_353 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

._grid4_1gurt_365 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  ._grid3_1gurt_353 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._grid4_1gurt_365 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {

  ._grid3_1gurt_353,
  ._grid4_1gurt_365 {
    grid-template-columns: 1fr;
  }
}

/* ── Form Elements ──────────────────────────────────────────────────────── */

._formGroup_1gurt_417 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_1gurt_429 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  margin-right: 2px;
}

._fieldHint_1gurt_443 {
  font-size: 9px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 1px;
  margin-left: 8px;
}

._input_1gurt_459 {
  padding: 8px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 10px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}

._input_1gurt_459:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

._input_1gurt_459::placeholder {
  color: #9ca3af;
}

._inputErr_1gurt_503 {
  border-color: #ef4444 !important;
  background: #fff5f5;
}

._inputErr_1gurt_503:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

._errText_1gurt_521 {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

._inputPrefix_1gurt_533 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  height: 38px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

._inputPrefix_1gurt_533:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

._inputPrefix_1gurt_533 ._input_1gurt_459 {
  border: none;
  padding: 0;
  height: auto;
  box-shadow: none;
  flex: 1;
}

._inputPrefix_1gurt_533 ._input_1gurt_459:focus {
  border: none;
  box-shadow: none;
}

/* ── Calc Type Info ──────────────────────────────────────────────────────── */

._calcTypeInfo_1gurt_597 {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

._calcTypePill_1gurt_609 {
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  font-size: 11.5px;
  padding: 8px 12px;
  font-weight: 500;
  line-height: 1.5;
  width: 100%;
}

/* ── Toggles ──────────────────────────────────────────────────────────────── */

._toggle_1gurt_637 {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

._toggle_1gurt_637 input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

._toggleSlider_1gurt_667 {
  width: 38px;
  height: 20px;
  background: #e5e7eb;
  border-radius: 20px;
  transition: background 0.25s;
  position: relative;
  display: block;
  flex-shrink: 0;
}

._toggleSlider_1gurt_667::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

._toggle_1gurt_637 input:checked+._toggleSlider_1gurt_667 {
  background: #6366f1;
}

._toggle_1gurt_637 input:checked+._toggleSlider_1gurt_667::after {
  transform: translateX(18px);
}

._toggle_1gurt_637 input:disabled+._toggleSlider_1gurt_667 {
  opacity: 0.45;
  cursor: not-allowed;
}

._toggleGroup_1gurt_741 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

._toggleLabel_1gurt_755 {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

._activeLabel_1gurt_767 {
  color: #059669;
}

._inactiveLabel_1gurt_775 {
  color: #9ca3af;
}

/* ── Toggle Cards ────────────────────────────────────────────────────────── */

._toggleCardsGrid_1gurt_787 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 800px) {
  ._toggleCardsGrid_1gurt_787 {
    grid-template-columns: 1fr;
  }
}

._toggleCard_1gurt_787 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  background: #fafbff;
  transition: all 0.15s;
}

._toggleCard_1gurt_787:hover {
  border-color: #e0e7ff;
  background: #f8f9ff;
}

._toggleCardDisabled_1gurt_845 {
  opacity: 0.6;
  cursor: not-allowed;
}

._toggleCardContent_1gurt_855 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

._toggleCardIcon_1gurt_869 {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

._toggleCardTitle_1gurt_891 {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

._toggleCardSub_1gurt_905 {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

._toggleCardConflict_1gurt_917 {
  font-size: 10.5px;
  color: #ef4444;
  margin-top: 3px;
  font-weight: 500;
}

/* ── Approver Section ─────────────────────────────────────────────────────── */

._approverNotice_1gurt_935 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

._approverHeader_1gurt_961 {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 36px;
  gap: 12px;
  padding: 6px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
}

._approverRow_1gurt_989 {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 36px;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
}

._approverRow_1gurt_989:last-of-type {
  border-bottom: none;
}

._levelBadge_1gurt_1015 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  flex-shrink: 0;
}

._removeBtn_1gurt_1045 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  transition: background 0.15s;
}

._removeBtn_1gurt_1045:hover {
  background: #fef2f2;
}

._addApproverBtn_1gurt_1079 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px dashed #a78bfa;
  border-radius: 8px;
  color: #7c3aed;
  background: #f5f3ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.15s;
}

._addApproverBtn_1gurt_1079:hover {
  background: #ede9fe;
  border-color: #8b5cf6;
}

/* ── Employee Assignment ─────────────────────────────────────────────────── */

._applicableToggleWrap_1gurt_1125 {
  margin-bottom: 16px;
}

._applicableToggleCard_1gurt_1133 {
  max-width: 450px;
}

._filterDivider_1gurt_1141 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 16px;
}

._filterDivider_1gurt_1141::before,
._filterDivider_1gurt_1141::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #f1f5f9;
}

._searchBtn_1gurt_1181 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 38px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  justify-content: center;
}

._searchBtn_1gurt_1181:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

._searchBtn_1gurt_1181:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._availableCount_1gurt_1239 {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  margin-left: 6px;
}

._selectedEmpSection_1gurt_1253 {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

._selectedEmpHeader_1gurt_1269 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._selectedEmpTitle_1gurt_1283 {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

._removeAllBtn_1gurt_1295 {
  font-size: 11.5px;
  color: #ef4444;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

._removeAllBtn_1gurt_1295:hover {
  background: #fef2f2;
}

._empCardsGrid_1gurt_1327 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

._empCard_1gurt_1327 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.15s;
}

._empCard_1gurt_1327:hover {
  border-color: #a5b4fc;
}

._empAvatar_1gurt_1369 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._empInfo_1gurt_1385 {
  flex: 1;
  min-width: 0;
}

._empName_1gurt_1395 {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._empCode_1gurt_1413 {
  font-size: 10.5px;
  color: #94a3b8;
}

._empRemoveBtn_1gurt_1423 {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

._empRemoveBtn_1gurt_1423:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* ── Multi Select ─────────────────────────────────────────────────────────── */

._multiSelectWrap_1gurt_1463 {
  position: relative;
}

._multiSelectTrigger_1gurt_1471 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}

._multiSelectTrigger_1gurt_1471:hover {
  border-color: #6366f1;
}

._multiSelectPlaceholder_1gurt_1507 {
  font-size: 12px;
  color: #9ca3af;
}

._multiSelectChip_1gurt_1517 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
}

._chipRemove_1gurt_1541 {
  background: none;
  border: none;
  cursor: pointer;
  color: #818cf8;
  display: flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}

._chipRemove_1gurt_1541:hover {
  color: #4338ca;
}

._chevron_1gurt_329 {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}

._multiSelectDropdown_1gurt_1583 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  overflow: hidden;
}

._searchRow_1gurt_1609 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
}

._searchInput_1gurt_1625 {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12.5px;
  color: #111827;
  background: transparent;
}

._clearSearch_1gurt_1643 {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
  display: flex;
  align-items: center;
}

._clearSearch_1gurt_1643:hover {
  color: #ef4444;
}

._selectAllRow_1gurt_1671 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f8fafc;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

._selectAllRow_1gurt_1671:hover {
  background: #f8fafc;
}

._optionsList_1gurt_1705 {
  max-height: 200px;
  overflow-y: auto;
}

._optionRow_1gurt_1715 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #374151;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}

._optionRow_1gurt_1715:hover {
  background: #f8fafc;
}

._optionSub_1gurt_1747 {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
}

._stateMsg_1gurt_1759 {
  padding: 14px 12px;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
}

._dropdownFooter_1gurt_1773 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  background: #fafbff;
}

._countBadge_1gurt_1791 {
  font-size: 11px;
  color: #6366f1;
  font-weight: 500;
}

._clearAll_1gurt_1803 {
  font-size: 11.5px;
  color: #ef4444;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  padding: 2px 4px;
  border-radius: 4px;
}

._clearAll_1gurt_1803:hover {
  background: #fef2f2;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

._btnPrimary_1gurt_1837 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  height: 38px;
  white-space: nowrap;
}

._btnPrimary_1gurt_1837:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

._btnPrimary_1gurt_1837:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

._btnOutline_1gurt_1895 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  height: 38px;
  white-space: nowrap;
}

._btnOutline_1gurt_1895:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

/* ── Form Footer ─────────────────────────────────────────────────────────── */

._formFooter_1gurt_1943 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */

._spinner_1gurt_1969 {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: _spin_1gurt_1969 0.6s linear infinite;
}

@keyframes _spin_1gurt_1969 {
  to {
    transform: rotate(360deg);
  }
}/* ============================================================
   communication.module.css
   Shared styles for the entire Communication Module
   ============================================================ */

/* ── CSS Variables ── */
:root {
    --comm-primary: #7C3AED;
    --comm-primary-hover: #6D28D9;
    --comm-primary-light: #EDE9FE;
    --comm-primary-text: #ffffff;

    --comm-bg: #F8F9FA;
    --comm-surface: #ffffff;
    --comm-border: #E5E7EB;
    --comm-border-light: #F3F4F6;

    --comm-text-primary: #111827;
    --comm-text-secondary: #6B7280;
    --comm-text-muted: #9CA3AF;

    --comm-online: #10B981;
    --comm-unread-bg: #7C3AED;
    --comm-unread-text: #ffffff;

    --comm-mine-bubble: #EDE9FE;
    --comm-other-bubble: #F3F4F6;
    --comm-mine-bubble-text: #111827;

    --comm-sidebar-w: 300px;
    --comm-rightpanel-w: 300px;
    --comm-input-h: 64px;
    --comm-header-h: 64px;
    --comm-topbar-h: 56px;

    --comm-radius-sm: 6px;
    --comm-radius-md: 10px;
    --comm-radius-lg: 16px;
    --comm-radius-xl: 20px;
    --comm-radius-full: 9999px;

    --comm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --comm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --comm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    --comm-transition: 0.18s ease;
  
}

/* ── Base Reset for module ── */
._commModule_1leqb_101 * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

._commModule_1leqb_101 {
   
    color: var(--comm-text-primary);
    background: var(--comm-bg);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================================
   TOP BAR
   ============================================================ */
._topBar_1leqb_139 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--comm-topbar-h);
    background: var(--comm-surface);
    border-bottom: 1px solid var(--comm-border);
    flex-shrink: 0;
}

._topBarLeft_1leqb_161 h2 {
    font-size: 12px;
    font-weight: 700;
    color: var(--comm-text-primary);
    line-height: 1.2;
}

._topBarLeft_1leqb_161 p {
    font-size: 9px;
    color: var(--comm-text-secondary);
    margin-top: 1px;
}

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

._searchBarTop_1leqb_199 {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--comm-bg);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-full);
    padding: 6px 14px;
    min-width: 260px;
}

._searchBarTop_1leqb_199 input {
    border: none;
    background: transparent;
    font-size: 10px;
    color: var(--comm-text-primary);
    outline: none;
    width: 100%;
}

._searchBarTop_1leqb_199 input::placeholder {
    color: var(--comm-text-muted);
}

._topBarIconBtn_1leqb_247 {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--comm-radius-full);
    border: none;
    background: var(--comm-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--comm-text-secondary);
    transition: background var(--comm-transition);
}

._topBarIconBtn_1leqb_247:hover {
    background: var(--comm-border-light);
}

._notifBadge_1leqb_285 {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--comm-radius-full);
    background: #EF4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--comm-surface);
}

._userInfo_1leqb_319 {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

._userAvatar_1leqb_333 {
    width: 34px;
    height: 34px;
    border-radius: var(--comm-radius-full);
    background: var(--comm-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

._userNameRole_1leqb_359 strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--comm-text-primary);
}

._userNameRole_1leqb_359 span {
    font-size: 11px;
    color: var(--comm-text-secondary);
}

/* ============================================================
   TABS BAR
   ============================================================ */
._tabsBar_1leqb_389 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--comm-surface);
    border-bottom: 1px solid var(--comm-border);
    flex-shrink: 0;
    gap: 4px;
}

._tabsList_1leqb_411 {
    display: flex;
    gap: 2px;
}

._tabBtn_1leqb_421 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--comm-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--comm-transition);
    white-space: nowrap;
    border-radius: var(--comm-radius-sm) var(--comm-radius-sm) 0 0;
}

._tabBtn_1leqb_421:hover {
    color: var(--comm-primary);
    background: var(--comm-primary-light);
}

._tabBtn_1leqb_421._tabActive_1leqb_465 {
    color: var(--comm-primary);
    border-bottom-color: var(--comm-primary);
    font-weight: 600;
}

._newChatBtn_1leqb_477 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--comm-primary);
    color: var(--comm-primary-text);
    border: none;
    border-radius: var(--comm-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--comm-transition);
    white-space: nowrap;
}

._newChatBtn_1leqb_477:hover {
    background: var(--comm-primary-hover);
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
._mainLayout_1leqb_523 {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ============================================================
   LEFT SIDEBAR – CHAT LIST
   ============================================================ */
._sidebar_1leqb_543 {
    width: var(--comm-sidebar-w);
    background: var(--comm-surface);
    border-right: 1px solid var(--comm-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

._sidebarSearch_1leqb_563 {
    padding: 12px 14px;
    border-bottom: 1px solid var(--comm-border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

._sidebarSearchInput_1leqb_579 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--comm-bg);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-full);
    padding: 7px 12px;
}

._sidebarSearchInput_1leqb_579 input {
    border: none;
    background: transparent;
    font-size: 13px;
    outline: none;
    color: var(--comm-text-primary);
    width: 100%;
}

._sidebarSearchInput_1leqb_579 input::placeholder {
    color: var(--comm-text-muted);
}

._filterBtn_1leqb_627 {
    width: 32px;
    height: 32px;
    border-radius: var(--comm-radius-md);
    border: 1px solid var(--comm-border);
    background: var(--comm-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--comm-text-secondary);
    flex-shrink: 0;
    transition: all var(--comm-transition);
}

._filterBtn_1leqb_627:hover {
    background: var(--comm-primary-light);
    border-color: var(--comm-primary);
    color: var(--comm-primary);
}

._sidebarScroll_1leqb_669 {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

._sidebarScroll_1leqb_669::-webkit-scrollbar {
    width: 4px;
}

._sidebarScroll_1leqb_669::-webkit-scrollbar-track {
    background: transparent;
}

._sidebarScroll_1leqb_669::-webkit-scrollbar-thumb {
    background: var(--comm-border);
    border-radius: 2px;
}

._chatSection_1leqb_707 {
    padding: 0;
}

._chatSectionLabel_1leqb_715 {
    font-size: 11px;
    font-weight: 600;
    color: var(--comm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px 4px;
}

._chatItem_1leqb_733 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--comm-transition);
    border-radius: 0;
    position: relative;
}

._chatItem_1leqb_733:hover {
    background: var(--comm-border-light);
}

._chatItem_1leqb_733._chatItemActive_1leqb_763 {
    background: var(--comm-primary-light);
}

._chatItemActive_1leqb_763 ._chatItemName_1leqb_771 {
    color: var(--comm-primary);
}

._chatAvatar_1leqb_779 {
    width: 40px;
    height: 40px;
    border-radius: var(--comm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

._onlineDot_1leqb_807 {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: var(--comm-radius-full);
    background: var(--comm-online);
    border: 2px solid var(--comm-surface);
}

._chatItemMeta_1leqb_829 {
    flex: 1;
    min-width: 0;
}

._chatItemRow_1leqb_839 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

._chatItemName_1leqb_771 {
    font-size: 13px;
    font-weight: 600;
    color: var(--comm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._chatItemTime_1leqb_871 {
    font-size: 11px;
    color: var(--comm-text-muted);
    flex-shrink: 0;
    margin-left: 6px;
}

._chatItemPreview_1leqb_885 {
    font-size: 12px;
    color: var(--comm-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._chatItemBadge_1leqb_901 {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--comm-radius-full);
    background: var(--comm-unread-bg);
    color: var(--comm-unread-text);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 4px;
}

._showMoreBtn_1leqb_933 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--comm-primary);
    cursor: pointer;
    transition: color var(--comm-transition);
}

._showMoreBtn_1leqb_933:hover {
    color: var(--comm-primary-hover);
}

/* ============================================================
   CHAT WINDOW – CENTER
   ============================================================ */
._chatWindow_1leqb_975 {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--comm-bg);
}

/* Chat Header */
._chatHeader_1leqb_993 {
    height: var(--comm-header-h);
    background: var(--comm-surface);
    border-bottom: 1px solid var(--comm-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

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

._chatHeaderAvatar_1leqb_1027 {
    width: 30px;
    height: 30px;
    border-radius: var(--comm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

._chatHeaderName_1leqb_1053 {
    font-size: 12px;
    font-weight: 700;
    color: var(--comm-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

._chatHeaderStar_1leqb_1071 {
    color: #F59E0B;
    font-size: 14px;
}

._chatHeaderMeta_1leqb_1081 {
    font-size: 9px;
    color: var(--comm-text-secondary);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

._onlinePulse_1leqb_1099 {
    width: 7px;
    height: 7px;
    border-radius: var(--comm-radius-full);
    background: var(--comm-online);
    display: inline-block;
}

._chatHeaderActions_1leqb_1115 {
    display: flex;
    align-items: center;
    gap: 6px;
}

._chatActionBtn_1leqb_1127 {
    width: 36px;
    height: 36px;
    border-radius: var(--comm-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--comm-text-secondary);
    transition: all var(--comm-transition);
}

._chatActionBtn_1leqb_1127:hover {
    background: var(--comm-border-light);
    color: var(--comm-primary);
}

/* Date separator */
._dateSeparator_1leqb_1167 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 8px;
}

._dateSeparator_1leqb_1167::before,
._dateSeparator_1leqb_1167::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--comm-border);
}

._dateSeparatorLabel_1leqb_1197 {
    font-size: 11px;
    color: var(--comm-text-muted);
    background: var(--comm-bg);
    padding: 2px 10px;
    border-radius: var(--comm-radius-full);
    border: 1px solid var(--comm-border);
    font-weight: 500;
    white-space: nowrap;
}

/* Messages area */
._messagesArea_1leqb_1221 {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

._messagesArea_1leqb_1221::-webkit-scrollbar-track {
    background: transparent;
}

._messagesArea_1leqb_1221::-webkit-scrollbar-thumb {
    background: var(--comm-border);
    border-radius: 3px;
}

/* Individual message */
._messageRow_1leqb_1267 {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    align-items: flex-end;
}

._messageRow_1leqb_1267._messageRowMine_1leqb_1281 {
    flex-direction: row-reverse;
}

._messageSenderAvatar_1leqb_1289 {
    width: 32px;
    height: 32px;
    border-radius: var(--comm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

._messageBubbleWrap_1leqb_1319 {
    display: flex;
    flex-direction: column;
    max-width: 66%;
    gap: 4px;
}

._messageRowMine_1leqb_1281 ._messageBubbleWrap_1leqb_1319 {
    align-items: flex-end;
}

._messageSenderName_1leqb_1341 {
    font-size: 11px;
    font-weight: 600;
    color: var(--comm-text-secondary);
    padding: 0 4px;
}

._messageBubble_1leqb_1319 {
    background: var(--comm-other-bubble);
    border-radius: var(--comm-radius-lg) var(--comm-radius-lg) var(--comm-radius-lg) 4px;
    padding: 10px 14px;
    font-size: 10px;
    line-height: 1.55;
    color: var(--comm-text-primary);
    word-break: break-word;
    white-space: pre-wrap;
}

._messageBubble_1leqb_1319._messageBubbleMine_1leqb_1377 {
    background: var(--comm-mine-bubble);
    border-radius: var(--comm-radius-lg) var(--comm-radius-lg) 4px var(--comm-radius-lg);
    color: var(--comm-mine-bubble-text);
}

/* Attachment inside bubble */
._messageAttachment_1leqb_1391 {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--comm-surface);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 10px 12px;
    margin-top: 8px;
    cursor: pointer;
    transition: border-color var(--comm-transition);
}

._messageAttachment_1leqb_1391:hover {
    border-color: var(--comm-primary);
}

._attachIcon_1leqb_1425 {
    width: 36px;
    height: 36px;
    border-radius: var(--comm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

._attachIcon_1leqb_1425._pdf_1leqb_1447 {
    background: #FEE2E2;
}

._attachIcon_1leqb_1425._doc_1leqb_1455 {
    background: #DBEAFE;
}

._attachIcon_1leqb_1425._ppt_1leqb_1463 {
    background: #FEF3C7;
}

._attachInfo_1leqb_1471 {
    flex: 1;
    min-width: 0;
}

._attachName_1leqb_1481 {
    font-size: 13px;
    font-weight: 600;
    color: var(--comm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._attachSize_1leqb_1499 {
    font-size: 11px;
    color: var(--comm-text-muted);
    margin-top: 1px;
}

._attachDownload_1leqb_1511 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--comm-text-secondary);
    transition: color var(--comm-transition);
}

._attachDownload_1leqb_1511:hover {
    color: var(--comm-primary);
}

/* Reactions */
._messageReactions_1leqb_1541 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

._reactionPill_1leqb_1555 {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--comm-surface);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-full);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--comm-transition);
    color: var(--comm-text-secondary);
}

._reactionPill_1leqb_1555:hover {
    border-color: var(--comm-primary);
    background: var(--comm-primary-light);
}

._reactionCount_1leqb_1593 {
    font-size: 11px;
    font-weight: 600;
}

/* Message time + seen */
._messageFooter_1leqb_1605 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    justify-content: flex-end;
}

._messageTime_1leqb_1621 {
    font-size: 10px;
    color: var(--comm-text-muted);
}

._seenRow_1leqb_1631 {
    display: flex;
    align-items: center;
    gap: 3px;
}

._seenAvatarSmall_1leqb_1643 {
    width: 16px;
    height: 16px;
    border-radius: var(--comm-radius-full);
    background: var(--comm-border);
    border: 1px solid var(--comm-surface);
    margin-left: -4px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
}

._seenCount_1leqb_1673 {
    font-size: 10px;
    color: var(--comm-text-muted);
}

._doubleCheck_1leqb_1683 {
    color: var(--comm-primary);
    font-size: 11px;
}

/* ── Message Input ── */
._messageInputBar_1leqb_1695 {
    background: var(--comm-surface);
    border-top: 1px solid var(--comm-border);
    padding: 4px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

._inputAction_1leqb_1715 {
    width: 34px;
    height: 34px;
    border-radius: var(--comm-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--comm-text-secondary);
    transition: all var(--comm-transition);
    flex-shrink: 0;
}

._inputAction_1leqb_1715:hover {
    background: var(--comm-border-light);
    color: var(--comm-primary);
}

._messageInput_1leqb_1695 {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13.5px;
    color: var(--comm-text-primary);
    outline: none;
 
    resize: none;
    min-height: 36px;
    line-height: 1.5;
}

._messageInput_1leqb_1695::placeholder {
    color: var(--comm-text-muted);
}

._sendBtn_1leqb_1789 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--comm-primary);
    color: var(--comm-primary-text);
    border: none;
    border-radius: var(--comm-radius-md);
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--comm-transition);
    flex-shrink: 0;
}

._sendBtn_1leqb_1789:hover {
    background: var(--comm-primary-hover);
}

._sendDropdown_1leqb_1829 {
    width: 32px;
    height: 32px;
    background: var(--comm-primary-hover);
    border: none;
    border-radius: var(--comm-radius-md);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}

/* ============================================================
   RIGHT PANEL
   ============================================================ */
._rightPanel_1leqb_1865 {
    width: var(--comm-rightpanel-w);
    background: var(--comm-surface);
    border-left: 1px solid var(--comm-border);
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 16px;
}

._rightPanel_1leqb_1865::-webkit-scrollbar {
    width: 4px;
}

._rightPanel_1leqb_1865::-webkit-scrollbar-thumb {
    background: var(--comm-border);
    border-radius: 2px;
}

/* Right panel sections */
._rpSection_1leqb_1903 {
    padding: 14px 16px;
    border-bottom: 1px solid var(--comm-border-light);
}

._rpSectionHeader_1leqb_1913 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

._rpSectionTitle_1leqb_1927 {
    font-size: 13px;
    font-weight: 700;
    color: var(--comm-text-primary);
}

._rpViewAll_1leqb_1939 {
    font-size: 12px;
    font-weight: 500;
    color: var(--comm-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--comm-transition);
}

._rpViewAll_1leqb_1939:hover {
    color: var(--comm-primary-hover);
    text-decoration: underline;
}

/* Group Info */
._groupInfoCard_1leqb_1971 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

._groupInfoAvatar_1leqb_1985 {
    width: 33px;
    height: 33px;
    border-radius: var(--comm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

._groupInfoDetails_1leqb_2011 strong {
    font-size: 12px;
    font-weight: 700;
    color: var(--comm-text-primary);
    display: block;
}

._groupInfoDetails_1leqb_2011 span {
    font-size: 9px;
    color: var(--comm-text-secondary);
}

._groupMembersRow_1leqb_2035 {
    display: flex;
    align-items: center;
    gap: 4px;
}

._memberAvatarSmall_1leqb_2047 {
    width: 26px;
    height: 26px;
    border-radius: var(--comm-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    margin-left: -6px;
    border: 2px solid var(--comm-surface);
}

._memberAvatarSmall_1leqb_2047:first-child {
    margin-left: 0;
}

._memberExtraCount_1leqb_2083 {
    font-size: 11px;
    color: var(--comm-text-secondary);
    margin-left: 6px;
}

/* Shared Files */
._fileItem_1leqb_2097 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--comm-border-light);
}

._fileItem_1leqb_2097:last-child {
    border-bottom: none;
}

._fileIcon_1leqb_2123 {
    width: 32px;
    height: 32px;
    border-radius: var(--comm-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0;
}

._fileIcon_1leqb_2123._pdf_1leqb_1447 {
    background: #EF4444;
}

._fileIcon_1leqb_2123._doc_1leqb_1455 {
    background: #2196F3;
}

._fileIcon_1leqb_2123._ppt_1leqb_1463 {
    background: #F59E0B;
}

._fileInfo_1leqb_2179 {
    flex: 1;
    min-width: 0;
}

._fileName_1leqb_2189 {
    font-size: 12px;
    font-weight: 600;
    color: var(--comm-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._fileMeta_1leqb_2207 {
    font-size: 11px;
    color: var(--comm-text-muted);
    margin-top: 1px;
}

._fileTime_1leqb_2219 {
    font-size: 10px;
    color: var(--comm-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Upcoming Events */
._eventItem_1leqb_2235 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--comm-border-light);
}

._eventItem_1leqb_2235:last-child {
    border-bottom: none;
}

._eventDate_1leqb_2259 {
    width: 38px;
    height: 42px;
    background: var(--comm-primary-light);
    border-radius: var(--comm-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._eventDateMonth_1leqb_2283 {
    font-size: 8px;
    font-weight: 700;
    color: var(--comm-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

._eventDateDay_1leqb_2299 {
    font-size: 16px;
    font-weight: 800;
    color: var(--comm-primary);
    line-height: 1.1;
}

._eventDetails_1leqb_2313 strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--comm-text-primary);
    display: block;
}

._eventMeta_1leqb_2327 {
    font-size: 11px;
    color: var(--comm-text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Quick Actions */
._quickActionsGrid_1leqb_2347 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

._quickActionBtn_1leqb_2359 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--comm-bg);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    font-size: 11px;
    font-weight: 500;
    color: var(--comm-text-secondary);
    cursor: pointer;
    transition: all var(--comm-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._quickActionBtn_1leqb_2359:hover {
    background: var(--comm-primary-light);
    border-color: var(--comm-primary);
    color: var(--comm-primary);
}

/* Communication Insights */
._insightsGrid_1leqb_2409 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

._insightCard_1leqb_2421 {
    text-align: center;
    padding: 10px 6px;
    background: var(--comm-bg);
    border-radius: var(--comm-radius-md);
}

._insightValue_1leqb_2435 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 3px;
}

._insightLabel_1leqb_2449 {
    font-size: 10px;
    color: var(--comm-text-muted);
    font-weight: 500;
}

._insightPeriodSelect_1leqb_2461 {
    font-size: 11px;
    color: var(--comm-primary);
    background: transparent;
    border: none;
    cursor: pointer;
   
    font-weight: 500;
}

/* ============================================================
   UTILITY / SHARED
   ============================================================ */
._svgIcon_1leqb_2487 {
    width: 12px;
    height: 12px;
    display: block;
    flex-shrink: 0;
}

._pinIcon_1leqb_2501 {
    color: var(--comm-text-muted);
    font-size: 12px;
}

._muteIcon_1leqb_2511 {
    color: var(--comm-text-muted);
    font-size: 12px;
}

/* Scrollbar global overrides for module */
._commModule_1leqb_101 ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

._commModule_1leqb_101 ::-webkit-scrollbar-thumb {
    background: var(--comm-border);
    border-radius: 2px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    ._rightPanel_1leqb_1865 {
        display: none;
    }
}

@media (max-width: 900px) {
    ._sidebar_1leqb_543 {
        width: 240px;
    }
}

@media (max-width: 680px) {
    ._sidebar_1leqb_543 {
        display: none;
    }
}/* ChatModal.module.css - Unified Purple Theme for all Chat Modals */

/* ── Variables ── */
:root {
    --cm-primary: #7C3AED;
    --cm-primary-light: #EDE9FE;
    --cm-primary-hover: #6D28D9;
    --cm-primary-dark: #5B21B6;
    --cm-primary-bg: #F5F3FF;
    --cm-text-primary: #111827;
    --cm-text-secondary: #6B7280;
    --cm-text-muted: #9CA3AF;
    --cm-border: #E5E7EB;
    --cm-border-light: #F3F4F6;
    --cm-surface: #ffffff;
    --cm-bg: #F8F9FA;
    --cm-error: #EF4444;
    --cm-success: #10B981;
    --cm-danger: #DC2626;
    --cm-danger-bg: #FEE2E2;
    --cm-danger-border: #FCA5A5;
    --cm-danger-hover: #FECACA;
    --cm-radius-sm: 6px;
    --cm-radius-md: 10px;
    --cm-radius-lg: 16px;
    --cm-radius-full: 9999px;
    --cm-transition: 0.18s ease;
}

/* ── Modal Overrides ── */
._modalDialog_bsupx_61 {
    max-width: 480px;
    width: 100%;
    margin: 1.75rem auto;
}

._modalContent_bsupx_73 {
    border: none;
    border-radius: var(--cm-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    background: var(--cm-surface);
    overflow: hidden;
}

._modalBody_bsupx_89 {
    padding: 0;
}

/* ── Header ── */
._header_bsupx_99 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--cm-border-light);
    background: var(--cm-primary-bg);
}

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

._headerIcon_bsupx_129 {
    width: 36px;
    height: 36px;
    border-radius: var(--cm-radius-full);
    background: var(--cm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._headerIcon_bsupx_129 svg {
    color: #ffffff;
}

._headerTitle_bsupx_159 {
    font-size: 15px;
    font-weight: 700;
    color: var(--cm-text-primary);
    margin: 0;
    line-height: 1.3;
}

._headerSub_bsupx_175 {
    font-size: 11px;
    color: var(--cm-text-secondary);
    margin: 0;
}

._closeBtn_bsupx_187 {
    width: 32px;
    height: 32px;
    border-radius: var(--cm-radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-text-secondary);
    transition: all var(--cm-transition);
}

._closeBtn_bsupx_187:hover {
    background: rgba(124, 58, 237, 0.1);
    color: var(--cm-primary);
}

/* ── Body Content ── */
._bodyContent_bsupx_227 {
    padding: 20px 24px 12px;
}

/* ── Icon Upload ── */
._iconUploadWrapper_bsupx_237 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 4px;
}

._iconUploadLabel_bsupx_251 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px dashed var(--cm-primary);
    position: relative;
    background: var(--cm-primary-bg);
    transition: all var(--cm-transition);
}

._iconUploadLabel_bsupx_251:hover:not(._disabled_bsupx_283) {
    border-color: var(--cm-primary-hover);
    background: var(--cm-primary-light);
}

._iconUploadLabel_bsupx_251._disabled_bsupx_283 {
    cursor: not-allowed;
    opacity: 0.7;
}

._iconUploadLabel_bsupx_251._hasPreview_bsupx_303 {
    background: transparent;
    border-color: var(--cm-border);
}

._iconUploadInput_bsupx_313 {
    display: none;
}

._iconPreview_bsupx_321 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._iconUploadSpinner_bsupx_333 {
    color: var(--cm-primary);
}

._iconUploadPlaceholder_bsupx_341 {
    color: var(--cm-primary);
}

/* ── Form Fields ── */
._field_bsupx_351 {
    margin-bottom: 12px;
}

._fieldNoMargin_bsupx_359 {
    margin-bottom: 0;
}

._fieldFlex_bsupx_367 {
    flex: 1;
}

._label_bsupx_375 {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-text-secondary);
    margin-bottom: 4px;
}

._required_bsupx_391 {
    color: var(--cm-error);
    margin-left: 2px;
}

._input_bsupx_401 {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-sm);
    font-size: 13px;
    color: var(--cm-text-primary);
    background: var(--cm-surface);
    transition: all var(--cm-transition);
    outline: none;
}

._input_bsupx_401:focus {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

._input_bsupx_401::placeholder {
    color: var(--cm-text-muted);
}

._inputError_bsupx_443 {
    border-color: var(--cm-error);
}

._inputError_bsupx_443:focus {
    border-color: var(--cm-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

._errorText_bsupx_461 {
    display: block;
    font-size: 11px;
    color: var(--cm-error);
    margin-top: 3px;
}

/* ── Search ── */
._searchWrapper_bsupx_477 {
    position: relative;
}

._searchIcon_bsupx_485 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cm-text-muted);
    pointer-events: none;
    z-index: 1;
}

._searchInput_bsupx_505 {
    padding-left: 32px;
}

/* ── Selected Chips ── */
._chipContainer_bsupx_515 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

._chip_bsupx_515 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 4px;
    border-radius: var(--cm-radius-full);
    background: var(--cm-primary-bg);
    border: 1px solid var(--cm-primary);
    font-size: 11px;
    font-weight: 600;
    color: var(--cm-primary-dark);
}

._chipAvatar_bsupx_555 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cm-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--cm-primary);
    flex-shrink: 0;
}

._chipAvatar_bsupx_555 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._chipRemove_bsupx_597 {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--cm-primary);
    display: flex;
    align-items: center;
    transition: color var(--cm-transition);
}

._chipRemove_bsupx_597:hover {
    color: var(--cm-error);
}

/* ── User List ── */

 ._userList_bsupx_631 {
  height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--cm-border);
  margin-bottom: 4px;
}

._userList_bsupx_631::-webkit-scrollbar {
    width: 4px;
}

._userList_bsupx_631::-webkit-scrollbar-thumb {
    background: var(--cm-border);
    border-radius: 2px;
}

._userList_bsupx_631::-webkit-scrollbar-thumb:hover {
    background: var(--cm-primary);
}

._userListEmpty_bsupx_671 {
    padding: 16px 0;
    text-align: center;
    font-size: 12px;
    color: var(--cm-text-muted);
}

._userItem_bsupx_685 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--cm-border-light);
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    transition: all var(--cm-transition);
}

._userItemSelected_bsupx_709 {
    background: var(--cm-primary-bg);
}

._userItem_bsupx_685:hover:not(._userItemSelected_bsupx_709) {
    background: var(--cm-primary-bg);
}

._userItemDisabled_bsupx_725 {
    cursor: not-allowed;
    opacity: 0.6;
}

._userAvatar_bsupx_735 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-primary-light);
    color: var(--cm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

._userAvatar_bsupx_735 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

._userInfo_bsupx_777 {
    flex: 1;
}

._userName_bsupx_785 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-text-primary);
}

._userRole_bsupx_797 {
    font-size: 11px;
    color: var(--cm-text-muted);
}

/* ── User Radio Button ── */
._userRadio_bsupx_809 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--cm-border);
    background: var(--cm-surface);
    flex-shrink: 0;
    transition: all var(--cm-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

._userRadioSelected_bsupx_835 {
    border-color: var(--cm-primary);
    background: var(--cm-primary);
}

._userRadioDot_bsupx_845 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
}

/* ── User Checkbox ── */
._userCheckbox_bsupx_861 {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--cm-border);
    background: var(--cm-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--cm-transition);
}

._userCheckboxSelected_bsupx_887 {
    border-color: var(--cm-primary);
    background: var(--cm-primary);
}

._userCheckbox_bsupx_861 svg {
    width: 10px;
    height: 10px;
}

._userCheckbox_bsupx_861 polyline {
    stroke: #ffffff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Submit Error ── */
._submitError_bsupx_923 {
    display: block;
    margin-bottom: 4px;
}

/* ── Divider ── */
._divider_bsupx_935 {
    border: none;
    border-top: 1px solid var(--cm-border);
    margin: 8px 0 12px;
}

/* ── Footer ── */
._footer_bsupx_949 {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0 12px;
}

._btnCancel_bsupx_963 {
    padding: 7px 18px;
    border-radius: var(--cm-radius-sm);
    border: 1px solid var(--cm-border);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-text-secondary);
    cursor: pointer;
    transition: all var(--cm-transition);
}

._btnCancel_bsupx_963:hover:not(:disabled) {
    background: var(--cm-border-light);
    color: var(--cm-text-primary);
}

._btnCancel_bsupx_963:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

._btnCreate_bsupx_1007 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 20px;
    border-radius: var(--cm-radius-sm);
    border: none;
    background: var(--cm-primary);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all var(--cm-transition);
}

._btnCreate_bsupx_1007:hover:not(:disabled) {
    background: var(--cm-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

._btnCreate_bsupx_1007:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Danger Button ── */
._btnDanger_bsupx_1065 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 20px;
    border-radius: var(--cm-radius-sm);
    border: 1px solid var(--cm-danger-border);
    background: var(--cm-danger-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--cm-danger);
    cursor: pointer;
    transition: all var(--cm-transition);
}

._btnDanger_bsupx_1065:hover:not(:disabled) {
    background: var(--cm-danger-hover);
    border-color: #F87171;
    transform: translateY(-1px);
}

._btnDanger_bsupx_1065:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

._btnSpinner_bsupx_1119 {
    margin-right: 6px;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    ._modalDialog_bsupx_61 {
        margin: 0.5rem;
    }

    ._header_bsupx_99 {
        padding: 14px 16px;
    }

    ._bodyContent_bsupx_227 {
        padding: 16px;
    }

    ._iconUploadWrapper_bsupx_237 {
        flex-direction: column;
        align-items: center;
    }

    ._fieldFlex_bsupx_367 {
        width: 100%;
    }

    ._footer_bsupx_949 {
        flex-direction: column-reverse;
    }

    ._btnCancel_bsupx_963,
    ._btnCreate_bsupx_1007,
    ._btnDanger_bsupx_1065 {
        width: 100%;
        justify-content: center;
    }
}

/* Add these styles to communication.module.css */

/* ── Leave Group Modal ── */
._leaveBackdrop_bsupx_1203 {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: _backdropIn_bsupx_1 0.18s ease;
}

._leaveModal_bsupx_1225 {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    animation: _modalIn_bsupx_1 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes _backdropIn_bsupx_1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes _modalIn_bsupx_1 {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

._leaveTitle_bsupx_1289 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

._leaveMessage_bsupx_1303 {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 24px;
}

._leaveMessage_bsupx_1303 strong {
    color: #1f2937;
}

._leaveActions_bsupx_1323 {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

._leaveCancelBtn_bsupx_1335 {
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.18s ease;
}

._leaveCancelBtn_bsupx_1335:hover:not(:disabled) {
    background: #f3f4f6;
    color: #1f2937;
}

._leaveCancelBtn_bsupx_1335:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

._leaveConfirmBtn_bsupx_1379 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 8px;
    border: 1px solid #fca5a5;
    background: #fee2e2;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.18s ease;
}

._leaveConfirmBtn_bsupx_1379:hover:not(:disabled) {
    background: #fecaca;
    border-color: #f87171;
}

._leaveConfirmBtn_bsupx_1379:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

._leaveSpinner_bsupx_1429 {
    margin-right: 6px;
}

@media (max-width: 480px) {
    ._leaveModal_bsupx_1225 {
        padding: 20px 16px;
        width: 90vw;
    }

    ._leaveActions_bsupx_1323 {
        flex-direction: column-reverse;
    }

    ._leaveCancelBtn_bsupx_1335,
    ._leaveConfirmBtn_bsupx_1379 {
        width: 100%;
        justify-content: center;
    }
}/* ============================================================
   Competency Framework Builder — page shell
   ============================================================ */

._page_qw4ih_9 {
    padding: 20px 24px 32px;
    background: var(--color-gray-50);
    min-height: 100%;
}

/* ─── Breadcrumb ──────────────────────────────────────────── */

._breadcrumb_qw4ih_25 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-gray-500);
    margin-bottom: 14px;
}

._breadcrumbSep_qw4ih_43 {
    color: var(--color-gray-400);
}

._breadcrumbActive_qw4ih_51 {
    color: var(--color-gray-900);
    font-weight: 500;
}

._breadcrumbCurrent_qw4ih_61 {
    color: var(--color-gray-900);
    font-weight: 500;
}

/* ─── Page header ─────────────────────────────────────────── */

._pageHeader_qw4ih_75 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 5px;
}

._pageTitle_qw4ih_91 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

._pageSubTitle_qw4ih_107,
._pageSub_qw4ih_107 {
    font-size: 11px;
    color: var(--color-gray-500);
    margin: 0 0 18px;
}

._headerActions_qw4ih_121 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

/* ============================================================
   Settings-style top-level tabs (Job Roles / Proficiency Standards)
   Uses global theme variables (var(--color-accent) / var(--gradient-primary))
   ============================================================ */

._settingsTabsHeader_qw4ih_145 {
    display: flex;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 18px;
}

._tabsHeading_qw4ih_161 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 10px 2px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

._tabsHeading_qw4ih_161:hover {
    color: var(--color-gray-900);
}

._activeTab_qw4ih_203 {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

._pageTabs_qw4ih_215 {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 18px;
}

._pageTabBtn_qw4ih_229 {
    background: none;
    border: none;
    padding: 10px 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

._pageTabBtn_qw4ih_229:hover {
    color: var(--color-gray-900);
}

._activePageTab_qw4ih_261 {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

._comingSoon_qw4ih_273 {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 60px 20px;
    text-align: center;
    color: var(--color-gray-400);
    font-size: 13px;
}

/* ============================================================
   Three-column layout: roles list | detail panel | skill levels
   ============================================================ */

._layout_qw4ih_301 {
    width: 100%;
}

._layoutMain_qw4ih_309 {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
}

@media (max-width: 1180px) {
    ._layoutMain_qw4ih_309 {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    ._layoutMain_qw4ih_309>*:nth-child(3) {
        display: none;
    }
}

@media (max-width: 860px) {
    ._layoutMain_qw4ih_309 {
        grid-template-columns: 1fr;
    }
}

/* Competency name should not wrap awkwardly */
._competencyNameCell_qw4ih_359 {
    font-weight: 500;
    white-space: nowrap;
}

/* Description column takes remaining space */
._descCell_qw4ih_371 {
    color: var(--color-gray-500);
    max-width: 320px;
}

/* Badge with dropdown chevron (matches screenshot) */
._levelBadge_qw4ih_383 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

._levelBadgeProficient_qw4ih_409 {
    background: var(--color-green-bg);
    color: var(--color-green);
    border-color: var(--color-green-border);
}

._levelBadgeAdvanced_qw4ih_421 {
    background: var(--color-blue-bg);
    color: var(--color-blue);
    border-color: var(--color-blue-border);
}

._levelBadgeIntermediate_qw4ih_433 {
    background: var(--color-yellow-bg);
    color: var(--color-yellow);
    border-color: var(--color-yellow-border);
}

._levelBadgeBeginner_qw4ih_445 {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    border-color: var(--color-gray-200);
}

._placeholderPanel_qw4ih_457 {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 48px 20px;
    text-align: center;
    color: var(--color-gray-400);
    font-size: 13px;
}

/* ─── Left column: Job Roles list ────────────────────────── */

._rolesPanel_qw4ih_481 {
    position: sticky;
    top: 16px;
    /* stays in view while the right table scrolls */
    align-self: start;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 16px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

._rolesPanelHeader_qw4ih_509 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

._rolesPanelTitle_qw4ih_525 {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    white-space: nowrap;
}


._roleSearchWrap_qw4ih_543 {
    position: relative;
    margin-bottom: 12px;
}

._roleSearchInput_qw4ih_553 {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 22px 6px 26px;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    font-size: 10px;
    outline: none;
}

._roleSearchInput_qw4ih_553:focus {
    border-color: var(--color-accent);
}

._roleSearchIcon_qw4ih_581 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: 13px;
    pointer-events: none;
}

._roleFilterIcon_qw4ih_601 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: 13px;
    cursor: pointer;
}

._roleList_qw4ih_621 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* matches CommonTable tableHeight="420px" */
    height: 420px;
    overflow-y: auto;
}

._roleItem_qw4ih_639 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

._roleItem_qw4ih_639:hover {
    background: var(--color-gray-50);
}

._roleItemActive_qw4ih_671 {
    background: var(--color-primary-lightest);
    border-left-color: var(--color-primary);
}

._roleItemName_qw4ih_681 {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._roleItemContent_qw4ih_699 {
    min-width: 0;
    flex: 1;
}

._roleItemActive_qw4ih_671 ._roleItemName_qw4ih_681 {
    color: var(--color-primary);
}

._roleItemMeta_qw4ih_717 {
    font-size: 10px;
    color: var(--color-gray-400);
    margin-top: 2px;
}

._roleActionBtn_qw4ih_729 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--color-gray-400);
    cursor: pointer;
}

._roleActionBtn_qw4ih_729:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

._roleActionBtnDanger_qw4ih_765:hover {
    color: var(--color-red-error);
}

._rolesFooter_qw4ih_773 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-gray-100);
    font-size: 11px;
    color: var(--color-gray-400);
    flex-wrap: wrap;
}

._rolesPagination_qw4ih_799 {
    display: flex;
    align-items: center;
    gap: 6px;
}

._rolesPageBtn_qw4ih_811 {
    border: none;
    background: none;
    color: var(--color-gray-500);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
}

._rolesPageBtn_qw4ih_811:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

._rolesPageBtnActive_qw4ih_839 {
    color: var(--color-primary);
    font-weight: 700;
}

/* ─── Middle column: Role detail panel ───────────────────── */

._detailPanel_qw4ih_853 {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 18px 20px;
    min-width: 0;
    overflow: hidden;
}

._detailHeader_qw4ih_871 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

._detailTitleRow_qw4ih_887 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

._detailTitle_qw4ih_887 {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

._statusBadge_qw4ih_915 {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-green-bg);
    color: var(--color-green);
    white-space: nowrap;
}

._detailMetaRow_qw4ih_935 {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

._detailMetaItem_qw4ih_953 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-gray-500);
}

._detailMetaIcon_qw4ih_969 {
    color: var(--color-gray-400);
    font-size: 14px;
    flex-shrink: 0;
}

._detailMetaLabel_qw4ih_981 {
    display: block;
    font-size: 10px;
    color: var(--color-gray-400);
    white-space: nowrap;
}

._detailMetaValue_qw4ih_995 {
    display: block;
    font-size: 9px;
    color: var(--color-gray-900);
    font-weight: 600;
    white-space: nowrap;
}

/* Sub-tabs inside a role's detail panel */

._detailSubTabs_qw4ih_1015 {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--color-gray-200);
    margin: 14px 0 16px;
    flex-wrap: wrap;
}

._detailSubTab_qw4ih_1015 {
    padding: 8px 2px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

._detailSubTabActive_qw4ih_1051 {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--gradient-primary);
}

._infoBanner_qw4ih_1063 {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-blue-bg);
    border: 1px solid var(--color-blue-border);
    color: var(--color-blue);
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

._infoBanner_qw4ih_1063 svg {
    flex-shrink: 0;
}

._tableSection_qw4ih_1097 {
    background: var(--color-white);
    border-radius: 10px;
    min-width: 0;
}

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

._sectionTitle_qw4ih_1127 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
    white-space: nowrap;
}

._sectionSub_qw4ih_1143 {
    font-size: 12px;
    color: var(--color-gray-500);
    margin: 2px 0 0;
}


/* ─── Competency table ───────────────────────────────────── */


._tableFooterRow_qw4ih_1163 td {
    font-weight: 700;
    color: var(--color-gray-900);
    text-align: left;
}

._competencyTable_qw4ih_1175 td:nth-last-child(2),
._competencyTable_qw4ih_1175 th:nth-last-child(2) {
    white-space: nowrap;
}

._competencyTable_qw4ih_1175 td:last-child,
._competencyTable_qw4ih_1175 th:last-child {
    white-space: nowrap;
}

/* Proficiency level badges inside the table */

._levelBadge_qw4ih_383 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

._levelBadgeProficient_qw4ih_409 {
    background: var(--color-green-bg);
    color: var(--color-green);
}

._levelBadgeAdvanced_qw4ih_421 {
    background: var(--color-blue-bg);
    color: var(--color-blue);
}

._levelBadgeIntermediate_qw4ih_433 {
    background: var(--color-yellow-bg);
    color: var(--color-yellow);
}

._levelBadgeBeginner_qw4ih_445 {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
}

._rowActionIcon_qw4ih_1261 {
    color: var(--color-gray-400);
    cursor: pointer;
    margin-right: 10px;
    font-size: 13px;
}

._rowActionIcon_qw4ih_1261:hover {
    color: var(--color-gray-900);
}

._rowActionIconDanger_qw4ih_1283:hover {
    color: var(--color-red-error);
}

/* ─── Right column: Skill Levels sidebar ─────────────────── */

._skillLevelsPanel_qw4ih_1295 {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 18px 16px;
    min-width: 0;
}

._skillLevelsTitle_qw4ih_1311 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 2px;
}

._skillLevelsSub_qw4ih_1325 {
    font-size: 11px;
    color: var(--color-gray-400);
    margin: 0 0 16px;
}

._skillLevelCard_qw4ih_1337 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-gray-100);
}

._skillLevelCard_qw4ih_1337:last-of-type {
    border-bottom: none;
}

._skillLevelDot_qw4ih_1361 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

._skillLevelDotBeginner_qw4ih_1377 {
    background: var(--color-green);
}

._skillLevelDotIntermediate_qw4ih_1385 {
    background: var(--color-yellow);
}

._skillLevelDotProficient_qw4ih_1393 {
    background: var(--color-blue);
}

._skillLevelDotAdvanced_qw4ih_1401 {
    background: var(--color-violet-dark);
}

._skillLevelDotExpert_qw4ih_1409 {
    background: var(--color-red-error);
}

._skillLevelName_qw4ih_1417 {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

._skillLevelDesc_qw4ih_1431 {
    font-size: 11.5px;
    color: var(--color-gray-500);
    margin: 2px 0 0;
    line-height: 1.4;
}

._manageSkillLevelsBtn_qw4ih_1445 {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-900);
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
}

._manageSkillLevelsBtn_qw4ih_1445:hover {
    background: var(--color-gray-100);
}

/* ============================================================
   Bulk selection bar (Proficiency Standards table)
   ============================================================ */

._bulkSelectedBar_qw4ih_1495 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-blue-bg);
    border: 1px solid var(--color-blue-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

._bulkBtnGroup_qw4ih_1521 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._empCell_qw4ih_1533 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._empAvatar_qw4ih_1545 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

._empAvatarFallback_qw4ih_1561 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    flex-shrink: 0;
}

._empName_qw4ih_1589 {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray-900);
}/* Container */
._container_1k3yj_3 {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100vh;
}

/* ===== PAGE HEADER ===== */
._pageHeader_1k3yj_21 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

._headerLeft_1k3yj_37 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

._pageTitle_1k3yj_51 {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

._pageSubtitle_1k3yj_67 {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

._searchBoxTop_1k3yj_81 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

._searchIconTop_1k3yj_111 {
  color: #94a3b8;
  font-size: 16px;
  flex-shrink: 0;
}

._searchInputTop_1k3yj_123 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  padding: 0;
}

._searchInputTop_1k3yj_123::placeholder {
  color: #cbd5e0;
}

._searchInputTop_1k3yj_123:focus {
  outline: none;
}

._keyboardHint_1k3yj_159 {
  font-size: 10px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  font-weight: 500;
}

/* ===== SUMMARY CARDS GRID ===== */
._summaryGrid_1k3yj_183 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

._summaryCard_1k3yj_195 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

._summaryCard_1k3yj_195:hover {
  border-color: #cbd5e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ===== MAIN CONTENT ===== */
._mainContent_1k3yj_229 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

._header_1k3yj_37 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
  flex-wrap: wrap;
}

._sectionTitle_1k3yj_269 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

._sectionSub_1k3yj_283 {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

._addBtn_1k3yj_295 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

._addBtn_1k3yj_295:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-sm);
}

._addBtn_1k3yj_295 svg {
  width: 14px;
  height: 14px;
}

/* ===== TABLE CONTENT ===== */
._employeeCell_1k3yj_351 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._avatarSmall_1k3yj_363 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

._empName_1k3yj_391 {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

._empId_1k3yj_405 {
  font-size: 9px;
  color: #94a3b8;
}

._moreSkillTag_1k3yj_415 {
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

._cellText_1k3yj_433 {
  font-size: 10px;
  color: #334155;
}

._proficiencyCell_1k3yj_443 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._proficiencyIcon_1k3yj_455 {
  color: #f59e0b;
  font-size: 13px;
}

._skillsCell_1k3yj_465 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

._skillTag_1k3yj_477 {
  background: #eef2ff;
  color: #4f46e5;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
}

._proficiencyBadge_1k3yj_495 {
  background: #c6f6d5;
  color: #22543d;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  display: inline-block;
}

._verificationBadge_1k3yj_515 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

._verificationVerified_1k3yj_537 {
  background: #c6f6d5;
  color: #22543d;
}

._verificationVerified_1k3yj_537 ._dot_1k3yj_547 {
  background: #48bb78;
}

._verificationPending_1k3yj_555 {
  background: #feebc8;
  color: #7c2d12;
}

._verificationPending_1k3yj_555 ._dot_1k3yj_547 {
  background: #ed8936;
}

._dot_1k3yj_547 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

._dateCell_1k3yj_589 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._dateText_1k3yj_601 {
  font-size: 10px;
  font-weight: 600;
  color: #0f172a;
}

._daysText_1k3yj_613 {
  font-size: 9px;
  color: #94a3b8;
}

._reminderBadge_1k3yj_623 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._reminderScheduled_1k3yj_645 {
  background: #bee3f8;
  color: #2c5282;
}

._reminderSent_1k3yj_655 {
  background: #c6f6d5;
  color: #22543d;
}

._reminderVerified_1k3yj_665 {
  background: #c6f6d5;
  color: #22543d;
}

/* ===== FILTER BAR ===== */
._filterBar_1k3yj_677 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

._filterField_1k3yj_697 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 140px;
  max-width: 160px;
  min-width: 120px;
}

._filterLabel_1k3yj_715 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._filterSelect_1k3yj_731 {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}

._filterSelect_1k3yj_731:hover {
  border-color: #cbd5e0;
}

._filterSelect_1k3yj_731:focus {
  border-color: #94a3b8;
}

._filterSearchField_1k3yj_777 {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 280px;
  min-width: 180px;
}

._filterSearchWrap_1k3yj_795 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSearchInput_1k3yj_807 {
  width: 100%;
  height: 28px;
  padding: 0 8px 0 28px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  color: #374151;
  outline: none;
  transition: border-color 0.2s ease;
}

._filterSearchInput_1k3yj_807::placeholder {
  color: #cbd5e0;
}

._filterSearchInput_1k3yj_807:focus {
  border-color: #94a3b8;
}

._filterSearchIcon_1k3yj_849 {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  pointer-events: none;
}

._daysText_1k3yj_613 {
  color: #f59e0b;
  font-weight: 600;
  font-size: 9px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  ._summaryGrid_1k3yj_183 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._searchBoxTop_1k3yj_81 {
    min-width: 260px;
  }
}

@media (max-width: 768px) {
  ._container_1k3yj_3 {
    padding: 10px;
    gap: 10px;
  }

  ._pageHeader_1k3yj_21 {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 4px;
  }

  ._pageTitle_1k3yj_51 {
    font-size: 18px;
  }

  ._pageSubtitle_1k3yj_67 {
    font-size: 12px;
  }

  ._searchBoxTop_1k3yj_81 {
    width: 100%;
    min-width: auto;
  }

  ._summaryGrid_1k3yj_183 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  ._summaryCard_1k3yj_195 {
    padding: 10px;
    gap: 6px;
  }

  ._summaryValue_1k3yj_971 {
    font-size: 18px;
  }

  ._summaryTitle_1k3yj_979 {
    font-size: 10px;
  }

  ._header_1k3yj_37 {
    padding: 10px;
    gap: 8px;
  }

  ._sectionTitle_1k3yj_269 {
    font-size: 13px;
  }

  ._sectionSub_1k3yj_283 {
    font-size: 10px;
    display: none;
  }
}

@media (max-width: 480px) {
  ._container_1k3yj_3 {
    padding: 8px;
    gap: 8px;
  }

  ._pageHeader_1k3yj_21 {
    flex-direction: column;
    gap: 10px;
  }

  ._pageTitle_1k3yj_51 {
    font-size: 16px;
  }

  ._pageSubtitle_1k3yj_67 {
    font-size: 11px;
  }

  ._searchBoxTop_1k3yj_81 {
    width: 100%;
    height: 32px;
  }

  ._searchInputTop_1k3yj_123 {
    font-size: 12px;
  }

  ._keyboardHint_1k3yj_159 {
    display: none;
  }

  ._summaryGrid_1k3yj_183 {
    grid-template-columns: 1fr;
  }

  ._summaryCard_1k3yj_195 {
    padding: 8px;
    gap: 6px;
  }

  ._summaryValue_1k3yj_971 {
    font-size: 16px;
  }

  ._summaryTitle_1k3yj_979 {
    font-size: 9px;
  }

  ._summaryIcon_1k3yj_1115 {
    width: 28px;
    height: 28px;
  }

  ._header_1k3yj_37 {
    flex-direction: column;
    align-items: stretch;
  }

  ._addBtn_1k3yj_295 {
    width: 100%;
    justify-content: center;
  }
}

._reminderCell_1k3yj_1147 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 600;
}

/* //bulkSelectedBar */
._bulkSelectedBar_1k3yj_1167 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
}

._bulkSelectedLeft_1k3yj_1189 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_1k3yj_1201 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_1k3yj_1229 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_1k3yj_1241 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_1k3yj_1253 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_1k3yj_1283 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1k3yj_1283:hover {
  background: #fef2f2;
}

._bulkDeselect_1k3yj_1301 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_1k3yj_1301:hover {
  background: #f1f5f9;
}

/* ===== SKILLS INVENTORY VIEW ===== */
._viewState_1k3yj_1339 {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 13px;
}

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

._viewBackBtn_1k3yj_1373 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

._viewBackBtn_1k3yj_1373:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._viewProfileCard_1k3yj_1413 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

._viewAvatar_1k3yj_1433 {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #eef2ff;
  flex-shrink: 0;
}

._viewProfileInfo_1k3yj_1451 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

._viewNameRow_1k3yj_1467 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._viewEmployeeName_1k3yj_1481 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

._viewEmpCode_1k3yj_1497 {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

._viewMetaGrid_1k3yj_1521 {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  color: #64748b;
  font-size: 11px;
}

._viewMetaGrid_1k3yj_1521 span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

._viewStatsGrid_1k3yj_1551 {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

._viewStatCard_1k3yj_1563 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

._viewStatIcon_1k3yj_1583 {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 16px;
  flex-shrink: 0;
}

._viewStatLabel_1k3yj_1609 {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

._viewStatValue_1k3yj_1621 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

._skillsCardsGrid_1k3yj_1635 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

._skillViewCard_1k3yj_1649 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

._skillCardTop_1k3yj_1673 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

._skillCardTitle_1k3yj_1687 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

._skillCategory_1k3yj_1705 {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

._skillStatusBadge_1k3yj_1717 {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

._skillStatusVerified_1k3yj_1735 {
  background: #dcfce7;
  color: #166534;
}

._skillStatusPending_1k3yj_1745 {
  background: #fef3c7;
  color: #92400e;
}

._skillStatusRejected_1k3yj_1755 {
  background: #fee2e2;
  color: #991b1b;
}

._skillLevelBlock_1k3yj_1765 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
}

._skillLevelValue_1k3yj_1785 {
  color: #4f46e5;
  font-size: 15px;
  font-weight: 800;
}

._skillLevelName_1k3yj_1797 {
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

._skillDetailGrid_1k3yj_1809 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  color: #64748b;
  font-size: 10px;
}

._skillDetailGrid_1k3yj_1809 strong {
  color: #0f172a;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

._skillCardFooter_1k3yj_1841 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
}

._skillCardFooter_1k3yj_1841 span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

._skillEvidenceLink_1k3yj_1879 {
  color: #4f46e5;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

._skillEvidenceLink_1k3yj_1879:hover {
  text-decoration: underline;
}

._viewEmptyState_1k3yj_1901 {
  padding: 32px 14px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1100px) {
  ._skillsCardsGrid_1k3yj_1635 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._viewMetaGrid_1k3yj_1521 {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 768px) {

  ._viewHeader_1k3yj_1361,
  ._viewProfileCard_1k3yj_1413 {
    align-items: flex-start;
  }

  ._viewHeader_1k3yj_1361,
  ._viewProfileCard_1k3yj_1413,
  ._viewNameRow_1k3yj_1467 {
    flex-direction: column;
  }

  ._viewStatsGrid_1k3yj_1551,
  ._skillsCardsGrid_1k3yj_1635 {
    grid-template-columns: 1fr;
  }

  ._viewMetaGrid_1k3yj_1521 {
    grid-template-columns: 1fr;
  }
}

._backBtn_1k3yj_1981 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--color-primary-lightest);
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

._backBtn_1k3yj_1981:hover {
  background: var(--color-primary-lightest);
  border-color: var(--color-primary-lighter);
  color: var(--color-primary);
}

._actionIcons_1k3yj_2023 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._editIcon_1k3yj_2035,
._deleteIcon_1k3yj_2037 {
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._editIcon_1k3yj_2035 {
  color: #2563eb;
}

._editIcon_1k3yj_2035:hover {
  color: #1d4ed8;
}

._deleteIcon_1k3yj_2037 {
  color: #dc2626;
}

._deleteIcon_1k3yj_2037:hover {
  color: #b91c1c;
}

._titleRow_1k3yj_2081 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._skillCardTitle_1k3yj_1687 {
  margin: 0;
}._page_f8ki0_1 {
  min-height: 100vh;
  background: #f5f8fd;
  color: #14213d;
  padding: 14px;
}

._pageHeader_f8ki0_15 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

._headerLeft_f8ki0_31 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

._pageTitle_f8ki0_45 {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

._pageSubtitle_f8ki0_61 {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

._searchBoxTop_f8ki0_75 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

._searchIconTop_f8ki0_105 {
  color: #94a3b8;
  font-size: 16px;
  flex-shrink: 0;
}

._searchInputTop_f8ki0_117 {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  padding: 0;
}

._searchInputTop_f8ki0_117::placeholder {
  color: #cbd5e0;
}

._searchInputTop_f8ki0_117:focus {
  outline: none;
}

._keyboardHint_f8ki0_153 {
  font-size: 10px;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  font-weight: 500;
}

._searchBox_f8ki0_75 {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 6px;
  padding: 0 10px;
  color: #8190a8;
}

._searchBox_f8ki0_75 input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #243b64;
  font-size: 10px;
}

._shell_f8ki0_217 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  margin-top: 12px;
}

._mainPanel_f8ki0_231 {
  min-width: 0;
}

._summaryGrid_f8ki0_239 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

._panel_f8ki0_253 {
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(24, 39, 75, 0.04);
}

._filterBar_f8ki0_267 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

._filterField_f8ki0_287 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 140px;
  max-width: 160px;
  min-width: 120px;
}

._filterLabel_f8ki0_305 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._filterSelect_f8ki0_321 {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease;
}

._filterSelect_f8ki0_321:hover {
  border-color: #cbd5e0;
}

._filterSelect_f8ki0_321:focus {
  border-color: #94a3b8;
}

._addBtn_f8ki0_367 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

._addBtn_f8ki0_367:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-sm);
}

._addBtn_f8ki0_367 svg {
  width: 14px;
  height: 14px;
}

._bulkSelectedBar_f8ki0_421 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
  flex-shrink: 0;
  flex-wrap: wrap;
}

._bulkSelectedLeft_f8ki0_443 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_f8ki0_455 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_f8ki0_483 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_f8ki0_495 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_f8ki0_507 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_f8ki0_537 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_f8ki0_537:hover {
  background: #fef2f2;
}

._bulkDeselect_f8ki0_555 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_f8ki0_555:hover {
  background: #f1f5f9;
}

._commonTableWrap_f8ki0_591 {
  min-width: 0;
}

._commonTableWrap_f8ki0_591 td strong,
._commonTableWrap_f8ki0_591 td small {
  display: block;
}

._commonTableWrap_f8ki0_591 td strong {
  color: #13223d;
  font-size: 10px;
  font-weight: 800;
}

._commonTableWrap_f8ki0_591 td small {
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 600;
}

._commonTableWrap_f8ki0_591 table {
  min-width: 1120px;
}

._tableWrap_f8ki0_643 {
  overflow: auto;
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
}

._tableWrap_f8ki0_643 table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

._tableWrap_f8ki0_643 th {
  height: 34px;
  padding: 0 12px;
  background: #f8fbff;
  color: #18243c;
  font-size: 9px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e8eef7;
}

._tableWrap_f8ki0_643 td {
  height: 47px;
  padding: 6px 12px;
  border-bottom: 1px solid #eef3f8;
  vertical-align: middle;
  font-size: 10px;
}

._tableWrap_f8ki0_643 tr:last-child td {
  border-bottom: 0;
}

._tableWrap_f8ki0_643 td strong,
._tableWrap_f8ki0_643 td small {
  display: block;
}

._tableWrap_f8ki0_643 td strong {
  color: #13223d;
  font-size: 10px;
  font-weight: 800;
}

._tableWrap_f8ki0_643 td small {
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 600;
}

._employee_f8ki0_753 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._employee_f8ki0_753 > span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #f97316);
  font-size: 11px;
  font-weight: 900;
}

._tags_f8ki0_789 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 190px;
}

._tags_f8ki0_789 span {
 
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

._tags_f8ki0_789 ._mutedTag_f8ki0_821 {
  background: #f1f5f9;
  color: #475569;
}

._matchLine_f8ki0_831 {
  min-width: 92px;
}

._matchLine_f8ki0_831 b {
  display: block;
  color: #13223d;
  font-size: 10px;
}

._matchLine_f8ki0_831 span {
  height: 5px;
  display: block;
  overflow: hidden;
  background: #e6edf5;
  border-radius: 99px;
  margin-top: 5px;
}

._matchLine_f8ki0_831 i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: inherit;
}

._score_f8ki0_883 {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #ef4444;
  color: #ef4444;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

._priority_f8ki0_907 {
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
}

._high_f8ki0_921 {
  color: #ef4444;
  background: #ffe7e7;
}
._medium_f8ki0_929 {
  color: #f59e0b;
  background: #fff3d6;
}
._low_f8ki0_937 {
  color: #16a34a;
  background: #e6f8ee;
}

._actionText_f8ki0_947 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #172b4d;
  font-size: 10px;
  font-weight: 800;
  max-width: 185px;
}

._actionText_f8ki0_947 svg {
  flex: 0 0 auto;
  color: #1267ff;
  font-size: 15px;
}

._moreIcon_f8ki0_979 {
  color: #64748b;
}

._tableFooter_f8ki0_987 {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #52627a;
  font-size: 10px;
  font-weight: 600;
  padding: 0 16px;
}

._pagination_f8ki0_1009 {
  display: flex;
  align-items: center;
  gap: 7px;
}

._pagination_f8ki0_1009 button {
  min-width: 27px;
  height: 27px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #314466;
  font-size: 10px;
  font-weight: 800;
}

._pagination_f8ki0_1009 button:first-child {
  min-width: 74px;
  border: 1px solid #e1e8f3;
  background: #fff;
}

._pagination_f8ki0_1009 ._activePage_f8ki0_1055 {
  background: #1267ff;
  color: #fff;
}

._sideRail_f8ki0_1065 {
  display: grid;
  gap: 10px;
}

._panel_f8ki0_253 {
  min-width: 0;
  padding: 14px;
}

._panelHeader_f8ki0_1085 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

._panelHeader_f8ki0_1085 h2 {
  margin: 0;
  color: #18243c;
  font-size: 12px;
  font-weight: 900;
}

._panelHeader_f8ki0_1085 button {
  border: 0;
  background: transparent;
  color: #1267ff;
  font-size: 9px;
  font-weight: 900;
}

._deptList_f8ki0_1131 {
  display: grid;
  gap: 10px;
}

._deptRow_f8ki0_1141 {
  display: grid;
  grid-template-columns: 78px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
}

._deptRow_f8ki0_1141 div {
  height: 5px;
  overflow: hidden;
  background: #e6edf5;
  border-radius: 99px;
}

._deptRow_f8ki0_1141 i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

._deptRow_f8ki0_1141 b {
  text-align: right;
  font-size: 10px;
}

._deptRed_f8ki0_1195 {
  background: #ef4444;
}
._deptOrange_f8ki0_1201 {
  background: #f97316;
}
._deptYellow_f8ki0_1207 {
  background: #facc15;
}
._deptGreen_f8ki0_1213 {
  background: #22c55e;
}

._missingHead_f8ki0_1221,
._missingRow_f8ki0_1223 {
  display: grid;
  grid-template-columns: 1fr 56px 58px;
  gap: 8px;
  align-items: center;
}

._missingHead_f8ki0_1221 {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  margin-bottom: 8px;
}

._missingRow_f8ki0_1223 {
  min-height: 24px;
  color: #27364f;
  font-size: 10px;
  font-weight: 700;
}

._missingRow_f8ki0_1223 b {
  text-align: center;
}

._donutWrap_f8ki0_1273 {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
}

._donut_f8ki0_1273 {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    #ef4444 0 27%,
    #f97316 27% 64%,
    #facc15 64% 87%,
    #22c55e 87% 100%
  );
  position: relative;
}

._donut_f8ki0_1273::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #fff;
}

._donut_f8ki0_1273 span {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
  color: #172b4d;
  font-size: 18px;
  font-weight: 900;
}

._donut_f8ki0_1273 small {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
}

._legend_f8ki0_1365 {
  display: grid;
  gap: 7px;
}

._legend_f8ki0_1365 p {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #334155;
  font-size: 10px;
  font-weight: 700;
}

._legend_f8ki0_1365 i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: inline-block;
}

._redDot_f8ki0_1411 {
  background: #ef4444;
}
._orangeDot_f8ki0_1417 {
  background: #f97316;
}
._yellowDot_f8ki0_1423 {
  background: #facc15;
}
._greenDot_f8ki0_1429 {
  background: #22c55e;
}
._bottomGrid_f8ki0_1435 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

._recommendationStrip_f8ki0_1447 {
  display: grid;
  grid-template-columns: repeat(5, minmax(84px, 1fr)) 28px;
  gap: 8px;
  align-items: stretch;
}

._recommendationCard_f8ki0_1461 {
  min-height: 96px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  padding: 10px 6px 8px;
  text-align: center;
}

._recommendationCard_f8ki0_1461 svg {
  color: #1267ff;
  font-size: 17px;
}

._recommendationCard_f8ki0_1461 strong {
  color: #172b4d;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 900;
}

._recommendationCard_f8ki0_1461 span,
._recommendationCard_f8ki0_1461 small {
  color: #64748b;
  font-size: 8px;
  font-weight: 800;
}

._recommendationCard_f8ki0_1461 b {
  margin-top: 3px;
  background: #ffe5e7;
  color: #ef4444;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 8px;
  font-weight: 900;
}

._nextBtn_f8ki0_1543 {
  align-self: center;
  width: 28px;
  height: 28px;
  border: 1px solid #e0e8f4;
  border-radius: 50%;
  background: #fff;
  color: #64748b;
}

@media (max-width: 1300px) {
  ._shell_f8ki0_217,
  ._bottomGrid_f8ki0_1435 {
    grid-template-columns: 1fr;
  }

  ._sideRail_f8ki0_1065 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  ._summaryGrid_f8ki0_239,
  ._sideRail_f8ki0_1065,
  ._bottomGrid_f8ki0_1435 {
    grid-template-columns: 1fr;
  }

  ._filterField_f8ki0_287 {
    max-width: none;
  }

  ._pageHeader_f8ki0_15 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchBoxTop_f8ki0_75 {
    min-width: 0;
    width: 100%;
  }

  ._recommendationStrip_f8ki0_1447 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
._tags_f8ki0_789 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

._skillTag_f8ki0_1651,
._mutedTag_f8ki0_821,
._moreTag_f8ki0_1655,
._moreTagMuted_f8ki0_1657 {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._skillTag_f8ki0_1651 {
  background: #eef4ff;
  color: #2563eb;
}

._mutedTag_f8ki0_821 {
  background: #f1f5f9;
  color: #475569;
}

._moreTag_f8ki0_1655 {
  background: #e2e8f0;
  color: #475569;
  cursor: default;
}
/* Required Skills (+N) */

/* Missing Competencies (+N) */
._moreTagMuted_f8ki0_1657 {
  background: #f1f5f9;
  color: #64748b;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

._deptHeader_f8ki0_1727 {
  display: grid;
  grid-template-columns: 78px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  text-transform: none;
}

._deptHeader_f8ki0_1727 span:first-child {
  grid-column: 1;
}

._deptHeader_f8ki0_1727 span:last-child {
  grid-column: 3;
  text-align: right;
}

._skillTag_f8ki0_1651 {
  background: #eaf2ff;
  color: #1267ff;
}

._mutedTag_f8ki0_821 {
  background: #f1f5f9;
  color: #475569;
}

._moreTag_f8ki0_1655 {
  background: #eef4ff;
  color: #2563eb;
}

._moreTagMuted_f8ki0_1657 {
  background: #f1f5f9;
  color: #475569;
}


:root {
  --cert-total: #7c3aed;
  --cert-active: #16a34a;
  --cert-expiring: #d97706;
  --cert-expired: #dc2626;
}

._dashboard_i0qp1_15 {
  min-height: 100vh;
  padding: 18px 20px 28px;
  background: #f7f9fd;
  color: #111827;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Top Header ── */
._topHeader_i0qp1_33 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

._topHeaderLeft_i0qp1_47 h1 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 3px;
  line-height: 1.2;
}

._topHeaderLeft_i0qp1_47 p {
  font-size: 10px;
  color: #7b8498;
  margin: 0;
}

._mainContent_i0qp1_75 {
  width: 100%;
}

/* ── Stat cards ── */
._statsRow_i0qp1_85 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

._statCard_i0qp1_99 {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e8edf3;
  transition: box-shadow 0.2s;
}

._statCard_i0qp1_99:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

._statCard_i0qp1_99._total_i0qp1_121 { background: #f5f3ff; }
._statCard_i0qp1_99._active_i0qp1_123 { background: #f0fdf4; }
._statCard_i0qp1_99._expiring_i0qp1_125 { background: #fffbeb; }
._statCard_i0qp1_99._expired_i0qp1_127 { background: #fef2f2; }

._statCardTop_i0qp1_131 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

._statIcon_i0qp1_145 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}

._statIcon_i0qp1_145 svg {
  width: 14px;
  height: 14px;
}

._statIcon_i0qp1_145._total_i0qp1_121 { color: #7c3aed; }
._statIcon_i0qp1_145._active_i0qp1_123 { color: #16a34a; }
._statIcon_i0qp1_145._expiring_i0qp1_125 { color: #d97706; }
._statIcon_i0qp1_145._expired_i0qp1_127 { color: #dc2626; }

._statLabel_i0qp1_187 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._statValue_i0qp1_207 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}

._statValue_i0qp1_207._total_i0qp1_121 { color: #7c3aed; }
._statValue_i0qp1_207._active_i0qp1_123 { color: #16a34a; }
._statValue_i0qp1_207._expiring_i0qp1_125 { color: #d97706; }
._statValue_i0qp1_207._expired_i0qp1_127 { color: #dc2626; }

._statFooter_i0qp1_231 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._statSubText_i0qp1_245 {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

._sparkline_i0qp1_259 {
  width: 60px;
  height: 20px;
}


._tableSection_i0qp1_271 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

._tableHeader_i0qp1_291 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_i0qp1_313 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_i0qp1_327 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}


._filterBar_i0qp1_341 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._filterField_i0qp1_363 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 120px;
  max-width: 180px;
  min-width: 100px;
}

._filterLabel_i0qp1_381 {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

._filterInputWrap_i0qp1_399 {
  position: relative;
  display: flex;
  align-items: center;
}

._filterSelect_i0qp1_411,
._filterInput_i0qp1_399 {
  width: 100%;
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  color: #374151;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.13s;
}

._filterSelect_i0qp1_411:focus,
._filterInput_i0qp1_399:focus {
  border-color: #94a3b8;
}

._filterClearX_i0qp1_455 {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background 0.12s;
}

._filterClearX_i0qp1_455:hover {
  background: #cbd5e1;
  color: #1e293b;
}

._filterClearX_i0qp1_455 svg {
  width: 8px;
  height: 8px;
}

._filterActions_i0qp1_511 {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}


._btn_i0qp1_527 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 0.13s, box-shadow 0.13s;
  font-family: inherit;
}

._btn_i0qp1_527 svg {
  width: 10px;
  height: 10px;
}

._btnPrimary_i0qp1_569 {
  background: #8b5cf6;
  color: #fff;
}

._btnPrimary_i0qp1_569:hover {
  background: #7c3aed;
  box-shadow: 0 2px 7px rgba(139, 92, 246, 0.38);
}

._btnSecondary_i0qp1_589 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}

._btnSecondary_i0qp1_589:hover {
  background: #f8fafc;
}

._filterClearBtn_i0qp1_609 {
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

._filterClearBtn_i0qp1_609:hover {
  background: #fef2f2 !important;
}


._certCell_i0qp1_629 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

._certIcon_i0qp1_641 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._certIcon_i0qp1_641 svg {
  width: 15px;
  height: 15px;
}

._certName_i0qp1_675 {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

._certIssuer_i0qp1_687 {
  font-size: 9px;
  color: #94a3b8;
  margin: 1px 0 4px;
}

._certIdChip_i0qp1_699 {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 2px 6px;
}

._competencyName_i0qp1_719 {
  font-size: 10px;
  font-weight: 600;
  color: #111827;
}

._competencyId_i0qp1_731 {
  font-size: 8px;
  color: #94a3b8;
}

._categoryTag_i0qp1_741 {
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

._categoryTag_i0qp1_741._general_i0qp1_759 {
  background: #dbeafe;
  color: #2563eb;
}

._categoryTag_i0qp1_741._technical_i0qp1_769 {
  background: #ffedd5;
  color: #ea580c;
}

._dateMain_i0qp1_779 {
  font-size: 10px;
  color: #374151;
  font-weight: 500;
}

._daysLeft_i0qp1_791 {
  font-size: 9px;
  color: #16a34a;
  font-weight: 600;
  margin-top: 2px;
}


._badge_i0qp1_807 {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: capitalize;
}

._badge_i0qp1_807._active_i0qp1_123 { background: #dcfce7; color: #16a34a; }
._badge_i0qp1_807._expiring_i0qp1_125 { background: #fef9c3; color: #ca8a04; }
._badge_i0qp1_807._expired_i0qp1_127 { background: #fee2e2; color: #dc2626; }
._badge_i0qp1_807._verified_i0qp1_835 { background: #dcfce7; color: #16a34a; }
._badge_i0qp1_807._underReview_i0qp1_837 { background: #fef3c7; color: #b45309; }

._verifyCell_i0qp1_841 {
  display: flex;
  /* flex-direction: column; */
  gap: 3px;
}

._verifySubText_i0qp1_853 {
  font-size: 8px;
  color: #94a3b8;
}


._actionsCell_i0qp1_865 {
  position: relative;
}

._kebabBtn_i0qp1_873 {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
}

._kebabBtn_i0qp1_873:hover {
  background: #f1f5f9;
  color: #475569;
}

._kebabBtn_i0qp1_873 svg {
  width: 14px;
  height: 14px;
}

._actionMenu_i0qp1_919 {
  position: absolute;
  right: 0;
  top: 28px;
  width: 130px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  z-index: 15;
  overflow: hidden;
}

._actionMenu_i0qp1_919 button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: #fff;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  text-align: left;
}

._actionMenu_i0qp1_919 button svg {
  width: 12px;
  height: 12px;
}

._actionMenu_i0qp1_919 button:hover {
  background: #f8fafc;
}

._actionMenu_i0qp1_919 ._deleteOption_i0qp1_993 {
  color: #dc2626;
  border-top: 1px solid #f1f5f9;
}

._actionMenu_i0qp1_919 ._deleteOption_i0qp1_993:hover {
  background: #fef2f2;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  ._statsRow_i0qp1_85 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  ._filterField_i0qp1_363 {
    flex: 1 1 150px;
    max-width: 200px;
  }
}

@media (max-width: 900px) {
  ._filterBar_i0qp1_341 {
    gap: 8px;
    padding: 10px 12px;
  }

  ._filterField_i0qp1_363 {
    flex: 1 1 140px;
    max-width: 180px;
    min-width: 90px;
  }

  ._filterActions_i0qp1_511 {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

@media (max-width: 700px) {
  ._statsRow_i0qp1_85 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  ._filterBar_i0qp1_341 {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  ._filterField_i0qp1_363 {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
  }

  ._filterActions_i0qp1_511 {
    flex: 1 1 auto;
    justify-content: stretch;
    gap: 6px;
  }

  ._filterActions_i0qp1_511 ._btn_i0qp1_527 {
    flex: 1;
    justify-content: center;
  }
}*,
*::before,
*::after {
  box-sizing: border-box;
}

._wrap_1xaoi_13 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  gap: 12px;
  font-size: 11px;
  color: #374151;
}

/* ── Header ── */
._header_1xaoi_37 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

._headerLeft_1xaoi_63 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._breadcrumb_1xaoi_75 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_1xaoi_75 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_1xaoi_75 strong {
  color: var(--color-primary);
}

._backBtn_1xaoi_109 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}

._backBtn_1xaoi_109:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

._title_1xaoi_151 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._headerActions_1xaoi_165 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
._btn_1xaoi_181 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._btnPrimary_1xaoi_215 {
  background: var(--gradient-primary);
  color: #fff;
}

._btnPrimary_1xaoi_215:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 7px rgba(245, 158, 11, 0.38);
}

._btnPrimary_1xaoi_215:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._btnSecondary_1xaoi_245 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

._btnSecondary_1xaoi_245:hover {
  background: #f3f4f6;
}


._formLayout_1xaoi_267 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  ._formLayout_1xaoi_267 {
    grid-template-columns: 1fr;
  }
}

._leftCol_1xaoi_293 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


._formCard_1xaoi_307 {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._sectionHeading_1xaoi_323 {
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-lightest);
}

/* ── Field grid ── */
._formGrid3_1xaoi_341 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

._formGrid2_1xaoi_355 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  ._formGrid3_1xaoi_341 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._formGrid3_1xaoi_341,
  ._formGrid2_1xaoi_355 {
    grid-template-columns: 1fr;
  }
}

/* ── Field group ── */
._formGroup_1xaoi_397 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._label_1xaoi_409 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._required_1xaoi_421 {
  color: #ef4444;
}

._input_1xaoi_429 {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  width: 100%;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._input_1xaoi_429:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._inputError_1xaoi_469 {
  border-color: #f87171 !important;
}

._textarea_1xaoi_477 {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color 0.13s;
}

._textarea_1xaoi_477:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._errorText_1xaoi_513 {
  font-size: 10px;
  color: #ef4444;
  margin-top: 2px;
}

._formGroup_1xaoi_397 .rs__control {
  min-height: 32px;
  border-radius: 10px;
  border-color: #e5e7eb;
  border-width: 1px;
  font-size: 12px;
  background: #fff;
  box-shadow: none;
  transition:
    border-color 0.13s,
    box-shadow 0.13s;
}

._formGroup_1xaoi_397 .rs__control:hover {
  border-color: var(--color-primary-light);
}

._formGroup_1xaoi_397 .rs__control--is-focused {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-lightest) !important;
}

._formGroup_1xaoi_397 .rs__option {
  padding: 8px 12px;
  font-size: 12px;
}

._formGroup_1xaoi_397 .rs__option--is-selected {
  background: var(--color-primary) !important;
  color: #fff !important;
}

._formGroup_1xaoi_397 .rs__option--is-focused {
  background: var(--color-primary-lightest) !important;
  color: #1f2937 !important;
}

._formGroup_1xaoi_397 .rs__option--is-selected.rs__option--is-focused {
  background: var(--color-primary) !important;
  color: #fff !important;
}

._formGroup_1xaoi_397 .rs__indicator-separator {
  display: none;
}

._formGroup_1xaoi_397 .rs__dropdown-indicator {
  color: #94a3b8;
  padding: 4px 8px;
  transition: color 0.13s;
}

._formGroup_1xaoi_397 .rs__control:hover .rs__dropdown-indicator {
  color: var(--color-primary);
}

._formGroup_1xaoi_397 .rs__value-container {
  padding: 0 6px;
}

._formGroup_1xaoi_397 .rs__placeholder {
  color: #94a3b8;
  font-size: 12px;
}

._formGroup_1xaoi_397 .rs__loading-indicator {
  color: var(--color-primary);
}

._input_1xaoi_429:disabled,
._formGroup_1xaoi_397 .rs__control--is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


._toastContainer_1xaoi_677 {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}._container_1q133_1 {
  padding: 20px;
  background: #f8fafc;
  min-height: 100vh;
}

/* ================= HEADER ================= */

._viewHeader_1q133_17 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

._backBtn_1q133_31 {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #374151;
  transition: 0.2s;
}

._backBtn_1q133_31:hover {
  background: #f3f4f6;
}

._pageTitle_1q133_67 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

._pageSubtitle_1q133_81 {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

/* ================= PROFILE ================= */

._profileCard_1q133_97 {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

._employeeSection_1q133_121 {
  display: flex;
  align-items: center;
  gap: 18px;
}

._profileImage_1q133_133 {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #eef2ff;
}

._employeeInfo_1q133_149 {
  display: flex;
  flex-direction: column;
}

._employeeName_1q133_159 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #111827;
}

._employeeCode_1q133_173 {
  margin-top: 6px;
  width: fit-content;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

._employeeMeta_1q133_195 {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: #6b7280;
  font-size: 14px;
}

._employeeMeta_1q133_195 span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ================= SUMMARY ================= */

._summaryGrid_1q133_231 {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  gap: 14px;
}

._summaryCard_1q133_243 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: 0.2s;
}

._summaryCard_1q133_243:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

._summaryCard_1q133_243 h2 {
  margin: 0;
  font-size: 30px;
  color: #2563eb;
}

._summaryCard_1q133_243 p {
  margin: 8px 0 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

/* ================= TABLE ================= */

._mainContent_1q133_301 {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

._header_1q133_315 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._sectionTitle_1q133_327 {
  margin: 0;
  font-size: 20px;
  color: #111827;
}

._sectionSub_1q133_339 {
  margin-top: 5px;
  color: #6b7280;
  font-size: 10px;
}

/* ================= BADGES ================= */

._categoryBadge_1q133_355 {
  background: #eaf2ff;
  color: #2563eb;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

._actionBadge_1q133_373 {
  background: #eff6ff;
  color: #2563eb;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ================= STATUS ================= */

._open_1q133_395 {
  background: #fef2f2;
  color: #dc2626;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

._closed_1q133_413 {
  background: #ecfdf5;
  color: #16a34a;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ================= SEVERITY ================= */

._severity_1q133_435 {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

._critical_1q133_449 {
  background: #fee2e2;
  color: #dc2626;
}

._high_1q133_459 {
  background: #fef3c7;
  color: #d97706;
}

._medium_1q133_469 {
  background: #ffedd5;
  color: #ea580c;
}

._low_1q133_479 {
  background: #dcfce7;
  color: #16a34a;
}

/* ================= EMPTY ================= */

._viewEmptyState_1q133_493 {
  padding: 40px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

._viewState_1q133_507 {
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._viewBackBtn_1q133_521 {
  margin-top: 15px;
  padding: 8px 16px;
  border: none;
  background: #2563eb;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
  ._profileCard_1q133_97 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._summaryGrid_1q133_231 {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  ._employeeSection_1q133_121 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._summaryGrid_1q133_231 {
    grid-template-columns: 1fr;
  }
}

._assignmentPanel_1q133_591 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

._assignmentTitle_1q133_605 {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #475569;
  text-transform: uppercase;
}

._assignmentGrid_1q133_621 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

._assignmentCard_1q133_633 {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
}

._assignmentHeader_1q133_647 {
  margin-bottom: 12px;
}

._folderBadge_1q133_655 {
  background: #eaf2ff;
  color: #2563eb;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

._assignmentBody_1q133_673 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._assignmentItem_1q133_685 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._assignmentItem_1q133_685 span {
  font-size: 11px;
  color: #94a3b8;
}

._assignmentItem_1q133_685 strong {
  display: block;
  width: 100%;
  min-width: 0;

  margin-top: 2px;

  color: #111827;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;

  white-space: normal;
  word-break: break-all;
}

._assignmentEmpty_1q133_739 {
  padding: 20px;
  text-align: center;
  color: #94a3b8;
}

._assignmentHeader_1q133_647 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

._assignmentLabel_1q133_765 {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

._folderBadge_1q133_655 {
  width: fit-content;
  background: #eaf2ff;
  color: #2563eb;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

._closeGapBtn_1q133_797 {
  background: var(--gradient-primary);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

._closeGapBtn_1q133_797:hover {
  background: var(--gradient-primary-hover);
}

._closeGapBtn_1q133_797:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._bulkSelectedBar_1q133_837 {
  margin-top: 0;
  margin-bottom: 8px;
  padding: 6px 14px;

  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  background: var(--color-primary-lightest);
  border-bottom: 1px solid var(--color-primary-lightest);
}

._bulkSelectedLeft_1q133_863 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._bulkCountBadge_1q133_875 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

._bulkSelectedText_1q133_903 {
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
}

._bulkBtnGroup_1q133_915 {
  display: flex;
  align-items: center;
  gap: 5px;
}

._bulkActionBtn_1q133_927 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 9px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

._bulkActionBtnDanger_1q133_957 {
  color: #dc2626;
  border-color: #fecaca;
}

._bulkActionBtnDanger_1q133_957:hover {
  background: #fef2f2;
}

._bulkDeselect_1q133_975 {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

._bulkDeselect_1q133_975:hover {
  background: #f1f5f9;
}

/* ================= ASSIGNMENT TABLE ================= */

._assignmentPanel_1q133_591 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

._assignmentTitle_1q133_605 {
  margin-bottom: 14px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

._assignmentTableWrapper_1q133_1045 {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

._assignmentTable_1q133_1045 {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  background: #ffffff;
}

._assignmentTable_1q133_1045 thead {
  background: #f8fafc;
}

._assignmentTable_1q133_1045 th {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

._assignmentTable_1q133_1045 td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f7;
  color: #111827;
  font-size: 10px;
  vertical-align: middle;
}

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

._assignmentTable_1q133_1045 tbody tr:hover {
  background: #f8fafc;
}

._assignmentFileName_1q133_1133 {
  max-width: 380px;
  white-space: normal;
  word-break: break-word;
  font-weight: 500;
}

._contentTypeBadge_1q133_1147 {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 14px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* ================= ASSIGNMENT STATUS ================= */

._assignmentStatus_1q133_1175 {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._assignmentCompleted_1q133_1195 {
  background: #ecfdf5;
  color: #16a34a;
}

._assignmentPending_1q133_1205 {
  background: #fff7ed;
  color: #ea580c;
}

/* ================= CIRCULAR PROGRESS ================= */

._circularProgressWrapper_1q133_1219 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

._circularProgress_1q133_1219 {
  --progress: 0deg;
  --progress-color: #22c55e;

  width: 50px;
  height: 50px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: conic-gradient(
    var(--progress-color) var(--progress),
    #e5e7eb var(--progress)
  );

  transition: background 0.3s ease;
}

._circularInner_1q133_1271 {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #334155;
  font-size: 9px;
  font-weight: 700;
}

/* 80% - 100% */

._progressGreen_1q133_1305 {
  --progress-color: #22c55e;
}

/* 40% - 79% */

._progressYellow_1q133_1317 {
  --progress-color: #f59e0b;
}

/* 0% - 39% */

._progressRed_1q133_1329 {
  --progress-color: #ef4444;
}

/* ================= EMPTY STATE ================= */

._assignmentEmpty_1q133_739 {
  padding: 24px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
}
._page_1gd5d_1 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 12px;
  padding: 10px 14px;
  background: #f4f7fb;
  font-family: inherit;
  font-size: 11px;
  color: #374151;
  box-sizing: border-box;
}

._page_1gd5d_1 *,
._page_1gd5d_1 *::before,
._page_1gd5d_1 *::after {
  box-sizing: border-box;
}

/* ---------- Header ---------- */
._headerRow_1gd5d_41 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-primary-lightest);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

._headerLeft_1gd5d_67 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._backBtn_1gd5d_79 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}

._backBtn_1gd5d_79:hover {
  background: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-light);
}

._breadcrumb_1gd5d_127 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

._breadcrumb_1gd5d_127 span:last-child {
  color: #1e293b;
  font-weight: 500;
}

._breadcrumb_1gd5d_127 strong {
  color: var(--color-primary);
}

._headerActions_1gd5d_161 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

._pageTitle_1gd5d_175 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

._tableSection_1gd5d_189 {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._tableHeader_1gd5d_211 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 11px 14px 9px;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

._sectionTitle_1gd5d_233 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 1px;
}

._sectionSub_1gd5d_247 {
  font-size: 10px;
  color: #94a3b8;
  margin: 0;
}

/* ---------- Form container ---------- */
._formSection_1gd5d_261 {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

._formHeader_1gd5d_277 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-primary-lightest);
  padding-bottom: 14px;
  margin-bottom: 14px;
  gap: 20px;
  flex-wrap: wrap;
}

._profileBlock_1gd5d_299 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}

._employeeAvatar_1gd5d_313,
._employeeAvatarFallback_1gd5d_315 {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-lightest);
  object-fit: cover;
}

._employeeAvatarFallback_1gd5d_315 {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
}

._employeeBlock_1gd5d_353 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._employeeName_1gd5d_365 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

._employeeCode_1gd5d_377 {
  font-size: 11px;
  color: #64748b;
}

._summaryFields_1gd5d_387 {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 10px 18px;
  flex: 1;
}

._summaryField_1gd5d_387 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

._summaryField_1gd5d_387 span {
  color: #94a3b8;
  font-size: 10px;
}

._summaryField_1gd5d_387 strong {
  overflow: hidden;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._commentsField_1gd5d_443 {
  grid-column: auto;
}

._periodText_1gd5d_451 {
  font-size: 11px;
  color: #94a3b8;
}

/* ---------- Form grid ---------- */
._formGrid_1gd5d_463 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 12px;
}

._formGroup_1gd5d_477 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._spanFull_1gd5d_489 {
  grid-column: 1 / -1;
}

._label_1gd5d_497 {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

._textInput_1gd5d_509,
._textareaInput_1gd5d_511 {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12px;
  color: #374151;
  background: #fff;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._textInput_1gd5d_509 {
  height: 32px;
  padding: 0 10px;
}

._textareaInput_1gd5d_511 {
  padding: 8px 10px;
}

._textInput_1gd5d_509:focus,
._textareaInput_1gd5d_511:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._textInput_1gd5d_509:disabled,
._textareaInput_1gd5d_511:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

._textareaInput_1gd5d_511 {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
._formFooter_1gd5d_595 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  flex-wrap: wrap;
  gap: 12px;
}

._navGroup_1gd5d_617 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._navInfo_1gd5d_629 {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

._actionGroup_1gd5d_641 {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
._btn_1gd5d_657 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
  white-space: nowrap;
}

._btn_1gd5d_657:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._btnAprrove_1gd5d_701 {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: var(--color-white);
  border: none;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
  font-size: 11px;
  height: 28px;
  padding: 0 10px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

._btnReject_1gd5d_727 {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: var(--color-white);
  border: none;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
  font-size: 11px;
  height: 28px;
  padding: 0 10px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

._btnSecondary_1gd5d_753 {
  background: #fff;
  color: #4b5563;
  border-color: #e5e7eb;
}

._btnSecondary_1gd5d_753:hover:not(:disabled) {
  background: #e5e7eb;
}

/* ---------- Status badge ---------- */
._statusBadge_1gd5d_775 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

._statusYellow_1gd5d_797 {
  background: #fef3c7;
  color: #92400e;
}

._statusGreen_1gd5d_807 {
  background: #dcfce7;
  color: #166534;
}

._statusRed_1gd5d_817 {
  background: #fee2e2;
  color: #991b1b;
}

._statusGrey_1gd5d_827 {
  background: #f3f4f6;
  color: #4b5563;
}

/* ---------- States ---------- */
._loadingState_1gd5d_839,
._emptyState_1gd5d_841 {
  text-align: center;
  padding: 80px 20px;
  color: #94a3b8;
  font-size: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  ._page_1gd5d_1 {
    padding: 8px 10px;
  }

  ._headerRow_1gd5d_41,
  ._formSection_1gd5d_261 {
    border-radius: 12px;
  }

  ._formSection_1gd5d_261 {
    padding: 18px;
  }

  ._formGrid_1gd5d_463 {
    grid-template-columns: 1fr;
  }

  ._summaryFields_1gd5d_387 {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._formFooter_1gd5d_595 {
    flex-direction: column;
    align-items: stretch;
  }

  ._actionGroup_1gd5d_641 {
    justify-content: flex-end;
  }
}

@media (max-width: 440px) {
  ._summaryFields_1gd5d_387 {
    grid-template-columns: 1fr;
  }

  ._commentsField_1gd5d_443 {
    grid-column: auto;
  }
}
._btnPrimary_1gd5d_941 {
  background: var(--gradient-primary);
  color: #fff;
}
._btnPrimary_1gd5d_941:hover {
  background: var(--gradient-primary-hover);
  box-shadow: var(--shadow-primary-sm);
}

._btn_1gd5d_657 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition:
    background 0.13s,
    box-shadow 0.13s;
}

._ratingInput_1gd5d_993 {
  position: relative;
}

._ratingInput_1gd5d_993 input {
  padding-right: 45px;
}

._ratingSuffix_1gd5d_1009 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-weight: 600;
}
._certViewPage_16f9e_1 {
  min-height: 100vh;
  /* padding: 16px 18px 28px; */
  padding: 16px 2px 28px;
  background: #f4f7fb;
  color: #0d1938;
  font-family: "Segoe UI", Arial, sans-serif;
}

._certViewToolbar_16f9e_19 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* max-width: 1180px; */
  /* margin: 0 auto 14px; */
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

._certViewToolbarLeft_16f9e_55 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._certViewBackButton_16f9e_69,
._certViewGhostButton_16f9e_71,
._certViewPrimaryButton_16f9e_73 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}

._certViewBackButton_16f9e_69 {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 7px;
  background: #eef3fb;
  color: #13275a;
}

._certViewBackButton_16f9e_69:hover,
._certViewGhostButton_16f9e_71:hover,
._certViewPrimaryButton_16f9e_73:hover {
  transform: translateY(-1px);
}

._certViewBreadcrumb_16f9e_131 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #6b7280;
  font-size: 11px;
}

._certViewBreadcrumb_16f9e_131 strong {
  color: #b98116;
}

._certViewPageTitle_16f9e_157 {
  margin: 1px 0 0;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
}

._certViewActions_16f9e_171 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._certViewGhostButton_16f9e_71,
._certViewPrimaryButton_16f9e_73 {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 11px;
}

._certViewGhostButton_16f9e_71 {
  background: #ffffff;
  color: #344057;
  border: 1px solid #d8e0eb;
}

._certViewPrimaryButton_16f9e_73 {
  color: #ffffff;
  background: linear-gradient(135deg, #c88c22, #e8b947);
  box-shadow: 0 8px 18px rgba(200, 140, 34, 0.22);
}

/* .certViewStage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
} */
 ._certViewStage_16f9e_225 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
._certViewCard_16f9e_259 {
  position: relative;
  width: 1120px;
  height: 720px;
  min-width: 1120px;
  min-height: 720px;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;

  background:
    radial-gradient(
      circle at 54% 38%,
      rgba(18, 39, 90, 0.05) 0 1px,
      transparent 1px 100%
    ),
    linear-gradient(
      135deg,
      #fffefe 0%,
      #fdfdfb 52%,
      #fff8e8 100%
    );

  background-size:
    18px 18px,
    auto;
  border: 12px solid #323842;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

._certViewCard_16f9e_259::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 2px solid #d99b25;
  pointer-events: none;
}

._certViewCard_16f9e_259::after {
  content: "";
  position: absolute;
  inset: 23px;
  z-index: 1;
  border: 1px solid rgba(217, 155, 37, 0.7);
  pointer-events: none;
}

._certViewLoading_16f9e_355 {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #13275a;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

._certViewCornerTopLeft_16f9e_389,
._certViewCornerTopRight_16f9e_391,
._certViewCornerBottomLeft_16f9e_393,
._certViewCornerBottomRight_16f9e_395 {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  pointer-events: none;
}

._certViewCornerTopLeft_16f9e_389 {
  top: 24px;
  left: 24px;
  border-top: 4px double #d99b25;
  border-left: 4px double #d99b25;
}

._certViewCornerTopRight_16f9e_391 {
  top: 24px;
  right: 24px;
  border-top: 4px double #d99b25;
  border-right: 4px double #d99b25;
}

._certViewCornerBottomLeft_16f9e_393 {
  bottom: 24px;
  left: 24px;
  border-bottom: 4px double #d99b25;
  border-left: 4px double #d99b25;
}

._certViewCornerBottomRight_16f9e_395 {
  right: 24px;
  bottom: 24px;
  border-right: 4px double #d99b25;
  border-bottom: 4px double #d99b25;
}

._certViewSweepLeft_16f9e_467,
._certViewSweepRight_16f9e_469 {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

._certViewSweepLeft_16f9e_467 {
  top: -88px;
  left: -136px;
  width: 360px;
  height: 500px;
  border-radius: 0 0 90% 0;
  background:
    linear-gradient(
      120deg,
      transparent 0 23%,
      #ba7f17 24%,
      #f2cc65 27%,
      #13264f 29% 71%,
      transparent 72%
    ),
    #13264f;
  transform: rotate(14deg);
  box-shadow: 18px 0 0 rgba(216, 165, 50, 0.42);
}

._certViewSweepLeft_16f9e_467::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: 52px;
  width: 38px;
  height: 470px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4c7, #b87414 46%, #f5d57d);
  transform: rotate(11deg);
}

._certViewSweepRight_16f9e_469 {
  right: -136px;
  bottom: -118px;
  width: 380px;
  height: 420px;
  border-radius: 90% 0 0 0;
  background:
    linear-gradient(
      304deg,
      transparent 0 25%,
      #b87515 26%,
      #f5d57d 29%,
      #13264f 31% 74%,
      transparent 75%
    ),
    #13264f;
  transform: rotate(-12deg);
  box-shadow: -18px 0 0 rgba(216, 165, 50, 0.46);
}

._certViewSweepRight_16f9e_469::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 12px;
  width: 38px;
  height: 420px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4c7, #b87414 48%, #f5d57d);
  transform: rotate(28deg);
}

._certViewRibbon_16f9e_609 {
  position: absolute;
  top: 23px;
  right: 76px;
  z-index: 5;
  width: 82px;
  height: 176px;
  display: flex;
  justify-content: center;
  padding-top: 54px;
  background: linear-gradient(180deg, #13264f, #08152f);
  border: 2px solid #d99b25;
  border-bottom: 0;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.22);
}

._certViewRibbon_16f9e_609::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -31px;
  width: calc(100% + 4px);
  height: 32px;
  background:
    linear-gradient(135deg, transparent 49%, #08152f 50%) left,
    linear-gradient(225deg, transparent 49%, #08152f 50%) right;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  border-left: 2px solid #d99b25;
  border-right: 2px solid #d99b25;
}

._certViewRibbonMedal_16f9e_673 {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #ffffff;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #f7d66a 0 29%,
    #c88c22 30% 48%,
    transparent 50%
  );
}

/* .certViewRibbonMedal::before,
.certViewRibbonMedal::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 21px;
  height: 40px;
  border: 3px solid #d99b25;
  border-right: 0;
  border-bottom: 0;
  border-radius: 50% 0 0 0;
}

.certViewRibbonMedal::before {
  left: -14px;
  transform: translateY(-50%) rotate(-36deg);
} */

._certViewRibbonMedal_16f9e_673::after {
  right: -14px;
  transform: translateY(-50%) rotate(144deg);
}

._certViewRibbonMedal_16f9e_673 svg {
  position: relative;
  z-index: 3;
  font-size: 20px;
}

._certViewInner_16f9e_765 {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 720px;
  /* min-height: 720px; */
  padding: 54px 92px 42px;
  text-align: center;
}

._certViewBrand_16f9e_789 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #102453;
  font-weight: 800;
  text-align: left;
}

._certViewBrandIcon_16f9e_809 {
  display: grid;
  place-items: center;
  width: 38px;
  height: 32px;
  color: #1266f1;
  font-size: 25px;
}

._certViewBrand_16f9e_789 span {
  display: block;
  line-height: 1;
  font-size: 18px;
}

._certViewBrand_16f9e_789 small {
  display: block;
  margin-top: 3px;
  color: #13264f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

._certViewTitleBlock_16f9e_857 h2 {
  margin: 0;
  color: #101f48;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 10px;
}

._certViewCompletionLine_16f9e_877 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

._certViewCompletionLine_16f9e_877 span {
  width: 116px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d99b25);
}

._certViewCompletionLine_16f9e_877 span:last-child {
  background: linear-gradient(90deg, #d99b25, transparent);
}

._certViewCompletionLine_16f9e_877 p {
  margin: 0;
  color: #d99b25;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 8px;
}

._certViewStatement_16f9e_929 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  color: #172348;
}

._certViewStatement_16f9e_929 p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 4px;
}

._certViewFlourish_16f9e_957 {
  width: 44px;
  height: 12px;
  background:
    radial-gradient(circle at 50% 50%, #d99b25 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, #d99b25, transparent);
  background-repeat: no-repeat;
  background-position: center;
}

._certViewRecipientBlock_16f9e_977 {
  width: min(100%, 650px);
  margin-top: 14px;
}

._certViewRecipientBlock_16f9e_977 h3 {
  margin: 0;
  color: #101f48;
  font-family: "Brush Script MT", "Segoe Script", cursive !important;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

._certViewRecipientRule_16f9e_1005 {
  width: min(100%, 430px);
  height: 1px;
  margin: 8px auto 9px;
  background: linear-gradient(90deg, transparent, #d99b25, transparent);
}

._certViewRecipientBlock_16f9e_977 p {
  margin: 0;
  color: #7a8191;
  font-size: 13px;
}

._certViewCourseBadge_16f9e_1031 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 420px;
  max-width: 100%;
  min-height: 42px;
  margin-top: 14px;
  padding: 8px 46px;
  color: #ffffff;
  background: linear-gradient(180deg, #172b5d, #08152f);
  border: 1px solid #d99b25;
  border-radius: 6px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 0 rgba(217, 155, 37, 0.45);
}

._certViewCourseBadge_16f9e_1031::before,
._certViewCourseBadge_16f9e_1031::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  background: #fffefd;
  border: 1px solid #d99b25;
  transform: translateY(-50%) rotate(45deg);
}

._certViewCourseBadge_16f9e_1031::before {
  left: -14px;
}

._certViewCourseBadge_16f9e_1031::after {
  right: -14px;
}

._certViewCourseBadge_16f9e_1031 svg {
  position: relative;
  z-index: 2;
  color: #f4cf64;
  font-size: 16px;
}

._certViewCourseBadge_16f9e_1031 span {
  position: relative;
  z-index: 2;
}

._certViewIssuedBy_16f9e_1137 {
  margin: 18px 0 0;
  color: #363d4e;
  font-size: 14px;
  font-weight: 600;
}

._certViewIssuedBy_16f9e_1137 strong {
  color: #102453;
  font-weight: 900;
}

._certViewMetaGrid_16f9e_1161 {
  width: min(100%, 870px);
  margin-top: 18px;
}

._certViewMetaItem_16f9e_1171 {
  height: 100%;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 10px;
  border-right: 1px solid rgba(217, 155, 37, 0.52);
}

._certViewMetaGrid_16f9e_1161 > div:last-child ._certViewMetaItem_16f9e_1171 {
  border-right: 0;
}

._certViewMetaIcon_16f9e_1203 {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
  color: #0e2b68;
  background: #f5f8ff;
  border: 1px solid #cbd8ee;
  border-radius: 50%;
  font-size: 16px;
}

._certViewMetaItem_16f9e_1171 span {
  color: #1f2937;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

._certViewMetaItem_16f9e_1171 strong {
  max-width: 100%;
  color: #091b44;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

._certViewMetaItem_16f9e_1171 small {
  color: #22a447;
  font-size: 9px;
  font-weight: 800;
}

._certViewMetaBlue_16f9e_1273 {
  color: #005dff !important;
}

._certViewFooter_16f9e_1281 {
  width: min(100%, 760px);
  margin-top: auto;
  padding-top: 18px;
}

._certViewSignature_16f9e_1293 {
  text-align: center;
}

._certViewSignatureMark_16f9e_1301 {
  color: #111827;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 27px;
  line-height: 1;
  transform: rotate(-7deg);
}

._certViewSignatureLine_16f9e_1317 {
  width: 180px;
  height: 1px;
  margin: 8px auto 6px;
  background: #d99b25;
}

._certViewSignature_16f9e_1293 p {
  margin: 0;
  color: #344057;
  font-size: 11px;
}

._certViewSignature_16f9e_1293 strong {
  display: block;
  margin-top: 2px;
  color: #102453;
  font-size: 12px;
}

._certViewSeal_16f9e_1357 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 94px;
  height: 94px;
  margin: 0 auto;
  color: #f9d360;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      #13264f 0 42%,
      #091630 43% 58%,
      transparent 59%
    ),
    repeating-conic-gradient(#d99b25 0deg 8deg, #7b520d 8deg 14deg);
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);
}

._certViewSeal_16f9e_1357 svg {
  margin-bottom: 3px;
  color: #f9d360;
  font-size: 16px;
}

._certViewSeal_16f9e_1357 span {
  color: #f9d360;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
}

._certViewQrWrap_16f9e_1427 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

._certViewQr_16f9e_1427 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  width: 82px;
  height: 82px;
  padding: 6px;
  background: #ffffff;
  border: 2px solid #d99b25;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12);
}

._certViewQr_16f9e_1427 span {
  background: transparent;
}

._certViewQrDark_16f9e_1469 {
  background: #111827 !important;
}

._certViewQrWrap_16f9e_1427 p {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  color: #1f2937;
  font-size: 9px;
  font-weight: 700;
}

._pdfCard_16f9e_1497 {
  width: 1120px !important;
  height: 720px !important;

  min-width: 1120px !important;
  min-height: 720px !important;

  max-width: 1120px !important;
  max-height: 720px !important;

  overflow: hidden;
}

/* @page {
  size: A4 portrait;
  margin: 0;
}
@page {
  size: A4 portrait;
  margin: 0;
} */

@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  ._certViewPage_16f9e_1 {
    padding: 0 !important;
    background: #fff !important;
  }

  ._certViewToolbar_16f9e_19 {
    display: none !important;
  }

  ._certViewStage_16f9e_225 {
    display: flex;
    justify-content: center;
  }

  ._certViewCard_16f9e_259 {
    width: 210mm !important;
    height: 227mm !important;
    max-width: 210mm !important;
    max-height: 297mm !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    page-break-after: avoid;
    page-break-inside: avoid;
    overflow: hidden !important;
  }
}

@media (max-width: 991px) {
  ._certViewCard_16f9e_259 {
    min-height: 680px;
  }

  ._certViewInner_16f9e_765 {
    min-height: 680px;
    padding: 48px 56px 34px;
  }

  ._certViewTitleBlock_16f9e_857 h2 {
    font-size: 45px;
    letter-spacing: 8px;
  }

  ._certViewCompletionLine_16f9e_877 span {
    width: 76px;
  }

  ._certViewCompletionLine_16f9e_877 p {
    font-size: 14px;
    letter-spacing: 6px;
  }

  ._certViewRecipientBlock_16f9e_977 h3 {
    font-size: 50px;
  }

  /* .certViewRibbon {
    right: 58px;
    width: 70px;
    height: 150px;
  }

  .certViewRibbon::after {
    bottom: -27px;
    height: 28px;
  } */
}

@media (max-width: 767px) {
  ._certViewPage_16f9e_1 {
    padding: 12px 10px 22px;
  }

  ._certViewToolbar_16f9e_19 {
    align-items: stretch;
  }

  ._certViewToolbarLeft_16f9e_55,
  ._certViewActions_16f9e_171 {
    width: 100%;
  }

  ._certViewActions_16f9e_171 button {
    flex: 1 1 0;
  }

  ._certViewCard_16f9e_259 {
    min-height: auto;
    border-width: 8px;
  }

  ._certViewCard_16f9e_259::before {
    inset: 12px;
  }

  ._certViewCard_16f9e_259::after {
    inset: 16px;
  }

  ._certViewInner_16f9e_765 {
    min-height: auto;
    padding: 86px 24px 30px;
  }

  ._certViewSweepLeft_16f9e_467 {
    top: -118px;
    left: -168px;
    opacity: 0.9;
  }

  ._certViewSweepRight_16f9e_469 {
    right: -190px;
    bottom: -178px;
    opacity: 0.9;
  }

  ._certViewRibbon_16f9e_609 {
    top: 17px;
    right: 34px;
    width: 56px;
    height: 114px;
    padding-top: 36px;
  }

  ._certViewRibbon_16f9e_609::after {
    bottom: -21px;
    height: 22px;
  }

  ._certViewRibbonMedal_16f9e_673 {
    width: 38px;
    height: 38px;
  }

  ._certViewRibbonMedal_16f9e_673::before,
  ._certViewRibbonMedal_16f9e_673::after {
    display: none;
  }

  ._certViewBrand_16f9e_789 {
    margin-right: 72px;
  }

  ._certViewTitleBlock_16f9e_857 h2 {
    font-size: 34px;
    letter-spacing: 5px;
  }

  ._certViewCompletionLine_16f9e_877 {
    gap: 8px;
  }

  ._certViewCompletionLine_16f9e_877 span {
    width: 38px;
  }

  ._certViewCompletionLine_16f9e_877 p {
    font-size: 12px;
    letter-spacing: 4px;
  }

  ._certViewStatement_16f9e_929 {
    gap: 9px;
  }

  ._certViewStatement_16f9e_929 p {
    font-size: 11px;
    letter-spacing: 2px;
  }

  ._certViewFlourish_16f9e_957 {
    width: 26px;
  }

  ._certViewRecipientBlock_16f9e_977 h3 {
    font-size: 42px;
  }

  ._certViewCourseBadge_16f9e_1031 {
    min-width: 0;
    width: calc(100% - 24px);
    padding: 8px 22px;
    font-size: 15px;
  }

  ._certViewIssuedBy_16f9e_1137 {
    font-size: 12px;
  }

  ._certViewMetaItem_16f9e_1171 {
    min-height: 92px;
    border-right: 0;
  }

  ._certViewFooter_16f9e_1281 {
    margin-top: 10px;
  }
}

@media (max-width: 420px) {
  ._certViewInner_16f9e_765 {
    padding: 82px 18px 28px;
  }

  ._certViewBrand_16f9e_789 {
    align-self: flex-start;
    margin-right: 56px;
  }

  ._certViewBrand_16f9e_789 span {
    font-size: 15px;
  }

  ._certViewBrand_16f9e_789 small {
    font-size: 10px;
  }

  ._certViewTitleBlock_16f9e_857 h2 {
    font-size: 27px;
    letter-spacing: 3px;
  }

  ._certViewCompletionLine_16f9e_877 p {
    letter-spacing: 2px;
  }

  ._certViewStatement_16f9e_929 {
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
  }

  ._certViewRecipientBlock_16f9e_977 h3 {
    font-size: 36px;
  }

  ._certViewRecipientBlock_16f9e_977 p {
    font-size: 12px;
  }

  ._certViewMetaGrid_16f9e_1161 {
    margin-top: 14px;
  }
}
:root {
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-light),
    var(--color-primary)
  );
}

._learningPage_j2ayj_17 {
  min-height: 100vh;
  background: #f6f8fc;
  color: #111827;
  padding: 0px 18px 32px;
}

._backBtn_j2ayj_31 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--color-primary-lightest) !important;
  background: #fff;
  color: #6b7280 !important;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

._backBtn_j2ayj_31:hover {
  background: var(--color-primary-lightest) !important;
  border-color: var(--color-primary-lighter) !important;
  color: var(--color-primary) !important;
}

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

._viewBackBtn_j2ayj_85 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

._viewBackBtn_j2ayj_85:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

._pageHeading_j2ayj_125 {
  margin-bottom: 14px;
}

._pageHeading_j2ayj_125 h2 {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
}

._breadcrumb_j2ayj_147 {
  display: flex;
  gap: 9px;
  color: #65758b;
  font-size: 11px;
  font-weight: 600;
}

._heroCard_j2ayj_163,
._curriculumCard_j2ayj_165,
._sideCard_j2ayj_167 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

._heroCard_j2ayj_163 {
  padding: 16px;
}

._courseImage_j2ayj_189 {
  min-height: 200px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: #07111f;
}

._courseImage_j2ayj_189 img {
  margin-top: 15px;
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

._courseImage_j2ayj_189::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(2, 8, 23, 0.42));
}

._playCircle_j2ayj_235 {
  width: 34px;
  height: 34px;
  position: absolute;
  left: 14px;
  bottom: 14px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(2, 8, 23, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 3;
}

._courseDetails_j2ayj_265 h3 {
  margin: 5px 0 8px;
  margin-bottom: 2px !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

._instructor_j2ayj_281,
._description_j2ayj_283 {
  color: #52637a;
  font-size: 10px !important;
  margin-bottom: 5px !important;
}

._instructor_j2ayj_281 span {
  color: #006dff;
  font-weight: 600;
  font-size: 10px !important;
}

._progressHead_j2ayj_307,
._resumeTop_j2ayj_309,
._cardHead_j2ayj_311 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._resumeTop_j2ayj_309 strong {
  font-size: 10px !important;
}

._resumeTop_j2ayj_309 span {
  font-size: 10px !important;
}

._timeperct_j2ayj_339 {
  font-size: 9px !important;
}

._instructorAvatar_j2ayj_347 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

._instructorLabel_j2ayj_361 {
  font-size: 11px;
  /* margin-left: 10px; */
}

._instructorLabel_j2ayj_361 strong {
  font-size: 11px;
  font-weight: 400;
  color: #1f2937;
}

._progressHead_j2ayj_307 {
  margin-top: 5px;
  color: #111827;
  font-size: 10px !important;
}

._progressHead_j2ayj_307 strong {
  color: #ff0d73;
  font-size: 10px !important;
}

._progressHead_j2ayj_307 span {
  color: #1f2937;
  font-weight: 400;
  font-size: 10px !important;
}

._progressTrack_j2ayj_417,
._resumeProgress_j2ayj_419 {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f7;
}

._progressTrack_j2ayj_417 {
  margin-top: 8px;
}

._progressFill_j2ayj_441 {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ff0d73;
  transition: width 0.3s ease;
}

._width0_j2ayj_457 {
  width: 0%;
}

._width20_j2ayj_465 {
  width: 20%;
}

._width38_j2ayj_473 {
  width: 38%;
}

._width45_j2ayj_481 {
  width: 45%;
}

._width60_j2ayj_489 {
  width: 60%;
}

._width72_j2ayj_497 {
  width: 72%;
}

._width100_j2ayj_505 {
  width: 100%;
}

._actionStack_j2ayj_513 {
  display: grid;
  gap: 12px;
  align-content: end;
  height: 100%;
}

._primaryBtn_j2ayj_527,
._outlineBtn_j2ayj_529 {
  padding: 6px;
  border-radius: 6px;
  border: 1px solid #ff0d73;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

._primaryBtn_j2ayj_527 {
  background: #ff0d73;
  color: #fff;
}

._outlineBtn_j2ayj_529 {
  background: #fff;
  color: #ff0d73;
}

._primaryBtn_j2ayj_527:hover,
._outlineBtn_j2ayj_529:hover {
  transform: translateY(-1px);
}

._courseMetaRow_j2ayj_591 {
  margin-top: 5px !important;
}

._metaItem_j2ayj_599 {
  /* min-height: 58px; */
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fff;

  align-items: center;
  gap: 5px;
  padding: 10px;
}

._summaryItem_j2ayj_621 {
  min-height: 58px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  gap: 12px;
}

._metaItem_j2ayj_599 svg {
  flex: 0 0 auto;
  color: #475569;
  font-size: 17px;
}

._summaryItem_j2ayj_621 span {
  font-size: 8px !important;
}

._metaItem_j2ayj_599 span,
._sideItem_j2ayj_667 small,
._materialItem_j2ayj_669 small,
._resumeItem_j2ayj_671 small {
  display: block;
  color: #667085;
  font-size: 8px !important;
  font-weight: 600;
}

._metaItem_j2ayj_599 strong {
  display: block;
  color: #172033;
  font-size: 8px !important;
  font-weight: 400;
  margin-top: 2px;
}

._summaryItem_j2ayj_621 strong {
  display: block;
  color: #172033;
  font-size: 10px !important;
  font-weight: 400;
  margin-top: 2px;
}

._summaryRow_j2ayj_717 {
  margin-top: 8px;
}

._summaryIcon_j2ayj_725,
._sideIcon_j2ayj_727,
._lessonIcon_j2ayj_729 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

._summaryIcon_j2ayj_725 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
}

/* .summaryItem span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.summaryItem span:last-child {
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
} */

._summaryItem_j2ayj_621 strong {
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

._tonePink_j2ayj_807 {
  color: #ff0d73;
  background: #fff0f6;
}

._toneBlue_j2ayj_817 {
  color: #2678ff;
  background: #eef5ff;
}

._toneGreen_j2ayj_827 {
  color: #16b364;
  background: #eafaf1;
}

._toneOrange_j2ayj_837 {
  color: #ff8a00;
  background: #fff4e6;
}

._tonePurple_j2ayj_847 {
  color: #7c3cff;
  background: #f3edff;
}

._tabs_j2ayj_857 {
  display: flex;
  gap: 34px;
  margin: 16px 0 0;
  border-bottom: 1px solid #e5e9f0;
  background-color: white;
  padding-left: 10px !important;
}

._tabs_j2ayj_857 button {
  border: 0;
  background: transparent;
  color: #52637a;
  padding: 13px 0;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
}

._tabs_j2ayj_857 ._activeTab_j2ayj_901 {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

._curriculumCard_j2ayj_165 {
  padding: 14px;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

._filterRow_j2ayj_925 {
  margin-bottom: 13px;
}

._selectBox_j2ayj_933 {
  width: 100%;
  min-height: 35px;
  border: 1px solid #dde5ef;
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

._chipGroup_j2ayj_957 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._chipGroup_j2ayj_957 button {
  min-height: 32px;
  border-radius: 6px;
  border: 1px solid #dde5ef;
  background: #fff;
  color: #334155;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 800;
}

._chipGroup_j2ayj_957 ._activeChip_j2ayj_991 {
  background: #ffeaf2;
  border-color: #ffd0e1;
  color: #ff0d73;
}

._tableWrap_j2ayj_1003 {
  overflow: hidden;
  border: 1px solid #e7edf5;
  border-radius: 8px;
}

._tableWrap_j2ayj_1003 .MuiPaper-root {
  box-shadow: none;
  border-radius: 8px;
}

._tableWrap_j2ayj_1003 .tableHeading {
  color: #172033;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

._tableWrap_j2ayj_1003 .MuiTableContainer-root {
  max-height: 430px;
}

._lessonCell_j2ayj_1047 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

._lessonCell_j2ayj_1047 strong,
._lessonCell_j2ayj_1047 small {
  display: block;
}

._lessonCell_j2ayj_1047 strong {
  color: #253044;
  font-size: 12px;
  font-weight: 800;
}

._lessonCell_j2ayj_1047 small {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

._lessonIcon_j2ayj_729 {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border: 1px solid currentColor;
}

._video_j2ayj_1111,
._pdf_j2ayj_1113,
._document_j2ayj_1115,
._image_j2ayj_1117 {
  border-radius: 8px;
}

._video_j2ayj_1111 {
  color: #ff0d73;
  background: #fff0f6;
}

._pdf_j2ayj_1113 {
  color: #ef4444;
  background: #fff1f2;
}

._document_j2ayj_1115 {
  color: #2678ff;
  background: #eff6ff;
}

._image_j2ayj_1117 {
  color: #7c3cff;
  background: #f5f0ff;
}

._typeBadge_j2ayj_1165,
._statusBadge_j2ayj_1167 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

._typeBadge_j2ayj_1165._video_j2ayj_1111 {
  color: #ff0d73;
  background: #fff0f6;
}

._typeBadge_j2ayj_1165._pdf_j2ayj_1113 {
  color: #ef4444;
  background: #fff1f2;
}

._typeBadge_j2ayj_1165._document_j2ayj_1115 {
  color: #2678ff;
  background: #eff6ff;
}

._typeBadge_j2ayj_1165._image_j2ayj_1117 {
  color: #7c3cff;
  background: #f5f0ff;
}

._progressCell_j2ayj_1233 {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 120px;
}

._progressCell_j2ayj_1233 ._progressTrack_j2ayj_417 {
  flex: 1;
  height: 5px;
  margin-top: 0;
}

._progressCell_j2ayj_1233 b {
  min-width: 34px;
  color: #172033;
  font-size: 11px;
  font-weight: 800;
}

._completed_j2ayj_1273 {
  color: #0f9f5f;
  background: #eafaf1;
}

._inProgress_j2ayj_1283 {
  color: #2678ff;
  background: #eaf2ff;
}

._pending_j2ayj_1293 {
  color: #ff8a00;
  background: #fff4e6;
}

._locked_j2ayj_1303 {
  color: #64748b;
  background: #f1f5f9;
}

._tableActions_j2ayj_1313 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._tableActions_j2ayj_1313 button {
  width: 28px;
  height: 28px;
  border: 1px solid #e5eaf2;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  display: grid;
  place-items: center;
}

._tableActions_j2ayj_1313 button:hover {
  color: #ff0d73;
  border-color: #ffd0e1;
  background: #fff6fa;
}

._tableActions_j2ayj_1313 button:disabled {
  cursor: not-allowed;
  color: #cbd5e1;
  background: #f8fafc;
}

._sideCard_j2ayj_167 {
  padding: 14px;
  margin-bottom: 14px;
}

._cardHead_j2ayj_311 {
  margin-bottom: 13px;
}

._cardHead_j2ayj_311 h4 {
  margin: 0;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0;
}

._cardHead_j2ayj_311 button,
._cardHead_j2ayj_311 select {
  border: 0;
  background: transparent;
  color: #006dff;
  font-size: 10px !important;
  font-weight: 800;
}

._cardHead_j2ayj_311 select {
  border: 1px solid #dde5ef;
  border-radius: 6px;
  color: #334155;
  padding: 6px 8px;
  background: #fff;
}

._resumeItem_j2ayj_671,
._materialItem_j2ayj_669 {
  display: grid;
  gap: 4px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid #edf1f7;
}

._sideItem_j2ayj_667 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid #edf1f7;
}

._sideItem_j2ayj_667 > div {
  flex: 1;
  min-width: 0;
}

._sideItem_j2ayj_667 strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
}

._sideItem_j2ayj_667 small {
  display: block;
  font-size: 10px;
}

._sideItem_j2ayj_667 time {
  font-size: 8px !important;
}

._sideItemRight_j2ayj_1511 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

._resumeItem_j2ayj_671 {
  grid-template-columns: 30px 1fr;
}

._materialItem_j2ayj_669 {
  grid-template-columns: 30px 1fr auto;
}

._sideItem_j2ayj_667 strong,
._resumeItem_j2ayj_671 strong,
._materialItem_j2ayj_669 strong {
  display: block;
  color: #202b3c;
  font-size: 9px !important;
  font-weight: 600;
}

._materialItem_j2ayj_669 time,
._resumeTop_j2ayj_309 span {
  color: #36465c;
  font-weight: 500;
  white-space: nowrap;
  font-size: 8px !important;
}

._sideIcon_j2ayj_727 {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

._fileRed_j2ayj_1589 {
  color: #ff0d73;
  background: #fff0f6;
}

._fileGreen_j2ayj_1599 {
  color: #12b76a;
  background: #ecfdf3;
}

._fileBlue_j2ayj_1609 {
  color: #2678ff;
  background: #eef5ff;
}

._filePurple_j2ayj_1619 {
  color: #7c3cff;
  background: #f3edff;
}

._miniTag_j2ayj_1629 {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  margin-left: 5px;
}

._tagRed_j2ayj_1647 {
  color: #ff0d73;
  background: #ffeaf2;
  font-size: 8px !important;
}

._tagOrange_j2ayj_1659 {
  color: #f97316;
  background: #fff1e8;
  font-size: 8px !important;
}

._resumeContent_j2ayj_1671 b {
  display: block;
  margin-top: 3px;
  text-align: right;
  color: #172033;
  font-size: 10px;
}

._resumeProgress_j2ayj_419 {
  margin-top: 8px;
  height: 4px;
}

._progressWrap_j2ayj_1697 {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px;
}

._completeddot_j2ayj_1711 {
  font-size: 10px !important;
  margin-bottom: 0px !important;
}

._donut_j2ayj_1721 {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#38c976 0 72%, #3478f6 72% 90%, #ff9b3d 90% 100%);
}

._donut_j2ayj_1721 span {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  color: #1f2937;
  font-size: 22px;
  font-weight: 800;
}

._donut_j2ayj_1721 small {
  display: block;
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

._legend_j2ayj_1779 p {
  display: flex;
  align-items: center;
  gap: 7px;
  /* justify-content: space-between; */
  margin: 0 0 10px;
  color: #52637a;
  font-size: 8px !important;
  font-weight: 700;
}

._legend_j2ayj_1779 i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

._greenDot_j2ayj_1813 {
  background: #38c976;
}

._blueDot_j2ayj_1821 {
  background: #3478f6;
}

._orangeDot_j2ayj_1829 {
  background: #ff9b3d;
}

@media (max-width: 1199px) {
  ._progressWrap_j2ayj_1697 {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media (max-width: 991px) {
  ._tabs_j2ayj_857 {
    gap: 18px;
    overflow-x: auto;
  }

  ._sideItem_j2ayj_667,
  ._materialItem_j2ayj_669 {
    grid-template-columns: 30px 1fr;
  }

  ._sideItem_j2ayj_667 time,
  ._materialItem_j2ayj_669 time,
  ._miniTag_j2ayj_1629 {
    grid-column: 2;
    justify-self: start;
  }
}

._curriculumWrapper_j2ayj_1889 {
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  overflow: visible;
}

._curriculumToolbar_j2ayj_1903 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

._leftFilters_j2ayj_1919 {
  flex: 1 1 100px;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

._searchBox_j2ayj_1933 {
  flex: 1;
  min-width: 20px;
  max-width: 280px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

._searchBox_j2ayj_1933 input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 12px;
}

._leftFilters_j2ayj_1919 select {
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0 12px;
}

._rightFilters_j2ayj_1987 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._rightFilters_j2ayj_1987 button {
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
}

._active_j2ayj_901 {
  color: #ff0d73;
  background: #fff1f6 !important;
  border-color: #ffd1e3 !important;
}

._collapseBtn_j2ayj_2031 {
  border: none !important;
  background: transparent !important;
}

._moduleHeader_j2ayj_2041 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1f7;
}

._moduleLeft_j2ayj_2059 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

._moduleMeta_j2ayj_2075 {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
}

._moduleProgress_j2ayj_2089 {
  width: 80px;
  height: 4px;
  background: #edf1f7;
  border-radius: 999px;
}

._moduleProgress_j2ayj_2089 ._progressFill_j2ayj_441 {
  width: 80%;
  height: 100%;
  background: #ff0d73;
}

._lessonName_j2ayj_2115 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._lessonRow_j2ayj_2137 > div:nth-child(2) {
  font-size: 11px;
  font-weight: 400;
  color: #475569;
}

._lessonRow_j2ayj_2137 > div:nth-child(3) {
  font-size: 11px;
  color: #64748b;
}

._lessonRow_j2ayj_2137 > div:nth-child(4) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important;
}

._statusCompleted_j2ayj_2173 {
  background: #eafaf1;
  color: #16a34a;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

._statusProgress_j2ayj_2191 {
  background: #eaf2ff;
  color: #2563eb;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

._statusPending_j2ayj_2209 {
  background: #fff4e6;
  color: #f97316;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

._progressBadge_j2ayj_2227 {
  background: #eef5ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
}

._completedIcon_j2ayj_2243 {
  color: #22c55e;
}

._lockedIcon_j2ayj_2251 {
  color: #94a3b8;
}

._greenIcon_j2ayj_2259 {
  color: #22c55e;
}

._blueIcon_j2ayj_2267 {
  color: #2563eb;
}

._grayIcon_j2ayj_2275 {
  color: #94a3b8;
}

._courseImage_j2ayj_189 {
  min-height: 150px;
}

._courseImage_j2ayj_189 img {
  height: 150px;
}

._heroCard_j2ayj_163 {
  padding: 12px;
}

._courseMetaRow_j2ayj_591 {
  margin-top: 8px;
}

._metaItem_j2ayj_599 {
  display: flex;
  align-items: flex-start;
  padding: 8px;
}

._metaItem_j2ayj_599 svg {
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

._metaItem_j2ayj_599 span {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: #64748b;
}

._metaItem_j2ayj_599 strong {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

._sidetitle_j2ayj_2367 {
  font-size: 9px !important;
}

._sidetitle1_j2ayj_2375 {
  font-size: 8px !important;
}

._sidetime_j2ayj_2383 {
  font-size: 4px !important;
}

._videotitle_j2ayj_2391 {
  font-size: 9px !important;
}

._notesPanel_j2ayj_2399 {
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  padding: 16px;
  min-height: 600px;
}

._tabHeader_j2ayj_2415 {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

._tabHeader_j2ayj_2415 button {
  flex: 1;
  border: none;
  background: #f8fafc;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}

._activeTab_j2ayj_901 {
  color: #ff0d73;
  font-weight: 600;
}

._notesHeader_j2ayj_2455 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

._notesHeader_j2ayj_2455 h5 {
  font-size: 12px !important;
}

._notesHeader_j2ayj_2455 button {
  border: none;
  background: #ff0d73;
  color: white;
  padding: 4px 10px;
  font-size: 10px;
  border-radius: 6px;
}

._notesHeader_j2ayj_2455 button:hover {
  border: 1px solid #ff0d73;
  color: #ff0d73;
  background: white;
  padding: 4px 10px;
  font-size: 10px;
}

._noteCard_j2ayj_2511 {
  display: flex;
  gap: 10px;
  height: 100px;
  width: 100%;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
}

._noteIcon_j2ayj_2535 {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 6px;
  background: #fff1f7;
  color: #ff0d73;
  display: flex;
  align-items: center;
  justify-content: center;
}

._noteIcon_j2ayj_2535 svg {
  font-size: 12px;
}

._noteContent_j2ayj_2567 {
  flex: 1;
}

._noteContent_j2ayj_2567 p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: #64748b;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

._noteContent_j2ayj_2567 p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

._noteFooter_j2ayj_2615 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

._noteFooter_j2ayj_2615 small {
  font-size: 9px;
  color: #94a3b8;
}

._noteMenu_j2ayj_2639 {
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
}

._noteCard_j2ayj_2511 p {
  margin: 0 0 8px;
}

._noteCard_j2ayj_2511 small {
  color: #64748b;
}

._noteCard_j2ayj_2511 svg:last-child {
  /* position: absolute; */
  right: 10px;
  top: 10px;
}

._discussionCard_j2ayj_2679 {
  display: flex;
  gap: 10px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
}

._avatar_j2ayj_2699 {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

._avatarPink_j2ayj_2723 {
  background: #ffe4ef;
  color: #ff0d73;
}

._avatarPurple_j2ayj_2733 {
  background: #ece8ff;
  color: #6d5efc;
}

._discussionContent_j2ayj_2743 {
  flex: 1;
}

._discussionTop_j2ayj_2751 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

._discussionTop_j2ayj_2751 h6 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
}

._discussionTop_j2ayj_2751 small {
  color: #94a3b8;
  font-size: 9px;
}

._unresolvedTag_j2ayj_2785 {
  background: #fff1f7;
  color: #ff0d73;
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 4px;
}

._resolvedTag_j2ayj_2801 {
  background: #e8fff2;
  color: #16a34a;
  font-size: 8px;
  padding: 3px 6px;
  border-radius: 4px;
}

._discussionContent_j2ayj_2743 p {
  margin: 2px 0;
  font-size: 10px;
  color: #374151;
  line-height: 1.5;
}

._discussionFooter_j2ayj_2831 span {
  display: flex;
  gap: 10px;
  font-size: 9px !important;
  color: #64748b;
}

._moduleDescription_j2ayj_2845 {
  display: block;
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  margin-top: 2px;
}

._noteDropdown_j2ayj_2861 {
  position: absolute;
  right: 0;
  top: 28px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  padding: 4px 0;
}

._dropdownItem_j2ayj_2887 {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 2px 10px;
  background: none;
  border: none;
  cursor: pointer;
}

._dropdownItem_j2ayj_2887:hover {
  background: #f8fafc;
}

._deleteItem_j2ayj_2917 {
  width: 100%;
}

._deleteItem_j2ayj_2917 .del-btn {
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 4px 10px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: #111827 !important;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none !important;
}

._deleteItem_j2ayj_2917 .del-btn:hover {
  background: #f8fafc !important;
}

._deleteItem_j2ayj_2917 .del-btn svg {
  font-size: 14px;
  color: red;
}

._paginationWrapper_j2ayj_2973 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
}

._paginationBtn_j2ayj_2989 {
  min-width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._paginationBtn_j2ayj_2989:hover:not(:disabled) {
  background: #f3f4f6;
}

._activePage_j2ayj_3019 {
  background: #ff0d73;
  color: #fff;
  border-color: #e0a9c0;
}

._paginationBtn_j2ayj_2989:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._noteModal_j2ayj_3041 {
  max-width: 900px !important;
}

._noteEditor_j2ayj_3049 {
  border-radius: 8px;
}

._noteEditor_j2ayj_3049 .ql-toolbar {
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
}

._noteEditor_j2ayj_3049 .ql-container {
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
}

._noteEditor_j2ayj_3049 .ql-editor {
  min-height: 180px;
  padding: 14px;
}

._noteEditorError_j2ayj_3093 .ql-container {
  border: 1px solid #dc3545 !important;
}

._noteDescription_j2ayj_3101 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

._noteDescription_j2ayj_3101 p {
  margin-bottom: 0;
}

._fileDropdown_j2ayj_3127 {
  position: absolute;
  top: 25px;
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

._dropdownItem_j2ayj_2887 {
  width: 100%;
  border: none;
  background: transparent;
  padding: 5px 12px;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px !important;
}

._dropdownItem_j2ayj_2887:hover {
  background: #f5f5f5;
}

._actionCell_j2ayj_3181 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

._lessonRow_j2ayj_2137 {
  display: grid;
  grid-template-columns: 1fr 90px 150px 80px 50px;
  gap: 10px;
  padding: 10px;
  align-items: center;
  /* IMPORTANT FIX */
  min-width: 0;
}

._deleteMenuItem_j2ayj_3215 {
  width: 100%;
}

._deleteMenuItem_j2ayj_3215 button {
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 10px 14px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* color: #dc2626 !important; */
  font-size: 13px !important;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none !important;
}

._deleteMenuItem_j2ayj_3215 button:hover {
  background: #f5f5f5;
}

._deleteMenuItem_j2ayj_3215 svg {
  color: #dc2626 !important;
  margin-right: 8px !important;
}

._threadContainer_j2ayj_3271 {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

._threadMessage_j2ayj_3283 {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

._threadContent_j2ayj_3295 {
  flex: 1;
}

._threadContent_j2ayj_3295 h6 {
  margin-bottom: 0;
  font-size: 12px;
}

._threadContent_j2ayj_3295 small {
  color: #94a3b8;
  font-size: 10px;
}

._threadContent_j2ayj_3295 p {
  margin-top: 8px;
  white-space: pre-wrap;
}

._replyInputBox_j2ayj_3333 {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

._replyInputBox_j2ayj_3333 input {
  flex: 1;
  border: none;
  border-bottom: 1px solid #ddd;
  padding: 10px;
  outline: none;
}

._replyInputBox_j2ayj_3333 button {
  border: none;
  background: #ff0d73;
  color: white;
  border-radius: 20px;
  padding: 8px 20px;
}

._chatSidebar_j2ayj_3377 {
  height: 600px;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
}

._activeDiscussion_j2ayj_3389 {
  background: #ffffff;
  border: 1px solid pink;
}

._chatContainer_j2ayj_3399 {
  height: 600px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

._chatHeader_j2ayj_3417 {
  padding: 10px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
}

._backBtn_j2ayj_31 {
  border: none;
  background: transparent;
  color: #ff0d73;
  font-weight: 600;
}

._backBtn1_j2ayj_3449 {
  border: 1px solid #999999;
  background: transparent;
  color: #ff0d73;
  font-weight: 600;
  border-radius: 4px;
  padding: 3px;
}

._backBtn1_j2ayj_3449 h6 {
  font-size: 12px !important;
}

._chatBody_j2ayj_3475 {
  flex: 1;
  overflow-y: auto;
  padding: 14px !important;
  background: #f8fafc;

  display: flex;
  flex-direction: column;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

._chatBody_j2ayj_3475::-webkit-scrollbar {
  display: none;
}

._chatBody_j2ayj_3475::-webkit-scrollbar {
  display: none;
}

._messageLeft_j2ayj_3517 {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

._messageRight_j2ayj_3529 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

._chatBubble_j2ayj_3541 {
  min-width: 150px;
  max-width: 75%;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #edf2f7;
}

._messageRight_j2ayj_3529 ._chatBubble_j2ayj_3541 {
  background: #fffafb;
  color: white;
}

._chatFooter_j2ayj_3571 {
  padding: 15px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  background: #fff;
}

._chatFooter_j2ayj_3571 input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 25px;
  padding: 10px 15px;
  outline: none;
}

._chatFooter_j2ayj_3571 button {
  border: none;
  background: #ff0d73;
  color: white;
  border-radius: 25px;
  padding: 10px 20px;
}

._messageTop_j2ayj_3619 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

._senderName_j2ayj_3633 {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

._messageTime_j2ayj_3645 {
  font-size: 11px;
  color: #94a3b8;
}

._chatBubble_j2ayj_3541 p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
}

._chatImage_j2ayj_3673 {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  margin-top: 8px;
  display: block;
}

._messageBottom_j2ayj_3689 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

._senderName_j2ayj_3633 {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

._messageTime_j2ayj_3645 {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
}

._chatAvatar_j2ayj_3727 {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #ff0d73;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}

._messageLeft_j2ayj_3517,
._messageRight_j2ayj_3529 {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

._iconCompleted_j2ayj_3773 {
  color: #22c55e;
  font-size: 16px;
}

._iconPending_j2ayj_3783 {
  color: #898a8b;
  font-size: 12px;
}

._fileStatus_j2ayj_3793 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 4px;
}

._fileStatus_j2ayj_3793 svg {
  display: block;
  margin: auto;
}

._iconProgress_j2ayj_3819 {
  color: #3b82f6;
  font-size: 16px;
  animation: _spin_j2ayj_1 1.2s linear infinite;
}

/* Mandatory Badge Styles - Green like CreateCourse page */
._mandatoryBadge_j2ayj_3833 {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 8px;
  font-weight: 700;
  display: inline-block;
  margin-left: 8px;
  letter-spacing: 0.3px;
}

._mandatoryBadgeGreen_j2ayj_3857 {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 9px;
  font-weight: 700;
  display: inline-block;
  margin-left: 8px;
  letter-spacing: 0.3px;
}

._mandatoryBadgeSmall_j2ayj_3881 {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 7px;
  font-weight: 700;
  display: inline-block;
  margin-left: 6px;
  letter-spacing: 0.2px;
}

._mandatoryBadgeSmallGreen_j2ayj_3905 {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 7px;
  font-weight: 700;
  display: inline-block;
  margin-left: 6px;
  letter-spacing: 0.2px;
}

/* Module Header with Badge */
._moduleLeft_j2ayj_2059 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._moduleLeft_j2ayj_2059 > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

._moduleLeft_j2ayj_2059 > div strong {
  font-size: 13px;
  font-weight: 600;
}

/* Lesson Name with Badge */
._lessonName_j2ayj_2115 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._lessonName_j2ayj_2115 span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._lessonName_j2ayj_2115 ._mandatoryBadgeSmall_j2ayj_3881,
._lessonName_j2ayj_2115 ._mandatoryBadgeSmallGreen_j2ayj_3905 {
  flex-shrink: 0;
}

._titleBlock_j2ayj_4005 h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  margin: 0;
}

._titleBlock_j2ayj_4005 h1 span {
  color: var(--primary-purple-400, #ff006e);
}

._titleBlock_j2ayj_4005 p {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  margin: 5px 0 0;
}

._titleRow_j2ayj_4045 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._back_btn_j2ayj_4057 {
  padding: 6px;
  color: var(--accent-color) !important;
  font-size: 12px;
  font-weight: 400;
  border: 1px solid rgb(134, 134, 134) !important;
  border-radius: 5px;
  margin-top: 4px;
}

._back_btn_j2ayj_4057:hover {
  background: gray;
  padding: 6px;
  color: var(--bg-color) !important;
  font-size: 12px;
  font-weight: 400;
}

/* ===== NEW STYLES FOR COURSE SUMMARY CARD (Like CreateCourseView) ===== */

._courseSummaryContent_j2ayj_4097 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  margin-bottom: 8px;
}

._courseThumb_j2ayj_4125 {
  flex: 0 0 122px;
}

._courseThumb_j2ayj_4125 img {
  width: 122px;
  height: 72px;
  object-fit: contain;
  border-radius: 7px;
}

._courseSummaryInfo_j2ayj_4147 {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  background-color: white;
}

._courseTitle_j2ayj_4161 h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  margin: 0 0 4px;
  color: #0f172a;
  white-space: nowrap;
}

._courseTitle_j2ayj_4161 h2 span {
  background: #dcfce7;
  color: #16a34a;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 900;
}

._courseDescription_j2ayj_4201 {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

._courseMetricsRow_j2ayj_4225 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

._metricBlock_j2ayj_4239 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  padding: 0 14px;
  border-right: 1px solid #e5e7eb;
}

._metricBlock_j2ayj_4239:first-child {
  padding-left: 0;
}

._metricBlock_j2ayj_4239 small {
  display: block;
  color: #64748b;
  font-size: 8px;
  font-weight: 800;
  margin-bottom: 2px;
}

._metricBlock_j2ayj_4239 strong {
  display: block;
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
}

._metricIcon_j2ayj_4295 {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Color classes for metric icons */
._blue_j2ayj_1821 {
  background: #dbeafe;
  color: #2563eb;
}

._purple_j2ayj_4329 {
  background: #f3e8ff;
  color: #9333ea;
}

._violet_j2ayj_4339 {
  background: #ede9fe;
  color: #7c3aed;
}

._green_j2ayj_1813 {
  background: #dcfce7;
  color: #16a34a;
}

._orange_j2ayj_1829 {
  background: #ffedd5;
  color: #f97316;
}

._pink_j2ayj_4369 {
  background: #ffe4f1;
  color: #ff006e;
}

._red_j2ayj_4379 {
  background: #fee2e2;
  color: #ef4444;
}

/* ===== PROGRESS ROW WRAPPER - Progress and Button in same row ===== */
._progressRowWrapper_j2ayj_4391 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  width: 100%;
}

/* Progress Section - Takes remaining space */
._progressSection_j2ayj_4415 {
  flex: 1;
  min-width: 0;
}

._progressSection_j2ayj_4415 ._progressHead_j2ayj_307 {
  margin-top: 0;
}

._progressSection_j2ayj_4415 ._progressTrack_j2ayj_417 {
  margin-top: 6px;
}

/* Continue Learning Button - Fixed width */
._continueLearningWrapper_j2ayj_4443 {
  flex-shrink: 0;
}

._continueLearningWrapper_j2ayj_4443 ._primaryBtn_j2ayj_527 {
  min-height: 36px;
  padding: 6px 20px;
  border-radius: 6px;
  border: 1px solid #ff0d73;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #ff0d73;
  color: #fff;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  white-space: nowrap;
}

._continueLearningWrapper_j2ayj_4443 ._primaryBtn_j2ayj_527:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

._uservalue_j2ayj_4499 {
  font-size: 8px !important;
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 767px) {
  ._courseSummaryContent_j2ayj_4097 {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  ._courseThumb_j2ayj_4125 {
    flex-basis: 96px;
  }

  ._courseThumb_j2ayj_4125 img {
    width: 96px;
    height: 66px;
  }

  ._metricBlock_j2ayj_4239 {
    min-width: 100px;
    padding: 0 10px;
    border-right: none;
  }

  ._courseTitle_j2ayj_4161 h2 {
    font-size: 11px;
    white-space: normal;
  }

  ._courseMetricsRow_j2ayj_4225 {
    flex-wrap: wrap;
    gap: 4px 0;
  }

  ._summaryItem_j2ayj_621 {
    min-height: 50px;
    padding: 8px 12px;
  }

  ._lessonRow_j2ayj_2137 {
    grid-template-columns: 1fr 70px 100px 60px 40px;
    gap: 6px;
    padding: 8px;
    font-size: 8px;
    overflow-x: auto;
  }

  ._lessonRow_j2ayj_2137 > div:nth-child(2) {
    font-size: 9px;
  }

  ._lessonRow_j2ayj_2137 > div:nth-child(3) {
    font-size: 9px;
  }

  ._moduleMeta_j2ayj_2075 {
    gap: 10px;
    font-size: 10px;
  }

  ._moduleProgress_j2ayj_2089 {
    width: 50px;
  }

  ._curriculumToolbar_j2ayj_1903 {
    flex-wrap: wrap;
  }

  ._leftFilters_j2ayj_1919 {
    flex: 1 1 100%;
  }

  ._searchBox_j2ayj_1933 {
    max-width: 100%;
  }

  ._rightFilters_j2ayj_1987 {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  ._tabs_j2ayj_857 {
    gap: 14px;
    overflow-x: auto;
    padding-left: 6px !important;
  }

  ._tabs_j2ayj_857 button {
    font-size: 10px;
    padding: 10px 0;
    white-space: nowrap;
  }

  /* Stack progress and button on mobile */
  ._progressRowWrapper_j2ayj_4391 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  ._continueLearningWrapper_j2ayj_4443 ._primaryBtn_j2ayj_527 {
    width: 100%;
  }
}

@media (max-width: 991px) {
  ._courseMetricsRow_j2ayj_4225 {
    flex-wrap: wrap;
  }

  ._metricBlock_j2ayj_4239 {
    min-width: 100px;
    padding: 4px 10px;
    border-right: none;
  }

  ._tabs_j2ayj_857 {
    gap: 18px;
    overflow-x: auto;
  }

  ._sideItem_j2ayj_667,
  ._materialItem_j2ayj_669 {
    grid-template-columns: 30px 1fr;
  }

  ._sideItem_j2ayj_667 time,
  ._materialItem_j2ayj_669 time,
  ._miniTag_j2ayj_1629 {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 1199px) {
  ._progressWrap_j2ayj_1697 {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Locked lesson style */
._lockedLesson_j2ayj_4789 {
  opacity: 0.6;
  cursor: not-allowed !important;
}

._lockedLesson_j2ayj_4789 ._lessonName_j2ayj_2115 span {
  color: #94a3b8;
}

._iconLocked_j2ayj_4807 {
  color: #94a3b8;
  font-size: 16px;
}

._iconPlay_j2ayj_4817 {
  color: #2563eb;
  font-size: 16px;
}

/* Course files section */
._courseFilesSection_j2ayj_4829 {
  margin-top: 4px;
}

/* ─── Add these to your MyLearning.module.css ─────────────────────────────── */

/* Play button shown when lesson is not yet started */
._playBtn_j2ayj_4843 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background-color: #e7f1ff;
  color: #0d6efd;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
  flex-shrink: 0;
}

._playBtn_j2ayj_4843:hover {
  background-color: #0d6efd;
  color: #ffffff;
  transform: scale(1.1);
}

/* Wrapper that holds page badge + in-progress pill side by side */
._progressStatusGroup_j2ayj_4891 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* "Page 47 / 120" badge */
._pageProgressBadge_j2ayj_4907 {
  font-size: 11px;
  color: #495057;
  background-color: #f1f3f5;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  font-weight: 500;
}

/* "In Progress" pill */
._statusInProgressPill_j2ayj_4929 {
  font-size: 11px;
  font-weight: 600;
  color: #0d6efd;
  background-color: #e7f1ff;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ─── ADD / REPLACE these in MyLearning.module.css ──────────────────────────
   Also update .lessonRow grid to add the new left-col:
   grid-template-columns: 32px 1fr 90px 150px 80px 50px;
──────────────────────────────────────────────────────────────────────────── */

/* ── lessonRow: add the extra left column ── */
._lessonRow_j2ayj_2137 {
  display: grid;
  grid-template-columns: 32px 1fr 90px 150px 80px 50px;
  gap: 10px;
  padding: 10px;
  min-width: 0;
}

/* ── Left status column ── */
._lessonLeftCol_j2ayj_4979 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Green filled circle — completed (left side) */
._leftCompletedCircle_j2ayj_4995 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #22c55e;
  color: #fff;
  flex-shrink: 0;
}

/* Blue circle play button — in progress (left side) */
._leftPlayCircleBlue_j2ayj_5021 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background-color: #2563eb;
  color: #fff;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  flex-shrink: 0;
}

._leftPlayCircleBlue_j2ayj_5021:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

/* Gray outline circle play button — not started (left side) */
._leftPlayCircleGray_j2ayj_5067 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background-color: #fff;
  color: #64748b;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
  flex-shrink: 0;
}

._leftPlayCircleGray_j2ayj_5067:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: scale(1.08);
}

/* ── Inline page progress badge (shown inside lesson name) ── */
._inlinePageBadge_j2ayj_5117 {
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  background-color: #eff6ff;
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── "In Progress" pill — right side only ── */
._statusInProgressPill_j2ayj_4929 {
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background-color: #eff6ff;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ── Remove old .playBtn if you had it — replaced by leftPlayCircleGray ── */

/* ── Responsive: shrink columns on mobile ── */
@media (max-width: 767px) {
  ._lessonRow_j2ayj_2137 {
    grid-template-columns: 28px 1fr 60px 90px 60px 36px;
    gap: 6px;
    padding: 8px;
    font-size: 9px;
  }
}

/* ─── Quick Stats Row ─── */
._quickStatsRow_j2ayj_5187 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

._quickStatsRow_j2ayj_5187 ._metricBlock_j2ayj_4239 {
  min-width: 100px;
  padding: 0 4px;
  border-right: none;
}

._quickStatSeparator_j2ayj_5219 {
  color: #d1d5db;
  font-size: 14px;
  font-weight: 300;
  margin: 0 4px;
}

/* ─── What You'll Learn Section ─── */
._whatLearnSection_j2ayj_5235 {
  background-color: white;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  margin-bottom: 8px;
}

._whatLearnSection_j2ayj_5235 h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1c1d1f;
  margin-bottom: 16px;
}

._learnContent_j2ayj_5267 ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

._learnContent_j2ayj_5267 li {
  padding-left: 0;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #2d2d2d;
}

._learnContent_j2ayj_5267 p {
  margin-bottom: 8px;
}

._learnContent_j2ayj_5267 li:last-child {
  margin-bottom: 0;
}

._btnPrimary1_j2ayj_5311 {
  padding: 7px 14px;
}

._btnPrimary_j2ayj_5311 {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  border: none;
  box-shadow: var(--shadow-primary-sm) !important;

  font-size: 10px !important;
  font-weight: 600;

  border-radius: 3px !important;

  /* Add these */
  padding: 4px 10px !important;
  min-height: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  line-height: 1;
}

._progressCircleWrapper_j2ayj_5367 {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._progressText_j2ayj_5385 {
  position: absolute;
  font-size: 7px !important;
  font-weight: 600;
  color: #22c55e;
}
._rechartsWrapper_jizst_1,
._recharts-surface_jizst_3,
._recharts-wrapper_jizst_5 {
  border: none !important;
  outline: none !important;
}
._chartCard_jizst_13 svg {
  border: none !important;
  outline: none !important;
}
._contentGrid1_jizst_21 {
  width: 100%;
}

._mainContent_jizst_29 {
  width: 100%;
}

._statsGrid_jizst_37 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

._statCard_jizst_49 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #f1f3f6;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 70px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
._chartCard_jizst_13 {
  margin-top: 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #edf2f7;
  padding: 24px;
  height: 100%;
}
._statIcon_jizst_89 {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

._statLabel_jizst_109 {
  display: block;
  font-size: 10px !important;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 2px;
  line-height: 1.2;
}

._statNote_jizst_127 {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #64748b;
  line-height: 1.2;
}
/* Icon Background Colors */

._pink_jizst_145 {
  background: #fff1f5;
  color: #ec4899;
}

._green_jizst_155 {
  background: #ecfdf5;
  color: #22c55e;
}

._blue_jizst_165 {
  background: #eff6ff;
  color: #3b82f6;
}

._orange_jizst_175 {
  background: #fff7ed;
  color: #f97316;
}

._red_jizst_185 {
  background: #fef2f2;
  color: #ef4444;
}

._purple_jizst_195 {
  background: #faf5ff;
  color: #a855f7;
}

._statLabel_jizst_109 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 4px;
}

._statValue_jizst_221 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #111827;
  line-height: 1.2;
}

._statNote_jizst_127 {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}
@media (max-width: 1600px) {
  ._statsGrid_jizst_37 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 1400px) {
  ._statsGrid_jizst_37 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  ._statsGrid_jizst_37 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 500px) {
  ._statsGrid_jizst_37 {
    grid-template-columns: 1fr;
  }
}
._chartCard_jizst_13 {
  margin-top: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #edf2f7;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

._chartHeader_jizst_311 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

._chartHeader_jizst_311 h5 {
  margin: 0;
  font-size: 13px !important;
  font-weight: 700;
  color: #1e293b;
}

._growthText_jizst_339 {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
}

._growth_jizst_339 {
  color: #22c55e;
  font-weight: 700;
  margin-right: 4px;
}

._period_jizst_363 {
  background: #f8fafc;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

._customTooltip_jizst_381 {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

._tooltipTitle_jizst_397 {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

._tooltipValue_jizst_409 {
  font-size: 14px;
  font-weight: 700;
  color: #9f39eeaf;
}

._snapshotCard_jizst_421 {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  margin-bottom: 10px;
}

._snapshotHeader_jizst_441 {
  margin-bottom: 20px;
}

._snapshotHeader_jizst_441 h5 {
  margin: 0;
  font-size: 10px !important;
  font-weight: 600;
  color: #1e293b;
}

._moduleItem_jizst_463 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}

._progress_jizst_483 {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 20px;
  margin-bottom: 14px;
  overflow: hidden;
}

._fill_jizst_501 {
  height: 100%;
  border-radius: 20px;
}

._green1_jizst_511 {
  background: #22c55e;
}

._blue1_jizst_519 {
  background: #3b82f6;
}

._orange1_jizst_527 {
  background: #f97316;
}

._purpleBar_jizst_535 {
  background: #a855f7;
}

._pinkBar_jizst_543 {
  background: #ec4899;
}
._filterBtn_jizst_549 {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

._filterBtn_jizst_549:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

._filterBtn_jizst_549:focus {
  outline: none;
}
._rightPanel_jizst_589 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._infoCard_jizst_601 {
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

._cardTitle_jizst_615 {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

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

._circleProgress_jizst_639 {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

._circleProgress_jizst_639 span {
  font-size: 10px;
  font-weight: 600;
}

._excellent_jizst_669 {
  font-size: 12px;
  font-weight: 600;
  color: #22c55e;
}

._timeValue_jizst_681 {
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
}

._timeChange_jizst_693 {
  color: #8b5cf6;
  font-size: 11px;
}

._statusWrap_jizst_703 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._donut_jizst_715 {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0 70%, #f59e0b 70% 90%, #ef4444 90% 100%);
  position: relative;
}

._donut_jizst_715::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: white;
  border-radius: 50%;
}

._donut_jizst_715 span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

._legend_jizst_769 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}

._greenDot_jizst_783,
._orangeDot_jizst_785,
._redDot_jizst_787 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

._greenDot_jizst_783 {
  background: #22c55e;
}

._orangeDot_jizst_785 {
  background: #f59e0b;
}

._redDot_jizst_787 {
  background: #ef4444;
}
/* Add these styles to your existing CSS file */

/* Circle Progress Styles */
._circleProgress_jizst_639 {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

._circleProgress_jizst_639 .CircularProgressbar {
  width: 2px;
  height: 2px;
}

._circleProgress_jizst_639 .CircularProgressbar-path {
  stroke-linecap: round;
}

._circleProgress_jizst_639 .CircularProgressbar-text {
  fill: #0f172a;
  font-size: 18px;
  font-weight: 600;
}

/* Donut Chart Styles */
._donut_jizst_715 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0% 68%, #f59e0b 68% 90%, #ef4444 90% 100%);
  position: relative;
  flex-shrink: 0;
}

._donut_jizst_715::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: white;
  border-radius: 50%;
}

._donut_jizst_715 span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

/* Completion Row */
._completionRow_jizst_627 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._completionRow_jizst_627 small {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

/* Time Value */
._timeValue_jizst_681 {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

._timeChange_jizst_693 {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 500;
}

/* Legend */
._legend_jizst_769 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #475569;
}

._legend_jizst_769 div {
  display: flex;
  align-items: center;
  gap: 6px;
}

._greenDot_jizst_783,
._orangeDot_jizst_785,
._redDot_jizst_787 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

._greenDot_jizst_783 {
  background: #22c55e;
}

._orangeDot_jizst_785 {
  background: #f59e0b;
}

._redDot_jizst_787 {
  background: #ef4444;
}
/* Table Container */
.MuiTableContainer-root {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #edf2f7;
}

/* Header */
.MuiTableHead-root th {
  background: #fff !important;
  color: #ff0a78 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Body Cells */
.MuiTableBody-root td {
  font-size: 12px !important;
  color: #64748b !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* First Column */
.MuiTableBody-root td:first-child {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 12px !important;
}

/* Row Hover */
.MuiTableBody-root tr:hover {
  background: #fafafa !important;
}

/* Toolbar */
.MuiToolbar-root {
  background: #fff !important;
}

/* Title */
.tableHeading {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  padding-top: 10px;
}

._tableShell_jizst_1159 {
  width: 100%;
}

._rankBadge_jizst_1167 {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

._rank1_jizst_1191 {
  background: #22c55e;
}

._rank2_jizst_1199 {
  background: #3b82f6;
}

._rank3_jizst_1207 {
  background: #f97316;
}

._rank4_jizst_1215 {
  background: #a855f7;
}

._rank5_jizst_1223 {
  background: #ec4899;
}

._moduleNameCell_jizst_1231 {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

._moduleNameCell_jizst_1231 strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

._selectedModuleCell_jizst_1257 strong {
  color: #ff0a78;
}

._moduleInlineProgress_jizst_1265 {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

._moduleInlineProgress_jizst_1265 span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

._countWithPercent_jizst_1293 {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

._countWithPercent_jizst_1293 small {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
}

._tableProgressCell_jizst_1319 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
}

._tableProgressTrack_jizst_1333 {
  flex: 1;
  min-width: 52px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

._tableProgressFill_jizst_1351 {
  display: block;
  height: 100%;
  border-radius: 999px;
}

._tableProgressCell_jizst_1319 b {
  color: #0f172a;
  font-size: 10px;
  font-weight: 800;
}

._statusBadge_jizst_1375 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

._statusOnTrack_jizst_1399 {
  background: #e8f8ee;
  color: #22c55e;
}

._statusAtRisk_jizst_1409 {
  background: #fff4e5;
  color: #f59e0b;
}

._statusOverdue_jizst_1419 {
  background: #fdecec;
  color: #ef4444;
}

._overdueValue_jizst_1429 {
  color: #ff0a78;
  font-weight: 800;
}

._updatedCell_jizst_1439,
._learnerCell_jizst_1441 {
  display: grid;
  gap: 3px;
  line-height: 1.2;
}

._updatedCell_jizst_1439 small,
._learnerCell_jizst_1441 small {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
}

._learnerCell_jizst_1441 strong {
  color: #0f172a;
  font-size: 11px;
}

._tableActions_jizst_1477 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

._tableActions_jizst_1477 button {
  width: 24px;
  height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

._tableActions_jizst_1477 button:hover {
  color: #ff0a78;
  border-color: #ffcfe2;
  background: #fff6fa;
}

._detailHeader_jizst_1527 {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

._detailHeader_jizst_1527 span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

._detailHeader_jizst_1527 h5 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

._closeDetailBtn_jizst_1573 {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
}

._closeDetailBtn_jizst_1573:hover {
  color: #ff0a78;
  border-color: #ffcfe2;
  background: #fff6fa;
}

._circleProgress_jizst_639 {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  flex: 0 0 42px;
}

._circleProgress_jizst_639 .CircularProgressbar {
  width: 100% !important;
  height: 100% !important;
}

._statusWrap_jizst_703 {
  gap: 10px;
}

._donut_jizst_715 {
  width: 54px !important;
  height: 54px !important;
}

._donut_jizst_715::before {
  inset: 8px !important;
}

._donut_jizst_715 span {
  font-size: 9px !important;
}

._legend_jizst_769 {
  gap: 5px;
  font-size: 9px;
}

._legend_jizst_769 b {
  color: #0f172a;
  font-weight: 800;
}

._statNote_jizst_127 {
  color: #22c55e;
  font-size: 9px;
  font-weight: 700;
}

._moduleItem_jizst_463 b {
  color: #0f172a;
  font-size: 10px;
  margin-right: 4px;
}

@media (max-width: 1199px) {
  ._statusWrap_jizst_703 {
    align-items: flex-start;
  }

  ._legend_jizst_769 {
    font-size: 10px;
  }
}
._summaryItem_jizst_1731 {
  min-height: 58px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;

  display: flex;
  align-items: center;
  gap: 12px;
}
._metaItem_jizst_1753 svg {
  flex: 0 0 auto;
  color: #475569;
  font-size: 17px;
}
._summaryItem_jizst_1731 span {
  font-size: 13px !important;
}

._metaItem_jizst_1753 span,
._sideItem_jizst_1773 small,
._materialItem_jizst_1775 small,
._resumeItem_jizst_1777 small {
  display: block;
  color: #667085;
  font-size: 8px !important;
  font-weight: 600;
}

._metaItem_jizst_1753 strong {
  display: block;
  color: #172033;
  font-size: 8px !important;
  font-weight: 400;
  margin-top: 2px;
}
._summaryItem_jizst_1731 strong {
  display: block;
  color: #172033;
  font-size: 10px !important;
  font-weight: 400;
  margin-top: 2px;
}
._summaryRow_jizst_1819 {
  margin-top: 8px;
}

._summaryIcon_jizst_1827,
._sideIcon_jizst_1829,
._lessonIcon_jizst_1831 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

._summaryIcon_jizst_1827 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
}
/* .summaryItem span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.summaryItem span:last-child {
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
} */

._summaryItem_jizst_1731 strong {
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}
._summaryItem_jizst_1731 strong {
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

._tonePink_jizst_1919 {
  color: #ff0d73;
  background: #fff0f6;
}

._toneBlue_jizst_1929 {
  color: #2678ff;
  background: #eef5ff;
}

._toneGreen_jizst_1939 {
  color: #16b364;
  background: #eafaf1;
}

._toneOrange_jizst_1949 {
  color: #ff8a00;
  background: #fff4e6;
}
._tonePurple_jizst_1957 {
  color: #7c3cff;
  background: #f3edff;
}

._assessmentCard_jizst_1967 {
  height: 100%;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

._assessmentCard_jizst_1967 .MuiPaper-root {
  box-shadow: none;
  border-radius: 12px;
}

._assessmentCard_jizst_1967 .MuiTableContainer-root {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

._assessmentCard_jizst_1967 .tableHeading {
  font-size: 13px !important;
  padding-top: 0;
}

._employeeCell_jizst_2017,
._selectedEmployee_jizst_2019 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._employeeCell_jizst_2017 strong,
._selectedEmployee_jizst_2019 strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

._selectedEmployee_jizst_2019 {
  padding: 0 18px 14px;
}

._selectedEmployee_jizst_2019 small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

._avatar_jizst_2069 {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
}

._avatarBlue_jizst_2095 {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

._avatarPink_jizst_2103 {
  background: linear-gradient(135deg, #ec4899, #f9a8d4);
}

._avatarOrange_jizst_2111 {
  background: linear-gradient(135deg, #f97316, #fdba74);
}

._avatarYellow_jizst_2119 {
  background: linear-gradient(135deg, #eab308, #fde047);
}

._scoreGroup_jizst_2127 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._scoreGroup_jizst_2127 b {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

._levelBadge_jizst_2151,
._completedBadge_jizst_2153 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
}

._levelHigh_jizst_2175 {
  background: #dcfce7;
  color: #16a34a;
}

._levelMedium_jizst_2185 {
  background: #e0f2fe;
  color: #0284c7;
}

._levelLow_jizst_2195 {
  background: #fef3c7;
  color: #d97706;
}

._completedBadge_jizst_2153 {
  background: #dcfce7;
  color: #16a34a;
}

._progressionHeader_jizst_2215 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 10px 0;
}

._employeeSelect_jizst_2231 {
  min-width: 150px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
}

._progressValue_jizst_2261 {
  color: #22c55e;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 767px) {
  ._progressionHeader_jizst_2215 {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 18px;
  }

  ._employeeSelect_jizst_2231 {
    width: calc(100% - 18px);
    margin-left: 18px;
  }
}
._closeButton_jizst_2297 {
  background: none;
  border: 1px solid rgb(163, 163, 163);
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

._closeButton_jizst_2297:hover {
  background: #f1f5f9;
  color: #0f172a;
}
._employeeCell_jizst_2017 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._avatarImage_jizst_2343 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
._snapshotBody_jizst_2355::-webkit-scrollbar {
  width: 4px;
}

._snapshotBody_jizst_2355::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

._snapshotBody_jizst_2355::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
._selectedEmployee_jizst_2019 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}

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

._studentText_jizst_2407 {
  display: flex;
  flex-direction: column;
}

._studentText_jizst_2407 strong {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

._studentText_jizst_2407 small {
  color: #64748b;
  margin-top: 2px;
}

._avatarImage_jizst_2343 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

._closeButton_jizst_2297 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._progressBar_jizst_2465 {
  width: 100%;
  height: 4px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

._progressFill_jizst_2481 {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
._chartCard_jizst_13,
._snapshotCard_jizst_421 {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  padding: 20px;
  height: 320px; /* fixed height */
  display: flex;
  flex-direction: column;
}/* ============================================================
   Assessment.module.css
   Shared styles for AssessmentList, AssessmentAddEdit, AssessmentView
   ============================================================ */

:root {
    --color-primary: #4a6bff;
    --color-primary-light: #c7d2ff;
    --color-primary-lightest: #eef1ff;
    --gradient-primary: linear-gradient(135deg, #4a6bff 0%, #6b8cff 100%);
}

._wrap_369z0_25,
._page_369z0_27 {
    padding: 20px 24px;
    background: #f8fafc;
    min-height: 100%;
}

/* ── Header ─────────────────────────────────────────────── */
._header_369z0_41 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

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

._backBtn_369z0_71 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
}

._backBtn_369z0_71:hover {
    background: #f1f5f9;
}

._breadcrumb_369z0_107 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 2px;
}

._breadcrumb_369z0_107 strong {
    color: #374151;
}

._title_369z0_133 {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._headerActions_369z0_147 {
    display: flex;
    gap: 8px;
}

/* ── Generic buttons ────────────────────────────────────── */
._btn_369z0_159 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}

._btnPrimary_369z0_185,
.btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gradient-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

._btnPrimary_369z0_185:hover,
.btnPrimary:hover {
    opacity: 0.92;
}

._btnPrimary_369z0_185:disabled,
.btnPrimary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

._btnSecondary_369z0_237,
.btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

._btnSecondary_369z0_237:hover,
.btnSecondary:hover {
    background: #f8fafc;
}

._bulkActionBtnDanger_369z0_277,
._btnDanger_369z0_279 {
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: #dc2626;
}

._bulkActionBtnDanger_369z0_277:hover,
._btnDanger_369z0_279:hover {
    background: #fee2e2;
}

/* ── Form layout ────────────────────────────────────────── */
._formLayout_369z0_303 {
    display: flex;
    gap: 20px;
}

._leftCol_369z0_313 {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

._formCard_369z0_329 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

._sectionHeading_369z0_343 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

._formGrid3_369z0_365 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

._formGrid2_369z0_377 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

._formGroup_369z0_389 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

._label_369z0_401 {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
}

._required_369z0_413 {
    color: #ef4444;
}

._input_369z0_421,
._textarea_369z0_423,
._select_369z0_425 {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 13px;
    color: #1e293b;
    background: #fff;
    outline: none;
    width: 100%;
}

._input_369z0_421:focus,
._textarea_369z0_423:focus,
._select_369z0_425:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

._inputError_369z0_461 {
    border-color: #ef4444 !important;
}

._errorText_369z0_469 {
    font-size: 11px;
    color: #ef4444;
    margin-top: 2px;
}

._textarea_369z0_423 {
    resize: vertical;
    min-height: 80px;
}

._helperText_369z0_491 {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ── Question type tabs ─────────────────────────────────── */
._typeTabs_369z0_505 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

._typeTab_369z0_505 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    transition: all 0.15s;
}

._typeTabActive_369z0_549 {
    border-color: var(--color-primary);
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    font-weight: 700;
}

/* ── Answer builder ─────────────────────────────────────── */
._answerBox_369z0_565 {
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    padding: 16px;
    background: #fafafa;
}

._answerRow_369z0_579 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    margin-bottom: 10px;
}

._answerRow_369z0_579:last-child {
    margin-bottom: 0;
}

._answerRowCorrect_369z0_609 {
    border-color: #86efac;
    background: #f0fdf4;
}

._optionKeyBadge_369z0_619 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

._answerInput_369z0_647 {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    outline: none;
}

._answerInput_369z0_647:focus {
    border-color: var(--color-primary);
}

._correctToggle_369z0_673 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

._correctToggleOff_369z0_703 {
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

._removeAnswerBtn_369z0_715 {
    background: #fee2e2;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ef4444;
    flex-shrink: 0;
    padding: 0;
}

._addAnswerBtn_369z0_745 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px dashed var(--color-primary);
    color: var(--color-primary);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 4px;
}

._addAnswerBtn_369z0_745:hover {
    background: var(--color-primary-lightest);
}

/* ── File upload ─────────────────────────────────────────── */
._fileDrop_369z0_785 {
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    font-size: 12.5px;
    color: #64748b;
    transition: all 0.15s;
}

._fileDrop_369z0_785:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lightest);
}

._filePreviewImg_369z0_819 {
    max-width: 100%;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
}

._fileChip_369z0_835 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
}

._fileChip_369z0_835 button {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    padding: 0;
    opacity: 0.75;
}

/* ── Toggle switches ────────────────────────────────────── */
._toggleGrid_369z0_883 {
    display: flex;
    gap: 24px;
    margin-top: 18px;
    flex-wrap: wrap;
}

._toggleSwitch_369z0_897 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

._toggleSwitch_369z0_897 input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

._toggleSlider_369z0_927 {
    width: 38px;
    height: 21px;
    background: #e2e8f0;
    border-radius: 999px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

._toggleSlider_369z0_927::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 2.5px;
    left: 3px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

._toggleSwitch_369z0_897 input:checked+._toggleSlider_369z0_927 {
    background: var(--color-primary);
}

._toggleSwitch_369z0_897 input:checked+._toggleSlider_369z0_927::before {
    left: 19px;
}

._toggleLabel_369z0_989 {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* ── Difficulty / type badges ───────────────────────────── */
._diffBadge_369z0_1003 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

._typeBadge_369z0_1025 {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

._badge_369z0_1045 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* ── Table cells (List page) ────────────────────────────── */
._nameCell_369z0_1067 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 320px;
}

._nameMain_369z0_1081 {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

._nameSub_369z0_1101 {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

._scoreCell_369z0_1113 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 13px;
}

._thumbCell_369z0_1131 {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

/* ── Stats accordion (reuse Holiday pattern) ────────────── */
._statsAccordion_369z0_1149 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

._accordionHeader_369z0_1165 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
}

._accordionTitle_369z0_1183 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

._accordionToggle_369z0_1201 {
    color: #94a3b8;
    display: flex;
}

._statsGrid_369z0_1211 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

._summaryCard_369z0_1225 {
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

._summaryLeft_369z0_1243 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

._summaryIcon_369z0_1257 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._summaryTitle_369z0_1277 {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

._summaryRight_369z0_1289 {
    text-align: right;
}

._summaryValue_369z0_1297 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

._summaryTrend_369z0_1309 {
    font-size: 10.5px;
    margin-top: 4px;
    font-weight: 600;
}

._trendUp_369z0_1321 {
    color: #16a34a;
}

._trendDown_369z0_1329 {
    color: #dc2626;
}

._trendNeutral_369z0_1337 {
    color: #94a3b8;
}

/* ── Table section wrapper ──────────────────────────────── */
._tableSection_369z0_1347 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

._tableHeader_369z0_1361 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

._sectionTitle_369z0_1379 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._sectionSub_369z0_1393 {
    font-size: 12px;
    color: #94a3b8;
    margin: 2px 0 0;
}

._filterBar_369z0_1405 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

._filterWrapper_369z0_1421 {
    flex: 1;
    min-width: 220px;
}

._filterBadge_369z0_1431 {
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ── Bulk selection bar ──────────────────────────────────── */
._bulkSelectedBar_369z0_1451 {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

._bulkSelectedLeft_369z0_1475 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._bulkCountBadge_369z0_1487 {
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
}

._bulkSelectedText_369z0_1505 {
    font-size: 12.5px;
    font-weight: 600;
    color: #374151;
}

._bulkBtnGroup_369z0_1517 {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

._bulkActionBtn_369z0_277 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
}

._bulkActionBtn_369z0_277:hover {
    background: #f8fafc;
}

._bulkDeselect_369z0_1565 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    flex-shrink: 0;
    padding: 0;
}

/* ── View page ───────────────────────────────────────────── */
._viewSummaryCard_369z0_1597 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

._viewColorBadge_369z0_1617 {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

._viewSummaryInfo_369z0_1639 h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

._viewSummaryMeta_369z0_1653 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

._viewCodeBadge_369z0_1667 {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

._viewTypeBadge_369z0_1685 {
    background: var(--color-primary-lightest);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
}

._viewStatusBadge_369z0_1703 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

._viewStatusActive_369z0_1723 {
    background: #dcfce7;
    color: #16a34a;
}

._viewStatusInactive_369z0_1733 {
    background: #fee2e2;
    color: #dc2626;
}

._viewGrid3_369z0_1743 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 16px;
}

._viewItem_369z0_1755 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

._viewLabel_369z0_1767 {
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

._viewValue_369z0_1783 {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
}

._viewDescription_369z0_1795 {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin: 6px 0 0;
}

._viewPill_369z0_1809 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    width: fit-content;
}

._viewPillGreen_369z0_1831 {
    background: #dcfce7;
    color: #16a34a;
}

._viewPillGray_369z0_1841 {
    background: #f1f5f9;
    color: #64748b;
}

._viewColorRow_369z0_1851 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._viewColorDot_369z0_1863 {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

._viewAnswerCard_369z0_1877 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 10px;
}

._viewAnswerCard_369z0_1877:last-child {
    margin-bottom: 0;
}

._viewAnswerCardCorrect_369z0_1907 {
    border-color: #86efac;
    background: #f0fdf4;
}

._viewAnswerBadge_369z0_1917 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

._viewAnswerBadgeCorrect_369z0_1945 {
    background: #16a34a;
    color: #fff;
}

._viewQuestionMedia_369z0_1955 {
    max-width: 100%;
    max-height: 260px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-top: 10px;
}

._linkRow_369z0_1971 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {

    ._formGrid3_369z0_365,
    ._viewGrid3_369z0_1743 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    ._formGrid3_369z0_365,
    ._formGrid2_369z0_377,
    ._viewGrid3_369z0_1743 {
        grid-template-columns: 1fr;
    }

    ._header_369z0_41 {
        flex-direction: column;
        align-items: stretch;
    }

    ._headerActions_369z0_147 {
        justify-content: flex-end;
    }
}:root {
  --bg: #f7f9fc;
  --panel: #ffffff;
  --text: #111827;
  --muted: #64748b;
  --line: #e7edf5;
  --primary: #6c63ff;
  --primary-2: #8b5cf6;
  --blue: #3b82f6;
  --pink: #ec4899;
  --teal: #14b8a6;
  --green: #22c55e;
  --orange: #f59e0b;
  --red: #ef4444;
  --cyan: #06b6d4;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  --radius: 10px;
  --transition: 0.2s ease;
}

/* ── Reset & Base ── */
._app_vku3o_43 {
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Toolbar ── */
._toolbar_vku3o_65 {
  display: grid;
  grid-template-columns: 140px minmax(200px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

._control_vku3o_81,
._search_vku3o_83,
._dateBox_vku3o_85 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 34px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

._control_vku3o_81 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 8px;
}

._control_vku3o_81 small {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._control_vku3o_81 strong {
  font-size: 11px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._search_vku3o_83 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--panel);
}

._search_vku3o_83 span {
  color: var(--muted);
  font-size: 13px;
}

._searchInput_vku3o_173 {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  font: inherit;
  padding: 4px 0;
  font-size: 12px;
}

._searchInput_vku3o_173::placeholder {
  color: var(--muted);
}

._primaryBtn_vku3o_201 {
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 8px 14px;
  cursor: pointer;
  background: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

._primaryBtn_vku3o_201:hover {
  background: #5d36c9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(93, 54, 201, 0.3);
}

._primaryBtn_vku3o_201:active {
  transform: translateY(0);
}

._dateBox_vku3o_85 {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #334155;
  font-size: 11px;
  white-space: nowrap;
}

/* ── Status Bar ── */
._statusBar_vku3o_271 {
  display: none;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
}

._statusBar_vku3o_271._show_vku3o_289 {
  display: block;
  animation: _fadeIn_vku3o_1 0.3s ease;
}

._statusBar_vku3o_271._loading_vku3o_299 {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

._statusBar_vku3o_271._error_vku3o_311 {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

._statusBar_vku3o_271._success_vku3o_323 {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* ── KPI Grid ── */
._kpis_vku3o_337 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

._kpi_vku3o_337 {
  min-height: 64px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}

._kpi_vku3o_337:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

._kpiIcon_vku3o_389 {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  flex: 0 0 auto;
}

/* Pastel HrMetrics-style icon tints (solid bg + colored icon, not gradients) */
._blue_vku3o_413 {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

._green_vku3o_421 {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

._orange_vku3o_429 {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}

._red_vku3o_437 {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

._purple_vku3o_445 {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

._cyan_vku3o_453 {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

._kpiContent_vku3o_461 {
  flex: 1;
  min-width: 0;
}

._kpiLabel_vku3o_471 {
  color: #334155;
  font-size: 10px;
  font-weight: 500;
}

._kpiValue_vku3o_483 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 1px;
}

._kpiSub_vku3o_497 {
  color: var(--muted);
  font-size: 9px;
  margin-top: 2px;
}

._kpiViewBtn_vku3o_509 {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 9px;
  font-family: inherit;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

._kpiViewBtn_vku3o_509:hover {
  background: #ede9fe;
  color: #5b21b6;
}

._kpiViewBtn_vku3o_509:active {
  transform: scale(0.95);
}

/* ── Response Metrics ── */
._responseMetricsSection_vku3o_561 {
  margin-bottom: 12px;
}

._responseMetricsHead_vku3o_569 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

._responseMetricsHead_vku3o_569 h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

._detailSub_vku3o_599 {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

._responseMetricsGrid_vku3o_611 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

._responseMetricCard_vku3o_623 {
  padding: 8px 10px;
  min-height: 68px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

._responseMetricCard_vku3o_623:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

._responseMetricTop_vku3o_655 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

._responseMetricIcon_vku3o_669 {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 12px;
}

._responseMetricLabel_vku3o_689 {
  color: #334155;
  font-size: 9px;
  font-weight: 700;
  margin-top: 6px;
}

._responseMetricValue_vku3o_703 {
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
}

._responseMetricSub_vku3o_715 {
  color: var(--muted);
  font-size: 8px;
  margin-top: 2px;
  line-height: 1.3;
}

/* ── Grid Layouts ── */
._mainGrid_vku3o_731 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

._bottomGrid_vku3o_745 {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 10px;
  margin-bottom: 12px;
}

._panel_vku3o_759 {
  padding: 10px 12px;
  min-height: 200px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

._panel_vku3o_759:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

._panelHead_vku3o_791 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

._panelHead_vku3o_791 h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

._linkBtn_vku3o_821 {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 10px;
  font-family: inherit;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background var(--transition);
}

._linkBtn_vku3o_821:hover {
  background: #ede9fe;
}

/* ── Chart Containers ── */
._chartWrap_vku3o_857 {
  height: 150px;
  flex: 1;
  min-height: 0;
}

._donutLayout_vku3o_869 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 6px;
  flex: 1;
}

._donutWrap_vku3o_885 {
  height: 140px;
  position: relative;
}

._legendList_vku3o_895 {
  display: grid;
  gap: 6px;
}

._legendRow_vku3o_905 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
}

._legendLabel_vku3o_921 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._dot_vku3o_933 {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* ── Donut Center Overlay ── */
._donutCenter_vku3o_949 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  width: 80%;
  max-width: 140px;
}

._donutCenter_vku3o_949 strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

._donutCenter_vku3o_949 span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

._donutCenter_vku3o_949 div div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
}

._donutCenter_vku3o_949 div div b {
  font-weight: 700;
  color: var(--text);
}

/* ── Recent Cards ── */
._recentList_vku3o_1029 {
  display: grid;
  gap: 4px;
  flex: 1;
}

._recentItem_vku3o_1041 {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  padding-bottom: 4px;
  cursor: pointer;
  transition: background var(--transition);
  padding: 4px 3px;
  border-radius: 5px;
}

._recentItem_vku3o_1041:last-child {
  border-bottom: 0;
}

._recentItem_vku3o_1041:hover {
  background: #f8fafc;
}

._recentIcon_vku3o_1083 {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: #ede9fe;
  color: #6c63ff;
  flex: 0 0 auto;
  font-size: 10px;
}

._recentTitle_vku3o_1107 {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

._recentMeta_vku3o_1127 {
  color: var(--muted);
  font-size: 9px;
  margin-top: 1px;
}

/* ── Pills ── */
._pill_vku3o_1141 {
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  display: inline-block;
}

._pill_vku3o_1141._open_vku3o_1159 {
  background: #dbeafe;
  color: #1d4ed8;
}

._pill_vku3o_1141._done_vku3o_1169 {
  background: #d1fae5;
  color: #15803d;
}

._pill_vku3o_1141._warn_vku3o_1179 {
  background: #fef3c7;
  color: #c2410c;
}

/* ── Rank List ── */
._rankList_vku3o_1191 {
  display: grid;
  gap: 6px;
  flex: 1;
}

._rankRow_vku3o_1203 {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

._avatar_vku3o_1219 {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ede9fe;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 10px;
  color: #6c63ff;
  flex: 0 0 auto;
}

._rankName_vku3o_1245 {
  font-weight: 700;
  font-size: 11px;
}

._rankMeta_vku3o_1255 {
  font-size: 9px;
  color: var(--muted);
  margin-top: 1px;
}

._progress_vku3o_1267 {
  height: 3px;
  border-radius: 99px;
  background: #eef2f7;
  overflow: hidden;
  margin-top: 3px;
}

._progress_vku3o_1267 span {
  display: block;
  height: 100%;
  background: #6c63ff;
}

/* ── Footer Metrics ── */
._footerMetrics_vku3o_1297 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

._footerItem_vku3o_1315 {
  min-height: 56px;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

._footerItem_vku3o_1315:last-child {
  border-right: 0;
}

._footerLabel_vku3o_1343 {
  color: #334155;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._footerValue_vku3o_1359 {
  font-size: 14px;
  font-weight: 800;
  margin-top: 2px;
}

._footerSub_vku3o_1371 {
  color: var(--muted);
  font-size: 9px;
  margin-top: 2px;
}

._footerViewBtn_vku3o_1383 {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 9px;
  font-family: inherit;
  padding: 1px 6px;
  border-radius: 3px;
  transition: background var(--transition), color var(--transition);
  align-self: flex-end;
  margin-bottom: 2px;
}

._footerViewBtn_vku3o_1383:hover {
  background: #ede9fe;
  color: #5b21b6;
}

._footerViewBtn_vku3o_1383:active {
  transform: scale(0.95);
}

/* ── Availability Panel ── */
._availabilityPanel_vku3o_1433 {
  margin-bottom: 12px;
  padding: 10px 12px;
}

._card_vku3o_1443 {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

._card_vku3o_1443:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

._availabilityUserGrid_vku3o_1467 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

._availabilityUserCard_vku3o_1479 {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: #fbfaff;
  transition: transform var(--transition), box-shadow var(--transition);
}

._availabilityUserCard_vku3o_1479:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

._availabilityUserTop_vku3o_1505 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._availabilityWorkload_vku3o_1517 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}

._availabilityWorkload_vku3o_1517 div {
  text-align: center;
  padding: 4px 3px;
  border-radius: 5px;
  background: #f1f5f9;
  transition: background var(--transition);
}

._availabilityWorkload_vku3o_1517 div:hover {
  background: #e8ecf2;
}

._availabilityWorkload_vku3o_1517 strong {
  display: block;
  font-size: 11px;
}

._availabilityWorkload_vku3o_1517 small {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._availabilityCardActions_vku3o_1579 {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  border-top: 1px solid #eef2f7;
  padding-top: 6px;
}

/* ── Member Cards ── */
._memberCards_vku3o_1597 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  flex: 1;
}

._memberProfile_vku3o_1611 {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: #fbfaff;
  transition: transform var(--transition), box-shadow var(--transition);
}

._memberProfile_vku3o_1611:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

._memberProfileHead_vku3o_1637 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

._memberPhoto_vku3o_1651 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #ede9fe;
  display: grid;
  place-items: center;
  color: #6c63ff;
  font-weight: 800;
  font-size: 10px;
  flex: 0 0 auto;
}

._memberProfileName_vku3o_1679 {
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-word;
}

._memberProfileEmail_vku3o_1693,
._memberProfileMeta_vku3o_1695 {
  color: var(--muted);
  font-size: 9px;
  margin-top: 1px;
  word-break: break-word;
}

._availability_vku3o_1433 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 800;
}

._availability_vku3o_1433._available_vku3o_1731 {
  background: #d1fae5;
  color: #15803d;
}

._availability_vku3o_1433._busy_vku3o_1741 {
  background: #fef3c7;
  color: #c2410c;
}

._availability_vku3o_1433._unknown_vku3o_1751 {
  background: #f1f5f9;
  color: #475569;
}

._memberProfileActions_vku3o_1761 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eef2f7;
}

._memberWorkload_vku3o_1781 {
  font-size: 9px;
  color: #475569;
}

/* ── People Grid ── */
._peopleGrid_vku3o_1793 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

._personCard_vku3o_1805 {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  background: #fbfdff;
  min-width: 0;
}

._personCard_vku3o_1805 ._memberPhoto_vku3o_1651 {
  width: 28px;
  height: 28px;
}

/* ── Detail Modal ── */
._detailBox_vku3o_1839 {
  width: min(1050px, 96vw);
  padding: 0;
  overflow: hidden;
}

._detailHeader_vku3o_1851 {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfaff;
}

._detailTitle_vku3o_1863 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

._detailBody_vku3o_1875 {
  padding: 12px 16px;
  max-height: 72vh;
  overflow: auto;
}

._detailGrid_vku3o_1887 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

._detailStat_vku3o_1901 {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: #fbfdff;
}

._detailStat_vku3o_1901 small {
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

._detailStat_vku3o_1901 strong {
  font-size: 12px;
  word-break: break-word;
}

._detailSection_vku3o_1943 {
  margin-top: 12px;
}

._detailSection_vku3o_1943 h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}

/* ── Chips ── */
._chipWrap_vku3o_1965 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

._chip_vku3o_1965 {
  padding: 3px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 9px;
  font-weight: 700;
}

._chip_vku3o_1965._role_vku3o_1995 {
  background: #fce7f3;
  color: #9d174d;
}

._chip_vku3o_1965._team_vku3o_2005 {
  background: #ccfbf1;
  color: #0f766e;
}

._chip_vku3o_1965._label_vku3o_2015 {
  background: #f1f5f9;
  color: #334155;
}

/* ── Description ── */
._descriptionBox_vku3o_2027 {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: #334155;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Action Row ── */
._actionRow_vku3o_2053 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

._secondaryBtn_vku3o_2067 {
  border: 1px solid var(--line);
  background: white;
  color: #334155;
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
  font: inherit;
  font-size: 11px;
  transition: var(--transition);
}

._secondaryBtn_vku3o_2067:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ── File, Activity, Checklist Lists ── */
._fileList_vku3o_2105,
._activityList_vku3o_2107,
._checklistList_vku3o_2109,
._commentList_vku3o_2111,
._fieldList_vku3o_2113 {
  display: grid;
  gap: 5px;
}

._detailListItem_vku3o_2123 {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
  background: #fbfdff;
  font-size: 10px;
  line-height: 1.4;
}

._detailListTitle_vku3o_2141 {
  font-weight: 800;
  color: #172033;
  word-break: break-word;
}

._detailListMeta_vku3o_2153 {
  color: var(--muted);
  margin-top: 2px;
  font-size: 9px;
  word-break: break-word;
}

._fileLink_vku3o_2167 {
  display: inline-flex;
  margin-top: 4px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 10px;
}

._fileLink_vku3o_2167:hover {
  text-decoration: underline;
}

._timelineDot_vku3o_2193 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  margin-right: 4px;
}

._detailId_vku3o_2211 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  color: #475569;
  word-break: break-all;
}

/* ── List Count Badges ── */
._listCounts_vku3o_2227 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 0;
}

._listCountBadge_vku3o_2243 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--line);
}

._listCountBadge_vku3o_2243._open_vku3o_1159 {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

._listCountBadge_vku3o_2243._done_vku3o_1169 {
  background: #d1fae5;
  color: #15803d;
  border-color: #bbf7d0;
}

._listCountBadge_vku3o_2243._warn_vku3o_1179 {
  background: #fef3c7;
  color: #c2410c;
  border-color: #fed7aa;
}

/* ── Modals ── */
._modal_vku3o_2305 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  display: none;
  place-items: center;
  padding: 12px;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: _fadeIn_vku3o_1 0.2s ease;
}

._modal_vku3o_2305._show_vku3o_289 {
  display: grid;
}

._modalBox_vku3o_2337 {
  width: min(920px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: white;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.15);
  animation: _slideUp_vku3o_1 0.25s ease;
}

._modalTop_vku3o_2359 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

._close_vku3o_2373 {
  border: 0;
  background: #eef2f7;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background var(--transition);
  display: grid;
  place-items: center;
}

._close_vku3o_2373:hover {
  background: #e2e8f0;
}

._modalBox_vku3o_2337 pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #0f172a;
  color: #dbeafe;
  padding: 12px;
  border-radius: var(--radius);
  font-size: 10px;
  max-height: 60vh;
  overflow: auto;
}

/* ── List Modal ── */
._listModalBox_vku3o_2433 {
  width: min(1120px, 96vw);
  padding: 0;
  overflow: hidden;
}

._listToolbar_vku3o_2445 {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

._listBody_vku3o_2463 {
  padding: 10px 14px;
  max-height: 72vh;
  overflow: auto;
}

/* ── Tables ── */
._tableWrapper_vku3o_2477 {
  overflow-x: auto;
  margin: 0 -4px;
}

._dataTable_vku3o_2487 {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  min-width: 600px;
}

._dataTable_vku3o_2487 th {
  text-align: left;
  color: black !important;
  font-weight: 700;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  /* position: sticky; */
  top: 0;
  background: white;
  z-index: 1;
}

._dataTable_vku3o_2487 td {
  padding: 6px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

._dataTable_vku3o_2487 tr:hover td {
  background: #fafcff;
}

._tableTitle_vku3o_2545 {
  font-weight: 750;
  max-width: 420px;
  word-break: break-word;
}

/* ── Empty & Loading States ── */
._emptyState_vku3o_2559 {
  text-align: center;
  color: var(--muted);
  padding: 24px 12px;
  font-size: 12px;
}

._loadingBox_vku3o_2573 {
  text-align: center;
  color: var(--primary);
  padding: 24px 12px;
  font-size: 12px;
}

/* ── Shimmer Effect ── */
._shimmer_vku3o_2589 {
  background: linear-gradient(90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%);
  background-size: 200% 100%;
  animation: _shimmer_vku3o_2589 1.5s ease-in-out infinite;
  border-radius: 5px;
}

@keyframes _shimmer_vku3o_2589 {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ── Animations ── */
@keyframes _fadeIn_vku3o_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes _slideUp_vku3o_1 {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Clickable ── */
._clickable_vku3o_2677 {
  cursor: pointer;
  transition: transform var(--transition);
}

._clickable_vku3o_2677:hover {
  transform: translateY(-1px);
}

/* ── Responsive Breakpoints ── */

/* 1400px and below */
@media (max-width: 1400px) {
  ._responseMetricsGrid_vku3o_611 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._mainGrid_vku3o_731 {
    grid-template-columns: 1fr 1fr;
  }

  ._mainGrid_vku3o_731> :first-child {
    grid-column: 1 / -1;
  }

  ._bottomGrid_vku3o_745 {
    grid-template-columns: 1fr 1fr;
  }

  ._footerMetrics_vku3o_1297 {
    grid-template-columns: repeat(4, 1fr);
  }

  ._footerItem_vku3o_1315:nth-child(4) {
    border-right: 0;
  }
}

/* 1200px and below */
@media (max-width: 1200px) {
  ._kpis_vku3o_337 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._availabilityUserGrid_vku3o_1467 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._memberCards_vku3o_1597 {
    grid-template-columns: 1fr 1fr;
  }

  ._detailGrid_vku3o_1887 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._peopleGrid_vku3o_1793 {
    grid-template-columns: 1fr 1fr;
  }
}

/* 1024px and below */
@media (max-width: 1024px) {
  ._toolbar_vku3o_65 {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  ._control_vku3o_81,
  ._search_vku3o_83,
  ._dateBox_vku3o_85 {
    min-height: 30px;
  }

  ._control_vku3o_81 strong {
    font-size: 11px;
  }

  ._searchInput_vku3o_173 {
    font-size: 12px;
  }

  ._primaryBtn_vku3o_201 {
    padding: 8px 12px;
    width: 100%;
    text-align: center;
    font-size: 12px;
  }

  ._responseMetricsGrid_vku3o_611 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._mainGrid_vku3o_731 {
    grid-template-columns: 1fr;
  }

  ._mainGrid_vku3o_731> :first-child {
    grid-column: auto;
  }

  ._bottomGrid_vku3o_745 {
    grid-template-columns: 1fr;
  }

  ._donutLayout_vku3o_869 {
    grid-template-columns: 1fr 1fr;
  }

  ._footerMetrics_vku3o_1297 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._footerItem_vku3o_1315:nth-child(3) {
    border-right: 0;
  }

  ._footerItem_vku3o_1315:nth-child(4) {
    border-right: 1px solid var(--line);
  }
}

/* 768px and below */
@media (max-width: 768px) {
  ._app_vku3o_43 {
    padding: 6px;
  }

  ._kpis_vku3o_337 {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  ._kpi_vku3o_337 {
    min-height: 56px;
    padding: 6px 8px;
  }

  ._kpiIcon_vku3o_389 {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  ._kpiValue_vku3o_483 {
    font-size: 16px;
  }

  ._responseMetricsGrid_vku3o_611 {
    grid-template-columns: 1fr 1fr;
  }

  ._responseMetricCard_vku3o_623 {
    min-height: 60px;
    padding: 6px 8px;
  }

  ._panel_vku3o_759 {
    padding: 8px 10px;
    min-height: 160px;
  }

  ._availabilityUserGrid_vku3o_1467 {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  ._memberCards_vku3o_1597 {
    grid-template-columns: 1fr;
  }

  ._detailGrid_vku3o_1887 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._peopleGrid_vku3o_1793 {
    grid-template-columns: 1fr;
  }

  ._footerMetrics_vku3o_1297 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._footerItem_vku3o_1315 {
    padding: 6px 8px;
    min-height: 44px;
  }

  ._footerItem_vku3o_1315:nth-child(even) {
    border-right: 0;
  }

  ._footerItem_vku3o_1315:nth-child(3) {
    border-right: 1px solid var(--line);
  }

  ._modalBox_vku3o_2337 {
    padding: 10px;
    width: 98vw;
  }

  ._detailBox_vku3o_1839 {
    width: 98vw;
  }

  ._detailBody_vku3o_1875 {
    padding: 10px;
  }

  ._detailHeader_vku3o_1851 {
    padding: 10px;
  }

  ._detailTitle_vku3o_1863 {
    font-size: 14px;
  }

  ._listModalBox_vku3o_2433 {
    width: 98vw;
  }

  ._listToolbar_vku3o_2445 {
    padding: 8px 10px;
  }

  ._listBody_vku3o_2463 {
    padding: 8px 10px;
  }

  ._dataTable_vku3o_2487 {
    font-size: 9px;
    min-width: 500px;
  }

  ._dataTable_vku3o_2487 th,
  ._dataTable_vku3o_2487 td {
    padding: 5px 4px;
  }

  ._tableTitle_vku3o_2545 {
    max-width: 200px;
  }

  ._chartWrap_vku3o_857 {
    height: 130px;
  }

  ._donutWrap_vku3o_885 {
    height: 120px;
  }
}

/* 480px and below */
@media (max-width: 480px) {
  ._app_vku3o_43 {
    padding: 4px;
  }

  ._kpis_vku3o_337 {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  ._kpi_vku3o_337 {
    min-height: 48px;
    padding: 5px 6px;
    gap: 5px;
  }

  ._kpiIcon_vku3o_389 {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  ._kpiValue_vku3o_483 {
    font-size: 14px;
  }

  ._kpiLabel_vku3o_471 {
    font-size: 9px;
  }

  ._kpiSub_vku3o_497 {
    font-size: 8px;
  }

  ._kpiViewBtn_vku3o_509 {
    font-size: 7px;
    padding: 1px 4px;
  }

  ._responseMetricsGrid_vku3o_611 {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  ._responseMetricCard_vku3o_623 {
    min-height: 52px;
    padding: 5px 6px;
  }

  ._responseMetricValue_vku3o_703 {
    font-size: 14px;
  }

  ._responseMetricLabel_vku3o_689 {
    font-size: 8px;
  }

  ._panelHead_vku3o_791 h3 {
    font-size: 11px;
  }

  ._availabilityUserGrid_vku3o_1467 {
    grid-template-columns: 1fr;
  }

  ._availabilityUserCard_vku3o_1479 {
    padding: 6px 8px;
  }

  ._detailGrid_vku3o_1887 {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  ._detailStat_vku3o_1901 {
    padding: 5px;
  }

  ._detailStat_vku3o_1901 strong {
    font-size: 11px;
  }

  ._detailStat_vku3o_1901 small {
    font-size: 8px;
  }

  ._footerMetrics_vku3o_1297 {
    grid-template-columns: 1fr 1fr;
  }

  ._footerItem_vku3o_1315 {
    padding: 5px 6px;
    min-height: 38px;
  }

  ._footerValue_vku3o_1359 {
    font-size: 12px;
  }

  ._footerLabel_vku3o_1343 {
    font-size: 8px;
  }

  ._footerSub_vku3o_1371 {
    font-size: 8px;
  }

  ._footerViewBtn_vku3o_1383 {
    font-size: 8px;
    padding: 1px 4px;
  }

  ._modalBox_vku3o_2337 {
    padding: 8px;
    border-radius: var(--radius);
  }

  ._detailBox_vku3o_1839 {
    border-radius: var(--radius);
  }

  ._listModalBox_vku3o_2433 {
    border-radius: var(--radius);
  }

  ._dataTable_vku3o_2487 {
    font-size: 8px;
    min-width: 400px;
  }

  ._dataTable_vku3o_2487 th,
  ._dataTable_vku3o_2487 td {
    padding: 4px 3px;
  }

  ._tableTitle_vku3o_2545 {
    max-width: 120px;
  }

  ._primaryBtn_vku3o_201 {
    padding: 6px 10px;
    font-size: 11px;
  }

  ._chartWrap_vku3o_857 {
    height: 110px;
  }

  ._donutWrap_vku3o_885 {
    height: 100px;
  }

  ._donutLayout_vku3o_869 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  ._legendRow_vku3o_905 {
    font-size: 9px;
  }

  ._memberProfile_vku3o_1611 {
    padding: 6px;
  }

  ._memberPhoto_vku3o_1651 {
    width: 26px;
    height: 26px;
  }

  ._memberProfileName_vku3o_1679 {
    font-size: 10px;
  }

  ._memberProfileEmail_vku3o_1693,
  ._memberProfileMeta_vku3o_1695 {
    font-size: 8px;
  }

  ._personCard_vku3o_1805 {
    padding: 5px 6px;
  }

  ._personCard_vku3o_1805 ._memberPhoto_vku3o_1651 {
    width: 26px;
    height: 26px;
  }

  ._search_vku3o_83 span {
    font-size: 12px;
  }

  ._searchInput_vku3o_173 {
    font-size: 11px;
  }

  ._dateBox_vku3o_85 {
    font-size: 9px;
  }

  ._modalTop_vku3o_2359 h2 {
    font-size: 14px !important;
  }

  ._close_vku3o_2373 {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  ._rankRow_vku3o_1203 {
    grid-template-columns: 22px 1fr auto;
  }

  ._avatar_vku3o_1219 {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }

  ._rankName_vku3o_1245 {
    font-size: 10px;
  }

  ._rankMeta_vku3o_1255 {
    font-size: 8px;
  }

  ._recentItem_vku3o_1041 {
    grid-template-columns: 22px 1fr auto;
  }

  ._recentIcon_vku3o_1083 {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }

  ._recentTitle_vku3o_1107 {
    font-size: 9px;
  }

  ._recentMeta_vku3o_1127 {
    font-size: 8px;
  }

  ._pill_vku3o_1141 {
    padding: 2px 5px;
    font-size: 7px;
  }

  ._listCountBadge_vku3o_2243 {
    font-size: 9px;
    padding: 2px 6px;
  }

  ._donutCenter_vku3o_949 strong {
    font-size: 20px;
  }

  ._donutCenter_vku3o_949 span {
    font-size: 9px;
  }

  ._donutCenter_vku3o_949 div div {
    font-size: 8px;
  }

  ._donutCenter_vku3o_949 {
    max-width: 100px;
  }
}

/* 360px and below */
@media (max-width: 360px) {
  ._kpis_vku3o_337 {
    grid-template-columns: 1fr;
  }

  ._responseMetricsGrid_vku3o_611 {
    grid-template-columns: 1fr;
  }

  ._detailGrid_vku3o_1887 {
    grid-template-columns: 1fr;
  }

  ._footerMetrics_vku3o_1297 {
    grid-template-columns: 1fr;
  }

  ._footerItem_vku3o_1315 {
    border-right: 0;
  }

  ._footerItem_vku3o_1315:nth-child(3) {
    border-right: 0;
  }

  ._dataTable_vku3o_2487 {
    min-width: 320px;
  }

  ._donutCenter_vku3o_949 {
    max-width: 80px;
  }

  ._donutCenter_vku3o_949 strong {
    font-size: 18px;
  }
}


/* added */
/* ===== Pastel KPI Card Backgrounds ===== */

._kpiBlue_vku3o_3815 {
  background: #eef5ff;
}

._kpiGreen_vku3o_3823 {
  background: #edf9f1;
}

._kpiOrange_vku3o_3831 {
  background: #fff8eb;
}

._kpiRed_vku3o_3839 {
  background: #fff1f1;
}

._kpiPurple_vku3o_3847 {
  background: #f5f1ff;
}

._kpiYellow_vku3o_3855 {
  background: #fffbe8;
}

/* ===== Completion Overview Legend Alignment ===== */

._legendList_vku3o_895 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._legendRow_vku3o_905 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  gap: 20px;
}

._legendLabel_vku3o_921 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

._legendRow_vku3o_905 strong {
  text-align: right;
  white-space: nowrap;
  /* font-size:13px; */
  /* font-weight:700; */
}

/* ===== Smaller Trello User Cards ===== */

._availabilityUserGrid_vku3o_1467 {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

._availabilityUserCard_vku3o_1479 {
  padding: 10px;
  min-height: 140px;
}

._memberPhoto_vku3o_1651 {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

._memberProfileName_vku3o_1679 {
  font-size: 12px;
}

._memberProfileEmail_vku3o_1693,
._memberProfileMeta_vku3o_1695 {
  font-size: 10px;
}

._availabilityWorkload_vku3o_1517 {
  margin-top: 8px;
  gap: 6px;
}

._availabilityWorkload_vku3o_1517 strong {
  font-size: 12px;
}

._availabilityWorkload_vku3o_1517 small {
  font-size: 8px;
}

._availabilityCardActions_vku3o_1579 {
  margin-top: 8px;
  padding-top: 8px;
}

._availabilityCardActions_vku3o_1579 ._linkBtn_vku3o_821 {
  font-size: 10px;
  padding: 2px 6px;
}


._spinner_vku3o_4029 {
  font-size: 18px;
  animation: _spin_vku3o_4029 0.8s linear infinite;
}

@keyframes _spin_vku3o_4029 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

._primaryBtn_vku3o_201:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}/* ── Global Animations ── */
@keyframes _cr-fadeUp_lyhdr_1 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _cr-pulse_lyhdr_1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes _spin_lyhdr_1453 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes _wave_lyhdr_505 {
  from {
    height: 3px;
  }

  to {
    height: 24px;
  }
}

@keyframes _pulse_lyhdr_1 {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0.08);
  }
}

/* ── Page Layout ── */
._page_lyhdr_109 {
  min-height: 100vh;
  background: var(--color-gray-100);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  font-family: "Inter", -apple-system, sans-serif;
}

._container_lyhdr_129 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Header Card ── */
._headerCard_lyhdr_147 {
  background: var(--color-white);
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  flex-wrap: wrap;
  gap: 12px;
}

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

._headerIcon_lyhdr_183 {
  width: 38px;
  height: 38px;
  background: var(--gradient-icon-box);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 18px;
}

._headerTitle_lyhdr_207 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gray-900);
}

._headerSub_lyhdr_221 {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-gray-500);
}

/* ── Query Card ── */
._queryCard_lyhdr_235 {
  background: var(--color-white);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

._queryLabel_lyhdr_255 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
}

._inputRow_lyhdr_269 {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

._textInput_lyhdr_281 {
  flex: 1;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--color-gray-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

._textInput_lyhdr_281:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

._textInput_lyhdr_281:disabled {
  background: var(--color-gray-100);
  cursor: not-allowed;
}

._textInput_lyhdr_281::placeholder {
  color: var(--color-gray-400);
}

._sendBtn_lyhdr_333 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  border-radius: 10px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

._sendBtn_lyhdr_333:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

._sendBtnDisabled_lyhdr_377 {
  opacity: 0.6;
  cursor: not-allowed;
}

._sendBtnDisabled_lyhdr_377:hover {
  transform: none;
  box-shadow: none;
}

/* ── Voice Row ── */
._voiceRow_lyhdr_399 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

._voiceLeft_lyhdr_413 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

._voiceLabel_lyhdr_427 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
}

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

._micBtn_lyhdr_453 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

._micBtn_lyhdr_453:hover {
  background: var(--gradient-primary-hover);
  transform: scale(1.05);
}

._micBtnRecording_lyhdr_493 {
  background: var(--color-red-error);
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18);
  animation: _pulse_lyhdr_1 1s infinite;
}

._waveformWrap_lyhdr_505 {
  flex: 1;
  min-width: 200px;
  background: var(--color-primary-lightest);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

._waveform_lyhdr_505 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
}

._waveformBar_lyhdr_543 {
  width: 2px;
  border-radius: 2px;
  background: var(--color-primary-lighter);
  flex: 1 1 0;
  transition: height 0.1s;
}

._timer_lyhdr_559 {
  font-size: 12px;
  color: var(--color-gray-500);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

._voiceHint_lyhdr_573 {
  font-size: 11px;
  color: var(--color-gray-400);
  margin: 0;
}

/* ── Response Card ── */
._responseCard_lyhdr_587 {
  background: var(--color-white);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  animation: _cr-fadeUp_lyhdr_1 0.4s ease;
}

._responseHeader_lyhdr_603 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-violet-bg-alt);
}

._responseTitleRow_lyhdr_621 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._responseTitle_lyhdr_621 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gray-900);
}

._responseActions_lyhdr_647 {
  display: flex;
  gap: 8px;
}

._outlineBtn_lyhdr_657 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 8px;
  background: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.15s;
}

._outlineBtn_lyhdr_657:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  transform: translateY(-1px);
}

._responseBody_lyhdr_701 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

._responseLeft_lyhdr_713 {
  min-width: 0;
}

/* ── Query Info ── */
._queryInfo_lyhdr_723 {
  background: var(--color-primary-warm);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-left: 3px solid var(--color-primary);
}

._queryLabel_lyhdr_255 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

._queryText_lyhdr_755 {
  font-size: 14px;
  color: var(--color-gray-900);
  font-weight: 500;
  margin-left: 8px;
}

/* ── Answer Box ── */
._answerBox_lyhdr_771 {
  background: var(--color-primary-lightest);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

._answerIcon_lyhdr_791 {
  width: 34px;
  height: 34px;
  background: var(--color-violet-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

._answerText_lyhdr_815 {
  margin: 0;
  font-size: 14px;
  color: var(--color-violet-dark);
  font-weight: 500;
  line-height: 1.5;
}

/* ── Result Status ── */
._resultStatus_lyhdr_833 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 8px 14px;
  background: var(--color-slate-50);
  border-radius: 8px;
}

._statusBadge_lyhdr_853 {
  font-size: 13px;
  color: var(--color-gray-700);
}

._statusBadge_lyhdr_853 strong {
  color: var(--color-primary);
}

._operationBadge_lyhdr_871 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-500);
  background: var(--color-gray-200);
  padding: 2px 12px;
  border-radius: 99px;
}

/* ── Dynamic Content ── */
._dynamicContent_lyhdr_891 {
  width: 100%;
}

/* Key-Value Grid */
._keyValueGrid_lyhdr_901 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: var(--color-slate-50);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

._keyValueItem_lyhdr_921 {
  display: flex;
  align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-gray-100);
}

._keyValueItem_lyhdr_921:last-child {
  border-bottom: none;
}

._keyLabel_lyhdr_943 {
  font-weight: 600;
  color: var(--color-gray-700);
  min-width: 140px;
  font-size: 12px;
  text-transform: capitalize;
}

._valueContent_lyhdr_959 {
  color: var(--color-gray-800);
  font-size: 13px;
  word-break: break-word;
}

/* Simple List */
._simpleList_lyhdr_973 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 8px 0;
}

._listItem_lyhdr_987 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

._listItem_lyhdr_987:hover {
  background: var(--color-gray-100);
}

._itemIndex_lyhdr_1013 {
  font-size: 11px;
  color: var(--color-gray-400);
  min-width: 24px;
}

._itemValue_lyhdr_1025 {
  font-size: 13px;
  color: var(--color-gray-800);
}

/* ── Table Styles ── */
._tableWrap_lyhdr_1037 {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-gray-200);
  max-height: 500px;
  overflow-y: auto;
  margin: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-lighter) var(--color-violet-bg);
}

._tableWrap_lyhdr_1037::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

._tableWrap_lyhdr_1037::-webkit-scrollbar-track {
  background: var(--color-violet-bg);
}

._tableWrap_lyhdr_1037::-webkit-scrollbar-thumb {
  background: var(--color-primary-lighter);
  border-radius: 10px;
}

._responseTable_lyhdr_1089 {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 12px;
}

._responseTable_lyhdr_1089 ._th_lyhdr_1103 {
  text-align: left;
  padding: 10px 14px;
  background: var(--color-violet-bg-alt);
  color: var(--color-gray-500);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-violet-border);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

._responseTable_lyhdr_1089 ._td_lyhdr_1135 {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-900);
  font-size: 12px;
  max-width: 300px;
  word-break: break-word;
}

._responseTable_lyhdr_1089 ._tdNum_lyhdr_1153 {
  color: var(--color-gray-400);
  width: 30px;
  text-align: center;
  font-weight: 600;
}

._responseTable_lyhdr_1089 tbody tr {
  transition: background 0.15s;
}

._responseTable_lyhdr_1089 tbody tr:hover {
  background: var(--color-primary-warm);
}

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

/* ── Summary Response ── */
._summaryResponse_lyhdr_1193 {
  background: var(--color-slate-50);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

._summaryStats_lyhdr_1207 {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-gray-200);
}

._statItem_lyhdr_1223 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

._statLabel_lyhdr_1235 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: capitalize;
}

._statValue_lyhdr_1249 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

._summaryTitle_lyhdr_1261 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 8px;
  text-transform: capitalize;
}

/* ── Nested Object ── */
._nestedObject_lyhdr_1279 {
  margin-top: 4px;
}

._nestedItem_lyhdr_1287 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

._nestedItem_lyhdr_1287:last-child {
  border-bottom: none;
}

._nestedKey_lyhdr_1311 {
  font-weight: 600;
  color: var(--color-gray-600);
  font-size: 12px;
}

._nestedValue_lyhdr_1323 {
  padding-left: 12px;
}

._primitiveValue_lyhdr_1331 {
  color: var(--color-gray-800);
  font-size: 13px;
}

._arrayCount_lyhdr_1341 {
  color: var(--color-gray-400);
  font-size: 12px;
  font-style: italic;
}

/* ── Primitive Response ── */
._primitiveResponse_lyhdr_1355 {
  background: var(--color-slate-50);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

._primitiveResponse_lyhdr_1355 ._primitiveValue_lyhdr_1331 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
}

/* ── Empty State ── */
._emptyState_lyhdr_1383 {
  color: var(--color-gray-400);
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

._noRecords_lyhdr_1397 {
  text-align: center;
  padding: 30px 20px;
  color: var(--color-gray-400);
}

._noRecords_lyhdr_1397 p {
  margin: 4px 0;
}

._noRecordsHint_lyhdr_1417 {
  font-size: 12px;
  color: var(--color-gray-400);
}

/* ── Loading ── */
._loadingRow_lyhdr_1429 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 0;
}

._loadingText_lyhdr_1443 {
  font-size: 14px;
  color: var(--color-gray-500);
}

._spinner_lyhdr_1453 {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: _spin_lyhdr_1453 0.7s linear infinite;
}

/* ── Employee Summary ── */
._employeeSummary_lyhdr_1473 {
  background: var(--color-slate-50);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 8px;
}

._summaryHeader_lyhdr_1489 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-gray-200);
}

._summaryIcon_lyhdr_1507 {
  font-size: 24px;
}

._summaryTitle_lyhdr_1261 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
}

._summaryTitle_lyhdr_1261 strong {
  color: var(--color-primary);
  font-size: 20px;
}

._employeeList_lyhdr_1537 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

._employeeList_lyhdr_1537::-webkit-scrollbar {
  width: 4px;
}

._employeeList_lyhdr_1537::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: 2px;
}

._employeeList_lyhdr_1537::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 2px;
}

._employeeItem_lyhdr_1583 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

._employeeItem_lyhdr_1583:hover {
  background: var(--color-gray-100);
}

._employeeNumber_lyhdr_1609 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gray-400);
  min-width: 24px;
}

._employeeName_lyhdr_1623 {
  font-size: 13px;
  color: var(--color-gray-800);
  font-weight: 500;
}

/* ── Status Pills ── */
._statusPill_lyhdr_1637 {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}

._statusOpen_lyhdr_1653 {
  background: var(--color-green-bg);
  color: var(--color-green);
}

._statusClosed_lyhdr_1663 {
  background: var(--color-red-bg);
  color: var(--color-red);
}

._labelPill_lyhdr_1673 {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-white);
}

._cardLink_lyhdr_1693 {
  font-size: 11px;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}

._cardLink_lyhdr_1693:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  ._keyLabel_lyhdr_943 {
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  ._page_lyhdr_109 {
    padding: 16px 12px;
  }

  ._headerCard_lyhdr_147 {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  ._responseBody_lyhdr_701 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  ._voiceRow_lyhdr_399 {
    flex-direction: column;
  }

  ._inputRow_lyhdr_269 {
    flex-direction: column;
  }

  ._sendBtn_lyhdr_333 {
    justify-content: center;
    padding: 12px;
  }

  ._voiceControls_lyhdr_441 {
    flex-wrap: wrap;
  }

  ._waveformWrap_lyhdr_505 {
    min-width: 150px;
  }

  ._responseCard_lyhdr_587 {
    padding: 16px;
  }

  ._responseHeader_lyhdr_603 {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  ._responseActions_lyhdr_647 {
    width: 100%;
    justify-content: flex-start;
  }

  ._keyValueItem_lyhdr_921 {
    flex-direction: column;
    gap: 2px;
  }

  ._keyLabel_lyhdr_943 {
    min-width: auto;
    font-size: 11px;
  }

  ._simpleList_lyhdr_973 {
    grid-template-columns: 1fr;
  }

  ._summaryStats_lyhdr_1207 {
    flex-direction: column;
    gap: 6px;
  }

  ._responseTable_lyhdr_1089 ._td_lyhdr_1135 {
    max-width: 150px;
    font-size: 11px;
    padding: 8px 10px;
  }

  ._responseTable_lyhdr_1089 ._th_lyhdr_1103 {
    font-size: 9px;
    padding: 8px 10px;
  }

  ._employeeList_lyhdr_1537 {
    grid-template-columns: 1fr;
  }

  ._resultStatus_lyhdr_833 {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  ._responseTable_lyhdr_1089 {
    min-width: 500px;
  }
}

@media (max-width: 480px) {
  ._headerTitle_lyhdr_207 {
    font-size: 16px;
  }

  ._queryCard_lyhdr_235 {
    padding: 16px;
  }

  ._queryLabel_lyhdr_255 {
    font-size: 13px;
  }

  ._textInput_lyhdr_281 {
    font-size: 13px;
    padding: 9px 12px;
  }

  ._answerText_lyhdr_815 {
    font-size: 13px;
  }

  ._responseTable_lyhdr_1089 {
    min-width: 400px;
    font-size: 10px;
  }

  ._responseTable_lyhdr_1089 ._td_lyhdr_1135 {
    font-size: 10px;
    padding: 6px 8px;
  }

  ._responseTable_lyhdr_1089 ._th_lyhdr_1103 {
    font-size: 8px;
    padding: 6px 8px;
  }

  ._statusBadge_lyhdr_853 {
    font-size: 12px;
  }

  ._operationBadge_lyhdr_871 {
    font-size: 10px;
  }

  ._outlineBtn_lyhdr_657 {
    font-size: 10px;
    padding: 4px 10px;
  }

  ._responseCard_lyhdr_587 {
    padding: 12px;
  }

  ._responseHeader_lyhdr_603 {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  ._tableWrap_lyhdr_1037 {
    max-height: 350px;
  }

  ._statValue_lyhdr_1249 {
    font-size: 14px;
  }
}

/* ── Answer Panel ── */
._answerPanel_lyhdr_2063 {
  background: linear-gradient(135deg, #eef3ff, #f7f3ff);
  border: 1px solid #dce4ff;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

._answerLabel_lyhdr_2079 {
  color: #4f46e5;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

._answerQuestion_lyhdr_2095 {
  margin: 6px 0 5px;
  font-size: 17px;
  color: var(--color-gray-900);
}

._answerSummary_lyhdr_2107 {
  margin: 0;
  color: var(--color-gray-600, #52627f);
  font-size: 12px;
  line-height: 1.55;
}

/* ── Results head ── */
._resultsHead_lyhdr_2123 {
  margin: 4px 0 13px;
}

._resultTitle_lyhdr_2131 {
  margin: 0;
  font-size: 16px;
  color: var(--color-gray-900);
}

._resultMeta_lyhdr_2143 {
  margin: 4px 0 0;
  color: var(--color-gray-500);
  font-size: 11px;
}

/* ── Widgets grid ── */
._widgetsGrid_lyhdr_2157 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

._widget_lyhdr_2157 {
  grid-column: span 6;
  padding: 16px;
  min-width: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 14px;
}

._widgetKpi_lyhdr_2189 {
  grid-column: span 3;
  min-height: 150px;
}

._widgetVisual_lyhdr_2199 {
  grid-column: span 6;
}

._widgetFull_lyhdr_2207 {
  grid-column: 1 / -1;
}

._widgetHeader_lyhdr_2215 {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

._widgetTitle_lyhdr_2229 {
  margin: 5px 0 0;
  font-size: 15px;
}

._widgetType_lyhdr_2239 {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

._widgetDesc_lyhdr_2261 {
  color: var(--color-gray-500);
  font-size: 10px;
  line-height: 1.45;
  margin-top: 4px;
}

._recordsBadge_lyhdr_2275 {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 9px;
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  font-size: 9px;
  font-weight: 800;
}

._widgetBody_lyhdr_2295 {
  margin-top: 8px;
}

/* ── KPI ── */
._kpiValue_lyhdr_2305 {
  font-size: 34px;
  font-weight: 900;
  margin-top: 16px;
  letter-spacing: -.03em;
}

._kpiUnit_lyhdr_2319 {
  font-size: 11px;
  color: var(--color-gray-500);
  margin-left: 4px;
}

/* ── Chart ── */
._chartBox_lyhdr_2333 {
  height: 260px;
  margin-top: 8px;
}

/* ── Task grid (Trello cards) ── */
._taskToolbar_lyhdr_2345 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  background: var(--color-gray-50, #f8fafc);
  font-size: 10px;
}

._taskCount_lyhdr_2371 {
  color: var(--color-gray-500);
}

._taskGrid_lyhdr_2379 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

._taskCard_lyhdr_2393 {
  border: 1px solid var(--color-gray-200);
  border-radius: 13px;
  padding: 12px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

._taskTop_lyhdr_2413 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

._taskName_lyhdr_2427 {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

._taskList_lyhdr_2439 {
  font-size: 9px;
  color: var(--color-gray-500);
  margin-top: 3px;
}

._statusPill_lyhdr_1637 {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  background: #eef2ff;
  color: #3157e8;
  white-space: nowrap;
}

._statusCompletedPill_lyhdr_2471 {
  background: var(--color-green-bg);
  color: var(--color-green);
}

._statusOverduePill_lyhdr_2481 {
  background: var(--color-red-bg);
  color: var(--color-red);
}

._taskMeta_lyhdr_2491 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

._taskMeta_lyhdr_2491 div {
  padding: 7px;
  border-radius: 8px;
  background: var(--color-gray-50, #f8fafc);
  min-width: 0;
}

._taskMeta_lyhdr_2491 small {
  display: block;
  color: var(--color-gray-500);
  font-size: 8px;
  margin-bottom: 2px;
}

._taskMeta_lyhdr_2491 strong {
  font-size: 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._taskSummary_lyhdr_2547 {
  color: var(--color-gray-600, #52627f);
  font-size: 10px;
  line-height: 1.45;
}

._tagRow_lyhdr_2559 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

._miniTag_lyhdr_2571 {
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  font-size: 8px;
  font-weight: 750;
}

._taskActions_lyhdr_2589 {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: auto;
}

._taskOpen_lyhdr_2603,
._taskLink_lyhdr_2605 {
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

._taskOpen_lyhdr_2603 {
  border: 0;
  background: #eef2ff;
  color: #3157e8;
  cursor: pointer;
}

._taskLink_lyhdr_2605 {
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-700);
}

/* ── Leaderboard ── */
._leaderboard_lyhdr_2649 {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

._leaderRow_lyhdr_2661 {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-gray-100);
}

._rank_lyhdr_2679 {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  display: grid;
  place-items: center;
  font-weight: 850;
}

/* ── Summary box ── */
._summaryBox_lyhdr_2703 {
  margin-top: 8px;
  padding: 13px;
  border: 1px solid var(--color-gray-200);
  border-radius: 11px;
  background: var(--color-gray-50, #f8fafc);
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 11px;
}

/* ── Card detail modal ── */
._modalOverlay_lyhdr_2727 {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .58);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 50;
}

._modalBox_lyhdr_2747 {
  width: min(1000px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--color-white);
  border-radius: 18px;
  padding: 20px;
}

._modalTop_lyhdr_2765 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

._modalTitle_lyhdr_2777 {
  margin: 0;
  font-size: 18px;
}

._modalSub_lyhdr_2787 {
  color: var(--color-gray-500);
  margin-top: 5px;
  font-size: 12px;
}

._closeBtn_lyhdr_2799 {
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--color-gray-100);
  cursor: pointer;
}

._detailGrid_lyhdr_2817 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 15px 0;
}

._detailStat_lyhdr_2831 {
  border: 1px solid var(--color-gray-200);
  border-radius: 11px;
  padding: 11px;
  background: var(--color-gray-50, #f8fafc);
}

._detailStat_lyhdr_2831 small {
  display: block;
  color: var(--color-gray-500);
  font-size: 9px;
  margin-bottom: 4px;
}

._detailStat_lyhdr_2831 strong {
  font-size: 11px;
  word-break: break-word;
}

._detailSection_lyhdr_2869 {
  margin-top: 14px;
}

._detailSection_lyhdr_2869 h3 {
  font-size: 12px;
  margin: 0 0 7px;
}

._detailBox_lyhdr_2887 {
  border: 1px solid var(--color-gray-200);
  border-radius: 11px;
  padding: 12px;
  background: var(--color-gray-50, #fbfdff);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 760px) {

  ._widget_lyhdr_2157,
  ._widgetKpi_lyhdr_2189,
  ._widgetVisual_lyhdr_2199 {
    grid-column: 1 / -1;
  }

  ._taskGrid_lyhdr_2379 {
    grid-template-columns: 1fr;
  }

  ._detailGrid_lyhdr_2817 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}/* ============ Base / Layout ============ */
._app_hk6q8_3 {
  min-height: 100vh;
}

._topbar_hk6q8_11 {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(129, 140, 248, 0.18);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px) saturate(140%);
}

._tabs_hk6q8_41 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px !important;
  padding: 5px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(241, 245, 249, 0.9)
  );
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
._kpiIcon_hk6q8_71 {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

._tabBtn_hk6q8_87 {
  position: relative;
  border: 0;
  background: transparent;
  padding: 11px 19px;
  border-radius: 12px;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
}

._tabBtn_hk6q8_87:hover {
  color: #4f46e5;
  background: rgba(99, 102, 241, 0.08);
}

._tabBtn_hk6q8_87._active_hk6q8_121 {
  color: white;
  background: linear-gradient(135deg, #4f46e5, #7c3aed 58%, #2563eb);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.28);
}

._topActions_hk6q8_133 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._voiceBtn_hk6q8_145,
._dateBox_hk6q8_147,
._refreshBtn_hk6q8_149 {
  height: 40px;
  border: 1px solid rgba(129, 140, 248, 0.24);
  background: white;
  border-radius: 10px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 7px 20px rgba(79, 70, 229, 0.07);
}

._voiceBtn_hk6q8_145 {
  color: #5b21b6;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #ffffff, #f5f3ff);
}

._refreshBtn_hk6q8_149 {
  background: linear-gradient(135deg, #2563eb, #4f46e5, #7c3aed);
  color: white;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.28);
}

._dateBox_hk6q8_147 input {
  border: 0;
  outline: 0;
  color: #0f172a;
  background: transparent;
}

._avatar_hk6q8_217 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6d28d9, #4f46e5 52%, #0891b2);
  color: white;
  font-size: 11px;
  font-weight: 800;
  position: relative;
  box-shadow: 0 10px 28px rgba(91, 92, 240, 0.3);
}

._avatar_hk6q8_217:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid white;
  position: absolute;
  right: -1px;
  bottom: 0;
}

._content_hk6q8_269 {
  padding: 16px 10px 22px;
}

._content_hk6q8_269._loading_hk6q8_277 {
  opacity: 0.55;
  pointer-events: none;
}

._panel_hk6q8_287 {
  display: none;
}

._panel_hk6q8_287._active_hk6q8_121 {
  display: block;
}

/* ============ Grid system ============ */
._grid_hk6q8_305 {
  display: grid;
  gap: 12px;
}

._kpis6_hk6q8_315 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

._kpis5_hk6q8_323 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

._g2_hk6q8_331 {
  grid-template-columns: 1fr 1.15fr;
}

._g3_hk6q8_339 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._gCrmMid_hk6q8_347 {
  grid-template-columns: 0.8fr 0.9fr 0.75fr 0.85fr;
}

._gCrmBottom_hk6q8_355 {
  grid-template-columns: 1.35fr 0.72fr 0.85fr;
}

._gHrBottom_hk6q8_363 {
  grid-template-columns: 1.25fr 1fr;
}

._gHrSmall_hk6q8_371 {
  grid-template-columns: 0.8fr 0.95fr 1.05fr 0.8fr;
}

._gAccMid_hk6q8_379 {
  grid-template-columns: 1.05fr 1.15fr 0.9fr;
}

._gAccBottom_hk6q8_387 {
  grid-template-columns: 0.65fr 1.35fr;
}

/* ============ Card ============ */
._card_hk6q8_397 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(248, 250, 252, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.9);
  outline: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(71, 85, 105, 0.1);
  padding: 14px;
  min-width: 0;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

._card_hk6q8_397::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #06b6d4, #10b981);
  opacity: 0.9;
}

._card_hk6q8_397:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(76, 29, 149, 0.16);
  outline-color: rgba(99, 102, 241, 0.22);
}

/* ============ KPI ============ */
._kpi_hk6q8_71 {
  min-height: 116px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
}

._kpi_hk6q8_71::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.13),
    transparent 68%
  );
}

._iconBox_hk6q8_517 {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 22px rgba(15, 23, 42, 0.08);
}

._ibBlue_hk6q8_541 {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #4f46e5;
}

._ibGreen_hk6q8_551 {
  background: linear-gradient(135deg, #d1fae5, #dcfce7);
  color: #059669;
}

._ibPurple_hk6q8_561 {
  background: linear-gradient(135deg, #ede9fe, #fae8ff);
  color: #7c3aed;
}

._ibOrange_hk6q8_571 {
  background: linear-gradient(135deg, #ffedd5, #fef3c7);
  color: #ea580c;
}

._ibRed_hk6q8_581 {
  background: linear-gradient(135deg, #ffe4e6, #fee2e2);
  color: #e11d48;
}

._ibTeal_hk6q8_591 {
  background: linear-gradient(135deg, #ccfbf1, #cffafe);
  color: #0f766e;
}

._kpiLabel_hk6q8_601 {
  font-size: 10px !important;
  font-weight: 600;
  margin-top: 2px;
  color: #475569;
  letter-spacing: 0.01em;
}

._kpiValue_hk6q8_617 {
  font-size: 12px !important;
  font-weight: 800;
  margin-top: 4px;
  color: #111827;
  letter-spacing: -0.03em;
}

._kpiSub_hk6q8_633 {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
}

._up_hk6q8_645 {
  color: #059669;
}

._down_hk6q8_653 {
  color: #dc2626;
}

._accent_hk6q8_661 {
  font-weight: 800;
  font-size: 17px;
  margin-top: 4px;
}

._blue_hk6q8_673 {
  color: #2563eb;
}

._orange_hk6q8_681 {
  color: #f97316;
}

._red_hk6q8_689 {
  color: #ef4444;
}

._green_hk6q8_697 {
  color: #16a34a;
}

/* ============ Section titles ============ */
._sectionTitle_hk6q8_707 {
  font-size: 12px !important;
  font-weight: 800;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1e293b;
  letter-spacing: -0.01em;
}

._sectionHead_hk6q8_729 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

._miniSelect_hk6q8_743 {
  border: 1px solid rgba(99, 102, 241, 0.24);
  background: linear-gradient(180deg, #fff, #f5f3ff);
  border-radius: 8px;
  padding: 6px 10px;
  color: #4338ca;
  font-weight: 700;
}

/* ============ Charts ============ */
._chartWrap_hk6q8_763 {
  position: relative;
  height: 210px;
}

._chartSm_hk6q8_773 {
  height: 170px;
}

._chartLg_hk6q8_781 {
  height: 230px;
}

._donutLayout_hk6q8_789 {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 14px;
}

._donutLayout_hk6q8_789._small_hk6q8_803 {
  grid-template-columns: 130px 1fr;
}

._legendList_hk6q8_811 {
  display: grid;
  gap: 9px;
}

._legendRow_hk6q8_821 {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

._dot_hk6q8_837 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

._centerNote_hk6q8_849 {
  margin-top: 12px;
  padding: 12px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ecfdf5, #ecfeff);
  border: 1px solid rgba(16, 185, 129, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-align: center;
  color: #15803d;
}

._centerNote_hk6q8_849 b {
  display: block;
  font-size: 22px;
  margin-top: 3px;
}

/* ============ Tables ============ */
._tableWrap_hk6q8_885 {
  overflow: auto;
}

._tableWrap_hk6q8_885 table,
._card_hk6q8_397 table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

._tableWrap_hk6q8_885 th,
._tableWrap_hk6q8_885 td,
._card_hk6q8_397 th,
._card_hk6q8_397 td {
  padding: 9px 8px;
  border-bottom: 1px solid #edf2f7;
  text-align: left;
  vertical-align: middle;
}

._card_hk6q8_397 th {
  color: #475569;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

._card_hk6q8_397 tbody tr {
  transition: 0.18s ease;
}

._card_hk6q8_397 tbody tr:hover {
  background: linear-gradient(
    90deg,
    rgba(238, 242, 255, 0.65),
    rgba(236, 254, 255, 0.45)
  );
}

/* ============ Badges ============ */
._badge_hk6q8_969 {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid transparent;
  letter-spacing: 0.035em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

._success_hk6q8_991 {
  background: linear-gradient(135deg, #dcfce7, #d1fae5);
  color: #047857;
  border-color: #a7f3d0;
}

._danger_hk6q8_1003 {
  background: linear-gradient(135deg, #ffe4e6, #fee2e2);
  color: #be123c;
  border-color: #fecdd3;
}

._info_hk6q8_1015 {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #3730a3;
  border-color: #c7d2fe;
}

._warning_hk6q8_1027 {
  background: linear-gradient(135deg, #ffedd5, #fef3c7);
  color: #c2410c;
  border-color: #fed7aa;
}

._muted_hk6q8_1039 {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #475569;
  border-color: #cbd5e1;
}

/* ============ Links ============ */
._link_hk6q8_1053 {
  display: inline-flex;
  float: right;
  align-items: center;
  gap: 5px;
  color: #4f46e5;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2ff;
  margin-top: 10px;
  font-size: 11px;
}

._link_hk6q8_1053::after {
  content: "→";
}

._link_hk6q8_1053._center_hk6q8_849 {
  float: none;
  text-align: center;
  justify-content: center;
}

/* ============ Metric / Activity boxes ============ */
._metricGrid_hk6q8_1103 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

._metricBox_hk6q8_1115 {
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 9px;
  padding: 10px;
  text-align: center;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

._metricBox_hk6q8_1115:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
}

._v_hk6q8_145 {
  font-weight: 800;
  font-size: 12px !important;
  margin-top: 6px;
}

._metricBox_hk6q8_1115 ._metric-label_hk6q8_1155 {
  font-size: 12px !important;
}
._activityGrid_hk6q8_1161 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

._activityItem_hk6q8_1173 {
  min-width: 0;
}

._activityItem_hk6q8_1173 {
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  gap: 9px;
  align-items: center;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

._activityItem_hk6q8_1173:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
}

._activityItem_hk6q8_1173 ._v_hk6q8_145 {
  font-size: 12px !important;
  font-weight: 800;
}

._miniIcon_hk6q8_1223 {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e0e7ff, #cffafe);
  color: #4f46e5;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.12);
}

/* ============ Bars ============ */
._barList_hk6q8_1247 {
  display: grid;
  gap: 11px;
}

._barRow_hk6q8_1257 {
  display: grid;
  grid-template-columns: 70px 1fr 55px;
  gap: 8px;
  align-items: center;
}

._barTrack_hk6q8_1271 {
  height: 5px;
  background: #e9edf8;
  border-radius: 99px;
  overflow: hidden;
}

._barFill_hk6q8_1285 {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #06b6d4);
  border-radius: 99px;
}

/* ============ Insights ============ */
._insightRow_hk6q8_1299 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

._insightCard_hk6q8_1311 {
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 12px;
  padding: 11px;
  display: flex;
  gap: 9px;
  min-width: 0;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

._insightCard_hk6q8_1311:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
}

._title_hk6q8_1343 {
  font-size: 10px;
  font-weight: 800;
}

._msg_hk6q8_1353 {
  font-size: 9px;
  color: #475569;
  line-height: 1.4;
  margin-top: 3px;
}

/* ============ Empty state ============ */
._empty_hk6q8_1369 {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #64748b;
}

._empty_hk6q8_1369 b {
  display: block;
  color: #0f172a;
  font-size: 13px;
  margin-top: 8px;
}

/* ============ Aging ============ */
._agingGrid_hk6q8_1401 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

._agingBox_hk6q8_1413 {
  text-align: center;
  border-radius: 9px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #f8faff);
  border: 1px solid rgba(129, 140, 248, 0.18);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

._agingBox_hk6q8_1413:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
}

._agingBox_hk6q8_1413 b {
  font-size: 18px;
  display: block;
  margin: 9px 0;
}

._totalStrip_hk6q8_1453 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2ff, #ecfeff);
}

/* ============ Lists / people ============ */
._listStack_hk6q8_1477 {
  display: grid;
  gap: 8px;
}

._listItem_hk6q8_1487 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(145deg, #fff, #f8faff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

._listItem_hk6q8_1487:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
}

._person_hk6q8_1519 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._personAvatar_hk6q8_1531 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 9px;
}

/* ============ Responsive ============ */
@media (max-width: 1150px) {
  ._kpis6_hk6q8_315,
  ._kpis5_hk6q8_323 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._gCrmMid_hk6q8_347,
  ._gCrmBottom_hk6q8_355,
  ._gHrSmall_hk6q8_371 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._insightRow_hk6q8_1299 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  ._topbar_hk6q8_11 {
    align-items: flex-start;
    flex-direction: column;
  }

  ._tabs_hk6q8_41 {
    overflow: auto;
    width: 100%;
  }

  ._topActions_hk6q8_133 {
    flex-wrap: wrap;
  }

  ._kpis6_hk6q8_315,
  ._kpis5_hk6q8_323,
  ._g2_hk6q8_331,
  ._g3_hk6q8_339,
  ._gCrmMid_hk6q8_347,
  ._gCrmBottom_hk6q8_355,
  ._gHrBottom_hk6q8_363,
  ._gHrSmall_hk6q8_371,
  ._gAccMid_hk6q8_379,
  ._gAccBottom_hk6q8_387 {
    grid-template-columns: 1fr;
  }

  ._donutLayout_hk6q8_789,
  ._donutLayout_hk6q8_789._small_hk6q8_803 {
    grid-template-columns: 1fr;
  }

  ._insightRow_hk6q8_1299 {
    grid-template-columns: 1fr;
  }

  ._activityGrid_hk6q8_1161,
  ._metricGrid_hk6q8_1103 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._adminKpiRow_hk6q8_1671 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

._adminKpiRow4_hk6q8_1683 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Large Laptop */
@media (max-width: 1400px) {
  ._adminKpiRow_hk6q8_1671,
  ._adminKpiRow4_hk6q8_1683 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Laptop */
@media (max-width: 1200px) {
  ._adminKpiRow_hk6q8_1671,
  ._adminKpiRow4_hk6q8_1683 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet */
@media (max-width: 992px) {
  ._adminKpiRow_hk6q8_1671,
  ._adminKpiRow4_hk6q8_1683 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 576px) {
  ._adminKpiRow_hk6q8_1671,
  ._adminKpiRow4_hk6q8_1683 {
    grid-template-columns: 1fr;
  }
}
._page_1q0qv_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  color: #111827;
}

._page_1q0qv_1 *, ._page_1q0qv_1 *::before, ._page_1q0qv_1 *::after { box-sizing: border-box; }

._headerRow_1q0qv_25 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--color-primary-lightest, #eee6ff);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
} 

._headerLeft_1q0qv_49 { display: flex; align-items: flex-start; gap: 10px; }
._headerActions_1q0qv_51 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
._pageTitle_1q0qv_53 { margin: 1px 0 0; font-size: 14px; font-weight: 700; }
._breadcrumb_1q0qv_55 { display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 12px; }
._breadcrumb_1q0qv_55 strong { color: var(--color-primary, #7c3aed); }

._backBtn_1q0qv_61 {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
}

._headerSubmit_1q0qv_85 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

._headerSubmit_1q0qv_85 {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  background: var(--gradient-primary, linear-gradient(135deg, #9d7aea, #c29cff));
  color: #fff;
  box-shadow: var(--shadow-primary-sm, 0 3px 8px rgba(124, 58, 237, .2));
  font-size: 11px;
}

._headerSubmit_1q0qv_85:hover { background: var(--gradient-primary-hover, linear-gradient(135deg, #8b5cf6, #ae7df0)); }

._formCard_1q0qv_131 {
  min-height: 426px;
  padding: 28px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

._formGrid_1q0qv_149 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
._field_1q0qv_151 { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
._field_1q0qv_151 > label { color: #374151; font-size: 11px; font-weight: 600; }
._field_1q0qv_151 > label span { color: #ef4444; }

._textInput_1q0qv_159, ._selectInput_1q0qv_159 {
  width: 100%;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  color: #374151;
  font: inherit;
  font-size: 12px;
  outline: none;
}

._textInput_1q0qv_159:focus, ._selectInput_1q0qv_159:focus { border-color: var(--color-primary, #1473e6); box-shadow: 0 0 0 2px rgba(20, 115, 230, .12); }
._inputError_1q0qv_187 { border-color: #ef4444; }
._selectWrap_1q0qv_189 { position: relative; }
._selectInput_1q0qv_159 { appearance: none; padding-right: 38px; }
._selectInput_1q0qv_159:disabled { background: #fafafa; color: #111827; cursor: not-allowed; }
._selectIcon_1q0qv_195 { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); color: #a3a3a3; pointer-events: none; }
._errorText_1q0qv_197 { color: #ef4444; font-size: 11px; }

._checkboxField_1q0qv_201 {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding-top: 20px;
}
._checkboxLabel_1q0qv_215 { display: flex; align-items: center; gap: 7px; color: #111827; font-size: 12px; cursor: pointer; }
._checkboxLabel_1q0qv_215 input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-primary, #1473e6); }

@media (max-width: 720px) {
  ._page_1q0qv_1 { padding: 10px; }
  ._headerRow_1q0qv_25 { align-items: flex-start; }
  ._headerActions_1q0qv_51 { justify-content: flex-end; }
  ._pageTitle_1q0qv_53 { font-size: 21px; }
  ._formCard_1q0qv_131 { min-height: 0; padding: 20px 16px; }
  ._formGrid_1q0qv_149 { grid-template-columns: 1fr; gap: 18px; }
  ._checkboxField_1q0qv_201 { padding-top: 0; }
}
._page_1vwhk_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  color: #111827;
}

._page_1vwhk_1 *,
._page_1vwhk_1 *::before,
._page_1vwhk_1 *::after {
  box-sizing: border-box;
}

._wrap_1vwhk_33 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  padding: 10px 14px;
  background: #f4f7fb;
  color: #111827;
}

._wrap_1vwhk_33 *,
._wrap_1vwhk_33 *::before,
._wrap_1vwhk_33 *::after {
  box-sizing: border-box;
}


/* ── Stats Accordion ── */
._statsAccordion_1vwhk_69 {
  background: #fff;
  border: 1px solid #eee6ff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
  overflow: hidden;
}

._accordionHeader_1vwhk_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

._accordionTitle_1vwhk_103 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

._accordionToggle_1vwhk_121 {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #6b7280;
}

._statsGrid_1vwhk_139 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

._summaryCard_1vwhk_153 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

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

._summaryIcon_1vwhk_175 {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

._summaryTitle_1vwhk_195 {
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._summaryRight_1vwhk_213 { text-align: right; flex-shrink: 0; }
._summaryValue_1vwhk_215 { font-size: 18px; font-weight: 800; line-height: 1.1; }
._summaryTrend_1vwhk_217 { font-size: 10px; font-weight: 600; margin-top: 2px; }
._trendUp_1vwhk_219 { color: #16a34a; }
._trendDown_1vwhk_221 { color: #dc2626; }
._trendNeutral_1vwhk_223 { color: #6b7280; }

/* ── Table Section ── */
._tableSection_1vwhk_229 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

._tableHeader_1vwhk_251 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

._sectionTitle_1vwhk_265 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
._sectionSub_1vwhk_267 { margin: 2px 0 0; font-size: 12px; color: #6b7280; }

/* ── Filter bar ── */
._filterBar_1vwhk_273 { display: flex; align-items: center; gap: 10px; }
._filterWrapper_1vwhk_275 { flex: 1; min-width: 0; }

._filterBadge_1vwhk_279 {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Bulk action bar ── */
._bulkSelectedBar_1vwhk_305 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
}

._bulkSelectedLeft_1vwhk_327 { display: flex; align-items: center; gap: 8px; }

._bulkCountBadge_1vwhk_331 {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

._bulkSelectedText_1vwhk_357 { font-size: 12px; font-weight: 600; color: #4c1d95; }
._bulkBtnGroup_1vwhk_359 { display: flex; align-items: center; gap: 8px; }

._bulkActionBtn_1vwhk_363 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

._bulkActionBtnDanger_1vwhk_391 { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
._bulkActionBtnDanger_1vwhk_391:hover { background: #fee2e2; }

._bulkDeselect_1vwhk_397 {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #7c3aed;
  cursor: pointer;
}
._bulkDeselect_1vwhk_397:hover { background: #ede9fe; }

/* ── Table cell content ── */
._nameCell_1vwhk_425 { display: flex; align-items: center; gap: 8px; min-width: 0; }

._nameMain_1vwhk_429 {
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

._nameSub_1vwhk_449 { font-size: 11px; color: #6b7280; margin-top: 1px; }

/* ── Badges ── */
._typeBadge_1vwhk_455 {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._diffBadge_1vwhk_475 {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 720px) {
  ._page_1vwhk_1 { padding: 10px; }
  ._tableHeader_1vwhk_251 { flex-direction: column; align-items: stretch; }
  ._filterBar_1vwhk_273 { flex-direction: column; align-items: stretch; }
  ._bulkSelectedBar_1vwhk_305 { flex-wrap: wrap; }
  ._nameMain_1vwhk_429 { max-width: 200px; }
  ._statsGrid_1vwhk_139 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

._pageLoader_1vwhk_513 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: #6b7280;
  font-size: 13px;
}

._bigSpinner_1vwhk_533 {
  width: 20px;
  height: 20px;
  border: 2.5px solid #e5e7eb;
  border-top-color: var(--color-primary, #7c3aed);
  border-radius: 50%;
  animation: _spin_1vwhk_1 0.7s linear infinite;
}

._smallSpinner_1vwhk_551 {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: _spin_1vwhk_1 0.6s linear infinite;
  margin-right: 4px;
}

@keyframes _spin_1vwhk_1 {
  to {
    transform: rotate(360deg);
  }
}

/* ── Header ── */
._header_1vwhk_587 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #eee6ff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

._headerLeft_1vwhk_611 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._headerActions_1vwhk_623 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._title_1vwhk_637 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

._breadcrumb_1vwhk_651 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 12px;
}

._breadcrumb_1vwhk_651 strong {
  color: var(--color-primary, #7c3aed);
}

._backBtn_1vwhk_675 {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #4b5563;
  cursor: pointer;
  flex-shrink: 0;
}

._backBtn_1vwhk_675:hover {
  background: #f9fafb;
}

/* ── Layout ── */
._formLayout_1vwhk_711 {
  display: flex;
  gap: 16px;
}

._leftCol_1vwhk_721 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._formCard_1vwhk_737 {
  padding: 20px;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

._sectionHeading_1vwhk_753 {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}

._formGrid3_1vwhk_767 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

._formGroup_1vwhk_779 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

._label_1vwhk_793 {
  color: #374151;
  font-size: 11.5px;
  font-weight: 600;
}

._required_1vwhk_805 {
  color: #ef4444;
}

._input_1vwhk_813 {
  width: 100%;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  color: #374151;
  font: inherit;
  font-size: 12.5px;
  outline: none;
}

._input_1vwhk_813:focus {
  border-color: var(--color-primary, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .12);
}

._inputError_1vwhk_849 {
  border-color: #ef4444;
}

._errorText_1vwhk_857 {
  color: #ef4444;
  font-size: 11px;
  margin-top: 2px;
}

._switchRow_1vwhk_869 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  height: 34px;
}

._switchRow_1vwhk_869 input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary, #7c3aed);
}

/* ── Employee picker ── */
._empPickerRow_1vwhk_907 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._empPickerBtn_1vwhk_919 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 8px 14px;
  border: 1px dashed #c4b5fd;
  border-radius: 10px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

._empPickerBtn_1vwhk_919:hover {
  background: #ede9fe;
}

._empPickerBadge_1vwhk_957 {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary, #7c3aed);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

._empChipList_1vwhk_983 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._empChip_1vwhk_983 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11.5px;
  font-weight: 600;
}

._empChip_1vwhk_983 button {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(55, 48, 163, .12);
  color: #3730a3;
  cursor: pointer;
}

._empChip_1vwhk_983 button:hover {
  background: rgba(55, 48, 163, .22);
}

/* ── Question selection header ── */
._qHeaderRow_1vwhk_1053 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

._selectedBadge_1vwhk_1069 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Filter row ── */
._filterRow_1vwhk_1097 {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #f0f1f3;
  border-radius: 10px;
}

._filterField_1vwhk_1121 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._filterLabel_1vwhk_1135 {
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
}

._filterActions_1vwhk_1147 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

._applyBtn_1vwhk_1161 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

._applyBtn_1vwhk_1161:hover {
  filter: brightness(0.95);
}

._clearBtn_1vwhk_1199 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

._clearBtn_1vwhk_1199:hover {
  background: #f3f4f6;
}

._filterBadge_1vwhk_279 {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--color-primary, #4338ca);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Question table cells ── */
._qCell_1vwhk_1263 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._qMain_1vwhk_1275 {
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 380px;
}

._qSub_1vwhk_1295 {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
}

._qBadge_1vwhk_1307 {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

._qCheckboxLabel_1vwhk_1331 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

._qCheckboxLabel_1vwhk_1331 input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--color-primary, #7c3aed);
}
/* Common Badge */
._qBadge_1vwhk_1307 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 70px;
  padding: 4px 10px;

  border-radius: 999px;

  border: 1px solid transparent;

  /* Keep existing table font */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Easy */
._easyBadge_1vwhk_1395 {
  color: #15803d;
  background-color: #dcfce7;
  border-color: #86efac;
}

/* Medium */
._mediumBadge_1vwhk_1409 {
  color: #b45309;
  background-color: #fef3c7;
  border-color: #fcd34d;
}

/* Hard */
._hardBadge_1vwhk_1423 {
  color: #b91c1c;
  background-color: #fee2e2;
  border-color: #fca5a5;
}

/* Mixed */
._mixedBadge_1vwhk_1437 {
  color: #415472;
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Short Answer */
._shortAnswerBadge_1vwhk_1451 {
  color: #7c3aed;
  background: #f3e8ff;
  border-color: #d8b4fe;
}

/* Text */
._textBadge_1vwhk_1465 {
  color: #047857;
  background: #dcfce7;
  border-color: #86efac;
}

/* Multiple Choice */
._mcqBadge_1vwhk_1479 {
  color: #2563eb;
  background: #dbeafe;
  border-color: #93c5fd;
}

/* One Word */
._oneWordBadge_1vwhk_1493 {
  color: #ea580c;
  background: #ffedd5;
  border-color: #fdba74;
}

/* Yes / No */
._yesNoBadge_1vwhk_1507 {
  color: #be185d;
  background: #fce7f3;
  border-color: #f9a8d4;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  ._formGrid3_1vwhk_767 {
    grid-template-columns: 1fr 1fr;
  }

  ._filterRow_1vwhk_1097 {
    grid-template-columns: 1fr 1fr;
  }

  ._filterActions_1vwhk_1147 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {

  ._wrap_1vwhk_33,
  ._page_1vwhk_1 {
    padding: 10px;
  }

  ._header_1vwhk_587 {
    flex-direction: column;
    align-items: stretch;
  }

  ._headerActions_1vwhk_623 {
    justify-content: flex-end;
  }

  ._formLayout_1vwhk_711 {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  ._formGrid3_1vwhk_767 {
    grid-template-columns: 1fr;
  }

  ._filterRow_1vwhk_1097 {
    grid-template-columns: 1fr;
  }

  ._qMain_1vwhk_1275 {
    max-width: 200px;
  }
}

._overlay_1v522_1 {
  position: fixed;
  inset: 0;

  background: rgba(15, 23, 42, 0.75);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;

  animation: _fadeIn_1v522_1 0.25s ease;
}

._modal_1v522_31 {
  position: relative;

  width: min(1000px, 92vw);

  border-radius: 18px;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);

  animation: _popup_1v522_1 0.25s ease;
}

._player_1v522_63 {
  position: relative;

  width: 100%;

  padding-top: 56.25%;
}

._player_1v522_63 iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: none;
}

._closeBtn_1v522_101 {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 38px;
  height: 38px;

  border: none;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.65);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  font-size: 22px;

  z-index: 2;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

._closeBtn_1v522_101:hover {
  background: red;
  transform: rotate(90deg);
}

@keyframes _fadeIn_1v522_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes _popup_1v522_1 {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ==========================================================
   ROOT
========================================================== */

._page_1vhkj_9 {
  min-height: 100vh;
  background: #f6f8fb;
  padding: 18px; /* 32 -> 24 */
  box-sizing: border-box;
}

._loading_1vhkj_23 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: #64748b;
}

/* ==========================================================
   HEADER
========================================================== */

._header_1vhkj_51 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 8px;
}

._headerLeft_1vhkj_67 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

._backBtn_1vhkj_81 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._backBtn_1vhkj_81:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._pageTitle_1vhkj_121 {
  margin: 0;

  font-size: 14px;
  font-weight: 700;

  color: #0f172a;
}

._pageSubtitle_1vhkj_139 {
  margin-top: 6px;

  color: #64748b;

  font-size: 10px;
  line-height: 1.6;
}

/* ==========================================================
   HEADER BUTTONS
========================================================== */

._headerActions_1vhkj_165 {
  display: flex;
  align-items: center;
  gap: 12px;

  flex-wrap: wrap;
}

._learnBtn_1vhkj_181,
._practiceBtn_1vhkj_183,
._testBtn_1vhkj_185 {
  border: none;
  padding: 6px 12px;
  font-size: 10px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;

  font-weight: 600;

  transition: all 0.25s ease;
}

._learnBtn_1vhkj_181 svg,
._practiceBtn_1vhkj_183 svg,
._testBtn_1vhkj_185 svg {
  font-size: 13px;
}

/* Learn */

._learnBtn_1vhkj_181 {
  background: #fbfbfb;
  border: #eb2525 1px solid;
  color: #eb2525;
}

._learnBtn_1vhkj_181:hover {
  background: #eb2525;
  color: white;
}

/* Practice */

._practiceBtn_1vhkj_183 {
  background: #ecfeff;
  border: #0891b2 1px solid;
  color: #0891b2;
}

._practiceBtn_1vhkj_183:hover {
  background: #0891b2;
  color: white;
}

/* Test */

._testBtn_1vhkj_185 {
  border: var(--color-primary) 1px solid;
  background: white;
  color: var(--color-primary);
}

._testBtn_1vhkj_185:hover {
  color: white;
  background: var(--color-primary);
}

/* ==========================================================
   MAIN LAYOUT
========================================================== */

._topSection_1vhkj_317 {
  display: grid;
  gap: 18px; /* 30 -> 24 */
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
}

._leftContent_1vhkj_331 {
  min-width: 0;
}

._topSidebar_1vhkj_339 {
  position: sticky;
  top: 18px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================
   COMMON CARD
========================================================== */

._summaryCard_1vhkj_365,
._progressCard_1vhkj_367,
._sideCard_1vhkj_369,
._questionCard_1vhkj_371,
._attemptContainer_1vhkj_373 {
  background: white;

  border-radius: 14px;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
}

/* ==========================================================
   COMMON TITLES
========================================================== */

._sideTitle_1vhkj_397 {
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 700;

  color: #0f172a;
}

/* ==========================================================
   TRANSITIONS
========================================================== */

button,
a,
._summaryCard_1vhkj_365,
._progressCard_1vhkj_367,
._sideCard_1vhkj_369,
._questionCard_1vhkj_371 {
  transition: all 0.25s ease;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  outline-offset: 3px;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #eef2f7;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================
   SUMMARY SECTION
========================================================== */

._summaryWrapper_1vhkj_501 {
  background: #fff;

  border-radius: 18px;

  padding: 6px;
  margin-bottom: 18px;

  border: 1px solid #edf1f7;

  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.05);
}

._summaryRow_1vhkj_527 {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
}

._summaryCard_1vhkj_365 {
  display: flex;
  align-items: center;
  padding: 16px 14px;
  gap: 10px;

  background: transparent;

  box-shadow: none;

  border-radius: 0;

  position: relative;
}

._summaryCard_1vhkj_365:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;
  top: 20%;

  width: 1px;
  height: 60%;

  background: #edf2f7;
}

._summaryIcon_1vhkj_597 {
  width: 34px;
  height: 34px;
  font-size: 14px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryContent_1vhkj_621 {
  display: flex;
  flex-direction: column;
}

._summaryContent_1vhkj_621 span {
  color: #6b7280;

  font-size: 10px;

  margin-bottom: 4px;
}

._summaryContent_1vhkj_621 h3 {
  margin: 0;

  font-size: 13px;
  font-weight: 700;

  color: #111827;

  line-height: 1.2;
}

._summaryContent_1vhkj_621 small {
  margin-top: 6px;

  color: #94a3b8;

  font-size: 10px;
}

/* ==========================================================
   SIDEBAR CARDS
========================================================== */

._progressCard_1vhkj_367,
._sideCard_1vhkj_369 {
  padding: 14px;
}

._progressCard_1vhkj_367 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================
   PROGRESS ITEMS
========================================================== */

._progressItem_1vhkj_723 {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 10px;

  border-radius: 14px;

  background: #f8fafc;
  border: 1px solid #eef2f7;
}

._progressItem_1vhkj_723:hover {
  background: #f1f5f9;
}

._progressIcon_1vhkj_755 {
  width: 28px;
  height: 28px;
  font-size: 13px;

  border-radius: 12px;

  background: white;
  color: var(--color-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);

  flex-shrink: 0;
}

._progressItem_1vhkj_723 span {
  display: block;

  color: #64748b;

  font-size: 10px;

  margin-bottom: 4px;
}

._progressItem_1vhkj_723 strong {
  font-size: 12px;
  font-weight: 700;

  color: #0f172a;
}

/* ==========================================================
   QUESTION NAVIGATOR
========================================================== */

/* .navigator {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;

  justify-items: center;

  margin-top: 22px;
} */

._navigator_1vhkj_835 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;

  max-height: min(420px, 85vh);

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px;
  padding-top: 10px;
}

._navigator_1vhkj_835::-webkit-scrollbar {
  width: 6px;
}

._navigator_1vhkj_835::-webkit-scrollbar-track {
  background: transparent;
}

._navigator_1vhkj_835::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

._navigator_1vhkj_835::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

._questionNumber_1vhkj_917 {
  width: 34px;
  height: 34px;
  font-size: 10px;
  border-radius: 10px;
  border: none;

  background: #f8fafc;
  color: #475569;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.25s ease;
}

._questionNumber_1vhkj_917:hover {
  background: #eedbfe;
  color: var(--color-primary);
  transform: translateY(-2px);
}

._activeQuestion_1vhkj_973 {
  background: var(--color-primary) !important;
  color: white !important;

  transform: translateY(-2px);

  box-shadow: 0 4px 10px rgba(116, 37, 235, 0.3);
}

/* ==========================================================
   LEGEND
========================================================== */

._legend_1vhkj_999 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 16px;
  padding-top: 14px;
  font-size: 11px;

  border-top: 1px solid #eef2f7;
}

._legend_1vhkj_999 div {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  color: #64748b;
}

._legendCurrent_1vhkj_1041,
._legendNormal_1vhkj_1043 {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  display: inline-block;
}

._legendCurrent_1vhkj_1041 {
  background: var(--color-primary);
}

._legendNormal_1vhkj_1043 {
  background: #d1d5db;
}

/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

._navigationActions_1vhkj_1085 {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

._previousBtn_1vhkj_1097,
._nextBtn_1vhkj_1099 {
  flex: 1;

  height: 34px;
  font-size: 11px;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;
}

._previousBtn_1vhkj_1097 {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #64748b;
}

._previousBtn_1vhkj_1097:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #f8efff;
}

._nextBtn_1vhkj_1099 {
  border: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
}

._nextBtn_1vhkj_1099:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(116, 37, 235, 0.25);
}

._previousBtn_1vhkj_1097:disabled,
._nextBtn_1vhkj_1099:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================
   SIDEBAR STICKY EFFECT
========================================================== */

._topSidebar_1vhkj_339 ._progressCard_1vhkj_367,
._topSidebar_1vhkj_339 ._sideCard_1vhkj_369 {
  animation: _fadeInUp_1vhkj_1 0.35s ease;
}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes _fadeInUp_1vhkj_1 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   TABS
========================================================== */

._tabHeader_1vhkj_1265 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

._tabStats_1vhkj_1281 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._tabStat_1vhkj_1281 {
  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;

  padding: 10px 14px;

  min-width: 150px;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

._tabStatIcon_1vhkj_1325 {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #f3f4f6;
  color: var(--color-primary);

  flex-shrink: 0;
}

._tabStat_1vhkj_1281 span {
  display: block;
  font-size: 9px;
  color: #64748b;
}

._tabStat_1vhkj_1281 strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #111827;
}

._tabs_1vhkj_1383 {
  display: inline-flex;

  background: #ffffff;

  border-radius: 14px;

  padding: 6px;

  border: 1px solid #e2e8f0;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

._tab_1vhkj_1265 {
  border: none;
  background: transparent;

  padding: 7px 14px;
  font-size: 11px;

  border-radius: 10px;

  cursor: pointer;

  font-weight: 600;

  color: #64748b;

  transition: all 0.25s ease;
}

._activeTab_1vhkj_1447 {
  background: var(--color-primary);
  color: #ffffff;
}

._dateCell_1vhkj_1457 {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}

._dateCell_1vhkj_1457 span {
  font-size: 11px;
  /* color: #1e293b; */
  color: #4a5565;
  letter-spacing: 0.2px;
}

._dateCell_1vhkj_1457 small {
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.2px;
}

._clickableRow_1vhkj_1495 {
  cursor: pointer;
  transition: 0.2s ease;
}

._clickableRow_1vhkj_1495:hover {
  background: #f8f6ff;
}

/* ==========================================================
   QUESTION SECTION
========================================================== */

._questionSection_1vhkj_1521 {
  display: flex;
  flex-direction: column;
  gap: 18px;

  margin-bottom: 40px;
}

/* ==========================================================
   QUESTION CARD
========================================================== */

._questionCard_1vhkj_371 {
  border-radius: 16px;
  padding: 18px;

  border: 1px solid #f3eef7;

  scroll-margin-top: 28px;
}

._questionCard_1vhkj_371:hover {
  transform: translateY(-3px);

  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

/* ==========================================================
   QUESTION HEADER
========================================================== */

._questionHeaderRow_1vhkj_1583 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

._questionHeaderLeft_1vhkj_1599 {
  flex: 1;
  min-width: 0;
}

._questionHeaderRight_1vhkj_1609 {
  flex-shrink: 0;
}

._questionNumberText_1vhkj_1617 {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;
  font-size: 10px;
  margin-bottom: 10px;

  border-radius: 999px;

  background: #f8efff;

  color: var(--color-primary);

  font-weight: 700;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}

._questionTitle_1vhkj_1657 {
  margin: 0;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.45;
}

._questionDescription_1vhkj_1675 {
  margin-top: 5px;

  color: #64748b;

  font-size: 11px;
  line-height: 1.7;
}

/* ==========================================================
   LEVEL BADGE
========================================================== */

._levelBadge_1vhkj_1701 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 10px;
  padding: 5px 10px;

  border-radius: 999px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  color: #475569;

  font-weight: 600;

  white-space: nowrap;
}

/* ==========================================================
   HINT CARD
========================================================== */

._hintCard_1vhkj_1751 {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;

  background: #fffdf4;

  border-left: 4px solid #f59e0b;

  border: 1px solid #fde68a;
}

._hintTitle_1vhkj_1783 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;

  color: #b45309;

  font-size: 10px;
  font-weight: 700;
}

._hintCard_1vhkj_1751 p {
  margin: 0;

  color: #78350f;

  font-size: 10px;

  line-height: 1.7;
}

/* ==========================================================
   SPACING BETWEEN QUESTION ELEMENTS
========================================================== */

._questionCard_1vhkj_371 > *:last-child {
  margin-bottom: 0;
}
/* ==========================================================
   ANSWER LIST
========================================================== */

._answerList_1vhkj_1851 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* ==========================================================
   ANSWER CARD
========================================================== */

._answerCard_1vhkj_1873 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 12px;

  transition: all 0.25s ease;

  position: relative;
}

._answerCard_1vhkj_1873:hover {
  border-color: var(--color-primary);
  background: #f8fbff;
  transform: translateX(4px);
}

/* ==========================================================
   CORRECT ANSWER
========================================================== */

._correctAnswer_1vhkj_1925 {
  border-color: #22c55e;
  background: #f0fdf4;
}

._correctAnswer_1vhkj_1925:hover {
  background: #ecfdf5;
  border-color: #16a34a;
}

/* ==========================================================
   ANSWER INDICATOR
========================================================== */

._answerCircle_1vhkj_1953 {
  width: 16px;
  height: 16px;

  border-radius: 50%;

  border: 2px solid #cbd5e1;

  flex-shrink: 0;

  transition: all 0.25s ease;
}

._answerCircleActive_1vhkj_1979 {
  background: #22c55e;
  border-color: #22c55e;

  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

/* ==========================================================
   ANSWER TEXT
========================================================== */

._answerText_1vhkj_2001 {
  flex: 1;

  display: flex;
  align-items: flex-start;
  gap: 8px;

  color: #334155;

  font-size: 12px;
  line-height: 1.7;

  min-width: 0;

  word-break: break-word;
}

._answerText_1vhkj_2001 strong {
  color: #0f172a;
  font-size: 11px;
  flex-shrink: 0;
}

._answerText_1vhkj_2001 span {
  font-size: 11px;
}

/* ==========================================================
   CORRECT BADGE
========================================================== */

._correctBadge_1vhkj_2063 {
  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #22c55e;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;

  flex-shrink: 0;
}

/* ==========================================================
   TEXT ANSWERS
========================================================== */

._textAnswerBox_1vhkj_2111 {
  margin-top: 16px;
}

._answerInput_1vhkj_2119,
._answerTextarea_1vhkj_2121 {
  width: 100%;

  border: 1px solid #dbe4ef;
  border-radius: 14px;

  background: #f8fafc;

  color: #334155;

  font-size: 12px;
  line-height: 1.7;

  padding: 12px;

  box-sizing: border-box;

  outline: none;
}

._answerInput_1vhkj_2119 {
  height: 42px;
  font-size: 12px;
}

._answerTextarea_1vhkj_2121 {
  min-height: 70px;

  resize: vertical;

  font-family: inherit;
}

._answerInput_1vhkj_2119:focus,
._answerTextarea_1vhkj_2121:focus {
  border-color: var(--color-primary);
  background: #ffffff;
}

/* ==========================================================
   UPLOAD CARD
========================================================== */

._uploadCard_1vhkj_2207 {
  margin-top: 22px;

  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;

  border-radius: 14px;

  background: #eff6ff;

  color: var(--color-primary);

  border: 1px solid #bfdbfe;

  font-weight: 600;
}

._uploadCard_1vhkj_2207 svg {
  font-size: 18px;
}

/* ==========================================================
   REFERENCE VIDEO
========================================================== */

._referenceVideo_1vhkj_2261 {
  margin-top: 22px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;

  border-radius: 12px;

  /* background: #ef4444; */
  border: 1px #ef4444 solid;
  color: #ef4444;

  text-decoration: none;

  font-size: 12px;
  font-weight: 600;

  transition: all 0.25s ease;
}

._referenceVideo_1vhkj_2261:hover {
  background: #dc2626;
  color: white;
  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.25);
}

._referenceVideo_1vhkj_2261 svg {
  flex-shrink: 0;
}

/* ==========================================================
   QUESTION CONTENT SPACING
========================================================== */

._answerList_1vhkj_1851,
._textAnswerBox_1vhkj_2111,
._uploadCard_1vhkj_2207,
._referenceVideo_1vhkj_2261 {
  margin-bottom: 18px;
}

._questionCard_1vhkj_371 > :last-child {
  margin-bottom: 0;
}
/* ==========================================================
   ATTEMPTS SECTION
========================================================== */

._attemptContainer_1vhkj_373 {
  margin-top: 20px;

  padding: 20px;

  border: 1px solid #eef2f7;

  overflow-x: auto;
}

/* ==========================================================
   TABLE
========================================================== */

._attemptTable_1vhkj_2395 {
  width: 100%;

  border-collapse: collapse;

  min-width: 760px;
}

._attemptTable_1vhkj_2395 thead {
  background: #f8fafc;
}

._attemptTable_1vhkj_2395 th {
  padding: 14px 16px;

  text-align: center !important;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.3px;
  text-transform: uppercase;

  color: #64748b;

  border-bottom: 2px solid #e2e8f0;
}

._attemptTable_1vhkj_2395 td {
  padding: 14px 16px;

  font-size: 12px;

  color: #334155;

  border-bottom: 1px solid #eef2f7;

  vertical-align: middle;

  text-align: center !important;
}

._attemptTable_1vhkj_2395 tbody tr {
  transition: all 0.25s ease;
}

._attemptTable_1vhkj_2395 tbody tr:hover {
  background: #f8fbff;
}

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

/* ==========================================================
   COLUMN ALIGNMENT
========================================================== */

/* .attemptTable th:first-child,
.attemptTable td:first-child {
  width: 70px;
  text-align: center;
}

.attemptTable th:nth-child(3),
.attemptTable td:nth-child(3) {
  width: 120px;
  text-align: center;
}

.attemptTable th:nth-child(4),
.attemptTable td:nth-child(4) {
  width: 160px;
  text-align: center;
} */

/* Header */
._attemptTable_1vhkj_2395 th:first-child,
._attemptTable_1vhkj_2395 th:nth-child(3),
._attemptTable_1vhkj_2395 th:nth-child(4) {
  text-align: left;
}

/* Body */
._attemptTable_1vhkj_2395 td:first-child {
  width: 70px;
  text-align: center;
}

._attemptTable_1vhkj_2395 td:nth-child(3) {
  width: 120px;
  text-align: center;
}

._attemptTable_1vhkj_2395 td:nth-child(4) {
  width: 160px;
  text-align: center;
}

._attemptTable_1vhkj_2395 th:last-child,
._attemptTable_1vhkj_2395 td:last-child {
  white-space: nowrap;
}

/* ==========================================================
   STATUS BADGES
========================================================== */

._statusBadge_1vhkj_2611 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;
  padding: 6px 12px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.2px;
}

/* Completed */

._completed_1vhkj_2647 {
  background: #ecfdf5;
  color: #16a34a;
}

/* In Progress */

._progress_1vhkj_367 {
  background: #eff6ff;
  color: var(--color-primary);
}

/* Pending */

._pending_1vhkj_2675 {
  background: #fff7ed;
  color: #ea580c;
}

/* ==========================================================
   EMPTY STATE
========================================================== */

._emptyState_1vhkj_2693 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 60px 20px;
}

._emptyState_1vhkj_2693 h3 {
  margin: 18px 0 10px;

  color: #0f172a;

  font-size: 20px;
  font-weight: 700;
}

._emptyState_1vhkj_2693 p {
  max-width: 420px;

  margin: 0;

  color: #64748b;

  line-height: 1.7;

  font-size: 13px;
}

/* ==========================================================
   TABLE SCROLL
========================================================== */

._attemptContainer_1vhkj_373::-webkit-scrollbar {
  height: 8px;
}

._attemptContainer_1vhkj_373::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

._attemptContainer_1vhkj_373::-webkit-scrollbar-track {
  background: #f1f5f9;
}

/* ==========================================================
   LARGE TABLETS
========================================================== */

@media (max-width: 1200px) {
  ._topSection_1vhkj_317 {
    grid-template-columns: 1fr;
  }

  ._topSidebar_1vhkj_339 {
    position: static;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;
  }

  ._summaryRow_1vhkj_527 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width: 992px) {
  ._page_1vhkj_9 {
    padding: 24px;
  }

  ._header_1vhkj_51 {
    flex-direction: column;
    align-items: stretch;
  }

  ._headerActions_1vhkj_165 {
    width: 100%;

    justify-content: flex-start;

    flex-wrap: wrap;
  }

  ._headerActions_1vhkj_165 button {
    flex: 1;
    min-width: 180px;
  }

  ._topSidebar_1vhkj_339 {
    grid-template-columns: 1fr;
  }

  ._questionHeaderRow_1vhkj_1583 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._questionHeaderRight_1vhkj_1609 {
    width: 100%;
  }

  ._levelBadge_1vhkj_1701 {
    align-self: flex-start;
  }

  ._navigator_1vhkj_835 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {
  ._page_1vhkj_9 {
    padding: 18px;
  }

  ._headerLeft_1vhkj_67 {
    align-items: flex-start;
  }

  ._pageTitle_1vhkj_121 {
    font-size: 24px;
  }

  ._pageSubtitle_1vhkj_139 {
    font-size: 14px;
  }

  ._summaryRow_1vhkj_527 {
    grid-template-columns: 1fr;
  }

  ._summaryCard_1vhkj_365 {
    padding: 18px;
  }

  ._summaryCard_1vhkj_365 h3 {
    font-size: 22px;
  }

  ._questionCard_1vhkj_371 {
    padding: 22px;
  }

  ._questionTitle_1vhkj_1657 {
    font-size: 20px;
  }

  ._questionDescription_1vhkj_1675 {
    font-size: 14px;
  }

  ._hintCard_1vhkj_1751 {
    padding: 16px;
  }

  ._answerCard_1vhkj_1873 {
    padding: 16px;
    gap: 12px;
  }

  ._answerText_1vhkj_2001 {
    font-size: 14px;

    flex-direction: column;
    gap: 4px;
  }

  ._answerInput_1vhkj_2119,
  ._answerTextarea_1vhkj_2121 {
    font-size: 14px;
  }

  ._navigator_1vhkj_835 {
    grid-template-columns: repeat(5, 1fr);
  }

  ._questionNumber_1vhkj_917 {
    width: 42px;
    height: 42px;
  }

  ._attemptContainer_1vhkj_373 {
    padding: 18px;
  }

  ._attemptTable_1vhkj_2395 {
    min-width: 650px;
  }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 576px) {
  ._page_1vhkj_9 {
    padding: 14px;
  }

  ._headerLeft_1vhkj_67 {
    gap: 14px;
  }

  ._backBtn_1vhkj_81 {
    width: 42px;
    height: 42px;
  }

  ._pageTitle_1vhkj_121 {
    font-size: 20px;
  }

  ._headerActions_1vhkj_165 {
    flex-direction: column;
    width: 100%;
  }

  ._headerActions_1vhkj_165 button {
    width: 100%;
  }

  ._tabs_1vhkj_1383 {
    width: 100%;
  }

  ._tab_1vhkj_1265 {
    flex: 1;
    text-align: center;
  }

  ._questionCard_1vhkj_371 {
    padding: 18px;
  }

  ._questionNumberText_1vhkj_1617 {
    font-size: 11px;
  }

  ._questionTitle_1vhkj_1657 {
    font-size: 18px;
  }

  ._questionDescription_1vhkj_1675 {
    line-height: 1.6;
  }

  ._levelBadge_1vhkj_1701 {
    font-size: 12px;
    padding: 8px 14px;
  }

  ._hintTitle_1vhkj_1783 {
    font-size: 13px;
  }

  ._answerCard_1vhkj_1873 {
    align-items: flex-start;
  }

  ._answerCircle_1vhkj_1953 {
    margin-top: 3px;
  }

  ._correctBadge_1vhkj_2063 {
    width: 24px;
    height: 24px;

    font-size: 12px;
  }

  ._referenceVideo_1vhkj_2261,
  ._uploadCard_1vhkj_2207 {
    width: 100%;
    justify-content: center;
  }

  ._navigator_1vhkj_835 {
    grid-template-columns: repeat(4, 1fr);
  }

  ._questionNumber_1vhkj_917 {
    width: 40px;
    height: 40px;

    font-size: 13px;
  }

  ._legend_1vhkj_999 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  ._progressItem_1vhkj_723 {
    padding: 12px;
  }

  ._progressIcon_1vhkj_755 {
    width: 40px;
    height: 40px;
  }

  ._emptyState_1vhkj_2693 {
    padding: 50px 16px;
  }

  ._emptyState_1vhkj_2693 h3 {
    font-size: 20px;
  }

  ._emptyState_1vhkj_2693 p {
    font-size: 14px;
  }
}

/* ==========================================================
   PRINT
========================================================== */

@media print {
  ._headerActions_1vhkj_165,
  ._topSidebar_1vhkj_339,
  ._backBtn_1vhkj_81,
  ._referenceVideo_1vhkj_2261 {
    display: none !important;
  }

  ._page_1vhkj_9 {
    padding: 0;
    background: #fff;
  }

  ._questionCard_1vhkj_371,
  ._summaryCard_1vhkj_365,
  ._attemptContainer_1vhkj_373 {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}
/* ==========================================================
   PAGE
========================================================== */

._page_hpjqt_9 {
  min-height: 100vh;
  padding: 18px;
  background: #f8fafc;
}

._loading_hpjqt_21 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #64748b;
}

/* ==========================================================
   HEADER
========================================================== */

._header_hpjqt_47 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

._headerLeft_hpjqt_65 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

._backBtn_hpjqt_79 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._backBtn_hpjqt_79:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._pageTitle_hpjqt_119 {
  margin: 0;

  font-size: 14px;
  font-weight: 700;

  color: #0f172a;
}

._pageSubtitle_hpjqt_137 {
  margin-top: 5px;
  font-size: 10px;

  color: #64748b;

  line-height: 1.6;
}

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

._learnBtn_hpjqt_167 {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 10px;
  gap: 8px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  transition: 0.25s;
}

._learnBtn_hpjqt_167:hover {
  background: var(--color-primary-dark);
}

/* ==========================================================
   LAYOUT
========================================================== */

._topSection_hpjqt_213 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}

._leftContent_hpjqt_227 {
  min-width: 0;
}

/* ==========================================================
   SUMMARY
========================================================== */

._summaryWrapper_hpjqt_243 {
  background: #fff;
  border-radius: 18px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid #edf2f7;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
}

._summaryRow_hpjqt_261 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

._summaryCard_hpjqt_271 {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 14px;
  gap: 10px;
}

._summaryCard_hpjqt_271:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18%;
  width: 1px;
  height: 64%;
  background: #edf2f7;
}

._summaryIcon_hpjqt_307 {
  width: 34px;
  height: 34px;
  font-size: 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._summaryContent_hpjqt_329 {
  display: flex;
  flex-direction: column;
}

._summaryContent_hpjqt_329 span {
  color: #64748b;
  font-size: 10px;
  margin-bottom: 4px;
}

._summaryContent_hpjqt_329 h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

._summaryContent_hpjqt_329 small {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 10px;
}
/* ==========================================================
   SIDEBAR
========================================================== */

._topSidebar_hpjqt_383 {
  position: sticky;
  top: 18px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-self: start;
}

._progressCard_hpjqt_401,
._sideCard_hpjqt_403 {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
}

._sideTitle_hpjqt_419 {
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 700;
  color: #0f172a;
}

/* ==========================================================
   PROGRESS CARD
========================================================== */

._progressCard_hpjqt_401 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._progressItem_hpjqt_453 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._progressIcon_hpjqt_465 {
  width: 28px;
  height: 28px;
  font-size: 13px;
  border-radius: 10px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._progressItem_hpjqt_453 span {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}

._progressItem_hpjqt_453 strong {
  font-size: 12px;
  color: #0f172a;
  font-weight: 700;
}

/* ==========================================================
   NAVIGATOR
========================================================== */

/* .navigator {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
} */

/* .navigator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px;
} */

._navigator_hpjqt_525 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;

  max-height: min(420px, 85vh);

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px;
}

/* .questionNumber {
  width: 42px;
  height: 42px;
  font-size: 11px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.25s ease;
} */

._questionNumber_hpjqt_587 {
  width: 34px;
  height: 34px;
  font-size: 11px;
  border: none;
  border-radius: 10px;

  background: #f8fafc;
  color: #475569;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.25s ease;
}

._questionNumber_hpjqt_587:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
  color: var(--color-primary);
}

._activeQuestion_hpjqt_669 {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.22);
}

._activeQuestion_hpjqt_669:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

/* ==========================================================
   LEGEND
========================================================== */

._legend_hpjqt_701 {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #edf2f7;
  font-size: 13px;
  color: #64748b;
}

._legend_hpjqt_701 div {
  display: flex;
  align-items: center;
  gap: 8px;
}

._legendCurrent_hpjqt_733,
._legendNormal_hpjqt_735 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

._legendCurrent_hpjqt_733 {
  background: var(--color-primary);
}

._legendNormal_hpjqt_735 {
  background: #e2e8f0;
}

/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

._navigationActions_hpjqt_771 {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

._previousBtn_hpjqt_783,
._nextBtn_hpjqt_785 {
  flex: 1;
  height: 38px;
  font-size: 12px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

._previousBtn_hpjqt_783 {
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

._previousBtn_hpjqt_783:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}

._nextBtn_hpjqt_785 {
  border: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
}

._nextBtn_hpjqt_785:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.25);
}

._previousBtn_hpjqt_783:disabled,
._nextBtn_hpjqt_785:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================
   QUESTION SECTION
========================================================== */

._questionSection_hpjqt_891 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

._questionCard_hpjqt_903 {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  padding: 22px; /* was 30px */
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
  scroll-margin-top: 110px;
  transition: all 0.25s ease;
}

._questionCard_hpjqt_903:hover {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

/* ==========================================================
   QUESTION HEADER
========================================================== */

._questionHeaderRow_hpjqt_939 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

._questionHeaderLeft_hpjqt_955 {
  flex: 1;
  min-width: 0;
}

._questionHeaderRight_hpjqt_965 {
  flex-shrink: 0;
}

._questionNumberText_hpjqt_973 {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-primary-lightest);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 16px;
}

._levelBadge_hpjqt_997 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-weight: 600;
  white-space: nowrap;
}

._questionTitle_hpjqt_1023 {
  margin: 0;
  font-size: 15px; /* was 18px */
  line-height: 1.45;
  font-weight: 700;
  color: #0f172a;
}

._questionDescription_hpjqt_1039 {
  /* margin: 16px 0 0; */
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================
   HINT CARD
========================================================== */

._hintCard_hpjqt_1061 {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 24px;

  padding: 14px 16px;

  border-radius: 16px;

  background: #fffdf4;

  border-left: 4px solid #f59e0b;

  border: 1px solid #fde68a;
}

._hintTitle_hpjqt_1097 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;

  color: #b45309;

  font-size: 11px;
  font-weight: 700;
}

._hintCard_hpjqt_1061 p {
  margin: 0;

  color: #78350f;

  font-size: 11px;

  line-height: 1.7;
}

/* ==========================================================
   ANSWER SECTION
========================================================== */

._answerList_hpjqt_1151 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}

._answerCard_hpjqt_1165 {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  transition: all 0.25s ease;
}

._answerCard_hpjqt_1165:hover {
  border-color: var(--color-primary-lighter);
  background: var(--color-primary-lightest);
}

._correctAnswer_hpjqt_1197 {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

._answerCircle_hpjqt_1207 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
}

._answerCircleActive_hpjqt_1223 {
  border-color: #22c55e;
  background: #22c55e;
}

._answerText_hpjqt_1233 {
  flex: 1;

  display: flex;
  align-items: flex-start;
  gap: 8px;

  color: #334155;
  font-size: 12px;
  line-height: 1.6;

  min-width: 0;
  word-break: break-word;
}

._answerText_hpjqt_1233 strong {
  color: var(--color-primary);
  flex-shrink: 0;
  font-size: 12px;
}

._answerText_hpjqt_1233 span {
  color: #334155;
  font-size: 12px;
  line-height: 1.6;
}

._correctBadge_hpjqt_1287 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
/* ==========================================================
   TEXT ANSWERS
========================================================== */

._textAnswerBox_hpjqt_1319 {
  margin-top: 20px;
}

._answerInput_hpjqt_1327,
._answerTextarea_hpjqt_1329 {
  width: 100%;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
  transition: all 0.25s ease;
  resize: none;
}

._answerInput_hpjqt_1327 {
  height: 46px;
  padding: 20px;
  font-size: 12px;
}

._answerTextarea_hpjqt_1329 {
  min-height: 70px;
  padding: 12px;
  font-size: 12px;
}

._answerInput_hpjqt_1327:focus,
._answerTextarea_hpjqt_1329:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-lightest);
}

._answerInput_hpjqt_1327[readonly],
._answerTextarea_hpjqt_1329[readonly] {
  cursor: default;
}

/* ==========================================================
   REFERENCE VIDEO
========================================================== */

._referenceVideo_hpjqt_1409 {
  margin-top: 18px;
  padding: 9px 14px;
  font-size: 11px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff5f5;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

._referenceVideo_hpjqt_1409:hover {
  background: #dc2626;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.18);
}

._referenceVideo_hpjqt_1409 svg {
  font-size: 15px;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

._navigator_hpjqt_525::-webkit-scrollbar,
._questionSection_hpjqt_891::-webkit-scrollbar {
  width: 6px;
}

._navigator_hpjqt_525::-webkit-scrollbar-thumb,
._questionSection_hpjqt_891::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

._navigator_hpjqt_525::-webkit-scrollbar-thumb:hover,
._questionSection_hpjqt_891::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {
  ._topSection_hpjqt_213 {
    grid-template-columns: 1fr;
  }

  ._topSidebar_hpjqt_383 {
    position: static;
    order: -1;
  }

  ._summaryRow_hpjqt_261 {
    grid-template-columns: repeat(2, 1fr);
  }

  ._summaryCard_hpjqt_271:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  ._page_hpjqt_9 {
    padding: 20px;
  }

  ._header_hpjqt_47 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._headerLeft_hpjqt_65 {
    width: 100%;
  }

  ._pageTitle_hpjqt_119 {
    font-size: 24px;
  }

  ._summaryRow_hpjqt_261 {
    grid-template-columns: 1fr;
  }

  ._summaryCard_hpjqt_271 {
    padding: 22px;
  }

  ._summaryCard_hpjqt_271::after {
    display: none;
  }

  ._questionCard_hpjqt_903 {
    padding: 22px;
  }

  ._questionHeaderRow_hpjqt_939 {
    flex-direction: column;
    gap: 16px;
  }

  ._questionTitle_hpjqt_1023 {
    font-size: 14px;
  }

  ._navigator_hpjqt_525 {
    grid-template-columns: repeat(4, 1fr);
  }

  ._questionNumber_hpjqt_587 {
    width: 100%;
    height: 44px;
  }

  ._navigationActions_hpjqt_771 {
    flex-direction: column;
  }

  ._previousBtn_hpjqt_783,
  ._nextBtn_hpjqt_785 {
    width: 100%;
  }
}

@media (max-width: 576px) {
  ._page_hpjqt_9 {
    padding: 16px;
  }

  ._backBtn_hpjqt_79 {
    width: 42px;
    height: 42px;
  }

  ._learnBtn_hpjqt_167 {
    width: 100%;
    justify-content: center;
  }

  ._summaryCard_hpjqt_271 {
    gap: 14px;
    padding: 18px;
  }

  ._summaryIcon_hpjqt_307 {
    width: 54px;
    height: 54px;
    font-size: 22px;
  }

  ._summaryContent_hpjqt_329 h3 {
    font-size: 22px;
  }

  ._questionCard_hpjqt_903 {
    padding: 18px;
  }

  ._hintCard_hpjqt_1061 {
    padding: 18px;
  }

  ._answerCard_hpjqt_1165 {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  ._correctBadge_hpjqt_1287 {
    margin-left: 36px;
  }

  ._navigator_hpjqt_525 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==========================================================
   PAGE
========================================================== */

._page_93s76_9 {
  min-height: 100vh;
  background: #f6f8fb;
  padding: 18px;
  box-sizing: border-box;
}

._stateWrap_93s76_23 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #64748b;

  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================
   HEADER
========================================================== */

._headerRow_93s76_55 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-bottom: 18px;
}

._titleRow_93s76_75 {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 1;
  min-width: 0;
}

._backBtn_93s76_93 {
  width: 34px;
  height: 34px;

  border-radius: 10px;

  border: 1px solid #e2e8f0;

  background: white;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.25s ease;

  color: #475569;

  flex-shrink: 0;
}

._backBtn_93s76_93:hover {
  background: #f8fafc;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

._masterHeading_93s76_151 {
  margin: 0;

  font-size: 18px;
  font-weight: 700;

  color: #0f172a;

  line-height: 1.35;
}

._viewHeading_93s76_173 {
  color: var(--color-primary);
}

._headerActions_93s76_181 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================
   HEADER BUTTONS
========================================================== */

._addBtn_93s76_201,
._quitBtn_93s76_203 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 36px;

  padding: 0 16px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 600;

  transition: 0.25s ease;
}

._addBtn_93s76_201 {
  border: 1px solid var(--color-primary);

  background: white;

  color: var(--color-primary);
}

._addBtn_93s76_201:hover {
  background: var(--color-primary);
  color: white;
}

._quitBtn_93s76_203 {
  border: 1px solid #ef4444;

  background: white;

  color: #ef4444;
}

._quitBtn_93s76_203:hover {
  background: #ef4444;
  color: white;
}

/* ==========================================================
   MAIN LAYOUT
========================================================== */

._bodyRow_93s76_303 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
}

._questionColumn_93s76_315 {
  min-width: 0;
}

._sidebar_93s76_323 {
  position: sticky;
  top: 18px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================
   COMMON CARD
========================================================== */

._questionCard_93s76_349,
._paginationCard_93s76_351,
._feedbackCard_93s76_353 {
  background: white;

  border: 1px solid #edf2f7;

  border-radius: 16px;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
}

/* ==========================================================
   QUESTION CARD
========================================================== */

/* .questionCard {
  padding: 20px;
} */

._questionCard_93s76_349 {
  display: flex;
  flex-direction: column;

  height: calc(100vh - 250px);

  padding: 0;

  overflow: hidden;
}

._questionContent_93s76_411 {
  flex: 1;

  overflow-y: auto;

  padding: 20px;

  min-height: 0;
}

._questionContent_93s76_411::-webkit-scrollbar {
  width: 6px;
}

._questionContent_93s76_411::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

._questionContent_93s76_411::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

._sideHeading_93s76_457 {
  display: inline-flex;
  align-items: center;

  padding: 4px 10px;

  margin-bottom: 14px;

  border-radius: 999px;

  background: #f3edff;

  color: var(--color-primary);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}

._questionText_93s76_499 {
  margin: 0 0 18px;

  color: #111827;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.6;
}

._answerArea_93s76_521 {
  margin-top: 10px;
}

/* ==========================================================
   OPTION CARDS
========================================================== */

._optionCard_93s76_537 {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  margin-bottom: 10px;

  border-radius: 12px;

  background: white;

  border: 1px solid #e2e8f0;

  transition: 0.25s ease;
}

._optionCard_93s76_537:hover {
  background: #f8fbff;
  border-color: var(--color-primary);
}

._selectedOption_93s76_583 {
  background: #f8efff;
  border-color: var(--color-primary);
}

._radioInput_93s76_593 {
  width: 16px;
  height: 16px;

  accent-color: var(--color-primary);

  cursor: pointer;

  flex-shrink: 0;
}

._optionKey_93s76_615 {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: #f3f4f6;

  color: var(--color-primary);

  font-size: 11px;
  font-weight: 700;

  flex-shrink: 0;
}

._yesNoRow_93s76_655 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._yesNoCard_93s76_667 {
  min-width: 120px;
  justify-content: center;
}

/* ==========================================================
   INPUTS
========================================================== */

._textInput_93s76_685,
._textArea_93s76_687 {
  width: 100%;

  box-sizing: border-box;

  border: 1px solid #dbe4ef;

  border-radius: 12px;

  background: #f8fafc;

  color: #334155;

  padding: 12px 14px;

  font-size: 12px;

  font-family: inherit;

  outline: none;

  transition: 0.25s ease;
}

._textInput_93s76_685 {
  height: 44px;
}

._textArea_93s76_687 {
  min-height: 280px;
  resize: vertical;
}

._textInput_93s76_685:focus,
._textArea_93s76_687:focus {
  border-color: var(--color-primary);
  background: white;
}

._textInput_93s76_685:disabled,
._textArea_93s76_687:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

/* ==========================================================
   RESULT BOXES
========================================================== */

._resultBox_93s76_787,
._answerPanel_93s76_789 {
  width: fit-content;
  max-width: 520px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;

  border-radius: 10px;

  background: #f0fdf4;
  border: 1px solid #86efac;

  color: #166534;

  font-size: 12px;
}

._answerPanel_93s76_789 strong {
  white-space: nowrap;
  color: #166534;
  font-weight: 700;
}

._resultBox_93s76_787 strong,
._answerPanel_93s76_789 strong {
  font-weight: 700;
}

._correctBox_93s76_851 {
  background: #ecfdf5;

  border-color: #86efac;

  color: #166534;
}

._wrongBox_93s76_867 {
  background: #fef2f2;

  border-color: #fca5a5;

  color: #991b1b;
}

/* ==========================================================
   HINT
========================================================== */

/* .hintBox {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-top: 16px;

  padding: 14px 16px;

  border-radius: 12px;

  background: #fffaf0;

  border: 1px solid #fcd34d;

  border-left: 4px solid #f59e0b;
} */

._hintBox_93s76_891 {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 14px;

  border-radius: 10px;

  background: #fffaf0;
  border: 1px solid #fcd34d;

  width: fit-content;
  max-width: 650px;
}

._hintIcon_93s76_959 {
  color: #d97706;

  font-size: 18px;

  margin-top: 2px;

  flex-shrink: 0;
}

._hintContent_93s76_979 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._hintTitle_93s76_993 {
  margin: 0;

  color: #b45309;
  font-size: 13px;
  font-weight: 700;

  white-space: nowrap;
}

._hintText_93s76_1013 {
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}

._hintBox_93s76_891 span {
  color: #78350f;

  font-size: 12px;

  line-height: 1.7;
}

._hintBox_93s76_891 strong {
  color: #b45309;
}

._bottomCard_93s76_1049 {
  margin-top: 16px;

  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);

  padding: 18px 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

/* .actionsRow {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;
} */

._actionsRow_93s76_1089 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  padding: 16px 20px;

  border-top: 1px solid #eef2f7;

  background: #fff;

  flex-shrink: 0;
}

._ghostBtn_93s76_1135,
._primaryBtn_93s76_1137 {
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 16px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 600;

  transition: 0.25s ease;
}

._ghostBtn_93s76_1135 {
  background: white;

  color: #64748b;

  border: 1px solid #e2e8f0;
}

._ghostBtn_93s76_1135:hover:not(:disabled) {
  border-color: var(--color-primary);

  color: var(--color-primary);

  background: #f8efff;
}

._primaryBtn_93s76_1137 {
  margin-left: auto;

  border: none;

  color: white;

  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
}

._primaryBtn_93s76_1137:hover:not(:disabled) {
  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(116, 37, 235, 0.25);
}

._primaryBtn_93s76_1137:disabled,
._ghostBtn_93s76_1135:disabled {
  opacity: 0.45;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;
}

._iconMargin_93s76_1273 {
  margin-right: 2px;
}

/* ==========================================================
   SPINNER
========================================================== */

._spinnerSm_93s76_1289 {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.35);

  border-top-color: white;

  animation: _spin_93s76_1289 0.8s linear infinite;
}

@keyframes _spin_93s76_1289 {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================
   SIDEBAR
========================================================== */

._paginationCard_93s76_351 {
  padding: 16px;
}

._navTitle_93s76_1343 {
  display: block;

  margin-bottom: 14px;

  color: #0f172a;

  font-size: 12px;
  font-weight: 700;
}

._questionNav_93s76_1365 {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 8px;
}

._navNumber_93s76_1381 {
  width: 34px;
  height: 34px;

  border: none;

  border-radius: 10px;

  background: #f8fafc;

  color: #475569;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.25s ease;
}

._navNumber_93s76_1381:hover {
  background: #f3edff;

  color: var(--color-primary);
}

._navActive_93s76_1441 {
  background: var(--color-primary) !important;

  color: white !important;

  box-shadow: 0 6px 14px rgba(116, 37, 235, 0.25);
}

._navCorrect_93s76_1457 {
  background: #dcfce7;

  color: #166534;
}

._navWrong_93s76_1469 {
  background: #fee2e2;

  color: #991b1b;
}

/* ==========================================================
   FEEDBACK CARD
========================================================== */

._feedbackCard_93s76_353 {
  padding: 16px;

  background: #fff;

  border: 1px solid #edf2f7;
  border-radius: 16px;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
  margin-top: 10px;
}

._feedbackHeader_93s76_1513 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

._feedbackContent_93s76_1525 {
  flex: 1;
  min-width: 0;
}

._feedbackContent_93s76_1525 h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

._feedbackRow_93s76_1549 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

._feedbackRow_93s76_1549 p {
  flex: 1;
  margin: 0;

  color: #64748b;
  font-size: 10px;
  line-height: 1.6;
}

._feedbackStats_93s76_1581 {
  display: flex;
  align-items: center;
  gap: 20px;

  flex-shrink: 0;
}

._feedbackStat_93s76_1581 {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0;

  background: transparent;
  border: none;
}

._feedbackStat_93s76_1581 span {
  color: #64748b;
  font-size: 12px;
}

._feedbackStat_93s76_1581 strong {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================
   MODALS
========================================================== */

._modalText_93s76_1649 {
  margin: 0;

  color: #334155;

  font-size: 13px;

  line-height: 1.7;
}

._modalActions_93s76_1669 {
  margin-top: 22px;

  display: flex;
  justify-content: flex-end;

  gap: 10px;
}

/* ==========================================================
   DISABLED STATES
========================================================== */

button:disabled {
  cursor: not-allowed;
}

._radioInput_93s76_593:disabled {
  cursor: not-allowed;
}

._optionCard_93s76_537:has(._radioInput_93s76_593:disabled) {
  opacity: 0.85;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

._questionNav_93s76_1365::-webkit-scrollbar {
  width: 6px;
}

._questionNav_93s76_1365::-webkit-scrollbar-track {
  background: transparent;
}

._questionNav_93s76_1365::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

._questionNav_93s76_1365::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ==========================================================
   FOCUS STATES
========================================================== */

._backBtn_93s76_93:focus-visible,
._addBtn_93s76_201:focus-visible,
._quitBtn_93s76_203:focus-visible,
._ghostBtn_93s76_1135:focus-visible,
._primaryBtn_93s76_1137:focus-visible,
._navNumber_93s76_1381:focus-visible,
._textInput_93s76_685:focus-visible,
._textArea_93s76_687:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================
   ANIMATIONS
========================================================== */

._questionCard_93s76_349,
._feedbackCard_93s76_353,
._paginationCard_93s76_351 {
  animation: _fadeIn_93s76_1 0.25s ease;
}

@keyframes _fadeIn_93s76_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {
  ._bodyRow_93s76_303 {
    grid-template-columns: 1fr;
  }

  ._sidebar_93s76_323 {
    position: static;
    order: -1;
  }

  ._questionNav_93s76_1365 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_93s76_9 {
    padding: 18px;
  }

  ._headerRow_93s76_55 {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  ._titleRow_93s76_75 {
    width: 100%;
  }

  ._headerActions_93s76_181 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._headerActions_93s76_181 button {
    flex: 1;
    min-width: 170px;
  }

  ._questionCard_93s76_349 {
    padding: 18px;
  }

  ._actionsRow_93s76_1089 {
    flex-direction: column;
  }

  ._ghostBtn_93s76_1135,
  ._primaryBtn_93s76_1137 {
    width: 100%;
    margin-left: 0;
  }

  ._feedbackStats_93s76_1581 {
    grid-template-columns: 1fr;
  }

  ._questionNav_93s76_1365 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 576px) {
  ._page_93s76_9 {
    padding: 14px;
  }

  ._masterHeading_93s76_151 {
    font-size: 15px;
  }

  ._questionText_93s76_499 {
    font-size: 14px;
  }

  ._yesNoRow_93s76_655 {
    flex-direction: column;
  }

  ._optionCard_93s76_537 {
    padding: 12px;
  }

  ._questionNav_93s76_1365 {
    grid-template-columns: repeat(5, 1fr);
  }

  ._feedbackCard_93s76_353 {
    padding: 16px;
  }

  ._feedbackHeader_93s76_1513 {
    gap: 10px;
  }

  ._feedbackIcon_93s76_2037 {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

/* ==========================================================
   PRINT
========================================================== */

@media print {
  ._headerActions_93s76_181,
  ._sidebar_93s76_323,
  ._actionsRow_93s76_1089,
  ._backBtn_93s76_93 {
    display: none !important;
  }

  ._page_93s76_9 {
    background: white;
    padding: 0;
  }

  ._questionCard_93s76_349 {
    box-shadow: none;
    border: 1px solid #dbe4ef;
  }
}
/* ==========================================================
   PAGE
========================================================== */

._page_so69q_9 {
  min-height: 100vh;
  background: #f6f8fb;
  padding: 18px;
  box-sizing: border-box;
}

._backBtn_so69q_23 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._backBtn_so69q_23:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._stateWrap_so69q_63 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 600;

  color: #64748b;
}

/* ==========================================================
   HEADER
========================================================== */

._headerLeft_so69q_95 {
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 0;
  flex: 1;
}

._headerRow_so69q_113 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}

._masterHeading_so69q_133 {
  margin: 0;

  font-size: 16px;
  font-weight: 700;

  color: #0f172a;

  line-height: 1.3;
}

._headerActions_so69q_155 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================
   HEADER BUTTONS
========================================================== */

._addBtn_so69q_177,
._quitBtn_so69q_179 {
  border: none;

  padding: 7px 14px;

  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 600;

  transition: all 0.25s ease;
}

._addBtn_so69q_177 {
  background: white;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

._addBtn_so69q_177:hover {
  background: var(--color-primary);
  color: white;
}

._quitBtn_so69q_179 {
  background: #fff;
  color: #ef4444;
  border: 1px solid #ef4444;
}

._quitBtn_so69q_179:hover {
  background: #ef4444;
  color: white;
}

/* ==========================================================
   MAIN LAYOUT
========================================================== */

._bodyRow_so69q_269 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;

  align-items: start;
}

._questionColumn_so69q_285 {
  min-width: 0;
}

._sidebar_so69q_293 {
  position: sticky;
  top: 18px;

  height: calc(100vh - 150px);

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================
   COMMON CARDS
========================================================== */

._questionCard_so69q_323,
._paginationCard_so69q_325,
._timerCard_so69q_327 {
  background: white;

  border-radius: 16px;

  border: 1px solid #edf2f7;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
}

/* ==========================================================
   QUESTION CARD
========================================================== */

/* .questionCard {
  padding: 20px;
} */

._questionCard_so69q_323 {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);

  height: calc(100vh - 290px);
  min-height: 380px;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

._questionContent_so69q_393 {
  flex: 1;

  overflow-y: auto;

  padding: 16px;

  min-height: 0;
}

/* ==========================================================
   QUESTION HEADER
========================================================== */

._sideHeading_so69q_421 {
  display: inline-flex;
  align-items: center;

  margin-bottom: 12px;

  padding: 4px 10px;

  border-radius: 999px;

  background: #f3edff;
  color: var(--color-primary);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.3px;
  text-transform: uppercase;
}

._questionText_so69q_461 {
  margin: 0 0 18px;

  font-size: 12px;
  font-weight: 700;

  color: #111827;

  line-height: 1.5;
}

/* ==========================================================
   ANSWER AREA
========================================================== */

._answerArea_so69q_491 {
  margin-top: 16px;
}

/* ==========================================================
   OPTION CARDS
========================================================== */

._optionCard_so69q_507 {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 16px;

  margin-bottom: 10px;

  border-radius: 12px;

  background: #fff;

  border: 1px solid #e2e8f0;

  cursor: pointer;

  transition: all 0.25s ease;
}

._optionCard_so69q_507:hover {
  background: #f8fbff;
  border-color: var(--color-primary);
}

._selectedOption_so69q_557 {
  background: #f8efff;
  border-color: var(--color-primary);
}

/* ==========================================================
   RADIO
========================================================== */

._radioInput_so69q_575 {
  accent-color: var(--color-primary);

  width: 16px;
  height: 16px;

  cursor: pointer;

  flex-shrink: 0;
}

/* ==========================================================
   OPTION KEY
========================================================== */

._optionKey_so69q_605 {
  width: 15px;
  height: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: #f3f4f6;

  color: var(--color-primary);

  font-size: 9px;
  font-weight: 700;

  flex-shrink: 0;
}
._options_so69q_643 {
  font-size: 11px;
  font-weight: 700;
}
/* ==========================================================
   YES / NO
========================================================== */

._yesNoRow_so69q_659 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

._yesNoCard_so69q_671 {
  min-width: 120px;
  justify-content: center;
}

/* ==========================================================
   TEXT INPUTS
========================================================== */

._textInput_so69q_689,
._textArea_so69q_691 {
  width: 100%;

  box-sizing: border-box;

  border: 1px solid #dbe4ef;

  border-radius: 12px;

  background: #f8fafc;

  color: #334155;

  padding: 12px 14px;

  font-size: 12px;

  font-family: inherit;

  outline: none;

  transition: all 0.25s ease;
}

._textInput_so69q_689 {
  height: 44px;
}

._textArea_so69q_691 {
  min-height: 200px;
  resize: vertical;
}

._textInput_so69q_689:focus,
._textArea_so69q_691:focus {
  background: white;
  border-color: var(--color-primary);
}

/* ==========================================================
   HINT CARD
========================================================== */

._bottomCard_so69q_777 {
  margin-top: 16px;

  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;

  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);

  padding: 18px 20px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

._hintBox_so69q_811 {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;

  border-radius: 10px;

  background: #fffaf0;
  border: 1px solid #fcd34d;

  width: fit-content;
  max-width: 700px;
}

._hintContent_so69q_843 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

._hintTitle_so69q_857 {
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

._hintText_so69q_871 {
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}

._hintIcon_so69q_883 {
  color: #d97706;
  font-size: 18px;
  flex-shrink: 0;
}

._hintBox_so69q_811 span {
  color: #78350f;
  font-size: 12px;
  line-height: 1.7;
}

._hintBox_so69q_811 strong {
  color: #b45309;
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

/* .actionsRow {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;
} */

._actionsRow_so69q_923 {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  padding: 10px 12px;

  border-top: 1px solid #edf2f7;

  background: white;
}

._ghostBtn_so69q_973,
._primaryBtn_so69q_975 {
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 16px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 11px;
  font-weight: 600;

  transition: all 0.25s ease;
}

._ghostBtn_so69q_973 {
  background: white;

  color: #64748b;

  border: 1px solid #e2e8f0;
}

._ghostBtn_so69q_973:hover:not(:disabled) {
  background: #f8efff;

  border-color: var(--color-primary);

  color: var(--color-primary);
}

._primaryBtn_so69q_975 {
  margin-left: auto;

  border: none;

  color: white;

  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
}

._primaryBtn_so69q_975:hover:not(:disabled) {
  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(116, 37, 235, 0.25);
}

._primaryBtn_so69q_975:disabled,
._ghostBtn_so69q_973:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

._iconMargin_so69q_1103 {
  margin-right: 2px;
}

/* ==========================================================
   TIMER CARD
========================================================== */

._timerCard_so69q_327 {
  padding: 7px;

  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );

  color: white;
}

._timerCard_so69q_327 span {
  display: block;

  font-size: 10px;

  opacity: 0.9;

  text-transform: uppercase;

  letter-spacing: 0.3px;
}

._timerCard_so69q_327 h3 {
  margin: 2px 0 0;

  font-size: 16px;
  font-weight: 700;

  font-variant-numeric: tabular-nums;
}

/* ==========================================================
   QUESTION NAVIGATOR
========================================================== */

/* .paginationCard {
  padding: 16px;
} */

._paginationCard_so69q_325 {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 16px;

  overflow: hidden;
}

._navTitle_so69q_1223 {
  display: block;

  margin-bottom: 14px;

  font-size: 12px;
  font-weight: 700;

  color: #0f172a;
}

/* .questionNav {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 8px;

  max-height: 420px;

  overflow-y: auto;

  padding-right: 4px;
} */

._questionNav_so69q_1245 {
  flex: 1;

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  gap: 8px;

  overflow-y: auto;

  padding-right: 4px;
}

._questionNav_so69q_1245::-webkit-scrollbar {
  width: 6px;
}

._questionNav_so69q_1245::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

._questionNav_so69q_1245::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* ==========================================================
   QUESTION BUTTONS
========================================================== */

._navNumber_so69q_1333 {
  position: relative;

  width: 34px;
  height: 34px;

  border: none;

  border-radius: 10px;

  background: #f8fafc;

  color: #475569;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;
}

._navNumber_so69q_1333:hover {
  background: #eedbfe;
  color: var(--color-primary);
}

._navActive_so69q_1395 {
  background: var(--color-primary) !important;
  color: white !important;

  box-shadow: 0 6px 14px rgba(116, 37, 235, 0.25);
}

._navAttended_so69q_1409 {
  background: #dcfce7;
  color: #166534;
}

._navSkipped_so69q_1419 {
  background: #fee2e2;
  color: #991b1b;
}

._navHold_so69q_1429 {
  background: #fef3c7;
  color: #92400e;
}

._navBookmark_so69q_1439 {
  position: absolute;

  top: 2px;
  right: 2px;

  font-size: 8px;

  color: #f59e0b;
}

/* ==========================================================
   SPINNER
========================================================== */

._spinnerSm_so69q_1469 {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: white;

  animation: _spin_so69q_1469 0.8s linear infinite;
}

@keyframes _spin_so69q_1469 {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================
   MODALS
========================================================== */

._modalText_so69q_1513 {
  margin: 0;

  font-size: 13px;

  color: #334155;

  line-height: 1.7;
}

._modalActions_so69q_1533 {
  margin-top: 22px;

  display: flex;
  justify-content: flex-end;

  gap: 10px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {
  ._bodyRow_so69q_269 {
    grid-template-columns: 1fr;
  }

  ._sidebar_so69q_293 {
    position: static;
    order: -1;
  }

  ._questionNav_so69q_1245 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 768px) {
  ._page_so69q_9 {
    padding: 18px;
  }

  ._headerRow_so69q_113 {
    flex-direction: column;
    align-items: stretch;
  }

  ._headerActions_so69q_155 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._headerActions_so69q_155 button {
    flex: 1;
    min-width: 180px;
  }

  ._questionCard_so69q_323 {
    padding: 18px;
  }

  ._actionsRow_so69q_923 {
    flex-direction: column;
  }

  ._ghostBtn_so69q_973,
  ._primaryBtn_so69q_975 {
    width: 100%;
    margin-left: 0;
  }

  ._questionNav_so69q_1245 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 576px) {
  ._page_so69q_9 {
    padding: 14px;
  }

  ._masterHeading_so69q_133 {
    font-size: 14px;
  }

  ._questionText_so69q_461 {
    font-size: 14px;
  }

  ._yesNoRow_so69q_659 {
    flex-direction: column;
  }

  ._optionCard_so69q_507 {
    padding: 12px;
  }

  ._questionNav_so69q_1245 {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* ==========================================================
   PAGE
========================================================== */

._page_1ulat_9 {
  min-height: 100vh;
  background: #f6f8fb;
  padding: 14px;
  box-sizing: border-box;
}

._loading_1ulat_23 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* ==========================================================
   HEADER
========================================================== */

._header_1ulat_51 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

._headerLeft_1ulat_65 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._backBtn_1ulat_77 {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.25s;
  font-size: 14px;
}

._backBtn_1ulat_77:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._title_1ulat_115 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

._subTitle_1ulat_131 {
  margin-top: 2px;
  font-size: 10px;
  color: #64748b;
}

/* ==========================================================
   PROFILE CARD
========================================================== */

._profileCard_1ulat_151 {
  background: #fff;
  border-radius: 16px;
  padding: 4px;

  display: grid;
  grid-template-columns: 180px 1fr 180px;

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);

  overflow: hidden;
  margin-bottom: 18px;
}

/* ==========================================================
   LEFT PROFILE
========================================================== */

._profileLeft_1ulat_187 {
  background: linear-gradient(180deg, #ffffff, #f8f5ff);

  border-radius: 14px;

  margin: 12px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 14px 10px;

  border-right: 1px solid #edf2f7;
}

._avatarOuter_1ulat_221 {
  width: 88px;
  height: 88px;

  padding: 3px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 8px 22px rgba(124, 92, 255, 0.18);

  margin-bottom: 10px;
}

._avatar_1ulat_221 {
  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: linear-gradient(135deg, #7b61ff, #5b34ff);

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;

  font-size: 18px;
}

._profileLeft_1ulat_187 h2 {
  margin: 0;

  font-size: 15px;
  font-weight: 700;

  color: #10233f;

  text-align: center;
  line-height: 1.35;
}

._empCode_1ulat_309 {
  margin-top: 8px;

  padding: 5px 14px;

  border-radius: 30px;

  background: #efe9ff;

  color: #6b4eff;

  font-size: 11px;
  font-weight: 700;
}

._profileLeft_1ulat_187 p {
  margin-top: 8px;

  font-size: 11px;

  color: #7b8794;
}

/* ==========================================================
   CENTER DETAILS
========================================================== */

._profileCenter_1ulat_363 {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px 18px;

  padding: 14px 18px;
}

._infoCard_1ulat_383 {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding-bottom: 10px;

  border-bottom: 1px solid #edf2f7;
}

._infoCard_1ulat_383:last-child,
._infoCard_1ulat_383:nth-last-child(2) {
  border-bottom: none;
}

._infoIcon_1ulat_415 {
  width: 38px;
  height: 38px;

  border-radius: 10px;

  background: #f4efff;

  color: #6b4eff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 15px;

  flex-shrink: 0;
}

._infoCard_1ulat_383 span {
  display: block;

  margin-bottom: 3px;

  color: #94a3b8;

  font-size: 10px;

  font-weight: 500;
}

._infoCard_1ulat_383 strong {
  color: #0f172a;

  font-size: 10px;

  font-weight: 600;

  line-height: 1.35;

  word-break: break-word;
}

/* ==========================================================
   RIGHT SCORE
========================================================== */

/* .profileRight {
  background: linear-gradient(180deg, #ffffff, #f7fff9);

  border-left: 1px solid #edf2f7;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 14px 10px;
}

.progressCircle {
  width: 120px;
  height: 120px;

  border-radius: 50%;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 12px;
}

.progressInner {
  width: 92px;
  height: 92px;

  border-radius: 50%;

  background: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: inset 0 0 0 1px #edf2f7;

  color: #0f172a;

  font-size: 18px;
  font-weight: 700;
}

.scoreBox {
  width: 100%;

  background: linear-gradient(135deg, #f1fcf4, #e4f9ea);

  border: 1px solid #cafee3;

  border-radius: 10px;

  padding: 10px;

  text-align: center;

  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.scoreBox span {
  display: block;

  margin-bottom: 4px;

  color: #64748b;

  font-size: 10px;

  font-weight: 500;
}

.scoreBox strong {
  display: block;

  color: var(--color-primary);

  font-size: 16px;

  font-weight: 700;
} */

._profileRight_1ulat_509 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: linear-gradient(180deg, #ffffff, #f8fffb);

  border-left: 1px solid #edf2f7;

  padding: 22px 16px;
}

/* ==========================================
   PROGRESS RING
========================================== */

._progressCircle_1ulat_535 {
  position: relative;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 12px 30px rgba(34, 197, 94, 0.18),
    inset 0 0 8px rgba(255, 255, 255, 0.8);

  transition: 0.3s ease;

  margin-bottom: 18px;
}

._progressCircle_1ulat_535:hover {
  transform: scale(1.03);
}

/* white ring */

._progressCircle_1ulat_535::before {
  content: "";

  position: absolute;

  inset: 10px;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    inset 0 0 0 1px #edf2f7,
    0 4px 12px rgba(0, 0, 0, 0.05);
}

._progressInner_1ulat_561 {
  position: relative;
  z-index: 2;

  width: 104px;
  height: 104px;

  border-radius: 50%;

  background: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow:
    inset 0 0 0 1px #edf2f7,
    0 4px 10px rgba(0, 0, 0, 0.05);
}

._percent_1ulat_839 {
  font-size: 24px;
  font-weight: 700;

  color: #16a34a;

  line-height: 1;
}

._progressInner_1ulat_561 small {
  margin-top: 6px;

  color: #94a3b8;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.4px;

  text-transform: uppercase;
}

/* ==========================================
   SCORE CARD
========================================== */

._scoreBox_1ulat_601 {
  width: 100%;

  padding: 14px;

  border-radius: 14px;

  background: #fff;

  text-align: center;

  border: 1px solid #edf2f7;

  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

._scoreBox_1ulat_601 span {
  display: block;

  color: #94a3b8;

  font-size: 11px;

  font-weight: 600;

  margin-bottom: 6px;

  text-transform: uppercase;

  letter-spacing: 0.5px;
}

._scoreBox_1ulat_601 strong {
  color: #0f172a;

  font-size: 22px;

  font-weight: 700;
}

/* ==========================================================
   SUMMARY
========================================================== */

._summaryGrid_1ulat_981 {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 12px;

  margin: 18px 0;
}

._summaryCard_1ulat_1001 {
  min-height: 82px;

  padding: 12px 14px;

  border-radius: 14px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);

  transition: 0.25s ease;

  position: relative;

  overflow: hidden;
}

._summaryCard_1ulat_1001:hover {
  transform: translateY(-3px);
}

._summaryTop_1ulat_1049 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._summaryTop_1ulat_1049 span {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

._summaryCard_1ulat_1001 h2 {
  margin: 0;

  font-size: 20px;

  font-weight: 700;

  line-height: 1;
}

._summaryCard_1ulat_1001 svg {
  width: 40px;
  height: 40px;

  padding: 12px;

  border-radius: 14px;

  flex-shrink: 0;
}

/* ==========================================================
   GREEN
========================================================== */

._green_1ulat_1123 {
  background: linear-gradient(135deg, #f1fcf4, #e4f9ea);
}

._green_1ulat_1123 h2,
._green_1ulat_1123 span {
  color: #15803d;
}

._green_1ulat_1123 svg {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

/* ==========================================================
   RED
========================================================== */

._red_1ulat_1159 {
  background: linear-gradient(135deg, #fff5f5, #ffeaea);
}

._red_1ulat_1159 h2,
._red_1ulat_1159 span {
  color: #dc2626;
}

._red_1ulat_1159 svg {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* ==========================================================
   BLUE
========================================================== */

._blue_1ulat_1195 {
  background: linear-gradient(135deg, #f2f8ff, #e6f2ff);
}

._blue_1ulat_1195 h2,
._blue_1ulat_1195 span {
  color: #2563eb;
}

._blue_1ulat_1195 svg {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

/* ==========================================================
   ORANGE
========================================================== */

._orange_1ulat_1231 {
  background: linear-gradient(135deg, #fff9ef, #fff2d9);
}

._orange_1ulat_1231 h2,
._orange_1ulat_1231 span {
  color: #d97706;
}

._orange_1ulat_1231 svg {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

/* ==========================================================
   PURPLE
========================================================== */

._purple_1ulat_1267 {
  background: linear-gradient(135deg, #f7f4ff, #eee7ff);
}

._purple_1ulat_1267 h2,
._purple_1ulat_1267 span {
  color: #6b4eff;
}

._purple_1ulat_1267 svg {
  background: rgba(107, 78, 255, 0.1);
  color: #6b4eff;
}

/* ==========================================================
   QUESTION CARD
========================================================== */

._questionCard_1ulat_1303 {
  background: #fff;

  border-radius: 14px;

  border: 1px solid #edf2f7;

  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);

  overflow: hidden;
}

/* ==========================================================
   QUESTION HEADER
========================================================== */

._questionHeader_1ulat_1335 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 16px;

  background: #fafbfc;

  border-bottom: 1px solid #edf2f7;
}

._questionHeader_1ulat_1335 h3 {
  margin: 0;

  font-size: 14px;
  font-weight: 700;

  color: #0f172a;
}

/* ==========================================================
   TABLE
========================================================== */

._tableWrapper_1ulat_1385 {
  width: 100%;
  overflow-x: auto;
}

._table_1ulat_1385 {
  width: 100%;

  border-collapse: collapse;

  min-width: 850px;
}

._table_1ulat_1385 thead {
  background: #f8fafc;
}

._table_1ulat_1385 th {
  padding: 10px 12px;

  text-align: center;

  font-size: 11px;

  font-weight: 700;

  color: #64748b;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  border-bottom: 1px solid #e2e8f0;

  white-space: nowrap;
}

._table_1ulat_1385 td {
  padding: 10px 12px;

  text-align: center;

  font-size: 12px;

  color: #334155;

  border-bottom: 1px solid #f1f5f9;

  vertical-align: middle;
}

._table_1ulat_1385 tbody tr {
  transition: 0.2s;
}

._table_1ulat_1385 tbody tr:hover {
  background: #faf8ff;
}

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

/* ==========================================================
   QUESTION TYPE
========================================================== */

._typeBadge_1ulat_1519 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 60px;

  padding: 4px 10px;

  border-radius: 20px;

  background: #f3edff;

  color: var(--color-primary);

  font-size: 10px;
  font-weight: 700;
}

/* ==========================================================
   NOT ANSWERED
========================================================== */

._notAnswered_1ulat_1565 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;

  border-radius: 20px;

  background: #fff7ed;

  color: #ea580c;

  font-size: 10px;
  font-weight: 700;
}

/* ==========================================================
   STATUS
========================================================== */

._statusBadge_1ulat_1607 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 74px;

  padding: 5px 10px;

  border-radius: 20px;

  font-size: 10px;
  font-weight: 700;
}

._correct_1ulat_1637 {
  background: #dcfce7;
  color: #15803d;
}

._wrong_1ulat_1647 {
  background: #fee2e2;
  color: #dc2626;
}

._skipped_1ulat_1657 {
  background: #e0f2fe;
  color: #0284c7;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

._tableWrapper_1ulat_1385::-webkit-scrollbar {
  height: 6px;
}

._tableWrapper_1ulat_1385::-webkit-scrollbar-track {
  background: #f1f5f9;
}

._tableWrapper_1ulat_1385::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 50px;
}

._tableWrapper_1ulat_1385::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}
/* ==========================================================================
   AssessmentResult.module.css — compact size pass
   ========================================================================== */

/* .page {
  --purple-700: #5b2fd4;
  --purple-600: #6d3ff2;
  --purple-500: #7c4dff;
  --purple-100: #ede9fe;
  --pink-500: #ec4899;
  --rose-500: #f43f5e;
  --rose-100: #ffe4e9;
  --amber-500: #f59e0b;
  --amber-100: #fff3da;
  --green-500: #22c55e;
  --green-100: #dcfce8;
  --ink-900: #1e1b2e;
  --ink-600: #6b6580;
  --ink-400: #9a94ac;
  --card-bg: #ffffff;
  --card-border: rgba(30, 27, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(76, 41, 173, 0.06);
  --shadow-md: 0 6px 18px rgba(76, 41, 173, 0.1);
  --radius-lg: 14px;
  --radius-md: 10px;

  font-size: 12px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
  background: #fbfaff;
  padding: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
} */

._page_6zr3i_9 {
  --purple-700: #5b2fd4;
  --purple-600: #6d3ff2;
  --purple-500: #7c4dff;
  --purple-100: #ede9fe;
  --pink-500: #ec4899;
  --rose-500: #f43f5e;
  --rose-100: #ffe4e9;
  --amber-500: #f59e0b;
  --amber-100: #fff3da;
  --green-500: #22c55e;
  --green-100: #dcfce8;
  --ink-900: #1e1b2e;
  --ink-600: #6b6580;
  --ink-400: #9a94ac;
  --card-bg: #ffffff;
  --card-border: rgba(30, 27, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(76, 41, 173, 0.06);
  --shadow-md: 0 6px 18px rgba(76, 41, 173, 0.1);
  --radius-lg: 14px;
  --radius-md: 10px;

  width: 100%;
  max-width: 100%;
  min-height: 100vh;

  padding: 20px 24px;

  font-size: 12px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;

  color: var(--ink-900);
  background: #fbfaff;

  margin: 0;

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;

  box-sizing: border-box;
}

._pageIn_6zr3i_167 {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Header ---------------- */

._headerRow_6zr3i_181 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

._headerLeft_6zr3i_195 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* .backBtn {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--ink-900);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.backBtn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
} */

._backBtn_6zr3i_207 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

._backBtn_6zr3i_207:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

._masterHeading_6zr3i_291 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

._dot_6zr3i_305 {
  color: var(--ink-400);
  margin: 0 0.1rem;
}

._resultTag_6zr3i_315 {
  color: var(--purple-500);
  font-weight: 600;
}

._attemptTag_6zr3i_325 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--purple-600);
  background: var(--purple-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

._headerDivider_6zr3i_343 {
  height: 1px;
  background: linear-gradient(to right, var(--card-border), transparent);
  margin-bottom: 0.9rem;
}

/* ---------------- Layout grid ---------------- */

/* .bodyGrid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.9rem;
  align-items: start;
} */

._bodyGrid_6zr3i_359 {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 20px;
  width: 100%;
}

._leftCol_6zr3i_387 {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}

/* ---------------- Shared card ---------------- */

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

._fadeUp_6zr3i_417 {
  opacity: 0;
  animation: _fadeUp_6zr3i_417 0.5s ease forwards;
}

._fadeIn_6zr3i_427 {
  opacity: 0;
  animation: _fadeIn_6zr3i_427 0.6s ease forwards;
  animation-delay: 0.08s;
}

@keyframes _fadeUp_6zr3i_417 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _fadeIn_6zr3i_427 {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------- Badge card ---------------- */

._badgeCard_6zr3i_491 {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
}

._medalWrap_6zr3i_505 {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}

._medalGlow_6zr3i_519 {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124, 77, 255, 0.35),
    transparent 70%
  );
  filter: blur(3px);
  animation: _pulseGlow_6zr3i_1 2.6s ease-in-out infinite;
}

@keyframes _pulseGlow_6zr3i_1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

._medalCircle_6zr3i_571 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--purple-500), var(--pink-500));
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.4);
  animation: _floatMedal_6zr3i_1 3.2s ease-in-out infinite;
}

@keyframes _floatMedal_6zr3i_1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(-4deg);
  }
}

._medalIcon_6zr3i_617 {
  color: #ffe9a8;
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

._badgeText_6zr3i_629 {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

._badgeTitle_6zr3i_643 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, var(--purple-600), var(--pink-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

._emoji_6zr3i_663 {
  -webkit-text-fill-color: initial;
  display: inline-block;
  animation: _wiggle_6zr3i_1 1.8s ease-in-out infinite;
}

@keyframes _wiggle_6zr3i_1 {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }
}

._badgeSub_6zr3i_705 {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.76rem;
}

._pill_6zr3i_717 {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--rose-100);
  color: var(--rose-500);
  font-size: 0.66rem;
  font-weight: 600;
  width: fit-content;
}

/* ---------------- Banner card ---------------- */

._bannerCard_6zr3i_749 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.7rem 1rem;
}

._bannerPass_6zr3i_763 {
  background: linear-gradient(90deg, var(--green-100), #ffffff);
}

._bannerFail_6zr3i_771 {
  background: linear-gradient(90deg, var(--rose-100), #ffffff);
}

._bannerIconWrap_6zr3i_779 {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

._bannerIcon_6zr3i_779 {
  font-size: 0.95rem;
  color: var(--rose-500);
}

._bannerPass_6zr3i_763 ._bannerIcon_6zr3i_779 {
  color: var(--green-500);
}

._bannerBody_6zr3i_819 {
  flex: 1;
  min-width: 0;
}

._bannerTop_6zr3i_829 {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

._bannerHeading_6zr3i_843 {
  font-size: 0.82rem;
  font-weight: 800;
}

._bannerScore_6zr3i_853 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--rose-500);
}

._bannerPass_6zr3i_763 ._bannerScore_6zr3i_853 {
  color: var(--green-500);
}

._bannerTarget_6zr3i_873 {
  font-size: 0.66rem;
  color: var(--ink-400);
  font-weight: 600;
}

._bannerNote_6zr3i_885 {
  margin: 0.1rem 0 0;
  color: var(--ink-600);
  font-size: 0.7rem;
}

/* ---------------- Stat grid ---------------- */

._statGrid_6zr3i_901 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

._statCard_6zr3i_913 {
  position: relative;
  overflow: hidden;
  padding: 0.6rem 0.65rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

._statCard_6zr3i_913:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

._statIcon_6zr3i_947 {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 0.7rem;
  margin-bottom: 0.3rem;
}

._statIconGreen_6zr3i_967 {
  background: var(--green-100);
  color: var(--green-500);
}

._statIconRed_6zr3i_977 {
  background: var(--rose-100);
  color: var(--rose-500);
}

._statIconOrange_6zr3i_987 {
  background: var(--amber-100);
  color: var(--amber-500);
}

._statIconPurple_6zr3i_997 {
  background: var(--purple-100);
  color: var(--purple-600);
}

._statLabel_6zr3i_1007 {
  font-size: 0.66rem;
  color: var(--ink-600);
  font-weight: 600;
}

._statValue_6zr3i_1019 {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

._textGreen_6zr3i_1031 {
  color: var(--green-500);
}

._textRed_6zr3i_1039 {
  color: var(--rose-500);
}

._textOrange_6zr3i_1047 {
  color: var(--amber-500);
}

._textPurple_6zr3i_1055 {
  color: var(--purple-600);
}

._statSub_6zr3i_1063 {
  font-size: 0.62rem;
  color: var(--ink-400);
}

/* ---------------- Encouragement strip ---------------- */

._encourageCard_6zr3i_1077 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: 1px solid var(--card-border);
  background: linear-gradient(90deg, #f5f2ff, #ffffff);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

._encourageCard_6zr3i_1077:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-md);
}

._encourageIcon_6zr3i_1117 {
  font-size: 1rem;
  flex-shrink: 0;
}

._encourageText_6zr3i_1127 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

._encourageTitle_6zr3i_1141 {
  font-weight: 700;
  color: var(--purple-600);
  font-size: 0.76rem;
}

._encourageSub_6zr3i_1153 {
  font-size: 0.66rem;
  color: var(--ink-600);
}

._encourageArrow_6zr3i_1163 {
  color: var(--ink-400);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ---------------- Action row ---------------- */

._actionRow_6zr3i_1179 {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.1rem;
}

._viewAnswerBtn_6zr3i_1191,
._goToWorksheetsBtn_6zr3i_1193 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

._viewAnswerBtn_6zr3i_1191 {
  background: #fff;
  color: var(--purple-600);
  border: 1.4px solid var(--purple-500);
}

._viewAnswerBtn_6zr3i_1191:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

._goToWorksheetsBtn_6zr3i_1193 {
  background: linear-gradient(90deg, var(--purple-600), var(--purple-500));
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.35);
}

._goToWorksheetsBtn_6zr3i_1193:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(124, 77, 255, 0.45);
}

._arrowCircle_6zr3i_1273 {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

/* ---------------- Right column ---------------- */

._rightCol_6zr3i_1295 {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(160deg, #f2eeff 0%, #ece6ff 55%, #f7f3ff 100%);
  padding: 1rem 1.1rem 1.1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}

._blobBg_6zr3i_1319 {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255, 255, 255, 0.6),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(236, 72, 153, 0.08),
      transparent 45%
    );
  pointer-events: none;
  animation: _driftBlob_6zr3i_1 12s ease-in-out infinite alternate;
}

@keyframes _driftBlob_6zr3i_1 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(2%, -2%) scale(1.05);
  }
}

._quitBtn_6zr3i_1375 {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--card-border);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.68rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

._quitBtn_6zr3i_1375:hover {
  box-shadow: var(--shadow-md);
}

._employeeChip_6zr3i_1421 {
  position: absolute;
  top: 0.8rem;
  left: 0.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--purple-600);
  background: #fff;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Score ring */

._ringWrap_6zr3i_1461 {
  position: relative;
  width: min(11rem, 72%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-top: 1.6rem;
  z-index: 1;
}

._ringSvg_6zr3i_1481 {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(124, 77, 255, 0.25));
}

._ringTrack_6zr3i_1493 {
  stroke: rgba(124, 77, 255, 0.14);
}

._ringProgress_6zr3i_1501 {
  transition: stroke-dashoffset 0.3s ease;
}

._ringPass_6zr3i_1509 {
  stroke: var(--green-500);
}

._ringFail_6zr3i_1517 {
  stroke: var(--rose-500);
}

._ringCenter_6zr3i_1525 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
}

._ringPercent_6zr3i_1547 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--rose-500);
  line-height: 1;
}

._ringPercentSign_6zr3i_1561 {
  font-size: 0.85rem;
  font-weight: 700;
}

._ringLabel_6zr3i_1571 {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-top: 0.1rem;
}

._ringChip_6zr3i_1585 {
  margin-top: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--purple-100);
  color: var(--purple-600);
}

._ringChipPass_6zr3i_1605 {
  background: var(--green-100);
  color: var(--green-500);
}

._ringChipFail_6zr3i_1615 {
  background: var(--purple-100);
  color: var(--purple-600);
}

/* Steps illustration */

._illustrationWrap_6zr3i_1629 {
  width: min(9rem, 58%);
  margin-top: 0.6rem;
  z-index: 1;
}

._stepsSvg_6zr3i_1641 {
  width: 170%;
  height: auto;
  overflow: visible;
}

._stepsArrow_6zr3i_1653 {
  stroke: var(--rose-500);
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: _drawArrow_6zr3i_1 1.4s ease forwards 0.4s;
}

@keyframes _drawArrow_6zr3i_1 {
  to {
    stroke-dashoffset: 0;
  }
}

._arrowHead_6zr3i_1679 {
  fill: var(--rose-500);
}

._stepBar1_6zr3i_1687 {
  fill: #d9cdff;
}

._stepBar2_6zr3i_1695 {
  fill: #c2adff;
}

._stepBar3_6zr3i_1703 {
  fill: #9c7dff;
}

._stepBar4_6zr3i_1711 {
  fill: var(--purple-500);
}

._flagPole_6zr3i_1719 {
  stroke: var(--ink-900);
}

._flagCloth_6zr3i_1727 {
  fill: var(--rose-500);
  animation: _waveFlag_6zr3i_1 1.6s ease-in-out infinite;
  transform-origin: 155px 22px;
}

@keyframes _waveFlag_6zr3i_1 {
  0%,
  100% {
    transform: skewY(0deg);
  }

  50% {
    transform: skewY(6deg);
  }
}

._footerQuote_6zr3i_1761 {
  text-align: center;
  margin: 0.6rem 0 0.4rem;
  font-size: 0.7rem;
  color: var(--ink-600);
  line-height: 1.4;
  z-index: 1;
}

._footerQuote_6zr3i_1761 strong {
  color: var(--purple-600);
}

._dotsRow_6zr3i_1787 {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
  z-index: 1;
}

._dotBar_6zr3i_1801 {
  width: 0.85rem;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--rose-100);
}

._dotActive_6zr3i_1815 {
  background: var(--rose-500);
  width: 1.2rem;
}

/* Meta row */

._metaRow_6zr3i_1829 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow-sm);
  z-index: 1;
  margin-top: auto;
}

._metaItem_6zr3i_1855 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

._metaIcon_6zr3i_1871 {
  color: var(--purple-500);
  font-size: 0.85rem;
  flex-shrink: 0;
}

._metaTextCol_6zr3i_1883 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._metaLabel_6zr3i_1895 {
  font-size: 0.6rem;
  color: var(--ink-400);
}

._metaValue_6zr3i_1905 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._metaDivider_6zr3i_1923 {
  width: 1px;
  height: 1.4rem;
  background: var(--card-border);
  margin: 0 0.5rem;
  flex-shrink: 0;
}

/* ---------------- Empty state ---------------- */

._stateWrap_6zr3i_1943 {
  display: grid;
  place-items: center;
  min-height: 60vh;
  color: var(--ink-600);
  font-size: 0.85rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  ._bodyGrid_6zr3i_359 {
    grid-template-columns: 1fr;
  }

  ._rightCol_6zr3i_1295 {
    order: -1;
  }
}

@media (max-width: 640px) {
  ._page_6zr3i_9 {
    padding: 0.75rem;
    font-size: 11px;
  }

  ._statGrid_6zr3i_901 {
    grid-template-columns: 1fr 1fr;
  }

  ._actionRow_6zr3i_1179 {
    flex-direction: column;
  }

  ._metaRow_6zr3i_1829 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  ._metaDivider_6zr3i_1923 {
    display: none;
  }

  ._badgeCard_6zr3i_491 {
    flex-direction: column;
    text-align: center;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  ._page_6zr3i_9,
  ._fadeUp_6zr3i_417,
  ._fadeIn_6zr3i_427,
  ._medalGlow_6zr3i_519,
  ._medalCircle_6zr3i_571,
  ._emoji_6zr3i_663,
  ._blobBg_6zr3i_1319,
  ._stepsArrow_6zr3i_1653,
  ._flagCloth_6zr3i_1727 {
    animation: none !important;
    transition: none !important;
  }
}
/* ─── Root Layout ────────────────────────────────────────────────── */
.lp-root {
  min-height: auto;
  display: flex;
  background: #f0f4fa;
}

/* ─── Hero Panel ─────────────────────────────────────────────────── */
.lp-hero {
  flex: 1.1;
  position: relative;
  background: linear-gradient(145deg, #000000 0%, #111111 50%, #000000 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 10px;
  overflow: hidden;
}

/* Decorative mesh blobs */
.lp-hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.lp-hero::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -80px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Grid lines */
.lp-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Floating circles */
.lp-hero-orb {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: orb-float 8s ease-in-out infinite;
  pointer-events: none;
}

.lp-hero-orb:nth-child(2) {
  width: 140px;
  height: 140px;
  top: 12%;
  right: 8%;
  animation-delay: 0s;
}

.lp-hero-orb:nth-child(3) {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 18%;
  animation-delay: 2.5s;
}

.lp-hero-orb:nth-child(4) {
  width: 56px;
  height: 56px;
  bottom: 20%;
  left: 10%;
  animation-delay: 5s;
}

@keyframes orb-float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(-18px) scale(1.04);
  }
}

/* Hero Content */
.lp-hero-content {
  position: relative;
  z-index: 2;
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* GLASS EFFECT */
  background: rgba(255, 255, 255, 0.12);
  /* transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 6px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  width: fit-content;
}

.lp-hero-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.7);
  }
}

.lp-hero-title {
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.lp-hero-subtitle {
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  font-weight: 300;
  max-width: 400px;
  margin-bottom: 5px;
}

/* Features Carousel */
.lp-features {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-feature-card {
  position: relative;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: var(--transition-smooth);
  margin-bottom: 10px;
  overflow: hidden;
}

.lp-feature-card:last-child {
  margin-bottom: 0;
}

.lp-feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 2px 2px 0;
  transition: var(--transition-smooth);
}

.lp-feature-card.active {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.35);
}

.lp-feature-card.active::before {
  background: var(--color-primary);
}

.lp-feature-card:hover:not(.active) {
   background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}

.lp-feature-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.lp-feature-icon svg {
  width: 14px;
  height: 14px;
  fill: #ffffff;
}

.lp-feature-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 2px;
}

.lp-feature-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  font-weight: 300;
}

/* Auto-progress bar */
.lp-feature-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 0 0 0 0;
  animation: progress-bar 3s linear infinite;
  opacity: 0;
}

.lp-feature-card.active .lp-feature-progress {
  opacity: 1;
}

@keyframes progress-bar {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* ─── Form Panel ─────────────────────────────────────────────────── */
.lp-form-panel {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  padding: 0;
  overflow-y: auto;
}

.lp-form-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0px 52px 20px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* Logo + Header */
.lp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.lp-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.lp-logo-divider {
  width: 1px;
  height: 28px;
  background: #e5e7eb;
}

.lp-logo-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-form-heading {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}

.lp-form-sub {
  font-size: 11px;
  color: #6b7280;
  font-weight: 400;
  margin-bottom: 36px;
  line-height: 1.6;
}

/* ─── Form Groups ────────────────────────────────────────────────── */
.lp-field {
  margin-bottom: 8px;
}

.lp-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lp-input-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  fill: #9ca3af;
  pointer-events: none;
  transition: fill var(--transition-fast);
  flex-shrink: 0;
}

.lp-input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 38px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  color: #1f2937;
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
}

.lp-input::placeholder {
  color: #9ca3af;
  font-weight: 300;
}

.lp-input:focus {
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.lp-input:focus ~ .lp-input-icon,
.lp-input-wrap:focus-within .lp-input-icon {
  fill: var(--color-primary);
}

.lp-input.is-error {
  border-color: #ef4444;
  background: #fff5f5;
}

.lp-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.14);
}

.lp-pw-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background var(--transition-fast);
}

.lp-pw-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
}

.lp-pw-toggle svg {
  width: 16px;
  height: 16px;
  fill: #6b7280;
}

.lp-error {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: #ef4444;
  font-weight: 500;
}

.lp-error svg {
  width: 12px;
  height: 12px;
  fill: #ef4444;
  flex-shrink: 0;
}

/* Forgot Password row */
.lp-pw-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ─── Submit Button ───────────────────────────────────────────────── */
.lp-submit {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  border: none;
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}

.lp-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.lp-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

.lp-submit:hover:not(:disabled)::before {
  opacity: 1;
}

.lp-submit:active:not(:disabled) {
  transform: translateY(0px);
}

.lp-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Spinner */
.lp-spinner {
  width: 20px;
  height: 20px;
  animation: spin 0.85s linear infinite;
  flex-shrink: 0;
}

.lp-spinner circle {
  stroke: #1f2937;
  stroke-linecap: round;
  stroke-dasharray: 56;
  stroke-dashoffset: 14;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Divider */
.lp-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
}

.lp-divider::before,
.lp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* Signup */
.lp-signup {
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}

.lp-signup a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.lp-signup a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.lp-footer {
  padding: 8px 20px 6px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.lp-footer-copy {
  font-size: 12px;
  color: #6b7280;
}

.lp-footer-links {
  display: flex;
  gap: 18px;
}

.lp-footer-links a {
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lp-footer-links a:hover {
  color: var(--color-primary);
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-hero {
    padding: 48px 40px;
    flex: 1;
  }

  .lp-form-inner {
    padding: 44px 40px 28px;
  }

  .lp-footer {
    padding: 18px 40px 24px;
  }
}

@media (max-width: 768px) {
  .lp-root {
    flex-direction: column;
  }

  .lp-hero {
    flex: none;
    padding: 36px 28px 32px;
    min-height: auto;
  }

  .lp-hero-subtitle {
    margin-bottom: 28px;
    font-size: 14px;
  }

  .lp-features {
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .lp-feature-card {
    min-width: 200px;
    flex: 1;
    margin-bottom: 0;
  }

  .lp-feature-desc {
    display: none;
  }

  .lp-hero-badge {
    margin-bottom: 20px;
  }

  .lp-form-inner {
    padding: 36px 24px 24px;
    max-width: 100%;
  }

  .lp-footer {
    padding: 16px 24px 20px;
    max-width: 100%;
  }

  .lp-form-heading {
    font-size: 24px;
  }

  .lp-hero::before,
  .lp-hero::after {
    display: none;
  }

  .lp-hero-orb {
    display: none;
  }
}

@media (max-width: 480px) {
  .lp-hero {
    padding: 28px 20px 24px;
  }

  .lp-form-inner {
    padding: 28px 20px 20px;
  }

  .lp-footer {
    padding: 14px 20px 18px;
    flex-direction: column;
    align-items: flex-start;
  }

  .lp-footer-links {
    gap: 12px;
  }

  .lp-features {
    flex-direction: column;
  }

  .lp-feature-card {
    min-width: unset;
  }

  .lp-feature-desc {
    display: block;
  }
}

/* new */
.lp-root {
  height: 100vh;
  overflow: hidden;
}

.lp-form-panel {
  height: 100vh;
  overflow-y: auto;
}

.lp-feature-card {
  width: 85%;
}

.lp-form-inner {
  padding-top: 30px;
}

.lp-forgot {
  font-size: 12px;
  color: #f59e0b;
  text-decoration: none;
}

.lp-forgot:hover {
  text-decoration: underline;
}

._page_1a5r1_3 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_1a5r1_3 *,
._page_1a5r1_3 *::before,
._page_1a5r1_3 *::after {
    box-sizing: border-box;
}

._pageTitle_1a5r1_39 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._tableSection_1a5r1_53 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_1a5r1_71 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_1a5r1_93 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_1a5r1_107 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

._btn_1a5r1_119 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_1a5r1_149 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_1a5r1_149:hover {
    background: #f5c036;
    box-shadow: 0 2px 7px rgba(255, 202, 64, .38);
}

._btnSecondary_1a5r1_169 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_1a5r1_169:hover {
    background: #f8fafc;
}

._filterBar_1a5r1_189 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

._filterField_1a5r1_209 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 120px;
    max-width: 170px;
    min-width: 100px;
}

._filterLabel_1a5r1_227 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}

._filterInputWrap_1a5r1_243 {
    position: relative;
    display: flex;
    align-items: center;
}

._filterSelect_1a5r1_255 {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #fff;
    font-size: 10px;
    color: #374151;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

._filterSelect_1a5r1_255:focus {
    border-color: #94a3b8;
}

._filterClearX_1a5r1_293 {
    position: absolute;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

._filterClearX_1a5r1_293:hover {
    background: #cbd5e1;
}

._filterActions_1a5r1_335 {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

._filterClearBtn_1a5r1_347 {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._filterClearBtn_1a5r1_347:hover {
    background: #fef2f2 !important;
}

._letterIcon_1a5r1_365 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============== STATUS TOGGLE DROPDOWN ============== */

._status_1a5r1_397 {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    min-width: 92px;
    height: 28px;
    padding: 0 28px 0 12px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 14px;
}

/* Green - Active State */
._status_1a5r1_397._green_1a5r1_443 {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

._status_1a5r1_397._green_1a5r1_443:hover {
    background-color: #059669;
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

/* Red - Inactive State */
._status_1a5r1_397._red_1a5r1_471 {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
}

._status_1a5r1_397._red_1a5r1_471:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Focus state */
._status_1a5r1_397:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}

/* Arrow styling */
._status_1a5r1_397::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid white;
    pointer-events: none;
    transition: transform 0.2s ease;
}

._status_1a5r1_397:hover::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Option styling (limited browser support, but nice where it works) */
._status_1a5r1_397 option {
    background: white;
    color: #1e293b;
    font-weight: 500;
    padding: 8px 12px;
}

/* Disabled state (optional enhancement) */
._status_1a5r1_397:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}._wrap_dwehf_1 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_dwehf_1 *,
._wrap_dwehf_1 *::before,
._wrap_dwehf_1 *::after {
    box-sizing: border-box;
}

/* Header */
._header_dwehf_39 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
}

._headerLeft_dwehf_63 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

._backBtn_dwehf_75 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

._backBtn_dwehf_75:hover {
    background: #f8fafc;
}

._breadcrumb_dwehf_113 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 3px;
}

._breadcrumb_dwehf_113 strong {
    color: #1e293b;
}

._title_dwehf_139 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._headerActions_dwehf_153 {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

._btn_dwehf_167 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background 0.13s;
}

._btnPrimary_dwehf_197 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_dwehf_197:hover {
    background: #f5c036;
}

._btnSecondary_dwehf_215 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_dwehf_215:hover {
    background: #f8fafc;
}

._btnPrimary_dwehf_197:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form card */
._formCard_dwehf_247 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 22px;
}

._sectionHeading_dwehf_261 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* 3-col responsive grid */
._formGrid_dwehf_281 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    ._formGrid_dwehf_281 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    ._formGrid_dwehf_281 {
        grid-template-columns: 1fr;
    }
}

._formGroup_dwehf_319 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._label_dwehf_331 {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

._required_dwehf_343 {
    color: #ef4444;
}

._input_dwehf_351 {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.13s;
}

._input_dwehf_351:focus {
    border-color: #94a3b8;
}

._inputError_dwehf_383 {
    border-color: #f87171;
}

._errorText_dwehf_391 {
    font-size: 10px;
    color: #ef4444;
}

/* Toggle switch */
._toggleRow_dwehf_403 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._toggle_dwehf_403 {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

._toggle_dwehf_403 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._toggleSlider_dwehf_443 {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

._toggleSlider_dwehf_443::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

._toggle_dwehf_403 input:checked+._toggleSlider_dwehf_443 {
    background: #ffca40;
}

._toggle_dwehf_403 input:checked+._toggleSlider_dwehf_443::before {
    transform: translateX(16px);
}

._toggleLabel_dwehf_501 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}

/* Features grid */
._featuresGrid_dwehf_515 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
}

@media (max-width: 900px) {
    ._featuresGrid_dwehf_515 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    ._featuresGrid_dwehf_515 {
        grid-template-columns: 1fr;
    }
}

._featureItem_dwehf_551 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._featureLabel_dwehf_563 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}._wrap_1gjp8_1 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_1gjp8_1 *,
._wrap_1gjp8_1 *::before,
._wrap_1gjp8_1 *::after {
    box-sizing: border-box;
}

._loadingState_1gjp8_37 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_1gjp8_59 {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #ffca40;
    border-radius: 50%;
    animation: _spin_1gjp8_59 0.7s linear infinite;
}

@keyframes _spin_1gjp8_59 {
    to {
        transform: rotate(360deg);
    }
}

/* Breadcrumb */
._breadcrumb_1gjp8_91 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

._backBtn_1gjp8_107 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}

._backBtn_1gjp8_107:hover {
    background: #f8fafc;
}

._breadcrumb_1gjp8_91 span:last-child {
    color: #1e293b;
    font-weight: 500;
}

/* Title row */
._pageTitleRow_1gjp8_155 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

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

._letterIcon_1gjp8_183 {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

._pageTitle_1gjp8_155 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 3px;
}

._actions_1gjp8_225 {
    display: flex;
    align-items: center;
    gap: 7px;
}

._btn_1gjp8_237 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background 0.13s;
}

._btnPrimary_1gjp8_267 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_1gjp8_267:hover {
    background: #f5c036;
}

._btnDanger_1gjp8_285 {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

._btnDanger_1gjp8_285:hover {
    background: #fef2f2;
}

/* Grid */
._mainGrid_1gjp8_307 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    ._mainGrid_1gjp8_307 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    ._mainGrid_1gjp8_307 {
        grid-template-columns: 1fr;
    }
}

._card_1gjp8_343 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

._cardTitle_1gjp8_357 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* Detail rows */
._detailRow_1gjp8_377 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 8px;
}

._detailLabel_1gjp8_393 {
    font-size: 11px;
    color: #6b7280;
    min-width: 100px;
    flex-shrink: 0;
}

._detailVal_1gjp8_407 {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* Description HTML */
._descriptionHtml_1gjp8_423 {
    font-size: 12px;
    color: #374151;
    line-height: 1.6;
}

._descriptionHtml_1gjp8_423 p {
    margin: 0 0 6px;
}

/* Features */
._featuresGrid_1gjp8_445 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    ._featuresGrid_1gjp8_445 {
        grid-template-columns: 1fr;
    }
}

._featTable_1gjp8_469 {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

._featTable_1gjp8_469 th {
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #374151;
    text-align: left;
}

._featTable_1gjp8_469 td {
    padding: 6px 10px;
    border: 1px solid #f1f5f9;
    color: #374151;
}

._featTable_1gjp8_469 tr:nth-child(even) td {
    background: #fafafa;
}

._featureKey_1gjp8_519 {
    text-transform: capitalize;
}

._center_1gjp8_527 {
    text-align: center;
}
._page_2j25j_3 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_2j25j_3 *,
._page_2j25j_3 *::before,
._page_2j25j_3 *::after {
    box-sizing: border-box;
}

._pageTitle_2j25j_39 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._tableSection_2j25j_53 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_2j25j_71 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_2j25j_93 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_2j25j_107 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

._btn_2j25j_119 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_2j25j_149 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_2j25j_149:hover {
    background: #f5c036;
    box-shadow: 0 2px 7px rgba(255, 202, 64, .38);
}

._btnSecondary_2j25j_169 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_2j25j_169:hover {
    background: #f8fafc;
}

._filterBar_2j25j_189 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

._filterField_2j25j_209 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 120px;
    max-width: 170px;
    min-width: 100px;
}

._filterLabel_2j25j_227 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}

._filterInputWrap_2j25j_243 {
    position: relative;
    display: flex;
    align-items: center;
}

._filterSelect_2j25j_255 {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #fff;
    font-size: 10px;
    color: #374151;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

._filterSelect_2j25j_255:focus {
    border-color: #94a3b8;
}

._filterClearX_2j25j_293 {
    position: absolute;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

._filterClearX_2j25j_293:hover {
    background: #cbd5e1;
}

._filterActions_2j25j_335 {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

._filterClearBtn_2j25j_347 {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._filterClearBtn_2j25j_347:hover {
    background: #fef2f2 !important;
}

._letterIcon_2j25j_365 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============== STATUS DROPDOWN & BADGE ============== */

._status_2j25j_397 {
    appearance: none;
    -webkit-appearance: none;
    min-width: 108px;
    height: 30px;
    padding: 0 32px 0 14px;
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 14px;
    text-align: center;
    line-height: 28px;
}

/* ================= STATUS COLORS ================= */

._status_2j25j_397._green_2j25j_447 {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

._status_2j25j_397._green_2j25j_447:hover {
    background-color: #059669;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

._status_2j25j_397._yellow_2j25j_471 {
    background-color: #f59e0b;
    color: white;
    border-color: #f59e0b;
}

._status_2j25j_397._yellow_2j25j_471:hover {
    background-color: #d97706;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

._status_2j25j_397._red_2j25j_495 {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
}

._status_2j25j_397._red_2j25j_495:hover {
    background-color: #dc2626;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

._status_2j25j_397._blue_2j25j_519 {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

._status_2j25j_397._blue_2j25j_519:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

._status_2j25j_397._grey_2j25j_543 {
    background-color: #6b7280;
    color: white;
    border-color: #6b7280;
}

._status_2j25j_397._grey_2j25j_543:hover {
    background-color: #4b5563;
    box-shadow: 0 4px 14px rgba(107, 114, 128, 0.4);
    transform: translateY(-1px);
}

/* Focus state for accessibility */
._status_2j25j_397:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
    border-color: #3b82f6;
}

/* Dropdown Arrow */
._status_2j25j_397::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid white;
    pointer-events: none;
    transition: transform 0.25s ease;
}

._status_2j25j_397:hover::after {
    transform: translateY(-50%) rotate(180deg);
}

/* For non-editable PAID status (Badge) */
._status_2j25j_397._green_2j25j_447[readonly],
span._status_2j25j_397._green_2j25j_447 {
    cursor: default;
    padding: 0 16px;
    min-width: 82px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

span._status_2j25j_397._green_2j25j_447:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Option styling inside dropdown */
._status_2j25j_397 option {
    background: white;
    color: #1f2937;
    font-size: 13px;
    padding: 10px 14px;
    font-weight: 500;
}

/* Optional: Make PAID status slightly different (more premium look) */
._status_2j25j_397._green_2j25j_447 {
    background: linear-gradient(135deg, #10b981, #059669);
}._wrap_dwehf_1 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_dwehf_1 *,
._wrap_dwehf_1 *::before,
._wrap_dwehf_1 *::after {
    box-sizing: border-box;
}

/* Header */
._header_dwehf_39 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
}

._headerLeft_dwehf_63 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

._backBtn_dwehf_75 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

._backBtn_dwehf_75:hover {
    background: #f8fafc;
}

._breadcrumb_dwehf_113 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 3px;
}

._breadcrumb_dwehf_113 strong {
    color: #1e293b;
}

._title_dwehf_139 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._headerActions_dwehf_153 {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

._btn_dwehf_167 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background 0.13s;
}

._btnPrimary_dwehf_197 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_dwehf_197:hover {
    background: #f5c036;
}

._btnSecondary_dwehf_215 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_dwehf_215:hover {
    background: #f8fafc;
}

._btnPrimary_dwehf_197:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form card */
._formCard_dwehf_247 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 22px;
}

._sectionHeading_dwehf_261 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* 3-col responsive grid */
._formGrid_dwehf_281 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    ._formGrid_dwehf_281 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    ._formGrid_dwehf_281 {
        grid-template-columns: 1fr;
    }
}

._formGroup_dwehf_319 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._label_dwehf_331 {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

._required_dwehf_343 {
    color: #ef4444;
}

._input_dwehf_351 {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.13s;
}

._input_dwehf_351:focus {
    border-color: #94a3b8;
}

._inputError_dwehf_383 {
    border-color: #f87171;
}

._errorText_dwehf_391 {
    font-size: 10px;
    color: #ef4444;
}

/* Toggle switch */
._toggleRow_dwehf_403 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._toggle_dwehf_403 {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

._toggle_dwehf_403 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._toggleSlider_dwehf_443 {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

._toggleSlider_dwehf_443::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

._toggle_dwehf_403 input:checked+._toggleSlider_dwehf_443 {
    background: #ffca40;
}

._toggle_dwehf_403 input:checked+._toggleSlider_dwehf_443::before {
    transform: translateX(16px);
}

._toggleLabel_dwehf_501 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}

/* Features grid */
._featuresGrid_dwehf_515 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
}

@media (max-width: 900px) {
    ._featuresGrid_dwehf_515 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    ._featuresGrid_dwehf_515 {
        grid-template-columns: 1fr;
    }
}

._featureItem_dwehf_551 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._featureLabel_dwehf_563 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}._wrap_1gjp8_1 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_1gjp8_1 *,
._wrap_1gjp8_1 *::before,
._wrap_1gjp8_1 *::after {
    box-sizing: border-box;
}

._loadingState_1gjp8_37 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_1gjp8_59 {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #ffca40;
    border-radius: 50%;
    animation: _spin_1gjp8_59 0.7s linear infinite;
}

@keyframes _spin_1gjp8_59 {
    to {
        transform: rotate(360deg);
    }
}

/* Breadcrumb */
._breadcrumb_1gjp8_91 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

._backBtn_1gjp8_107 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}

._backBtn_1gjp8_107:hover {
    background: #f8fafc;
}

._breadcrumb_1gjp8_91 span:last-child {
    color: #1e293b;
    font-weight: 500;
}

/* Title row */
._pageTitleRow_1gjp8_155 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

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

._letterIcon_1gjp8_183 {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

._pageTitle_1gjp8_155 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 3px;
}

._actions_1gjp8_225 {
    display: flex;
    align-items: center;
    gap: 7px;
}

._btn_1gjp8_237 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background 0.13s;
}

._btnPrimary_1gjp8_267 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_1gjp8_267:hover {
    background: #f5c036;
}

._btnDanger_1gjp8_285 {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

._btnDanger_1gjp8_285:hover {
    background: #fef2f2;
}

/* Grid */
._mainGrid_1gjp8_307 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    ._mainGrid_1gjp8_307 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    ._mainGrid_1gjp8_307 {
        grid-template-columns: 1fr;
    }
}

._card_1gjp8_343 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

._cardTitle_1gjp8_357 {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* Detail rows */
._detailRow_1gjp8_377 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 8px;
}

._detailLabel_1gjp8_393 {
    font-size: 11px;
    color: #6b7280;
    min-width: 100px;
    flex-shrink: 0;
}

._detailVal_1gjp8_407 {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/* Description HTML */
._descriptionHtml_1gjp8_423 {
    font-size: 12px;
    color: #374151;
    line-height: 1.6;
}

._descriptionHtml_1gjp8_423 p {
    margin: 0 0 6px;
}

/* Features */
._featuresGrid_1gjp8_445 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    ._featuresGrid_1gjp8_445 {
        grid-template-columns: 1fr;
    }
}

._featTable_1gjp8_469 {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

._featTable_1gjp8_469 th {
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #374151;
    text-align: left;
}

._featTable_1gjp8_469 td {
    padding: 6px 10px;
    border: 1px solid #f1f5f9;
    color: #374151;
}

._featTable_1gjp8_469 tr:nth-child(even) td {
    background: #fafafa;
}

._featureKey_1gjp8_519 {
    text-transform: capitalize;
}

._center_1gjp8_527 {
    text-align: center;
}/* ═══════════════════════════════════════════════════════════════
   CompanyList.module.css
   Every class name here EXACTLY matches style.xxx used in CompanyList.jsx
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════ PAGE ═══════════════════ */
._page_lp4en_13 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_lp4en_13 *,
._page_lp4en_13 *::before,
._page_lp4en_13 *::after {
    box-sizing: border-box;
}

._pageTitle_lp4en_49 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* ═══════════════════ LAYOUT ═══════════════════ */
/* .layout {
    display: grid;
    grid-template-columns: 1fr 232px;
    gap: 10px;
    align-items: start;
} */

._layoutMain_lp4en_79 {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

/* ═══════════════════ STATS ROW ═══════════════════ */
._statsRow_lp4en_95 {
    display: grid;
    grid-template-columns: 182px 1fr;
    gap: 7px;
}

._heroCard_lp4en_107 {
    grid-row: 1 / 3;
    background: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 108px;
    position: relative;
    overflow: hidden;
}

._sparkline_lp4en_135 {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.22;
    width: 92px;
    height: 38px;
}

._heroLabel_lp4en_153 {
    font-size: 10px;
    color: #92400e;
    font-weight: 500;
    margin: 0 0 3px;
}

._heroValue_lp4en_167 {
    font-size: 32px;
    font-weight: 800;
    color: #92400e;
    margin: 0;
    line-height: 1;
}

._heroGrowth_lp4en_183 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 10px;
    font-weight: 600;
}

._miniGrid_lp4en_201 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

._miniCard_lp4en_213 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: box-shadow 0.14s;
}

._miniCard_lp4en_213:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
}

._miniIcon_lp4en_243 {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._miniLabel_lp4en_263 {
    font-size: 9px;
    color: #94a3b8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 54px;
}

._miniValue_lp4en_283 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

/* ═══════════════════ TABLE SECTION ═══════════════════ */
._tableSection_lp4en_301 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_lp4en_319 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_lp4en_341 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_lp4en_355 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

/* ═══════════════════ BUTTONS ═══════════════════ */
._btn_lp4en_369 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s, box-shadow 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_lp4en_399 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_lp4en_399:hover {
    background: #f5c036;
    box-shadow: 0 2px 7px rgba(255, 202, 64, 0.38);
}

._btnSecondary_lp4en_419 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_lp4en_419:hover {
    background: #f8fafc;
}

._toolbarActionsWrap_lp4en_439 {
    display: flex;
    gap: 5px;
}

/* ═══════════════════ FILTER BAR ═══════════════════ */
._filterBar_lp4en_451 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._filterField_lp4en_473 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 120px;
    max-width: 170px;
    min-width: 100px;
}

._filterLabel_lp4en_491 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

._filterInputWrap_lp4en_509 {
    position: relative;
    display: flex;
    align-items: center;
}

._filterSelect_lp4en_521,
._filterDate_lp4en_523 {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #ffffff;
    font-size: 10px;
    color: #374151;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.13s, box-shadow 0.13s;
}

._filterSelect_lp4en_521:focus,
._filterDate_lp4en_523:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.15);
}

._filterClearX_lp4en_567 {
    position: absolute;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    z-index: 1;
}

._filterClearX_lp4en_567:hover {
    background: #cbd5e1;
    color: #1e293b;
}

._filterActions_lp4en_615 {
    display: flex;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
}

._filterClearBtn_lp4en_629 {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._filterClearBtn_lp4en_629:hover {
    background: #fef2f2 !important;
}

/* ═══════════════════ BULK SELECTED BAR ═══════════════════ */
._bulkSelectedBar_lp4en_655 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    flex-shrink: 0;
    flex-wrap: wrap;
    animation: _slideIn_lp4en_1 0.15s ease;
}

@keyframes _slideIn_lp4en_1 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

._bulkSelectedLeft_lp4en_703 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

._bulkCountBadge_lp4en_717 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #ffca40;
    color: #1e293b;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

._bulkSelectedText_lp4en_747 {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

._bulkBtnGroup_lp4en_761 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

._bulkActionBtn_lp4en_775 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 10px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}

._bulkActionBtn_lp4en_775:hover {
    background: #f8fafc;
}

._bulkActionBtnDanger_lp4en_817 {
    color: #dc2626;
    border-color: #fecaca;
}

._bulkActionBtnDanger_lp4en_817:hover {
    background: #fef2f2;
    border-color: #f87171;
}

._bulkDeselect_lp4en_837 {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}

._bulkDeselect_lp4en_837:hover {
    background: #f1f5f9;
    color: #475569;
}

/* ═══════════════════ CELL HELPERS ═══════════════════ */
._companyCell_lp4en_881 {
    display: flex;
    align-items: center;
    gap: 7px;
}

._avatar_lp4en_893 {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

._companyName_lp4en_919 {
    font-size: 9px;
    font-weight: 600;
    color: #1e293b;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._companyId_lp4en_939 {
    font-size: 9px;
    color: #94a3b8;
}

._contactPhone_lp4en_949 {
    font-size: 9px;
    color: #374151;
}

._contactEmail_lp4en_959 {
    font-size: 9px;
    color: #94a3b8;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._bold_lp4en_977 {
    font-weight: 600;
    color: #374151;
}

._muted_lp4en_987 {
    color: #64748b;
    font-size: 9px;
}

._textMuted_lp4en_997 {
    color: #94a3b8;
    font-size: 10px;
}

._badge_lp4en_1007 {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

._planBadge_lp4en_1029 {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

._expiry_lp4en_1051 {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #94a3b8;
}

._expiryWarn_lp4en_1067 {
    color: #d97706;
    font-weight: 500;
}

._rowSuspended_lp4en_1077 {
    opacity: 0.65;
}

/* ═══════════════════ RIGHT ASIDE ═══════════════════ */
._layoutAside_lp4en_1087 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 10px;
}

._asideHeader_lp4en_1105 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

._asideToggle_lp4en_1127 {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
}

._asideBody_lp4en_1143 {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
    min-height: 500px;
}

._asideCard_lp4en_1159 {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}

._asideCardTitle_lp4en_1169 {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

._asideTitleRow_lp4en_1187 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* ── Donut ── */
._donutWrap_lp4en_1203 {
    display: flex;
    align-items: center;
    gap: 12px;
}

._donut_lp4en_1203 {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

._donutCenter_lp4en_1229 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

._donutLegend_lp4en_1251 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._legendItem_lp4en_1263 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #64748b;
}

._legendDot_lp4en_1279 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Bar chart ── */
._barchartWrap_lp4en_1295 {
    width: 100%;
}

._barchartBars_lp4en_1303 {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 58px;
}

._barCol_lp4en_1317 {
    flex: 1;
    display: flex;
    align-items: flex-end;
}

._bar_lp4en_1295 {
    width: 100%;
    border-radius: 2px 2px 0 0;
    transition: height 0.28s;
}

._barLabels_lp4en_1341 {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

._barLabel_lp4en_1341 {
    flex: 1;
    font-size: 8px;
    color: #94a3b8;
    text-align: center;
}

/* ── Revenue ── */
._revenueValue_lp4en_1369 {
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 3px;
}

._revenueBadge_lp4en_1383 {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 7px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
}

/* ── Activity ── */
._activityFeed_lp4en_1409 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 9px !important;
}

._activityItem_lp4en_1423 {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 9px;
}

._activityIcon_lp4en_1437 {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

._activityText_lp4en_1463 {
    flex: 1;
    font-size: 9px;
    color: #1e293b;
    line-height: 1.4;
}

._activityText_lp4en_1463 strong {
    font-weight: 600;
    font-size: 10px !important;
}

._activityTime_lp4en_1487 {
    font-size: 9px;
    color: #94a3b8;
}

._activityEmpty_lp4en_1497 {
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
    padding: 8px 0;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1200px) {
    ._layout_lp4en_65 {
        grid-template-columns: 1fr;
    }

    ._layoutAside_lp4en_1087 {
        position: static;
    }

    ._asideBody_lp4en_1143 {
        max-height: none;
    }
}

@media (max-width: 1024px) {
    ._statsRow_lp4en_95 {
        grid-template-columns: 1fr;
    }

    ._heroCard_lp4en_107 {
        grid-row: auto;
        min-height: 100px;
    }

    ._miniGrid_lp4en_201 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    ._page_lp4en_13 {
        padding: 9px 10px;
    }

    ._tableHeader_lp4en_319 {
        flex-direction: column;
        align-items: flex-start;
    }

    ._filterBar_lp4en_451 {
        gap: 7px;
    }

    ._filterField_lp4en_473 {
        max-width: 100%;
        flex: 1 1 140px;
    }
}

@media (max-width: 480px) {
    ._miniGrid_lp4en_201 {
        grid-template-columns: 1fr 1fr;
    }

    ._bulkSelectedBar_lp4en_655 {
        gap: 5px;
    }

    ._bulkBtnGroup_lp4en_761 {
        flex-wrap: wrap;
    }
}

/* Stats Accordion Styles */
._statsAccordion_lp4en_1641 {
  /* margin-bottom: 24px; */
  /* background: white; */
  border-radius: 12px;
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
  overflow: hidden;
}

._accordionHeader_lp4en_1657 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  cursor: pointer;
  /* background: white; */
  transition: background-color 0.2s ease;
  /* border-bottom: 1px solid #e5e7eb; */
}
._accordionHeader_lp4en_1657:hover {
  background-color: #f9fafb;
}

._accordionTitle_lp4en_1685 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #374151;
  font-size: 15px;
}

._accordionTitle_lp4en_1685 svg {
  color: #f59e0b;
}

._accordionToggle_lp4en_1711 {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s ease;
}

._accordionToggle_lp4en_1711:hover {
  color: #374151;
}

._accordionContent_lp4en_1743 {
  animation: _slideDown_lp4en_1 0.3s ease-out;
}

@keyframes _slideDown_lp4en_1 {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  ._accordionHeader_lp4en_1657 {
    padding: 12px 16px;
  }
  
  ._accordionContent_lp4en_1743 {
    padding: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CompanyList.module.css  — ADD THIS BLOCK at the bottom of your
   existing CompanyList.module.css file.
   (Everything else in your original file stays unchanged.)
═══════════════════════════════════════════════════════════════ */

/* ── Dashboard Toggle Button (placed opposite "Company Management" title) ── */
._dashToggleBtn_lp4en_1809 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1.5px solid #ffca40;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, box-shadow 0.13s, border-color 0.13s;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

._dashToggleBtn_lp4en_1809:hover {
  background: #ffca40;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(255, 202, 64, 0.35);
  color: #78350f;
}

._dashToggleBtn_lp4en_1809 svg {
  flex-shrink: 0;
}



/* Bulk Status OVERLAY */
._modalOverlay_lp4en_1875 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* MODAL BOX */
._modalBox_lp4en_1903 {
  width: 420px;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  animation: _fadeIn_lp4en_1 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* HEADER */
._modalHeader_lp4en_1923 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
}

._modalHeader_lp4en_1923 h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

/* CLOSE BUTTON */
._modalHeader_lp4en_1923 button {
  background: #f3f4f6;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

._modalHeader_lp4en_1923 button:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* BODY */
._modalBody_lp4en_1993 {
  padding: 20px;
}

._modalBody_lp4en_1993 label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

/* SELECT FIELD */
._modalSelect_lp4en_2019 {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  background: #fff;
  transition: all 0.2s ease;
}

._modalSelect_lp4en_2019:focus {
  outline: none;
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* FOOTER */
._modalFooter_lp4en_2053 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
}

/* CANCEL BUTTON (same as your cancelBtn) */
._cancelBtn_lp4en_2071 {
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s ease;
}

._cancelBtn_lp4en_2071:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* SAVE BUTTON (same as primaryBtns) */
._primaryBtns_lp4en_2107 {
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #111827;
  cursor: pointer;
  transition: all 0.3s ease;
}

._primaryBtns_lp4en_2107:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
}

/* DISABLED */
._primaryBtns_lp4en_2107:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._modalFooter_lp4en_2053 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 15px;
}

/* Cancel Button */
._btnSecondary_lp4en_419 {
  padding: 8px 16px;
  border: none;
  background-color: #e5e7eb;
  color: #111;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

/* Update Button */
._modelBtnPrimary_lp4en_2191 {
  padding: 8px 16px;
  border: none;
  background: linear-gradient(135deg, #fad642 0%, #f9db42 100%) !important;
  color: #272727;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

/* Disabled state */
._modelBtnPrimary_lp4en_2191:disabled {
  background-color: linear-gradient(135deg, #fff8dc 0%, #ffe87a 100%);
  cursor: not-allowed;
}

/* ANIMATION */
@keyframes _fadeIn_lp4en_1 {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/* ═══════════════════════════════════════════════════
   CompanyDashboard.module.css
═══════════════════════════════════════════════════ */

/* ── CSS Variables (override in your theme) ── */
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f1f5f9;
  --color-bg-tertiary: #f4f7fb;
  --color-bg-success: #dcfce7;
  --color-bg-warning: #fef3c7;
  --color-bg-danger: #fee2e2;
  --color-bg-info: #dbeafe;
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-success: #16a34a;
  --color-text-warning: #92400e;
  --color-text-danger: #dc2626;
  --color-text-info: #1d4ed8;
  --color-border: #e2e8f0;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ── Root ── */
._root_zyb94_51 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 24px;
  background: var(--color-bg-tertiary);
  min-height: 100%;
  font-size: 13px;
  color: var(--color-text-primary);
  box-sizing: border-box;
  animation: _fadeIn_zyb94_1 0.2s ease;
}

._root_zyb94_51 *,
._root_zyb94_51 *::before,
._root_zyb94_51 *::after {
  box-sizing: border-box;
}

@keyframes _fadeIn_zyb94_1 {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Header ── */
._header_zyb94_115 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

._headerLeft_zyb94_131 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._backBtn_zyb94_143 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.13s;
  flex-shrink: 0;
}

._backBtn_zyb94_143:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

._title_zyb94_187 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  letter-spacing: -0.2px;
}

._subtitle_zyb94_203 {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: 0;
}

._live_zyb94_215 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-bg-success);
  color: var(--color-text-success);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

._liveDot_zyb94_245 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-success);
  animation: _pulse_zyb94_1 1.6s infinite;
}

@keyframes _pulse_zyb94_1 {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

/* ── Stat Grid ── */
._statGrid_zyb94_287 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

._statCard_zyb94_299 {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--accent, #94a3b8);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: box-shadow 0.13s, transform 0.13s;
}

._statCard_zyb94_299:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

._statIcon_zyb94_335 {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

._statBody_zyb94_357 {
  flex: 1;
  min-width: 0;
}

._statLabel_zyb94_367 {
  font-size: 9px;
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._statValue_zyb94_391 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1;
}

._statTrend_zyb94_405 {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 600;
}

/* ── Card ── */
._card_zyb94_429 {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  /* ✅ ADD THIS */
  height: 100%;
}
._cardHdr_zyb94_455 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

._cardTitleGrp_zyb94_471 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

._cardTitle_zyb94_471 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

._cardSub_zyb94_497 {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin: 0;
}

._badge_zyb94_509 {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Main Grid ── */
._mainGrid_zyb94_535 {
  display: grid;
  grid-template-columns: 1fr 280px 260px;
  gap: 10px;

  /* ✅ CHANGE THIS */
  align-items: stretch;   /* was: start */
}

._chartWrap_zyb94_553 {
  width: 100%;
  height: 180px;
  flex-shrink: 0;
}

/* ── Donut ── */
._donutWrap_zyb94_567 {
  position: relative;
  flex-shrink: 0;
}

._donutCenter_zyb94_577 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

._donutSection_zyb94_599 {
  display: flex;
  align-items: center;
  gap: 16px;
}

._legend_zyb94_611 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

._legendRow_zyb94_625 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

._legendDot_zyb94_639 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendLabel_zyb94_653 {
  flex: 1;
  color: var(--color-text-secondary);
}

._legendVal_zyb94_663 {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Revenue ── */
._revHero_zyb94_675 {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

._revCur_zyb94_687 {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

._revAmt_zyb94_699 {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1;
}

._revBadge_zyb94_713 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  align-self: flex-start;
}

._revSparkWrap_zyb94_735 {
  width: 100%;
  height: 60px;
  margin: -4px 0;
}

/* ── Feature Gauges ── */
._gaugeSection_zyb94_749 {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}

._gaugeRow_zyb94_763 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._gaugeHdr_zyb94_775 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._gaugeLabel_zyb94_787 {
  font-size: 10px;
  color: var(--color-text-secondary);
}

._gaugeVal_zyb94_797 {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-primary);
}

._gaugeTrack_zyb94_809 {
  height: 5px;
  background: var(--color-bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

._gaugeFill_zyb94_823 {
  height: 100%;
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(.22, .68, 0, 1.2);
}

/* ── Bottom Grid ── */
._bottomGrid_zyb94_837 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 10px;
  align-items: start;
}

/* ── Table ── */
._tableWrap_zyb94_853 {
  overflow-x: auto;
}

._table_zyb94_853 {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

._table_zyb94_853 thead tr {
  border-bottom: 1px solid var(--color-border);
}

._table_zyb94_853 th {
  padding: 8px 10px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: var(--color-bg-secondary);
}

._table_zyb94_853 th:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

._table_zyb94_853 th:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

._table_zyb94_853 tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s;
}

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

._table_zyb94_853 tbody tr:hover td {
  background: var(--color-bg-tertiary);
}

._table_zyb94_853 td {
  padding: 8px 10px;
  vertical-align: middle;
}

._tdMuted_zyb94_957 {
  color: var(--color-text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

._companyCell_zyb94_969 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._avatar_zyb94_981 {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._cName_zyb94_1007 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1px;
  white-space: nowrap;
}

._cId_zyb94_1023 {
  font-size: 9px;
  color: var(--color-text-secondary);
  margin: 0;
}

._statusBadge_zyb94_1035 {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Activity List ── */
._activityList_zyb94_1059 {
  display: flex;
  flex-direction: column;
}

._activityRow_zyb94_1069 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

._activityRow_zyb94_1069:last-child {
  border-bottom: none;
}

._actAvatar_zyb94_1093 {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

._actInfo_zyb94_1119 {
  flex: 1;
  min-width: 0;
}

._actName_zyb94_1129 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._actEmail_zyb94_1149 {
  font-size: 9px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._actMeta_zyb94_1165 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

._actStatus_zyb94_1181 {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}

._actDate_zyb94_1195 {
  font-size: 9px;
  color: var(--color-text-secondary);
}

/* ── Responsive ── */
@media (max-width: 1300px) {
  ._statGrid_zyb94_287 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1100px) {
  ._mainGrid_zyb94_535 {
    grid-template-columns: 1fr 260px;
  }

  ._card_zyb94_429:nth-child(3) {
    grid-column: 1 / -1;
  }

  ._bottomGrid_zyb94_837 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  ._mainGrid_zyb94_535 {
    grid-template-columns: 1fr;
  }

  ._statGrid_zyb94_287 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  ._root_zyb94_51 {
    padding: 10px;
    gap: 10px;
  }

  ._title_zyb94_187 {
    font-size: 15px;
  }

  ._statValue_zyb94_391 {
    font-size: 16px;
  }

  ._statGrid_zyb94_287 {
    grid-template-columns: repeat(2, 1fr);
  }
}._wrap_jtybz_1 {
    padding: 10px 14px;
    background: #f4f7fb;
    min-height: 100vh;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

._wrap_jtybz_1 *,
._wrap_jtybz_1 *::before,
._wrap_jtybz_1 *::after {
    box-sizing: border-box;
}

/* Header */
._header_jtybz_39 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
}

._headerLeft_jtybz_63 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

._backBtn_jtybz_75 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

._backBtn_jtybz_75:hover {
    background: #f8fafc;
}

._breadcrumb_jtybz_113 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 3px;
}

._breadcrumb_jtybz_113 strong {
    color: #1e293b;
}

._title_jtybz_139 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._headerActions_jtybz_153 {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

._btn_jtybz_167 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background 0.13s;
}

._btnPrimary_jtybz_197 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_jtybz_197:hover {
    background: #f5c036;
}

._btnSecondary_jtybz_215 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_jtybz_215:hover {
    background: #f8fafc;
}

._btnPrimary_jtybz_197:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form card */
._formCard_jtybz_247 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 22px;
}

._sectionHeading_jtybz_261 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* 3-col responsive grid */
._formGrid_jtybz_281 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    ._formGrid_jtybz_281 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    ._formGrid_jtybz_281 {
        grid-template-columns: 1fr;
    }
}

._formGroup_jtybz_319 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

._label_jtybz_331 {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

._required_jtybz_343 {
    color: #ef4444;
}

._input_jtybz_351 {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.13s;
}

._input_jtybz_351:focus {
    border-color: #94a3b8;
}

._inputError_jtybz_383 {
    border-color: #f87171;
}

._errorText_jtybz_391 {
    font-size: 10px;
    color: #ef4444;
}

/* Toggle switch */
._toggleRow_jtybz_403 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._toggle_jtybz_403 {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

._toggle_jtybz_403 input {
    opacity: 0;
    width: 0;
    height: 0;
}

._toggleSlider_jtybz_443 {
    position: absolute;
    inset: 0;
    background: #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

._toggleSlider_jtybz_443::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

._toggle_jtybz_403 input:checked+._toggleSlider_jtybz_443 {
    background: #ffca40;
}

._toggle_jtybz_403 input:checked+._toggleSlider_jtybz_443::before {
    transform: translateX(16px);
}

._toggleLabel_jtybz_501 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}

/* Features grid */
._featuresGrid_jtybz_515 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
}

@media (max-width: 900px) {
    ._featuresGrid_jtybz_515 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    ._featuresGrid_jtybz_515 {
        grid-template-columns: 1fr;
    }
}

._featureItem_jtybz_551 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._featureLabel_jtybz_563 {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}
/* Checkbox */



._passwordWrapper_jtybz_581 {
  position: relative;
  width: 100%;
}

._passwordWrapper_jtybz_581 input {
  width: 100%;
  padding-right: 40px; /* space for icon */
}

._eyeIcon_jtybz_601 {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
}
._wrap_nzx6l_3 *,
._wrap_nzx6l_3 *::before,
._wrap_nzx6l_3 *::after {
    box-sizing: border-box;
}

._wrap_nzx6l_3 {
    padding: 16px;
    background: #f5f5f2;
    min-height: 100vh;
    font-size: 13px;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

._loadingState_nzx6l_37 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 100px 20px;
    color: #94a3b8;
    font-size: 13px;
}

._spinner_nzx6l_59 {
    width: 30px;
    height: 30px;
    border: 3px solid #e2e8f0;
    border-top-color: #ffca40;
    border-radius: 50%;
    animation: _spin_nzx6l_59 0.7s linear infinite;
}

@keyframes _spin_nzx6l_59 {
    to {
        transform: rotate(360deg);
    }
}


._bread_nzx6l_91 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

._backBtn_nzx6l_107 {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
    flex-shrink: 0;
    transition: background 0.12s;
}

._backBtn_nzx6l_107:hover {
    background: #f8fafc;
}

._breadLink_nzx6l_145 {
    cursor: pointer;
    transition: color 0.12s;
}

._breadLink_nzx6l_145:hover {
    color: #1a1a1a;
}

._breadSep_nzx6l_163 {
    color: #d1d5db;
}

._breadCurrent_nzx6l_171 {
    color: #1a1a1a;
    font-weight: 500;
}

/* ─── Stats Strip ─── */
._statsStrip_nzx6l_183 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 768px) {
    ._statsStrip_nzx6l_183 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    ._statsStrip_nzx6l_183 {
        grid-template-columns: repeat(2, 1fr);
    }
}

._stat_nzx6l_183 {
    background: #fff;
    border-radius: 10px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 10px 14px;
}

._statLabel_nzx6l_233 {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

._statVal_nzx6l_251 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
}

._statSub_nzx6l_265 {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
}

._statTeal_nzx6l_277 {
    color: #0f6e56;
}

._statAmber_nzx6l_285 {
    color: #854f0b;
}

._statRed_nzx6l_293 {
    color: #a32d2d;
}


._headerCard_nzx6l_303 {
    background: #fff;
    border-radius: 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

._headerLeft_nzx6l_327 {
    display: flex;
    align-items: center;
    gap: 14px;
}

._avatar_nzx6l_339 {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #faeeda;
    color: #854f0b;
    border: 1.5px solid rgba(239, 159, 39, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

._companyName_nzx6l_369 {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

._badges_nzx6l_383 {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

._badge_nzx6l_383 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
}

._dot_nzx6l_417 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}


._badgeActive_nzx6l_435 {
    background: #e1f5ee;
    color: #085041;
}

._badgeWarn_nzx6l_445 {
    background: #faeeda;
    color: #854f0b;
}

._badgeDanger_nzx6l_455 {
    background: #fcebeb;
    color: #a32d2d;
}

._badgeBlue_nzx6l_465 {
    background: #e6f1fb;
    color: #0c447c;
}

._badgeGray_nzx6l_475 {
    background: #f1efe8;
    color: #5f5e5a;
}

._badgePurple_nzx6l_485 {
    background: #eeedfe;
    color: #3c3489;
}

._dotTeal_nzx6l_495 {
    background: #1d9e75;
}

._dotAmber_nzx6l_503 {
    background: #ef9f27;
}

._dotRed_nzx6l_511 {
    background: #e24b4a;
}

._dotBlue_nzx6l_519 {
    background: #378add;
}

._dotGray_nzx6l_527 {
    background: #888780;
}

._dotPurple_nzx6l_535 {
    background: #7f77dd;
}


._actions_nzx6l_545 {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

._btn_nzx6l_557 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    color: #1a1a1a;
    white-space: nowrap;
    transition: background 0.12s;
}

._btn_nzx6l_557:hover {
    background: #f8fafc;
}

._btnPrimary_nzx6l_599 {
    background: #ffca40;
    color: #3d2c00;
    border-color: rgba(0, 0, 0, 0.06);
}

._btnPrimary_nzx6l_599:hover {
    background: #f5c030;
}

._btnDanger_nzx6l_619 {
    background: #fcebeb;
    color: #a32d2d;
    border-color: rgba(226, 75, 74, 0.2);
}

._btnDanger_nzx6l_619:hover {
    background: #fde8e8;
}


._mainGrid_nzx6l_641 {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 760px) {
    ._mainGrid_nzx6l_641 {
        grid-template-columns: 1fr;
    }
}

._colRight_nzx6l_667 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


._card_nzx6l_681 {
    background: #fff;
    border-radius: 12px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 16px 18px;
}

._cardTitle_nzx6l_695 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    /* color: #9ca3af; */
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 7px;
}

._cardIcon_nzx6l_723 {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

._iconTeal_nzx6l_745 {
    background: #e1f5ee;
}

._iconAmber_nzx6l_753 {
    background: #faeeda;
}

._iconBlue_nzx6l_761 {
    background: #e6f1fb;
}

._iconPurple_nzx6l_769 {
    background: #eeedfe;
}


._sectionLabel_nzx6l_779 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 12px 0 4px;
}

._sectionLabel_nzx6l_779:first-of-type {
    margin-top: 0;
}

._row_nzx6l_803 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0;
    gap: 12px;
}

._row_nzx6l_803+._row_nzx6l_803 {
    border-top: 0.5px solid rgba(0, 0, 0, 0.04);
}

._lbl_nzx6l_827 {
    font-size: 11px;
    color: #6b7280;
    flex-shrink: 0;
    min-width: 110px;
}

._val_nzx6l_841 {
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: right;
    word-break: break-word;
    max-width: 200px;
}

._valDash_nzx6l_859 {
    color: #d1d5db;
    font-weight: 400;
}

._mono_nzx6l_869 {
    font-size: 11px;
}


._togglePill_nzx6l_879 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
}

._toggleYes_nzx6l_899 {
    background: #e1f5ee;
    color: #085041;
}

._toggleNo_nzx6l_909 {
    background: #f1efe8;
    color: #5f5e5a;
}


._userRow_nzx6l_921 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

._userAvatar_nzx6l_939 {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e6f1fb;
    color: #0c447c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

._userName_nzx6l_967 {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

._userEmail_nzx6l_979 {
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}


._emptyUser_nzx6l_993 {
    font-size: 12px;
    color: #d1d5db;
    padding: 8px 0;
    text-align: center;
}

/* ─── Break item ─── */
._breakItem_nzx6l_1009 {
    font-size: 11px;
    color: #6b7280;
    padding: 4px 0;
    border-top: 0.5px solid rgba(0, 0, 0, 0.04);
}

/* ─── Logo ─── */
._logoImg_nzx6l_1025 {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
}


._descBody_nzx6l_1043 {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}

._descBody_nzx6l_1043 p {
    margin: 0 0 6px;
}

/* ─── Responsive  ─── */
@media (max-width: 480px) {
    ._wrap_nzx6l_3 {
        padding: 10px;
        gap: 10px;
    }

    ._headerCard_nzx6l_303 {
        padding: 14px 14px;
    }

    ._companyName_nzx6l_369 {
        font-size: 15px;
    }

    ._avatar_nzx6l_339 {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    ._lbl_nzx6l_827 {
        min-width: 90px;
    }

    ._val_nzx6l_841 {
        max-width: 160px;
    }

    ._card_nzx6l_681 {
        padding: 14px 14px;
    }

    ._btn_nzx6l_557 {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }
}


/* SuperAdminDashboard.css */
/* All class names prefixed with "sad__" for uniqueness */
:root {
    --sad-primary: #2563eb;
    --sad-success: #16a34a;
    --sad-warning: #d97706;
    --sad-danger: #dc2626;
    --sad-purple: #7c3aed;
    --sad-bg: #f8fafc;
    --sad-card: #ffffff;
    --sad-border: #e2e8f0;
    --sad-text: #0f172a;
    --sad-text-secondary: #64748b;
    --sad-text-muted: #94a3b8;
    --sad-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --sad-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --sad-radius: 10px;
    --sad-radius-sm: 6px;
}
.sad__wrapper {
    background: var(--sad-bg);
    min-height: 100vh;
    color: var(--sad-text);
    padding: 19px;
    box-sizing: border-box;
}
/* ── FILTER BAR ── */
.sad__filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 19px;
}
.sad__filter-select {
    font-size: 11px;
    font-weight: 500;
    color: var(--sad-text);
    background: var(--sad-card);
    border: 1px solid var(--sad-border);
    border-radius: var(--sad-radius-sm);
    padding: 6px 26px 6px 10px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    box-shadow: var(--sad-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 112px;
}
.sad__filter-select:focus {
    outline: none;
    border-color: var(--sad-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
/* ── STAT CARDS ── */
.sad__stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 13px;
    margin-bottom: 19px;
}
.sad__stat-card {
    background: var(--sad-card);
    border-radius: var(--sad-radius);
    padding: 16px;
    box-shadow: var(--sad-shadow);
    border: 1px solid var(--sad-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.sad__stat-card:hover {
    box-shadow: var(--sad-shadow-md);
    transform: translateY(-2px);
}
.sad__stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sad__stat-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--sad-text-secondary);
}
.sad__stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.sad__stat-icon--blue {
    background: #eff6ff;
}
.sad__stat-icon--green {
    background: #f0fdf4;
}
.sad__stat-icon--orange {
    background: #fff7ed;
}
.sad__stat-icon--red {
    background: #fef2f2;
}
.sad__stat-icon--purple {
    background: #f5f3ff;
}
.sad__stat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--sad-text);
}
.sad__stat-value--blue {
    color: var(--sad-primary);
}
.sad__stat-value--green {
    color: var(--sad-success);
}
.sad__stat-value--orange {
    color: var(--sad-warning);
}
.sad__stat-value--red {
    color: var(--sad-danger);
}
.sad__stat-value--purple {
    color: var(--sad-purple);
}
.sad__stat-trend {
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}
.sad__stat-trend--up {
    color: var(--sad-success);
}
.sad__stat-trend--down {
    color: var(--sad-danger);
}
.sad__stat-trend-label {
    color: var(--sad-text-muted);
    font-weight: 400;
}
/* ── CHARTS ROW ── */
.sad__charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-bottom: 19px;
}
@media (max-width: 768px) {
    .sad__charts-row {
        grid-template-columns: 1fr;
    }
}
.sad__chart-card {
    background: var(--sad-card);
    border-radius: var(--sad-radius);
    padding: 16px;
    box-shadow: var(--sad-shadow);
    border: 1px solid var(--sad-border);
}
.sad__chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.sad__chart-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sad-text);
}
.sad__chart-action {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sad__chart-filter-select {
    font-size: 10px;
    font-weight: 500;
    color: var(--sad-text-secondary);
    background: var(--sad-bg);
    border: 1px solid var(--sad-border);
    border-radius: 5px;
    padding: 3px 18px 3px 6px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    cursor: pointer;
}
/* Bar chart */
.sad__bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 19px;
    height: 144px;
    padding-bottom: 19px;
    position: relative;
    border-bottom: 1px solid var(--sad-border);
    background: transparent !important;
}
.sad__bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
    gap: 5px;
}
.sad__bar {
    width: 100%;
    background: linear-gradient(180deg, #ffec86 0%, #efa340 100%) !important;
    border-radius: 6px 6px 0 0;
    display: block;
}
.sad__bar:hover {
    opacity: 0.8;
}
.sad__bar-tooltip {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sad-text);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.sad__bar:hover .sad__bar-tooltip {
    opacity: 1;
}
.sad__bar-label {
    font-size: 9px;
    color: var(--sad-text-secondary);
    text-align: center;
    white-space: nowrap;
}
.sad__bar-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--sad-text-secondary);
}
.sad__bar-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffec86 0%, #efa340 100%);
}
/* Donut chart */
.sad__donut-wrap {
    display: flex;
    align-items: center;
    gap: 19px;
}
.sad__donut-svg {
    flex-shrink: 0;
}
.sad__donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sad__donut-legend-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}
.sad__donut-legend-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.sad__donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sad__donut-legend-count {
    font-weight: 700;
    font-size: 10px;
}
.sad__donut-legend-pct {
    color: var(--sad-text-secondary);
    font-size: 10px;
    text-align: right;
    min-width: 29px;
}
.sad__donut-legend-divider {
    border: none;
    border-top: 1px solid var(--sad-border);
    margin: 3px 0;
}
.sad__donut-legend-total {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
}
/* ── SECTION TABLES ── */
.sad__table-card {
    background: var(--sad-card);
    border-radius: var(--sad-radius);
    padding: 16px;
    box-shadow: var(--sad-shadow);
    border: 1px solid var(--sad-border);
    margin-bottom: 19px;
}
.sad__table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.sad__table-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sad-text);
}
.sad__view-all {
    font-size: 10px;
    font-weight: 600;
    color: var(--sad-warning);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.sad__view-all:hover {
    text-decoration: underline;
}
.sad__table {
    width: 100%;
    border-collapse: collapse;
}
.sad__table th {
    font-size: 10px;
    font-weight: 600;
    color: var(--sad-text-secondary);
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--sad-border);
    white-space: nowrap;
}
.sad__table td {
    font-size: 11px;
    padding: 10px 10px;
    border-bottom: 1px solid var(--sad-border);
    vertical-align: middle;
}
.sad__table tr:last-child td {
    border-bottom: none;
}
.sad__table tr:hover td {
    background: var(--sad-bg);
}
.sad__company-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sad__company-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.sad__company-name {
    font-weight: 500;
    font-size: 11px;
}
.sad__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sad__badge--online {
    background: #eff6ff;
    color: #2563eb;
}
.sad__badge--cash {
    background: #f0fdf4;
    color: #16a34a;
}
.sad__badge--paid {
    background: #f0fdf4;
    color: #16a34a;
}
.sad__badge--pending {
    background: #fff7ed;
    color: #d97706;
}
.sad__badge--expired {
    background: #fef2f2;
    color: #dc2626;
}
.sad__badge--trial {
    background: #f5f3ff;
    color: #7c3aed;
}
.sad__amount {
    font-weight: 600;
    font-size: 11px;
}
.sad__txn-id {
    font-size: 10px;
    color: var(--sad-text-secondary);
}
/* Expiring table */
.sad__expiry-icon {
    color: var(--sad-text-muted);
    font-size: 12px;
}
.sad__days-left--critical {
    color: #dc2626;
    font-weight: 700;
    font-size: 11px;
}
.sad__days-left--warning {
    color: #d97706;
    font-weight: 700;
    font-size: 11px;
}
.sad__days-left--ok {
    color: #16a34a;
    font-weight: 700;
    font-size: 11px;
}
/* ── LOADING / EMPTY ── */
.sad__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    flex-direction: column;
    gap: 13px;
    color: var(--sad-text-secondary);
    font-size: 12px;
}
.sad__spinner {
    width: 29px;
    height: 29px;
    border: 3px solid var(--sad-border);
    border-top-color: var(--sad-primary);
    border-radius: 50%;
    animation: sad__spin 0.7s linear infinite;
}
@keyframes sad__spin {
    to {
        transform: rotate(360deg);
    }
}
.sad__empty {
    text-align: center;
    padding: 26px;
    color: var(--sad-text-muted);
    font-size: 11px;
}
/* ── PAYMENT MODE PILLS ── */
.sad__mode-row {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 19px;
}
.sad__mode-pill {
    background: var(--sad-card);
    border: 1px solid var(--sad-border);
    border-radius: var(--sad-radius);
    padding: 11px 16px;
    box-shadow: var(--sad-shadow);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 128px;
}
.sad__mode-pill-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sad-text-secondary);
}
.sad__mode-pill-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--sad-text);
}
.sad__mode-pill-count {
    font-size: 10px;
    color: var(--sad-text-muted);
}._page_1srhp_1 {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 14px;
    background: #f4f7fb;
    gap: 9px;
    font-size: 11px;
    color: #374151;
    box-sizing: border-box;
}

._page_1srhp_1 *,
._page_1srhp_1 *::before,
._page_1srhp_1 *::after {
    box-sizing: border-box;
}

._pageTitle_1srhp_37 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._tableSection_1srhp_51 {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._tableHeader_1srhp_69 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 11px 14px 9px;
    border-bottom: 1px solid #e2e8f0;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

._sectionTitle_1srhp_91 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1px;
}

._sectionSub_1srhp_105 {
    font-size: 10px;
    color: #94a3b8;
    margin: 0;
}

._btn_1srhp_117 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s;
    white-space: nowrap;
    border: none;
}

._btnPrimary_1srhp_147 {
    background: #ffca40;
    color: #1e293b;
}

._btnPrimary_1srhp_147:hover {
    background: #f5c036;
    box-shadow: 0 2px 7px rgba(255, 202, 64, .38);
}

._btnSecondary_1srhp_167 {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

._btnSecondary_1srhp_167:hover {
    background: #f8fafc;
}

._filterBar_1srhp_187 {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

._filterField_1srhp_207 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 120px;
    max-width: 170px;
    min-width: 100px;
}

._filterLabel_1srhp_225 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}

._filterInputWrap_1srhp_241 {
    position: relative;
    display: flex;
    align-items: center;
}

._filterSelect_1srhp_253 {
    width: 100%;
    height: 28px;
    padding: 0 22px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #fff;
    font-size: 10px;
    color: #374151;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

._filterSelect_1srhp_253:focus {
    border-color: #94a3b8;
}

._filterClearX_1srhp_291 {
    position: absolute;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

._filterClearX_1srhp_291:hover {
    background: #cbd5e1;
}

._filterActions_1srhp_333 {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

._filterClearBtn_1srhp_345 {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

._filterClearBtn_1srhp_345:hover {
    background: #fef2f2 !important;
}

._letterIcon_1srhp_363 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============== CONTACT CELL (email / phone) ============== */

._contactCell_1srhp_395 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #374151;
}

._contactCell_1srhp_395 svg {
    color: #94a3b8;
    flex-shrink: 0;
}

._messagePreview_1srhp_421 {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #475569;
}

/* ============== STATUS BADGE (New / Read) ============== */

._status_1srhp_443 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 24px;
    padding: 0 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Green - New */
._status_1srhp_443._green_1srhp_477 {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

/* Gray - Read */
._status_1srhp_443._gray_1srhp_491 {
    background-color: #94a3b8;
    color: white;
    border-color: #94a3b8;
}

/* ============== VIEW MODAL ============== */

._modalOverlay_1srhp_507 {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

._modalBox_1srhp_527 {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    font-size: 11px;
    color: #374151;
}

._modalHeader_1srhp_551 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
}

._modalHeader_1srhp_551 h3 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

._modalCloseBtn_1srhp_581 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    padding: 0;
}

._modalCloseBtn_1srhp_581:hover {
    background: #e2e8f0;
}

._modalBody_1srhp_617 {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

._detailRow_1srhp_631 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

._detailRowFull_1srhp_645 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

._detailLabel_1srhp_659 {
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}

._detailValue_1srhp_675 {
    color: #1e293b;
    font-weight: 700;
    font-size: 11px;
}

._detailMessage_1srhp_687 {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    color: #475569;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Montserrat", sans-serif !important;
}

:root {
  /* ── Brand / Primary ── */
  --color-primary: #8b5cf6;
  --color-primary-light: #a855f7;
  --color-primary-lighter: #d8b4fe;
  --color-primary-lightest: #f3e8ff;
  --color-primary-warm: #faf5ff;
  --color-primary-dark: #7c3aed;
  --color-primary-darker: #6d28d9;
  --color-primary-darkest: #4c1d95;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-accent),
    var(--color-primary-light)
  );
  --gradient-primary-hover: linear-gradient(
    135deg,
    var(--color-accent-hover),
    var(--color-primary)
  );
  --gradient-header: linear-gradient(
    90deg,
    var(--color-primary-lightest),
    var(--color-primary-lighter)
  );
  --gradient-icon-box: linear-gradient(
    135deg,
    #f3e8ff,
    var(--color-primary-lighter)
  );

  /* ── Neutrals / Grays ── */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #475569;
  --color-gray-700: #374151;
  --color-gray-800: #1e293b;
  --color-gray-900: #111827;

  /* ── Slate ── */
  --color-slate-50: #f8fafc;
  --color-slate-200: #e2e8f0;
  --color-slate-400: #64748b;

  /* ── Status: Green ── */
  --color-green: #15803d;
  --color-green-bg: #dcfce7;
  --color-green-border: #86efac;

  /* ── Status: Yellow ── */
  --color-yellow: #b45309;
  --color-yellow-bg: #fef3c7;
  --color-yellow-border: #fcd34d;

  /* ── Status: Blue ── */
  --color-blue: #1d4ed8;
  --color-blue-bg: #dbeafe;
  --color-blue-border: #93c5fd;
  --color-blue-light: #e0ecff;

  /* ── Status: Violet ── */
  --color-violet: #8b5cf6;
  --color-violet-dark: #7c3aed;
  --color-violet-bg: #f3e8ff;
  --color-violet-bg-alt: #ede9fe;
  --color-violet-border: #d8b4fe;

  /* ── Status: Red ── */
  --color-red: #b91c1c;
  --color-red-bg: #fee2e2;
  --color-red-border: #fca5a5;
  --color-red-error: #dc2626;

  /* ── Font Family ── */
  --font-primary: "Poppins", "Montserrat", sans-serif;

  /* ── Font Sizes ── */
  --fs-4xs: 7px;
  --fs-3xs: 8px;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;

  /* ── Font Weights ── */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Spacing ── */
  --sp-1: 1px;
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-24: 24px;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 50px;
  --radius-round: 20px;
  --radius-full: 999px;
  --radius-circle: 50%;

  /* ── Shadows ── */
  --shadow-primary-sm: 0 2px 6px rgba(99, 102, 241, 0.3);
  --shadow-primary-md: 0 2px 8px rgba(99, 102, 241, 0.3);
  --shadow-primary-lg: 0 4px 12px rgba(99, 102, 241, 0.4);
  --shadow-primary-xl: 0 6px 18px rgba(99, 102, 241, 0.35);
  --shadow-accent-md: 0 2px 8px rgba(139, 92, 246, 0.35);
  --shadow-accent-sm: 0 2px 7px rgba(139, 92, 246, 0.38);
  --shadow-icon: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-canvas: -2px 0 20px rgba(0, 0, 0, 0.1);
  --shadow-btn-glow: 0 4px 12px rgba(99, 102, 241, 0.3);
  --shadow-btn-glow-hover:
    0 6px 18px rgba(99, 102, 241, 0.45), 0 0 0 3px rgba(168, 85, 247, 0.2);
  --shadow-focus-primary: 0 0 0 2px rgba(99, 102, 241, 0.2);
  --shadow-focus-checkbox: 0 0 0 0.15rem rgba(99, 102, 241, 0.3);

  /* ── Transitions ── */
  --transition-fast: 0.12s;
  --transition-base: 0.13s;
  --transition-normal: 0.15s;
  --transition-smooth: 0.2s ease;
  --transition-all: 0.3s ease;
  --transition-slide: 0.3s ease-in-out;

  /* ── Z-Index ── */
  --z-canvas: 1000;

  /* ── Sizes ── */
  --canvas-width: 450px;
  --modal-max-height: 80vh;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --icon-box-size: 42px;
  --btn-height-sm: 28px;
  --btn-height-md: 32px;
  --btn-size-round: 40px;
  --close-icon-size: 20px;
  --checkbox-sm: 14px;
  --scrollbar-width: 1px;
  --scrollbar-height: 3px;

  /* ── Scrollbar Colors ── */
  --scrollbar-thumb: #d8b4fe33;
  --scrollbar-thumb-hover: #a855f7;
  --scrollbar-thumb-active: #8b5cf6;
  --scrollbar-firefox: #e3e2e21e;

  /* ── Misc ── */
  --border-default: 1px solid var(--color-gray-200);
  --opacity-high: 0.9;
  --opacity-mid: 0.8;
}

/* GLOBAL FONT FIX */

body {
  -webkit-font-smoothing: antialiased;
}

/* width */

::-webkit-scrollbar {
  scrollbar-width: thin;
  width: var(--scrollbar-width) !important;
  height: var(--scrollbar-height);
}

/* track (background) */

::-webkit-scrollbar-track {
  background: transparent;
}

/* handle (default - light gray) */

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--sp-10);
  transition: background var(--transition-all);
}

/* 🔥 hover effect */

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

/* 🔥 optional: when actively scrolling */

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-firefox) transparent;
}

/* hover (Firefox workaround using body hover) */

body:hover {
  scrollbar-color: var(--scrollbar-thumb-hover) transparent;
}

/* Base pill */

.status {
  display: inline-block;
  padding: var(--sp-1) var(--sp-10);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  -webkit-border-radius: var(--radius-pill);
  -moz-border-radius: var(--radius-pill);
  -ms-border-radius: var(--radius-pill);
  -o-border-radius: var(--radius-pill);
}

/* Green */

.status.green {
  color: var(--color-green);
  background: var(--color-green-bg);
  border-color: var(--color-green-border);
}

/* Yellow */

.status.yellow {
  color: var(--color-yellow);
  background: var(--color-yellow-bg);
  border-color: var(--color-yellow-border);
}

/* Blue */

.status.blue {
  color: var(--color-blue);
  background: var(--color-blue-bg);
  border-color: var(--color-blue-border);
}

/* Violet */

.status.violet {
  color: var(--color-violet);
  background: var(--color-violet-bg);
  border-color: var(--color-violet-border);
}

/* Red */

.status.red {
  color: var(--color-red);
  background: var(--color-red-bg);
  border-color: var(--color-red-border);
}

/* Grey */

.status.grey {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

/* Base pill */

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-10);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  color: var(--color-violet-dark);
  background: linear-gradient(
    135deg,
    var(--color-violet-bg),
    var(--color-violet-bg-alt)
  );
  border: 1px solid var(--color-violet-border);
  -webkit-border-radius: var(--radius-pill);
  -moz-border-radius: var(--radius-pill);
  -ms-border-radius: var(--radius-pill);
  -o-border-radius: var(--radius-pill);
}

/* Icon inside */

.feature-pill .icon {
  display: flex;
  align-items: center;
  font-size: var(--fs-md);
}

.geo-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  background: var(--color-blue-light);
  color: var(--color-blue);
  padding: var(--sp-5) var(--sp-10);
  border-radius: var(--radius-round);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

/* //add and edit modal  */

.customModal :global(.modal-content) {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: none;
}

.modalHeader {
  background: var(--gradient-header);
  padding: var(--sp-16) var(--sp-18);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subText {
  font-size: var(--fs-sm);
  color: var(--color-gray-500);
}

.closeIcon {
  cursor: pointer;
  font-size: var(--fs-xl);
}

.modalContent {
  padding: var(--sp-18);
}

.label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-6);
  display: block;
}

.inputBox {
  display: flex;
  align-items: center;
  border: var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-8);
  background: var(--color-white);
}

.inputField {
  border: none !important;
  box-shadow: none !important;
  font-size: var(--fs-sm);
  padding: var(--sp-4) 0 !important;
  height: auto !important;
}

.icon {
  margin-right: var(--sp-8);
  color: var(--color-gray-400);
}

.errorText {
  color: var(--color-red-error);
  font-size: var(--fs-2xs);
  margin-top: var(--sp-2);
  display: block;
  line-height: 1.2;
}

.modalFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-20);
}

.cancelBtn {
  background: var(--color-gray-100);
  border: none;
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--radius-round);
}

.customModal .modal-content {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-modal);
}

.headerLeft {
  display: flex;
  gap: var(--sp-12);
}

/* 🔥 ICON BOX (exact UI feel) */

.headerIconBox {
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  border-radius: var(--radius-xl);
  background: var(--gradient-icon-box);
  box-shadow: var(--shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🔥 ICON */

.headerIconSvg {
  font-size: var(--fs-xl);
  color: var(--color-primary-darker);
}

/* view modal payroll */

.modalFooters {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--sp-20);
}

.customModal .modal-content {
  max-height: var(--modal-max-height);
  display: flex;
  flex-direction: column;
}

.modalContent {
  flex: 1;
  overflow-y: auto;
}

.customModal .modal-body {
  max-height: var(--modal-max-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modalContent {
  padding: var(--sp-18);
  overflow-y: auto;
  flex: 1;
}

.primaryBtns {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-md);
}

.primaryBtns:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary-lg);
}

.primaryBtns {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-20);
  border-radius: var(--radius-xl);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-all);
  border: none;
}

.primaryBtns {
  justify-content: center;
}

/* Payroll component */

.compactCheck {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}

.compactCheck input {
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
  cursor: pointer;
}

.compactCheck label {
  margin: 0;
  font-size: var(--fs-sm);
}

/* Ask AI Button */

.ask-ai-btn {
  position: fixed;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-18);
  border-radius: var(--radius-full);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-gray-700);
  cursor: pointer;
  z-index: var(--z-canvas);
  background: var(--color-white);
  border: 2px solid transparent;

  /* 🔥 Gradient Border (INDIGO → PURPLE THEME) */
  background-image: linear-gradient(white, white), var(--gradient-primary);
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: var(--shadow-btn-glow);
  transition: all var(--transition-all);
}

.ask-ai-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-btn-glow-hover);
}

.ask-ai-btn {
  width: max-content;
  white-space: nowrap;
}

.ask-ai-btn svg {
  font-size: var(--fs-lg);
  color: var(--color-accent);
}

.ask-ai-icon {
  font-size: var(--fs-xl);
}

/* change password inputs */

.inputBox .form-control {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.inputBox .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ✅ Only affects Change Password modal */

.changePasswordModal .inputBox .form-control {
  height: 30px !important;
  padding: var(--sp-6) var(--sp-10) !important;
  font-size: var(--fs-base) !important;
}

.changePasswordModal .inputBox button {
  padding: 0 var(--sp-8) !important;
  display: flex;
  align-items: center;
}

.modalFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: var(--sp-12) var(--sp-18);
  border-top: var(--border-default);
  background: var(--color-white);
}

.customModal .modal-content {
  max-height: var(--modal-max-height);
  display: flex;
  flex-direction: column;
}

.modalContent {
  flex: 1;
  overflow-y: auto;
}

.dashToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--btn-height-sm);
  padding: 0 var(--sp-11);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-accent);
  background: var(--color-primary-warm);
  color: var(--color-primary-darker);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.dashToggleBtn:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-accent-md);
  color: var(--color-white);
}

.dashToggleBtn svg {
  flex-shrink: 0;
}

/* Before select (unchecked) */

.form-check-input {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-accent) !important;
  box-shadow: none !important;
}

/* After select (checked) */

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

/* Focus effect */

.form-check-input:focus {
  box-shadow: var(--shadow-focus-checkbox) !important;
}

/* All Buttons */

.btnPrimary {
  background: var(--gradient-primary) !important;
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-primary-sm) !important;
  font-size: var(--fs-2xs);
  border-radius: 4px;
  padding: 6px 12px;
  font-weight: 600;
  border-radius: 3px;
}

.btnPrimary1 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  font-weight: var(--fw-semibold);
  padding: var(--sp-7) var(--sp-14);
  border-radius: var(--radius-sm);
  border: var(--border-default);
  color: var(--color-white);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-normal);
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-primary-sm) !important;
  font-size: var(--fs-2xs);
}

.btnPrimary1:hover {
  background: var(--gradient-primary-hover) !important;
}

.btnPrimary2 {
  background: var(--gradient-primary) !important;
  color: var(--color-white);
  border: none;
  font-size: var(--fs-4xs);
}

.btnSecondary {
  background: #fff;
  border-color: #fecaca !important;
  color: #dc2626 !important;
  font-size: var(--fs-2xs);
  height: 27px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
  border: none;
  border: 1px solid #e2e8f0;
}

.btnSecondary:hover {
  background: #fef2f2 !important;
}

.backBtn {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.ellipsisCell {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* AskAICanvas*/

/* Overlay */

.canvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.canvas-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Canvas */

.ask-ai-canvas {
  position: fixed;
  top: 0;
  right: -500px;
  width: 450px;
  height: 100vh;
  background: #ffffff;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease-in-out;
}

.ask-ai-canvas.open {
  right: 0;
}

.canvas-header {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.header-text p {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: 0.8;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.close-btn1 {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.close-btn1:hover {
  background: rgba(255, 255, 255, 0.2);
}

.closeIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  font-size: 16px;
  transition:
    background 0.15s,
    color 0.15s;
  padding: 0;
}

.closeIcon:hover {
  background: #f3f4f6;
  color: #111827;
}

.ai-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

/* Messages Area */

.canvas-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  gap: 10px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}

.bot-message {
  justify-content: flex-start;
}

.user-message {
  justify-content: flex-end;
}

.bot-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.message-content {
  max-width: 80%;
}

.user-message .message-content {
  max-width: 85%;
}

.message-text {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.bot-message .message-text {
  background: white;
  color: #2c3e50;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.user-message .message-text {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

/* Options Container */

.options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.option-button {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  color: #6366f1;
  font-weight: 500;
}

.option-button:hover {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

/* Typing Indicator */

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: white;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* Input Area */

.canvas-input-container {
  padding: 16px 20px 20px;
  border-top: 1px solid #e9ecef;
  background: white;
}

.input-wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.input-wrapper textarea {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  resize: none;
  font-family: inherit;
  max-height: 100px;
  transition: border-color 0.2s;
}

.input-wrapper textarea:focus {
  outline: none;
  border-color: #6366f1;
}

.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.powered-by {
  text-align: center;
  font-size: 11px;
  color: #6c757d;
  margin-top: 12px;
}

.payslip-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payslip-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
}

.payslip-button svg {
  transition: transform 0.2s ease;
}

.payslip-button:hover svg {
  transform: translateY(2px);
}

/* Scrollbar Styling */

.canvas-messages::-webkit-scrollbar {
  width: 6px;
}

.canvas-messages::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.canvas-messages::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 3px;
}

.canvas-messages::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

/* Header Actions */

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .ask-ai-canvas {
    width: 100%;
    right: -100%;
  }

  .message-content {
    max-width: 90%;
  }
}

/* en */

.multiSelectOption {
  display: flex;
  align-items: center;
  gap: 10px;
}

.multiSelectOption input[type="checkbox"] {
  accent-color: #6366f1;
  width: 16px;
  height: 16px;
}

/* Toggle */

.toggleGroup {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggleLabel {
  font-size: 8px;
  color: #374151;
  font-weight: 500;
}

.toggleSub {
  font-size: 7px;
  color: #94a3b8;
}

.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggleSlider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 22px;
  transition: background 0.2s;
}

.toggleSlider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #d6d6d6;
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggleSlider {
  background: var(--gradient-primary);
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}

.toggle input:checked + .toggleSlider::before {
  transform: translateX(18px);
  background: #f0eeee;
}

.btnSecondary1 {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: var(--fs-2xs);
  height: 27px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    box-shadow 0.13s;
  white-space: nowrap;
}

.btnSecondary1:hover {
  background: #f8fafc;
}

/* =========================================================
    FIX ONLY: RIGHT CONTENT WHEN ADMIN SIDEBAR COLLAPSES
    ========================================================= */

.adm-main {
  width: calc(100% - var(--sidebar-width));
  margin-left: var(--sidebar-width);
  min-width: 0;
  box-sizing: border-box;
  transition:
    width var(--sidebar-transition),
    margin-left var(--sidebar-transition);
}

.adm-main.collapsed {
  width: calc(100% - var(--sidebar-collapsed));
  margin-left: var(--sidebar-collapsed);
}

.adm-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────
   GLOBAL RESET
───────────────────────────────────────────────────────────────── */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', 'Montserrat', sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────────
   THEME ROOT  —  single source of truth for every token
   Edit values here; everything else references these variables.
───────────────────────────────────────────────────────────────── */

:root {

   /* ── Typography ─────────────────────────────────────────────── */
   --font-sans: "DM Sans", "Nunito", sans-serif;
   --font-heading: "Syne", sans-serif;

   /* ── Brand / Primary ────────────────────────────────────────── */
   --color-primary: #8b5cf6;
   --color-primary-lighter: #d8b4fe;
   --color-primary-lighter-50: #f3e8ff;
   --color-primary-lighter-10: #faf5ffc2;
   --color-primary-darker: #6d28d9;
   --color-primary-hover: #7c3aed;
   --color-primary-active: #6d28d9;
   --color-primary-disabled: #d8b4fe;
   --color-primary-text-disabled: #8c8c8c;

   /* ── Secondary / Accent ──────────────────────────────────────── */
   --color-secondary: #c8161d;
   --color-secondary-light: #e03a3f;
   --color-secondary-dark: #9f1217;
   --color-secondary-hover: #b8141b;
   --color-secondary-active: #8f1115;
   --color-secondary-disabled: #e8b4b6;
   --color-secondary-text-disabled: #7a7a7a;

   /* ── Status ──────────────────────────────────────────────────── */
   --color-success: #1fc16b;
   --color-success-bg: #c2f7db;
   --color-success-bg-50: #e1fbed;
   --color-warning: #f59e0b;
   --color-warning-bg: #fef9c3;
   --color-error: #fb3748;
   --color-error-bg: #ffe7e8;
   --color-info: #0054a6;
   --color-info-bg: #d9eaff;
   --color-discard-bg: #fce9eb;

   /* ── Neutral Gray Scale ──────────────────────────────────────── */
   --color-white: #ffffff;
   --color-gray-50: #f4f7fb;
   --color-gray-100: #edf0f7;
   --color-gray-200: #e2e8f0;
   --color-gray-300: #cbd5e0;
   --color-gray-400: #a0aec0;
   --color-gray-500: #718096;
   --color-gray-600: #4a5568;
   --color-gray-700: #2d3748;
   --color-gray-800: #1a202c;
   --color-gray-900: #0f1923;

   /* ── Page / Surface Backgrounds ─────────────────────────────── */
   --color-home-bg: #f5f5f2;
   --bg-body: var(--color-gray-50);
   --bg-card: var(--color-white);
   --content-bg: var(--color-gray-50);

   /* ── Border ──────────────────────────────────────────────────── */
   --border-color: var(--color-gray-200);

   /* ── Text ────────────────────────────────────────────────────── */
   --text-primary: var(--color-gray-800);
   --text-secondary: var(--color-gray-600);
   --text-muted: var(--color-gray-500);

   /* ── Shadows ─────────────────────────────────────────────────── */
   --shadow-sm: 0 1px 3px rgba(99, 102, 241, 0.08);
   --shadow-md: 0 4px 6px rgba(99, 102, 241, 0.10);
   --shadow-lg: 0 10px 15px rgba(99, 102, 241, 0.15);

   /* ── UI Utility ──────────────────────────────────────────────── */
   --preview: #0f0f0f8c;
   --option-color: #6c757d;
   --option-bg: #f8f9fa;
   --select-option: #e9ecef;
   --select-color: #212529;

   /* ════════════════════════════════════════════════════════════════
     HEADER  —  derives from brand & neutral tokens
  ════════════════════════════════════════════════════════════════ */
   --header-height: 64px;
   --header-bg: var(--color-white);
   --header-border: var(--color-gray-100);
   --header-shadow: 0 1px 0 var(--color-gray-100),
      0 4px 16px rgba(15, 28, 46, 0.06);

   /* ════════════════════════════════════════════════════════════════
     SIDEBAR  —  all tokens reference the brand palette above
  ════════════════════════════════════════════════════════════════ */

   /* Dimensions */
   --sidebar-width: 210px;
   --sidebar-collapsed: 90px;

   /* Backgrounds — dark navy surface */
   --sidebar-bg: #0f1c2e;
   --sidebar-bg-2: #0a1520;

   /* Accent — maps directly to brand gradient */
   --sidebar-accent: #8b5cf6;
   --sidebar-accent-soft: rgba(99, 102, 241, 0.12);
   --sidebar-accent-glow: rgba(99, 102, 241, 0.25);

   /* Text on dark sidebar */
   --sidebar-text: rgba(255, 255, 255, 0.82);
   --sidebar-text-muted: rgba(255, 255, 255, 0.38);

   /* Interactive states */
   --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
   --sidebar-active-bg: rgba(99, 102, 241, 0.14);

   /* Divider / border on dark surface */
   --sidebar-border: rgba(255, 255, 255, 0.07);

   /* Animation */
   --sidebar-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

   /* login page variables */
   --brand-primary: #0f4c75;
   --brand-secondary: #1b6ca8;
   --brand-accent: #6366f1;
   --brand-accent-soft: rgba(99, 102, 241, 0.12);
   --brand-glow: rgba(99, 102, 241, 0.35);

   --text-primary: #0a1628;
   --text-secondary: #4a5568;
   --text-muted: #8a9ab5;
   --text-white: #ffffff;

   --surface-card: #ffffff;
   --surface-input: #f4f7fb;
   --surface-input-focus: #f5f3ff;
   --border-default: #dde3ee;
   --border-focus: #6366f1;
   --border-error: #e53e3e;

   --hero-bg-1: #041526;
   --hero-bg-2: #0a2744;
   --hero-particle: rgba(99, 102, 241, 0.15);

   --shadow-card: 0 25px 60px rgba(10, 22, 40, 0.12), 0 4px 16px rgba(10, 22, 40, 0.06);
   --shadow-button: 0 6px 24px rgba(99, 102, 241, 0.45);
   --shadow-button-hover: 0 10px 32px rgba(168, 85, 247, 0.5);
   --shadow-input-focus: 0 0 0 3px rgba(99, 102, 241, 0.18);

   --radius-sm: 8px;
   --radius-md: 14px;
   --radius-lg: 22px;
   --radius-xl: 32px;

   --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-smooth: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}/* ══════════════════════════════════════════
   MODAL SIZE
══════════════════════════════════════════ */

.alt-modal-dialog {
  /* max-width: 340px !important; */
  width: 100% !important;
  margin: 1rem auto !important;
}

.alt-modal-content {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #ffffff !important;

  display: flex !important;
  flex-direction: column !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

/* ══════════════════════════════════════════
   BODY WRAP
══════════════════════════════════════════ */

.alt-modal-body-wrap {
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */

.alt-modal-header {
  background: var(--gradient-header);

  padding: 14px 16px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  border-bottom: 1px var(--gradient-header);
}
.tax-modal1 {
  border-radius: 10px;
}
.alt-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alt-header-icon {
  width: 30px;
  height: 30px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.45);

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.alt-header-title {
  margin: 0;

  font-size: 13px;
  font-weight: 700;

  color: #172036;
}

.alt-header-sub {
  margin: 3px 0 0;

  font-size: 11px;
  line-height: 1.3;

  color: #4f6484;
}

/* ══════════════════════════════════════════
   CLOSE BUTTON
══════════════════════════════════════════ */

.alt-close-btn {
  width: 20px;
  height: 20px;

  border: none;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.2s ease;
}

.alt-close-btn:hover {
  background: #ffffff;
}

/* ══════════════════════════════════════════
   MODAL BODY
══════════════════════════════════════════ */

.alt-modal-body {
  padding: 5px !important;

  background: #ffffff;

  max-height: 55vh;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Scrollbar */

.alt-modal-body::-webkit-scrollbar {
  width: 4px;
}

.alt-modal-body::-webkit-scrollbar-thumb {
  background: #d4b15f;
  border-radius: 20px;
}

/* ══════════════════════════════════════════
   FORM FIELD
══════════════════════════════════════════ */

.alt-field {
  margin-bottom: 16px;
}

.alt-label {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 700;

  color: #2d2d2d;
}

.alt-values {
  display: block;

  margin-bottom: 6px;

  font-size: 10px;
  font-weight: 700;

  color: #2d2d2da5;
}

.alt-required {
  color: #ef4444;
}

/* ══════════════════════════════════════════
   INPUT
══════════════════════════════════════════ */

.alt-input {
  width: 100%;
  height: 40px;

  border-radius: 12px;
  border: 1px solid #d9dee7;

  background: #ffffff;

  padding: 0 10px;

  font-size: 11px;

  color: #1f2937;

  outline: none;

  transition: all 0.2s ease;
}

.alt-input::placeholder {
  color: #9ca3af;
}

.alt-input:focus {
 border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.alt-input-error {
  border-color: #ef4444 !important;
}

.alt-input1 {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #d9dee7;

  background: #ffffff;

  padding: 0 10px;

  font-size: 11px;

  color: #1f2937;

  outline: none;

  transition: all 0.2s ease;
}

.alt-input11::placeholder {
  color: #9ca3af;
}

.alt-input1:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.alt-input1-error {
  border-color: #ef4444 !important;
}

.alt-error-text {
  display: block;

  margin-top: 5px;

  font-size: 11=0px;

  color: #ef4444;
}

/* ===== FIXED FOOTER ===== */

.alt-modal-footer {
  position: sticky;
  bottom: 0;

  background: #ffffff;

  padding: 12px 0 0 0;

  border-top: 1px solid #ececec;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  z-index: 20;
}

/* ══════════════════════════════════════════
   CANCEL BUTTON
══════════════════════════════════════════ */

.alt-btn-cancel {
  min-width: 90px;
  height: 30px;

  border-radius: 10px;
  border: 1px solid #d5dae3;

  background: #ffffff;

  font-size: 10px;
  font-weight: 500;

  color: #475569;

  cursor: pointer;

  transition: 0.2s ease;
}

.alt-btn-cancel:hover {
  background: #f8fafc;
}

/* ══════════════════════════════════════════
   CREATE BUTTON
══════════════════════════════════════════ */

.alt-btn-create {
  min-width: 90px;
  height: 30px;
  border: none;

  border-radius: 10px;

  background: var(--gradient-primary) !important;
  color: var(--color-white);
  cursor: pointer;
  transition: 0.2s ease;
  box-shadow: var(--shadow-primary-sm) !important;
  font-size: 10px;
  font-weight: 700;

}

.alt-btn-create:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   DIVIDER
══════════════════════════════════════════ */

.alt-divider {
  display: none;

}

/* ══════════════════════════════════════════
   MODAL STACKING — must sit above the fixed
   Workplace header (z-index: 100000)
══════════════════════════════════════════ */

:global(.modal-backdrop) {
  z-index: 100010 !important;
}

:global(.modal) {
  z-index: 100020 !important;
}/* ================================================================
   filterModulePopup.css  —  prefix: fmp-
   Import once globally: import "./styles/filterModulePopup.css"
   ================================================================ */

/* ── Overlay: covers full screen, blurs bg ──────────────────── */
.fmp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1052 !important;
  background: rgba(10, 10, 25, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ── Floating card: top-right corner, NOT full height ───────── */
.fmp-card {
  position: fixed;
  top: 60px;
  /* distance from top of screen */
  right: 20px;
  /* distance from right edge */
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: #ffffff;
  border-radius: 18px;
  /* all 4 corners rounded — like the screenshot */
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1051 !important;
  animation: fmp-pop-in 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes fmp-pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Header ─────────────────────────────────────────────────── */
.fmp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #f9c624;
  border-radius: 18px 18px 0 0;
  flex-shrink: 0;
}

.fmp-header-left {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1a1a1a;
}

.fmp-header-title {
  font-size: 17px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}

.fmp-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.fmp-close-btn:hover {
  background: #f5f5f5;
  color: #111;
}

/* ── Scrollable body ─────────────────────────────────────────── */
.fmp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
}

.fmp-body::-webkit-scrollbar {
  width: 4px;
}

.fmp-body::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 4px;
}

/* ── Section ────────────────────────────────────────────────── */
.fmp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fmp-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 0.08em;
}

/* ── Status chips ───────────────────────────────────────────── */
.fmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fmp-chip {
  padding: 7px 16px;
  border-radius: 30px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
}

.fmp-chip:hover {
  border-color: #f9c624;
  color: #111;
}

.fmp-chip--active {
  background: #fff8e1;
  border-color: #f9c624;
  color: #1a1a1a;
  font-weight: 700;
}

/* ── react-select: checkbox inside each option ──────────────── */
.fmp-rs-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fmp-rs-check {
  width: 15px;
  height: 15px;
  accent-color: #f9c624;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── react-select: "N selected" badge ──────────────────────── */
.fmp-rs-badge {
  display: inline-flex;
  align-items: center;
  background: #fff8e1;
  border: 1px solid #f9c624;
  color: #1a1a1a;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Footer ─────────────────────────────────────────────────── */
.fmp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid #f1f5f9;
  background: #fff;
  flex-shrink: 0;
  border-radius: 0 0 18px 18px;
}

.fmp-btn-clear {
  background: transparent;
  border: none;
  color: #e53e3e;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 2px;
  font-family: inherit;
  transition: color 0.15s;
}

.fmp-btn-clear:hover {
  color: #c53030;
}

.fmp-btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f9c624;
  color: #1a1a1a;
  border: none;
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}

.fmp-btn-apply:hover {
  background: #f0b800;
  transform: translateY(-1px);
}

.fmp-btn-apply:active {
  transform: translateY(0);
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 440px) {
  .fmp-card {
    top: 12px;
    right: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }

  .fmp-header {
    border-radius: 14px 14px 0 0;
  }

  .fmp-footer {
    border-radius: 0 0 14px 14px;
  }
}/*$vite$:1*/