/* ========== DASHBOARD CSS - Centralized Dashboard Component Styling ========== */
/* 
 * All dashboard-specific styles consolidated here for easy maintenance
 * Use semantic class names for reusable components
 */

/* ========== DASHBOARD CARDS ========== */

/* Dashboard Stat Tile - Small stat cards */
.dashboard-stat-tile {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dashboard Chart Card - Cards with charts */
.dashboard-chart-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.dashboard-chart-card .dashboard-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .dashboard-chart-card {
    min-height: 320px;
  }
  .dashboard-stat-tile {
    min-height: 110px;
  }
}

/* Legacy support - map old classes to new */
.hero-stat-tile {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-chart-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.hero-chart-card .hero-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .hero-chart-card {
    min-height: 320px;
  }
  .hero-stat-tile {
    min-height: 110px;
  }
}

/* ========== DATA SOURCE CORNER TAGS (JSON/TXT BADGES) ========== */
/* 
 * Matches the styling of the HPI TXT link which is the reference design
 * All JSON/TXT tags should use this consistent styling
 */

/* Base styling for all data source corner tags */
.data-source-corner-tag,
a[id*="json-link"],
a[id*="txt-link"],
a[class*="json-link"],
a[class*="txt-link"],
#banner-time-info-button,
#banner-timezone-toggle-button {
  position: absolute !important;
  top: 0 !important;
  padding: 0.125rem 0.375rem !important; /* px-1.5 py-0.5 equivalent */
  font-size: 0.625rem !important; /* 10px */
  font-weight: 500 !important; /* font-medium */
  z-index: 20 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: fit-content !important;
  min-height: auto !important;
  vertical-align: baseline !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
}

/* Right-aligned corner tags (JSON, TXT, timezone toggle) */
.data-source-corner-tag:not(#banner-time-info-button),
a[id*="json-link"],
a[id*="txt-link"],
a[class*="json-link"],
a[class*="txt-link"],
#banner-timezone-toggle-button {
  right: 0 !important;
  left: auto !important;
  border-radius: 0 0 0 0.375rem !important; /* rounded-tl-md rounded-bl-md */
}

/* Left-aligned corner tags (Info button) */
#banner-time-info-button {
  left: 0 !important;
  right: auto !important;
  border-radius: 0 0 0.375rem 0 !important; /* rounded-tr-md rounded-br-md */
}

/* JSON Badge - Primary Color */
.data-source-corner-tag.bg-primary,
a[id*="json-link"][class*="bg-primary"],
a[class*="json-link"][class*="bg-primary"],
#banner-time-info-button,
#banner-timezone-toggle-button {
  background-color: hsl(var(--primary) / 0.2) !important;
  color: hsl(var(--primary)) !important;
}

.data-source-corner-tag.bg-primary:hover,
a[id*="json-link"][class*="bg-primary"]:hover,
a[class*="json-link"][class*="bg-primary"]:hover,
a[id*="json-link"][class*="hover:bg-primary"]:hover,
#banner-time-info-button:hover,
#banner-timezone-toggle-button:hover {
  background-color: hsl(var(--primary) / 0.3) !important;
}

/* TXT Badge - Chart-3 Color (Cyan) */
.data-source-corner-tag.bg-chart-3,
a[id*="txt-link"][class*="bg-chart-3"],
a[class*="txt-link"][class*="bg-chart-3"] {
  background-color: hsl(var(--chart-3) / 0.2) !important;
  color: hsl(var(--chart-3)) !important;
}

.data-source-corner-tag.bg-chart-3:hover,
a[id*="txt-link"][class*="bg-chart-3"]:hover,
a[class*="txt-link"][class*="bg-chart-3"]:hover,
a[id*="txt-link"][class*="hover:bg-chart-3"]:hover {
  background-color: hsl(var(--chart-3) / 0.3) !important;
}

/* Chart Color Variants for JSON Badges */
.data-source-corner-tag.bg-chart-1,
a[id*="json-link"][class*="bg-chart-1"] {
  background-color: hsl(var(--chart-1) / 0.2) !important;
  color: hsl(var(--chart-1)) !important;
}

.data-source-corner-tag.bg-chart-1:hover,
a[id*="json-link"][class*="bg-chart-1"]:hover,
a[id*="json-link"][class*="hover:bg-chart-1"]:hover {
  background-color: hsl(var(--chart-1) / 0.3) !important;
}

.data-source-corner-tag.bg-chart-2,
a[id*="json-link"][class*="bg-chart-2"] {
  background-color: hsl(var(--chart-2) / 0.2) !important;
  color: hsl(var(--chart-2)) !important;
}

.data-source-corner-tag.bg-chart-2:hover,
a[id*="json-link"][class*="bg-chart-2"]:hover,
a[id*="json-link"][class*="hover:bg-chart-2"]:hover {
  background-color: hsl(var(--chart-2) / 0.3) !important;
}

.data-source-corner-tag.bg-chart-4,
a[id*="json-link"][class*="bg-chart-4"] {
  background-color: hsl(var(--chart-4) / 0.2) !important;
  color: hsl(var(--chart-4)) !important;
}

.data-source-corner-tag.bg-chart-4:hover,
a[id*="json-link"][class*="bg-chart-4"]:hover,
a[id*="json-link"][class*="hover:bg-chart-4"]:hover {
  background-color: hsl(var(--chart-4) / 0.3) !important;
}

.data-source-corner-tag.bg-chart-5,
a[id*="json-link"][class*="bg-chart-5"] {
  background-color: hsl(var(--chart-5) / 0.2) !important;
  color: hsl(var(--chart-5)) !important;
}

.data-source-corner-tag.bg-chart-5:hover,
a[id*="json-link"][class*="bg-chart-5"]:hover,
a[id*="json-link"][class*="hover:bg-chart-5"]:hover {
  background-color: hsl(var(--chart-5) / 0.3) !important;
}

/* Field Mode - Corner Pills */
[data-theme="field"] .data-source-corner-tag,
[data-theme="field"] a[id*="json-link"],
[data-theme="field"] a[id*="txt-link"],
[data-theme="field"] #banner-time-info-button,
[data-theme="field"] #banner-timezone-toggle-button {
  background-color: rgba(255, 0, 0, 0.1) !important;
  color: #ff0000 !important;
  border: 1px solid rgba(255, 0, 0, 0.2) !important;
}

[data-theme="field"] .data-source-corner-tag:hover,
[data-theme="field"] a[id*="json-link"]:hover,
[data-theme="field"] a[id*="txt-link"]:hover,
[data-theme="field"] #banner-time-info-button:hover,
[data-theme="field"] #banner-timezone-toggle-button:hover {
  background-color: rgba(255, 0, 0, 0.2) !important;
}

/* ========== STATUS BADGES AND PILLS ========== */

/* Status Badge - Reusable badge for status indicators (trend, max, observed, etc.) */
.dashboard-status-badge {
  position: absolute;
  top: 1.75rem; /* top-7 equivalent */
  right: 0;
  padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
  font-size: 0.625rem; /* text-[10px] */
  font-weight: 500; /* font-medium */
  border-radius: 0 0 0 0.375rem; /* rounded-tl-md rounded-bl-md */
  background-color: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  border-top: 1px solid hsl(var(--border) / 0.5);
  border-left: 1px solid hsl(var(--border) / 0.5);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  border-right: none;
  z-index: 10;
}

/* Status Badge - Second row (for multiple badges) */
.dashboard-status-badge.second-row {
  top: 3.5rem; /* top-14 equivalent */
}

/* Status Badge - Third row */
.dashboard-status-badge.third-row {
  top: 5.25rem; /* top-21 equivalent */
}

/* Activity Badge - Bottom left status badges */
.dashboard-activity-badge {
  position: absolute;
  top: 8rem; /* top-32 equivalent */
  left: 0;
  padding-left: 3%;
  padding-right: 0.625rem; /* pr-2.5 */
  padding-top: 0.25rem; /* py-1 */
  padding-bottom: 0.25rem;
  font-size: 0.6875rem; /* text-[11px] */
  font-weight: 500; /* font-medium */
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: none;
  border-right: none;
  z-index: 10;
}

/* Trend Pill - Specific styling for trend indicators */
.dashboard-trend-pill {
  position: absolute;
  top: 1.75rem; /* top-7 */
  right: 0;
  padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
  font-size: 0.625rem; /* text-[10px] */
  font-weight: 500; /* font-medium */
  border-radius: 0 0 0 0.375rem; /* rounded-tl-md rounded-bl-md */
  background-color: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  border-top: 1px solid hsl(var(--border) / 0.5);
  border-left: 1px solid hsl(var(--border) / 0.5);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  border-right: none;
  z-index: 10;
}

/* ========== DATA LIVE BADGE ========== */

/* Data Live Badge - Shows "Live Data" and update time */
.dashboard-live-badge,
#hero-live-badge,
[id="hero-live-badge"],
div[id*="live-badge"]:not([id*="wrapper"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dashboard-live-badge svg,
#hero-live-badge svg,
[id="hero-live-badge"] svg,
#hero-live-icon,
#hero-time-icon {
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
}

.dashboard-live-badge .dashboard-live-icon,
#hero-live-badge #hero-live-icon {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dashboard-live-badge .dashboard-live-text,
.dashboard-live-badge .dashboard-time-value,
#hero-live-badge #hero-live-text,
#hero-live-badge #hero-time-value,
[id="hero-live-text"],
[id="hero-time-value"] {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--primary));
}

.dashboard-live-badge .dashboard-divider,
#hero-live-badge .h-5.w-px {
  height: 1.25rem;
  width: 1px;
  background-color: hsl(var(--primary) / 0.5);
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
  flex-shrink: 0;
}

/* Light Theme - Data Live Badge */
.light-theme .dashboard-live-badge,
.light-theme #hero-live-badge {
  background-color: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.2);
}

/* Field Mode - Data Live Badge */
[data-theme="field"] .dashboard-live-badge,
[data-theme="field"] #hero-live-badge {
  background: rgba(255, 0, 0, 0.1) !important;
  border-color: rgba(255, 0, 0, 0.2) !important;
  color: #ff0000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="field"] .dashboard-live-badge svg,
[data-theme="field"] .dashboard-live-badge .dashboard-live-text,
[data-theme="field"] .dashboard-live-badge .dashboard-time-value,
[data-theme="field"] #hero-live-badge svg,
[data-theme="field"] #hero-live-badge #hero-live-text,
[data-theme="field"] #hero-live-badge #hero-time-value {
  color: #ff0000 !important;
}

[data-theme="field"] .dashboard-live-badge .dashboard-divider,
[data-theme="field"] #hero-live-badge .h-5.w-px {
  background-color: rgba(255, 0, 0, 0.5) !important;
}

/* ========== LOCATION PILL ========== */

/* Location Pill - Shows user location or location button */
/* Matches exact styling of hero-live-badge and time pills for consistent height and appearance */
.dashboard-location-pill,
#hero-location-pill,
#hero-location-button,
#hero-live-badge-wrapper > div[x-show*="userLocation"],
#hero-live-badge-wrapper > button[x-show*="!userLocation"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.25rem 0.75rem !important; /* py-1 px-3 - matches hero-live-badge */
  border-radius: 9999px !important;
  background-color: hsl(var(--primary) / 0.1) !important;
  border: 1px solid hsl(var(--primary) / 0.2) !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  font-size: 0.75rem !important; /* text-xs - matches hero-live-badge */
  font-weight: 500 !important; /* font-medium - matches hero-live-badge */
  height: auto !important;
  min-height: auto !important;
  line-height: 1.5 !important;
}

.dashboard-location-pill svg,
#hero-location-pill svg,
#hero-location-button svg,
#hero-live-badge-wrapper > div[x-show*="userLocation"] svg,
#hero-live-badge-wrapper > button[x-show*="!userLocation"] svg {
  height: 0.75rem !important; /* h-3 - matches hero-live-badge icons */
  width: 0.75rem !important; /* w-3 - matches hero-live-badge icons */
  flex-shrink: 0 !important;
}

.dashboard-location-pill span,
#hero-location-pill span,
#hero-location-button span,
#hero-live-badge-wrapper > div[x-show*="userLocation"] span,
#hero-live-badge-wrapper > button[x-show*="!userLocation"] span {
  font-size: 0.75rem !important; /* text-xs - matches hero-live-badge text */
  font-weight: 500 !important; /* font-medium - matches hero-live-badge text */
  color: hsl(var(--primary)) !important;
  line-height: 1.5 !important;
}

.dashboard-location-pill:hover,
#hero-location-button:hover,
#hero-live-badge-wrapper > button[x-show*="!userLocation"]:hover {
  background-color: hsl(var(--primary) / 0.2) !important;
  transition: background-color 0.2s ease !important;
}

/* Light Theme - Location Pill */
.light-theme .dashboard-location-pill,
.light-theme #hero-location-pill,
.light-theme #hero-location-button,
.light-theme #hero-live-badge-wrapper > div[x-show*="userLocation"],
.light-theme #hero-live-badge-wrapper > button[x-show*="!userLocation"] {
  background-color: hsl(var(--primary) / 0.1) !important;
  border-color: hsl(var(--primary) / 0.2) !important;
}

/* Field Mode - Location Pill */
[data-theme="field"] .dashboard-location-pill,
[data-theme="field"] #hero-location-pill,
[data-theme="field"] #hero-location-button,
[data-theme="field"] #hero-live-badge-wrapper > div[x-show*="userLocation"],
[data-theme="field"] #hero-live-badge-wrapper > button[x-show*="!userLocation"] {
  background: rgba(255, 0, 0, 0.1) !important;
  border-color: rgba(255, 0, 0, 0.2) !important;
  color: #ff0000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="field"] .dashboard-location-pill svg,
[data-theme="field"] .dashboard-location-pill span,
[data-theme="field"] #hero-location-pill svg,
[data-theme="field"] #hero-location-pill span,
[data-theme="field"] #hero-location-button svg,
[data-theme="field"] #hero-location-button span,
[data-theme="field"] #hero-live-badge-wrapper > div[x-show*="userLocation"] svg,
[data-theme="field"] #hero-live-badge-wrapper > div[x-show*="userLocation"] span,
[data-theme="field"] #hero-live-badge-wrapper > button[x-show*="!userLocation"] svg,
[data-theme="field"] #hero-live-badge-wrapper > button[x-show*="!userLocation"] span {
  color: #ff0000 !important;
}

/* ========== DASHBOARD TAB MENU BAR ========== */

/* Tab Menu Bar - View mode selector (Standard/Compact/Focus) */
.dashboard-tab-menu,
#hero-tab-menu-bar,
[id="hero-tab-menu-bar"],
div[id*="tab-menu"] {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid hsl(var(--primary) / 0.2);
  background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2), hsl(var(--chart-2) / 0.2));
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* Tab Buttons - Base Styling */
.dashboard-tab-menu button,
#hero-tab-menu-bar button,
[id="hero-tab-menu-bar"] button,
div[id*="tab-menu"] button,
#hero-view-standard-button,
#hero-view-compact-button,
#hero-view-focus-button,
#hero-auto-refresh-button {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  flex-shrink: 1;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  transition: all 0.2s;
  font-size: 0.75rem;
}

/* Tab Buttons - Inactive State */
.dashboard-tab-menu button,
#hero-tab-menu-bar button {
  background: transparent;
  border-bottom-color: transparent;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.dashboard-tab-menu button:hover,
#hero-tab-menu-bar button:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--primary) / 0.05);
}

/* Tab Buttons - Active State */
.dashboard-tab-menu button.dashboard-tab-active,
.dashboard-tab-menu button[class*="bg-gradient-to-br"],
.dashboard-tab-menu button[class*="border-primary"],
#hero-tab-menu-bar button.bg-gradient-to-br,
#hero-tab-menu-bar button[class*="bg-gradient-to-br"],
#hero-tab-menu-bar button.border-primary,
#hero-tab-menu-bar button[class*="border-primary"] {
  background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2), hsl(var(--chart-2) / 0.2)) !important;
  border-bottom-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  font-weight: 700 !important;
}

/* Tab Buttons - Active State Text */
.dashboard-tab-menu button.dashboard-tab-active span,
.dashboard-tab-menu button[class*="font-bold"] span,
#hero-tab-menu-bar button.font-bold span,
#hero-tab-menu-bar button[class*="font-bold"] span {
  font-weight: 700 !important;
  color: hsl(var(--primary)) !important;
}

/* Tab Icons */
.dashboard-tab-menu button svg,
#hero-tab-menu-bar button svg {
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
}

/* Tab Icons - Active State */
.dashboard-tab-menu button.dashboard-tab-active svg,
.dashboard-tab-menu button[class*="text-primary"] svg,
#hero-tab-menu-bar button.text-primary svg,
#hero-tab-menu-bar button[class*="text-primary"] svg {
  color: hsl(var(--primary)) !important;
}

/* Tab Icons - Inactive State */
.dashboard-tab-menu button:not(.dashboard-tab-active) svg,
.dashboard-tab-menu button[class*="text-muted-foreground"] svg,
#hero-tab-menu-bar button.text-muted-foreground svg,
#hero-tab-menu-bar button[class*="text-muted-foreground"] svg {
  color: hsl(var(--muted-foreground)) !important;
}

/* Light Theme - Tab Menu Bar */
.light-theme .dashboard-tab-menu,
.light-theme #hero-tab-menu-bar {
  border-bottom-color: hsl(var(--primary) / 0.2);
  background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2), hsl(var(--chart-2) / 0.2));
}

.light-theme .dashboard-tab-menu button,
.light-theme #hero-tab-menu-bar button {
  color: hsl(var(--muted-foreground));
}

.light-theme .dashboard-tab-menu button:hover,
.light-theme #hero-tab-menu-bar button:hover {
  color: hsl(var(--foreground));
}

.light-theme .dashboard-tab-menu button.dashboard-tab-active,
.light-theme .dashboard-tab-menu button[class*="bg-gradient-to-br"],
.light-theme #hero-tab-menu-bar button.bg-gradient-to-br,
.light-theme #hero-tab-menu-bar button[class*="bg-gradient-to-br"] {
  background: linear-gradient(to bottom right, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.2), hsl(var(--chart-2) / 0.2));
  border-bottom-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

/* Field Mode - Tab Menu Bar */
[data-theme="field"] .dashboard-tab-menu,
[data-theme="field"] #hero-tab-menu-bar {
  border-bottom-color: rgba(255, 0, 0, 0.2) !important;
  background: transparent !important;
}

[data-theme="field"] .dashboard-tab-menu button,
[data-theme="field"] #hero-tab-menu-bar button {
  color: var(--text-muted-field) !important;
  border-bottom-color: transparent !important;
}

[data-theme="field"] .dashboard-tab-menu button:hover,
[data-theme="field"] #hero-tab-menu-bar button:hover {
  color: var(--text-field) !important;
  background-color: rgba(255, 0, 0, 0.05) !important;
}

[data-theme="field"] .dashboard-tab-menu button.dashboard-tab-active,
[data-theme="field"] .dashboard-tab-menu button[class*="bg-gradient-to-br"],
[data-theme="field"] #hero-tab-menu-bar button.bg-gradient-to-br,
[data-theme="field"] #hero-tab-menu-bar button[class*="bg-gradient-to-br"],
[data-theme="field"] #hero-tab-menu-bar button.border-primary {
  background: transparent !important;
  border-bottom-color: #ff0000 !important;
  border-bottom-width: 4px !important;
  color: #ff0000 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

[data-theme="field"] .dashboard-tab-menu button svg,
[data-theme="field"] #hero-tab-menu-bar button svg {
  color: inherit !important;
}

[data-theme="field"] .dashboard-tab-menu button.dashboard-tab-active span,
[data-theme="field"] #hero-tab-menu-bar button.font-bold span {
  font-weight: 700 !important;
}

/* Progress bars red in field mode */
[data-theme="field"] #kp-index-progress-bar,
[data-theme="field"] #aurora-intensity-progress-bar,
[data-theme="field"] #hpi-banner-progress-bar,
[data-theme="field"] #div-bg-primary {
  background-color: #ff0000 !important;
}

/* Mobile Responsive - Tab Menu Bar */
@media (max-width: 640px) {
  .dashboard-tab-menu,
  #hero-tab-menu-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: visible !important;
  }
  
  .dashboard-tab-menu button,
  #hero-tab-menu-bar button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ========== END DASHBOARD CSS ========== */