/*
--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6

- Letter spacing
-0.5px
0.75px

--- 02 COLORS

- Primary: #1e40af
    - Blue: #53629E
    - Green: #016B61
    - Brown: #722323

- Tints:
    - Hover: #3b82f6

- Gradients:
    - Purple: #dbeafe
    - Blue: #E7F6F2
    - Green: #E3FEF7
    - Brown: #fff0f3
    - Orange: #FCEFCB

    - Header:
        - Dark: #dbeafe
        - Light: #FFF7F3

- Shades:

- Accents:


- Greys
    - Light-grey: #777
    - Dark-grey: #555

- Whites
    - White: #FFF

NB: Genarted from tintsandshades.com website

--- 05 SHADOWS

0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 10px
Medium: 12px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5% !important;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

/* **************************************
VARIABLES
****************************************/

:root {
  --color-nav-links: #111;
  --bg-clr-menu-dropdown: #fff;
  --clr-menu-item: #111;
  --clr-menu-item-hover: #555;
  --bg-clr-menu-item: #fff;
  --bg-clr-menu-item-hover: #fff;
  --color-header-dark: #fdcffa;
  --color-header-light: #fff7f3;
  --color-primary: #1d4ed8;
  --color-primary-hover: #3b82f6;
  --color-white: #fff;
  --theme-primary: #fff;
  --title-clr-graph: #333;
  --col-border: #dee2e6;
  --box-shadow-sm: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
  --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  --box-shadow-lg: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.2);
  --color-lightest-grey: #999;
  --color-light-grey: #777;
  --color-dark-grey: #555;
  --color-darker-grey: #333;
  --color-black: #111;
  --color-dark-metric-1: #f5f0f8;
  --color-dark-metric-2: #f5fbfa;
  --color-dark-metric-3: #f5fdfb;
  --color-dark-metric-4: #fffbfc;
  --color-dark-metric-5: #fffcf3;
  --color-metric-icon-1: #640d5f;
  --color-metric-icon-2: #53629e;
  --color-metric-icon-3: #016b61;
  --color-metric-icon-4: #722323;
  --color-metric-icon-5: #a72703;
  --color-metric-icon-wrapper-1: #e9a5f1;
  --color-metric-icon-wrapper-2: #d6f4ed;
  --color-metric-icon-wrapper-3: #d1f8ef;
  --color-metric-icon-wrapper-4: #fcefcb;
  --color-metric-icon-wrapper-5: #ffe797;

  --txt-clr-btn-export: #fff;
  --txt-clr-modal: #111;
  --txt-clr-table-header: #333;
  --txt-clr-ag-header: #111;
  --bg-clr-ag-header: rgb(248, 248, 248);
  --bg-clr-ag-header-hover: rgb(243, 243, 243);
  --txt-clr-ag-row: #111;
  --txt-clr-ag-paging: #111;
  --txt-clr-text-input: #111;
  --border-clr-ag-grid: #dee2e6;
  --txt-clr-col-modal-detail: #1d4ed8;
  --txt-clr-col-value-detail: #111;
}

:root[data-theme="dark"] {
  --color-nav-links: #8a8f96;
  --clr-menu-item: #b0b3b8;
  --clr-menu-item-hover: #d1d5db;
  --color-header-dark: #1e3a5f;       /* darker pastel for header */
  --color-header-light: #3b2a36;      /* muted dark background */
  --color-primary: #60a5fa;           /* brighter primary accent */
  --color-primary-hover: #93c5fd;     /* hover accent lighter */
  --color-white: #c9cdd3;             /* base text dark - muted gray */
  --theme-primary: #03071e;
  --title-clr-graph: #b0b3b8;
  --col-border: #14213d;

  /* Shadows softer on dark backgrounds */
  --box-shadow-sm: 0 0.2rem 0.4rem rgba(255, 255, 255, 0.1);
  --box-shadow-md: 0 0.5rem 1rem rgba(255, 255, 255, 0.1);
  --box-shadow-lg: 0 1.2rem 2.4rem rgba(255, 255, 255, 0.1);

  /* Greys inverted for readability */
  --color-lightest-grey: #b0b3b8;
  --color-light-grey: #a0a4ab;
  --color-dark-grey: #9ca0a7;
  --color-darker-grey: #8a8f96;
  --color-black: #000;

  /* Metrics - darker backgrounds, lighter text */
--color-dark-metric-1: #3a1f45;
--color-dark-metric-2: #2a056b;
--color-dark-metric-3: #193e39;
--color-dark-metric-4: #4a1e24;
--color-dark-metric-5: #4a3212;

  /* Metric icons - brighter for contrast */
  --color-metric-icon-1: #d39ce8;
  --color-metric-icon-2: #1E90FF;
  --color-metric-icon-3: #3ee6d6;
  --color-metric-icon-4: #ff7d7d;
  --color-metric-icon-5: #ffb54b;

  /* Metric icon wrappers - muted dark backgrounds */
  --color-metric-icon-wrapper-1: #1e3a5f;
  --color-metric-icon-wrapper-2: #5b5b7e;
  --color-metric-icon-wrapper-3: #2a4b46;
  --color-metric-icon-wrapper-4: #4b4b2b;
  --color-metric-icon-wrapper-5: #66532a;

  --txt-clr-btn-export: #c9cdd3;
  --txt-clr-modal: #b0b3b8;
  --txt-clr-table-header: #b0b3b8;
  --txt-clr-ag-header: #b0b3b8;
  --bg-clr-ag-header: #0a1628;
  --bg-clr-ag-header-hover: #0f1f38;
  --txt-clr-ag-row: #b0b3b8;
  --txt-clr-ag-paging: #b0b3b8;
  --txt-clr-text-input: #b0b3b8;
  --border-clr-ag-grid: #14213d;
  --txt-clr-col-modal-detail: #60a5fa;
  --txt-clr-col-value-detail: #b0b3b8;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #444;
  background-color: var(--theme-primary);

  overflow-x: hidden;
}

.container {
  height: 100vh;
  max-width: 100%;
  padding-bottom: 3.6rem;
  background-color: var(--theme-primary);

  --bs-gutter-x: 0;
}

#theme-toggle {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
}

.header {
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-image: linear-gradient(to right, var(--color-header-dark), var(--color-header-light)); */
  padding: 1rem 2rem;
  border-radius: 1rem;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  color: var(--color-nav-links);
  gap: 3.6rem;
}

.header p {
  font-size: 1.8rem;
  letter-spacing: .1rem;
  color: var(--color-nav-links);
  cursor: pointer;
  font-weight: 500;
}

.header p:hover {
  color: var(--color-light-grey);
  cursor: pointer;
}

.header div p {
  margin-bottom: 0;
}

/* .aria-haspopup p {
  margin-bottom: 0;
} */

/* General Styles */
.app-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Mobile Top Navbar - Hidden by default on desktop */
.mobile-top-navbar {
    display: none;
}

/* Sidebar Styles */
.sidebar {
    width: 36rem;
    background: linear-gradient(135deg, #fdfcfe 0%, #faf9fc 50%, #f8f7fb 100%);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0.2rem 0 1rem rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-right: 0.1rem solid var(--col-border);
}

.sidebar.collapsed {
    width: 9rem;
}

.sidebar::-webkit-scrollbar {
    width: 0.6rem;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--col-border);
    border-radius: 0.3rem;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Sidebar Header */
.sidebar-header {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.1rem solid var(--col-border);
    min-height: 8rem;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdfcfe 0%, #faf9fc 50%, #f8f7fb 100%);
    z-index: 10;
}

.sidebar-logo {
    max-width: 28rem;
    height: auto;
    transition: all 0.3s ease;
}

.sidebar.collapsed .sidebar-logo {
    max-width: 7rem;
    max-height: 7rem;
    object-fit: contain;
}

/* Sidebar Content Area (scrollable) */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-content::-webkit-scrollbar {
    width: 0.6rem;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--col-border);
    border-radius: 0.3rem;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Sidebar Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    gap: 0.5rem;
}

.sidebar-link,
.sidebar-nav-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.6rem 1.4rem 1.6rem 2.2rem;
    color: #000 !important;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    border-left: 0.5rem solid transparent;
    border-radius: 0 0.8rem 0.8rem 0;
    margin: 0.2rem 0;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.sidebar-nav-item-content {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap !important;
}

.sidebar-nav-item:hover,
.sidebar-link:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

.sidebar-nav-item.active {
    background-color: rgba(59, 130, 246, 0.2);
    border-left-color: rgba(59, 130, 246, 0.7);
    color: #2563eb;
}

.sidebar.collapsed .sidebar-nav-item,
.sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 1.2rem;
}

.sidebar.collapsed .nav-text {
    display: none;
}

.nav-text {
    white-space: nowrap !important;
    transition: opacity 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    font-size: 1.4rem !important;
    font-weight: 450 !important;
    color: #1a1a2e !important;
}

/* Submenu Header */
.submenu-header {
    padding: 1rem 0;
    border-bottom: 0.1rem solid var(--col-border);
    margin-bottom: 1rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fdfcfe 0%, #faf9fc 50%, #f8f7fb 100%);
    z-index: 10;
}

.back-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 2.2rem 1.6rem 2.2rem;
    padding-right: 2.8rem;
    color: var(--color-nav-links);
    cursor: pointer;
    margin-bottom: 1rem;
    border-bottom: 0.1rem solid var(--col-border);
    padding-bottom: 1.5rem;
    transition: all 0.3s ease;
    border-left: 0.5rem solid transparent;
    border-radius: 0 0.8rem 0.8rem 0;
}

.back-nav:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

.back-text {
    font-size: 1.8rem;
    font-weight: 600;
    color: #4a4a6a;
}

/* Chevron Icons */
.nav-chevron {
    transition: transform 0.3s ease;
    color: #3d3d5c;
    flex-shrink: 0 !important;
    min-width: 20px !important;
}

.sidebar.collapsed .nav-chevron {
    display: none;
}

.sidebar.collapsed .back-text {
    display: none;
}

.sidebar.collapsed .back-nav {
    justify-content: center;
    padding: 1.2rem;
}

/* Children Container */
.children-container {
    padding: 2rem 0;
    flex: 1;
}

/* Children Links */
.children-links {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0;
    margin: 0;
}

.children-links.show {
    display: flex;
    padding: 0;
}

/* Nested children (e.g., ITGlue under IT Operations) */
.children-links.nested-children {
    padding-left: 0;
    margin-top: 0.5rem;
}

.children-links.nested-children.show {
    display: flex;
}

.children-links.nested-children .child-nav-item {
    padding-left: 3.5rem;
}

/* Nested submenu (for Fortigate under Firewall Status) */
.nested-submenu {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0;
    margin: 0;
}

.nested-submenu.expanded {
    display: flex;
}

.nested-submenu.collapsed {
    display: none;
}

.nested-submenu .child-nav-item {
    padding-left: 3.5rem;
}

.child-link {
    text-decoration: none;
}

.child-nav-item {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem 2.2rem;
    padding-right: 2.8rem;
    color: #1a1a2e;
    font-size: 1.4rem !important;
    font-weight: 450;
    border-radius: 0 0.8rem 0.8rem 0;
    transition: all 0.3s ease;
    cursor: pointer;
    border-left: 0.5rem solid transparent;
}

/* Prevent icons from shrinking when text wraps */
.child-nav-item svg {
    flex-shrink: 0;
}

/* Inactive / coming-soon nav items */
.child-nav-item-inactive {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

.child-link.nav-inactive {
    pointer-events: none;
    cursor: not-allowed !important;
}

.child-link:hover > .child-nav-item {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

/* Prevent hover styling on parent when nested children are hovered */
.child-link.submenu-trigger:hover > .child-nav-item {
    background-color: transparent !important;
    color: #2d2d45;
    border-left-color: transparent !important;
}

/* Only apply hover to nested children, not the parent trigger */
.child-link.submenu-trigger > .children-links .child-link:hover > .child-nav-item {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

.child-link.active .child-nav-item {
    background-color: rgba(59, 130, 246, 0.2);
    color: #2563eb;
    border-left-color: rgba(59, 130, 246, 0.7);
    font-weight: 500;
}

/* Collapsed state */
.sidebar.collapsed .child-nav-item {
    justify-content: center;
    padding: 1.2rem;
    gap: 0;
}

.sidebar.collapsed .child-nav-item span {
    display: none;
}

.sidebar.collapsed .children-links.show {
    display: flex;
}

.sidebar.collapsed .sidebar-nav-item-content {
    justify-content: center;
    gap: 0;
    flex: none;
    width: auto;
}

/* Client Roster Section Styles */
.client-roster-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.client-roster-section .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 2.2rem !important;
    padding-right: 1.4rem !important;
}

.sidebar.collapsed .client-roster-section .menu-item > div:first-child {
    justify-content: center;
    width: 100%;
}

.sidebar.collapsed .client-roster-section .menu-item {
    justify-content: center;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
}

/* Client roster child items - match parent size and alignment */
/* sidebar-nav-item has: padding-left 2.2rem + border-left 0.5rem = 2.7rem total */
.client-roster-section .child-link {
    padding-left: 2.2rem !important;
    padding-right: 1.4rem !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    margin-bottom: 0.5rem !important;
    border-left: 0.5rem solid transparent !important;
}

.client-roster-section .child-link span {
    font-size: 1.4rem !important;
    font-weight: 450;
}

/* Client icon badges - match parent icon size */
.client-icon-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.client-icon-client1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.client-icon-client2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.client-icon-client3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.client-icon-client4 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.client-icon-client5 {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
}

.client-icon-client6 {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    color: white;
}

.client-icon-client7 {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

/* Collapsed state - show only icon badges centered */
.sidebar.collapsed .client-roster-section .child-link {
    justify-content: center;
}

.sidebar.collapsed .client-roster-section .client-icon-badge {
    margin: 0 auto;
}

/* Active client section styling */
.active-client-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.active-client-section .active-badge {
    transition: opacity 0.3s ease;
}

/* Align active client with roster items in expanded state */
/* sidebar-nav-item has: padding-left 2.2rem + border-left 0.5rem = 2.7rem total */
.active-client-display {
    padding-left: 2.2rem !important;
    padding-right: 1.4rem !important;
    margin: 0 !important;
    border-left: 0.5rem solid transparent !important;
    transform: none !important;
}

.active-client-display:hover {
    transform: none !important;
}

.sidebar.collapsed .active-client-section .active-badge {
    display: none;
}

/* Center active client in collapsed state - match child-link behavior */
.sidebar.collapsed .active-client-display {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.sidebar.collapsed .active-client-content {
    justify-content: center !important;
    width: 100%;
}

.sidebar.collapsed .active-client-section .client-icon-badge {
    margin: 0 auto;
}

/* Collapse Toggle Button */
.collapse-toggle {
    background: var(--color-primary);
    border: none;
    color: var(--color-white);
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    right: -1.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
}

.collapse-toggle:hover {
    background: var(--color-primary-hover);
    transform: translateY(-50%) scale(1.1);
}

/* Sidebar Footer */
.sidebar-footer {
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #fdfcfe 0%, #faf9fc 50%, #f8f7fb 100%);
    border-top: 0.1rem solid var(--col-border);
    padding: 0.3rem 1.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    z-index: 20;
    width: 100%;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.3rem 0.6rem !important;
    gap: 0 !important;
}

/* Theme Toggle Row */
.footer-theme-toggle-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar.collapsed #sidebar-footer > div:first-child {
    justify-content: center !important;
}

/* Profile Section Row */
.profile-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sidebar.collapsed #sidebar-footer > div:last-child {
    justify-content: center !important;
}

.profile-avatar {
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.profile-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
}

.sidebar.collapsed .profile-info {
    display: none !important;
}

.profile-name {
    font-size: calc(1.2rem + 1px) !important;
    font-weight: 600 !important;
    color: #4a4a6a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
}

.profile-role {
    font-size: 1rem !important;
    color: #8a8aa0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Logout Dropdown */
.logout-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border-radius: 0.8rem;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    margin-bottom: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s ease;
    z-index: 10000;
    min-width: 16rem;
}

.profile-section:hover .logout-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.logout-dropdown-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    color: #4a4a6a;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-dropdown-item:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.logout-dropdown-item svg {
    width: 2rem;
    height: 2rem;
}

.sidebar.collapsed .logout-dropdown {
    left: 0;
    transform: translateY(1rem);
}

.sidebar.collapsed .profile-section:hover .logout-dropdown {
    transform: translateY(0);
}

[data-theme="dark"] .logout-dropdown {
    background: #2d2d3a;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .logout-dropdown-item {
    color: #e0e0e0;
}

[data-theme="dark"] .logout-dropdown-item:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #ff6b6b;
}

/* Footer Spacer */
.footer-spacer {
    flex: 1 !important;
}

.sidebar.collapsed .footer-spacer {
    display: none !important;
}

/* Theme Toggle Wrapper and Button */
.footer-theme-toggle-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.sidebar.collapsed .footer-theme-toggle-wrapper {
    justify-content: center !important;
}

.theme-toggle-text {
    display: inline-block !important;
    font-size: calc(1.2rem + 1px) !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .theme-toggle-text {
    display: none !important;
}

[data-theme="dark"] .theme-toggle-text {
    color: #9ca3af !important;
}

.footer-theme-toggle {
    background: transparent !important;
    border-radius: 0.8rem !important;
    transition: all 0.3s ease !important;
    color: #ff9500 !important;
    padding: 0.3rem !important;
}

.footer-theme-toggle:hover {
    background: rgba(255, 149, 0, 0.1) !important;
    transform: scale(1.05) !important;
}

.footer-theme-toggle:active {
    transform: scale(0.95) !important;
}

.footer-theme-toggle svg {
    color: #ff9500 !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
}

/* Content Wrapper */
.content-wrapper {
    margin-left: 36rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 36rem);
    transition: all 0.3s ease;
    min-height: 100vh;
}

.sidebar.collapsed ~ .content-wrapper {
    margin-left: 9rem;
    width: calc(100% - 9rem);
}

/* Top Header */
.top-header {
    background: var(--theme-primary);
    padding: 2rem 3rem;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sidebar-toggle-btn {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: rgba(59, 130, 246, 0.9);
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
    box-shadow: 0 0.4rem 1.2rem rgba(59, 130, 246, 0.15);
}

.page-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.page-title:empty {
    display: none;
}

/* Hide the entire top header when page title is empty */
.top-header:has(.page-title:empty) {
    display: none;
}

/* Main Content */
.main-content {
    flex: 1;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Global text size reductions for main content */
.main-content h1,
.main-content h1.page-title,
.main-content .page-title {
    font-size: 1.8rem !important;
}

.main-content h2 {
    font-size: 1.5rem !important;
}

.main-content h3 {
    font-size: 1.3rem !important;
}

.main-content h4 {
    font-size: calc(1.2rem + 1px) !important;
}

.main-content h5, .main-content h6 {
    font-size: 1.1rem !important;
}

.main-content p.page-subtitle,
.main-content .page-subtitle {
    font-size: calc(1.2rem + 1px) !important;
}

.main-content label {
    font-size: 1.1rem !important;
}

/* Plotly chart text overrides */
.main-content .plotly .gtitle,
.main-content .js-plotly-plot .plotly .gtitle {
    font-size: calc(1.2rem + 1px) !important;
}

.main-content .plotly .xtitle,
.main-content .plotly .ytitle {
    font-size: 1rem !important;
}

.main-content .plotly .xtick text,
.main-content .plotly .ytick text {
    font-size: 1rem !important;
}

.main-content .plotly .legend text {
    font-size: 1rem !important;
}

/* Dark Theme */
[data-theme="dark"] body {
    background-color: var(--theme-primary);
    color: var(--color-nav-links);
}

[data-theme="dark"] .sidebar {
    background: linear-gradient(135deg, #0a0818 0%, #0f0d1e 50%, #141229 100%);
    border-right-color: var(--col-border);
}

[data-theme="dark"] .sidebar-header {
    background: linear-gradient(135deg, #0a0818 0%, #0f0d1e 50%, #141229 100%);
    border-bottom-color: var(--col-border);
}

[data-theme="dark"] .submenu-header {
    background: linear-gradient(135deg, #0a0818 0%, #0f0d1e 50%, #141229 100%);
    border-bottom-color: var(--col-border);
}

[data-theme="dark"] .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="dark"] .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="dark"] .sidebar-footer {
    background: linear-gradient(135deg, #0a0818 0%, #0f0d1e 50%, #141229 100%);
    border-top-color: var(--col-border);
}

[data-theme="dark"] .nav-chevron {
    color: var(--color-nav-links);
}

[data-theme="dark"] .footer-theme-toggle {
    color: #ffc000 !important;
}

[data-theme="dark"] .footer-theme-toggle svg {
    color: #ffc000 !important;
}

[data-theme="dark"] .footer-theme-toggle:hover {
    background: rgba(255, 192, 0, 0.15) !important;
}

[data-theme="dark"] .top-header {
    background-color: var(--theme-primary);
    border-bottom: 1px solid var(--col-border);
}

[data-theme="dark"] .page-title {
    color: var(--color-nav-links);
}

/* Page Subtitle */
.page-subtitle {
    color: var(--color-lightest-grey);
}

/* AD Client 4 Date Picker */
.ad-client4-date-picker input {
    border: 1.5px solid var(--col-border) !important;
    background-color: var(--theme-primary) !important;
    color: var(--color-nav-links) !important;
    font-weight: 600;
    font-size: 11px;
    padding: 0.75rem 1rem;
    padding-left: 4.5rem;
    transition: all 0.2s ease;
}

.ad-client4-date-picker input:hover {
    border-color: #3b82f6 !important;
}

.ad-client4-date-picker input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ad-client4-date-picker input::placeholder {
    font-size: 0.9rem;
    color: #6b7280 !important;
}

.ad-client4-date-picker .mantine-DatePickerInput-section {
    padding-left: 0.85rem;
}

[data-theme="dark"] .ad-client4-date-picker input::placeholder {
    color: #9ca3af !important;
}

[data-theme="dark"] .main-content {
    background-color: var(--theme-primary);
}

[data-theme="dark"] .sidebar-nav-item,
[data-theme="dark"] .sidebar-link {
    color: var(--color-nav-links);
}

[data-theme="dark"] .sidebar-nav-item:hover,
[data-theme="dark"] .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .child-nav-item {
    color: var(--color-nav-links);
}

[data-theme="dark"] .child-link:hover > .child-nav-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Prevent hover styling on parent when nested children are hovered (dark theme) */
[data-theme="dark"] .child-link.submenu-trigger:hover > .child-nav-item {
    background-color: transparent !important;
    color: var(--color-nav-links);
    border-left-color: transparent !important;
}

/* Only apply hover to nested children, not the parent trigger (dark theme) */
[data-theme="dark"] .child-link.submenu-trigger > .children-links .child-link:hover > .child-nav-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .profile-name,
[data-theme="dark"] .back-text {
    color: var(--color-nav-links);
}

[data-theme="dark"] .profile-role {
    color: var(--color-lightest-grey);
}

/* Dark theme - Metrics, Charts, and Tables */
[data-theme="dark"] .metric {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1), 0 3px 6px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .graph-col {
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .table-row {
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .table-row:hover {
    border-color: #ffffff;
}

/* Tooltip Styles */
.nav-tooltip {
    font-size: 1.6rem !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 0.8rem !important;
}

.nav-tooltip .tooltip-inner {
    font-size: 1.6rem !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 0.8rem !important;
    max-width: none !important;
    background-color: #2563eb !important;
}

.child-tooltip {
    font-size: 1.6rem !important;
    padding: 0.8rem 1.2rem !important;
}

/* Bootstrap tooltip positioning and animation fixes */
.tooltip {
    pointer-events: none !important;
    z-index: 10000 !important;
}

/* Reduce gap between link and tooltip */
.tooltip.bs-tooltip-right,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] {
    margin-left: 0.2rem !important;
}

/* Smooth fade animation */
.tooltip.show {
    opacity: 1 !important;
    transition: opacity 0.2s ease-in-out !important;
}

.tooltip.fade:not(.show) {
    opacity: 0 !important;
    transition: opacity 0.15s ease-in-out !important;
}

.tooltip-inner {
    transition: none !important;
}

/* Ensure tooltips disappear immediately on mouse leave */
.tooltip[style*="display: none"] {
    display: none !important;
}


.mantine-Menu-item {
  margin-bottom: 1.2rem;
  letter-spacing: .1rem;
  color: var(--clr-menu-item);
  background-color: var(--theme-primary);
}

.mantine-Menu-item:hover {
  color: var(--clr-menu-item-hover);
  background-color: var(--theme-primary);
}

.mantine-Anchor-root {
  margin-bottom: 1rem;
}

.mantine-Anchor-root:link,
.mantine-Anchor-root:visited {
  color: var(--color-nav-links);
  text-decoration: none;
  font-weight: 500;
  display: block;
  color: inherit;
  margin-bottom: 0;
}

.mantine-Anchor-root:hover,
.mantine-Anchor-root:active {
  color: var(--color-light-grey);
  font-weight: 500;
  text-decoration: none;
  display: block;
  color: inherit;
  margin-bottom: 0;
}

.header-logo {
  height: 6rem;
  width: auto;
}

.header-heading {
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--color-primary);
}

.header-profile-btn {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  cursor: pointer;
}

.profile-menu-item {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* Second Navbar Styles */
.second-navbar {
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background-color: var(--theme-primary);
  overflow: hidden; /* Prevent parent overflow */
  position: relative;
}

.second-navbar-links-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
  position: relative;
}

.navbar-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--theme-primary);
  border: 2px solid var(--col-border);
  flex-shrink: 0;
  z-index: 10;
}

.navbar-scroll-btn:hover {
  background-color: var(--color-dark-metric-1);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.navbar-scroll-btn svg {
  width: 2rem !important;
  height: 2rem !important;
  color: var(--clr-menu-item);
  fill: currentColor;
  stroke: currentColor;
}

.navbar-scroll-btn .iconify {
  width: 2rem !important;
  height: 2rem !important;
  color: var(--clr-menu-item) !important;
  display: inline-block !important;
  vertical-align: middle;
}

.navbar-scroll-btn * {
  pointer-events: none;
}

.navbar-scroll-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.second-navbar-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: .8rem;
  flex: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  max-width: 100%;
  min-width: 0; /* Important for flex child to shrink */
}

.second-navbar-links::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.second-navbar-right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-shrink: 0; /* Prevent right side from shrinking */
}

.second-navbar .header-logo {
  flex-shrink: 0; /* Prevent logo from shrinking */
}

.navbar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.05);
}

.navbar-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.navbar-toggle-btn svg {
  width: 2.4rem !important;
  height: 2.4rem !important;
  color: var(--color-nav-links);
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.second-navbar-link {
  text-decoration: none !important;
  color: var(--color-nav-links) !important;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Prevent links from shrinking */
}

.second-navbar-link:hover .second-navbar-item {
  background-color: rgba(59, 130, 246, 0.25);
  color: #2563eb;
}

.second-navbar-link.active .second-navbar-item {
  font-weight: 600;
  color: #2563eb;
}

.second-navbar-link.active .second-navbar-item::after {
  transform: scaleX(1);
  background-color: #2563eb;
}

.second-navbar-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem 0.8rem 0 0;
  background-color: transparent;
  transition: all 0.3s ease;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap; /* Prevent text wrapping */
  position: relative;
}

.second-navbar-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.6rem;
  right: 1.6rem;
  height: 0.3rem;
  background-color: transparent;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

.second-navbar-item svg {
  width: 2rem;
  height: 2rem;
}

/* Menu item styles */
.menu-item {
  cursor: pointer;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  color: var(--color-nav-links);
  font-weight: 500;
  margin-bottom: 0;
  transition: all 0.3s ease;
}

.menu-item:hover {
  color: var(--color-light-grey);
}

/* Dark theme specific styles */
:root[data-theme="dark"] .navbar-toggle-btn {
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .navbar-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] .navbar-scroll-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

:root[data-theme="dark"] .second-navbar-link:hover .second-navbar-item {
  background-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .second-navbar-link.active .second-navbar-item {
  color: var(--color-primary);
}

:root[data-theme="dark"] .second-navbar-link.active .second-navbar-item::after {
  background-color: var(--color-primary);
  transform: scaleX(1);
}

.page-title-div{
  max-width: 95%;
  margin: auto;
  color: var(--color-darker-grey);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
  padding: 2rem 1rem;
  margin-bottom: 3.6rem;
  border-radius: 1rem;
  background-image: linear-gradient(to left, var(--color-dark-metric-1), var(--theme-primary));
}

.page-title {
  animation: moveInLeft 1s ease-in-out;
  animation-fill-mode: both;
}

.top-navigation::-webkit-scrollbar {
  display: none; /* Chrome */
}

.top-navigation .mantine-NavLink-label {
  color: var(--color-white);
  font-size: 1.4rem;
}

.top-navigation .mantine-NavLink-section {
  color: var(--color-white);
}

.top-navigation .mantine-NavLink-root:link,
.top-navigation .mantine-NavLink-root:visited {
  text-decoration: none;
}

.top-navigation .mantine-NavLink-root:hover,
.top-navigation .mantine-NavLink-root:active {
  text-decoration: none;
  background-color: var(--color-primary);
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 0.3rem;
  margin-top: -0.2rem;
}

.top-navigation-home {
  margin-bottom: 0;
}

.metrics {
  max-width: 98%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 3.6rem;
  margin-bottom: 2.4rem;
}

.metric__div {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.metric {
  padding: 2.4rem 1.2rem;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.metrics-text {
  font-size: 1.2rem !important;
  color: var(--color-light-grey);
  font-weight: 600;
  letter-spacing: .1rem;
  margin-bottom: 0;
}

.metrics-value {
  font-size: 2.4rem !important;
  color: var(--color-darker-grey);
  font-weight: 600;
}

.metric--purple {
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark-metric-1),
    var(--theme-primary)
  );
  border-left: 4px solid var(--color-metric-icon-1);
}

.metric--blue {
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark-metric-2),
    var(--theme-primary)
  );
  border-left: 4px solid var(--color-metric-icon-2);
}

.metric--green {
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark-metric-3),
    var(--theme-primary)
  );
  border-left: 4px solid var(--color-metric-icon-3);
}

.metric--brown {
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark-metric-4),
    var(--theme-primary)
  );
  border-left: 4px solid var(--color-metric-icon-4);
}

.metric--orange {
  background-image: linear-gradient(
    to bottom right,
    var(--color-dark-metric-5),
    var(--theme-primary)
  );
  border-left: 4px solid var(--color-metric-icon-5);
}

.metric__icon--purple {
  color: var(--color-metric-icon-1);
}

.metric__icon--blue {
  color: var(--color-metric-icon-2);
}

.metric__icon--green {
  color: var(--color-metric-icon-3);
}

.metric__icon--brown {
  color: var(--color-metric-icon-4);
}

.metric__icon--orange {
  color: var(--color-metric-icon-5);
}

.metrics__icon-wrapper {
  border-radius: 50%;
  padding: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  height: 2.8rem;
}

.metrics__icon-wrapper--purple {
  background-color: var(--color-metric-icon-wrapper-1);
}

.metrics__icon-wrapper--blue {
  background-color: var(--color-metric-icon-wrapper-2);
}

.metrics__icon-wrapper--green {
  background-color: var(--color-metric-icon-wrapper-3);
}

.metrics__icon-wrapper--brown {
  background-color: var(--color-metric-icon-wrapper-4);
}

.metrics__icon-wrapper--orange {
  background-color: var(--color-metric-icon-wrapper-5);
}

/* Metric Background Icons */
.metric-background-icon {
  position: absolute !important;
  right: 0.8rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: 4rem !important;
  height: 4rem !important;
  max-width: 4rem !important;
  max-height: 4rem !important;
  min-width: 4rem !important;
  min-height: 4rem !important;
}

.metric > *:not(.metric-background-icon) {
  position: relative;
  z-index: 1;
}

.graphs-row {
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  margin-bottom: 2.4rem;

  flex-wrap: nowrap;
}

.graphs-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.graph-col {
  border-radius: 1rem;
  border: .01rem solid var(--col-border);
  padding: 2rem;
  color: var(--title-clr-graph);
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.06);
}

.graph__title-row {
  display: flex;
  align-items: center;
  letter-spacing: .05rem;
  justify-content: space-between;
}

.graph__icon {
  display: flex;
  align-items: center;
}

.graph-div {
  padding: 1rem;
  height: 18rem;
}

.graph-div-endpoints {
  padding: 1rem;
  height: 18rem;
}

.graph-row {
  padding: 1rem;
  height: 45rem;
}

.ag-theme-alpine {
    --ag-background-color: transparent !important;
    --ag-font-size: 1rem !important;
    --ag-font-family: 'Poppins' !important;
}

.ag-advanced-filter-header {
    background-color: transparent !important;
    padding: 0 !important;
  }

.ag-input-field-input.ag-text-field-input {
    height: 3rem !important;
    border-radius: 0.6rem !important;
}

.ag-theme-alpine .ag-header {
    background-color: transparent !important;
    border-bottom: none !important;
}

.ag-theme-alpine .ag-header-cell-text,
.ag-theme-alpine .ag-header-cell-label,
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell-label {
    color: var(--txt-clr-ag-header) !important;   /* <-- header text color */
    letter-spacing: 1px;
    font-size: 1.1rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ag-theme-alpine .ag-cell {
    font-size: calc(1.2rem + 1px) !important;
}

/* .ag-theme-alpine .ag-cell {
  letter-spacing: 1px;
  font-size: 1.4rem;
} */


/* Filter button/icon container */
.ag-theme-alpine .ag-floating-filter-button {
    color: var(--color-primary) !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.ag-theme-alpine .ag-floating-filter-button:hover {
    color: var(--color-primary-hover) !important;
    opacity: 1;
    transform: scale(1.1);
}

.ag-radio-button-label {
  color: var(--txt-clr-ag-header);
}

/* When filter is active/applied */
.ag-theme-alpine .ag-filter-active .ag-floating-filter-button {
    color: var(--color-bright-blue) !important;
    opacity: 1;
}

/* The actual filter icon glyph */
.ag-theme-alpine .ag-icon {
    color: inherit;
}

/* Floating filter full row */
.ag-theme-alpine .ag-floating-filter {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-clr-ag-grid) !important;
}

/* Floating filter input field */
.ag-theme-alpine .ag-floating-filter-input {
    background-color: transparent !important;
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
    border: none !important;
}

.ag-theme-alpine .ag-floating-filter-input:focus {
    border: 1px solid var(--color-primary) !important;
    border-radius: 0.4rem;
}

/* Filter menu icon styling */
.ag-theme-alpine .ag-icon-menu {
    color: var(--color-primary) !important;
}

/* ===== HEADER HAMBURGER MENU ICON ===== */

/* Hamburger menu button in header */
.ag-theme-alpine .ag-header-cell-menu-button {
    color: var(--color-primary) !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* Filter menu icon styling */
.ag-theme-alpine .ag-header-cell-menu-button:hover {
    color: var(--color-primary-hover) !important;
    opacity: 1;
    transform: scale(1.1);
}

.ag-theme-alpine .ag-header-cell-menu-button:hover {
    color: var(--color-primary-hover) !important;
    opacity: 1;
    transform: scale(1.1);
}

/* The hamburger icon itself */
.ag-theme-alpine .ag-icon-menu {
    color: inherit !important;
}

/* When column menu is open */
.ag-theme-alpine .ag-header-cell-menu-button-open {
    color: var(--color-bright-blue) !important;
    opacity: 1;
}

/* Sort icon in header */
.ag-theme-alpine .ag-sort-indicator-icon {
    color: var(--color-primary) !important;
}

/* Column resize handle */
.ag-theme-alpine .ag-header-cell-resize {
    color: var(--color-primary) !important;
    opacity: 0.5;
}

.ag-theme-alpine .ag-header-cell-resize:hover {
    opacity: 1;
}

.ag-theme-alpine .ag-row {
    background-color: transparent !important;
    color: var(--txt-clr-ag-row);
    font-size: calc(1.2rem + 1px) !important;
}

.ag-theme-alpine .ag-paging-panel {
    color: var(--txt-clr-ag-paging) !important;
    font-size: 1.1rem !important;
}

.ag-theme-alpine .ag-root-wrapper {
    border: none !important;
}

/* .ag-theme-alpine .ag-cell, */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-row {
    border-color: var(--border-clr-ag-grid) !important;   /* Change line color here */
}

/* ===== AG GRID FILTER DROPDOWN STYLING ===== */

/* Filter dropdown menu container */
.ag-theme-alpine .ag-menu {
    background-color: var(--theme-primary) !important;
    border: 1px solid var(--border-clr-ag-grid) !important;
    border-radius: 0.8rem !important;
    box-shadow: var(--box-shadow-lg) !important;
    padding: 1rem;
}

/* Filter menu header */
.ag-theme-alpine .ag-filter-toolpanel-header,
.ag-theme-alpine .ag-filter-header-container {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-header) !important;
    border-bottom: 1px solid var(--border-clr-ag-grid) !important;
    padding: 1rem;
}

/* Filter menu body */
.ag-theme-alpine .ag-menu-body,
.ag-theme-alpine .ag-filter-body {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    padding: 1rem;
}

/* Filter input fields */
.ag-theme-alpine .ag-filter-filter input,
.ag-theme-alpine .ag-input-field-input {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    border: 2px solid var(--border-clr-ag-grid) !important;
    border-radius: 0.4rem;
    padding: 0.8rem;
    font-size: 1.4rem;
}

.ag-theme-alpine .ag-filter-filter input:focus,
.ag-theme-alpine .ag-input-field-input:focus {
    border-color: var(--border-clr-ag-grid) !important;
    outline: none;
}

/* Filter select/dropdown */
.ag-theme-alpine .ag-picker-field-wrapper,
.ag-theme-alpine .ag-select {
    background-color: var(--theme-primary) !important;
    border: 2px solid var(--border-clr-ag-grid) !important;
    border-radius: 0.4rem;
}

.ag-theme-alpine .ag-picker-field-display {
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.1rem;
}

/* Filter condition dropdown (equals, contains, etc.) */
.ag-theme-alpine .ag-filter-condition {
    background-color: var(--theme-primary) !important;
}

/* Dropdown list (the options that appear) */
.ag-theme-alpine .ag-list {
    background-color: var(--theme-primary) !important;
}

.ag-theme-alpine .ag-list-item {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
}

.ag-theme-alpine .ag-list-item:hover {
    background-color: var(--color-header-dark) !important;
}

/* Picker dropdown (when select is opened) */
.ag-theme-alpine .ag-picker-field-wrapper {
    background-color: var(--theme-primary) !important;
}

.ag-theme-alpine .ag-picker-field-icon {
    color: var(--txt-clr-ag-row) !important;
}

/* ===== FILTER BUTTONS STYLING ===== */

/* Apply/Reset buttons container */
.ag-theme-alpine .ag-filter-apply-panel {
    background-color: var(--theme-primary) !important;
    padding: 1rem;
    border-top: 1px solid var(--border-clr-ag-grid) !important;
}

/* All buttons in filter menu */
.ag-theme-alpine .ag-standard-button,
.ag-theme-alpine .ag-filter-apply-panel-button,
.ag-advanced-filter-builder-button {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.4rem;
    padding: 0.8rem 1.6rem;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.ag-theme-alpine .ag-standard-button:hover,
.ag-theme-alpine .ag-filter-apply-panel-button:hover,
.ag-advanced-filter-builder-button:hover {
    background-color: #60a5fa !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.ag-theme-alpine .ag-standard-button:active,
.ag-theme-alpine .ag-filter-apply-panel-button:active,
.ag-advanced-filter-builder-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

/* Advanced filter builder button - match apply button style */
.ag-advanced-filter-builder-button {
    font-size: 0 !important;
    overflow: hidden !important;
    width: 10rem !important;
    height: 3rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.4rem !important;
}

/* Equal width for apply and filter buttons */
.ag-theme-alpine .ag-filter-apply-panel-button {
    width: 10rem !important;
    height: 3.6rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ag-advanced-filter-builder-button .ag-icon {
    display: none !important;
}

.ag-advanced-filter-builder-button::after {
    content: "Filter";
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.ag-advanced-filter-apply-button {
  height: 3rem !important;
}

/* Reset/Clear button - secondary style */
.ag-theme-alpine button[ref="eClearButton"],
.ag-theme-alpine .ag-standard-button[ref="resetButton"] {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border: 1.5px solid #3b82f6 !important;
    box-shadow: none;
}

.ag-theme-alpine button[ref="eClearButton"]:hover,
.ag-theme-alpine .ag-standard-button[ref="resetButton"]:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: #60a5fa !important;
    color: #2563eb !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* Apply button - primary style */
.ag-theme-alpine button[ref="eApplyButton"] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* ===== MENU LIST ITEMS ===== */

/* Menu options/items */
.ag-theme-alpine .ag-menu-option {
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
    padding: 0.8rem 1.2rem;
    transition: background-color 0.2s ease;
}

.ag-theme-alpine .ag-menu-option:hover {
    background-color: var(--color-header-dark) !important;
}

.ag-theme-alpine .ag-menu-option-active {
    background-color: var(--color-dark-metric-1) !important;
}

/* Menu separator */
.ag-theme-alpine .ag-menu-separator {
    background-color: var(--border-clr-ag-grid) !important;
}

/* Checkbox in filter */
.ag-theme-alpine .ag-checkbox-input-wrapper {
    color: var(--color-primary) !important;
}

.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Radio button in filter */
.ag-theme-alpine .ag-radio-button-input-wrapper.ag-checked {
    background-color: var(--color-primary) !important;
}

/* ===== SET FILTER (Mini Filter) ===== */

/* Set filter search box */
.ag-theme-alpine .ag-mini-filter {
    background-color: var(--theme-primary) !important;
    border: 2px solid var(--border-clr-ag-grid) !important;
    border-radius: 0.4rem;
    padding: 0.8rem;
    margin-bottom: 1rem;
}

.ag-theme-alpine .ag-mini-filter:focus {
    border-color: var(--color-primary) !important;
}

/* Set filter list */
.ag-theme-alpine .ag-set-filter-list {
    background-color: var(--theme-primary) !important;
}

/* Set filter items */
.ag-theme-alpine .ag-set-filter-item {
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
}

.ag-theme-alpine .ag-set-filter-item:hover {
    background-color: var(--color-header-dark) !important;
}

/* Select all checkbox */
.ag-theme-alpine .ag-set-filter-select-all {
    background-color: var(--theme-primary) !important;
    border-bottom: 1px solid var(--border-clr-ag-grid) !important;
    padding: 0.8rem;
}

/* ===== COLUMN MENU DROPDOWN ===== */

/* Column menu (hamburger menu) */
.ag-theme-alpine .ag-tabs {
    background-color: var(--theme-primary) !important;
}

.ag-theme-alpine .ag-tabs-header.ag-menu-header {
    background-color: var(--theme-primary) !important;
}

.ag-theme-alpine .ag-tab {
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
}

.ag-theme-alpine .ag-tab-selected {
    color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

/* Column tool panel */
.ag-theme-alpine .ag-column-select-column {
    color: var(--txt-clr-ag-row) !important;
    font-size: 1.4rem;
}

.ag-theme-alpine .ag-column-select-column:hover {
    background-color: var(--color-header-dark) !important;
}

.ag-paging-button {
    color: var(--txt-clr-ag-paging);              /* arrow color */
}

/* ===== AG DIALOG PANEL (popup) ===== */

/* Panel wrapper */
.ag-panel.ag-default-panel.ag-dialog {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    border: 1px solid var(--border-clr-ag-grid) !important;
}

/* Panel title bar */
.ag-panel-title-bar.ag-default-panel-title-bar.ag-unselectable {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
    border-bottom: 1px solid var(--border-clr-ag-grid) !important;
}

/* Panel title text */
.ag-panel-title-bar-title {
    color: var(--txt-clr-ag-header) !important;
}

/* Panel content wrapper */
.ag-panel-content-wrapper {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

/* All labels/text inside the dialog */
.ag-dialog .ag-group-title,
.ag-dialog .ag-column-select-header-label,
.ag-dialog .ag-column-group-icons,
.ag-dialog .ag-label,
.ag-dialog label {
    color: var(--txt-clr-ag-row) !important;
}

/* Group containers inside the dialog */
.ag-dialog .ag-group-component,
.ag-dialog .ag-group-component-container {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

/* Group title bar (collapsible sections) */
.ag-dialog .ag-group-component-title-bar {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
}

/* Input fields inside the dialog */
.ag-dialog input,
.ag-dialog select,
.ag-dialog textarea {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    border: 1px solid var(--border-clr-ag-grid) !important;
}

/* Dropdowns / pickers inside the dialog */
.ag-dialog .ag-picker-field-wrapper {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
    border: 1px solid var(--border-clr-ag-grid) !important;
}

.ag-dialog .ag-picker-field-display {
    color: var(--txt-clr-ag-row) !important;
}

.ag-dialog .ag-picker-field-icon {
    color: var(--txt-clr-ag-row) !important;
}

/* Column select inside the dialog */
.ag-dialog .ag-column-select {
    background-color: var(--theme-primary) !important;
}

.ag-dialog .ag-column-select-column,
.ag-dialog .ag-column-select-column-group {
    color: var(--txt-clr-ag-row) !important;
}

.ag-dialog .ag-column-select-column:hover,
.ag-dialog .ag-column-select-column-group:hover {
    background-color: var(--bg-clr-ag-header) !important;
}

/* Toggle buttons / icons inside the dialog */
.ag-dialog .ag-icon {
    color: var(--txt-clr-ag-row) !important;
}

/* Drag handle */
.ag-dialog .ag-drag-handle {
    color: var(--txt-clr-ag-row) !important;
}

.ag-virtual-list-viewport.ag-advanced-filter-builder-virtual-list-viewport.ag-focus-managed {
    background-color: var(--theme-primary) !important;
}

.ag-advanced-filter-builder-button-panel {
    background-color: var(--theme-primary) !important;
}

/* Advanced filter builder panel wrapper */
.ag-advanced-filter-builder {
    background-color: var(--theme-primary) !important;
}

/* Advanced filter builder item pills/text */
.ag-advanced-filter-builder-item-wrapper {
    color: var(--txt-clr-ag-row) !important;
}

.ag-advanced-filter-builder-item-button {
    color: var(--color-primary) !important;
}

.ag-advanced-filter-builder-item-condition {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
}

/* Advanced filter builder join operator pills */
.ag-advanced-filter-builder-pill-wrapper {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
}

.ag-advanced-filter-builder-pill-display,
.ag-advanced-filter-builder-pill-display *,
.ag-picker-field-display.ag-advanced-filter-builder-pill-display,
.ag-advanced-filter-builder-pill-wrapper .ag-picker-field-display {
    color: var(--txt-clr-ag-header) !important;
}

/* Advanced filter builder select/input */
.ag-advanced-filter-builder-value-input input {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

/* Advanced filter builder validation message */
.ag-advanced-filter-builder-validation {
    color: var(--txt-clr-ag-row) !important;
}

/* Panel close button */
.ag-panel-title-bar-button {
    color: var(--txt-clr-ag-header) !important;
}

/* ===== ADVANCED FILTER BUILDER CONDITION DROPDOWN ===== */

/* Autocomplete popup (dropdown from condition pills) */
.ag-autocomplete-list-popup,
.ag-autocomplete-list-popup .ag-popup-child {
    background-color: var(--theme-primary) !important;
}

.ag-autocomplete-list-popup .ag-autocomplete-row {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

.ag-autocomplete-list-popup .ag-autocomplete-row:hover,
.ag-autocomplete-list-popup .ag-autocomplete-row-selected {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
}

/* Rich select popup (used for column/operator selection) */
.ag-rich-select,
.ag-rich-select-list {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

.ag-rich-select-row {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

.ag-rich-select-row:hover,
.ag-rich-select-row-selected {
    background-color: var(--bg-clr-ag-header) !important;
    color: var(--txt-clr-ag-header) !important;
}

/* Generic popup child (catches any AG popup not covered above) */
.ag-popup-child {
    background-color: var(--theme-primary) !important;
    color: var(--txt-clr-ag-row) !important;
}

.ag-theme-alpine .ag-header {
  background-color: var(--bg-clr-ag-header) !important;
}

.ag-theme-alpine .ag-header-cell:hover {
  background-color: var(--bg-clr-ag-header-hover) !important;
}

.table-row {
  max-width: 100%;
  margin: auto;
  margin-bottom: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid var(--col-border);
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease;
}

.table-row:hover {
  border-color: #9ca3af;
}

.divider {
  margin-top: 1.2rem;
  margin-bottom: 2.4rem;
  border-color: var(--col-border);
}

.table__header {
  margin-bottom: 0;
  color: var(--txt-clr-table-header);
}

.table__icons-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.table__title-row {
  margin-bottom: 1rem;
}

.modal-detail-col-text {
  color: var(--txt-clr-col-modal-detail) !important;

}

.modal-detail-value-text {
  color: var(--txt-clr-col-value-detail) !important;
}

.icon--purple {
  color: var(--color-primary);
}

.icon-wrapper--square {
  border-radius: 0.5rem;
  padding: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper--purple {
  background-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .icon-wrapper--purple {
  background-color: rgba(96, 165, 250, 0.2);
}

.btn {
  background-color: #3b82f6;
  color: #ffffff;
  padding: 0.4rem 0.8rem;
  width: auto;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  border-radius: 0.4rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
  height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn svg,
.btn .iconify {
  width: 1.6rem !important;
  height: 1.6rem !important;
}

.btn:hover {
  background-color: #60a5fa;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn--light {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1.5px solid #3b82f6;
  box-shadow: none;
  height: 3rem !important;
}

.btn--light:hover {
  background-color: rgba(59, 130, 246, 0.2);
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.btn:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-white);
}

.btn--borderless {
  border: none;
  transition: all 0.2s ease-in-out;
}

.btn--borderless:hover {
  transform: scale(1.1);
}

.mantine-Textarea-input {
  font-family: 'Inter';
}

.home-footer-text {
  font-size: 1.2rem !important;
}

.mantine-Menu-dropdown {
  padding: 1rem;
  background-color: var(--theme-primary);
  border-radius: 1rem;
  border: 1px solid var(--col-border);
}

.mantine-TextInput-input {
  height: 3.2rem;
  font-size: 1.2rem;
  border: 2px solid var(--border-clr-ag-grid);
  color: var(--txt-clr-text-input);
  padding-left: 1rem;
  text-indent: 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mantine-TextInput-input:focus,
.mantine-TextInput-input:focus-within {
  border-color: #6396c7;
  box-shadow: 0 0 0 3px rgba(99, 150, 199, 0.15);
  outline: none;
}

.mantine-TextInput-section,
.mantine-Select-section {
  margin-left: 0.5rem;
}

.text-input__right-section {
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--color-lightest-grey);
  padding-right: 0.6rem;
}

.ag-theme-alpine {
  border-radius: 1rem;
}

.ag-header-cell-label {
  font-weight: 500;
  letter-spacing: 0.05rem;
}

.mantine-Modal-header {
  background-color: var(--theme-primary);
}

.mantine-Modal-content {
  border-radius: 1rem;
  background-color: var(--theme-primary) !important;
}

.mantine-Modal-title {
  font-size: 2rem;
  color: var(--color-primary);
}

.mantine-Text-root {
  font-size: 1.3rem;
  color: var(--txt-clr-modal);
}

.mantine-TextInput-input {
  background-color: transparent !important;
}


.mantine-Select-input {
  color: var(--txt-clr-modal);
  background-color: transparent !important;
  height: 4rem;
  font-size: 1.3rem;
  border: 1.5px solid var(--border-clr-ag-grid);
  padding-left: 1rem;
  text-indent: 1.5rem;
}

.mantine-Select-input .mantine-Select-input:focus-within {
  background-color: rgba(0, 0, 0, 0);
  border: 1.5px solid var(--color-primary);
}

.mantine-Select-dropdown {
  box-shadow: var(--box-shadow-lg);
  background-color: var(--theme-primary);
}

.mantine-Select-option {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--txt-clr-modal);
  background-color: var(--theme-primary);
}

.mantine-Select-option:hover {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #999;
  background-color: var(--theme-primary);
}

.mantine-Modal-content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.mantine-Modal-content {
  scrollbar-width: none; /* Firefox */
}


/* GLOBAL SCROLLBAR */
::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
}

::-webkit-scrollbar-track {
    background: transparent;       /* track (background) */
}

::-webkit-scrollbar-thumb {
    background: #666;              /* scrollbar handle */
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}


/****************************
ANIMATIONS
****************************/

@keyframes moveInLeft {
  /* Start */
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  /* Between can be any % between 0 and 100 */
  80% {
    transform: translateX(10px);
  }

  /* End */
  100% {
    opacity: 1;
    /* because we wanrt it to be at its original position at the end of animation */
    transform: translate(0);
  }
}


/****************************
MEDIA QUERIES
****************************/

/* Media query for 1650px - Reduce sizes for better fit */
@media (max-width: 103em) {
  html {
    font-size: 62.5%;  /* Reduce from 62.5% to 56% (1rem = 8.96px instead of 10px) */
  }

   /* Sidebar adjustments */
    .sidebar {
        width: 28rem;
    }

    .sidebar.collapsed {
        width: 8rem;
    }

    .sidebar-header {
        min-height: 7rem;
        padding: 1.6rem;
    }

    .sidebar-logo {
        max-width: 25rem;
    }

    .sidebar.collapsed .sidebar-logo {
        max-width: 6.5rem;
        max-height: 6.5rem;
    }

    .sidebar-link,
    .sidebar-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem 1.4rem 1.8rem;
        padding-right: 2.4rem;
        border-left: 0.4rem solid transparent;
    }

    .child-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem;
        padding-right: 2.4rem;
        font-size: 1.6rem;
        border-left: 0.4rem solid transparent;
    }

    .back-text {
        font-size: 1.6rem;
    }

    .collapse-toggle {
        width: 3.2rem;
        height: 3.2rem;
        right: -1.6rem;
    }

    .sidebar-footer {
        padding: 1.2rem 1.6rem;
    }

    .profile-avatar {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.4rem;
    }

    .profile-name {
        font-size: 1.4rem;
    }

    .profile-role {
        font-size: 1.2rem;
    }

    .content-wrapper {
        margin-left: 28rem;
        width: calc(100% - 28rem);
    }

    .sidebar.collapsed ~ .content-wrapper {
        margin-left: 8rem;
        width: calc(100% - 8rem);
    }

    .top-header {
        padding: 1.6rem 2.4rem;
    }

    .sidebar-toggle-btn {
        width: 3.6rem;
        height: 3.6rem;
    }

    .page-title {
        font-size: 2.4rem;
    }

    .nav-tooltip,
    .nav-tooltip .tooltip-inner,
    .child-tooltip {
        font-size: 1.4rem !important;
    }

  /* Adjust metrics */
  .metrics {
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .metric {
    padding: 2rem 1rem;
  }

  .metric__div {
    gap: 1.6rem;
  }

  .metrics-text {
    font-size: 1.4rem;
  }

  .metrics-value {
    font-size: 3.2rem;
  }

  .metrics__icon-wrapper {
    padding: 0.3rem;
  }

  /* Adjust graphs */
  .graphs-row {
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .graph-col {
    padding: 1.6rem;
  }

  .graph-div {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-div-endpoints {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-row {
    padding: 0.8rem;
    height: 40rem;
  }

  /* Adjust table */
  .table-row {
    padding: 2rem 1rem;
    margin-bottom: 3rem;
  }

  /* Adjust buttons and icons */
  .btn {
    padding: 0.4rem 0.9rem;
    width: 9rem;
    font-size: 1.3rem;
  }

  /* Adjust AG Grid */
  .ag-theme-alpine .ag-header-cell-text,
  .ag-theme-alpine .ag-header-cell-label,
  .ag-theme-alpine .ag-header-cell,
  .ag-theme-alpine .ag-header-group-cell-label {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-cell {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-floating-filter-input,
  .ag-theme-alpine .ag-filter-filter input,
  .ag-theme-alpine .ag-input-field-input,
  .ag-theme-alpine .ag-picker-field-display,
  .ag-theme-alpine .ag-list-item,
  .ag-theme-alpine .ag-menu-option,
  .ag-theme-alpine .ag-set-filter-item {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-standard-button,
  .ag-theme-alpine .ag-filter-apply-panel-button {
    padding: 0.7rem 1.4rem;
    font-size: 1.3rem;
  }

  /* Adjust modals */
  .mantine-Modal-title {
    font-size: 2.2rem;
  }

  .mantine-Text-root {
    font-size: 1.4rem;
  }

  .mantine-TextInput-input {
    height: 3.2rem;
    font-size: 1.3rem;
  }

  .mantine-Select-input {
    height: 4.2rem;
    font-size: 1.4rem;
  }

  .mantine-Select-option {
    font-size: 1.4rem;
  }

  /* Adjust menu items */
  .profile-menu-item {
    font-size: 1.4rem;
  }

  .mantine-Menu-item {
    font-size: 1.4rem;
  }
}


/* Media query for 1650px - Reduce sizes for better fit */
@media (max-width: 96em) {
  html {
    font-size: 59%;
  }

   /* Sidebar adjustments */
    .sidebar {
        width: 28rem;
    }

    .sidebar.collapsed {
        width: 8rem;
    }

    .sidebar-header {
        min-height: 7rem;
        padding: 1.6rem;
    }

    .sidebar-logo {
        max-width: 25rem;
    }

    .sidebar.collapsed .sidebar-logo {
        max-width: 6.5rem;
        max-height: 6.5rem;
    }

    .sidebar-link,
    .sidebar-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem 1.4rem 1.8rem;
        padding-right: 2.4rem;
        border-left: 0.4rem solid transparent;
    }

    .child-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem;
        padding-right: 2.4rem;
        font-size: 1.6rem;
        border-left: 0.4rem solid transparent;
    }

    .back-text {
        font-size: 1.6rem;
    }

    .collapse-toggle {
        width: 3.2rem;
        height: 3.2rem;
        right: -1.6rem;
    }

    .sidebar-footer {
        padding: 1.2rem 1.6rem;
    }

    .profile-avatar {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.4rem;
    }

    .profile-name {
        font-size: 1.4rem;
    }

    .profile-role {
        font-size: 1.2rem;
    }

    .content-wrapper {
        margin-left: 28rem;
        width: calc(100% - 28rem);
    }

    .sidebar.collapsed ~ .content-wrapper {
        margin-left: 8rem;
        width: calc(100% - 8rem);
    }

    .top-header {
        padding: 1.6rem 2.4rem;
    }

    .sidebar-toggle-btn {
        width: 3.6rem;
        height: 3.6rem;
    }

    .page-title {
        font-size: 2.4rem;
    }

    .nav-tooltip,
    .nav-tooltip .tooltip-inner,
    .child-tooltip {
        font-size: 1.4rem !important;
    }

  /* Adjust metrics */
  .metrics {
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .metric {
    padding: 2rem 1rem;
  }

  .metric__div {
    gap: 1.6rem;
  }

  .metrics-text {
    font-size: 1.4rem;
  }

  .metrics-value {
    font-size: 3.2rem;
  }

  .metrics__icon-wrapper {
    padding: 0.3rem;
  }

  /* Adjust graphs */
  .graphs-row {
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .graph-col {
    padding: 1.6rem;
  }

  .graph-div {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-div-endpoints {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-row {
    padding: 0.8rem;
    height: 40rem;
  }

  /* Adjust table */
  .table-row {
    padding: 2rem 1rem;
    margin-bottom: 3rem;
  }

  /* Adjust buttons and icons */
  .btn {
    padding: 0.4rem 0.9rem;
    width: 9rem;
    font-size: 1.3rem;
  }

  /* Adjust AG Grid */
  .ag-theme-alpine .ag-header-cell-text,
  .ag-theme-alpine .ag-header-cell-label,
  .ag-theme-alpine .ag-header-cell,
  .ag-theme-alpine .ag-header-group-cell-label {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-cell {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-floating-filter-input,
  .ag-theme-alpine .ag-filter-filter input,
  .ag-theme-alpine .ag-input-field-input,
  .ag-theme-alpine .ag-picker-field-display,
  .ag-theme-alpine .ag-list-item,
  .ag-theme-alpine .ag-menu-option,
  .ag-theme-alpine .ag-set-filter-item {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-standard-button,
  .ag-theme-alpine .ag-filter-apply-panel-button {
    padding: 0.7rem 1.4rem;
    font-size: 1.3rem;
  }

  /* Adjust modals */
  .mantine-Modal-title {
    font-size: 2.2rem;
  }

  .mantine-Text-root {
    font-size: 1.4rem;
  }

  .mantine-TextInput-input {
    height: 3.2rem;
    font-size: 1.3rem;
  }

  .mantine-Select-input {
    height: 4.2rem;
    font-size: 1.4rem;
  }

  .mantine-Select-option {
    font-size: 1.4rem;
  }

  /* Adjust menu items */
  .profile-menu-item {
    font-size: 1.4rem;
  }

  .mantine-Menu-item {
    font-size: 1.4rem;
  }
}


/* Media query for 1650px - Reduce sizes for better fit */
@media (max-width: 88em) {
  html {
    font-size: 50%;
  }

   /* Sidebar adjustments */
    .sidebar {
        width: 28rem;
    }

    .sidebar.collapsed {
        width: 8rem;
    }

    .sidebar-header {
        min-height: 7rem;
        padding: 1.6rem;
    }

    .sidebar-logo {
        max-width: 25rem;
    }

    .sidebar.collapsed .sidebar-logo {
        max-width: 6.5rem;
        max-height: 6.5rem;
    }

    .sidebar-link,
    .sidebar-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem 1.4rem 1.8rem;
        padding-right: 2.4rem;
        border-left: 0.4rem solid transparent;
    }

    .child-nav-item {
        gap: 1.4rem;
        padding: 1.4rem 1.8rem;
        padding-right: 2.4rem;
        font-size: 1.6rem;
        border-left: 0.4rem solid transparent;
    }

    .back-text {
        font-size: 1.6rem;
    }

    .collapse-toggle {
        width: 3.2rem;
        height: 3.2rem;
        right: -1.6rem;
    }

    .sidebar-footer {
        padding: 1.2rem 1.6rem;
    }

    .profile-avatar {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.4rem;
    }

    .profile-name {
        font-size: 1.4rem;
    }

    .profile-role {
        font-size: 1.2rem;
    }

    .content-wrapper {
        margin-left: 28rem;
        width: calc(100% - 28rem);
    }

    .sidebar.collapsed ~ .content-wrapper {
        margin-left: 8rem;
        width: calc(100% - 8rem);
    }

    .top-header {
        padding: 1.6rem 2.4rem;
    }

    .sidebar-toggle-btn {
        width: 3.6rem;
        height: 3.6rem;
    }

    .page-title {
        font-size: 2.4rem;
    }

    .nav-tooltip,
    .nav-tooltip .tooltip-inner,
    .child-tooltip {
        font-size: 1.4rem !important;
    }

  /* Adjust metrics */
  .metrics {
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .metric {
    padding: 2rem 1rem;
  }

  .metric__div {
    gap: 1.6rem;
  }

  .metrics-text {
    font-size: 1.4rem;
  }

  .metrics-value {
    font-size: 3.2rem;
  }

  .metrics__icon-wrapper {
    padding: 0.3rem;
  }

  /* Adjust graphs */
  .graphs-row {
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .graph-col {
    padding: 1.6rem;
  }

  .graph-div {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-div-endpoints {
    padding: 0.8rem;
    height: 33rem;
  }

  .graph-row {
    padding: 0.8rem;
    height: 40rem;
  }

  /* Adjust table */
  .table-row {
    padding: 2rem 1rem;
    margin-bottom: 3rem;
  }

  /* Adjust buttons and icons */
  .btn {
    padding: 0.4rem 0.9rem;
    width: 9rem;
    font-size: 1.3rem;
  }

  /* Adjust AG Grid */
  .ag-theme-alpine .ag-header-cell-text,
  .ag-theme-alpine .ag-header-cell-label,
  .ag-theme-alpine .ag-header-cell,
  .ag-theme-alpine .ag-header-group-cell-label {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-cell {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-floating-filter-input,
  .ag-theme-alpine .ag-filter-filter input,
  .ag-theme-alpine .ag-input-field-input,
  .ag-theme-alpine .ag-picker-field-display,
  .ag-theme-alpine .ag-list-item,
  .ag-theme-alpine .ag-menu-option,
  .ag-theme-alpine .ag-set-filter-item {
    font-size: 1.5rem;
  }

  .ag-theme-alpine .ag-standard-button,
  .ag-theme-alpine .ag-filter-apply-panel-button {
    padding: 0.7rem 1.4rem;
    font-size: 1.3rem;
  }

  /* Adjust modals */
  .mantine-Modal-title {
    font-size: 2.2rem;
  }

  .mantine-Text-root {
    font-size: 1.4rem;
  }

  .mantine-TextInput-input {
    height: 3.2rem;
    font-size: 1.3rem;
  }

  .mantine-Select-input {
    height: 4.2rem;
    font-size: 1.4rem;
  }

  .mantine-Select-option {
    font-size: 1.4rem;
  }

  /* Adjust menu items */
  .profile-menu-item {
    font-size: 1.4rem;
  }

  .mantine-Menu-item {
    font-size: 1.4rem;
  }
}


/* ===============================================
   TABLET AND MOBILE RESPONSIVE STYLES
   =============================================== */

/* Large Tablets (768px - 1024px) */
@media (max-width: 64em) {
  html {
    font-size: 56.25%; /* 9px */
  }

  /* Sidebar collapsed by default on tablets */
  .sidebar {
    width: 26rem;
  }

  .sidebar.collapsed {
    width: 7rem;
  }

  .content-wrapper {
    margin-left: 26rem;
    width: calc(100% - 26rem);
  }

  .sidebar.collapsed ~ .content-wrapper {
    margin-left: 7rem;
    width: calc(100% - 7rem);
  }

  /* Stack metrics vertically on smaller tablets */
  .metrics {
    flex-wrap: wrap;
    gap: 1.6rem;
    max-width: 100%;
  }

  .metric {
    flex: 1 1 calc(50% - 1.6rem);
    min-width: 280px;
    padding: 1.8rem 1rem;
  }

  /* Graphs become full width or 2-column */
  .graphs-row {
    flex-wrap: wrap;
    gap: 1.6rem;
  }

  .graphs-row > * {
    flex: 1 1 calc(50% - 1.6rem);
    min-width: 300px;
  }

  .graph-div {
    height: 30rem;
  }

  .graph-div-endpoints {
    height: 30rem;
  }

  .graph-row {
    height: 35rem;
  }

  /* Adjust table for tablets */
  .table-row {
    padding: 1.6rem 1rem;
    max-width: 100%;
  }

  /* Top header adjustments */
  .top-header {
    padding: 1.4rem 2rem;
  }

  .page-title {
    font-size: 2.2rem;
  }

  /* Second navbar scrollable */
  .second-navbar {
    padding: 0.8rem 1.6rem;
    gap: 1.6rem;
  }

  .second-navbar-item {
    font-size: 1.5rem;
    padding: 0.7rem 1.4rem;
  }
}

/* Small Tablets (600px - 768px) */
@media (max-width: 48em) {
  html {
    font-size: 50%; /* 8px */
  }

  /* Mobile Top Navbar for small tablets */
  .mobile-top-navbar {
    display: flex;
  }

  /* Hide desktop collapse button */
  .collapse-toggle {
    display: none !important;
  }

  /* Sidebar as drawer on small tablets */
  .sidebar {
    position: fixed;
    left: -100%;
    width: 28rem;
    transition: left 0.3s ease;
    z-index: 9999;
    top: 0;
    height: 100vh;
  }

  .sidebar.show {
    left: 0;
  }

  .sidebar.collapsed {
    left: -100%;
    width: 28rem;
  }

  /* Mobile overlay */
  .mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Content takes full width */
  .content-wrapper {
    margin-left: 0;
    width: 100%;
    margin-top: 6rem;
  }

  .sidebar.collapsed ~ .content-wrapper {
    margin-left: 0;
    width: 100%;
  }

  /* Hide desktop top header */
  .top-header {
    display: none;
  }

  /* Metrics stack in single column */
  .metrics {
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1.6rem;
  }

  .metric {
    flex: 1 1 100%;
    width: 100%;
    padding: 1.6rem 1.2rem;
  }

  .metrics-value {
    font-size: 2.8rem;
  }

  /* Graphs stack vertically */
  .graphs-row {
    flex-direction: column;
    gap: 1.6rem;
  }

  .graphs-row > * {
    flex: 1 1 100%;
    width: 100%;
  }

  .graph-col {
    padding: 1.4rem;
  }

  .graph-div {
    height: 28rem;
    padding: 0.6rem;
  }

  .graph-div-endpoints {
    height: 28rem;
    padding: 0.6rem;
  }

  .graph-row {
    height: 32rem;
    padding: 0.6rem;
  }

  /* Table responsive */
  .table-row {
    padding: 1.4rem 0.8rem;
    overflow-x: auto;
  }

  /* AG Grid smaller text */
  .ag-theme-alpine .ag-header-cell-text,
  .ag-theme-alpine .ag-header-cell-label,
  .ag-theme-alpine .ag-cell {
    font-size: 1.3rem;
  }

  /* Top header compact */
  .top-header {
    padding: 1.2rem 1.6rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .sidebar-toggle-btn {
    width: 3.2rem;
    height: 3.2rem;
  }

  /* Second navbar more compact */
  .second-navbar {
    padding: 0.6rem 1.2rem;
  }

  .second-navbar-item {
    font-size: 1.4rem;
    padding: 0.6rem 1.2rem;
  }

  .navbar-scroll-btn {
    width: 3.2rem;
    height: 3.2rem;
  }
}

/* Phones (320px - 600px) */
@media (max-width: 37.5em) {
  html {
    font-size: 43.75%; /* 7px - smaller for phones */
  }

  /* Mobile Top Navbar */
  .mobile-top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6rem;
    background: #f8f7fc;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.6rem;
    border-bottom: 0.1rem solid #e9e7f3;
  }

  [data-theme="dark"] .mobile-top-navbar {
    background: #2a2a2a;
    border-bottom-color: #444;
  }

  .mobile-navbar-logo {
    height: 4rem;
    width: auto;
  }

  .mobile-menu-toggle {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0.8rem;
  }

  .mobile-menu-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 0.4rem 1.2rem rgba(102, 126, 234, 0.3);
  }

  .hamburger-line {
    width: 2.4rem;
    height: 0.3rem;
    background: white;
    border-radius: 0.2rem;
    transition: all 0.3s ease;
  }

  /* Mobile Drawer Overlay */
  .mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Hide sidebar completely on phones, show as drawer */
  .sidebar {
    position: fixed;
    left: -100%;
    width: 28rem;
    transition: left 0.3s ease;
    z-index: 9999;
    top: 0;
    height: 100vh;
  }

  .sidebar.show {
    left: 0;
  }

  /* Hide collapse button on mobile */
  .collapse-toggle {
    display: none !important;
  }

  /* Prevent sidebar from being collapsed on mobile */
  .sidebar.collapsed {
    left: -100%;
    width: 28rem;
  }

  /* Adjust sidebar for mobile drawer */
  .sidebar-header {
    padding-top: 2.4rem;
  }

  /* Full width content on phones */
  .content-wrapper {
    margin-left: 0;
    width: 100%;
    margin-top: 6rem;
  }

  .sidebar.collapsed ~ .content-wrapper {
    margin-left: 0;
    width: 100%;
    margin-top: 6rem;
  }

  /* Main content padding */
  .main-content {
    padding-right: 1.6rem;
    padding-left: 1.6rem;
    padding-top: 1.6rem;
  }

  /* Top header should be hidden on mobile (replaced by mobile navbar) */
  .top-header {
    display: none;
  }

  /* Chart containers should be centered */
  .graph-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .graph-div,
  .graph-div-endpoints,
  .graph-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Metrics single column, compact */
  .metrics {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.6rem;
    margin-bottom: 1.2rem;
    max-width: 100%;
  }

  .metric {
    width: 100%;
    padding: 1.4rem 1rem;
  }

  .metric__div {
    gap: 1.2rem;
  }

  .metrics-text {
    font-size: 1.3rem;
  }

  .metrics-value {
    font-size: 2.4rem;
  }

  .metrics__icon-wrapper {
    padding: 0.2rem;
  }

  /* Graphs full width stack */
  .graphs-row {
    flex-direction: column;
    gap: 1.2rem;
    max-width: 100%;
  }

  .graphs-row > * {
    width: 100%;
    flex: 1 1 100%;
  }

  .graph-col {
    padding: 1.2rem;
  }

  .graph-div {
    height: 25rem;
    padding: 0.4rem;
  }

  .graph-div-endpoints {
    height: 25rem;
    padding: 0.4rem;
  }

  .graph-row {
    height: 28rem;
    padding: 0.4rem;
  }

  .graph__title-row {
    font-size: 1.4rem;
    flex-wrap: wrap;
  }

  /* Table full width scroll */
  .table-row {
    padding: 1.2rem 0.6rem;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* AG Grid mobile optimizations */
  .ag-theme-alpine {
    font-size: 1.2rem;
  }

  .ag-theme-alpine .ag-header-cell-text,
  .ag-theme-alpine .ag-header-cell-label,
  .ag-theme-alpine .ag-cell {
    font-size: 1.2rem;
    padding: 0.6rem;
  }

  .ag-theme-alpine .ag-header-cell,
  .ag-theme-alpine .ag-cell {
    max-width: 20rem !important;
    min-width: 8rem !important;
  }

  .ag-theme-alpine .ag-floating-filter-input,
  .ag-theme-alpine .ag-filter-filter input,
  .ag-theme-alpine .ag-input-field-input {
    font-size: 1.2rem;
    padding: 0.6rem;
  }

  /* Top header mobile */
  .top-header {
    padding: 1rem 1.2rem;
  }

  .page-title {
    font-size: 1.8rem;
  }

  .sidebar-toggle-btn {
    width: 3.6rem;
    height: 3.6rem;
  }

  .header-content {
    gap: 1.2rem;
  }

  /* Second navbar mobile */
  .second-navbar {
    padding: 0.6rem 1rem;
    gap: 1rem;
  }

  .second-navbar-item {
    font-size: 1.3rem;
    padding: 0.6rem 1rem;
    white-space: nowrap;
  }

  .navbar-scroll-btn {
    width: 3rem;
    height: 3rem;
  }

  .navbar-scroll-btn svg,
  .navbar-scroll-btn .iconify {
    width: 1.6rem !important;
    height: 1.6rem !important;
  }

  /* Header logo smaller on mobile */
  .header-logo {
    height: 4.5rem;
  }

  /* Buttons mobile */
  .btn {
    padding: 0.5rem 1rem;
    width: auto;
    min-width: 8rem;
    font-size: 1.2rem;
  }

  /* Modals mobile */
  .mantine-Modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }

  .mantine-Modal-title {
    font-size: 1.8rem;
  }

  .mantine-Text-root {
    font-size: 1.3rem;
  }

  .mantine-TextInput-input,
  .mantine-Select-input {
    font-size: 1.3rem;
    height: 3.6rem;
  }

  /* Page title */
  .page-title-div {
    padding: 1.6rem 0.8rem;
    margin-bottom: 2rem;
    max-width: 100%;
  }

  /* Profile section in footer */
  .profile-name {
    font-size: 1.3rem;
  }

  .profile-role {
    font-size: 1.1rem;
  }

  .profile-avatar {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.3rem;
  }

  /* Ensure horizontal scrolling works on tables */
  .table__icons-col {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  /* Container adjustments */
  .container {
    padding-bottom: 2rem;
  }

  /* Theme toggle button position */
  #theme-toggle {
    bottom: 2rem;
    left: 1.2rem;
  }
}

/* Extra small phones (< 375px) */
@media (max-width: 23.4375em) {
  html {
    font-size: 37.5%; /* 6px - very compact for small phones */
  }

  .metrics-value {
    font-size: 2.2rem;
  }

  .graph-div {
    height: 22rem;
  }

  .graph-div-endpoints {
    height: 22rem;
  }

  .graph-row {
    height: 25rem;
  }

  .page-title {
    font-size: 1.6rem;
  }

  .sidebar-toggle-btn {
    width: 3.2rem;
    height: 3.2rem;
  }
}

/* **************************************
CUSTOM LOADING SPINNER STYLES
****************************************/

/* Global loading spinner - appears on initial app load */
._dash-loading {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Hide the default "Loading..." text */
._dash-loading-callback {
  display: none !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

/* Only show spinner once - hide duplicates */
._dash-loading ~ ._dash-loading {
  display: none !important;
}

/* Custom circular spinner */
._dash-loading::before {
  content: "" !important;
  width: 50px !important;
  height: 50px !important;
  border: 5px solid #f3f3f3 !important;
  border-top: 5px solid #1e40af !important;
  border-radius: 50% !important;
  animation: dash-spinner 1s linear infinite !important;
  margin-bottom: 1rem !important;
}

/* Loading text below spinner */
._dash-loading::after {
  content: "Loading..." !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  color: #1e40af !important;
  font-family: "Poppins", sans-serif !important;
}

/* Spinner animation */
@keyframes dash-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* NVD Filters Container */
.nvd-filters-container {
  background-color: #f9fafb;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid #e5e7eb;
}

[data-theme="dark"] .nvd-filters-container {
  background: linear-gradient(135deg, #0a0818 0%, #0f0d1e 50%, #141229 100%);
  border-color: var(--col-border);
}

/* NVD Filter Inputs */
.nvd-filter-input .mantine-TextInput-input {
  background-color: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  transition: all 0.2s ease !important;
}

.nvd-filter-input .mantine-TextInput-input:hover {
  border-color: #6366f1 !important;
}

.nvd-filter-input .mantine-TextInput-input:focus {
  border-color: #6366f1 !important;
  outline: none !important;
}

[data-theme="dark"] .nvd-filter-input .mantine-TextInput-input {
  background-color: #25262b !important;
  border-color: #373a40 !important;
  color: #c1c2c5 !important;
}

[data-theme="dark"] .nvd-filter-input .mantine-TextInput-input:hover {
  border-color: #6366f1 !important;
}

[data-theme="dark"] .nvd-filter-input .mantine-TextInput-input:focus {
  border-color: #6366f1 !important;
}

.nvd-filter-input .mantine-TextInput-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .nvd-filter-input .mantine-TextInput-label {
  color: #c1c2c5;
}

/* NVD Table Styling */
#nvd-table-title {
  font-size: 2.0rem !important;
}

#external-vulnerabilities-table-title {
  font-size: 2.0rem !important;
  margin-bottom: 1.5rem;
}

#external-vulnerabilities-container {
  margin-top: 2rem !important;
}

#table-div-nvd .ag-header-cell-label {
  font-size: 1.2rem !important;
}

#ag-grid-externals .ag-header-cell-label {
  font-size: 0.9rem !important;
}

#ag-grid-externals .ag-cell {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Dark theme support */
[data-theme="dark"] ._dash-loading::before {
  border-color: #333 !important;
  border-top-color: #3b82f6 !important;
}

[data-theme="dark"] ._dash-loading::after {
  color: #3b82f6 !important;
}

/* Theme toggle icon visibility */
/* Show moon icon in light theme, hide in dark theme */
.theme-icon-moon {
  display: block;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

/* Hide sun icon in light theme, show in dark theme */
.theme-icon-sun {
  display: none;
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
}

/*######################################
/*######################################
NVD PAGE STYLES
/*######################################
######################################*/

/* Parent row reset for KPI container */
.kpi-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 98%;
    margin: auto;
}

.nvd-kpi-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.kpi-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 1.2rem;
    padding: 1.5rem;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border-left: .4rem solid;
    animation: fadeIn 1s ease-out;
    width: 100%;
}

.kpi-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, 0.1);
    animation: pulse 0.6s ease-in-out;
}

.kpi-card.no-animation {
    animation: none !important;
    transition: border-color 0.2s ease !important;
    border: 1px solid var(--col-border) !important;
}

.kpi-card.no-animation:hover {
    transform: none !important;
    animation: none !important;
    border-color: #9ca3af !important;
}

.kpi-value-gray {
    color: #4b5563;
}

[data-theme="dark"] .kpi-value-gray {
    color: #d1d5db;
}

.kpi-card.total_cve {
    border-left-color: #3b82f6;
}

.kpi-card.severity--critical {
    border-left-color: #cf043e;
}

.kpi-card.severity--high {
    border-left-color: #f75e44;
}

.kpi-card.severity--medium {
    border-left-color: #FF6C0C;
}

.kpi-card.severity--low {
    border-left-color: #22c55e;
}

.kpi-card.severity--unknown {
    border-left-color: #6b7280;
}

.kpi-card.backup-coverage--good {
    border-left-color: #22c55e;
}

.kpi-card.backup-coverage--poor {
    border-left-color: #cf043e;
}

.kpi-card.backup-success--good {
    border-left-color: #22c55e;
}

.kpi-card.backup-success--poor {
    border-left-color: #cf043e;
}

.kpi-card.total-snapshots {
    border-left-color: #3b82f6;
}

.kpi-card.paused-backups {
    border-left-color: #FF6C0C;
}

.kpi-card.archived-backups {
    border-left-color: #6b7280;
}

.kpi-label {
    font-size: 1.1rem !important;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.kpi-value {
    font-size: 2.4rem !important;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: .5rem;
}

.kpi-percent {
    font-size: 1.3rem !important;
    font-weight: 600;
    color: #404b5a;
    margin: 0;
}

.kpi-icon {
    font-size: 1.8rem !important;
    opacity: 0.2;
    float: right;
    margin-top: -8px;
}

/* KPI Change Pill Container */
.kpi-change-pill-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* KPI Change Pill */
.kpi-change-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    gap: 0.4rem;
}

/* KPI Change Pill Small */
.kpi-change-pill-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.3rem;
}

.kpi-change-pill.increase,
.kpi-change-pill-sm.increase {
    background-color: #dcfce7;
    color: #166534;
}

.kpi-change-pill.decrease,
.kpi-change-pill-sm.decrease {
    background-color: #fee2e2;
    color: #991b1b;
}

.kpi-change-pill.neutral,
.kpi-change-pill-sm.neutral {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* KPI Comparison Label */
.kpi-comparison-label {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 400;
}

[data-theme="dark"] .kpi-change-pill.increase,
[data-theme="dark"] .kpi-change-pill-sm.increase {
    background-color: rgba(22, 163, 74, 0.2);
    color: #86efac;
}

[data-theme="dark"] .kpi-change-pill.decrease,
[data-theme="dark"] .kpi-change-pill-sm.decrease {
    background-color: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .kpi-change-pill.neutral,
[data-theme="dark"] .kpi-change-pill-sm.neutral {
    background-color: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

[data-theme="dark"] .kpi-comparison-label {
    color: #9ca3af;
}

/* KPI Timeframe Button */
.kpi-timeframe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.8rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.kpi-timeframe-btn:hover {
    border-color: #d1d5db;
}

[data-theme="dark"] .kpi-timeframe-btn {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

[data-theme="dark"] .kpi-timeframe-btn:hover {
    border-color: #6b7280;
}

/* Simple KPI Card - Clean minimal style */
.kpi-card-simple {
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 1.2rem;
    border: 1px solid #e5e7eb;
    width: 100%;
}

.kpi-card-simple .kpi-label {
    font-size: 1.1rem !important;
}

.kpi-card-simple .kpi-value {
    font-size: 3rem !important;
}

.kpi-card-simple .kpi-change-pill-sm {
    font-size: 1rem !important;
}

.kpi-card-simple:hover {
    border-color: #d1d5db;
}

[data-theme="dark"] .kpi-card-simple {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .kpi-card-simple:hover {
    border-color: #ffffff;
}

/* NVD KPI Dark Theme */
[data-theme="dark"] .kpi-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .kpi-card:hover {
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .kpi-card.no-animation:hover {
    border-color: #ffffff !important;
}

[data-theme="dark"] .kpi-label {
    color: #9ca3af;
}

[data-theme="dark"] .kpi-value {
    color: #f3f4f6;
}

[data-theme="dark"] .kpi-percent {
    color: #9ca3af;
}

[data-theme="dark"] .kpi-card.severity--critical .kpi-label,
[data-theme="dark"] .kpi-card.severity--critical .kpi-value {
    color: #f87171;
}

[data-theme="dark"] .kpi-card.severity--critical .kpi-percent {
    color: #fca5a5;
}


/*######################################
/*######################################
  ANIMATIONS
/*######################################
######################################*/


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* SLA Gauge Chart - compact height */
#tickets-client4-sla-gauge-chart .highcharts-background {
    height: 120px !important;
}

/* Severity pill styles for AD AG Grid */
.severity-pill-low .ag-cell-value,
.severity-pill-medium .ag-cell-value,
.severity-pill-high .ag-cell-value,
.severity-pill-critical .ag-cell-value,
.severity-pill-info .ag-cell-value {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.4;
    text-transform: capitalize;
    margin-top: 6px;
}

.severity-pill-low .ag-cell-value {
    background: linear-gradient(135deg, #d4edda 0%, #55B052 100%);
    color: #155724;
    font-weight: 600;
}

.severity-pill-medium .ag-cell-value {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    color: #856404;
    font-weight: 600;
}

.severity-pill-high .ag-cell-value {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffcccc 100%);
    color: #721c24;
    font-weight: 700;
}

.severity-pill-critical .ag-cell-value {
    background: linear-gradient(135deg, #f8d7da 0%, #f26a8d 100%);
    color: #880d1e;
    font-weight: 700;
}

.severity-pill-info .ag-cell-value {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
    font-weight: 500;
}

/* **************************************
   LOGIN PAGE STYLES
   Modern split-screen login
***************************************/

.login-page {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

/* Left side - Fixed image container */
.login-image-container {
    position: fixed;
    left: 2.5rem;
    top: 2.5rem;
    width: calc(50% - 2.5rem);
    height: calc(100vh - 5rem);
    background-image: url('login-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 16px;
}

/* Right side - Scrollable form container */
.login-form-container {
    position: relative;
    margin-left: 50%;
    width: 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem;
    background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%);
}

/* Form wrapper - centered content */
.login-form-wrapper {
    width: 100%;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: auto;
    transform: translateY(-12%);
}

/* White card for form content */
.login-card {
    background-color: #ffffff;
    padding: 2.5rem 3rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Logo container */
.login-logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.login-logo {
    max-width: 24rem;
    height: auto;
}

/* Header section */
.login-header {
    text-align: center;
}

.login-title {
    font-size: 2rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.login-subtitle {
    font-size: 1.3rem;
    color: #6b7280;
    font-weight: 400;
}

/* Form styling */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.login-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-input .mantine-TextInput-input,
.login-input .mantine-PasswordInput-input {
    height: 4.5rem !important;
    font-size: 1.3rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    transition: all 0.3s ease !important;
}

.login-input .mantine-TextInput-input:focus,
.login-input .mantine-PasswordInput-input:focus,
.login-input .mantine-PasswordInput-input:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.login-input .mantine-PasswordInput-innerInput:focus {
    outline: none !important;
}

.login-input .mantine-TextInput-section,
.login-input .mantine-PasswordInput-section {
    margin-left: 0.8rem;
    padding-right: 0.8rem !important;
}

.login-input .mantine-TextInput-wrapper,
.login-input .mantine-PasswordInput-wrapper {
    --input-left-section-width: 4rem !important;
}

/* Options row (remember me + forgot password) */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-remember .mantine-Checkbox-label {
    font-size: 1.2rem;
    color: #4b5563;
}

.login-forgot {
    font-size: 1.2rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.login-forgot:hover {
    color: #3b82f6;
    text-decoration: underline;
}

/* Submit button */
.login-submit-btn {
    width: 100%;
    height: 4.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    border: none;
    border-radius: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.login-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.login-submit-btn:active {
    transform: translateY(0);
}

/* Divider */
.login-divider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0.5rem 0;
}

.login-divider-line {
    flex: 1;
    height: 1px;
    background-color: #e5e7eb;
}

.login-divider-text {
    font-size: 1.2rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}

/* Microsoft login button */
.login-microsoft-link {
    text-decoration: none;
    display: block;
}

.login-microsoft-btn {
    width: 100%;
    height: 4.5rem;
    background: #ffffff;
    color: #374151;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.login-microsoft-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.login-microsoft-btn svg {
    color: #00a4ef;
}

/* Footer */
.login-footer {
    text-align: center;
    margin-top: 1rem;
}

.login-footer-text {
    font-size: 1.1rem;
    color: #9ca3af;
}

.login-footer-brand {
    color: #2563eb;
    font-weight: 600;
}

.login-legal-text {
    font-size: 1rem;
    color: #9ca3af;
    margin-top: 0.8rem;
}

.login-legal-link {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-legal-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.login-legal-separator {
    color: #d1d5db;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .login-image-container {
        width: 45%;
    }

    .login-form-container {
        margin-left: 45%;
        width: 55%;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .login-page {
        flex-direction: column;
    }

    .login-image-container {
        position: relative;
        width: 100%;
        height: 25vh;
        min-height: 200px;
        left: 0;
        top: 0;
    }

    .login-form-container {
        margin-left: 0;
        width: 100%;
        height: auto;
        min-height: 75vh;
        padding: 2rem 1.5rem;
    }

    .login-form-wrapper {
        max-width: 100%;
    }

    .login-card {
        padding: 2rem 2.5rem;
    }

    .login-title {
        font-size: 1.8rem;
    }

    .login-logo {
        max-width: 22rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
    .login-form-container {
        padding: 1.5rem 1rem;
    }

    .login-card {
        padding: 1.5rem 2rem;
    }

    .login-title {
        font-size: 1.6rem;
    }

    .login-subtitle {
        font-size: 1.2rem;
    }

    .login-logo {
        max-width: 18rem;
    }

    .login-submit-btn,
    .login-microsoft-btn {
        height: 4.2rem;
        font-size: 1.2rem;
    }
}

/* Chart container hover border */
.chart-container,
.graph-col {
    transition: border-color 0.2s ease;
}

.chart-title {
    color: var(--txt-clr-table-header);
}

.chart-container:hover,
.graph-col:hover {
    border-color: #9ca3af !important;
}

[data-theme="dark"] .chart-container:hover,
[data-theme="dark"] .graph-col:hover {
    border-color: #ffffff !important;
}

/* Tickets drawer close button hover */
.drawer-close-btn:hover {
    background: #ffffff !important;
}

/* Tickets drawer accordion — thick subtle blue border when expanded */
.ticket-drawer-accordion:has([data-active]) {
    border: 3px solid rgba(59, 130, 246, 0.35) !important;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

/* Chat history — scrollable but scrollbar hidden */
.chat-history-scroll::-webkit-scrollbar { display: none; }
.chat-history-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Email thread cards — body shown above, "Show Less / Show More" pinned to bottom */
details.email-details {
    display: flex;
    flex-direction: column-reverse;
}
details.email-details > summary {
    list-style: none;
    display: block;
    text-align: right;
    margin-top: 0.6rem;
}
details.email-details > summary::-webkit-details-marker { display: none; }
details.email-details[open] .email-show-less { display: inline; }
details.email-details[open] .email-show-more { display: none; }
details.email-details:not([open]) .email-show-less { display: none; }
details.email-details:not([open]) .email-show-more { display: inline; }

/* ── Ticket Drawer — light theme body overrides ────────────────────────── */
/* Ticket number, title, contact, status, description text → dark */
:root:not([data-theme="dark"]) #tickets-drawer-ticket-number { color: #1e293b !important; }
:root:not([data-theme="dark"]) #tickets-drawer-ticket-title  { color: #1e293b !important; }
:root:not([data-theme="dark"]) #tickets-drawer-contact-name  { color: #334155 !important; }
:root:not([data-theme="dark"]) #tickets-drawer-ticket-status { color: #334155 !important; }
:root:not([data-theme="dark"]) #tickets-drawer-description   { color: #475569 !important; }

/* Close button text */
:root:not([data-theme="dark"]) #tickets-drawer-close-btn { color: #475569 !important; }

/* Accordions: white background, light border when collapsed */
:root:not([data-theme="dark"]) #tickets-drawer-description-acc,
:root:not([data-theme="dark"]) #tickets-drawer-details-acc {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
/* Accordion expanded: subtle blue border */
:root:not([data-theme="dark"]) #tickets-drawer-description-acc:has([data-active]),
:root:not([data-theme="dark"]) #tickets-drawer-details-acc:has([data-active]) {
    border: 2px solid rgba(59, 130, 246, 0.45) !important;
}
/* All spans inside details panel → dark (covers labels, values, SLA) */
:root:not([data-theme="dark"]) #tickets-drawer-details-acc span {
    color: #374151 !important;
}
/* Section headings (Contact, Classification, History, SLA) → near-black */
:root:not([data-theme="dark"]) #tickets-drawer-details-acc div[style*="uppercase"] {
    color: #111827 !important;
}
/* SLA plain-text div → dark */
:root:not([data-theme="dark"]) #tickets-drawer-details-acc div[style*="1.125rem"] {
    color: #374151 !important;
}
/* Row separator borders → light gray */
:root:not([data-theme="dark"]) #tickets-drawer-details-acc div[style*="1e2e3d"] {
    border-bottom-color: #e2e8f0 !important;
}

/* "How are we doing?" and "Ticket History" heading spans */
:root:not([data-theme="dark"]) #tickets-drawer-rating-row > span:first-child { color: #1e293b !important; }
:root:not([data-theme="dark"]) #tickets-drawer-history-row > div > span:last-child { color: #1e293b !important; }

/* TextInput in footer: white background */
:root:not([data-theme="dark"]) #tickets-drawer-message-input input {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}
:root:not([data-theme="dark"]) #tickets-drawer-message-input [class*="wrapper"],
:root:not([data-theme="dark"]) #tickets-drawer-message-input [class*="root"] {
    background-color: #ffffff !important;
}