/* =====================================================
   Dashboard Theme - HRMS Reference
   ===================================================== */

:root,
body.dashboard-theme {
  --dash-bg: oklch(0.985 0.003 256);
  --dash-bg-deep: oklch(0.985 0.003 256);
  --dash-panel: oklch(1 0 0);
  --dash-panel-2: #f8fafc;
  --dash-border: oklch(0.915 0.008 256);
  --dash-text: oklch(0.145 0.01 259);
  --dash-muted: oklch(0.49 0.02 259);
  --dash-soft: #6b7280;
  --dash-teal: #7AAA44;
  --dash-lime: #10b981;
  --dash-pink: #f43f5e;
  --dash-purple: #22c55e;
  --dash-violet: #2dd4bf;
  --dash-blue: #3b82f6;
  --dash-amber: #f59e0b;
  --dash-primary-foreground: #04130f;
  --dash-header-text: oklch(0.145 0.01 259);
  --dash-header-bar: rgba(255, 255, 255, 0.96);
  --dash-active-border: rgba(52, 211, 153, 0.32);
  --dash-tabs-bg: rgba(248, 250, 252, 0.86);
  --dash-input-bg: var(--dash-panel);
  --dash-dropdown-bg: var(--dash-panel);
  --dash-hover-bg: rgba(52, 211, 153, 0.07);
  --dash-table-header: oklch(0.965 0.008 256);
  --dash-table-border: rgba(15, 23, 42, 0.08);
  --dash-table-hover: rgba(52, 211, 153, 0.07);
  --dash-focus-ring: color-mix(in oklab, var(--dash-purple) 18%, transparent);
  --dash-card-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
  --dash-card-shadow-hover: 0 16px 34px rgba(15, 23, 42, 0.12);
  --dash-scrollbar-track: color-mix(in oklab, var(--dash-panel) 6%, transparent);
  --dash-muted-scrollbar: color-mix(in oklab, var(--dash-muted) 45%, transparent);
  --dash-calendar-surface: var(--dash-panel);
  --dash-calendar-shadow: 0 18px 42px color-mix(in oklab, var(--dash-text) 16%, transparent);
  --dash-calendar-off: color-mix(in oklab, var(--dash-muted) 68%, var(--dash-panel));

  /* ----- LIGHT GRADIENTS (restored) ----- */
  --dash-active-bg: rgb(88 211 52 / 12%);
  --dash-card-gradient: linear-gradient(135deg, oklch(1 0 0) 0%, oklch(1 0 0) 100%);
  --dash-header-gradient: linear-gradient(135deg, oklch(1 0 0) 0%, oklch(0.965 0.008 256) 100%);
  --dash-accent-gradient: #79c532;
  --dash-soft-accent-bg: color-mix(in oklab, var(--dash-purple) 18%, transparent);
  --dash-soft-accent-border: color-mix(in oklab, var(--dash-purple) 28%, transparent);
  --dash-soft-accent-text: var(--dash-purple);
  --dash-feature-gradient:
    radial-gradient(circle at 0 0, rgba(52, 211, 153, 0.06), transparent 38%),
    linear-gradient(135deg, oklch(1 0 0) 0%, #f8fafc 100%);
  --dash-feature-header-gradient:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
  --dash-feature-border: rgba(52, 211, 153, 0.2);
  --dash-feature-border-strong: rgba(144, 214, 63, 0.3);
  --dash-feature-inset: rgba(52, 211, 153, 0.08);
  --dash-feature-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
  --dash-feature-shadow-hover: 0 16px 34px rgba(15, 23, 42, 0.12);

  /* chart colors (unchanged) */
  --chart-green: #22c55e;
  --chart-red: #f43f5e;
  --chart-amber: #f59e0b;
  --chart-blue: #3b82f6;
  --chart-violet: #8b5cf6;
  --chart-teal: #0d9488;
  --chart-cyan: #0891b2;
  --chart-indigo: #4f46e5;
  --chart-emerald: #6ea80f;
  --chart-sky: #0369a1;
}

html.hrms-dark,
html.hrms-dark body.dashboard-theme,
body.hrms-dark,
body.hrms-dark.dashboard-theme,
body.dashboard-theme.dark,
.dark {
  --dash-bg: oklch(0.17 0.01 255);
  --dash-bg-deep: oklch(0.17 0.01 255);
  --dash-panel: oklch(0.21 0.02 268.86);
  --dash-panel-2: #151a20;
  --dash-border: oklch(0.31 0.01 255);
  --dash-text: oklch(0.97 0.01 255);
  --dash-muted: oklch(0.76 0.01 255);
  --dash-soft: #778293;
  --dash-teal: #7AAA44;
  --dash-lime: #6ea80f;
  --dash-pink: #f43f5e;
  --dash-purple: #22c55e;
  --dash-violet: #2dd4bf;
  --dash-blue: #3b82f6;
  --dash-amber: #f59e0b;
  --dash-primary-foreground: #061111;
  --dash-header-text: oklch(0.97 0.01 255);
  --dash-header-bar: rgba(18, 21, 27, 0.96);
  --dash-active-border: rgba(52, 211, 153, 0.42);
  --dash-active-bg: rgba(52, 211, 153, 0.14);
  --dash-tabs-bg: rgba(12, 16, 21, 0.72);
  --dash-input-bg: #11161c;
  --dash-dropdown-bg: rgba(18, 22, 28, 0.94);
  --dash-hover-bg: rgba(255, 255, 255, 0.06);
  --dash-table-header: #20262f;
  --dash-table-border: rgba(255, 255, 255, 0.07);
  --dash-table-hover: rgba(52, 211, 153, 0.08);
  --dash-focus-ring: color-mix(in oklab, var(--dash-purple) 24%, transparent);
  --dash-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --dash-card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.34);
  --dash-card-gradient:
    radial-gradient(circle at 0 0, rgba(11, 83, 77, 0.22), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(8, 16, 44, 0.16), transparent 36%),
    linear-gradient(135deg, #171c22 0%, #15191f 56%, #192135 100%);
  --dash-header-gradient:
    linear-gradient(135deg, rgba(19, 43, 45, 0.95) 0%, rgba(22, 27, 34, 0.98) 52%, rgba(28, 38, 61, 0.98) 100%);
  --dash-accent-gradient: linear-gradient(135deg,
      color-mix(in oklab, var(--dash-purple) 88%, var(--dash-panel)),
      color-mix(in oklab, var(--dash-violet) 88%, var(--dash-panel-2)));
  --dash-soft-accent-bg: color-mix(in oklab, var(--dash-purple) 14%, transparent);
  --dash-soft-accent-border: color-mix(in oklab, var(--dash-purple) 24%, transparent);
  --dash-soft-accent-text: var(--dash-purple);
  --dash-feature-gradient:
    radial-gradient(circle at 0 0, rgba(10, 82, 76, 0.22), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(15, 26, 59, 0.16), transparent 36%),
    linear-gradient(135deg, #171c22 0%, #15191f 56%, #192135 100%);
  --dash-feature-header-gradient:
    linear-gradient(135deg, rgba(19, 43, 45, 0.95) 0%, rgba(22, 27, 34, 0.98) 52%, rgba(28, 38, 61, 0.98) 100%);
  --dash-feature-border: rgba(52, 211, 153, 0.2);
  --dash-feature-border-strong: rgba(52, 211, 153, 0.3);
  --dash-feature-inset: rgba(255, 255, 255, 0.04);
  --dash-feature-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --dash-feature-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.34);
  --dash-scrollbar-track: color-mix(in oklab, white 6%, transparent);
  --dash-calendar-surface: var(--dash-bg-deep);
  --dash-calendar-shadow: 0 22px 54px color-mix(in oklab, black 55%, transparent);
  --dash-calendar-off: color-mix(in oklab, var(--dash-muted) 40%, var(--dash-bg-deep));
}

/* ----- Page Shell ----- */
html.layout-menu-fixed .layout-wrapper,
html.layout-menu-fixed .layout-container,
html.layout-menu-fixed .layout-page,
html.layout-menu-fixed .content-wrapper,
html.layout-menu-fixed .container-xxl,
html.layout-menu-fixed .container-xxl .row,
html.layout-menu-fixed .container-xxl [class*="col-"],
html.layout-menu-fixed .container-xxl .card,
html.layout-menu-fixed .container-xxl .card *,
html.layout-transitioning .layout-page,
html.layout-transitioning .layout-menu,
html.layout-transitioning .layout-navbar,
.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container-xxl,
.app-content,
.app-wrapper {
  animation: none !important;
  transition: none !important;
}

html,
body {
  background: var(--dash-bg-deep) !important;
  color: var(--dash-text) !important;
}

.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container-xxl,
.app,
.app-wrapper,
.app-content {
  background: var(--bd-sidebar-bg) !important;
  color: var(--dash-text) !important;
}

.container-xxl {
  min-height: 100vh !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

/* container-xl used by new Tailwind layout */
.container-xl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ----- Cards ----- */
.card,
.drs-status-card,
.employee-tabs-card,
.wall-of-fame-card,
.org-analysis-card,
.evaluation-card,
.remaining-eval-card,
.birthday-card-section,
.sub-card {
  background: var(--dash-card-gradient) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--dash-card-shadow) !important;
  color: var(--dash-text) !important;
  overflow: hidden;
  position: relative;
  transition: none !important;
}

.card:hover {
  box-shadow: var(--dash-card-shadow) !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card label,
.chart-title,
.drs-status-card .card-title {
  color: var(--dash-text) !important;
}

.greeting-card,
.employee-tabs-header,
.wall-of-fame-header,
.org-analysis-card .card-header,
.evaluation-card .card-header,
.birthday-card-section .birthday-header,
.modal-header {
  background: var(--dash-header-gradient) !important;
  border-bottom: 1px solid var(--dash-border) !important;
}

.greeting-card {
  border-radius: 20px !important;
}

.greeting-card::before {
  background: radial-gradient(circle, color-mix(in oklab, var(--dash-purple) 18%, transparent), transparent 70%) !important;
  border-radius: 50%;
  content: "";
  height: 250px;
  pointer-events: none;
  position: absolute;
  right: -10%;
  top: -30%;
  width: 250px;
}

.greeting-card .card-body {
  padding: 1.1rem 1.8rem !important;
}

.greeting-card .greeting {
  color: var(--dash-header-text) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  margin-bottom: 0.4rem !important;
}

.greeting-card .greeting-quote {
  background: transparent !important;
  border: 1px solid var(--dash-purple) !important;
  padding: 0.1rem 0.62rem !important;
  border-radius: 999px !important;
  color: var(--dash-purple) !important;
  display: inline-block;
  font-size: 0.76rem !important;
  font-style: italic;
  line-height: 1.35 !important;
  margin-bottom: 0.38rem !important;
}

html.hrms-dark .greeting-card .greeting-quote,
body.hrms-dark .greeting-card .greeting-quote,
.dark .greeting-card .greeting-quote {
  background: #171b21 !important;
  border: 1.5px solid rgb(122 170 68) !important;
  color: rgb(122 170 68) !important;
}

.greeting-card .greeting-quote::before {
  content: "\201C";
  font-size: 1rem;
  margin-right: 4px;
  opacity: 0.8;
}

.greeting-card .greeting-quote::after {
  content: "\201D";
  font-size: 1rem;
  margin-left: 4px;
  opacity: 0.8;
}

.irregular-text {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--dash-pink) !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-top: 0.3rem !important;
  padding: 0 0.1rem !important;
  width: auto !important;
}

/* ----- Employee Details ----- */
.employee-tabs-card {
  height: 560px !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.employee-tabs-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 !important;
}

.employee-tabs-header {
  border-radius: 16px 16px 0 0 !important;
  padding: 0.85rem 0.9rem 0.65rem !important;
}

.employee-tabs-heading {
  color: var(--dash-header-text) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  padding: 0 0 0.55rem !important;
}

.dashboard-tabs {
  background: color-mix(in srgb, var(--bd-sidebar-card, var(--dash-panel)) 78%, transparent) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--bd-sidebar-border, var(--dash-border)) 86%, transparent) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding: 0 !important;
  width: 100% !important;
}

.dashboard-tabs::-webkit-scrollbar {
  display: none !important;
}

.dashboard-tabs .nav-link {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--dash-muted) !important;
  display: flex !important;
  flex: 1 1 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  gap: 0.35rem !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0.68rem 0.45rem !important;
  text-overflow: ellipsis !important;
  transition: none !important;
  white-space: nowrap !important;
}

.dashboard-tabs .nav-link i {
  color: inherit !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

.dashboard-tabs .nav-link:hover {
  background: var(--bd-sidebar-hover, var(--dash-hover-bg)) !important;
  color: var(--bd-sidebar-text, var(--dash-text)) !important;
}

.dashboard-tabs .nav-link.active {
  background: var(--bd-sidebar-active, var(--dash-active-bg)) !important;
  border-bottom-color: var(--bd-sidebar-primary, var(--dash-purple)) !important;
  box-shadow: var(--bd-sidebar-active-shadow, none) !important;
  color: var(--bd-sidebar-text, var(--dash-text)) !important;
}

.employee-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 0.25rem !important;
  scrollbar-color: var(--dash-teal) var(--dash-scrollbar-track);
}

.employee-tab-content .tab-pane {
  margin-top: 0 !important;
}

.employee-tab-content:has(.tab-pane.active .leave-image-wrapper) {
  overflow-y: hidden !important;
}

.employee-tab-content .tab-pane:has(.leave-image-wrapper) {
  min-height: 100%;
}

.employee-tab-content .tab-pane:has(.leave-image-wrapper) .dashboard-table {
  display: none !important;
}

.employee-tab-content .tab-pane.active .leave-image-wrapper {
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  padding: 1rem !important;
}

.employee-tab-content .tab-pane.active .leave-image-wrapper img {
  max-height: 360px !important;
  max-width: 320px !important;
  width: min(55%, 320px) !important;
}

/* ----- Tables ----- */
/* =========================================
   DASHBOARD TABLE
   ========================================= */

.dashboard-table {
  width: 100% !important;

  margin: 0 !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  color: var(--dash-text) !important;

  background: transparent !important;
}

/* header */
.dashboard-table thead {
  background: var(--dash-table-header) !important;
}

.employee-tabs-card .dashboard-table thead {
  background: var(--bd-sidebar-active, var(--dash-active-bg)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.dashboard-table thead th {
  position: sticky;

  top: 0 !important;
  z-index: 2;

  background: var(--dash-table-header) !important;

  color: var(--dash-text) !important;

  font-size: 0.72rem !important;
  font-weight: 800 !important;

  text-transform: uppercase !important;

  padding: 0.85rem 1rem !important;

  border-top: 0 !important;
  border-bottom: 1px solid var(--dash-table-border) !important;

  box-shadow: none !important;
}

.employee-tabs-card .dashboard-table thead th {
  background: var(--bd-sidebar-active, var(--dash-active-bg)) !important;
  border-bottom-color: color-mix(in srgb, var(--bd-sidebar-border, var(--dash-border)) 78%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent) !important;
  color: var(--bd-sidebar-text, var(--dash-text)) !important;
}

/* body */
.dashboard-table tbody td,
.dashboard-table tbody th {
  padding: 0.75rem 1rem !important;

  font-size: 0.85rem !important;

  color: var(--dash-text) !important;

  vertical-align: middle !important;

  border-bottom: 1px solid var(--dash-table-border) !important;

  background: transparent !important;
}

/* hover */
.dashboard-table tbody tr:hover {
  background: var(--dash-table-hover) !important;
}

/* remove white line at top while scrolling */
.employee-tab-content {
  padding-top: 0 !important;

  overflow-y: auto !important;

  background: var(--dash-card-gradient) !important;
}

.employee-tab-content .tab-pane {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.employee-tab-content::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ----- Wall Of Fame ----- */
.wall-of-fame-card {
  display: flex !important;
  flex-direction: column !important;

  height: 560px !important;

  margin: 0 !important;
  /* remove auto alignment */
  width: 100% !important;

  align-self: stretch !important;
  overflow: hidden !important;
  width: 100% !important;

  /* highlighted like employee details */
  background: var(--dash-feature-gradient) !important;

  border: 1px solid var(--dash-feature-border) !important;
  box-shadow:
    var(--dash-feature-shadow),
    0 0 0 1px var(--dash-feature-inset) inset !important;
}

/* =========================================
   PERFECT ALIGNMENT FOR BOTH TOP CARDS
   ========================================= */

.dashboard-top-row {
  display: flex !important;
  align-items: stretch !important;
}

.dashboard-top-row>.col-lg-8,
.dashboard-top-row>.col-lg-4 {
  display: flex !important;
}

/* both cards same height */
.employee-tabs-card,
.wall-of-fame-card {
  height: 560px !important;
  min-height: 560px !important;
  max-height: 560px !important;

  width: 100% !important;
  margin: 0 !important;
}

/* remove internal bootstrap spacing issue */
.dashboard-top-row .col-lg-8>*,
.dashboard-top-row .col-lg-4>* {
  flex: 1 !important;
  width: 100% !important;
}

/* body should stretch correctly */
.employee-tabs-card .card-body,
.wall-of-fame-card .card-body {
  flex: 1 1 auto !important;
}

.wall-of-fame-header {
  align-items: center !important;
  border-radius: 16px 16px 0 0 !important;
  display: flex !important;
  flex-shrink: 0 !important;
  justify-content: space-between !important;
  min-height: 50px;

  padding: 0.78rem 1rem 0.35rem !important;

  background: transparent !important;

  border-bottom: 0 !important;

  backdrop-filter: none;
}

.wall-of-fame-header h5 {
  align-items: center !important;
  color: var(--dash-header-text) !important;
  display: flex !important;
  flex: 1;
  font-size: 1rem !important;
  font-weight: 700 !important;
  gap: 8px !important;
  margin: 0 !important;
}

.btn-add-fame {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  /* circular icon button */
  background: var(--dash-soft-accent-bg) !important;
  border: 1.5px solid rgba(34, 197, 90, .45) !important;
  color: #22c55e !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background .15s, border-color .15s !important;
  flex-shrink: 0;
}

.btn-add-fame i {
  color: inherit !important;
  margin: 0 !important;
  /* remove any Bootstrap mr-* spacing */
}

.btn-add-fame:hover {
  background: rgba(34, 197, 90, .28) !important;
  border-color: rgb(34 197 90) !important;
  color: rgb(34 197 90) !important;
  transform: translateY(-1px);
}

html.hrms-dark .btn-add-fame:hover,
body.hrms-dark .btn-add-fame:hover,
.dark .btn-add-fame:hover {
  background: rgb(34 197 90 .22) !important;
  border-color: rgb(34 197 90) !important;
  color: rgb(34 197 90) !important;
}

html.hrms-dark .btn-add-fame,
body.hrms-dark .btn-add-fame,
.dark .btn-add-fame {
  background: var(--dash-soft-accent-bg) !important;
  border-color: rgb(34 197 90) !important;
  color: rgb(34 197 90);
}

/* WALL OF FAME BODY */
.wall-of-fame-card .card-body,
.wall-of-fame-body {
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* LIST */
.wall-of-fame-list>* {
  width: 100%;
}

.wall-of-fame-list .card,
.wall-of-fame-list .employee-card,
.wall-of-fame-list .fame-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 14px;
  box-sizing: border-box;
  box-shadow: none !important;
}

/* EMPLOYEE CARD */
.wall-of-fame-list .fame-card-item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* custom scrollbar */
.wall-of-fame-card .card-body::-webkit-scrollbar {
  width: 6px !important;
}

.wall-of-fame-card .card-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.wall-of-fame-card .card-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      color-mix(in oklab, var(--dash-purple) 76%, var(--dash-panel)),
      color-mix(in oklab, var(--dash-teal) 76%, var(--dash-panel))) !important;

  border-radius: 999px !important;
}

.wall-of-fame-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 0.25rem 0.8rem 0.25rem 0.25rem !important;
}

.fame-card-item {
  align-items: center !important;

  background: linear-gradient(145deg,
      color-mix(in oklab, var(--dash-panel) 2%, transparent),
      color-mix(in oklab, var(--dash-violet) 3%, transparent)) !important;

  border: 1px solid var(--dash-feature-inset) !important;

  border-radius: 16px !important;

  color: var(--dash-text) !important;

  display: flex !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0.95rem 1rem !important;

  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease !important;
  width: 100% !important;
}

.fame-card-item:hover {
  transform: none !important;
  border-color: color-mix(in oklab, var(--dash-feature-border) 64%, transparent) !important;
  background: linear-gradient(145deg,
      color-mix(in oklab, var(--dash-panel) 2.5%, transparent),
      color-mix(in oklab, var(--dash-violet) 3.2%, transparent)) !important;
  box-shadow: none !important;
}

.fame-card-item img {
  border-radius: 50% !important;

  flex-shrink: 0 !important;

  height: 50px !important;
  width: 50px !important;

  object-fit: cover !important;

  box-shadow: none !important;
}

.fame-card-item .fame-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.fame-card-item .fame-info h6,
.employee-name {
  color: var(--dash-text) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}

.fame-card-item .fame-info small,
.employee-designation {
  color: var(--dash-muted) !important;
  display: block !important;
  font-size: 0.72rem !important;
  margin-bottom: 4px !important;
}

.fame-card-item .fame-title {
  color: rgb(34 197 90) !important;
  border: rgb(34 197 90) solid 1px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 0.1rem 0.6rem !important;
}

/* ----- Organization Analysis / Charts ----- */
.org-analysis-card {
  margin: 0 auto;
  max-width: 100%;
}

.org-analysis-card .card-header {
  align-items: center;
  border-radius: 16px 16px 0 0 !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px;
}

.org-analysis-card .card-header h5,
.evaluation-card .card-header h5,
.birthday-card-section .birthday-header h5 {
  color: var(--dash-header-text) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0;
}

.org-date-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}

.org-date-picker,
.month-select,
.form-control,
.form-select,
.custom-select,
.custom-dropdown-input input {
  background: var(--dash-input-bg) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  color: var(--dash-text) !important;
  transition: all 0.2s ease;
}

.org-date-picker {
  cursor: pointer;
  font-size: 0.75rem !important;
  min-width: 180px;
  padding: 0.3rem 2rem 0.3rem 0.8rem !important;
}

.form-control,
.form-select,
.custom-select {
  padding: -0.3rem 1.2rem !important;
}

.org-date-picker::placeholder,
.form-control::placeholder,
.custom-dropdown-input input::placeholder {
  color: var(--dash-soft) !important;
}

.org-date-icon,
.dropdown-arrow {
  color: var(--dash-teal) !important;
}

.org-date-icon {
  font-size: 0.8rem;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

html.hrms-dark .org-date-icon,
body.hrms-dark .org-date-icon,
.dark .org-date-icon {
  color: var(--dash-text) !important;
}

html.hrms-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.hrms-dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  cursor: pointer;
}

/* color-scheme:dark already renders the icon white — cancel the invert */
html.hrms-dark #appreciatedUserModalDialog input[type="date"]::-webkit-calendar-picker-indicator,
body.hrms-dark #appreciatedUserModalDialog input[type="date"]::-webkit-calendar-picker-indicator,
.dark #appreciatedUserModalDialog input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
}

.org-analysis-card .card-body {
  background: var(--dash-card-gradient) !important;
  border-radius: 0 0 16px 16px;
  padding: 0.75rem !important;
}

.org-analysis-card .row {
  margin-left: -0.25rem !important;
  margin-right: -0.25rem !important;
}

.org-analysis-card .col-lg-7,
.org-analysis-card .col-lg-5 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.chart-wrapper {
  background: var(--dash-feature-gradient) !important;

  border: 1px solid var(--dash-feature-border) !important;

  border-radius: 18px !important;

  margin-bottom: 0.5rem !important;
  padding: 0.8rem !important;

  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease !important;

  box-shadow:
    var(--dash-feature-shadow),
    0 0 0 1px var(--dash-feature-inset) inset !important;

  backdrop-filter: blur(8px);
}

.chart-wrapper:hover {
  transform: none !important;
  border-color: var(--dash-feature-border) !important;
  box-shadow: var(--dash-feature-shadow) !important;
}

.chart-wrapper canvas {
  max-height: 200px !important;
  width: 100% !important;
}

body.dashboard-body .user-dashboard-chart-shell {
  position: relative;
  width: 100%;
  min-height: 300px;
}

body.dashboard-body .user-dashboard-chart-shell canvas {
  display: block;
  width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
}

body.dashboard-body .user-dashboard-growth-body {
  min-height: 300px;
  gap: 10px;
}

body.dashboard-body .user-dashboard-growth-chart-row {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

body.dashboard-body .user-dashboard-growth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 180px;
  min-width: 0;
  min-height: 190px;
  margin-bottom: 0 !important;
  padding: 0.55rem !important;
}

body.dashboard-body .user-dashboard-growth-chart {
  width: 100%;
  min-width: 0;
  min-height: 170px;
}

body.dashboard-body .user-dashboard-growth-chart .apexcharts-canvas,
body.dashboard-body .user-dashboard-growth-chart svg {
  max-width: 100% !important;
}

body.dashboard-body .dash-eval-growth-row {
  align-items: stretch;
}

body.dashboard-body .dash-eval-growth-row > .col-lg-8,
body.dashboard-body .dash-eval-growth-row > .col-lg-4 {
  display: flex;
}

body.dashboard-body .dash-eval-growth-row .user-dashboard-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.dashboard-body .dash-eval-growth-row .dash-graph-body {
  flex: 1 1 auto;
}

#orgEvaluationChart,
#myChart {
  max-height: 400px !important;
  width: 100% !important;
}

.chart-title,
.org-analysis-card .chart-title {
  color: var(--dash-text) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.25rem !important;
}

.polar-chart-wrapper {
  min-height: 200px !important;
}

.polar-chart-wrapper canvas {
  max-height: 180px !important;
}

/* ----- Secondary Dashboard Sections ----- */
.drs-status-card {
  border-left: 5px solid var(--dash-purple) !important;
}

.drs-dates-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.totalDatesRounds {
  background: var(--dash-teal) !important;
  color: #061111 !important;
}

.notFilledRounds {
  background: var(--dash-pink) !important;
  color: #ffffff !important;
}


.irregular-text:empty {
  display: none !important;
}

html.hrms-dark .irregular-text,
body.hrms-dark .irregular-text,
.dark .irregular-text {
  background: none !important;
  border: none !important;
  color: var(--dash-pink) !important;
}

.evaluation-card .card-header {
  border-radius: 16px 16px 0 0 !important;
  padding: 1rem 1.25rem;
}

.growth-card {
  background: var(--dash-feature-gradient) !important;
  border-left: 3px solid var(--dash-purple);
}

.growth-label,
.sub-card-header h6 {
  color: var(--dash-text) !important;
  font-size: 0.9rem;
  font-weight: 800 !important;
  margin: 0;
}

.birthday-card-section .birthday-header,
.sub-card-header {
  border-radius: 16px 16px 0 0;
}

.sub-card {
  min-height: 280px;
}

.sub-card-header {
  background: var(--dash-header-gradient) !important;
}

.btn-primary,
.modal-footer .btn-primary {
  background: var(--dash-accent-gradient) !important;

  border: none !important;
  border-radius: 40px !important;


  color: var(--dash-primary-foreground) !important;
  font-weight: 700 !important;

  padding: 0.65rem 1.6rem !important;

  transition: none !important;
}

.btn-primary:hover,
.modal-footer .btn-primary:hover {
  background: var(--dash-accent-gradient) !important;

  transform: translateY(-1px) !important;
}

.modal-content {
  background: var(--dash-card-gradient) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 20px !important;
  color: var(--dash-text) !important;
  overflow: hidden;
}

#appreciatedUserModalDialog .modal-dialog {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  max-width: 720px !important;
  width: min(720px, calc(100vw - 32px)) !important;
}

#appreciatedUserModalDialog .modal-content {
  background: var(--dash-panel) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--dash-card-shadow) !important;
  max-height: calc(100vh - 88px) !important;
  width: 100% !important;
}

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

.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
  color: var(--dash-header-text) !important;
  font-weight: 700 !important;
}

.modal-header .close,
.modal-header .close span {
  color: var(--dash-header-text) !important;
  opacity: 0.85 !important;
}

.modal-body label {
  color: var(--dash-text) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.modal-footer {
  background: var(--dash-header-gradient) !important;
}

.modal-footer .btn-secondary {
  background: var(--dash-table-header) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
}

.requiredField {
  color: var(--dash-pink) !important;
}

#appreciatedUserModalDialog .modal-header {
  align-items: center !important;
  background: var(--dash-panel-2) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  min-height: 70px;
  padding: 1.4rem 1.5rem 1rem !important;
}

#appreciatedUserModalDialog .modal-title {
  align-items: center;
  color: var(--dash-text) !important;
  display: flex;
  font-size: 1.15rem !important;
  letter-spacing: 0;
}

#appreciatedUserModalDialog .close {
  color: var(--dash-muted) !important;
  font-size: 1.5rem;
  font-weight: 400;
  margin: -0.5rem -0.25rem -0.5rem auto;
  opacity: 1 !important;
  text-shadow: none !important;
}

#appreciatedUserModalDialog .close:hover {
  color: var(--dash-text) !important;
}

#appreciatedUserModalDialog .modal-body {
  /* overflow: visible so dropdown menus are never clipped.
     Scrollability is handled by Bootstrap's .modal overlay.  */
  overflow: visible !important;
  max-height: none !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
}

#appreciatedUserModalDialog .modal-body::-webkit-scrollbar {
  width: 6px;
}

#appreciatedUserModalDialog .modal-body::-webkit-scrollbar-track {
  background: transparent;
}

#appreciatedUserModalDialog .modal-body::-webkit-scrollbar-thumb {
  background: var(--dash-muted-scrollbar);
  border-radius: 999px;
}

#createNewAppreciationForm {
  display: grid;
  gap: 1.15rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#createNewAppreciationForm::before {
  border-bottom: 1px solid var(--dash-border);
  color: var(--dash-text);
  content: "Basic Information";
  font-size: 0.86rem;
  grid-column: 1 / -1;
  padding-bottom: 0.7rem;
}

#appreciatedUserModalDialog .form-group {
  margin-bottom: 0 !important;
}

#appreciatedUserModalDialog .form-group:nth-of-type(5) {
  grid-column: 1 / -1;
}

#appreciatedUserModalDialog .form-label {
  color: var(--dash-text) !important;
  display: block;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.45rem;
}

#appreciatedUserModalDialog .form-label i,
#appreciatedUserModalDialog .form-text i,
#appreciatedUserModalDialog .dropdown-search-header i,
#appreciatedUserModalDialog .modal-footer i {
  display: none !important;
}

#appreciatedUserModalDialog .dropdown-arrow {
  color: var(--dash-muted) !important;
  display: inline-flex !important;
  right: 14px;
}

#appreciatedUserModalDialog .form-label strong {
  font-weight: 500;
}

#appreciatedUserModalDialog .form-text {
  color: var(--dash-muted) !important;
  font-size: 0.72rem;
  margin-top: 0.45rem;
}

#appreciatedUserModalDialog .input-group {
  display: block;
}

#appreciatedUserModalDialog .form-control,
#appreciatedUserModalDialog .custom-dropdown-input,
#appreciatedUserModalDialog .custom-dropdown-input input {
  background: var(--dash-input-bg) !important;
  border-color: var(--dash-border) !important;
  border-radius: 15px !important;
  color: var(--dash-text) !important;
  font-size: 0.88rem !important;
}

#appreciatedUserModalDialog .form-control,
#appreciatedUserModalDialog .custom-dropdown-input input {
  min-height: 44px;
  padding: 0.72rem 0.85rem !important;
}

#appreciatedUserModalDialog textarea.form-control {
  min-height: 96px;
  resize: vertical;
}

#appreciatedUserModalDialog .appreciation-title-input {
  line-height: 1.45;
  min-height: 108px;
  padding-top: 0.85rem !important;
}

#appreciatedUserModalDialog .appreciation-title-input::placeholder {
  color: var(--dash-muted) !important;
  opacity: 0.85;
}

#appreciatedUserModalDialog .form-control:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

#appreciatedUserModalDialog .custom-dropdown-list {
  background: var(--dash-dropdown-bg) !important;
  border-color: var(--dash-border) !important;
  border-radius: 14px !important;
  margin-top: 4px;
}

#appreciatedUserModalDialog .dropdown-search-header {
  background: transparent !important;
  color: var(--dash-muted) !important;
  font-size: 0.60rem;
  padding: 0.75rem 0.9rem;
}

#appreciatedUserModalDialog .dropdown-items-wrapper {
  max-height: 220px;
}

#appreciatedUserModalDialog .dropdown-item-custom,
#appreciatedUserModalDialog .project-item-custom {
  padding: 0.75rem 0.9rem !important;
  height: 55px !important;
}

#appreciatedUserModalDialog .modal-footer {
  background: var(--dash-panel-2) !important;
  border-top: 1px solid var(--dash-border) !important;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem 1.35rem !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary {
  border-radius: 12px !important;
  min-width: 96px;
  padding: 0.62rem 1.15rem !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary[data-dismiss="modal"] {
  background: transparent !important;
  border: 1px solid var(--dash-border) !important;
  box-shadow: none !important;
  color: var(--dash-text) !important;
}

html.hrms-dark #appreciatedUserModalDialog .modal-content,
body.hrms-dark #appreciatedUserModalDialog .modal-content,
.dark #appreciatedUserModalDialog .modal-content,
html.hrms-dark #appreciatedUserModalDialog .modal-header,
body.hrms-dark #appreciatedUserModalDialog .modal-header,
.dark #appreciatedUserModalDialog .modal-header,
html.hrms-dark #appreciatedUserModalDialog .modal-footer,
body.hrms-dark #appreciatedUserModalDialog .modal-footer,
.dark #appreciatedUserModalDialog .modal-footer {
  background: var(--dash-panel) !important;
}

html.hrms-dark #appreciatedUserModalDialog .form-control,
html.hrms-dark #appreciatedUserModalDialog .custom-dropdown-input,
html.hrms-dark #appreciatedUserModalDialog .custom-dropdown-input input,
body.hrms-dark #appreciatedUserModalDialog .form-control,
body.hrms-dark #appreciatedUserModalDialog .custom-dropdown-input,
body.hrms-dark #appreciatedUserModalDialog .custom-dropdown-input input,
.dark #appreciatedUserModalDialog .form-control,
.dark #appreciatedUserModalDialog .custom-dropdown-input,
.dark #appreciatedUserModalDialog .custom-dropdown-input input {
  background: var(--dash-input-bg) !important;
  color-scheme: dark;
}

@media (max-width: 767.98px) {
  #createNewAppreciationForm {
    grid-template-columns: 1fr;
  }

  #appreciatedUserModalDialog .modal-body {
    max-height: calc(100vh - 210px);
  }
}

/* ----- Wall of Fame no-record state ----- */
.fame-no-record {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
  width: 100%;
}

.fame-no-record img {
  height: 130px;
  margin-bottom: 10px;
  object-fit: contain;
  opacity: 0.72;
  width: 130px;
}

.fame-no-record h6 {
  color: var(--dash-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* ----- Dark/Light no-record images ----- */
html.hrms-dark .leave-image-wrapper img[src*="no-record.png"],
body.hrms-dark .leave-image-wrapper img[src*="no-record.png"],
.dark .leave-image-wrapper img[src*="no-record.png"],
html.hrms-dark .fame-no-record img[src*="no-record.png"],
body.hrms-dark .fame-no-record img[src*="no-record.png"],
.dark .fame-no-record img[src*="no-record.png"],
html.hrms-dark .evaluation-no-record-img img[src*="no-record.png"],
body.hrms-dark .evaluation-no-record-img img[src*="no-record.png"],
.dark .evaluation-no-record-img img[src*="no-record.png"],
html.hrms-dark .wall-of-fame-inner-wrapper img[src*="no-record.png"],
body.hrms-dark .wall-of-fame-inner-wrapper img[src*="no-record.png"],
.dark .wall-of-fame-inner-wrapper img[src*="no-record.png"],
html.hrms-dark #archive_section img[src*="no-record.png"],
body.hrms-dark #archive_section img[src*="no-record.png"],
.dark #archive_section img[src*="no-record.png"] {
  content: url('/assets/images/background/no-record-dark.png') !important;
}

/* ----- Empty States / Scrollbars ----- */
.no-data-found,
.leave-image-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.no-data-found img,
.leave-image-wrapper img {
  margin-bottom: 15px;
  opacity: 0.65;
  width: 320px;
}

.no-data-found h4,
.leave-image-wrapper h3 {
  color: var(--dash-pink) !important;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.no-data-found p,
.leave-image-wrapper p,
.wall-of-fame-list .no-data-found p {
  color: var(--dash-muted) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

.wall-of-fame-list .no-data-found {
  background: transparent !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

.wall-of-fame-list .no-data-found i {
  color: var(--dash-purple) !important;
  display: block !important;
  font-size: 3rem !important;
  margin-bottom: 10px !important;
  opacity: 0.5 !important;
}

.employee-tab-content::-webkit-scrollbar,
.wall-of-fame-card .card-body::-webkit-scrollbar,
.dropdown-items-wrapper::-webkit-scrollbar {
  width: 6px !important;
}

.employee-tab-content::-webkit-scrollbar-track,
.wall-of-fame-card .card-body::-webkit-scrollbar-track,
.dropdown-items-wrapper::-webkit-scrollbar-track {
  background: var(--dash-scrollbar-track) !important;
}

.employee-tab-content::-webkit-scrollbar-thumb,
.wall-of-fame-card .card-body::-webkit-scrollbar-thumb,
.dropdown-items-wrapper::-webkit-scrollbar-thumb {
  background: var(--dash-teal) !important;
  border-radius: 999px !important;
}

/* ----- Custom Dropdowns ----- */
.custom-dropdown-container {
  position: relative;
  width: 100%;
}

.custom-dropdown-input,
.custom-dropdown-list,
.dropdown-menu {
  background: var(--dash-dropdown-bg) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
}

.custom-dropdown-input {
  border-radius: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.custom-dropdown-input input {
  border: none !important;
  outline: none;
  padding: 12px 40px 12px 16px !important;
  width: 100%;
}

.custom-dropdown-input .dropdown-arrow {
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.custom-dropdown-container.active .dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown-list {
  border-radius: 16px;
  box-shadow: var(--dash-card-shadow);
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1000;
}

.custom-dropdown-container.active .custom-dropdown-list {
  display: block;
}

.dropdown-search-header {
  background: var(--dash-table-header) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  color: var(--dash-purple) !important;
  font-weight: 600;
  padding: 12px 16px;
}

.dropdown-search-header i,
.custom-dropdown-input .dropdown-arrow,
.dropdown-item-custom .employee-avatar {
  display: none !important;
}

.dropdown-items-wrapper {
  max-height: 280px;
  overflow-y: auto;
}

.dropdown-item-custom,
.project-item-custom,
.dropdown-item {
  align-items: center;
  border-bottom: 1px solid var(--dash-table-border) !important;
  color: var(--dash-text) !important;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.dropdown-item-custom {
  gap: 0 !important;
  padding-left: 1rem !important;
}

.dropdown-item-custom:hover,
.project-item-custom:hover,
.dropdown-item:hover {
  background: var(--dash-hover-bg) !important;
  transform: translateX(4px);
}

.employee-avatar {
  align-items: center;
  background: var(--dash-accent-gradient) !important;
  border-radius: 50%;
  color: var(--dash-primary-foreground);
  display: flex;
  flex-shrink: 0;
  font-weight: bold;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.no-results {
  color: var(--dash-muted);
  padding: 30px 20px;
  text-align: center;
}

#project {
  cursor: pointer;
  transition: all 0.2s ease;
}

#project:hover {
  border-color: var(--dash-purple) !important;
  box-shadow: 0 2px 8px var(--dash-focus-ring);
}

/* ----- Calendar ----- */
.daterangepicker {
  background: var(--dash-calendar-surface) !important;
  border: 1px solid var(--dash-border) !important;
  box-shadow: var(--dash-calendar-shadow) !important;
  color: var(--dash-text) !important;
}

.daterangepicker:before {
  border-bottom-color: var(--dash-border) !important;
}

.daterangepicker:after {
  border-bottom-color: var(--dash-calendar-surface) !important;
}

.daterangepicker .calendar-table,
.daterangepicker .drp-buttons,
.daterangepicker .ranges,
.daterangepicker .ranges ul {
  background: var(--dash-calendar-surface) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--dash-muted) !important;
}

.daterangepicker th.month,
.daterangepicker .drp-selected {
  color: var(--dash-text) !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background: transparent !important;
  color: var(--dash-calendar-off) !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover {
  background: var(--dash-hover-bg) !important;
  color: var(--dash-text) !important;
}

.daterangepicker td.in-range {
  background: var(--dash-soft-accent-bg) !important;
  color: var(--dash-text) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date,
.daterangepicker .ranges li.active {
  background: var(--hrms-accent, #22c55e) !important;
  color: #fff !important;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  background: var(--dash-calendar-surface) !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
}

.daterangepicker .prev span,
.daterangepicker .next span {
  border-color: var(--dash-text) !important;
}

.daterangepicker .btn-primary,
.daterangepicker .applyBtn,
.daterangepicker .cancelBtn {
  min-width: 90px !important;
  height: 34px !important;
  font-size: 0.78rem !important;
  padding: 0 0.8rem !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
  font-weight: 600 !important;

}

.daterangepicker .btn-primary,
.daterangepicker .applyBtn {
  background: var(--hrms-accent, #22c55e) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.15s ease !important;
}

.daterangepicker .btn-primary:hover,
.daterangepicker .applyBtn:hover {
  background: var(--hrms-accent, #22c55e) !important;
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}


.daterangepicker .cancelBtn {
  background: transparent !important;
  border: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;

  border-radius: 10px !important;
  font-weight: 600 !important;
}

.daterangepicker .cancelBtn:hover {
  background: var(--dash-hover-bg) !important;
  border-color: var(--dash-violet) !important;
}

html.hrms-dark .daterangepicker,
body.hrms-dark .daterangepicker,
.dark .daterangepicker {
  background: var(--dash-calendar-surface) !important;
  box-shadow: var(--dash-calendar-shadow) !important;
}

html.hrms-dark .daterangepicker:after,
body.hrms-dark .daterangepicker:after,
.dark .daterangepicker:after {
  border-bottom-color: var(--dash-calendar-surface) !important;
}

html.hrms-dark .daterangepicker .calendar-table,
html.hrms-dark .daterangepicker .drp-buttons,
html.hrms-dark .daterangepicker .ranges,
html.hrms-dark .daterangepicker .ranges ul,
body.hrms-dark .daterangepicker .calendar-table,
body.hrms-dark .daterangepicker .drp-buttons,
body.hrms-dark .daterangepicker .ranges,
body.hrms-dark .daterangepicker .ranges ul,
.dark .daterangepicker .calendar-table,
.dark .daterangepicker .drp-buttons,
.dark .daterangepicker .ranges,
.dark .daterangepicker .ranges ul {
  background: var(--dash-calendar-surface) !important;
}

html.hrms-dark .daterangepicker td.off,
html.hrms-dark .daterangepicker td.off.in-range,
html.hrms-dark .daterangepicker td.off.start-date,
html.hrms-dark .daterangepicker td.off.end-date,
body.hrms-dark .daterangepicker td.off,
body.hrms-dark .daterangepicker td.off.in-range,
body.hrms-dark .daterangepicker td.off.start-date,
body.hrms-dark .daterangepicker td.off.end-date,
.dark .daterangepicker td.off,
.dark .daterangepicker td.off.in-range,
.dark .daterangepicker td.off.start-date,
.dark .daterangepicker td.off.end-date {
  color: var(--dash-calendar-off) !important;
}

html.hrms-dark .daterangepicker td.available:hover,
html.hrms-dark .daterangepicker th.available:hover,
html.hrms-dark .daterangepicker .ranges li:hover,
body.hrms-dark .daterangepicker td.available:hover,
body.hrms-dark .daterangepicker th.available:hover,
body.hrms-dark .daterangepicker .ranges li:hover,
.dark .daterangepicker td.available:hover,
.dark .daterangepicker th.available:hover,
.dark .daterangepicker .ranges li:hover {
  color: var(--dash-text) !important;
}

html.hrms-dark .daterangepicker td.in-range,
body.hrms-dark .daterangepicker td.in-range,
.dark .daterangepicker td.in-range {
  background: var(--dash-soft-accent-bg) !important;
  color: var(--dash-text) !important;
}

html.hrms-dark .daterangepicker td.active,
html.hrms-dark .daterangepicker td.active:hover,
html.hrms-dark .daterangepicker td.start-date,
html.hrms-dark .daterangepicker td.end-date,
html.hrms-dark .daterangepicker .ranges li.active,
body.hrms-dark .daterangepicker td.active,
body.hrms-dark .daterangepicker td.active:hover,
body.hrms-dark .daterangepicker td.start-date,
body.hrms-dark .daterangepicker td.end-date,
body.hrms-dark .daterangepicker .ranges li.active,
.dark .daterangepicker td.active,
.dark .daterangepicker td.active:hover,
.dark .daterangepicker td.start-date,
.dark .daterangepicker td.end-date,
.dark .daterangepicker .ranges li.active {
  background: var(--hrms-accent, #22c55e) !important;
  color: #fff !important;
}

html.hrms-dark .daterangepicker select.monthselect,
html.hrms-dark .daterangepicker select.yearselect,
html.hrms-dark .daterangepicker select.hourselect,
html.hrms-dark .daterangepicker select.minuteselect,
html.hrms-dark .daterangepicker select.secondselect,
html.hrms-dark .daterangepicker select.ampmselect,
body.hrms-dark .daterangepicker select.monthselect,
body.hrms-dark .daterangepicker select.yearselect,
body.hrms-dark .daterangepicker select.hourselect,
body.hrms-dark .daterangepicker select.minuteselect,
body.hrms-dark .daterangepicker select.secondselect,
body.hrms-dark .daterangepicker select.ampmselect,
.dark .daterangepicker select.monthselect,
.dark .daterangepicker select.yearselect,
.dark .daterangepicker select.hourselect,
.dark .daterangepicker select.minuteselect,
.dark .daterangepicker select.secondselect,
.dark .daterangepicker select.ampmselect {
  background: var(--dash-input-bg) !important;
}

html.hrms-dark .daterangepicker .cancelBtn,
body.hrms-dark .daterangepicker .cancelBtn,
.dark .daterangepicker .cancelBtn {
  background: var(--dash-table-header) !important;
}

/* ─────────────────────────────────────────────────────────
   DATERANGEPICKER — MOBILE RESPONSIVE (≤ 767px)
   Keeps natural absolute positioning (no bottom-sheet).
   Reduces size to fit the viewport:
   • Width constrained to screen width
   • Ranges stack ABOVE the calendar (not beside it)
   • Only ONE month shown (right calendar hidden)
   • Compact cells & footer
   ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── Constrain width to screen ── */
  .daterangepicker {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
  }

  .daterangepicker:before,
  .daterangepicker:after {
    display: none !important;
  }

  /* ── Preset ranges: 2-column grid above calendars ── */
  .daterangepicker .ranges {
    float: none !important;
    width: 100% !important;
    display: block !important;
    border-right: none !important;
    border-bottom: 1px solid var(--dash-border, #e2e8f0) !important;
  }

  .daterangepicker .ranges ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 8px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .daterangepicker .ranges li {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── BOTH calendars: stack vertically, full width each ── */
  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 4px 8px !important;
    border: none !important;
  }

  .daterangepicker .drp-calendar.right {
    border-top: 1px solid var(--dash-border, #e2e8f0) !important;
  }

  /* ── Full-width calendar tables ── */
  .daterangepicker .calendar-table {
    width: 100% !important;
  }

  .daterangepicker table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* ── Compact cells ── */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    font-size: 0.7rem !important;
    padding: 4px 2px !important;
    height: 28px !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 6px !important;
  }

  .daterangepicker th.month {
    font-size: 0.82rem !important;
  }

  /* ── Footer ── */
  .daterangepicker .drp-buttons {
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .daterangepicker .drp-selected {
    font-size: 0.65rem !important;
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  .daterangepicker .btn-primary,
  .daterangepicker .applyBtn,
  .daterangepicker .cancelBtn {
    height: 30px !important;
    min-width: 64px !important;
    font-size: 0.7rem !important;
    padding: 0 12px !important;
  }
}

/* ── Extra-small phones ── */
@media (max-width: 400px) {
  .daterangepicker {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }

  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    font-size: 0.63rem !important;
    padding: 3px 1px !important;
    height: 24px !important;
  }

  .daterangepicker .ranges li {
    font-size: 0.63rem !important;
    padding: 4px 6px !important;
  }
}

/* ----- Layout / Responsive ----- */
.col-lg-4 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.col-lg-4:last-child,
.row .col-lg-4 {
  padding-right: 1rem !important;
}

@media (min-width: 992px) {

  .row>.col-lg-8,
  .row>.col-lg-4 {
    padding-left: -0.25rem !important;
    padding-right: -0.25rem !important;
  }


 
}

@media (max-width: 1199px) {

  .employee-tabs-card,
  .wall-of-fame-card {
    min-height: 520px !important;
  }
}

@media (max-width: 991.98px) {
  .employee-tabs-card {
    height: 480px !important;
  }

  .wall-of-fame-card {
    min-height: 460px !important;
  }

  .greeting-card .greeting {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .fame-card-item {
    gap: 10px !important;
    padding: 0.7rem !important;
  }

  .fame-card-item img {
    height: 40px !important;
    width: 40px !important;
  }

  .fame-card-item .fame-info h6 {
    font-size: 0.85rem !important;
  }
}

@media (max-width: 575.98px) {
  .container-xxl {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .greeting-card .greeting {
    font-size: 1.2rem !important;
  }

  .dashboard-tabs .nav-link {
    font-size: 0.68rem !important;
    padding: 0.58rem 0.2rem !important;
  }

  .dashboard-tabs .nav-link i {
    display: none !important;
  }

  .dashboard-table thead th {
    font-size: 0.6rem !important;
    padding: 0.5rem 0.4rem !important;
  }

  .dashboard-table tbody td {
    font-size: 0.7rem !important;
    padding: 0.45rem 0.4rem !important;
  }
}

/* =====================================================
   APPRECIATED USER MODAL - FIXED LAYOUT
   ===================================================== */

#appreciatedUserModalDialog .modal-dialog {
  max-width: 760px !important;
  width: min(760px, calc(100vw - 32px)) !important;
}

#appreciatedUserModalDialog .modal-content {
  background: var(--dash-panel) !important;
  border: 1px solid color-mix(in oklab, var(--dash-border) 88%, var(--dash-purple)) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--dash-card-shadow),
    inset 0 1px 0 color-mix(in oklab, white 7%, transparent) !important;
  max-height: calc(100vh - 64px) !important;
  overflow: visible;
}

/* ---------- HEADER ---------- */

#appreciatedUserModalDialog .modal-header {
  align-items: center !important;
  background: var(--dash-panel-2) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--dash-border) 82%, transparent) !important;
  min-height: 76px !important;
  padding: 1.45rem 1.45rem !important;
}

#appreciatedUserModalDialog .modal-title {
  color: var(--dash-header-text) !important;
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

#appreciatedUserModalDialog .close {
  color: var(--dash-header-text) !important;
  font-size: 1.8rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
  text-shadow: none !important;
}

/* ---------- BODY ---------- */

#appreciatedUserModalDialog .modal-body {
  background: var(--dash-panel) !important;
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto;
  padding: 1.65rem 1.45rem 1.35rem !important;
}

/* ---------- FORM GRID ---------- */

#createNewAppreciationForm {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.15rem 1rem !important;
  width: 100%;
}

#createNewAppreciationForm::before {
  content: "Basic Information";
  grid-column: 1 / -1;
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid color-mix(in oklab, var(--dash-border) 82%, transparent);
  color: var(--dash-text);
}

/* textarea full width */

#createNewAppreciationForm .form-group:last-child {
  grid-column: 1 / -1;
}

/* ---------- LABELS ---------- */

#appreciatedUserModalDialog label,
#appreciatedUserModalDialog .form-label {
  display: block;
  margin-bottom: 0.5rem !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--dash-text) !important;
}

/* ---------- INPUTS ---------- */

#appreciatedUserModalDialog .form-control,
#appreciatedUserModalDialog .custom-dropdown-input,
#appreciatedUserModalDialog .custom-dropdown-input input,
#appreciatedUserModalDialog .form-select {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;

  padding: 0.68rem 0.65rem !important;

  border-radius: 14px !important;
  border: 1px solid color-mix(in oklab, var(--dash-border) 88%, transparent) !important;

  color: var(--dash-text) !important;

  font-size: 0.9rem !important;
  text-align: left !important;

  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white 3%, transparent) !important;
}

#appreciatedUserModalDialog .form-control::placeholder,
#appreciatedUserModalDialog .custom-dropdown-input input::placeholder {
  color: var(--dash-muted) !important;
  opacity: 0.85;
  text-align: left !important;
}

#appreciatedUserModalDialog .form-control:focus,
#appreciatedUserModalDialog .custom-dropdown-container.active .custom-dropdown-input,
#appreciatedUserModalDialog .custom-dropdown-input:focus-within {
  border-color: color-mix(in oklab, #22c55e 78%, var(--dash-border)) !important;
}

/* ---------- TEXTAREA ---------- */

#appreciatedUserModalDialog textarea.form-control,
#appreciatedUserModalDialog .appreciation-title-input {
  min-height: 120px !important;
  height: 120px !important;

  resize: none !important;

  padding: 0.8rem 0.65rem !important;
  line-height: 1.5 !important;
}

/* ---------- DROPDOWN ---------- */

#appreciatedUserModalDialog .custom-dropdown-container {
  width: 100% !important;
  position: relative;
}

#appreciatedUserModalDialog .custom-dropdown-input {
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
  padding: 0 !important;
}

#appreciatedUserModalDialog .custom-dropdown-input input {
  border: none !important;
  background: var(--dash-panel) !important;
  color: var(--dash-text) !important;
  height: 100% !important;
  padding-left: 0.65rem !important;
  padding-right: 2.35rem !important;
}

#appreciatedUserModalDialog .dropdown-search-header {
  display: none !important;
}

#appreciatedUserModalDialog .dropdown-item-custom,
#appreciatedUserModalDialog .project-item-custom {
  gap: 0 !important;
  justify-content: flex-start !important;
  padding: 0.68rem 0.65rem !important;
  text-align: left !important;
}

#appreciatedUserModalDialog .employee-info,
#appreciatedUserModalDialog .employee-name,
#appreciatedUserModalDialog .employee-designation {
  margin-left: 0 !important;
  text-align: left !important;
}

#appreciatedUserModalDialog .dropdown-item-custom:hover,
#appreciatedUserModalDialog .project-item-custom:hover {
  transform: translateX(1px) !important;
}

#appreciatedUserModalDialog .dropdown-arrow {
  color: var(--dash-muted) !important;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- DATE FIELD ---------- */

#appreciatedUserModalDialog input[type="date"] {
  padding-right: 0.8rem !important;
}

/* ---------- FOOTER ---------- */

#appreciatedUserModalDialog .modal-footer {
  background: var(--dash-panel-2) !important;
  border-top: 1px solid color-mix(in oklab, var(--dash-border) 82%, transparent) !important;
  gap: 1rem !important;
  justify-content: flex-end !important;
  padding: 1.25rem 1.45rem !important;
}

#appreciatedUserModalDialog .btn {
  min-width: 100px;
  height: 42px;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background-color 120ms ease !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary:not([data-dismiss]) {
  background: var(--dash-purple) !important;
  border: 0 !important;
  color: var(--dash-primary-foreground) !important;
  min-width: 96px;
  box-shadow: none !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary[data-dismiss],
#appreciatedUserModalDialog .modal-footer .btn-secondary,
#appreciatedUserModalDialog .modal-footer .closeBtn {
  background: transparent !important;
  border: 1px solid color-mix(in oklab, var(--dash-border) 88%, transparent) !important;
  color: var(--dash-text) !important;
  min-width: 96px;
  box-shadow: none !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary:hover,
#appreciatedUserModalDialog .modal-footer .btn-primary:focus {
  filter: none !important;
  transform: translateY(-0.25px) !important;
  box-shadow: none !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary:not([data-dismiss]):hover {
  background: var(--dash-purple) !important;
}

#appreciatedUserModalDialog .modal-footer .btn-primary[data-dismiss]:hover {
  background: color-mix(in oklab, var(--dash-text) 4%, transparent) !important;
  border-color: color-mix(in oklab, var(--dash-border) 96%, transparent) !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {
  #createNewAppreciationForm {
    grid-template-columns: 1fr !important;
  }

  #createNewAppreciationForm .form-group:last-child {
    grid-column: auto;
  }
}

/* ------------------------------------------------------
   1. PREVENT DATA FROM SHOWING THROUGH TABLE HEADER
   ------------------------------------------------------ */
.dashboard-table thead th {
  /* Solid, opaque background – no transparency */
  background: var(--dash-table-header) !important;
  /* Ensure header stays above scrolling content */
  z-index: 10 !important;
  /* Remove any possible backdrop blur or transparency */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Override the special rule for employee-tabs-card header */
.employee-tabs-card .dashboard-table thead th {
  background: var(--bd-sidebar-active, var(--dash-table-header)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Solid fallback colour if gradient is used */
  background-color: var(--dash-panel) !important;
}

/* If your header still uses a gradient, replace it with solid colour */
.dashboard-table thead tr,
.employee-tabs-card .dashboard-table thead tr {
  background: var(--dash-table-header) !important;
}

/* ------------------------------------------------------
   2. HIDE SCROLLBARS BUT KEEP SCROLLING FUNCTIONAL
   ------------------------------------------------------ */
/* For webkit browsers (Chrome, Edge, Safari) */
.employee-tab-content::-webkit-scrollbar,
.wall-of-fame-card .card-body::-webkit-scrollbar,
.dropdown-items-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* For Firefox */
.employee-tab-content,
.wall-of-fame-card .card-body,
.dropdown-items-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Also hide scrollbar on the main table wrapper if needed */
#serverEmployeeTable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
  display: none !important;
}

/* =====================================================
   SOLID BUTTONS (Save / Apply) – color: #84cc16
   ===================================================== */

/* Solid colour for primary buttons & DateRangePicker Apply button */
.btn-primary,
.modal-footer .btn-primary,
.daterangepicker .applyBtn,
#appreciatedUserModalDialog .modal-footer .btn-primary:not([data-dismiss]) {
  background: #22c55e !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #020202 !important;
  font-weight: 700 !important;
  transition: none !important;
  box-shadow: none !important;
}

/* Hover – solid, slightly darker, no transition */
.btn-primary:hover,
.modal-footer .btn-primary:hover,
.daterangepicker .applyBtn:hover,
#appreciatedUserModalDialog .modal-footer .btn-primary:not([data-dismiss]):hover {
  background: rgb(5, 255, 92) !important;
  /* slightly darker #84cc16 */
  transform: none !important;
  box-shadow: none !important;
}

/* Remove gradient & glass effect from Didn't Come & Irregular Employee tables */
#absent-employees .dashboard-table thead,
#irregular-employees .dashboard-table thead,
#absentEmps thead,
#irregularEmps thead,
.employee-tabs-card #absent-employees .dashboard-table thead th,
.employee-tabs-card #irregular-employees .dashboard-table thead th,
.employee-tabs-card #absentEmps thead th,
.employee-tabs-card #irregularEmps thead th {
  background: var(--dash-table-header) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
  border-bottom: 1px solid var(--dash-table-border) !important;
}

/* ------------------------------------------------------
   FIX NESTED TAB-CONTENT FOR STICKY HEADERS
   ------------------------------------------------------ */

/* Make the inner tab-content non‑scrollable – let the outer one scroll */
.employee-tab-content .employee-tab-content {
  overflow: visible !important;
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
}

/* Ensure the outer tab-content handles scrolling */
.employee-tab-content {
  overflow-y: auto !important;
}

/* Force sticky headers inside the inner container (they will stick to the outer scroll parent) */
.employee-tab-content .dashboard-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: var(--dash-table-header) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Extra specificity for the two problematic tabs */
#absent-employees .dashboard-table thead th,
#irregular-employees .dashboard-table thead th {
  position: sticky !important;
  top: 0 !important;
  background: var(--dash-table-header) !important;
}

/* =====================================================
   Skeleton Loading — shimmer placeholders
   ===================================================== */
@keyframes dash-shimmer {
  0% {
    background-position: -600px 0;
  }

  100% {
    background-position: 600px 0;
  }
}

.dash-skel-line,
.dash-skel-avatar,
.dash-skel-circle,
.dash-skel-block {
  animation: dash-shimmer 1.5s ease infinite;
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--dash-border) 35%, var(--dash-panel-2)) 25%,
      color-mix(in oklab, var(--dash-border) 65%, var(--dash-panel-2)) 50%,
      color-mix(in oklab, var(--dash-border) 35%, var(--dash-panel-2)) 75%);
  background-size: 1200px 100%;
  border-radius: 6px;
  display: block;
}

html.hrms-dark .dash-skel-line,
html.hrms-dark .dash-skel-avatar,
html.hrms-dark .dash-skel-circle,
html.hrms-dark .dash-skel-block {
  background: linear-gradient(90deg,
      oklch(0.22 0.01 255) 25%,
      oklch(0.28 0.01 255) 50%,
      oklch(0.22 0.01 255) 75%);
  background-size: 1200px 100%;
}

.dash-skel-line {
  height: 14px;
  margin-bottom: 10px;
  width: 100%;
}

.dash-skel-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 44px;
  width: 44px;
}

.dash-skel-circle {
  border-radius: 50%;
  display: inline-block;
  height: 30px;
  margin: 3px;
  width: 30px;
}

.dash-skel-fame-card {
  align-items: center;
  border-bottom: 1px solid var(--dash-border);
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.dash-skel-row td {
  padding: 10px 12px !important;
  border: none !important;
}

.dash-skel-row .dash-skel-line {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════
   KPI OVERVIEW SECTION
   ═══════════════════════════════════════════ */

/* Filter bar */
.kpi-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi-filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi-select {
  background: var(--dash-input-bg, var(--dash-card-gradient));
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  color: var(--dash-text);
  font-size: 0.8125rem;
  font-weight: 500;
  height: 34px;
  min-width: 150px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kpi-select-sm {
  height: 28px;
  font-size: 0.75rem;
  padding: 0 8px;
}

.kpi-input {
  background: var(--dash-input-bg, var(--dash-card-gradient));
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  color: var(--dash-text);
  font-size: 0.8125rem;
  font-weight: 500;
  height: 34px;
  padding: 0 10px 0 32px;
  outline: none;
  width: 200px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.kpi-dr-wrap {
  position: relative;
}

/* COMMON DATERANGE — THEME-ADAPTIVE GLOBAL OVERRIDE
   Remap --cdr-* tokens to dashboard theme vars for light/dark auto-adapt. */
body.dashboard-body .common-daterange {
  --cdr-input-bg: var(--dash-input-bg, #fff);
  --cdr-input-border: var(--dash-border, #e2e8f0);
  --cdr-input-text: var(--dash-text, #111);
  --cdr-input-muted: var(--dash-muted, #6b7280);
  --cdr-focus: var(--hrms-accent, #22c55e);
}

/* Icon: always use theme green, including open state */
body.dashboard-body .common-daterange-icon,
body.dashboard-body .common-daterange.is-open .common-daterange-icon {
  color: var(--hrms-accent, #22c55e) !important;
}

/* kpiDateRange — common-daterange sizing to match old kpi-input */
.kpi-dr-wrap .common-daterange {
  width: auto;
}

.kpi-dr-wrap .common-daterange-input.common-daterange-input {
  width: 200px !important;
  height: 34px !important;
  min-height: unset !important;
  padding: 0 10px 0 30px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

.kpi-dr-wrap .common-daterange-icon {
  font-size: 0.75rem !important;
  left: 10px !important;
}

.kpi-dr-wrap .common-daterange.is-open .common-daterange-input.common-daterange-input {
  background: var(--dash-input-bg, var(--dash-card-gradient)) !important;
  border-color: var(--dash-border) !important;
  box-shadow: none !important;
}

/* org-date fromDate — common-daterange inside .org-date-wrapper */
.org-date-wrapper .common-daterange {
  width: auto;
}

.org-date-wrapper .common-daterange-input.common-daterange-input {
  cursor: pointer !important;
  font-size: 0.75rem !important;
  min-width: 180px !important;
  min-height: unset !important;
  padding: 0.3rem 0.8rem 0.3rem 1.8rem !important;
  border-radius: 12px !important;
}

.org-date-wrapper .common-daterange-icon {
  left: 8px !important;
  font-size: 0.75rem !important;
}

.kpi-refresh-btn {
  background: var(--dash-card-gradient);
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  color: var(--dash-muted);
  cursor: pointer;
  font-size: 0.8rem;
  height: 34px;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.kpi-refresh-btn:hover {
  color: var(--dash-purple, #8b5cf6);
  border-color: var(--dash-purple, #8b5cf6);
}

/* 6-card stats row */
.kpi-cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .kpi-cards-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 5 stat cards remain after holidays removed — auto-fit fills full width */
@media (min-width: 1024px) {
  .kpi-cards-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

.kpi-stat-card {
  background: var(--dash-card-gradient);
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  box-shadow: var(--dash-card-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.kpi-stat-card:hover {
  box-shadow: var(--dash-card-shadow);
  transform: none;
}

.kpi-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.kpi-stat-body {
  min-width: 0;
}

.kpi-stat-num {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--dash-text);
  line-height: 1.1;
}

.kpi-stat-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dash-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-stat-sub {
  font-size: 0.65rem;
  color: var(--dash-muted);
  margin-top: 1px;
  opacity: 0.75;
}

/* Holiday year nav */
.kpi-year-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.kpi-yr-btn {
  background: none;
  border: none;
  color: var(--dash-muted);
  cursor: pointer;
  font-size: 0.6rem;
  padding: 1px 3px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s;
}

.kpi-yr-btn:hover {
  color: var(--dash-text);
}

.kpi-yr-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dash-muted);
}

/* Color variants for icons */
.kpi-blue  { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.kpi-red   { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.kpi-green { background: rgba(34, 197, 94, 0.12);  color: #22c55e; }
.kpi-orange{ background: rgba(249, 115, 22, 0.12); color: #f97316; }
.kpi-purple{ background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.kpi-teal  { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
/* Detail row */
.kpi-detail-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .kpi-detail-row {
    grid-template-columns: 2fr 1fr 2fr;
  }
}

.kpi-detail-card {
  background: var(--dash-card-gradient) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--dash-card-shadow) !important;
}

.kpi-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dash-text);
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px !important;
  background: var(--dash-header-gradient) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  border-radius: 13px 13px 0 0;
}

.kpi-att-sel {
  display: flex;
  gap: 6px;
}

/* Attendance body */
.kpi-att-body {
  padding: 16px !important;
}

.kpi-att-metrics {
  display: flex;
  align-items: center;
  gap: 0;
}

.kpi-att-metric {
  flex: 1;
  text-align: center;
}

.kpi-att-sep {
  width: 1px;
  height: 40px;
  background: var(--dash-border);
  flex-shrink: 0;
}

.kpi-att-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dash-text);
  line-height: 1.1;
}

.kpi-att-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--dash-muted);
  margin-top: 2px;
}

.kpi-att-bar-track {
  background: color-mix(in oklab, var(--dash-border) 60%, transparent);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

.kpi-att-bar-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 99px;
  height: 100%;
  transition: width 0.6s ease;
}

/* Workforce body */
.kpi-wf-body {
  padding: 16px !important;
}

.kpi-wf-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kpi-wf-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.kpi-wf-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dash-text);
  line-height: 1.1;
}

.kpi-wf-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dash-muted);
}

/* Projects body */
.kpi-proj-body {
  padding: 14px 16px !important;
}

.kpi-proj-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kpi-proj-sep {
  height: 1px;
  background: var(--dash-border);
  margin: 10px 0;
}

.kpi-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kpi-chip {
  background: color-mix(in oklab, var(--kpi-chip-color, #6b7280) 12%, var(--dash-card-gradient));
  border: 1px solid color-mix(in oklab, var(--kpi-chip-color, #6b7280) 30%, transparent);
  border-radius: 6px;
  color: var(--kpi-chip-color, #6b7280);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  white-space: nowrap;
}

.kpi-chip b {
  font-weight: 800;
}

.kpi-total-chip {
  background: color-mix(in oklab, var(--dash-purple, #8b5cf6) 12%, var(--dash-card-gradient));
  border: 1px solid color-mix(in oklab, var(--dash-purple, #8b5cf6) 30%, transparent);
  border-radius: 99px;
  color: var(--dash-purple, #8b5cf6);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 9px;
}

.kpi-no-data {
  font-size: 0.75rem;
  color: var(--dash-muted);
}

/* =====================================================
   Compact Greeting Card v2
   ===================================================== */
body.dashboard-body .dash-greeting-card {
  border-radius: 14px !important;
  border: 1px solid var(--hrms-border) !important;
  background: var(--hrms-card) !important;
  box-shadow: var(--hrms-shadow) !important;
  overflow: visible !important;
  position: relative !important;
}

body.dashboard-body .dash-greeting-card::before {
  display: none !important;
}

body.dashboard-body .dash-greeting-body {
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.dashboard-body .dash-greet-skel {
  width: 100%;
}

body.dashboard-body .dash-greet-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

body.dashboard-body .dash-greet-left {
  flex: 1;
  min-width: 0;
}

body.dashboard-body .dash-greet-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.dashboard-body .dash-greet-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--hrms-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  background: none !important;
}


body.dashboard-body .dash-greet-quote {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-size: 0.78rem !important;
  font-style: italic !important;
  color: var(--hrms-muted) !important;
  line-height: 1.45 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.dashboard-body .dash-greet-quote::before,
body.dashboard-body .dash-greet-quote::after {
  display: none !important;
}

body.dashboard-body .dash-greet-right {
  flex-shrink: 0;
}

body.dashboard-body .dash-date-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 20px;
  border-radius: 12px;
  min-width: 78px;
  text-align: center;
  background: color-mix(in srgb, var(--hrms-primary) 8%, var(--hrms-card));
  border: 1px solid color-mix(in srgb, var(--hrms-primary) 18%, transparent);
}

body.dashboard-body .dash-date-day {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hrms-primary);
  display: block;
}

body.dashboard-body .dash-date-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hrms-text);
  display: block;
  margin: 1px 0;
}

body.dashboard-body .dash-date-month {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--hrms-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

@media (max-width: 575.98px) {
  body.dashboard-body .dash-greet-right {
    display: none;
  }

  body.dashboard-body .dash-greeting-body {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================
   FLAT THEME OVERRIDE
   Remaps --dash-* gradient tokens to solid --hrms-* values
   scoped to body.dashboard-body so all existing var()
   references automatically resolve to flat colours.
   Matches notification/sidemenu design exactly.
   ===================================================== */

/* ----- Light mode token remapping ----- */
html:not(.hrms-dark) body.dashboard-body {
  --db-page:        #ffffff;
  --db-card:        #ffffff;
  --db-card-raised: #f8fafc;
  --db-border:      #dde2ea;
  --db-text:        var(--hrms-text, #111111);
  --db-muted:       var(--hrms-muted, #6B7280);
  --db-hover-bg:    rgba(17, 24, 39, 0.04);
  --db-shadow:      0 1px 3px rgba(0,0,0,0.07), 0 1px 8px rgba(0,0,0,0.04);
  --db-shadow-hover:0 2px 8px rgba(0,0,0,0.10);
  --bday-card-band: #fdf0ea;
  --anniv-card-band: #eeeeff;
  --bday-pill-bg: #fff7ed;
  --anniv-pill-bg: #eef2ff;

  --dash-bg: #edf0f5;
  --dash-bg-deep: #edf0f5;
  --dash-panel: #ffffff;
  --dash-panel-2: #f0f3f8;
  --dash-border: #dde2ea;
  --dash-text: var(--hrms-text, #111111);
  --dash-muted: var(--hrms-muted, #6B7280);
  --dash-card-gradient: #ffffff;
  --dash-header-gradient: #f0f3f8;
  --dash-feature-gradient: #ffffff;
  --dash-feature-header-gradient: #f0f3f8;
  --dash-feature-border: #dde2ea;
  --dash-feature-border-strong: #cdd4df;
  --dash-feature-inset: transparent;
  --dash-feature-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  --dash-feature-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10);
  --dash-table-header: #f0f3f8;
  --dash-table-border: #dde2ea;
  --dash-input-bg: #ffffff;
  --dash-dropdown-bg: #ffffff;
  --dash-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 8px rgba(0, 0, 0, 0.04);
  --dash-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10);
  /* Accent — buttons, chips, highlights */
  --dash-accent-gradient: var(--hrms-accent, #6b7194);
  --dash-soft-accent-bg: var(--hrms-accent-soft, color-mix(in srgb, #6b7194 11%, transparent));
  --dash-soft-accent-border: var(--hrms-accent-border, color-mix(in srgb, #6b7194 32%, transparent));
  --dash-soft-accent-text: var(--hrms-accent, #6b7194);
  --dash-primary-foreground: var(--hrms-accent-fg, #ffffff);
}

/* ----- Dark mode token remapping ----- */
html.hrms-dark body.dashboard-body {
  --db-page: #0d1018;
  --db-card: #171c28;
  --db-card-raised: #1e2535;
  --db-border:      rgba(255,255,255,0.08);
  --db-text:        var(--hrms-text, #DDDDDD);
  --db-muted:       var(--hrms-muted, #888888);
  --db-hover-bg:    rgba(255,255,255,0.05);
  --db-shadow:      0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --db-shadow-hover:0 4px 16px rgba(0,0,0,0.5);
  --bday-card-band: #2b211e;
  --anniv-card-band: #23233a;
  --bday-pill-bg: #fff7ed;
  --anniv-pill-bg: #eef2ff;

  --dash-bg: #0d1018;
  --dash-bg-deep: #0d1018;
  --dash-panel: #171c28;
  --dash-panel-2: #1e2535;
  --dash-border: rgba(255, 255, 255, 0.08);
  --dash-text: var(--hrms-text, #DDDDDD);
  --dash-muted: var(--hrms-muted, #888888);
  --dash-card-gradient: #171c28;
  --dash-header-gradient: #1e2535;
  --dash-feature-gradient: #171c28;
  --dash-feature-header-gradient: #1e2535;
  --dash-feature-border: rgba(255, 255, 255, 0.08);
  --dash-feature-border-strong: rgba(255, 255, 255, 0.13);
  --dash-feature-inset: rgba(255, 255, 255, 0.03);
  --dash-feature-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --dash-feature-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
  --dash-table-header: #1e2535;
  --dash-table-border: rgba(255, 255, 255, 0.07);
  --dash-table-hover: rgba(255, 255, 255, 0.04);
  --dash-input-bg: #1e2535;
  --dash-dropdown-bg: #171c28;
  --dash-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --dash-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
  /* Accent — buttons, chips, highlights */
  --dash-accent-gradient: var(--hrms-accent, #9498b4);
  --dash-soft-accent-bg: var(--hrms-accent-soft, color-mix(in srgb, #9498b4 13%, transparent));
  --dash-soft-accent-border: var(--hrms-accent-border, color-mix(in srgb, #9498b4 32%, transparent));
  --dash-soft-accent-text: var(--hrms-accent, #9498b4);
  --dash-primary-foreground: var(--hrms-accent-fg, #ffffff);
  --dash-hover-bg: rgba(255, 255, 255, 0.05);
  --dash-active-bg: rgba(255, 255, 255, 0.06);
  --dash-active-border: rgba(255, 255, 255, 0.12);
  --dash-scrollbar-track: rgba(255, 255, 255, 0.04);
}

/* ── Page background ───────────────────────────────────────────────── */
body.dashboard-body,
body.dashboard-body .app,
body.dashboard-body .app-wrapper,
body.dashboard-body .app-content,
body.dashboard-body .container-xl,
body.dashboard-body .container-p-y {
  background: var(--db-page) !important;
}

/* ── Cards — elevated above page ──────────────────────────────────── */
body.dashboard-body .card,
body.dashboard-body .kpi-stat-card,
body.dashboard-body .kpi-detail-card,
body.dashboard-body .drs-status-card,
body.dashboard-body .employee-tabs-card,
body.dashboard-body .wall-of-fame-card,
body.dashboard-body .org-analysis-card,
body.dashboard-body .evaluation-card,
body.dashboard-body .remaining-eval-card,
body.dashboard-body .birthday-card-section,
body.dashboard-body .sub-card,
body.dashboard-body .employee-tab-content {
  background: var(--db-card) !important;
  border-color: var(--db-border) !important;
}

body.dashboard-body .card:hover {
  box-shadow: var(--db-shadow) !important;
}

/* ── Card headers — raised surface within card ─────────────────────── */
body.dashboard-body .employee-tabs-header,
body.dashboard-body .wall-of-fame-header,
body.dashboard-body .org-analysis-card .card-header,
body.dashboard-body .evaluation-card .card-header,
body.dashboard-body .birthday-card-section .birthday-header,
body.dashboard-body .kpi-detail-header,
body.dashboard-body .sub-card-header,
body.dashboard-body .remaining-eval-card .card-header,
body.dashboard-body .modal-header,
body.dashboard-body .modal-footer {
  border-color: var(--db-border) !important;
}

/* org-analysis card body */
body.dashboard-body .org-analysis-card .card-body {
  background: var(--db-card) !important;
}

/* Happy Corner */
body.dashboard-body .birthday-card-section > .card-body {
  padding: 14px 18px 18px !important;
}

body.dashboard-body .birthday-card-section .row {
  align-items: stretch;
}

body.dashboard-body .birthday-card-section .sub-card {
  overflow: hidden;
  border-radius: 8px !important;
}

body.dashboard-body .birthday-card-section .sub-card-header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px !important;
}

body.dashboard-body .birthday-card-section .sub-card-header h6 {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}

body.dashboard-body .dash-bday-view-toggle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card);
}

body.dashboard-body .dash-bday-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--db-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

body.dashboard-body .dash-bday-view-btn.is-active {
  background: var(--dash-soft-accent-bg);
  color: var(--dash-soft-accent-text);
}

body.dashboard-body .bday-today-wrapper,
body.dashboard-body .upcoming-bday-wrapper {
  min-height: 310px;
  max-height: 360px;
  overflow: auto;
}

body.dashboard-body .bday-today-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px !important;
  overflow-y: hidden;
}

body.dashboard-body .bday-today-wrapper.is-list-view {
  display: block;
}

body.dashboard-body .bday-today-wrapper.is-list-view.is-empty {
  display: flex;
}

body.dashboard-body .dash-bday-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: stretch;
  justify-content: center;
  min-height: 220px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--db-border) transparent;
}

body.dashboard-body .bday-today-wrapper.has-bday-scroll .dash-bday-grid {
  justify-content: flex-start;
}

body.dashboard-body .dash-bday-grid::-webkit-scrollbar {
  display: block !important;
  height: 6px;
}

body.dashboard-body .dash-bday-grid::-webkit-scrollbar-track {
  background: transparent;
}

body.dashboard-body .dash-bday-grid::-webkit-scrollbar-thumb {
  background: var(--db-border);
  border-radius: 999px;
}

body.dashboard-body .dash-bday-today-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

body.dashboard-body .dash-bday-today-row {
  display: grid;
  grid-template-columns: 30px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card-raised);
}

body.dashboard-body .dash-bday-list-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--db-border);
  background: var(--db-card);
}

body.dashboard-body .dash-bday-list-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.dashboard-body .dash-bday-list-name,
body.dashboard-body .dash-bday-list-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dashboard-body .dash-bday-list-name {
  color: var(--db-text);
  font-weight: 800;
}

body.dashboard-body .dash-bday-list-meta {
  color: var(--db-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

body.dashboard-body .dash-bday-person {
  position: relative;
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 210px;
  max-width: 260px;
  min-height: 190px;
  padding: 0;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  background: var(--db-card-raised);
  box-shadow: none;
  overflow: hidden;
  scroll-snap-align: start;
}

body.dashboard-body .dash-bday-card-band {
  position: relative;
  height: 64px;
  background: var(--bday-card-band);
}

body.dashboard-body .dash-bday-anniversary .dash-bday-card-band {
  background: var(--anniv-card-band);
}

body.dashboard-body .dash-bday-card-band .dash-bday-type {
  position: absolute;
  top: 9px;
  right: 10px;
  margin: 0;
}

body.dashboard-body .dash-bday-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 126px;
  padding: 30px 13px 13px;
  text-align: center;
}

body.dashboard-body .dash-bday-avatar-wrap {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--db-card-raised);
  overflow: hidden;
}

body.dashboard-body .birthday-emps {
  display: block;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  background: var(--db-card);
  border: 1px solid var(--db-border);
}

body.dashboard-body .dash-bday-event-icon {
  position: absolute;
  right: -2px;
  bottom: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--db-card);
  border: 1px solid var(--db-border);
}

body.dashboard-body .dash-bday-event-icon img,
body.dashboard-body .dash-upcoming-icon img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

body.dashboard-body .dash-bday-copy {
  min-width: 0;
}

body.dashboard-body .dash-bday-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid currentColor;
}

body.dashboard-body .dash-bday-type img {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

body.dashboard-body .dash-bday-birthday .dash-bday-type {
  background: var(--bday-pill-bg);
  color: #92400e;
}

body.dashboard-body .dash-bday-anniversary .dash-bday-type {
  background: var(--anniv-pill-bg);
  color: #3730a3;
}

html.hrms-dark body.dashboard-body .dash-bday-birthday .dash-bday-type {
  color: #f97316;
}

html.hrms-dark body.dashboard-body .dash-bday-anniversary .dash-bday-type {
  color: #818cf8;
}

body.dashboard-body .dash-bday-copy p,
body.dashboard-body .dash-bday-copy small {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dashboard-body .dash-bday-copy p:first-of-type {
  margin-bottom: 4px;
  color: var(--db-text);
}

body.dashboard-body .dash-bday-copy p:nth-of-type(2),
body.dashboard-body .dash-bday-copy small {
  color: var(--db-muted) !important;
  font-size: 0.78rem;
  font-weight: 600 !important;
}

body.dashboard-body .upcoming-bday-wrapper {
  padding: 12px 14px !important;
}

body.dashboard-body .dash-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

body.dashboard-body .dash-upcoming-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--db-text);
}

body.dashboard-body .dash-upcoming-row:hover {
  background: var(--db-hover-bg);
}

body.dashboard-body .dash-upcoming-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--db-card-raised);
  border: 1px solid var(--db-border);
}

body.dashboard-body .dash-upcoming-name,
body.dashboard-body .dash-upcoming-date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dashboard-body .dash-upcoming-name {
  font-weight: 700;
}

body.dashboard-body .dash-upcoming-date {
  color: var(--db-muted);
  font-weight: 700;
}

body.dashboard-body .birthday-empty-state {
  min-height: 260px;
  width: 100%;
  padding: 18px;
  text-align: center;
}

body.dashboard-body .birthday-empty-state img {
  max-width: 112px;
  padding-top: 0 !important;
}

body.dashboard-body .birthday-empty-state h3 {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--db-muted);
}

/* Chart wrappers — slightly inset from card */
body.dashboard-body .chart-wrapper {
  border-color: var(--db-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Growth card */
body.dashboard-body .growth-card {
  background: var(--db-card) !important;
}

/* Wall of fame item cards */
body.dashboard-body .fame-card-item {
  background: var(--db-card-raised) !important;
  border-color: var(--db-border) !important;
  box-shadow: none !important;
}

body.dashboard-body .fame-card-item:hover {
  border-color: var(--db-border) !important;
  box-shadow: none !important;
}

/* Modal content */
body.dashboard-body .modal-content,
body.dashboard-body #appreciatedUserModalDialog .modal-content {
  background: var(--db-card) !important;
  border-color: var(--db-border) !important;
}

/* Dropdown input fix in dark mode */
html.hrms-dark body.dashboard-body #appreciatedUserModalDialog .custom-dropdown-input input {
  background: var(--db-card-raised) !important;
}

/* Greeting card — no decorative pseudo-element */
body.dashboard-body .greeting-card::before,
body.dashboard-body .dash-greeting-card::before {
  display: none !important;
}

/* ── Header Greeting Zone ────────────────────────────────────────── */
#dash-header-greet {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin-left: 10px;
}

.dhg-greet {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hrms-text, #111111);
  white-space: nowrap;
  flex-shrink: 0;
}

.dhg-sep {
  font-size: 0.75rem;
  color: var(--hrms-muted, #6B7280);
  opacity: 0.6;
  flex-shrink: 0;
}

.dhg-quote {
  font-size: 1rem;
  font-style: italic;
  color: var(--hrms-muted, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.dhg-quote::before {
  content: '\201C';
  margin-right: 1px;
}

.dhg-quote::after {
  content: '\201D';
  margin-left: 1px;
}

/* Irregular chip — see header-responsive.css for full styling */

html.hrms-dark .dhg-greet {
  color: var(--hrms-text, #DDDDDD);
}

html.hrms-dark .dhg-quote,
html.hrms-dark .dhg-sep {
  color: var(--hrms-muted, #888888);
}

/* Hide quote + separator on small screens */
@media (max-width: 576px) {

  .dhg-sep,
  .dhg-quote {
    display: none;
  }
}

/* ── KPI Overview Card ───────────────────────────────────────────── */
body.dashboard-body .kpi-overview-card {
  border-radius: 12px !important;
  overflow: visible;
}

body.dashboard-body .kpi-overview-header {
  background: var(--dash-header-gradient);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--db-border) !important;
}

.kpi-overview-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dash-text);
  display: flex;
  align-items: center;
}

.kpi-overview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.dashboard-body .kpi-overview-body {
  padding: 14px 16px 16px;
}

body.dashboard-body .kpi-overview-body .kpi-cards-row {
  gap: 10px;
  margin-bottom: 14px !important;
  /* minmax(0,1fr) prevents grid tracks from expanding beyond container width */
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* KPI stat tiles inside overview body */
body.dashboard-body .kpi-overview-body .kpi-stat-card {
  border-color: var(--db-border) !important;
  box-shadow: none !important;
  padding: 12px 14px;
  min-width: 0; /* allow grid item to shrink below its content size */
}

/* KPI detail cards inside overview body */
body.dashboard-body .kpi-overview-body .kpi-detail-card {
  background: var(--db-card-raised) !important;
  border-color: var(--db-border) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

body.dashboard-body .kpi-overview-body .kpi-detail-header {
  background: var(--dash-header-gradient) !important;
  border-color: var(--db-border) !important;
}

body.dashboard-body .kpi-detail-row {
  gap: 10px;
}

/* KPI selects and inputs */
body.dashboard-body .kpi-select,
body.dashboard-body .kpi-input {
  background: var(--db-card) !important;
  border-color: var(--db-border) !important;
  color: var(--dash-text, inherit) !important;
  transition: none !important;
}

body.dashboard-body .kpi-select:focus {
  border-color: var(--hrms-accent, #22c55e) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hrms-accent, #22c55e) 14%, transparent) !important;
}

/* ── Employee Tab Pills ───────────────────────────────────────────── */

/* Title + pills on same row, pills pushed right */
body.dashboard-body .employee-tabs-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 8px;
}

body.dashboard-body .etabs-title-row {
  margin-bottom: 0 !important;
  flex: none;
}

.employee-tabs-heading {
  padding-bottom: 0 !important;
}

/* Reset old dashboard-tabs styles for the new pill nav */
body.dashboard-body .etabs-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  margin-left: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* Pill base */
body.dashboard-body .etab-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 13px !important;
  border-radius: 20px !important;
  border: 1.5px solid !important;
  border-bottom: 1.5px solid !important;
  font-size: 0.775rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: none !important;
  white-space: nowrap;
  flex: none !important;
  line-height: 1.4 !important;
  background: transparent;
}

/* Status dot */
body.dashboard-body .etab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.5;
}

body.dashboard-body .etab-pill.active .etab-dot {
  opacity: 1;
}

/* On Leave — blue */
body.dashboard-body .etab-pill.etab-blue {
  color: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
  background: rgba(59, 130, 246, 0.07) !important;
}

body.dashboard-body .etab-pill.etab-blue.active,
body.dashboard-body .etab-pill.etab-blue:hover {
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
  background: rgba(59, 130, 246, 0.13) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-blue {
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  background: rgba(96, 165, 250, 0.08) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-blue.active,
html.hrms-dark body.dashboard-body .etab-pill.etab-blue:hover {
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  background: rgba(96, 165, 250, 0.15) !important;
}

/* Didn't Come — orange */
body.dashboard-body .etab-pill.etab-orange {
  color: #ea6c10 !important;
  border-color: rgba(249, 115, 22, 0.28) !important;
  background: rgba(249, 115, 22, 0.07) !important;
}

body.dashboard-body .etab-pill.etab-orange.active,
body.dashboard-body .etab-pill.etab-orange:hover {
  color: #c2540a !important;
  border-color: rgba(249, 115, 22, 0.55) !important;
  background: rgba(249, 115, 22, 0.13) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-orange {
  color: #fb923c !important;
  border-color: rgba(251, 146, 60, 0.25) !important;
  background: rgba(251, 146, 60, 0.08) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-orange.active,
html.hrms-dark body.dashboard-body .etab-pill.etab-orange:hover {
  color: #fdba74 !important;
  border-color: rgba(251, 146, 60, 0.5) !important;
  background: rgba(251, 146, 60, 0.15) !important;
}

/* Irregular — amber */
body.dashboard-body .etab-pill.etab-amber {
  color: #b45309 !important;
  border-color: rgba(217, 119, 6, 0.28) !important;
  background: rgba(217, 119, 6, 0.07) !important;
}

body.dashboard-body .etab-pill.etab-amber.active,
body.dashboard-body .etab-pill.etab-amber:hover {
  color: #92400e !important;
  border-color: rgba(217, 119, 6, 0.55) !important;
  background: rgba(217, 119, 6, 0.13) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-amber {
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}

html.hrms-dark body.dashboard-body .etab-pill.etab-amber.active,
html.hrms-dark body.dashboard-body .etab-pill.etab-amber:hover {
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  background: rgba(251, 191, 36, 0.15) !important;
}

/* ── Leave / No-data wrapper ────────────────────────────────────────── */
body.dashboard-body .leave-image-wrapper {
  background: transparent !important;
  padding: 28px 16px !important;
}

body.dashboard-body .leave-image-wrapper img {
  width: min(55%, 180px) !important;
  max-width: 180px !important;
  opacity: 0.5 !important;
  margin-bottom: 10px !important;
}

body.dashboard-body .leave-image-wrapper h3 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--dash-muted) !important;
  margin-bottom: 0 !important;
}

/* ── Wall of Fame no-record ─────────────────────────────────────────── */
body.dashboard-body .wall-of-fame-list .fame-no-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 106px 16px;
  text-align: center;
}

body.dashboard-body .wall-of-fame-list .fame-no-record img {
  width: min(60%, 160px);
  opacity: 0.45;
  margin-bottom: 10px;
}

body.dashboard-body .wall-of-fame-list .fame-no-record h6 {
  font-size: 0.825rem;
  color: var(--dash-muted) !important;
  margin: 0;
}

/* ── Ensure html background matches body on dashboard ───────────────── */
html:not(.hrms-dark):has(body.dashboard-body) {
  background: #edf0f5 !important;
}

html.hrms-dark:has(body.dashboard-body) {
  background: #0d1018 !important;
}

/* Also cover container-p-x explicitly ─────────────────────────────── */
body.dashboard-body .container-p-x {
  background: var(--db-page) !important;
}

/* =====================================================
   DASHBOARD UNIVERSAL FIXES – OVERVIEW PADDING
   ===================================================== */

/* Fix overview section padding (KPI area + surrounding columns) */
.kpi-overview-card,
.kpi-overview-body {
  padding: 0 !important;
  /* remove conflicting inner padding */
}

.kpi-overview-body {
  padding: 1rem 1.25rem 1.25rem !important;
  /* add consistent spacing */
}

/* Ensure the main row inside overview gets proper gutters */
.kpi-overview-body .row,
.kpi-detail-row {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}

.kpi-overview-body [class*="col-"] {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* 3. Unify card backgrounds (remove any leftover gradient / blur / transparency) */
body.dashboard-body .card,
body.dashboard-body .kpi-stat-card,
body.dashboard-body .kpi-detail-card,
body.dashboard-body .drs-status-card,
body.dashboard-body .employee-tabs-card,
body.dashboard-body .wall-of-fame-card,
body.dashboard-body .org-analysis-card,
body.dashboard-body .evaluation-card,
body.dashboard-body .remaining-eval-card,
body.dashboard-body .sub-card,
body.dashboard-body .chart-wrapper,
body.dashboard-body .fame-card-item,
body.dashboard-body .growth-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  background-image: none !important;
  box-shadow: var(--db-shadow, 0 1px 3px rgba(0, 0, 0, 0.07)) !important;
}

/* 4. Card headers – solid raised surface, no gradients */
body.dashboard-body .employee-tabs-header,
body.dashboard-body .wall-of-fame-header,
body.dashboard-body .org-analysis-card .card-header,
body.dashboard-body .evaluation-card .card-header,
body.dashboard-body .kpi-detail-header,
body.dashboard-body .sub-card-header,
body.dashboard-body .modal-header,
body.dashboard-body .modal-footer {
  background-image: none !important;
  backdrop-filter: none !important;
}

/* 5. Remove any remaining pseudo‑element decorations (greeting glow etc) */
.greeting-card::before,
.dash-greeting-card::before,
.card::before,
.card::after {
  display: none !important;
}

/* 6. Chart wrappers – flat, no inset shadow, no blur */
body.dashboard-body .chart-wrapper {
  box-shadow: none !important;
  border: 1px solid var(--db-border, #dde2ea) !important;
  backdrop-filter: none !important;
  background: var(--db-card-raised, #f0f3f8) !important;
}

/* 7. Force solid backgrounds for all table headers (prevent transparency) */
.dashboard-table thead th,
.employee-tabs-card .dashboard-table thead th,
#absent-employees .dashboard-table thead th,
#irregular-employees .dashboard-table thead th {
  background: var(--db-card-raised, #f0f3f8) !important;
  backdrop-filter: none !important;
  background-image: none !important;
}

.employee-tabs-card .dashboard-table thead,
.employee-tabs-card .dashboard-table thead tr,
.employee-tabs-card .dashboard-table thead th,
.employee-tabs-card .dashboard-table thead th:first-child,
.employee-tabs-card .dashboard-table thead th:last-child,
#irregular-employees,
#irregularEmps,
#irregularEmps thead,
#irregularEmps thead tr,
#irregularEmps thead th,
#irregularEmps thead th:first-child,
#irregularEmps thead th:last-child {
  border-radius: 0 !important;
}

#irregularEmps {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 8. Fix modal background and dropdown inputs (unify with flat theme) */
.modal-content,
#appreciatedUserModalDialog .modal-content {
  background: var(--db-card, #ffffff) !important;
}

#appreciatedUserModalDialog .custom-dropdown-input input,
#appreciatedUserModalDialog .form-control {
  background: var(--db-card, #ffffff) !important;
}

/* 9. Wall of Fame – no‑record image opacity & spacing */
.wall-of-fame-list .fame-no-record img {
  opacity: 0.55 !important;
}

.wall-of-fame-list .fame-no-record h6 {
  color: var(--dash-muted, #6B7280) !important;
}

/* 10. Employee leaves / empty state – remove extra backgrounds */
.leave-image-wrapper,
.no-data-found {
  background: transparent !important;
}

/* 11. Dark mode specific overrides (keep everything flat) */
html.hrms-dark body.dashboard-body .card,
html.hrms-dark body.dashboard-body .kpi-stat-card,
html.hrms-dark body.dashboard-body .kpi-detail-card,
html.hrms-dark body.dashboard-body .chart-wrapper,
html.hrms-dark body.dashboard-body .fame-card-item {
  background: var(--db-card, #171c28) !important;
  box-shadow: var(--db-shadow, 0 1px 3px rgba(0, 0, 0, 0.4)) !important;
}

html.hrms-dark body.dashboard-body .dashboard-table thead th {
  background: var(--db-card-raised, #1e2535) !important;
}

html.hrms-dark body.dashboard-body #appreciatedUserModalDialog .custom-dropdown-input input,
html.hrms-dark body.dashboard-body #appreciatedUserModalDialog .form-control {
  background: var(--db-card-raised, #1e2535) !important;
}

/* =====================================================
   FINAL BACKGROUND & LINE FIXES
   ===================================================== */

/* 1. Force solid backgrounds for Overview & KPI area */
.kpi-overview-card,

.kpi-overview-body,
.kpi-cards-row,
.kpi-detail-row,
.kpi-stat-card,
.kpi-detail-card {
  background: var(--db-card, #ffffff) !important;
  backdrop-filter: none !important;
  background-image: none !important;
}

/* 2. Wall of Fame – flat background, no gradients */
.wall-of-fame-card,
.wall-of-fame-body,
.wall-of-fame-list,
.fame-card-item {
  background: var(--db-card, #ffffff) !important;
  backdrop-filter: none !important;
  background-image: none !important;
  border-color: var(--db-border, #dde2ea) !important;
}

/* 3. Remove extra line after "No Result Found" in Employee Details */
.employee-tab-content .no-data-found,
.employee-tab-content .leave-image-wrapper {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove border from the last row of any table inside employee tabs */
.employee-tab-content .dashboard-table tbody tr:last-child td,
.employee-tab-content .dashboard-table tbody tr:last-child th {
  border-bottom: none !important;
}

/* If there is an <hr> after no-result message */
.employee-tab-content .no-data-found+hr,
.employee-tab-content .leave-image-wrapper+hr {
  display: none !important;
}

/* Also remove any bottom border from the containing card body */
.employee-tabs-card .card-body,
.employee-tab-content {
  border-bottom: none !important;
}

/* 4. Ensure the entire dashboard body uses ONE background (no white flashes) */
body.dashboard-body,
body.dashboard-body .app,
body.dashboard-body .app-wrapper,
body.dashboard-body .app-content,
body.dashboard-body .container-xl,
body.dashboard-body .layout-page,
body.dashboard-body .content-wrapper {
  background: var(--db-page, #ffffff) !important;
}

/* Dark mode overrides */
html.hrms-dark body.dashboard-body .kpi-overview-card,
html.hrms-dark body.dashboard-body .kpi-stat-card,
html.hrms-dark body.dashboard-body .kpi-detail-card,
html.hrms-dark body.dashboard-body .wall-of-fame-card,
html.hrms-dark body.dashboard-body .fame-card-item {
  background: var(--db-card, #171c28) !important;
}

html.hrms-dark body.dashboard-body .employee-tab-content .dashboard-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Remove Projects card: two-column layout (Attendance + Workforce) */
.kpi-detail-row {
  grid-template-columns: 2fr 1fr !important;
  /* was 2fr 1fr 2fr → now two columns */
}

@media (min-width: 768px) {
  .kpi-detail-row {
    grid-template-columns: 2fr 1fr !important;
  }
}

/* Align By Type section inside Workforce card */
.kpi-wf-body .kpi-proj-sep {
  background: var(--db-border, #dde2ea);
  margin: 12px 0 8px 0;
}

.kpi-wf-body .kpi-proj-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kpi-wf-body .kpi-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* =====================================================
   IMPROVED ATTENDANCE CARD LAYOUT
   ===================================================== */

/* 1. Attendance card – better internal spacing */
.kpi-att-body {
  padding: 1.25rem 1rem 1rem 1rem !important;
}

/* Metrics row – better alignment and breathing */
.kpi-att-metrics {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.kpi-att-metric {
  flex: 1;
  text-align: center;
  background: var(--db-card-raised, #f8fafc);
  border-radius: 1rem;
  padding: 0.75rem 0.25rem;
  transition: all 0.2s ease;
}

/* subtle hover effect */
.kpi-att-metric:hover {
  background: color-mix(in srgb, var(--hrms-accent, #22c55e) 6%, var(--db-card-raised, #f8fafc));
}

/* numbers */
.kpi-att-num {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

/* labels */
.kpi-att-lbl {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dash-muted);
}

/* colored numbers */
.kpi-green-text {
  color: #22c55e !important;
}

.kpi-red-text {
  color: #ef4444 !important;
}

/* attendance bar */
.kpi-att-bar-track {
  background: color-mix(in srgb, var(--db-border) 60%, transparent);
  border-radius: 999px;
  height: 8px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.kpi-att-bar-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  height: 100%;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* 2. Remove separator lines – cleaner look */
.kpi-att-sep {
  display: none !important;
}

/* 3. Make the attendance card header more compact */
.kpi-detail-header {
  padding: 0.75rem 1rem !important;
}

.kpi-detail-header span i {
  font-size: 0.9rem;
  margin-right: 0.5rem;
  color: var(--hrms-accent, #22c55e);
}

/* 4. Improve month/year dropdowns inside attendance */
.kpi-att-sel {
  gap: 0.5rem;
}

.kpi-select-sm {
  background: var(--db-card, #ffffff) !important;
  border-radius: 20px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.kpi-select-sm:hover {
  border-color: var(--hrms-accent, #22c55e);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 5. Dark mode adjustments */
html.hrms-dark .kpi-att-metric {
  background: var(--db-card-raised, #1e2535);
}

html.hrms-dark .kpi-select-sm {
  background: var(--db-card-raised, #1e2535) !important;
  border-color: var(--db-border);
  color: var(--dash-text);
}

/* =====================================================
   DASHBOARD — COMPREHENSIVE RESPONSIVE STYLES
   Breakpoints: 1199 / 991 / 767 / 575
   ===================================================== */

@media (max-width: 1366px) and (min-width: 1024px) {
  body.dashboard-body .kpi-overview-body .kpi-stat-card {
    padding: 10px 8px !important;
    gap: 8px !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-num {
    font-size: 1.15rem !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-lbl {
    font-size: 0.62rem !important;
  }
}

/* ── ≤ 1199px — Large tablet / small laptop ─────────── */
@media (max-width: 1199.98px) {
  .kpi-stat-num {
    font-size: 1.25rem;
  }

  .employee-tabs-card,
  .wall-of-fame-card {
    min-height: 500px !important;
    max-height: 500px !important;
    height: 500px !important;
  }
}

/* ── ≤ 991px — Tablet: cards stack, release fixed heights ── */
@media (max-width: 991.98px) {

  /* Let the Bootstrap col-lg-* stack naturally */
  .dashboard-top-row {
    display: block !important;
    align-items: unset !important;
  }

  .dashboard-top-row>.col-lg-8,
  .dashboard-top-row>.col-lg-4 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Release the fixed heights so cards size to content */
  .employee-tabs-card,
  .wall-of-fame-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Employee tab content: constrain with scroll instead of fixed card height */
  .employee-tab-content {
    max-height: 420px !important;
  }

  /* Wall of fame body: max scroll height */
  .wall-of-fame-body,
  .wall-of-fame-card .card-body {
    max-height: 360px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  .wall-of-fame-card .card-body::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
  }

  /* KPI detail row: single column below lg */
  .kpi-detail-row {
    grid-template-columns: 1fr !important;
  }

  /* Org analysis: ensure chart wrappers don't overflow */
  .org-analysis-card .chart-wrapper canvas,
  #orgEvaluationChart {
    max-height: 260px !important;
  }

  #myChart {
    max-height: 220px !important;
  }

  /* Evaluation + growth cards: equal spacing when stacked */
  .evaluation-card,
  .growth-card {
    margin-bottom: 12px;
  }

  /* Birthday sub-cards: add gap when stacked */
  .birthday-card-section .col-lg-8,
  .birthday-card-section .col-lg-4 {
    margin-bottom: 12px;
  }

  /* KPI stat card numbers */
  .kpi-stat-num {
    font-size: 1.15rem;
  }

  .kpi-att-num {
    font-size: 1.35rem !important;
  }

  .kpi-wf-num {
    font-size: 1.2rem;
  }
}

/* ── ≤ 767px — Large phone / mobile landscape ─────────── */
@media (max-width: 767.98px) {

  /* Page padding */
  .app-content {
    padding: 0.75rem !important;
  }

  /* KPI Overview header: title + controls wrap */
  .kpi-overview-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .kpi-overview-controls {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .mc-select-wrap {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .kpi-dr-wrap {
    flex: 1 1 auto;
  }

  .kpi-select {
    width: 100%;
    min-width: 0;
  }

  .kpi-input {
    width: 100% !important;
  }

  /* KPI detail row: stays single column */
  .kpi-detail-row {
    grid-template-columns: 1fr !important;
  }

  /* Attendance metrics: tighter numbers */
  .kpi-att-num {
    font-size: 1.2rem !important;
  }

  .kpi-stat-num {
    font-size: 1.1rem;
  }

  /* Make tables horizontally scrollable */
  .employee-tab-content {
    overflow-x: auto !important;
  }

  .dashboard-table {
    min-width: 480px;
  }

  /* DRS dates: wrap tightly */
  .drs-dates-wrapper {
    gap: 6px;
  }

  /* Org analysis charts */
  #orgEvaluationChart {
    max-height: 220px !important;
  }

  #myChart {
    max-height: 180px !important;
  }

  /* Evaluation chart (non-admin) */
  #evaluationChart {
    max-height: 260px !important;
  }

  /* Birthday section */
  .sub-card {
    min-height: 180px;
  }

  /* Employee tab pills: wrap is fine but tighten spacing */
  .etabs-nav {
    gap: 6px !important;
  }

  body.dashboard-body .etab-pill {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
  }

  /* Wall of fame body cap */
  .wall-of-fame-body,
  .wall-of-fame-card .card-body {
    max-height: 320px !important;
  }

  /* Org date picker: reduce width to fit */
  .org-date-picker {
    min-width: 130px;
  }

  /* KPI overview body */
  .kpi-overview-body {
    padding: 10px 12px !important;
  }

  /* ── KPI stat cards: 2-column grid, vertical centered layout ── */
  body.dashboard-body .kpi-overview-body .kpi-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px 10px !important;
    gap: 8px !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.95rem !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-num {
    font-size: 1.5rem !important;
    text-align: center !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-lbl {
    font-size: 0.68rem !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }

  /* Last card spans full width for a balanced 2+2+1 layout */
  body.dashboard-body .kpi-overview-body .kpi-stat-card:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    text-align: left !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-card:last-child .kpi-stat-body {
    align-items: flex-start !important;
    width: auto !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-card:last-child .kpi-stat-num,
  body.dashboard-body .kpi-overview-body .kpi-stat-card:last-child .kpi-stat-lbl {
    text-align: left !important;
  }

  /* DRS card: allow title + dates to wrap */
  .drs-status-card .card-body>.d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* ── ≤ 575px — Small phones ───────────────────────────── */
@media (max-width: 575.98px) {

  /* Page padding: minimal */
  .app-content.pt-3 {
    padding: 0.5rem !important;
  }

  /* KPI overview: stack controls fully */
  .kpi-overview-controls {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .mc-select-wrap,
  .kpi-dr-wrap {
    width: 100% !important;
  }

  /* KPI stat cards: tighter on small phones */
  body.dashboard-body .kpi-overview-body .kpi-stat-card {
    padding: 12px 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.82rem !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-num {
    font-size: 1.3rem !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-lbl {
    font-size: 0.62rem !important;
  }

  body.dashboard-body .kpi-overview-body .kpi-stat-card:last-child {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* KPI attendance card: reduce */
  .kpi-att-num {
    font-size: 1.1rem !important;
  }

  .kpi-att-metric {
    padding: 0.6rem 0.2rem;
  }

  /* KPI detail cards: border radius */
  .kpi-detail-card {
    border-radius: 10px !important;
  }

  /* Employee tabs: show icon-less pills, very small text */
  body.dashboard-body .etab-pill i {
    display: none !important;
  }

  body.dashboard-body .etab-pill {
    padding: 4px 8px !important;
    font-size: 0.68rem !important;
    gap: 4px !important;
  }

  .etab-dot {
    width: 6px !important;
    height: 6px !important;
  }

  /* Tables: smaller cells */
  .dashboard-table {
    min-width: 400px;
  }

  .dashboard-table thead th {
    font-size: 0.6rem !important;
    padding: 0.5rem 0.5rem !important;
  }

  .dashboard-table tbody td {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.5rem !important;
  }

  /* Employee tab content: limit scroll area */
  .employee-tab-content {
    max-height: 360px !important;
  }

  /* Wall of fame */
  .wall-of-fame-body,
  .wall-of-fame-card .card-body {
    max-height: 280px !important;
  }

  .fame-card-item {
    padding: 0.65rem 0.75rem !important;
    gap: 8px !important;
  }

  .fame-card-item img {
    width: 38px !important;
    height: 38px !important;
  }

  /* Org analysis */
  #orgEvaluationChart {
    max-height: 180px !important;
  }

  #myChart {
    max-height: 150px !important;
  }

  #evaluationChart {
    max-height: 220px !important;
  }

  .chart-wrapper canvas {
    max-height: 160px !important;
  }

  /* Cards: tighter border radius everywhere */
  .card,
  .org-analysis-card,
  .employee-tabs-card,
  .wall-of-fame-card,
  .birthday-card-section,
  .drs-status-card,
  .evaluation-card,
  .remaining-eval-card {
    border-radius: 10px !important;
  }

  /* Card headers */
  .employee-tabs-header,
  .wall-of-fame-header,
  .org-analysis-card .card-header,
  .evaluation-card .card-header,
  .birthday-card-section .birthday-header,
  .kpi-detail-header,
  .sub-card-header {
    border-radius: 10px 10px 0 0 !important;
    padding: 0.65rem 0.85rem !important;
  }

  /* Section headings inside cards */
  .org-analysis-card .card-header h5,
  .evaluation-card .card-header h5,
  .birthday-card-section .birthday-header h5,
  .wall-of-fame-header h5,
  .employee-tabs-heading,
  .drs-status-card .card-title,
  .remaining-eval-card .card-header h5 {
    font-size: 0.85rem !important;
  }

  /* Org date picker: narrow */
  .org-date-picker {
    font-size: 0.68rem !important;
    min-width: 0;
    width: 100%;
  }

  .org-date-wrapper {
    width: 100%;
  }

  .org-analysis-card .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Month select (non-admin evaluation) */
  .month-select {
    width: 100% !important;
  }

  .evaluation-card .card-header {
    justify-content: flex-start !important;
  }

  /* DRS rounds: smaller circles */
  .totalDatesRounds,
  .notFilledRounds {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.6rem !important;
    line-height: 26px !important;
  }

  /* Birthday: sub card */
  .sub-card {
    min-height: 160px;
  }

  /* KPI overview body padding */
  .kpi-overview-body {
    padding: 8px !important;
  }

  /* Remove left/right padding from container on smallest screens */
  .container-p-x {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Skeleton loading smaller */
  .dash-skel-avatar {
    width: 36px !important;
    height: 36px !important;
  }
}

/* =====================================================
   KPI COMMON-DROPDOWN SIZING
   ===================================================== */

/* Org selector — matches old kpi-select compact look */
.kpi-org-dropdown .common-dropdown-trigger {
  height: 34px;
  min-width: 150px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--dash-input-bg, var(--dash-card-gradient));
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  transition: none !important;
}

.kpi-org-dropdown.common-dropdown.is-open .common-dropdown-trigger {
  background: var(--dash-input-bg, var(--dash-card-gradient)) !important;
  border-color: var(--dash-border) !important;
  box-shadow: none !important;
}

/* Attendance month/year — matches old kpi-select-sm compact look */
.kpi-att-dropdown .common-dropdown-trigger {
  height: 28px;
  min-width: 84px;
  padding: 0 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--db-card, #fff);
  border: 1px solid var(--dash-border);
  color: var(--dash-text);
  transition: none !important;
  max-width: 84px;
}

.kpi-att-dropdown.common-dropdown.is-open .common-dropdown-trigger {
  background: var(--db-card, #fff) !important;
  border-color: var(--dash-border) !important;
  box-shadow: none !important;
}

html.hrms-dark .kpi-att-dropdown .common-dropdown-trigger {
  background: var(--db-card-raised, #1e2535);
  border-color: var(--db-border);
}

html.hrms-dark .kpi-att-dropdown.common-dropdown.is-open .common-dropdown-trigger {
  background: var(--db-card-raised, #1e2535) !important;
  border-color: var(--db-border) !important;
  box-shadow: none !important;
}

.kpi-org-dropdown .common-dropdown-menu {
  min-width: 160px;
  max-width: 220px;
}

.kpi-att-dropdown .common-dropdown-menu {
  width: auto !important;
  min-width: 90px !important;
  max-width: 110px !important;
}

.kpi-att-dropdown .common-dropdown-options {
  max-height: 140px;
  overflow-y: auto;
}

.kpi-att-dropdown .common-dropdown-option {
  min-height: 24px !important;
  padding: 1px 8px !important;
  font-size: 0.72rem !important;
}

.kpi-att-dropdown .common-dropdown-menu-title {
  padding: 4px 8px 5px !important;
  font-size: 0.66rem !important;
}

.kpi-att-dropdown .common-dropdown-trigger-input,
.kpi-org-dropdown .common-dropdown-trigger-input {
  color: var(--dash-text) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* =====================================================
   WALL OF FAME MODAL — Theme & Overflow Fixes
   ===================================================== */

/* Prevent body scroll when modal is open */
body.dashboard-body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Fix common-dropdown & datepicker inside modal bg */
body.dashboard-body #appreciatedUserModalDialog .common-dropdown-trigger,
body.dashboard-body #appreciatedUserModalDialog .common-datepicker-trigger {
  background: var(--db-card-raised, #1e2535) !important;
  border-color: color-mix(in oklab, var(--dash-border) 88%, transparent) !important;
  color: var(--dash-text) !important;
  font-size: 0.9rem !important;
}

html:not(.hrms-dark) body.dashboard-body #appreciatedUserModalDialog .common-dropdown-trigger,
html:not(.hrms-dark) body.dashboard-body #appreciatedUserModalDialog .common-datepicker-trigger {
  background: var(--db-card-raised, #f0f3f8) !important;
}

/* Fix datepicker popover overflow inside modal */
body.dashboard-body #appreciatedUserModalDialog .common-datepicker-popover {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Fix modal datepicker panel background */
body.dashboard-body #appreciatedUserModalDialog .common-datepicker {
  --cdp-input-bg: var(--dash-input-bg);
  --cdp-input-border: color-mix(in oklab, var(--dash-border) 88%, transparent);
  --cdp-input-text: var(--dash-text);
  --cdp-input-muted: var(--dash-muted);
  --cdp-panel-bg: var(--dash-dropdown-bg);
  --cdp-side-bg: var(--dash-panel-2);
  --cdp-panel-border: color-mix(in oklab, var(--dash-border) 88%, transparent);
  --cdp-text: var(--dash-text);
  --cdp-muted: var(--dash-muted);
  --cdp-accent: #22c55e;
  --cdp-selected-bg: var(--dash-purple);
  --cdp-selected-text: var(--dash-primary-foreground);
  --cdp-hover-bg: color-mix(in oklab, var(--dash-purple) 12%, transparent);
  --cdp-shadow: 0 18px 48px color-mix(in oklab, black 34%, transparent);
}

/* Fix modal dropdown menu background and scroll */
body.dashboard-body #appreciatedUserModalDialog .common-dropdown-menu {
  background: var(--dash-dropdown-bg) !important;
  border-color: color-mix(in oklab, var(--dash-border) 88%, transparent) !important;
  box-shadow: 0 18px 44px color-mix(in oklab, black 34%, transparent) !important;
  z-index: 99999 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.dashboard-body #appreciatedUserModalDialog .common-dropdown-menu::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

body.dashboard-body #appreciatedUserModalDialog .common-dropdown-option {
  color: var(--dash-text) !important;
}

body.dashboard-body #appreciatedUserModalDialog .common-dropdown-option:hover {
  color: #22c55e !important;
}

body.dashboard-body #appreciatedUserModalDialog .common-dropdown-option.is-selected {
  color: #22c55e !important;
}

/* Modal box shadow/glow themed with accent color */
body.dashboard-body #appreciatedUserModalDialog .modal-content {
  box-shadow:
    0 30px 90px color-mix(in oklab, black 58%, transparent),
    0 0 0 1px color-mix(in oklab, var(--dash-purple) 18%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 7%, transparent) !important;
}

/* Light mode modal glow */
html:not(.hrms-dark) body.dashboard-body #appreciatedUserModalDialog .modal-content {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 0 0 1px color-mix(in srgb, var(--dash-purple) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Fix modal body - no visible scrollbar, dropdowns can overflow */
body.dashboard-body #appreciatedUserModalDialog .modal-body {
  overflow-y: auto !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.dashboard-body #appreciatedUserModalDialog .modal-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

body.dashboard-body #appreciatedUserModalDialog .modal-dialog {
  overflow: visible !important;
}

/* =====================================================
   DATERANGEPICKER — MONTH / YEAR SELECT STYLING
   ===================================================== */

.daterangepicker .monthselect,
.daterangepicker .yearselect {
  background: var(--dash-panel, #fff);
  border: 1px solid var(--dash-border, #e2e8f0);
  border-radius: 6px;
  color: var(--dash-text, #111);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
}

html.hrms-dark .daterangepicker .monthselect,
html.hrms-dark .daterangepicker .yearselect {
  background: var(--dash-panel);
  border-color: var(--dash-border);
  color: var(--dash-text);
}

/* =====================================================
   APPRECIATION MODAL — COMMON DROPDOWN STYLING
   ===================================================== */

#appreciatedUserModalDialog .appr-emp-dropdown .common-dropdown-trigger,
#appreciatedUserModalDialog .appr-proj-dropdown .common-dropdown-trigger {
  background: var(--dash-panel, #fff) !important;
  border: 1px solid var(--dash-border, #dee2e6) !important;
  border-radius: 8px !important;
  color: var(--dash-text, #212529) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  height: auto !important;
  padding: 8px 14px !important;
  width: 100% !important;
}

#appreciatedUserModalDialog .appr-emp-dropdown .common-dropdown-trigger-input,
#appreciatedUserModalDialog .appr-proj-dropdown .common-dropdown-trigger-input {
  color: var(--dash-text, #212529) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
}

#appreciatedUserModalDialog .appr-emp-dropdown,
#appreciatedUserModalDialog .appr-proj-dropdown {
  position: relative;
}

/* Menu: position:absolute relative to the dropdown container so it
   always opens directly below the trigger and stays inside the modal.
   CSS !important beats the JS inline styles (position:fixed; left:Xpx;
   top:Ypx) set by commonDropdown.js when it detects a modal context.
   The menu is NOT clipped because modal-body has overflow:visible.     */
#appreciatedUserModalDialog .appr-emp-dropdown .common-dropdown-menu,
#appreciatedUserModalDialog .appr-proj-dropdown .common-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  z-index: 1065 !important;
}

html.hrms-dark #appreciatedUserModalDialog .appr-emp-dropdown .common-dropdown-trigger,
html.hrms-dark #appreciatedUserModalDialog .appr-proj-dropdown .common-dropdown-trigger {
  background: var(--dash-card-gradient, #1e2535) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}

/* =====================================================
   COMMON DROPDOWN — THEME-ADAPTIVE GLOBAL OVERRIDE
   Replaces dark-only defaults from style.css so dropdowns
   look correct in both light and dark themes.
   ===================================================== */

.common-dropdown-trigger {
  background: var(--dash-input-bg, var(--dash-panel, #fff)) !important;
  border-color: var(--dash-border, #e2e8f0) !important;
  color: var(--dash-text, #111) !important;
  transition: none !important;
}

.common-dropdown-menu {
  min-width: unset !important;
}

.common-dropdown-icon {
  color: var(--dash-muted, #6b7280) !important;
}

.common-dropdown-trigger-input {
  color: var(--dash-text, #111) !important;
  font-weight: 500 !important;
}

.common-dropdown-trigger-input::placeholder {
  color: var(--dash-muted, #6b7280) !important;
  font-weight: 400 !important;
}

/* Remove green glow + dark background shift on open — keep same look */
.common-dropdown.is-open .common-dropdown-trigger {
  background: var(--dash-input-bg, var(--dash-panel, #fff)) !important;
  border-color: var(--dash-border, #e2e8f0) !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════
   COMMON DROPDOWN — Theme-adaptive overrides
   style.css is hardcoded dark; we separate light vs dark here.
   ════════════════════════════════════════════════════════════════ */

/* ── Light mode ── */
html:not(.hrms-dark) .common-dropdown-trigger {
  background: #ffffff !important;
  border-color: #dde2ea !important;
  color: #111111 !important;
}

html:not(.hrms-dark) .common-dropdown-value {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-dropdown-icon {
  color: #6B7280 !important;
}

html:not(.hrms-dark) .common-dropdown.is-open .common-dropdown-trigger {
  border-color: #dde2ea !important;
  box-shadow: none !important;
}

html:not(.hrms-dark) .common-dropdown-menu {
  background: #ffffff !important;
  border-color: #dde2ea !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
}

html:not(.hrms-dark) .common-dropdown-menu-title {
  color: #6B7280 !important;
}

/* Options */
html:not(.hrms-dark) .common-dropdown-option {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-dropdown-option:hover {
  background: rgba(34, 197, 94, 0.09) !important;
  color: #16a34a !important;
}

html:not(.hrms-dark) .common-dropdown-option.is-selected {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
}

html:not(.hrms-dark) .common-dropdown-option .check {
  color: #22c55e !important;
}

/* Search input inside menu */
html:not(.hrms-dark) .common-dropdown-search-input {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #dde2ea !important;
  border-radius: 8px;
  color: #111111 !important;
  font-size: 0.82rem;
  display: block;
  width: calc(100% - 16px);
  margin: 2px 8px 6px;
  padding: 5px 10px;
  outline: none !important;
  box-shadow: none !important;
}

html:not(.hrms-dark) .common-dropdown-search-input::placeholder {
  color: #6B7280 !important;
}

/* Scrollbar */
html:not(.hrms-dark) .common-dropdown-options::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

html:not(.hrms-dark) .common-dropdown-options::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.30);
}

/* Empty state */
html:not(.hrms-dark) .common-dropdown-empty {
  color: #6B7280 !important;
}

/* Trigger input */
html:not(.hrms-dark) .common-dropdown-trigger-input {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-dropdown-trigger-input::placeholder {
  color: #6B7280 !important;
}

html:not(.hrms-dark) .common-dropdown[data-no-search] .common-dropdown-trigger-input,
html:not(.hrms-dark) .common-dropdown.common-dropdown--no-search .common-dropdown-trigger-input {
  display: none !important;
}

html:not(.hrms-dark) .common-dropdown[data-no-search] .common-dropdown-value,
html:not(.hrms-dark) .common-dropdown.common-dropdown--no-search .common-dropdown-value {
  display: block !important;
}

/* ── Dark mode — search input (menu bg already dark via style.css) ── */
html.hrms-dark .common-dropdown-search-input,
body.hrms-dark .common-dropdown-search-input {
  background: rgba(13, 18, 26, 0.70) !important;
  border: 1px solid rgba(49, 59, 72, 0.95) !important;
  border-radius: 8px;
  color: #f8fafc !important;
  font-size: 0.82rem;
  display: block;
  width: calc(100% - 16px);
  margin: 2px 8px 6px;
  padding: 5px 10px;
  outline: none !important;
  box-shadow: none !important;
}

html.hrms-dark .common-dropdown-search-input::placeholder,
body.hrms-dark .common-dropdown-search-input::placeholder {
  color: #7f93a8 !important;
}

/* Light mode common-datepicker */
html:not(.hrms-dark) .common-datepicker {
  --cdp-input-bg: #ffffff;
  --cdp-input-border: #dde2ea;
  --cdp-input-text: #111111;
  --cdp-input-muted: #6B7280;
  --cdp-panel-bg: #ffffff;
  --cdp-side-bg: #f0f3f8;
  --cdp-panel-border: #dde2ea;
  --cdp-text: #111111;
  --cdp-muted: #6B7280;
  --cdp-accent: #22c55e;
  --cdp-selected-bg: #22c55e;
  --cdp-selected-text: #ffffff;
  --cdp-hover-bg: rgba(0, 0, 0, 0.05);
  --cdp-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html:not(.hrms-dark) .common-datepicker-trigger:hover,
html:not(.hrms-dark) .common-datepicker.is-open .common-datepicker-trigger {
  background: #ffffff !important;
  border-color: rgb(34 197 94) !important;
  box-shadow: 0 0 0 2px rgba(120, 181, 66, .12) !important;
}

html:not(.hrms-dark) .common-datepicker-side {
  background: #f0f3f8 !important;
}

html:not(.hrms-dark) .common-datepicker-year {
  color: #6B7280 !important;
}

html:not(.hrms-dark) .common-datepicker-selected {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-datepicker-title {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-datepicker-weekdays span {
  color: #6B7280 !important;
}

html:not(.hrms-dark) .common-datepicker-day,
html:not(.hrms-dark) .common-datepicker-month {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-datepicker-day.is-muted {
  color: rgba(0, 0, 0, .25) !important;
}

html:not(.hrms-dark) .common-datepicker-day:nth-child(7n + 1),
html:not(.hrms-dark) .common-datepicker-day:nth-child(7n) {
  color: #22c55e !important;
}

html:not(.hrms-dark) .common-datepicker-day.is-selected,
html:not(.hrms-dark) .common-datepicker-month.is-selected {
  background: #22c55e !important;
  color: #ffffff !important;
}

html:not(.hrms-dark) .common-datepicker-day:hover,
html:not(.hrms-dark) .common-datepicker-month:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html:not(.hrms-dark) .common-datepicker-day:disabled,
html:not(.hrms-dark) .common-datepicker-month:disabled {
  color: rgba(0, 0, 0, .15) !important;
}

html:not(.hrms-dark) .common-datepicker-nav {
  color: #22c55e !important;
}

html:not(.hrms-dark) .common-datepicker-nav:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html:not(.hrms-dark) .common-datepicker-title-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html:not(.hrms-dark) .common-datepicker-year-item {
  color: #111111 !important;
}

html:not(.hrms-dark) .common-datepicker-year-item.is-selected {
  background: #22c55e !important;
  color: #ffffff !important;
}

html:not(.hrms-dark) .common-datepicker-year-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html:not(.hrms-dark) .common-datepicker-title--clickable:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* =====================================================
   FIX: Calendar popover inside modal – prevent overflow
   ===================================================== */

/* Make modal content and body allow overflow for the popover */
#appreciatedUserModalDialog .modal-content,
#appreciatedUserModalDialog .modal-body {
  overflow: visible !important;
}

/* Ensure calendar popover stays within viewport and doesn't go outside */
body.dashboard-body #appreciatedUserModalDialog .common-datepicker-popover {
  position: fixed !important;
  z-index: 99999 !important;
  max-width: calc(100vw - 40px) !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  /* If the library misplaces it horizontally, reset left/right */
  left: auto !important;
  right: auto !important;
  /* Allow the library's JS positioning, but enforce boundaries */
  transform: none !important;
}

/* Constrain the actual calendar panel inside the popover */
body.dashboard-body #appreciatedUserModalDialog .common-datepicker-popover .common-datepicker {
  max-width: 280px !important;
  width: auto !important;
}

/* =====================================================
   DASHBOARD POLISH FIXES
   ===================================================== */

body.dashboard-body .kpi-overview-card {
  border-radius: 14px !important;
  background: var(--db-card, var(--dash-panel, #ffffff)) !important;
}

body.dashboard-body .kpi-overview-header {
  border-radius: 14px 14px 0 0 !important;
}

body.dashboard-body .kpi-overview-body {
  border-radius: 0 0 14px 14px !important;
  background: var(--db-card, var(--dash-panel, #ffffff)) !important;
  overflow: hidden !important;
}

html:not(.hrms-dark) .gj-picker.timepicker {
  background: #ffffff !important;
  border: 1px solid #dde2ea !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
  color: #111827 !important;
  overflow: hidden !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="header"] {
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="body"],
html:not(.hrms-dark) .gj-picker.timepicker [role="footer"] {
  background: #ffffff !important;
  color: #111827 !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="footer"] {
  border-top: 1px solid #e5e7eb !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="mode"],
html:not(.hrms-dark) .gj-picker.timepicker [role="hour"],
html:not(.hrms-dark) .gj-picker.timepicker [role="minute"],
html:not(.hrms-dark) .gj-picker.timepicker [role="second"],
html:not(.hrms-dark) .gj-picker.timepicker [role="meridiem"],
html:not(.hrms-dark) .gj-picker.timepicker .gj-icon,
html:not(.hrms-dark) .gj-picker.timepicker .clock {
  color: #111827 !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="mode"] span {
  color: #6b7280 !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="mode"] span.selected,
html:not(.hrms-dark) .gj-picker.timepicker .selected {
  background: #22c55e !important;
  color: #ffffff !important;
}

html:not(.hrms-dark) .gj-picker.timepicker [role="hour"]:hover,
html:not(.hrms-dark) .gj-picker.timepicker [role="minute"]:hover,
html:not(.hrms-dark) .gj-picker.timepicker [role="second"]:hover,
html:not(.hrms-dark) .gj-picker.timepicker [role="meridiem"]:hover,
html:not(.hrms-dark) .gj-picker.timepicker button:hover {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
}

/* Open-upward: commonDropdown.js sets position:fixed + bottom (viewport-relative)
   as inline styles. Do NOT override with calc(100%+4px) — with position:fixed,
   100% = viewport height, placing the menu completely off-screen.
   Only ensure top:auto so the JS bottom value takes effect.                      */
body.dashboard-body #appreciatedUserModalDialog .common-dropdown--open-up .common-dropdown-menu,
#appreciatedUserModalDialog .common-dropdown--open-up .common-dropdown-menu {
  top: auto !important;
}

/* ── Appreciation modal — responsive ───────────────────────────────
   1-column form on phones, full-bleed modal on very small screens    */
@media (max-width: 575.98px) {
  #appreciatedUserModalDialog .modal-dialog {
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    margin: 8px auto !important;
  }

  #appreciatedUserModalDialog .modal-content {
    max-height: calc(100dvh - 20px) !important;
    border-radius: 14px !important;
  }

  #appreciatedUserModalDialog .modal-body {
    padding: 1rem !important;
  }

  /* Stack the 2-column form to 1 column on phones */
  #createNewAppreciationForm {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }
}

@media (max-width: 767.98px) {
  #appreciatedUserModalDialog .modal-dialog {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
  }

  /* Dropdown menus: cap height so they don't extend off-screen on phones */
  #appreciatedUserModalDialog .appr-emp-dropdown .common-dropdown-menu,
  #appreciatedUserModalDialog .appr-proj-dropdown .common-dropdown-menu {
    max-height: 160px !important;
  }
}

/* Appreciated user modal: remove square panel edges from nested controls */
#appreciatedUserModalDialog .modal-content {
  border-radius: 18px !important;
}

#appreciatedUserModalDialog .modal-header {
  border-radius: 18px 18px 0 0 !important;
}

#appreciatedUserModalDialog .modal-body {
  border-radius: 0 !important;
}

#appreciatedUserModalDialog .modal-footer {
  border-radius: 0 0 18px 18px !important;
}

#appreciatedUserModalDialog .common-dropdown-trigger,
#appreciatedUserModalDialog .common-datepicker-trigger,
#appreciatedUserModalDialog .form-control,
#appreciatedUserModalDialog .form-select {
  border-radius: 12px !important;
}

#appreciatedUserModalDialog .common-dropdown-menu,
#appreciatedUserModalDialog .common-datepicker-popover,
#appreciatedUserModalDialog .common-datepicker-panel {
  border-radius: 14px !important;
}

#appreciatedUserModalDialog .common-dropdown-menu,
#appreciatedUserModalDialog .common-datepicker-panel {
  overflow: hidden !important;
}

#appreciatedUserModalDialog .common-datepicker-side {
  border-radius: 14px 0 0 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   Toastr — bottom-right, clean design, light + dark mode
   ═══════════════════════════════════════════════════════════ */

/* ── Container position ── */
#toast-container.toast-bottom-right {
  bottom: 20px;
  right: 20px;
}

/* ── Hard-cap: hide toasts beyond the 4th ── */
#toast-container>div:nth-child(n+5) {
  display: none !important;
}

/* ── Base toast reset ── */
#toast-container>div {
  position: relative !important;
  border-radius: 10px !important;
  padding: 13px 42px 13px 16px !important;
  width: 320px !important;
  opacity: 1 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14) !important;
  margin: 0 0 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-left: 4px solid transparent !important;
  background-image: none !important;
  transition: box-shadow .18s;
}

#toast-container>div:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, .22) !important;
  opacity: 1 !important;
}



/* ── Remove default toast icons ── */
#toast-container>.toast-success,
#toast-container>.toast-error,
#toast-container>.toast-info,
#toast-container>.toast-warning {
  background-image: none !important;
}

/* ── Light mode ── */
#toast-container>.toast-success {
  background-color: #f0fdf4 !important;
  color: #14532d !important;
  border-left-color: #22c55e !important;
}

#toast-container>.toast-error {
  background-color: #fff1f2 !important;
  color: #7f1d1d !important;
  border-left-color: #ef4444 !important;
}

#toast-container>.toast-info {
  background-color: #eff6ff !important;
  color: #1e3a5f !important;
  border-left-color: #3b82f6 !important;
}

#toast-container>.toast-warning {
  background-color: #fffbeb !important;
  color: #78350f !important;
  border-left-color: #f59e0b !important;
}

/* ── Close button ── */
#toast-container>div .toast-close-button {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  float: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 !important;
  opacity: 0 !important;
  color: inherit !important;
  background: rgba(0, 0, 0, .08) !important;
  text-shadow: none !important;
  transition: opacity .15s, background .15s !important;
}

#toast-container>div:hover .toast-close-button {
  opacity: .55 !important;
}

#toast-container>div .toast-close-button:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, .18) !important;
}

/* Dark mode close button */
html.hrms-dark #toast-container>div .toast-close-button {
  background: rgba(255, 255, 255, .1) !important;
}

html.hrms-dark #toast-container>div .toast-close-button:hover {
  background: rgba(255, 255, 255, .2) !important;
}

/* Progress bar */
#toast-container>div .toast-progress {
  opacity: .3 !important;
}

#toast-container>.toast-success .toast-progress {
  background: #22c55e !important;
}

#toast-container>.toast-error .toast-progress {
  background: #ef4444 !important;
}

#toast-container>.toast-info .toast-progress {
  background: #3b82f6 !important;
}

#toast-container>.toast-warning .toast-progress {
  background: #f59e0b !important;
}

/* ── Dark mode ── */
html.hrms-dark #toast-container>div {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45) !important;
}

html.hrms-dark #toast-container>.toast-success {
  background-color: #0d1f15 !important;
  color: #86efac !important;
  border-left-color: #22c55e !important;
}

html.hrms-dark #toast-container>.toast-error {
  background-color: #1c0a0a !important;
  color: #fca5a5 !important;
  border-left-color: #ef4444 !important;
}

html.hrms-dark #toast-container>.toast-info {
  background-color: #0a1628 !important;
  color: #93c5fd !important;
  border-left-color: #3b82f6 !important;
}

html.hrms-dark #toast-container>.toast-warning {
  background-color: #1c1000 !important;
  color: #fcd34d !important;
  border-left-color: #f59e0b !important;
}


/* ── Responsive ── */
@media (max-width: 480px) {
  #toast-container.toast-bottom-right {
    right: 10px;
    bottom: 10px;
  }

  #toast-container>div {
    width: calc(100vw - 20px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — MOBILE ENHANCEMENTS
   1. Chart bottom sheet (slide-up panel)
   2. Wall of Fame & Employee table scroll arrows
   3. Additional responsive polish
   ═══════════════════════════════════════════════════════════ */

/* ── "View Graph" toggle button — hidden on desktop ── */
.dash-graph-toggle-btn {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 8px;
  border: 1px solid var(--dash-border);
  background: var(--dash-card-gradient);
  color: var(--dash-muted);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  line-height: 1.4;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.dash-graph-toggle-btn:hover {
  color: var(--hrms-accent, #22c55e);
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .08);
}

/* Chart body collapse — max-height transition so Chart.js
   still renders at full size before being hidden */
.dash-graph-body.is-collapsed {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Mini header for growth card (no native header) — mobile only */
.dash-growth-mini-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--dash-border);
  background: var(--dash-header-gradient);
  border-radius: 16px 16px 0 0;
}

.dash-growth-mini-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Bottom sheet ───────────────────────────────────────── */
.dash-chart-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  align-items: flex-end;
}

.dash-chart-sheet.is-open {
  display: flex;
}

.dash-chart-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}

.dash-chart-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: var(--dash-card-gradient, #fff);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, .18);
  transform: translateY(100%);
  transition: transform 0.33s cubic-bezier(.32, 0, .67, 0);
  scrollbar-width: none;
}

.dash-chart-sheet-panel::-webkit-scrollbar {
  display: none;
}

.dash-chart-sheet.is-open .dash-chart-sheet-panel {
  transform: translateY(0);
  transition: transform 0.33s cubic-bezier(.33, 1, .68, 1);
}

html.hrms-dark .dash-chart-sheet-panel {
  background: var(--db-panel, #161b26);
}

.dash-chart-sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--dash-border);
  margin: 10px auto 0;
}

.dash-chart-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--dash-border);
}

.dash-chart-sheet-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dash-text);
  margin: 0;
}

.dash-chart-sheet-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--dash-border);
  background: transparent;
  color: var(--dash-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.14s, color 0.14s;
}

.dash-chart-sheet-close:hover {
  background: rgba(239, 68, 68, .1);
  color: #ef4444;
}

.dash-chart-sheet-body {
  padding: 16px;
}

/* Charts inside the sheet should use their natural height */
.dash-chart-sheet-body .dash-graph-body {
  max-height: none !important;
  overflow: visible !important;
  padding: revert !important;
  margin: revert !important;
}

/* Fix evaluation card padding */
.evaluation-card .card-body.dash-graph-body {
  padding: 1.25rem !important;
}

/* ── User role dashboard overview cards ─────────────────────────── */
body.dashboard-body .user-dashboard-card {
  background: var(--db-card, var(--dash-panel)) !important;
  border: 1px solid var(--db-border, var(--dash-border)) !important;
  border-radius: 16px !important;
  box-shadow: var(--db-shadow, var(--dash-card-shadow)) !important;
  overflow: hidden;
}

body.dashboard-body .user-dashboard-card-header,
body.dashboard-body .user-dashboard-drs-header {
  align-items: center;
  background: var(--db-card, var(--dash-panel)) !important;
  border-bottom: 0 !important;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 20px 22px 10px !important;
}

body.dashboard-body .user-dashboard-card-title {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

body.dashboard-body .user-dashboard-card-title strong {
  color: var(--dash-text) !important;
  display: block;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.2;
}

body.dashboard-body .user-dashboard-card-title small {
  color: var(--dash-muted) !important;
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2px;
}

body.dashboard-body .user-dashboard-card-icon {
  align-items: center;
  background: color-mix(in srgb, var(--dash-purple) 14%, var(--db-card, var(--dash-panel)));
  border-radius: 12px;
  color: var(--dash-purple);
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

body.dashboard-body .user-dashboard-card-icon.is-danger {
  background: color-mix(in srgb, var(--dash-pink) 14%, var(--db-card, var(--dash-panel)));
  color: var(--dash-pink);
}

body.dashboard-body .user-dashboard-month-control {
  flex: 0 0 184px;
  max-width: 100%;
}

body.dashboard-body .user-dashboard-month-picker.common-datepicker {
  width: 100%;
}

body.dashboard-body .user-dashboard-month-picker .common-datepicker-trigger {
  background: var(--dash-input-bg) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 14px !important;
  color: var(--dash-text) !important;
  font-size: 0.8rem;
  font-weight: 800;
  height: 40px;
  min-height: 40px;
  padding: 0 12px !important;
  transition: all 0.2s ease;
}

body.dashboard-body .user-dashboard-month-picker:hover .common-datepicker-trigger,
body.dashboard-body .user-dashboard-month-picker .common-datepicker-trigger:focus,
body.dashboard-body .user-dashboard-month-picker.is-open .common-datepicker-trigger {
  border-color: var(--dash-purple) !important;
  box-shadow: 0 0 0 4px var(--dash-focus-ring) !important;
  outline: none;
}

body.dashboard-body .user-dashboard-month-picker:hover .common-datepicker-icon,
body.dashboard-body .user-dashboard-month-picker .common-datepicker-trigger:focus .common-datepicker-icon,
body.dashboard-body .user-dashboard-month-picker.is-open .common-datepicker-icon {
  color: var(--dash-purple) !important;
}

body.dashboard-body .user-dashboard-month-picker .common-datepicker-value {
  color: var(--dash-text) !important;
}

body.dashboard-body .user-dashboard-month-picker .common-datepicker-icon {
  color: var(--dash-muted) !important;
}

body.dashboard-body .user-dashboard-eval-body {
  padding: 12px 22px 22px !important;
}

body.dashboard-body .user-dashboard-chart-shell {
  align-items: center;
  background: var(--dash-input-bg) !important;
  border: 1px dashed color-mix(in srgb, var(--dash-border) 82%, var(--dash-muted)) !important;
  border-radius: 16px !important;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  min-height: 300px;
  padding: 18px !important;
  width: 100%;
}

body.dashboard-body .user-dashboard-chart-shell canvas {
  display: block;
  height: 300px !important;
  max-height: 300px !important;
  width: 100% !important;
}

body.dashboard-body .user-dashboard-chart-shell canvas[hidden],
body.dashboard-body .user-dashboard-empty-state[hidden] {
  display: none !important;
}

body.dashboard-body .user-dashboard-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 330px;
  min-height: 220px;
  text-align: center;
}

body.dashboard-body .user-dashboard-empty-icon {
  align-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 18px;
  color: var(--dash-muted);
  display: inline-flex;
  height: 58px;
  justify-content: center;
  margin-bottom: 14px;
  width: 58px;
}

body.dashboard-body .user-dashboard-empty-state strong {
  color: var(--dash-text);
  font-size: 0.95rem;
  font-weight: 850;
}

body.dashboard-body .user-dashboard-empty-state p {
  color: var(--dash-muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 8px 0 0;
}

body.dashboard-body .growth-card.user-dashboard-card {
  border-left: 1px solid var(--db-border, var(--dash-border)) !important;
}

body.dashboard-body .user-dashboard-growth-header {
  padding-bottom: 0 !important;
}

body.dashboard-body .performance-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--dash-muted) !important;
  text-transform: uppercase;
}

body.dashboard-body .user-dashboard-live-badge {
  background: color-mix(in srgb, var(--dash-purple) 16%, transparent);
  border-radius: 999px;
  color: var(--dash-purple);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 5px 10px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.dashboard-body .live-dot {
  width: 6px;
  height: 6px;
  background-color: var(--dash-purple);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px var(--dash-purple);
}

body.dashboard-body .user-dashboard-growth-body {
  gap: 12px;
  padding: 8px 22px 22px !important;
}

body.dashboard-body .user-dashboard-growth-chart-row {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
  width: 100%;
}

body.dashboard-body .user-dashboard-growth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 180px;
  min-height: 190px;
  margin-bottom: 0 !important;
  min-width: 0;
}

body.dashboard-body .user-dashboard-growth-chart {
  min-height: 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

body.dashboard-body .user-dashboard-growth-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.dashboard-body .user-dashboard-growth-list .growth-label {
  align-items: center;
  background: var(--dash-input-bg) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  color: var(--dash-text) !important;
  display: flex;
  font-size: 0.82rem;
  font-weight: 600 !important;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 18px !important;
  position: relative;
  overflow: hidden;
}

body.dashboard-body .user-dashboard-growth-list .growth-label span {
  color: var(--dash-muted) !important;
}

body.dashboard-body .user-dashboard-growth-list .growth-label strong {
  color: var(--dash-text) !important;
  font-size: 0.88rem;
  font-weight: 850;
}

body.dashboard-body #currentMonthGrowth::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background: var(--dash-purple, #22c55e);
  border-radius: 0 4px 4px 0;
}

body.dashboard-body .user-dashboard-drs-header {
  padding-bottom: 14px !important;
}

body.dashboard-body .user-dashboard-drs-legend {
  align-items: center;
  color: var(--dash-muted);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.74rem;
  font-weight: 700;
  gap: 14px;
}

body.dashboard-body .user-dashboard-drs-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

body.dashboard-body .user-dashboard-drs-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

body.dashboard-body .user-dashboard-drs-legend .is-done {
  background: var(--dash-purple);
}

body.dashboard-body .user-dashboard-drs-legend .is-pending {
  background: var(--dash-pink);
}

body.dashboard-body .user-dashboard-drs-content {
  padding: 0 22px 22px;
}

body.dashboard-body .drs-dates-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

body.dashboard-body .drs-status-tile,
body.dashboard-body .totalDatesRounds.drs-status-tile,
body.dashboard-body .notFilledRounds.drs-status-tile {
  align-items: center;
  background: var(--dash-panel) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 10px !important;
  color: var(--dash-text) !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
  height: 44px !important;
  width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

body.dashboard-body .drs-status-tile span {
  display: none !important;
}

/* DONE = green (--dash-purple is #22c55e) */
body.dashboard-body .totalDatesRounds.drs-status-tile {
  background: color-mix(in srgb, var(--dash-purple) 10%, var(--dash-panel)) !important;
  border-color: color-mix(in srgb, var(--dash-purple) 40%, var(--dash-border)) !important;
}
body.dashboard-body .totalDatesRounds.drs-status-tile strong {
  color: var(--dash-purple);
}

/* PENDING = red (--dash-pink is #f43f5e) */
body.dashboard-body .notFilledRounds.drs-status-tile {
  background: color-mix(in srgb, var(--dash-pink) 10%, var(--dash-panel)) !important;
  border-color: color-mix(in srgb, var(--dash-pink) 40%, var(--dash-border)) !important;
}
body.dashboard-body .notFilledRounds.drs-status-tile strong {
  color: var(--dash-pink);
}

body.dashboard-body .drs-status-tile strong {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

body.dashboard-body .notFilledRounds.drs-status-tile:hover {
  background: color-mix(in srgb, var(--dash-pink) 18%, var(--dash-panel)) !important;
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {

  body.dashboard-body .user-dashboard-card-header,
  body.dashboard-body .user-dashboard-drs-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.dashboard-body .user-dashboard-month-control {
    flex-basis: auto;
    width: 100%;
  }

  body.dashboard-body .drs-dates-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fix birthday card sticky padding */
.birthday-card-section>.card-body {
  padding: 1.5rem !important;
}

/* Remaining Evaluation card: compact, responsive PM/TL dashboard table */
body.dashboard-body .remaining-eval-card {
  background: var(--dash-card-gradient) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--dash-shadow) !important;
  overflow: hidden;
}

body.dashboard-body .remaining-eval-card .card-header {
  align-items: center;
  background: var(--dash-table-header) !important;
  border-bottom: 1px solid var(--dash-table-border) !important;
  display: flex;
  min-height: 42px;
  padding: 10px 14px !important;
}

body.dashboard-body .remaining-eval-card .card-header h5 {
  color: var(--dash-text) !important;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
}

body.dashboard-body .remaining-eval-card .card-body,
body.dashboard-body #remaining-evaluation-details,
body.dashboard-body #remaining-evaluation-people {
  min-height: 0;
}

body.dashboard-body .remaining-eval-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--dash-teal) transparent;
  scrollbar-width: thin;
}

body.dashboard-body .remaining-eval-table-wrap::-webkit-scrollbar {
  height: 5px;
}

body.dashboard-body .remaining-eval-table-wrap::-webkit-scrollbar-thumb {
  background: var(--dash-teal);
  border-radius: 999px;
}

body.dashboard-body #remainingEvaluation {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 620px;
  table-layout: fixed;
}

body.dashboard-body #remainingEvaluation thead th,
body.dashboard-body #remainingEvaluation tbody td,
body.dashboard-body #remainingEvaluation tbody th {
  padding-left: 16px !important;
  padding-right: 16px !important;
  white-space: nowrap;
}

body.dashboard-body #remainingEvaluation thead th:nth-child(1),
body.dashboard-body #remainingEvaluation tbody th:nth-child(1) {
  width: 82px;
}

body.dashboard-body #remainingEvaluation thead th:nth-child(2),
body.dashboard-body #remainingEvaluation tbody td:nth-child(2) {
  width: 170px;
}

body.dashboard-body #remainingEvaluation thead th:nth-child(3),
body.dashboard-body #remainingEvaluation tbody td:nth-child(3) {
  width: 135px;
}

body.dashboard-body #remainingEvaluation thead th:last-child,
body.dashboard-body #remainingEvaluation tbody td:last-child {
  width: 230px;
  white-space: normal;
}

body.dashboard-body #remainingEvaluation .common-chip {
  display: inline-flex;
  margin: 3px 4px 3px 0 !important;
  max-width: 100%;
  white-space: nowrap;
}

body.dashboard-body #remaining-evaluation-people .leave-image-wrapper {
  min-height: 260px;
  padding: 28px 16px !important;
}

body.dashboard-body #remaining-evaluation-people .leave-image-wrapper img {
  margin-bottom: 0;
  max-height: 180px !important;
  max-width: min(220px, 62vw) !important;
  width: min(220px, 62vw) !important;
}

@media (max-width: 575.98px) {
  body.dashboard-body .remaining-eval-card .card-header {
    min-height: 38px;
    padding: 8px 10px !important;
  }

  body.dashboard-body .remaining-eval-card .card-header h5 {
    font-size: .84rem;
  }

  body.dashboard-body #remainingEvaluation {
    min-width: 560px;
  }

  body.dashboard-body #remainingEvaluation thead th,
  body.dashboard-body #remainingEvaluation tbody td,
  body.dashboard-body #remainingEvaluation tbody th {
    font-size: .76rem !important;
    padding: 9px 14px !important;
  }

  body.dashboard-body #remainingEvaluation thead th:last-child,
  body.dashboard-body #remainingEvaluation tbody td:last-child {
    width: 210px;
  }

  body.dashboard-body #remaining-evaluation-people .leave-image-wrapper {
    min-height: 230px;
    padding: 20px 12px !important;
  }

  body.dashboard-body #remaining-evaluation-people .leave-image-wrapper img {
    max-height: 150px !important;
    max-width: min(170px, 54vw) !important;
    width: min(170px, 54vw) !important;
  }
}

/* ── Shared scroll arrow style ─────────────────────────── */
.dash-v-arrow,
.dash-h-arrow {
  position: absolute;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--dash-border);
  background: var(--dash-card-gradient);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  color: var(--dash-muted);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .14s, color .14s;
}

.dash-v-arrow.is-visible,
.dash-h-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.dash-v-arrow:hover,
.dash-h-arrow:hover {
  background: rgba(34, 197, 94, .1);
  color: var(--hrms-accent, #22c55e);
  border-color: rgba(34, 197, 94, .35);
}

/* Vertical (wall of fame) */
.dash-wof-shell {
  position: relative;
}

.dash-v-arrow-up {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.dash-v-arrow-down {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

/* Horizontal (employee table) */
/* The shell is injected between .card-body (flex column) and
   .employee-tab-content (flex:1). Without these flex rules the
   employee-tab-content's flex:1 would reference the shell (a plain div)
   instead of the card-body, so the height collapses on desktop.        */
.dash-htable-shell {
  position: relative;
  overflow: visible;
  /* Inherit the flex slot that employee-tab-content previously held */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-h-arrow-left {
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}

.dash-h-arrow-right {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

/* Wall of fame: hide native scrollbar (vertical arrows replace it) */
.wall-of-fame-body,
.wall-of-fame-card .card-body {
  scrollbar-width: none !important;
}

.wall-of-fame-body::-webkit-scrollbar,
.wall-of-fame-card .card-body::-webkit-scrollbar {
  display: none !important;
}

/* Employee tab content: vertical scroll must work — up/down JS arrows
   replace the scrollbar UI; keep overflow-y:auto so content scrolls.  */
.employee-tab-content {
  overflow-y: auto !important;
  scrollbar-width: none;
  /* hide native scrollbar — JS arrows used */
}

.employee-tab-content::-webkit-scrollbar {
  display: none;
}

/* ── Employee table vertical scroll arrows (up / down) ────────────── */
.emp-v-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dash-card-gradient, #fff);
  border: 1px solid var(--dash-border, #e2e8f0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  color: var(--dash-muted, #6b7280);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .14s, color .14s;
}

.emp-v-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.emp-v-arrow:hover {
  background: color-mix(in srgb, var(--hrms-accent, #22c55e) 10%, var(--dash-card-gradient, #fff));
  color: var(--hrms-accent, #22c55e);
  border-color: color-mix(in srgb, var(--hrms-accent, #22c55e) 35%, transparent);
}

/* Up arrow: just inside the top edge of the visible scroll area */
.emp-v-arrow-up {
  top: 4px;
}

/* Down arrow: just inside the bottom edge of the visible scroll area */
.emp-v-arrow-down {
  bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   CHART DATA — HTML visualization (shown inside bottom sheet)
   Replaces canvas charts with pure HTML bars + pill rows.
   ═══════════════════════════════════════════════════════════ */

/* Section wrapper */
.dash-csection {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dash-border);
}

.dash-csection:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.dash-csection-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* ── Horizontal bar rows ── */
.dash-cbars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dash-cbar-row {
  display: grid;
  grid-template-columns: 130px 1fr 38px;
  align-items: center;
  gap: 8px;
}

.dash-cbar-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dash-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.dash-cbar-ds {
  font-size: 0.63rem;
}

.dash-cbar-track {
  height: 9px;
  background: var(--dash-border);
  border-radius: 99px;
  overflow: hidden;
}

.dash-cbar-fill {
  height: 100%;
  border-radius: 99px;
  min-width: 4px;
}

.dash-cbar-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dash-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Group for multi-dataset charts */
.dash-cbar-group {
  margin-bottom: 10px;
}

.dash-cbar-group-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--dash-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

/* ── Pill / donut rows ── */
.dash-cpills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-cpill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--dash-table-header, rgba(0, 0, 0, .04));
  border-radius: 10px;
  border: 1px solid var(--dash-border);
}

html.hrms-dark .dash-cpill-row {
  background: rgba(255, 255, 255, .04);
}

.dash-cpill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-cpill-lbl {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dash-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-cpill-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dash-text);
  font-variant-numeric: tabular-nums;
}

.dash-cpill-pct {
  font-size: 0.7rem;
  color: var(--dash-muted);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Growth text (ApexCharts fallback) ── */
.dash-cgrowth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--dash-table-header, rgba(0, 0, 0, .04));
  border-radius: 12px;
  text-align: center;
}

.dash-cgrowth-item {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dash-text);
}

.dash-cgrowth-kpi {
  align-items: center;
  background: var(--dash-table-header, rgba(0, 0, 0, .04));
  border: 1px solid var(--dash-border);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.dash-cgrowth-kpi strong {
  color: var(--dash-text);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.dash-cgrowth-kpi span {
  color: var(--dash-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: right;
}

/* ── No-data message ── */
.dash-cno-data {
  color: var(--dash-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  padding: 24px 16px;
  line-height: 1.6;
}

/* ── ≤ 767px: show mobile controls + polish ────────────── */
@media (max-width: 767.98px) {
  .dash-graph-toggle-btn {
    display: inline-flex;
  }

  .dash-growth-mini-header {
    display: flex;
  }

  .dash-org-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dash-eval-growth-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  .dash-eval-growth-row>.col-lg-8,
  .dash-eval-growth-row>.col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  .growth-card {
    border-radius: 12px !important;
  }

  body.dashboard-body .user-dashboard-card-header {
    gap: 10px;
    padding: 18px 18px !important;
  }

  body.dashboard-body .evaluation-card .user-dashboard-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  body.dashboard-body .user-dashboard-card-title {
    min-width: 0;
  }

  body.dashboard-body .user-dashboard-month-control {
    width: 100%;
    order: 3;
    grid-column: 1 / -1;
  }

  body.dashboard-body .user-dashboard-month-control .common-datepicker,
  body.dashboard-body .user-dashboard-month-control .common-datepicker-trigger {
    width: 100%;
  }

  body.dashboard-body .user-dashboard-chart-shell {
    min-height: 260px;
  }

  body.dashboard-body .user-dashboard-chart-shell canvas {
    height: 260px !important;
    max-height: 260px !important;
  }

  body.dashboard-body .user-dashboard-growth-body {
    min-height: 0;
  }

  body.dashboard-body .user-dashboard-growth-chart-row {
    flex-direction: column;
    gap: 10px;
  }

  body.dashboard-body .user-dashboard-growth-shell {
    min-height: 176px;
  }

  body.dashboard-body .dash-graph-body.is-collapsed,
  body.dashboard-body .evaluation-card .dash-graph-body.is-collapsed,
  body.dashboard-body .growth-card .dash-graph-body.is-collapsed,
  body.dashboard-body .user-dashboard-eval-body.is-collapsed,
  body.dashboard-body .user-dashboard-growth-body.is-collapsed {
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  body.dashboard-body .dash-graph-body.is-collapsed .chart-wrapper,
  body.dashboard-body .dash-graph-body.is-collapsed .user-dashboard-growth-chart-row,
  body.dashboard-body .dash-graph-body.is-collapsed .user-dashboard-growth-list {
    visibility: hidden;
  }

  .kpi-cards-row {
    gap: 8px;
  }
}

/* ── ≤ 575px: extra tightening ────────────────────────── */
@media (max-width: 575.98px) {
  .kpi-cards-row {
    gap: 6px;
  }

  .kpi-stat-card {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .kpi-stat-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.78rem !important;
  }

  .kpi-stat-num {
    font-size: 0.95rem !important;
  }

  .kpi-stat-lbl {
    font-size: 0.6rem !important;
  }

  .kpi-overview-header {
    padding: 10px 12px !important;
  }

  .dashboard-table {
    min-width: 360px !important;
  }

  .dashboard-table thead th {
    font-size: 0.58rem !important;
    padding: 6px !important;
  }

  .dashboard-table tbody td {
    font-size: 0.7rem !important;
    padding: 6px !important;
  }

  .fame-card-item {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Employee tab pills: dot only on tiny screens */
  body.dashboard-body .etab-pill span:not(.etab-dot) {
    display: none !important;
  }

  body.dashboard-body .etab-pill {
    padding: 5px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   WALL OF FAME — full-width portrait ID-card redesign
   ═══════════════════════════════════════════════════════════════ */

.wof-new-section {
  background: var(--dash-card-gradient);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  padding: 0;
  /* header + content each carry their own padding */
  box-shadow: var(--dash-card-shadow);
  overflow: hidden;
  /* clip header corners */
}

/* Header: gradient bg to match other dashboard cards */
.wof-new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--dash-header-gradient) !important;
  border-bottom: 1px solid var(--dash-border);
  border-radius: 16px 16px 0 0;
}

/* Card-grid area below the header */
.wof-new-section .wof-scroll-shell,
.wof-new-section>.wof-id-grid {
  padding: 20px 44px 16px;
}

.wof-new-title {
  color: var(--dash-header-text, var(--dash-text)) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* ── Card row — horizontal scroll when cards overflow ── */
.wof-id-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
  /* room for scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--dash-border, #e2e8f0) transparent;
}

/* Hide scrollbar — arrows replace the native indicator */
.wof-id-grid {
  scrollbar-width: none !important;
}

.wof-id-grid::-webkit-scrollbar {
  display: none !important;
}

/* Scroll shell anchors the arrows */
.wof-scroll-shell {
  position: relative;
  overflow: visible;
  padding: 0 40px 16px;
  /* top padding lives on happy-corner-grid so overflow-x:auto doesn't clip elevated cards */
}

/* WoF arrow positioning — uses .dash-h-arrow base style */
.wof-h-arrow-left {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.wof-h-arrow-right {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── WoF Portrait card — full-bleed photo + gradient text overlay ── */
.wof-id-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  flex: 0 0 190px !important;
  width: 190px !important;
  height: 270px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22) !important;
  background: #1a1a2e !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

/* Inset shadow — dark vignette pressed against the borders */
.wof-id-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 10px 28px rgba(0, 0, 0, .5),
    inset 4px 0 18px rgba(0, 0, 0, .3),
    inset -4px 0 18px rgba(0, 0, 0, .3);
  z-index: 4;
  pointer-events: none;
}

/* Text on gradient is always white — no dark/light mode switching needed */
.wof-id-name {
  font-size: .92rem;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.25;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wof-id-desig {
  font-size: .62rem;
  font-weight: 600;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .72) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.hrms-dark .wof-id-name {
  color: #ffffff !important;
}

html.hrms-dark .wof-id-desig {
  color: rgba(255, 255, 255, .72) !important;
}

.wof-id-grid .wof-no-data.common-empty {
  --ct-accent: var(--dash-teal, #22c55e);
  --ct-accent-border: color-mix(in srgb, var(--dash-teal, #22c55e) 30%, transparent);
  --ct-accent-dark: var(--dash-teal, #22c55e);
  --ct-accent-dim: color-mix(in srgb, var(--dash-teal, #22c55e) 14%, transparent);
  --ct-muted: var(--dash-muted, #6b7280);
  --ct-text: var(--dash-text, #111827);
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  justify-content: center;
  min-width: 100%;
  min-height: 240px;
  padding: 34px 20px;
  position: relative;
  text-align: center;
}

.wof-id-grid .wof-no-data.common-empty::before {
  background: radial-gradient(circle, var(--ct-accent-dim) 0%, transparent 66%);
  content: "";
  height: 260px;
  left: 50%;
  max-width: 80%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -62%);
  width: 260px;
  z-index: 0;
}

.wof-id-grid .wof-no-data.common-empty > * {
  position: relative;
  z-index: 1;
}

.wof-id-grid .wof-no-data .common-empty-icon-wrap {
  align-items: center;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--ct-accent) 22%, transparent),
      color-mix(in srgb, var(--ct-accent) 7%, transparent));
  border: 1px solid var(--ct-accent-border);
  border-radius: 24px;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--ct-accent) 16%, transparent);
  color: var(--ct-accent-dark);
  display: flex;
  font-size: 38px;
  height: 88px;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  width: 88px;
}

.wof-id-grid .wof-no-data .common-empty-icon-wrap::before {
  border-radius: 32px;
  border: 1px solid var(--ct-accent-border);
  content: "";
  inset: -9px;
  opacity: .45;
  position: absolute;
}

.wof-id-grid .wof-no-data .common-empty-icon-wrap::after {
  border-radius: 42px;
  border: 1px dashed var(--ct-accent-border);
  content: "";
  inset: -20px;
  opacity: .25;
  position: absolute;
}

.wof-id-grid .wof-no-data .common-empty-icon-wrap i,
.wof-id-grid .wof-no-data .common-empty-icon-wrap svg {
  color: var(--ct-accent-dark);
  font-size: 1em;
  height: 1em;
  line-height: 1;
  width: 1em;
}

.wof-id-grid .wof-no-data .common-empty-title {
  color: var(--ct-text);
  font-size: 0.95rem;
  font-weight: 750;
  margin-bottom: 6px;
}

.wof-id-grid .wof-no-data .common-empty-desc {
  color: var(--ct-muted);
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}

/* Skeleton cards */
.wof-id-card-skel {
  flex: 0 0 190px;
  width: 190px;
  height: 270px;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .wof-id-grid {
    gap: 12px;
  }

  .wof-id-card,
  .wof-id-card-skel {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: 230px !important;
  }

  .wof-new-section {
    padding: 16px 14px;
  }
}

@media (max-width: 480px) {

  .wof-id-card,
  .wof-id-card-skel {
    flex: 0 0 140px !important;
    width: 140px !important;
    height: 210px !important;
  }
}

/* ── Employee Details date picker sizing ── */
.emp-detail-dr-wrap .common-daterange-input {
  font-size: .78rem !important;
  min-width: 150px !important;
}

/* ══════════════════════════════════════════════════════════
   UNIFIED DATERANGE PICKER HEIGHT — dashboard
   All pickers (KPI overview, attendance, org analysis,
   employee details) use the same 34px height.
   ══════════════════════════════════════════════════════════ */
body.dashboard-body .common-daterange-input {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 34px !important;
}

/* Employee-tabs card: auto height (now full width, no fixed height) */
body.dashboard-body .employee-tabs-card {
  height: auto !important;
  max-height: none !important;
  min-height: 300px !important;
}

body.dashboard-body .employee-tab-content {
  max-height: 420px !important;
  overflow-y: auto !important;
}

/* ── Employee Details — pagination badges & Load More ─────────────── */
body.dashboard-body .emp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

body.dashboard-body .emp-load-more {
  text-align: center;
  padding: 10px 0 14px;
}

body.dashboard-body .emp-load-more button {
  font-size: 12px;
  padding: 4px 16px;
  border-radius: 20px;
  color: var(--hrms-red, #C8001A);
  border-color: var(--hrms-red, #C8001A);
}

body.dashboard-body .emp-load-more button:hover {
  background: var(--hrms-red, #C8001A);
  color: #fff;
}

html.hrms-dark body.dashboard-body .emp-load-more button {
  color: #f87171;
  border-color: #f87171;
}

html.hrms-dark body.dashboard-body .emp-load-more button:hover {
  background: #f87171;
  color: #1a1a2e;
}

/* ── Attendance type common dropdown (KPI card) ─────────────────────── */
body.dashboard-body .kpi-att-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keep the dropdown wrapper tight; JS sets menu width = trigger width via fit="trigger" */
body.dashboard-body .att-type-dropdown {
  width: fit-content !important;
}

body.dashboard-body .att-type-dropdown .common-dropdown-trigger {
  width: auto;
  height: 34px;
  min-height: 34px;
  font-size: 12px;
  padding: 0 10px;
  white-space: nowrap;
}

/* Allow the absolutely-positioned menu to escape the card boundary */
body.dashboard-body .kpi-att-controls-row .att-type-dropdown .common-dropdown-menu {
  min-width: unset;
  white-space: nowrap;
  z-index: 200;
}

/* Card and its ancestors must not clip the overflowing dropdown menu */
body.dashboard-body .kpi-detail-card,
body.dashboard-body .kpi-detail-card>.card-header,
body.dashboard-body .kpi-detail-header {
  overflow: visible !important;
}

/* Restore rounded corners lost when overflow changes from hidden to visible */
body.dashboard-body .kpi-detail-card {
  border-radius: 14px;
}

/* Attendance card: header height must never grow when dropdown opens.
   The dropdown floats via position:fixed so it takes zero layout space. */
body.dashboard-body .kpi-att-controls-row {
  flex-wrap: nowrap;
  overflow: visible;
}
body.dashboard-body .kpi-att-controls-row .att-type-dropdown .common-dropdown-control {
  position: relative;
  overflow: visible;
}
body.dashboard-body .kpi-att-controls-row .att-type-dropdown .common-dropdown-menu {
  z-index: 1060;
}

/* ── Sr.No ↔ Name column spacing ────────────────────────────────────── */
.employee-tabs-card .dashboard-table tbody th[scope="row"] {
  padding-right: 0.25rem !important;
  width: 36px;
}

.employee-tabs-card .dashboard-table thead th:first-child {
  padding-right: 0.25rem !important;
  width: 36px;
}

.employee-tabs-card .dashboard-table tbody td:nth-child(2) {
  padding-left: 0.25rem !important;
}

.employee-tabs-card .dashboard-table thead th:nth-child(2) {
  padding-left: 0.25rem !important;
}

/* ── Employee table row avatars ─────────────────────────────────────── */
body.dashboard-body .emp-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.dashboard-body .emp-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--hrms-border, #e5e7eb);
}

/* --------------------------------------------------------------------------
   CUSTOM EVALUATION CHART STYLING (HTML Tooltip & Legend)
   -------------------------------------------------------------------------- */
.custom-eval-legends {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 10px;
}

.custom-eval-legend-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 50px;
  cursor: pointer;
  background: var(--hrms-card, #ffffff);
  transition: all 0.2s ease;
  user-select: none;
}

html.hrms-dark .custom-eval-legend-item {
  background: var(--hrms-card, #1e2535);
  border-color: rgba(255, 255, 255, 0.1);
}

.custom-eval-legend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.custom-eval-legend-item.is-hidden {
  opacity: 0.5;
  filter: grayscale(100%);
}

.custom-eval-legend-item .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 6px currentColor;
}

.custom-eval-legend-item .legend-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--hrms-text, #1e293b);
}

html.hrms-dark .custom-eval-legend-item .legend-text {
  color: #f8fafc;
}

.custom-eval-tooltip {
  position: absolute;
  background: rgba(16, 19, 24, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 210px;
  pointer-events: none;
  transform: translate(-50%, -100%) translateY(-20px);
  transition: all 0.15s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.eval-tooltip-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eval-tooltip-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eval-tooltip-subtitle {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 500;
}

.eval-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: #cbd5e1;
}

.eval-tooltip-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eval-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.eval-tooltip-values {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eval-tooltip-val {
  color: #ffffff;
  font-weight: 700;
}

.eval-delta {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 32px;
  text-align: right;
  justify-content: flex-end;
}

.eval-delta.up {
  color: #10b981;
}

.eval-delta.down {
  color: #ef4444;
}

.eval-delta.neutral {
  color: #64748b;
}

/* ═══════════════════════════════════════════════════════════
   HAPPY CORNER & EVENTS GRID
   ═══════════════════════════════════════════════════════════ */

.happy-corner-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 26px;
  padding-bottom: 12px;
}

.happy-corner-grid::-webkit-scrollbar {
  display: none;
}

.happy-event-card {
  background: var(--dash-panel);
  border: 1px solid var(--dash-border);
  border-radius: 16px;
  padding: 20px 14px;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
  flex: 0 0 190px;
  width: 190px;
  min-height: 260px;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.happy-event-card.is-today {
  border-color: var(--dash-purple);
  transform: translateY(-12px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

@keyframes todayCardGlow {
  0% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 0 10px rgba(139, 92, 246, 0.15);
  }
  50% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 0 25px rgba(139, 92, 246, 0.45);
  }
  100% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 0 10px rgba(139, 92, 246, 0.15);
  }
}

.happy-event-card.is-today {
  animation: todayCardGlow 3s infinite ease-in-out;
}

.happy-event-top-icon {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

.happy-event-card:hover .happy-event-top-icon {
  transform: scale(1.1) rotate(5deg);
}

.happy-event-avatar-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 3px;
  margin: 0 auto 12px;
  position: relative;
  background: transparent;
  border: 2px solid var(--dash-border);
}

.happy-event-card.is-today .happy-event-avatar-ring {
  border-color: var(--dash-purple);
}

@keyframes avatarPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.happy-event-card.is-today .happy-event-avatar-ring {
  animation: avatarPulse 3s infinite ease-in-out;
}

.happy-event-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dash-text);
  object-fit: cover;
  background: var(--dash-panel);
}

.happy-event-avatar.no-photo {
  background: transparent;
  border: none;
  color: var(--dash-text);
}

html.hrms-dark .happy-event-avatar.no-photo {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.happy-event-name {
  font-size: 0.95rem;
  font-weight: 850;
  color: var(--dash-text);
  margin-bottom: 2px;
}

.happy-event-desig {
  font-size: 0.7rem;
  color: var(--dash-muted);
  font-weight: 700;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.happy-event-dept {
  font-size: 0.7rem;
  color: var(--dash-soft);
  font-weight: 500;
  margin-bottom: 18px;
}

.happy-event-footer-modern {
  background: color-mix(in srgb, var(--dash-border) 40%, var(--dash-panel));
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--dash-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--dash-border) 60%, transparent);
  gap: 4px;
  margin-top: auto;
}

.happy-event-footer-modern .event-name {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dash-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.happy-event-footer-modern .event-name i {
  color: var(--dash-purple);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.happy-event-footer-modern .event-date {
  color: var(--dash-muted);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .dash-eval-growth-row {
    display: flex !important;
    align-items: stretch !important;
  }
  .dash-eval-growth-row > .col-lg-8,
  .dash-eval-growth-row > .col-lg-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dash-eval-growth-row > .col-lg-8 > .card,
  .dash-eval-growth-row > .col-lg-4 > .card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
  }
  .dash-eval-growth-row > .col-lg-8 > .card > .card-body,
  .dash-eval-growth-row > .col-lg-4 > .card > .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
}