@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&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&display=swap");

/*............... GENERAL STYLE .........................*/
:root,
[data-theme="light"] {
  color-scheme: light;

  /* New Color System */
  --first-color: #202124;
  /* Carbon Black */
  --second-color: #6c5b7b;
  /* Twilight Purple */
  --third-color: #3a86ff;
  /* Bright Azure Blue */
  --white-color: #ffffff;
  /* Pure White */
  --light-color: #fafafa;
  /* Porcelain */
  --black-color: #202124;
  /* Carbon Black */
  --dark-color: #5f6368;
  /* Slate Gray */
  --hover-color: #f7f7f7;
  /* Polar White */
  --active-color: #e7f0fe;
  /* Breeze Blue */

  /* Aliases for backward compatibility */
  --color-first: var(--first-color);
  --color-second: var(--second-color);
  --color-third: var(--third-color);
  --color-white: var(--white-color);
  --color-light: var(--light-color);
  --color-black: var(--black-color);
  --color-dark: var(--dark-color);
  --color-hover: var(--hover-color);
  --color-active: var(--active-color);

  --color-red: #da0000;
  --color-success: #34a853;
  --color-warning: #f29900;

  --bg-light-gray: #ecf0f1;
  --bg-gray: #f1f3f4;
  --bg-gray1: #e9e9e9;
  --bg-gray2: #cecdcd;

  --font-family-primary: "Open Sans";
  --font-family-secondary: "Poppins";
  /* Legacy support */
  --font-family-work-sans: "Open Sans";
  --font-family-roboto: "Open Sans";
  --shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);

  /* Transitions */
  --transition-speed: 0.2s;

  /* Google Ads Style Variables (Light) */
  --ga-bg: #f8f9fa;
  --ga-nav-bg: #ffffff;
  --ga-border: #dadce0;
  --ga-text: #202124;
  --ga-text-muted: #5f6368;
  --ga-surface: #ffffff;
  --ga-surface-hover: #f1f3f4;
  --ga-surface-selected: #e8f0fe;
  --ga-blue: #202124;
  --ga-green: #1e8e3e;
  --ga-green-bg: #e6f4ea;
  --ga-shadow: rgba(60, 64, 67, 0.3);
  --ga-focus: #e8f0fe;
  --ga-hover: #f1f3f4;
  --ga-font-family: "Open Sans";
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Dark Mode Colors */
  --first-color: #f5f8fa;
  /* Cloud Mist */
  --second-color: #d6d6e7;
  /* Soft Lavender Gray */
  --third-color: #7ab8ff;
  /* Powder Sky Blue */
  --white-color: #202124;
  /* Carbon Black */
  --light-color: #000000;
  /* Absolute Black */
  --black-color: #ffffff;
  /* Pure White */
  --dark-color: #e6e9ee;
  /* Arctic Silver */
  --hover-color: #2d2e31;
  /* Darker Hover - keeping for better contrast */
  --active-color: #e6e9ee;
  /* Frost Silver */

  /* Aliases */
  --color-first: var(--first-color);
  --color-second: var(--second-color);
  --color-third: var(--third-color);
  --color-white: var(--white-color);
  --color-light: var(--light-color);
  --color-black: var(--black-color);
  --color-dark: var(--dark-color);
  --color-hover: var(--hover-color);
  --color-active: var(--active-color);

  --color-success: #8ad48b;
  --color-warning: #ffd27f;

  --bg-light-gray: #1a1b1e;
  --bg-gray: #2a2b2e;
  --bg-gray1: #2a2b2e;
  --bg-gray2: #4c4d50;

  --shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.1),
    0 1px 5px 0 rgba(255, 255, 255, 0.05);

  /* Google Ads Style Variables (Dark) */
  --ga-bg: #202124;
  --ga-nav-bg: #202124;
  --ga-border: #3c4043;
  --ga-text: #e8eaed;
  --ga-text-muted: #9aa0a6;
  --ga-surface: #2d2e31;
  --ga-surface-hover: #3c4043;
  --ga-surface-selected: #3c4043;
  /* or slight blue tint */
  --ga-blue: #f5f8fa;
  --ga-green: #81c995;
  --ga-green-bg: #0c3b1e;
  /* Dark green bg */
  --ga-shadow: rgba(0, 0, 0, 0.5);
  --ga-focus: #3c4043;
  --ga-hover: #3c4043;
}

html[data-bs-theme="light auto"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] {
  color-scheme: dark;
}

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

* {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-first);
  text-transform: none;
  text-wrap: auto;
  transition: background-color var(--transition-speed),
    color var(--transition-speed), border-color var(--transition-speed),
    box-shadow var(--transition-speed);
}



html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-gray);
  padding-bottom: 35px;
  margin: 0;
  overflow-x: hidden;
}

a,
a:hover,
a:focus,
a:focus-visible {
  text-decoration: none;
  outline: none;
}

img {
  object-fit: contain;
  object-position: center;
}

ul li {
  list-style: none;
}

ul.list li {
  list-style: disc;
  color: var(--color-black);
}

html[data-bs-theme="dark"] .chat-input-box i {
  color: var(--color-first);
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-secondary);
  color: var(--color-first);
}

.w-fit-content {
  width: fit-content !important;
}

.min-h-100 {
  min-height: 100%;
  height: 100%;
}

.modal-backdrop {
  /* z-index: 10000;
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important; */
}

.modal {
  z-index: 10050 !important;
}

/* Bid modal specific - highest z-index - above everything */
#wwBidModal {
  z-index: 99999 !important;
}

#wwBidModal .modal-dialog {
  z-index: 99999 !important;
  position: relative;
}

#wwBidModal .modal-content {
  z-index: 99999 !important;
  position: relative;
}

/* Remove backdrop opacity - solid backdrop */
/* #wwBidModal + .modal-backdrop,
body > .modal-backdrop.show {
  background: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  z-index: 99998 !important;
} */

.z-2 {
  z-index: 2;
}

/*............... BORDER STYLES .........................*/
.border-dark {
  border-color: var(--color-dark) !important;
}

.border-first {
  border-color: var(--color-first) !important;
}

.input-border {
  border: 1px solid var(--bg-gray2);
  transition: border-color 0.2s;
}

.input-border:hover {
  border-color: var(--color-dark);
}

.radius-0 {
  border-radius: 0 !important;
}

.radius-50 {
  border-radius: 50px !important;
}

.radius-100 {
  border-radius: 100% !important;
}

/*............... FORM FIELDS STYLES ....................*/
html[data-bs-theme="dark"] input:-webkit-autofill,
html[data-bs-theme="dark"] input:-webkit-autofill:hover,
html[data-bs-theme="dark"] input:-webkit-autofill:focus,
html[data-bs-theme="dark"] input:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
}

input.form-control,
select.form-select,
textarea,
input.form-control:focus,
select.form-select:focus,
textarea:focus {
  background: var(--color-white);
  color: var(--color-first);
}

.form-control {
  outline: none !important;
  box-shadow: none !important;
}

/*............... TEXT LIMIT STYLES .....................*/
.text-limit-1,
.text-limit-2,
.text-limit-3,
.text-limit-4 {
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.text-limit-1 {
  -webkit-line-clamp: 1;
}

.text-limit-2 {
  -webkit-line-clamp: 2;
}

.text-limit-3 {
  -webkit-line-clamp: 3;
}

.text-limit-4 {
  -webkit-line-clamp: 4;
}

/*............... HEADING STYLES ........................*/
.webContent .mainHeading {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0px;
  color: var(--color-first);
  font-family: var(--font-family-secondary);
  text-transform: capitalize;
}

.webContent .largeHeading {
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--color-black);
  font-family: var(--font-family-secondary);
  text-transform: capitalize;
}

.webContent .subHeading {
  font-size: 1.4rem;
  color: var(--color-second);
  font-family: var(--font-family-secondary);
  font-weight: 400;
}

.webContent p {
  font-weight: 400;
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.6;
  font-family: var(--font-family-primary);
}

/*............... COLORS & Background....................*/
.color-first {
  color: var(--color-first) !important;
}

.color-second {
  color: var(--color-second) !important;
}

.color-third {
  color: var(--color-third) !important;
}

.color-dark {
  color: var(--color-dark) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-black {
  color: var(--color-black) !important;
}

.color-gray {
  color: var(--bg-gray) !important;
}

.color-gray1 {
  color: var(--bg-gray1) !important;
}

.color-red {
  color: var(--color-red) !important;
}

.bg-color-red {
  background-color: var(--color-red) !important;
}

.bg-color-first {
  background: var(--color-first) !important;
}

.bg-color-second {
  background: var(--color-second) !important;
}

.bg-color-third {
  background: var(--color-third) !important;
}

.bg-color-dark {
  background: var(--color-dark) !important;
}

.bg-color-light-gray {
  background: var(--bg-light-gray) !important;
}

.bg-color-gray {
  background: var(--bg-gray) !important;
}

.bg-color-gray1 {
  background: var(--bg-gray1) !important;
}

.bg-color-gray2 {
  background: var(--bg-gray2) !important;
}

.bg-color-light {
  background-color: var(--color-light) !important;
}

.bg-color-white {
  background: var(--color-white) !important;
}

.bg-color-black {
  background: var(--color-black) !important;
}

/*............... SVG COLORS ............................*/
svg.fill-first path {
  fill: var(--color-first) !important;
}

svg.fill-second path {
  fill: var(--color-second) !important;
}

svg.fill-third path {
  fill: var(--color-third) !important;
}

svg.fill-white path {
  fill: var(--color-white) !important;
}

svg.fill-dark path {
  fill: var(--color-dark) !important;
}

svg.fill-black path {
  fill: var(--color-black) !important;
}

svg.fill-stroke-first path {
  stroke: var(--color-first) !important;
}

svg.fill-stroke-second path {
  stroke: var(--color-second) !important;
}

svg.fill-stroke-third path {
  stroke: var(--color-third) !important;
}

svg.fill-stroke-white path {
  stroke: var(--color-white) !important;
}

svg.fill-stroke-dark path {
  stroke: var(--color-dark) !important;
}

svg.fill-stroke-black path {
  stroke: var(--color-black) !important;
}

/*............... ICON SIZES ............................*/
.iconSize-8 {
  min-width: 8px;
  height: 8px;
}

.iconSize-10 {
  min-width: 10px;
  height: 10px;
}

.iconSize-12 {
  min-width: 12px;
  height: 12px;
}

.iconSize-15 {
  min-width: 15px;
  height: 15px;
}

.iconSize-16 {
  min-width: 16px;
  height: 16px;
}

.iconSize-18 {
  min-width: 18px;
  height: 18px;
}

.iconSize-20 {
  min-width: 20px;
  height: 20px;
}

.iconSize-24 {
  min-width: 24px;
  height: 24px;
}

.iconSize-25 {
  min-width: 25px;
  height: 25px;
}

.iconSize-30 {
  min-width: 30px;
  height: 30px;
}

.iconSize-35 {
  min-width: 35px;
  height: 35px;
}

.iconSize-40 {
  min-width: 40px;
  height: 40px;
}

.iconSize-48 {
  min-width: 48px;
  height: 48px;
}

/*............... FONT SIZE..............................*/
.text-xxl {
  font-size: 1.5rem !important;
  line-height: normal;
}

.text-xl {
  font-size: 1.25rem !important;
  line-height: normal;
}

.text-lg {
  font-size: 1.125rem !important;
  line-height: normal;
}

.text-md {
  font-size: 1rem !important;
  line-height: normal;
}

.text-sm {
  font-size: 0.875rem !important;
  line-height: normal;
}

.text-xs {
  font-size: 0.75rem !important;
  line-height: normal;
}

/*............... FONT WIGHT ............................*/
.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

/*............... BUTTON STYLE ..........................*/
.button-style {
  border-radius: 5px;
  padding: 5px 20px;
  letter-spacing: 0px;
  text-transform: capitalize;
  outline: 0;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  background-color: transparent;
}

.button-style.button-sm {
  padding: 3px 10px;
  font-size: 0.875rem;
}

.button-style:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-w-100 {
  width: 100px;
  text-align: center;
}

.no-bg-btn {
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-outline-first {
  color: var(--color-first);
  border: 1px solid var(--color-first);
}

.btn-outline-second {
  color: var(--color-second);
  border: 1px solid var(--color-second);
}

.btn-outline-third {
  color: var(--color-third);
  border: 1px solid var(--color-third);
}

.btn-first {
  background: var(--color-first);
  color: var(--color-white);
  border: 1px solid var(--color-first);
}

.btn-second {
  background: var(--color-second);
  color: var(--color-white);
  border: 1px solid var(--color-second);
}

.btn-third {
  background: var(--color-third);
  color: var(--color-white);
  border: 1px solid var(--color-third);
}

/*............... DROPDOWN STYLE ........................*/
.no-toggle-after:after {
  display: none !important;
}

.dropdown-toggle {
  white-space: unset;
}

.dropdown-box {
  transform: translate(0, 0) !important;
}

.dropdown-box .dropdown-item .dropdown-a {
  min-height: 48px;
}

.dropdown-box .dropdown-item.active .dropdown-a,
.dropdown-box .dropdown-item .dropdown-a:hover {
  border: 1px solid var(--color-dark);
  background-color: var(--color-light) !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background: transparent;
}

/*............... MAIN SECTION ..........................*/
.main-layout-container {
  display: flex;
  min-height: 100vh;
  padding-top: 76px;
  position: relative;
}

.main-content-wrapper {
  flex: 1;
  margin-left: 100px;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s ease;
  width: calc(100% - 100px);
}

.main-content-wrapper.has-slide-menu {
  margin-left: 360px;
  width: calc(100% - 360px);
}

@media screen and (max-width: 1400px) {
  .main-content-wrapper.has-slide-menu {
    margin-left: 360px;
    width: calc(100% - 360px);
  }
}

@media screen and (max-width: 1200px) {
  .click-menu-panel,
  .slide-menu-panel {
    width: 240px;
  }

  .main-content-wrapper.has-slide-menu {
    /* margin-left: 340px; */
    width: calc(100% - 340px);
  }

  .filter-bar-section.has-slide-menu {
    /* margin-left: 340px; */
    width: calc(100% - 340px);
  }

  footer.has-slide-menu {
    /* margin-left: 340px; */
    width: calc(100% - 340px);
  }
}

.main-section {
  width: 100%;
  margin: 0;
  padding-top: 90px;
  flex: 1;
  z-index: 2;
}

.webContent {
  padding: 12px 24px 20px;
  width: 100%;
  max-width: 100%;
  /* background-color: var(--bg-light-gray); */
}

@media screen and (max-width: 991px) {

  .main-content-wrapper.has-slide-menu {
    margin-left: 100px !important;
    width: calc(100% - 100px) !important;
  }

  .webContent {
    padding: 16px;
  }

  .main-layout-container {
    flex-direction: row;
  }
}

@media screen and (max-width: 768px) {
  .webContent {
    padding: 10px 8px;
  }

  .main-section {
    padding-bottom: 80px;
  }

}

@media screen and (max-width: 576px) {
  .webContent {
    padding: 8px;
  }

  .main-section {
    padding-top: 10px;
  }
  .audiences-page .kw-filter-menu {
    min-width:100px !important;
  }
}

@media screen and (max-width: 480px) {
  .webContent {
    padding: 8px 4px;
  }
}

.main-section-padding-left {
  padding-left: 0;
}

/* Adjust for slide menu panel */

/*............... TABLE UTILITIES ......................*/
.table-shell {
  overflow-x: auto;
  /* border: 1px solid var(--bg-gray2); */
  /* border-radius: 8px; */
  background: var(--color-white);
}

.table-sticky {
  min-width: 960px;
  --sticky-col-1: 48px;
  --sticky-col-2: 220px;
  border-collapse: collapse;
}

.table-sticky thead th {
  position: sticky;
  top: 0;
  background: var(--bg-light-gray);
  border-bottom: 1px solid var(--bg-gray2);
  z-index: 5;
  font-weight: 600;
}

.table-sticky th,
.table-sticky td {
  border-bottom: 1px solid var(--bg-gray2);
}

.table-sticky tbody tr:hover {
  background: var(--color-hover);
}

.table-sticky .sticky-col {
  position: sticky;
  background: var(--color-white);
  z-index: 2;
}

.table-sticky .sticky-col-1 {
  left: 0;
  z-index: 3;
}

.table-sticky .sticky-col-2 {
  left: var(--sticky-col-1);
  z-index: 3;
}

.table-sticky .row-selected {
  background: var(--color-active);
}

.table-sticky .form-check-input {
  cursor: pointer;
  border-color: var(--color-dark);
}

.audience-bar {
  background: var(--bg-gray);
  border-radius: 6px;
}

.audience-dropdown {
  border: 1px solid var(--bg-gray2);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.arrow-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 18px;
  color: var(--color-dark);
  cursor: pointer;
}

.arrow-btn:hover {
  color: var(--color-black);
}

.last30days {
  color: var(--color-third);
  font-size: 14px;
  text-decoration: none;
}

.last30days:hover {
  text-decoration: underline;
}

/* ============================================
   LOCATIONS PAGE COMPONENT STYLES
   ============================================ */

.locations-page .tab-nav .nav-link {
  color: var(--color-first);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 10px;
}

.locations-page .tab-nav .nav-link.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
  background: transparent;
}

.locations-page .location-toolbar {
  border: 1px solid var(--bg-gray2);
}

.locations-page .location-toolbar .filter-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.locations-page .location-toolbar .add-filter-btn {
  border: 1px dashed var(--bg-gray2);
  color: var(--color-first);
  background: var(--color-white);
}

.locations-page .location-table-actions .action-btn {
  color: var(--color-first);
  border: none;
  background: var(--color-white);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}

.locations-page .table-total-row {
  background: var(--bg-light-gray);
  font-weight: 600;
}

.locations-page .table-total-row td {
  border-bottom: 1px solid var(--bg-gray2) !important;
}

.locations-page .location-table .form-check-input {
  cursor: pointer;
  border-color: var(--color-dark);
}

.locations-page .row-selected {
  background: var(--color-active) !important;
}

.locations-page .selection-banner {
  display: none;
  border: 1px solid var(--bg-gray2);
  background: var(--color-active);
  border-radius: 6px;
}

.custom-date-range {
  cursor: pointer;
  border: 1px solid;
  padding: 12px;
  border-radius: 5px;
}

.locations-page {
  background: var(--bg-gray);
}

.locations-page .hero {
  display: flex;
  flex-direction: column;
}

.locations-page .hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.locations-page .hero-subtitle {
  color: var(--color-dark);
}

.locations-page .hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.locations-page .quick-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.locations-page .pill-btn {
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
  color: var(--color-first);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.locations-page .pill-btn.active {
  border-color: var(--color-third);
  color: var(--color-third);
  background: var(--color-active);
}

.locations-page .pill-btn:hover {
  background: var(--color-hover);
}

.locations-page .date-range-trigger {
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
}

.locations-page .date-range-trigger .label {
  font-weight: 600;
}

.locations-page .select {
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  color: var(--color-first);
  cursor: pointer;
  min-width: 180px;
}

.locations-page .location-toolbar {
  border: 1px solid var(--bg-gray2);
}

.locations-page .action-btn,
.locations-page .export-btn,
.locations-page .bid-btn {
  color: var(--color-first);
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.locations-page .export-btn {
  font-weight: 600;
}

.locations-page .bid-btn {
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
}

.locations-page .table-total-row {
  background: var(--bg-light-gray);
  font-weight: 600;
}

.locations-page .table-total-row td {
  border-bottom: 1px solid var(--bg-gray2) !important;
}

.locations-page .row-selected {
  background: var(--color-active) !important;
}

.locations-page .selection-banner {
  display: none;
  border: 1px solid var(--bg-gray2);
  background: var(--bg-light-gray);
  border-radius: 6px;
}

.locations-page .date-popover {
  position: fixed;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px;
  width: 260px;
  z-index: 30;
}

.locations-page .date-popover .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.locations-page .date-popover input[type="date"] {
  width: 100%;
  border: 1px solid var(--bg-gray2);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--color-white);
  color: var(--color-first);
}

.locations-page .table-shell {
  overflow-x: auto;
}

.locations-page .table-sticky {
  min-width: 1150px;
  --sticky-col-1: 48px;
  --sticky-col-2: 230px;
}

.locations-page .table-sticky .sticky-col {
  position: sticky;
  background: var(--color-white);
  z-index: 2;
}

.locations-page .table-sticky .sticky-col-1 {
  left: 0;
  z-index: 3;
}

.locations-page .table-sticky .sticky-col-2 {
  left: var(--sticky-col-1);
  z-index: 3;
}

.locations-page .table-sticky thead .sticky-col {
  z-index: 4;
}

.locations-page .table-sticky thead th {
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 5;
}

.locations-page .modal .form-label {
  font-weight: 600;
  color: var(--color-first);
}

.locations-page .history-list {
  max-height: 240px;
  overflow-y: auto;
}

/* Selection bar (blue toolbar) */
.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-first);
  color: var(--color-white) !important;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 30;
}

.selection-bar .selection-count {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white) !important;
}

.selection-bar .selection-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-black);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.selection-bar .selection-btn .material-icons,
.selection-bar .selection-icon .material-icons {
  font-size: 18px;
}

.selection-bar .selection-right .selection-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  font-weight: 600;
}

.selection-bar .selection-icon:hover {
  text-decoration: underline;
}

.selection-bar .selection-close {
  border: none;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* .selection-bar .selection-close:hover {
  background: rgba(255, 255, 255, 0.14);
} */

.locations-page .row-selected td {
  background: var(--color-active) !important;
}

/* Google-style date range picker */
.date-range-bar {
  align-items: center;
  gap: 12px;
}

.date-range-bar .link-30 {
  color: var(--color-third);
  font-weight: 600;
}

.date-range-bar .link-30:hover {
  text-decoration: underline;
}

.date-chip {
  border-radius: 8px;
  min-height: 40px;
  border: 1px solid #dadce0;
  padding: 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

.date-chip:hover {
  border-color: var(--color-dark);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* background: #fff; */
}

.date-chip .material-icons {
  color: var(--color-dark);
  font-size: 20px;
}

.date-chip.is-open {
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.12);
}

.range-shift-btn {
  border: none;
  background: transparent;
  color: var(--color-dark);
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.range-shift-btn:hover {
  background: var(--color-hover);
}

.range-shift-btn .material-icons {
  font-size: 22px;
}

.daterangepicker {
  border: 1px solid var(--bg-gray2);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  font-family: var(--font-family-primary);
  color: #202124;
  padding: 0;
  overflow: hidden;
  min-width: 720px;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dashboard page specific date range picker positioning */
.dashboard-control-bar .daterangepicker {
  top:195px !important;
  right: 80px !important;
}

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

.daterangepicker.is-open {
  display: grid !important;
  grid-template-columns: 230px minmax(350px, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: 0;
}

.daterangepicker .ranges {
  grid-row: 1 / span 3;
  grid-column: 1;
  padding: 14px 0;
  border-right: 1px solid #e0e4eb;
  width: 230px;
  margin-top: 0 !important;
  background: none;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  color: #3c4043;
  border-radius: 0;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.daterangepicker .ranges li:hover {
  background: #f1f3f4;
}

.daterangepicker .ranges li.active {
  background: #1a73e8;
  color: #fff;
  border-color: transparent;
  font-weight: 500;
}

.daterangepicker .ranges li.active:hover {
  background: #1765cc;
  color: #fff;
}

.daterangepicker .ranges li:first-child {
  margin-top: 0;
}

.daterangepicker .ranges li:last-child {
  margin-bottom: 0;
}

/* Week submenu styles */
.daterangepicker .ranges li .week-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 180px;
  z-index: 1000;
  display: none;
}

.daterangepicker .ranges li:hover .week-submenu {
  display: block;
}

.daterangepicker .ranges li .week-submenu .week-submenu-item {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--color-first);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.daterangepicker .ranges li .week-submenu .week-submenu-item:hover {
  background: var(--color-hover);
  color: var(--color-first);
}

.daterangepicker .ranges li.active .week-submenu {
  background: var(--color-white);
  border-color: var(--bg-gray2);
}

.daterangepicker .ranges li.active .week-submenu .week-submenu-item {
  color: var(--color-first);
}

.daterangepicker .ranges li.active .week-submenu .week-submenu-item:hover {
  background: var(--color-hover);
  color: var(--color-first);
}

/* Dark theme styles for week submenu */
[data-theme="dark"] .daterangepicker .ranges li .week-submenu,
html[data-bs-theme="dark"] .daterangepicker .ranges li .week-submenu {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .daterangepicker .ranges li .week-submenu .week-submenu-item,
html[data-bs-theme="dark"] .daterangepicker .ranges li .week-submenu .week-submenu-item {
  color: var(--color-first);
}

[data-theme="dark"] .daterangepicker .ranges li .week-submenu .week-submenu-item:hover,
html[data-bs-theme="dark"] .daterangepicker .ranges li .week-submenu .week-submenu-item:hover {
  background: var(--color-hover);
  color: var(--color-first);
}

[data-theme="dark"] .daterangepicker .ranges li.active .week-submenu,
html[data-bs-theme="dark"] .daterangepicker .ranges li.active .week-submenu {
  background: var(--color-white);
  border-color: var(--bg-gray2);
}

/* Month/Year Picker Popup */
.month-year-picker-popup {
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 12px;
  overflow-y: auto;
  max-height: 400px;
  font-family: var(--font-family-primary);
}

.month-year-picker-popup .year-section {
  margin-bottom: 20px;
}

.month-year-picker-popup .year-section:last-child {
  margin-bottom: 0;
}

.month-year-picker-popup .year-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-first);
  margin-bottom: 8px;
  padding: 4px 0;
}

.month-year-picker-popup .months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.month-year-picker-popup .month-item {
  padding: 8px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-first);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.month-year-picker-popup .month-item:hover {
  background: var(--color-hover);
  color: var(--color-first);
}

.month-year-picker-popup .month-item.selected {
  background: var(--color-third);
  color: var(--color-white);
  font-weight: 500;
}

.month-year-picker-popup .month-item.selected:hover {
  background: var(--color-third);
  color: var(--color-white);
}

/* Dark theme for month/year picker */
[data-theme="dark"] .month-year-picker-popup,
html[data-bs-theme="dark"] .month-year-picker-popup {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .month-year-picker-popup .year-label,
html[data-bs-theme="dark"] .month-year-picker-popup .year-label {
  color: var(--color-first);
}

[data-theme="dark"] .month-year-picker-popup .month-item,
html[data-bs-theme="dark"] .month-year-picker-popup .month-item {
  color: var(--color-first);
}

[data-theme="dark"] .month-year-picker-popup .month-item:hover,
html[data-bs-theme="dark"] .month-year-picker-popup .month-item:hover {
  background: var(--color-hover);
  color: var(--color-first);
}

[data-theme="dark"] .month-year-picker-popup .month-item.selected,
html[data-bs-theme="dark"] .month-year-picker-popup .month-item.selected {
  background: var(--color-third);
  color: var(--color-white);
}

[data-theme="dark"] .daterangepicker .calendar-table th.month .month-year-display:hover,
html[data-bs-theme="dark"] .daterangepicker .calendar-table th.month .month-year-display:hover {
  color: var(--color-third);
}

/* Responsive styles */
@media (max-width: 768px) {
  .month-year-picker-popup {
    width: 260px !important;
    max-height: 350px;
  }
  
  .month-year-picker-popup .months-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daterangepicker .drp-header {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px 18px;
  background: #fff;
}

.daterangepicker .drp-header .drp-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.daterangepicker .drp-header label {
  font-size: 12px;
  color: #5f6368;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.daterangepicker .drp-header .drp-input {
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #202124;
  background: #fff;
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker .drp-header .drp-input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.daterangepicker .drp-header .drp-input.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.daterangepicker .drp-header .drp-input.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.daterangepicker .drp-header .drp-separator {
  color: #5f6368;
  margin-top: 28px;
  font-weight: 400;
  font-size: 16px;
}

.daterangepicker .drp-calendar {
  float: none !important;
  width: 100% !important;
  max-width: none;
  padding: 12px 18px;
  background: #fff;
}

.daterangepicker .calendar-scroll-wrapper {
  grid-column: 2;
  grid-row: 2;
  border-top: 1px solid #e0e4eb;
  max-height: 500px;
  min-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  position: relative;
}

.daterangepicker .calendar-scroll-wrapper::-webkit-scrollbar {
  width: 10px;
}

.daterangepicker .calendar-scroll-wrapper::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 5px;
}

.daterangepicker .calendar-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 5px;
}

.daterangepicker .calendar-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #bdc1c6;
}

.daterangepicker .calendar-scroll-wrapper .month-view {
  padding: 12px 18px 20px 18px;
  margin: 0;
  border-bottom: 1px solid #e0e4eb;
}

.daterangepicker .calendar-scroll-wrapper .month-view:last-child {
  border-bottom: none;
  padding-bottom: 12px;
}

.daterangepicker .calendar-scroll-wrapper .month-view .calendar-table {
  width: 100%;
  margin: 0 auto;
}

.daterangepicker .drp-calendar.right {
  display: none !important;
}

.daterangepicker .calendar-table {
  border: none;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #3c4043;
  border-radius: 20px;
  border: 1px solid transparent;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker .calendar-table th {
  font-weight: 500;
  color: #5f6368;
  font-size: 12px;
}

.daterangepicker .calendar-table th.month {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #202124;
  font-weight: 400;
  padding: 8px 0;
  text-align: left;
}

.daterangepicker .calendar-table th.month .month-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  position: relative;
  flex-wrap: wrap;
}

.daterangepicker .calendar-table th.month .month-year-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
  order: 1;
}

.daterangepicker .calendar-table th.month .nav-arrows {
  order: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
  margin-left: auto;
}

.daterangepicker .calendar-table th.month .dropdown-arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #5f6368;
  display: inline-block;
  pointer-events: none;
  position: absolute;
}

.daterangepicker .calendar-table th.month .month-arrow {
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.daterangepicker .calendar-table th.month select.month-year-select {
  font-size: 14px;
  font-weight: 400;
  color: #202124;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 24px 4px 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  min-width: 100px;
}

.daterangepicker .calendar-table th.month .month-year-display {
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  padding: 4px 24px 4px 8px;
  user-select: none;
  transition: color 0.15s ease;
  min-width: 100px;
  display: inline-block;
}

.daterangepicker .calendar-table th.month .month-year-display:hover {
  color: var(--ga-blue);
}

.daterangepicker .calendar-table .nav-arrows .prev,
.daterangepicker .calendar-table .nav-arrows .next {
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s ease;
}

.daterangepicker .calendar-table .nav-arrows .prev:hover,
.daterangepicker .calendar-table .nav-arrows .next:hover {
  background: #f1f3f4;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker .calendar-table .nav-arrows .prev span,
.daterangepicker .calendar-table .nav-arrows .next span {
  border-color: #5f6368;
  border-width: 2px 2px 0 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.daterangepicker .calendar-table .nav-arrows .prev span {
  transform: rotate(-135deg);
  margin-left: 1px;
}

.daterangepicker .calendar-table .nav-arrows .next span {
  transform: rotate(45deg);
  margin-left: -1px;
}

.daterangepicker .calendar-table .nav-arrows .prev:hover span,
.daterangepicker .calendar-table .nav-arrows .next:hover span {
  border-color: #202124;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #f1f3f4;
  color: #202124;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drag and drop styles for calendar */
.daterangepicker .calendar-scroll-wrapper {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.daterangepicker .calendar-scroll-wrapper .available:not(.off) {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.daterangepicker .calendar-scroll-wrapper.dragging .available:not(.off) {
  cursor: grabbing;
}

.daterangepicker .calendar-scroll-wrapper .available:not(.off):active {
  cursor: grabbing;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  color: transparent !important;
  background: transparent !important;
  pointer-events: none;
}

.daterangepicker td.off::before,
.daterangepicker td.off::after {
  content: none !important;
}

.daterangepicker td.in-range {
  background: rgba(26, 115, 232, 0.12);
  border-radius: 0;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.daterangepicker .ranges li.active {
  color: #fff;
  background: #000;
}
.daterangepicker .ranges li.active:hover {
  color: #fff;
  background: #000;
}

.daterangepicker td.start-date {
  border-radius: 20px 0 0 20px;
}

.daterangepicker td.start-date.active {
  background: #1a73e8;
  color: #fff;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker td.start-date.active:hover {
  background: #1765cc !important;
  color: #fff !important;
}

.daterangepicker td.start-date:not(.active) {
  background: rgba(26, 115, 232, 0.12);
  color: #1a73e8;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker td.end-date {
  border-radius: 0 20px 20px 0;
  background: #1a73e8;
  color: #fff;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.daterangepicker td.end-date:hover {
  background: #1765cc !important;
  color: #fff !important;
}

.daterangepicker td.start-date.end-date {
  border-radius: 20px;
  background: #1a73e8;
  color: #fff;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker td.start-date.end-date:hover {
  background: #1765cc !important;
  color: #fff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: #1a73e8;
  color: #fff;
  font-weight: 500;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker td.active:hover {
  background: #1765cc !important;
}

.daterangepicker td.in-range:hover {
  background: rgba(26, 115, 232, 0.2) !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 13px;
  padding: 6px 8px;
  height: auto;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #202124;
  font-family: var(--font-family-primary);
  cursor: pointer;
  margin: 0 4px;
}

.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
  outline: none;
  border-color: var(--ga-blue);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.16);
}

.daterangepicker .drp-buttons {
  grid-column: 2;
  grid-row: 3;
  padding: 12px 18px;
  border-top: 1px solid #e0e4eb;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  background: #fff;
}

.daterangepicker .drp-selected {
  margin-right: auto;
  font-size: 12px;
  color: #5f6368;
  display: none;
}

.daterangepicker .applyBtn {
  background: #1a73e8;
  color: #fff;
  border: 1px solid #1a73e8;
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-family-primary);
}

.daterangepicker .applyBtn:hover {
  background: #1765cc;
  border-color: #1765cc;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
  transform: translateY(-1px);
}

.daterangepicker .applyBtn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.2);
}

.daterangepicker .applyBtn:disabled {
  background: #c6dafc;
  border-color: #c6dafc;
  color: #f8f9fa;
  cursor: not-allowed;
}

.daterangepicker .cancelBtn {
  background: transparent;
  border: none;
  color: #000;
  font-weight: 500;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-family-primary);
  border-radius: 4px;
}

.daterangepicker .cancelBtn:hover {
  background: rgba(26, 115, 232, 0.08);
}

@media (max-width: 900px) {
  .daterangepicker {
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 10000 !important;
  }

  .daterangepicker.is-open {
    grid-template-columns: 140px minmax(200px, 1fr);
    grid-template-rows: auto auto auto;
    display: grid !important;
    height: 100vh;
  }

  .daterangepicker .ranges {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 140px;
    border-right: 1px solid #e0e4eb;
    border-bottom: none;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .daterangepicker .ranges ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .daterangepicker .ranges li {
    font-size: 12px;
    padding: 10px 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    min-width: 0;
  }

  .daterangepicker .drp-header {
    grid-column: 2;
    grid-row: 1;
    padding: 12px 12px 10px 12px;
    gap: 8px;
  }

  .daterangepicker .drp-header .drp-field {
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .daterangepicker .drp-header label {
    font-size: 11px;
  }

  .daterangepicker .drp-header .drp-input {
    padding: 8px 10px;
    font-size: 12px;
    width: 100%;
    min-width: 0;
  }

  .daterangepicker .drp-header .drp-separator {
    margin-top: 24px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .daterangepicker .calendar-scroll-wrapper {
    grid-column: 2;
    grid-row: 2;
    max-height: calc(100vh - 200px);
    min-height: 250px;
    overflow-y: auto;
  }

  .daterangepicker .calendar-scroll-wrapper .month-view {
    padding: 10px 12px 14px 12px;
  }

  .daterangepicker .drp-buttons {
    grid-column: 2;
    grid-row: 3;
    padding: 12px 14px;
  }

  .daterangepicker .ranges li .week-submenu {
    position: fixed;
    left: 50% !important;
    transform: translateX(-50%);
    top: auto !important;
    bottom: 20px;
    width: calc(100vw - 40px);
    max-width: 280px;
    min-width: 200px;
  }

  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
  }

  .daterangepicker .calendar-table th {
    font-size: 11px;
  }

  .daterangepicker .calendar-table th.month {
    font-size: 13px;
    padding: 6px 0;
  }

  .daterangepicker .applyBtn,
  .daterangepicker .cancelBtn {
    font-size: 13px;
    padding: 8px 14px;
  }
}

.button-with-icon {
  display: flex;
  flex-direction: column;
}
/* ============================================
   KEYWORDS PAGE COMPONENT STYLES
   ============================================ */
.keywords-page.fullscreen-mode {
  padding: 0 !important;
  margin: 0 !important;
  height: 100vh !important;
  overflow: hidden;
}

.keywords-page.fullscreen-mode .kw-table {
  /* height: calc(100vh - 120px) !important; */
  max-height: none !important;
  margin-top: 20px !important;
  border-radius: 0 !important;
}

.fullscreen-table {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  background: white !important;
  border-radius: 0 !important;
  overflow: auto !important;
}

.fullscreen-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 10001 !important;
  background: white !important;
  border-bottom: 1px solid #e8eaed !important;
}

body.no-scroll {
  overflow: hidden !important;
}

.kw-table-wrapper.fullscreen-table .dataTables_wrapper {
  height: 100% !important;
}

.kw-table-wrapper.fullscreen-table .dataTables_scrollBody {
  height: calc(100vh - 200px) !important;
}
.kw-hero {
  padding: 92px 12px 24px;
  background: var(--bg-gray);
}

.kw-container {
  max-width: 1480px;
  margin: 0 auto;
}

.kw-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--bg-gray2);
  padding: 0 20px;
}

.kw-tab {
  border: none;
  background: transparent;
  padding: 10px 6px;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.kw-tab.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
}

.kw-chart-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  position: relative;
}

.kw-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  padding: 12px 12px;
  /* background: var(--color-white); */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  cursor: pointer;
}

.kw-pill .dot-blue {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-third);
}

.kw-pill .dot-red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-red);
}

.kw-pill .dot-red.dash {
  width: 12px;
  height: 2px;
  border-radius: 0;
  background: var(--color-red);
}

.kw-pill .chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.6;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.kw-pill.active .chevron {
  transform: rotate(180deg);
}

.kw-metric {
  position: relative;
  display: inline-block;
}

.kw-menu {
  position: absolute;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  padding: 8px 0;
  top: 48px;
  left: auto;
  z-index: 10000;
  display: none;
  right:0;
}

.kw-menu.visible {
  display: block;
}

.kw-menu .kw-menu-search {
  padding: 8px 14px 12px;
  border-bottom: 1px solid var(--bg-gray2);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-dark);
}

.kw-menu .kw-menu-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-dark);
}

.kw-menu .kw-menu-columns {
  display: flex;
  align-items: stretch;
  min-height: 260px;
}

.kw-menu .kw-menu-cats {
  min-width: 180px;
  border-right: 1px solid var(--bg-gray2);
  max-height: 320px;
  overflow-y: auto;
}

.kw-menu .kw-menu-items {
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}

.kw-menu .kw-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--color-first);
  transition: background-color 0.15s ease, color 0.15s ease;
  font-weight: 600;
}

.kw-menu .kw-cat:hover {
  background: var(--bg-gray);
}

.kw-menu .kw-cat.active {
  /* background: var(--color-active); */
  color: var(--color-third);
  border-left: 3px solid var(--color-third);
  padding-left: 13px;
}

.kw-menu .kw-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--color-first);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kw-menu .kw-menu-item:hover {
  background: var(--bg-gray);
  color: var(--color-third);
}

.kw-menu .kw-menu-item .kw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--color-third);
}

.kw-menu .kw-meta {
  font-size: 11px;
  color: var(--color-dark);
  margin-left: auto;
}

.kw-chart-type {
  position: relative;
}

.kw-chart-type-menu,
.kw-adjust-menu {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  display: none;
  z-index: 15;
}

.kw-chart-type-menu.visible,
.kw-adjust-menu.visible {
  display: block;
}

.kw-chart-type-option,
.kw-adjust-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--color-first);
  font-weight: 600;
}

.kw-chart-type-option:hover,
.kw-adjust-option:hover {
  background: var(--bg-gray);
}

.kw-chart-type-option.disabled,
.kw-adjust-option.disabled {
  color: var(--color-dark);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.kw-adjust-option.active {
  color: var(--color-third);
}

.kw-card.expanded #kwChart {
  height: 420px;
}

.kw-icon-btn {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 2px;
  background: transparent;
  padding: 0 10px;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  gap: 4px;
  font-weight: 500;
  color: var(--color-dark);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kw-icon-btn svg,
.kw-icon-btn path,
.kw-icon-btn rect,
.kw-icon-btn line,
.kw-icon-btn polygon,
.kw-icon-btn circle,
.kw-icon-btn ellipse,
.kw-icon-btn polyline,
.kw-icon-btn text {
  color: var(--color-dark);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kw-icon-btn span {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When and Where page - Chart type, Expand, Adjust buttons hover */
.kw-icon-btn#wwChartTypeTrigger:hover,
.kw-icon-btn#wwExpandToggle:hover,
.kw-icon-btn#wwAdjustToggle:hover {
  background: #000 !important;
  color: #fff !important;
}

.kw-icon-btn#wwChartTypeTrigger:hover span,
.kw-icon-btn#wwExpandToggle:hover span,
.kw-icon-btn#wwAdjustToggle:hover span {
  color: #fff !important;
}

.kw-icon-btn#wwChartTypeTrigger:hover svg,
.kw-icon-btn#wwExpandToggle:hover svg,
.kw-icon-btn#wwAdjustToggle:hover svg,
.kw-icon-btn#wwChartTypeTrigger:hover svg path,
.kw-icon-btn#wwExpandToggle:hover svg path,
.kw-icon-btn#wwAdjustToggle:hover svg path,
.kw-icon-btn#wwChartTypeTrigger:hover svg g,
.kw-icon-btn#wwExpandToggle:hover svg g,
.kw-icon-btn#wwAdjustToggle:hover svg g,
.kw-icon-btn#wwChartTypeTrigger:hover svg g path,
.kw-icon-btn#wwExpandToggle:hover svg g path,
.kw-icon-btn#wwAdjustToggle:hover svg g path,
.kw-icon-btn#wwChartTypeTrigger:hover svg g *,
.kw-icon-btn#wwExpandToggle:hover svg g *,
.kw-icon-btn#wwAdjustToggle:hover svg g * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

#kwChart {
  width: 100%;
  height: 260px;
  min-height: 260px;
  background: var(--color-white);
}

.kw-card.expanded #kwChart {
  height: 420px;
  min-height: 420px;
}

/* Table Styles */
.kw-table {
  background: var(--color-white);
  margin-top: 24px;
  /* overflow: hidden; */
}

.kw-table-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  background: var(--ga-bg);
  padding: 0;
  border: 1px solid var(--ga-border);
  border-radius: 0;
}

/* Ensure sticky positioning works correctly within the wrapper */
.kw-table-wrapper > table {
  margin: 0;
}

.kw-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.kw-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

.kw-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
  border-radius: 4px;
}

.kw-table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  flex-wrap: wrap;
}

.kw-table-controls .add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-third);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 2px 4px rgba(58, 134, 255, 0.3);
  transition: all 0.2s;
  flex-shrink: 0;
}

.kw-table-controls .add-btn:hover {
  background: var(--color-third);
  opacity: 0.9;
  box-shadow: 0 4px 8px rgba(58, 134, 255, 0.4);
  transform: translateY(-1px);
}

.kw-table-controls .add-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
}

.kw-table-controls .filter-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
}

.kw-table-controls .filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-third);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.kw-table-controls .status-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
}

.kw-table-controls .active-filter-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.kw-table-controls .active-filter-pill:hover {
  background: var(--bg-gray);
}

.kw-table-controls .filter-pill-close {
  color: var(--color-dark);
  font-size: 16px;
  line-height: 1;
}

.kw-table-controls .filter-pill-close:hover {
  color: var(--color-red);
}

.kw-table-controls .active-filters-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Filter Panel - Full Overlay Style */
.kw-filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
  display: none;
  animation: fadeIn 0.2s ease-out;
}

.kw-filter-panel.visible {
  display: block;
}

.kw-filter-panel-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  box-shadow: 0 4px 16px var(--ga-shadow);
  z-index: 9999;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideDown 0.3s ease-out;
}

.kw-filter-panel-content .kw-filter-option:hover {
  background: var(--ga-surface-hover);
}

.kw-filter-panel-content .kw-filter-option.active {
  background: var(--ga-surface-hover);
}

.kw-filter-panel-content .kw-filter-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.kw-filter-panel-content .kw-filter-close:hover {
  background: #f1f3f4;
}

/* Filter Bar (replaces table header) */
.kw-filter-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--ga-border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.kw-filter-bar .kw-filter-bar-option:hover {
  background: var(--ga-surface-hover);
}

.kw-filter-bar .kw-filter-bar-option.active {
  background: var(--ga-surface-hover);
}

.kw-filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  min-width: 300px;
  margin-top: 8px;
  z-index: 1;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.kw-filter-menu {
  position: absolute;
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  padding: 0;
  min-width: 320px;
  z-index: 1000;
  display: none;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#filterMenu {
  overflow: visible !important;
  visibility: visible !important;
  top:195px;
}

#filterMenu .kw-filter-options-list {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#filterMenu .kw-filter-option {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Filter menu positioned below filter button container */
.position-relative > #filterMenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 8px !important;
  transform: none !important;
  width: auto !important;
  min-width: 320px !important;
  max-width: 400px !important;
}

.kw-filter-menu.visible {
  display: block !important;
}

#filterMenu.visible {
  display: block !important;
}

#filterMenu {
  background: var(--color-white) !important;
  opacity: 1 !important;
}

#kwAddFilterMenu {
  left: 0;
  top: 100%;
  margin-top: 4px;
}

.kw-table-controls .add-filter-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 600;
  transition: color 0.15s ease;
  padding: 0;
}

.kw-filter-menu .filter-item {
  transition: background 0.15s ease;
}

.kw-filter-menu .filter-item:hover {
  background: var(--ga-surface-hover);
}

.kw-filter-menu .filter-recent {
  transition: background 0.15s ease;
}

.kw-filter-menu .filter-recent:hover {
  background: var(--ga-surface-selected) !important;
}

#kwAddFilterMenu .filter-item {
  transition: background-color 0.15s ease;
}
#kwAddFilterMenu .filter-item:hover {
  background-color: var(--bg-gray);
}
#kwAddFilterMenu .filter-recent {
  transition: background-color 0.15s ease;
}
#kwAddFilterMenu .filter-recent:hover {
  background-color: var(--color-hover) !important;
}

#kwAddFilterMenu .filter-saved {
  transition: background-color 0.15s ease;
}

#kwAddFilterMenu .filter-saved:hover {
  background-color: var(--ga-surface-hover) !important;
}

#kwAddFilterMenu .filter-category-header {
  transition: background-color 0.15s ease;
}

#kwAddFilterMenu .filter-category-header:hover {
  background-color: var(--ga-surface-hover);
}

#kwAddFilterMenu .filter-category-header.active .category-chevron {
  transform: rotate(180deg);
}

#kwAddFilterMenu .filter-category-items {
  transition: all 0.2s ease;
}

#kwAddFilterMenu {
  top: 44px;
  left: 0;
}

.kw-filter-menu.visible {
  display: block;
}

.kw-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ga-border);
  background: var(--ga-bg);
}

.kw-filter-header h6 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--ga-text);
}

.kw-filter-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kw-filter-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 4px;
  transition: all 0.2s;
}

.kw-filter-action-btn:hover {
  background: var(--ga-surface-hover);
  color: var(--ga-text);
}

.kw-filter-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 4px;
  transition: all 0.2s;
}

.kw-filter-close:hover {
  background: var(--ga-surface-hover);
  color: var(--ga-text);
}

.kw-filter-options-list {
  padding: 8px 0;
  min-height: 100px;
}

.kw-filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--ga-text);
  font-size: 14px;
  min-height: 40px;
  box-sizing: border-box;
}

.kw-filter-option:hover {
  background: var(--ga-surface-hover);
}

.kw-filter-option.active {
  background: var(--ga-surface-selected);
  color: var(--color-third);
  font-weight: 500;
}

.kw-filter-check {
  font-size: 16px;
  margin-left: 8px;
  display: none;
}

/* Active Filters Dropdown */
.kw-active-filters-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  padding: 0;
  min-width: 320px;
  max-width: 400px;
  z-index: 1000;
  display: none;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.kw-active-filters-dropdown.visible {
  display: block !important;
}

.kw-active-filters-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ga-border);
  background: var(--ga-bg);
}

.kw-active-filters-dropdown-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--ga-text);
}

.kw-active-filters-dropdown-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 4px;
  transition: all 0.2s;
}

.kw-active-filters-dropdown-close:hover {
  background: var(--ga-surface-hover);
  color: var(--ga-text);
}

.kw-active-filters-dropdown-body {
  padding: 0;
  max-height: calc(4 * 48px); /* Show exactly 4 items, then scroll */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar styling for better UX */
.kw-active-filters-dropdown-body::-webkit-scrollbar {
  width: 6px;
}

.kw-active-filters-dropdown-body::-webkit-scrollbar-track {
  background: transparent;
}

.kw-active-filters-dropdown-body::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
  border-radius: 3px;
}

.kw-active-filters-dropdown-body::-webkit-scrollbar-thumb:hover {
  background: var(--bg-gray1);
}

.kw-active-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ga-border);
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--ga-text);
  font-size: 14px;
}

.kw-active-filter-item:last-child {
  border-bottom: none;
}

.kw-active-filter-item:hover {
  background: var(--ga-surface-hover);
}

.kw-active-filter-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  color: var(--ga-text-muted);
}

.kw-active-filter-remove:hover {
  background: var(--ga-surface-hover);
  color: var(--ga-text);
}

/* Dark mode support */
body.dark-mode .kw-active-filters-dropdown,
html.dark-mode .kw-active-filters-dropdown,
[data-theme="dark"] .kw-active-filters-dropdown {
  background: var(--ga-surface) !important;
  border: 1px solid var(--ga-border);
}

body.dark-mode .kw-active-filters-dropdown-header,
html.dark-mode .kw-active-filters-dropdown-header,
[data-theme="dark"] .kw-active-filters-dropdown-header {
  background: var(--ga-surface);
  border-bottom-color: var(--ga-border);
}

body.dark-mode .kw-active-filter-item,
html.dark-mode .kw-active-filter-item,
[data-theme="dark"] .kw-active-filter-item {
  border-bottom-color: var(--ga-border);
  color: var(--ga-text);
}

body.dark-mode .kw-active-filter-item:hover,
html.dark-mode .kw-active-filter-item:hover,
[data-theme="dark"] .kw-active-filter-item:hover {
  background: var(--ga-surface-hover);
}

.kw-filter-option.active .kw-filter-check {
  display: inline-block !important;
}

.kw-filter-search input {
  width: 100%;
  border: 1px solid var(--bg-gray2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

.theme-dark .inline-icon-btn,
.theme-dark .match-menu button.active,
.theme-dark .status-menu button.active,
.theme-dark .status-menu button:hover,
.theme-dark .match-menu button:hover {
  background: gray !important;
  border-color: gray !important;
}
.theme-dark #keywordsTable tbody tr.row-selected,
.theme-dark #keywordsTable tbody tr.row-selected td.sticky-col-1,
.theme-dark #keywordsTable tbody tr.row-selected td.sticky-col-2,
.theme-dark #keywordsTable tbody tr.row-selected td.sticky-col-3,
.theme-dark #keywordsTable tbody tr.row-selected td {
  background: #22293d !important;
}

.kw-filter-section {
  padding: 8px 0;
  border-top: 1px solid var(--bg-gray2);
}

.kw-filter-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  padding: 0 12px 6px;
}

.kw-filter-option {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-first);
}

.kw-filter-option:hover {
  background: var(--bg-gray);
}

.kw-filter-option.active {
  background: var(--color-active);
  color: var(--color-third);
}

.kw-table-controls .icon-group {
  display: flex;
  gap: 0;
  margin-left: auto;
  align-items: center;
}

.kw-icon-separator {
  width: 1px;
  height: 24px;
  background: var(--ga-border);
  margin: 0 8px;
  flex-shrink: 0;
}

#kwChartToggle {
  padding: 8px;
  min-width: 40px;
  transition: transform 0.3s ease;
}

#kwChartToggle.collapsed {
  transform: rotate(180deg);
}

.kw-card.collapsed {
  display: none !important;
}

.row.mb-4 .kw-card.collapsed {
  display: none !important;
}

#keywordsTable {
  min-width: 1400px;
  width: 100%;
  table-layout: auto;
  border: none;
  position: relative;
  border-collapse: separate;
  border-spacing: 0;
}

#keywordsTable thead th {
  padding: 6px 10px;
  font-size: 14px;
  color: var(--ga-text);
  font-weight: 600;
  text-align: left !important;
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}

#keywordsTable tbody td {
  padding: 6px 10px;
  font-size: 14px;
  color: var(--color-first);
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}
#keywordsTable tbody tr:hover {
  background: var(--ga-surface-hover);
}
#keywordsTable th.sticky-col-1,
#keywordsTable td.sticky-col-1 {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--color-white);
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  box-sizing: border-box;
}

#keywordsTable th.sticky-col-2,
#keywordsTable td.sticky-col-2 {
  position: sticky;
  left: 40px;
  z-index: 9;
  background: var(--color-white);
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  box-sizing: border-box;
}

#keywordsTable th.sticky-col-3,
#keywordsTable td.sticky-col-3 {
  position: sticky;
  left: 90px;
  z-index: 8;
  min-width: 160px;
  width: 160px;
  background: var(--color-white);
  box-sizing: border-box;
  overflow: visible;
}

#keywordsTable th.sticky-col-1 {
  z-index: 11 !important;
  background: var(--color-white) !important;
}

#keywordsTable th.sticky-col-2 {
  z-index: 10 !important;
  background: var(--color-white) !important;
}

#keywordsTable th.sticky-col-3 {
  z-index: 9 !important;
  background: var(--color-white) !important;
}

#keywordsTable tbody td.sticky-col-1 {
  z-index: 11;
  background: var(--color-white);
}

#keywordsTable tbody td.sticky-col-2 {
  z-index: 10;
  background: var(--color-white);
}

#keywordsTable tbody td.sticky-col-3 {
  z-index: 9;
  background: var(--color-white);
  overflow: visible;
}

#keywordsTable th.sticky-col-3 {
  overflow: visible;
}

#keywordsTable tbody tr:hover td.sticky-col-1,
#keywordsTable tbody tr:hover td.sticky-col-2,
#keywordsTable tbody tr:hover td.sticky-col-3 {
  background: var(--ga-surface-hover);
}

#keywordsTable tbody tr.row-selected td.sticky-col-1,
#keywordsTable tbody tr.row-selected td.sticky-col-2,
#keywordsTable tbody tr.row-selected td.sticky-col-3 {
  background: var(--color-active) !important;
}

#keywordsTable tbody tr.expanded-row td.sticky-col-1,
#keywordsTable tbody tr.expanded-row td.sticky-col-2,
#keywordsTable tbody tr.expanded-row td.sticky-col-3 {
  background: var(--bg-gray);
}

#keywordsTable td.sticky-col-1 .status-menu,
#keywordsTable td.sticky-col-2 .status-menu,
#keywordsTable td.sticky-col-3 .status-menu,
#keywordsTable td.sticky-col-1 .match-menu,
#keywordsTable td.sticky-col-2 .match-menu,
#keywordsTable td.sticky-col-3 .match-menu {
  z-index: 10000 !important;
}

#keywordsTable td.sticky-col-1:has(.status-menu.show),
#keywordsTable td.sticky-col-1:has(.match-menu.show),
#keywordsTable td.sticky-col-2:has(.status-menu.show),
#keywordsTable td.sticky-col-2:has(.match-menu.show),
#keywordsTable td.sticky-col-3:has(.status-menu.show),
#keywordsTable td.sticky-col-3:has(.match-menu.show) {
  z-index: 10001 !important;
}

#keywordsTable tbody tr.expanded-row {
  background: var(--bg-gray);
}

#keywordsTable tbody tr.expanded-row td {
  background: var(--bg-gray);
}

#keywordsTable tbody tr.row-selected {
  background: var(--color-active) !important;
}

#keywordsTable tbody tr.row-selected td {
  background: var(--color-active) !important;
}

#keywordsTable th,
#keywordsTable td {
  background: var(--color-white);
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}

#keywordsTable th.has-inline-menu,
#keywordsTable td.has-inline-menu {
  overflow: visible !important;
}

#keywordsTable th *,
#keywordsTable td * {
  white-space: nowrap !important;
}

#keywordsTable th a,
#keywordsTable td a,
#keywordsTable th span,
#keywordsTable td span {
  white-space: nowrap !important;
}

#keywordsTable th.sticky-col-1,
#keywordsTable td.sticky-col-1,
#keywordsTable th.sticky-col-2,
#keywordsTable td.sticky-col-2 {
  border-right: none;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  flex-grow: 0;
}

.status-dot.green {
  background: #28a745;
}

.status-dot.gray {
  background: #6c757d;
}

.status-dot.red {
  background: #c5221f;
}

.status-cell,
.keyword-cell,
.match-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}

.status-cell {
  overflow: visible;
}

.status-dot {
  visibility: visible !important;
  opacity: 1 !important;
}

.status-cell:has(.status-menu.show),
.match-cell:has(.match-menu.show) {
  z-index: 10001;
}

.inline-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ga-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  flex-shrink: 0;
}

.inline-icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

#keywordsTable tbody tr:hover .inline-icon-btn {
  opacity: 1;
  visibility: visible;
}

.inline-icon-btn:hover {
  background: #eef0f3;
  border-color: #d7d9dd;
}

#keywordsTable td.has-inline-menu {
  overflow: visible !important;
}

#keywordsTable td.sticky-col-2.has-inline-menu,
#keywordsTable td.sticky-col-3.has-inline-menu {
  overflow: visible !important;
}

.status-menu,
.match-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--ga-border);
  border-radius: 12px;
  box-shadow: 0 10px 26px var(--ga-shadow);
  min-width: 180px;
  padding: 6px 0;
  display: none;
  z-index: 10000 !important;
}
.status-menu.show,
.match-menu.show {
  display: block;
}
.status-menu button,
.match-menu button {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ga-text);
  font-weight: 600;
}
.status-menu button:hover,
.match-menu button:hover {
  background: #f1f3f4;
}
.status-menu .status-dot {
  flex-shrink: 0;
}

.match-menu .match-note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-third);
}

.match-menu button.active,
.status-menu button.active {
  background: #f1f3f4;
}

.keyword-text {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.kw-add-keyword-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

.kw-add-keyword-modal-overlay[style*="flex"],
.kw-add-keyword-modal-overlay.show {
  display: flex !important;
}

.kw-add-keyword-modal {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.kw-add-keyword-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ga-border);
  flex-shrink: 0;
}

.kw-add-keyword-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
}

.kw-add-keyword-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 50%;
  transition: background 0.2s;
  width: 40px;
  height: 40px;
}

.kw-add-keyword-close:hover {
  background: var(--ga-surface-hover);
}

.kw-add-keyword-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 500px;
}

.kw-add-keyword-left {
  flex: 1;
  padding: 24px;
  border-right: 1px solid var(--ga-border);
  overflow-y: auto;
  background: var(--color-white);
}

.kw-add-keyword-right {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--ga-bg);
}

.kw-add-keyword-section {
  width: 100%;
}

.kw-add-keyword-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ga-text);
}

.kw-add-keyword-instruction {
  font-size: 13px;
  color: var(--ga-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.kw-add-keyword-adgroup {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--ga-bg);
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ga-text);
}

.kw-add-keyword-adgroup a {
  color: var(--color-third);
  text-decoration: none;
}

.kw-add-keyword-adgroup a:hover {
  text-decoration: underline;
}

.kw-add-keyword-input-wrapper {
  margin-bottom: 20px;
}

.kw-add-keyword-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  background: var(--color-white);
  color: var(--ga-text);
}

.kw-add-keyword-textarea:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.1);
}

.kw-add-keyword-textarea::placeholder {
  color: var(--ga-text-muted);
}

.kw-add-keyword-match-types {
  padding: 0;
  background: transparent;
  font-size: 13px;
}

.kw-add-keyword-match-types code {
  background: var(--ga-surface-hover);
  padding: 2px 4px;
  border-radius: 2px;
  font-family: "Courier New", monospace;
  color: var(--color-red);
}

.kw-add-keyword-ideas-input {
  margin-bottom: 20px;
}

.kw-add-keyword-idea-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: var(--color-white);
  color: var(--ga-text);
}

.kw-add-keyword-idea-input:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.1);
}

.kw-add-keyword-idea-input::placeholder {
  color: var(--ga-text-muted);
}

.kw-add-keyword-suggestions {
  background: var(--color-white);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.kw-add-keyword-suggestions-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.kw-add-keyword-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ga-border);
  font-size: 14px;
  color: var(--ga-text);
}

.kw-add-keyword-suggestion-item:last-child {
  border-bottom: none;
}

.kw-add-keyword-suggestion-item:hover {
  background: var(--ga-surface-hover);
}

.kw-add-keyword-suggestion-add {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-third);
  border-radius: 50%;
  transition: background 0.2s;
  width: 32px;
  height: 32px;
}

.kw-add-keyword-suggestion-add:hover {
  background: var(--ga-surface-selected);
}

.kw-add-keyword-add-all {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--color-third);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.kw-add-keyword-add-all:hover {
  background: var(--ga-surface-hover);
}

.kw-add-keyword-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--ga-border);
  background: var(--color-white);
  flex-shrink: 0;
}

.kw-add-keyword-btn-cancel {
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--ga-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.kw-add-keyword-btn-cancel:hover {
  background: var(--ga-surface-hover);
}

.kw-add-keyword-btn-save {
  padding: 10px 24px;
  background: var(--color-third);
  border: none;
  border-radius: 4px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.kw-add-keyword-btn-save:hover {
  opacity: 0.9;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Add Keywords Inline Section Styles */
.kw-add-keyword-section {
  margin-top: 24px;
}

.kw-add-keyword-header-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ga-border);
}

.kw-add-keyword-tabs {
  display: flex;
  gap: 0;
}

.kw-add-keyword-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ga-text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.kw-add-keyword-tab:hover {
  color: var(--ga-text);
}

.kw-add-keyword-tab.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
}

.kw-add-keyword-close-inline {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 50%;
  transition: background 0.2s;
  width: 40px;
  height: 40px;
}

.kw-add-keyword-close-inline:hover {
  background: var(--ga-surface-hover);
}

.kw-add-keyword-content-inline {
  display: flex;
  padding: 24px;
  gap: 0;
  min-height: 500px;
  background: var(--color-white);
}

.kw-add-keyword-main-content {
  flex: 1;
  padding-right: 24px;
  border-right: 1px solid var(--ga-border);
  max-width: 60%;
}

.kw-add-keyword-sidebar {
  flex: 1;
  padding-left: 24px;
  max-width: 40%;
  background: var(--color-white);
}

.kw-add-keyword-tab-content {
  display: flex;
  width: 100%;
  gap: 0;
}

.kw-add-keyword-tab-content.active {
  display: flex;
}

.kw-add-keyword-tab-content#kwTabContentNegative {
  display: flex;
}

.kw-add-keyword-tab-content#kwTabContentNegative .kw-add-keyword-main-content {
  max-width: 100%;
  border-right: none;
  padding-right: 0;
}

.kw-add-keyword-tab-content#kwTabContentNegative .kw-add-keyword-sidebar {
  display: none;
}

.kw-add-keyword-footer-inline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid var(--ga-border);
  background: var(--color-white);
}

.kw-add-keyword-footer-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.kw-select-adgroup-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

.kw-select-adgroup-modal-overlay[style*="flex"],
.kw-select-adgroup-modal-overlay.show {
  display: flex !important;
}

.kw-select-adgroup-modal {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.kw-select-adgroup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ga-border);
  flex-shrink: 0;
}

.kw-select-adgroup-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
}

.kw-select-adgroup-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 50%;
  transition: background 0.2s;
  width: 40px;
  height: 40px;
}

.kw-select-adgroup-close:hover {
  background: #f1f3f4;
}

.kw-select-adgroup-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}

.kw-select-adgroup-left {
  flex: 1;
  border-right: 1px solid var(--ga-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kw-select-adgroup-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8f9fa;
}

.kw-select-adgroup-search {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid var(--ga-border);
}

.kw-select-adgroup-search-input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.kw-select-adgroup-search-input:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.kw-select-adgroup-campaigns,
.kw-select-adgroup-adgroups {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.kw-select-adgroup-campaign-list {
  flex: 1;
  overflow-y: auto;
}

.kw-select-adgroup-campaign-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--ga-border);
  transition: background 0.15s;
}

.kw-select-adgroup-campaign-item:hover {
  background: #f8f9fa;
}

.kw-select-adgroup-campaign-item.selected {
  background: #e8f0fe;
}

.kw-select-adgroup-adgroup-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.kw-select-adgroup-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--ga-border);
  background: var(--color-white);
  flex-shrink: 0;
}

.kw-select-adgroup-upload-btn {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--ga-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.kw-select-adgroup-upload-btn:hover {
  background: #f8f9fa;
}

.kw-edit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.kw-edit-modal {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
  max-width: 520px;
  width: 100%;
  padding: 20px;
}

.kw-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kw-edit-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--ga-text);
}

.kw-edit-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ga-text-muted);
}

.kw-edit-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.kw-edit-label {
  font-size: 13px;
  font-weight: 600;
  color: #3c4043;
}

.kw-edit-input,
.kw-edit-select {
  width: 100%;
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--color-white);
}

.kw-edit-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5f6368 50%),
    linear-gradient(135deg, #5f6368 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.kw-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.kw-btn-secondary,
.kw-btn-primary {
  min-width: 84px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.kw-btn-secondary {
  color: var(--color-third);
  border-color: transparent;
}

.kw-btn-primary {
  background: #1a73e8;
  color: #fff;
  border-color: var(--color-third);
}

.kw-btn-primary:hover {
  background: #1765c1;
}

.expand-icon {
  cursor: pointer;
  color: var(--color-dark);
  font-size: 16px;
  padding: 4px;
}

.link-blue {
  color: var(--color-third);
  text-decoration: none;
  cursor: pointer;
}

.link-blue:hover {
  text-decoration: underline;
}

.status-limited {
  color: #d32f2f !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.status-limited:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

.sort-icon {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: inline-block;
  min-width: 12px;
}

th.sortable:hover .sort-icon {
  opacity: 0.4;
}

.sort-icon.active {
  opacity: 1;
  color: var(--color-third);
}

th.sortable {
  cursor: pointer;
}

.table-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--bg-gray2);
  font-size: 14px;
  color: var(--color-dark);
}

.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-first);
  color: var(--color-white) !important;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 30;
}

.selection-bar .selection-count {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white) !important;
}

.selection-bar .selection-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--color-black);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.selection-bar .selection-close {
  border: none;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.kw-flyout {
  position: absolute;
  top: 50px;
  left: 0;
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  display: none;
  z-index: 25;
  min-width: 200px;
  max-width: 320px;
  opacity: 1 !important;
}

#kwMoreMenu {
  left: auto;
  right: 0;
}

.kw-download-dropdown {
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 999999 !important;
  display: none;
  flex-direction: column;
  width: 220px;
  padding: 8px 0;
  min-width: 220px;
}

.kw-download-dropdown.visible {
  display: flex;
}

.kw-dd-header-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ga-text);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--ga-border);
  transition: background-color 0.15s ease;
}

.kw-dd-header-item:hover {
  background: #f1f3f4;
}

.kw-dd-header-item svg,
.kw-dd-header-item .material-icons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--ga-text-muted);
}

.kw-dd-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--ga-text);
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid transparent;
}

.kw-dd-item:hover {
  background: #f1f3f4;
}

.kw-dd-item:last-child {
  border-bottom: none;
}

.kw-dd-separator {
  height: 1px;
  background: #e8eaed;
  margin: 4px 0;
}

.kw-flyout.visible {
  display: block;
}

.kw-flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.kw-flyout li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 400;
  font-size: 14px;
  color: var(--ga-text);
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.kw-flyout li:hover {
  background: #f1f3f4;
}

.kw-flyout li.active {
  background: #e8f0fe;
  color: var(--color-third);
  font-weight: 500;
}

.kw-flyout li.active:hover {
  background: #e8f0fe;
}

.kw-flyout li .kw-chevron {
  font-size: 18px;
  color: var(--ga-text-muted);
  margin-left: auto;
  transition: transform 0.15s ease;
}

.kw-flyout li.has-submenu:hover .kw-chevron {
  color: var(--ga-text);
}

.label-container {
  width: 420px;
  /* background: #fff; */
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 40px auto;
  overflow: hidden;
}

.search-box {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: #1a73e8;
}

.search-icon {
  color: #5f6368;
  font-size: 22px;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
}

.label-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}

.tag-icon {
  color: #4caf50;
  font-size: 22px;
}

.label-text {
  line-height: 1.3;
}

.label-title {
  font-size: 15px;
  /* color: #202124; */
  font-weight: 500;
}

.label-owner {
  font-size: 14px;
  color: #5f6368;
}

.bottom-actions {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #e0e0e0;
}

.action-link {
  color: #1a73e8;
  font-size: 15px;
  cursor: pointer;
  font-weight: 500;
}

.action-link:hover {
  text-decoration: underline;
}

.kw-flyout .kw-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 4px;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--ga-border) !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 6px 0;
  display: none;
  z-index: 30;
}

.kw-flyout .kw-submenu.right-aligned {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
}

.kw-flyout .kw-submenu li {
  padding: 10px 16px;
  font-weight: 400;
  color: var(--ga-text);
}

.kw-flyout .kw-submenu li:hover {
  background: #f1f3f4;
}

.kw-flyout li.has-submenu:hover > .kw-submenu {
  display: block;
}

#kwMoreMenu li {
  min-height: 40px;
}

#kwMoreMenu li[style*="height: 1px"] {
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  background: #e8eaed !important;
  pointer-events: none;
}

#kwMoreMenu .material-icons-outlined {
  font-size: 18px;
  color: var(--ga-text-muted);
}

.kw-flyout-header {
  padding: 10px 16px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ga-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ga-border);
  margin-bottom: 0;
  background: #fafafa;
}

.kw-flyout-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 24;
  animation: fadeIn 0.3s ease-out;
}

.kw-flyout-backdrop.visible {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .kw-flyout {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .kw-flyout .kw-submenu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  }

  .kw-flyout li {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .kw-flyout-header {
    padding: 14px 16px 10px;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .kw-flyout li.has-submenu {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 480px) {
  .kw-flyout {
    max-height: 80vh;
  }

  .kw-flyout .kw-submenu {
    max-height: 80vh;
  }

  .kw-flyout li {
    padding: 16px;
    font-size: 16px;
  }
  
  .kw-menu {
    position: fixed;                    
    top: 50% !important;                
    left: 50% !important;              
    right: auto !important;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px) !important;
    max-width: 340px !important;       
    margin-left: 0 !important;
    padding: 6px 0 !important;        
    max-height: 60vh;                
    overflow-y: auto;                 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10001;
  }

  .kw-menu .kw-menu-columns {
    flex-direction: row !important;     
    min-height: auto;
    max-height: 50vh;                   
    align-items: stretch;               
  }

  .kw-menu .kw-menu-cats {
    min-width: 140px !important;       
    width: 140px !important;
    max-width: 140px !important;
    border-right: 1px solid var(--bg-gray2); 
    border-bottom: none;            
    max-height: 50vh;       
    overflow-y: auto;
  }

  .kw-menu .kw-menu-items {
    min-width: 160px !important;       
    width: 160px !important;
    max-width: 160px !important;
    max-height: 50vh;                   
    overflow-y: auto;
  }

  .kw-menu .kw-cat {
    padding: 6px 8px;                   
    font-size: 12px;                    
  }

  .kw-menu .kw-menu-item {
    padding: 6px 8px;                   
    font-size: 12px;
  }

  .kw-menu .kw-menu-search {
    padding: 6px 8px 8px;
  }

  .kw-menu .kw-menu-search input {
    font-size: 12px;
  }

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

.keywords-page.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--color-white);
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.keywords-page.fullscreen-mode .container-fluid {
  max-width: 100%;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.keywords-page.fullscreen-mode .kw-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.keywords-page.fullscreen-mode .kw-table-wrapper {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.keywords-page.fullscreen-mode .kw-table-controls {
  flex-shrink: 0;
}

body.no-scroll {
  overflow: hidden;
}

@media (max-width: 768px) {
  .kw-chart-bar {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }

  .kw-pill {
    min-width: 100px;
    font-size: 13px;
  }

  .kw-chart-bar .kw-icon-btn {
    display: flex;
    flex-shrink: 0;
    padding: 0 8px;
  }

  .kw-chart-bar .kw-icon-btn span {
    display: block;
  }

  .kw-chart-bar #kwExpandToggle {
    display: flex !important;
  }

  .kw-chart-bar #kwExpandIcon {
    display: block;
  }

  .kw-chart-bar #kwExpandLabel {
    display: block;
  }

  .kw-table-controls {
    flex-wrap: wrap;
    padding: 0.75rem 0.5rem;
    gap: 8px;
    border-top: none !important;
    border-bottom: none !important;
  }

  .kw-table-controls .add-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .kw-table-controls .add-btn .material-icons {
    font-size: 20px;
  }

  .kw-table-controls .filter-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kw-table-controls .filter-btn svg {
    width: 16px;
    height: 16px;
  }

  .kw-table-controls .active-filters-container {
    width: 100%;
    gap: 6px;
    margin-top: 4px;
  }

  .kw-table-controls .active-filter-pill {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
  }

  .kw-table-controls .add-filter-btn {
    font-size: 12px;
    padding: 4px 10px;
    white-space: nowrap;
  }

  .kw-table-controls .icon-group {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
    gap: 4px;
    flex-wrap: wrap;
  }

  .kw-table-controls .icon-group .kw-icon-btn {
    padding: 4px 8px;
    font-size: 11px;
    gap: 3px;
  }

  .kw-table-controls .icon-group .kw-icon-btn .material-icons,
  .kw-table-controls .icon-group .kw-icon-btn svg {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .kw-table-controls .icon-group .kw-icon-btn span:not(.material-icons) {
    font-size: 11px;
  }

  .kw-table-controls .icon-group .kw-icon-separator {
    height: 20px;
    margin: 0 4px;
  }

  .kw-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    width: calc(100% + 1rem);
    border: none !important;
  }

  .kw-table {
    margin-top: 12px;
  }

  #keywordsTable,
  #negativeKeywordsTable,
  #urlInclusionsTable,
  #urlExclusionsTable {
    min-width: 1200px;
  }

  #keywordsTable thead th,
  #negativeKeywordsTable thead th,
  #urlInclusionsTable thead th,
  #urlExclusionsTable thead th {
    padding: 6px 8px;
    font-size: 12px;
  }

  #keywordsTable tbody td,
  #negativeKeywordsTable tbody td,
  #urlInclusionsTable tbody td,
  #urlExclusionsTable tbody td {
    padding: 8px;
    font-size: 12px;
  }

  /* Disable sticky columns on mobile */
  #keywordsTable th.sticky-col-1,
  #keywordsTable td.sticky-col-1,
  #keywordsTable th.sticky-col-2,
  #keywordsTable td.sticky-col-2,
  #keywordsTable th.sticky-col-3,
  #keywordsTable td.sticky-col-3 {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }

  #keywordsTable th.sticky-col-1,
  #keywordsTable td.sticky-col-1 {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
  }

  #keywordsTable th.sticky-col-2,
  #keywordsTable td.sticky-col-2 {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
  }

  .kw-card {
    padding: 12px;
  }

  #kwChart {
    height: 200px;
  }

  /* Keywords Page Header - Mobile */
  .keywords-page .row.mb-2 {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px !important;
  }

  .keywords-page .col-md-6.col-12 {
    width: 100%;
  }

  .keywords-page .subHeading {
    font-size: 1.2rem;
    margin-bottom: 0;
  }

  .keywords-page .d-flex.align-items-center.justify-content-end {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
  }

  .keywords-page #quick-range-label {
    font-size: 11px;
    white-space: nowrap;
  }

  .keywords-page .date-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
  }

  .keywords-page .date-chip span:first-child {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .keywords-page .date-chip .material-icons {
    font-size: 18px;
    flex-shrink: 0;
  }

  .keywords-page #rangePrev,
  .keywords-page #rangeNext {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-gray2);
    border-radius: 4px;
    background: var(--color-white);
  }

  .keywords-page #rangePrev .material-icons,
  .keywords-page #rangeNext .material-icons {
    font-size: 18px;
  }

  .keywords-page #showLast30 {
    font-size: 12px;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }

  /* Keywords Page Add Filter Menu - Mobile */
  .keywords-page #kwAddFilterMenu {
    overflow-y: auto !important;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1050 !important;
    min-width: auto !important;
  }

  .keywords-page #kwAddFilterMenu.visible {
    transform: translateY(0);
  }

  .keywords-page #kwAddFilterMenu .px-3 {
    padding: 12px 16px !important;
  }

  .keywords-page #kwAddFilterMenu .form-control {
    font-size: 15px;
    padding: 10px 12px;
  }

  .keywords-page #kwAddFilterMenu .kw-filter-menu-search-icon {
    right: 16px !important;
    font-size: 20px !important;
  }

  .keywords-page #kwAddFilterMenu .filter-recent,
  .keywords-page #kwAddFilterMenu .filter-saved,
  .keywords-page #kwAddFilterMenu .filter-item {
    padding: 14px 16px !important;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .keywords-page #kwAddFilterMenu [style*="font-size:13px"],
  .keywords-page #kwAddFilterMenu .kw-filter-menu-section-title {
    font-size: 14px !important;
    padding: 10px 16px 6px !important;
  }

  .keywords-page #kwAddFilterMenu .filter-category-header {
    padding: 12px 16px !important;
  }

  .keywords-page #kwAddFilterMenu .kw-filter-menu-category-header {
    font-size: 15px !important;
  }

  .keywords-page #kwAddFilterMenu .category-chevron {
    font-size: 20px !important;
  }

  .keywords-page #kwAddFilterMenu [style*="max-height:300px"] {
    max-height: calc(80vh - 300px) !important;
  }

  /* Keywords Page Segment Menu - Mobile */
 

  .keywords-page #segmentMenu.visible {
    transform: translateY(0);
  }

  .keywords-page #segmentMenu .kw-flyout-header {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 1;
  }

  .keywords-page #segmentMenu li {
    padding: 14px 16px !important;
    font-size: 15px;
    min-height: 48px;
  }

  .keywords-page #segmentMenu .kw-submenu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1051 !important;
    min-width: auto !important;
  }

  .keywords-page #segmentMenu li.has-submenu.submenu-open > .kw-submenu,
  .keywords-page #segmentMenu li.has-submenu:hover > .kw-submenu {
    transform: translateY(0);
  }

  .keywords-page #segmentMenu .kw-submenu li {
    padding: 14px 16px !important;
    font-size: 15px;
    min-height: 48px;
  }

  /* Audiences Page Header - Mobile */
  .audiences-page .row.mb-2,
  .audiences-page .row.mb-4 {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px !important;
  }

  .audiences-page .col-md-6.col-12 {
    width: 100%;
  }

  .audiences-page .subHeading {
    font-size: 1.2rem;
    margin-bottom: 0;
  }

  .audiences-page .d-flex.align-items-center.justify-content-end {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
  }

  .audiences-page #quick-range-label {
    font-size: 11px;
    white-space: nowrap;
  }

  .audiences-page .date-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
  }

  .audiences-page .date-chip span:first-child {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .audiences-page .date-chip .material-icons {
    font-size: 18px;
    flex-shrink: 0;
  }

  .audiences-page #rangePrev,
  .audiences-page #rangeNext {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-gray2);
    border-radius: 4px;
    background: var(--color-white);
  }

  .audiences-page #rangePrev .material-icons,
  .audiences-page #rangeNext .material-icons {
    font-size: 18px;
  }

  .audiences-page #showLast30 {
    font-size: 12px;
    white-space: nowrap;
  }

  /* Locations Page Header - Mobile */
  .locations-page .row.mb-2 {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px !important;
  }

  .locations-page .col-md-6.col-12 {
    width: 100%;
  }

  .locations-page .subHeading {
    font-size: 1.2rem;
    margin-bottom: 0;
  }

  .locations-page .d-flex.align-items-center.justify-content-end {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
  }

  .locations-page #quick-range-label {
    font-size: 11px;
    white-space: nowrap;
  }

  .locations-page .date-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
  }

  .locations-page .date-chip span:first-child {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .locations-page .date-chip .material-icons {
    font-size: 18px;
    flex-shrink: 0;
  }

  .locations-page #rangePrev,
  .locations-page #rangeNext {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-gray2);
    border-radius: 4px;
    background: var(--color-white);
  }

  .locations-page #rangePrev .material-icons,
  .locations-page #rangeNext .material-icons {
    font-size: 18px;
  }

  .locations-page #showLast30 {
    font-size: 12px;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }

  /* Disable sticky columns on mobile - Locations Page */
  .locations-page .table-sticky .sticky-col-1,
  .locations-page .table-sticky .sticky-col-2,
  .locations-page .table-sticky .sticky-col-3,
  .locations-page .table-sticky th.sticky-col-1,
  .locations-page .table-sticky td.sticky-col-1,
  .locations-page .table-sticky th.sticky-col-2,
  .locations-page .table-sticky td.sticky-col-2,
  .locations-page .table-sticky th.sticky-col-3,
  .locations-page .table-sticky td.sticky-col-3 {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }

  /* Locations Page Add Filter Menu - Mobile */
  .locations-page #locAddFilterMenu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1050 !important;
    min-width: auto !important;
  }

  .locations-page #locAddFilterMenu.visible {
    transform: translateY(0);
  }

  .locations-page #locAddFilterMenu .px-3 {
    padding: 12px 16px !important;
  }

  .locations-page #locAddFilterMenu .input-group {
    margin-bottom: 12px;
  }

  .locations-page #locAddFilterMenu .form-control {
    font-size: 15px;
    padding: 10px 12px;
  }

  .locations-page #locAddFilterMenu .btn {
    padding: 10px 12px;
  }

  .locations-page #locAddFilterMenu .btn .material-icons {
    font-size: 20px;
  }

  .locations-page #locAddFilterMenu .filter-recent,
  .locations-page #locAddFilterMenu .filter-item {
    padding: 14px 16px !important;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .locations-page #locAddFilterMenu [style*="font-size:13px"] {
    font-size: 14px !important;
    padding: 10px 16px 6px !important;
  }

  .locations-page #locAddFilterMenu [style*="max-height:240px"] {
    max-height: calc(80vh - 200px) !important;
  }

  /* Locations Page Segment Menu Time Submenu - Mobile */
  .locations-page .kw-flyout .kw-submenu {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1051 !important;
    min-width: auto !important;
  }

  .locations-page .kw-flyout li.has-submenu:hover > .kw-submenu,
  .locations-page .kw-flyout li.has-submenu.submenu-open > .kw-submenu {
    transform: translateY(0);
  }

  .locations-page .kw-flyout .kw-submenu li {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Locations Page Add Filter Menu - Mobile */
  .locations-page #locAddFilterMenu {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 1050 !important;
    min-width: auto !important;
  }

  .locations-page #locAddFilterMenu.visible {
    transform: translateY(0);
  }

  .locations-page #locAddFilterMenu .px-3 {
    padding: 12px 16px !important;
  }

  .locations-page #locAddFilterMenu .input-group {
    margin-bottom: 12px;
  }

  .locations-page #locAddFilterMenu .form-control {
    font-size: 15px;
    padding: 10px 12px;
  }

  .locations-page #locAddFilterMenu .btn {
    padding: 10px 12px;
  }

  .locations-page #locAddFilterMenu .btn .material-icons {
    font-size: 20px;
  }

  .locations-page #locAddFilterMenu .filter-recent,
  .locations-page #locAddFilterMenu .filter-item {
    padding: 14px 16px !important;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .locations-page #locAddFilterMenu [style*="font-size:13px"] {
    font-size: 14px !important;
    padding: 10px 16px 6px !important;
  }

  .locations-page #locAddFilterMenu [style*="max-height:240px"] {
    max-height: calc(80vh - 200px) !important;
  }
}

@media (max-width: 480px) {
  .kw-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .kw-tab {
    white-space: nowrap;
    padding: 8px 12px;
  }

  .kw-pill {
    padding: 8px 10px;
    min-width: 90px;
  }

  .kw-icon-btn {
    padding: 0 6px;
    font-size: 11px;
    display: flex !important;
    flex-shrink: 0;
  }

  .kw-icon-btn span {
    font-size: 11px;
    display: block !important;
  }

  .kw-chart-bar .kw-icon-btn {
    display: flex !important;
  }

  .kw-chart-bar #kwExpandToggle {
    display: flex !important;
  }

  .kw-chart-bar #kwExpandIcon {
    display: block !important;
  }

  .kw-chart-bar #kwExpandLabel {
    display: block !important;
  }

  /* Keywords Page Header - Small Mobile */
  .keywords-page .subHeading {
    font-size: 1.1rem;
  }

  /* Audiences Page Header - Small Mobile */
  .audiences-page .subHeading {
    font-size: 1.1rem;
  }

  .audiences-page .d-flex.align-items-center.justify-content-end {
    gap: 6px;
  }

  .audiences-page #quick-range-label {
    font-size: 10px;
  }

  .audiences-page .date-chip {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .audiences-page .date-chip span:first-child {
    font-size: 11px;
  }

  .audiences-page .date-chip .material-icons {
    font-size: 16px;
  }

  .audiences-page #rangePrev,
  .audiences-page #rangeNext {
    width: 28px;
    height: 28px;
  }

  .audiences-page #rangePrev .material-icons,
  .audiences-page #rangeNext .material-icons {
    font-size: 16px;
  }

  .audiences-page #showLast30 {
    font-size: 11px;
  }

  /* Audiences Page Content - Mobile */
  .audiences-page .aud-card .px-3.pt-3 {
    padding: 12px !important;
  }

  .audiences-page .aud-card h5 {
    font-size: 1.1rem;
    margin-bottom: 0;
  }

  .audiences-page .aud-banner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .audiences-page .aud-banner > div:first-child {
    width: 100%;
  }

  .audiences-page .aud-banner #aud-banner-text {
    font-size: 13px;
    word-break: break-word;
  }

  .audiences-page .aud-banner > div:last-child {
    width: 100%;
    justify-content: flex-start;
    gap: 16px !important;
  }

  .audiences-page .aud-banner #aud-change-range,
  .audiences-page .aud-banner #aud-dismiss {
    font-size: 14px;
    white-space: nowrap;
  }

  .audiences-page .aud-toolbar {
    flex-wrap: wrap;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .audiences-page .aud-metric .metric-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .audiences-page .aud-control .chart-controls {
    padding: 8px 12px;
    font-size: 13px;
    gap: 6px;
  }

  .audiences-page .chart-footer {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
    margin-top: 16px !important;
  }

  .audiences-page .chart-footer > div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .audiences-page #addAudienceBtn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px !important;
  }

  .audiences-page #editAudienceBtn {
    text-align: center;
    display: block;
    padding: 8px;
    font-size: 14px;
  }

  /* Audiences Page Insights Banner - Mobile */
  .audiences-page .insights-wrap {
    flex-direction: column !important;
    padding: 12px !important;
  }

  .audiences-page .insights-text {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px;
  }

  .audiences-page .insights-text h2 {
    font-size: 1.25rem;
    margin-bottom: 10px;
  }

  .audiences-page .insights-text p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .audiences-page .insights-link {
    font-size: 14px;
  }

  .audiences-page .insights-image {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .audiences-page .insights-image img {
    max-width: 100%;
    height: auto;
  }

  /* Audiences Page Segments Table Footer - Mobile */
  .audiences-page #segments-table-placeholder .table-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
    padding: 12px 16px !important;
  }

  .audiences-page #segments-table-placeholder .table-footer > div:first-child {
    width: 100%;
    justify-content: space-between;
  }

  .audiences-page #segments-table-placeholder .table-footer > div:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .audiences-page #segmentsTableInfo {
    font-size: 13px;
    white-space: nowrap;
  }

  .audiences-page #segmentsRowsPerPageSelect {
    font-size: 13px;
    min-width: 70px;
  }

  .audiences-page #segmentsFirstPageBtn,
  .audiences-page #segmentsPrevPageBtn,
  .audiences-page #segmentsNextPageBtn,
  .audiences-page #segmentsLastPageBtn {
    padding: 6px 8px;
    min-width: 36px;
  }

  .audiences-page #segmentsFirstPageBtn .material-icons,
  .audiences-page #segmentsPrevPageBtn .material-icons,
  .audiences-page #segmentsNextPageBtn .material-icons,
  .audiences-page #segmentsLastPageBtn .material-icons {
    font-size: 18px;
  }

  @media (max-width: 480px) {
    .audiences-page #segments-table-placeholder .table-footer {
      padding: 10px 12px !important;
      gap: 10px;
    }

    .audiences-page #segmentsTableInfo {
      font-size: 12px;
    }

    .audiences-page #segmentsRowsPerPageSelect {
      font-size: 12px;
      min-width: 60px;
    }

    .audiences-page #segmentsFirstPageBtn,
    .audiences-page #segmentsPrevPageBtn,
    .audiences-page #segmentsNextPageBtn,
    .audiences-page #segmentsLastPageBtn {
      padding: 5px 6px;
      min-width: 32px;
    }

    .audiences-page #segmentsFirstPageBtn .material-icons,
    .audiences-page #segmentsPrevPageBtn .material-icons,
    .audiences-page #segmentsNextPageBtn .material-icons,
    .audiences-page #segmentsLastPageBtn .material-icons {
      font-size: 16px;
    }
  }

  /* Audiences Page Exclusions Table Footer - Mobile */
  .audiences-page #exclusions-table-wrap .table-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch !important;
    padding: 12px 16px !important;
  }

  .audiences-page #exclusions-table-wrap .table-footer > div:first-child {
    width: 100%;
    justify-content: space-between;
  }

  .audiences-page #exclusions-table-wrap .table-footer > div:last-child {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .audiences-page #exclusionsTableInfo {
    font-size: 13px;
    white-space: nowrap;
  }

  .audiences-page #exclusionsRowsPerPageSelect {
    font-size: 13px;
    min-width: 70px;
  }

  .audiences-page #exclusionsFirstPageBtn,
  .audiences-page #exclusionsPrevPageBtn,
  .audiences-page #exclusionsNextPageBtn,
  .audiences-page #exclusionsLastPageBtn {
    padding: 6px 8px;
    min-width: 36px;
  }

  .audiences-page #exclusionsFirstPageBtn .material-icons,
  .audiences-page #exclusionsPrevPageBtn .material-icons,
  .audiences-page #exclusionsNextPageBtn .material-icons,
  .audiences-page #exclusionsLastPageBtn .material-icons {
    font-size: 18px;
  }

  @media (max-width: 480px) {
    .audiences-page #exclusions-table-wrap .table-footer {
      padding: 10px 12px !important;
      gap: 10px;
    }

    .audiences-page #exclusionsTableInfo {
      font-size: 12px;
    }

    .audiences-page #exclusionsRowsPerPageSelect {
      font-size: 12px;
      min-width: 60px;
    }

    .audiences-page #exclusionsFirstPageBtn,
    .audiences-page #exclusionsPrevPageBtn,
    .audiences-page #exclusionsNextPageBtn,
    .audiences-page #exclusionsLastPageBtn {
      padding: 5px 6px;
      min-width: 32px;
    }

    .audiences-page #exclusionsFirstPageBtn .material-icons,
    .audiences-page #exclusionsPrevPageBtn .material-icons,
    .audiences-page #exclusionsNextPageBtn .material-icons,
    .audiences-page #exclusionsLastPageBtn .material-icons {
      font-size: 16px;
    }
  }

  /* Audiences Page Tables - Active Filters Container Mobile */
  .audiences-page .kw-table-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .audiences-page .kw-table-controls > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    align-items: center;
  }

  .audiences-page .kw-table-controls .active-filters-container {
    width: 100%;
    gap: 6px;
    margin-top: 0;
    order: 2;
    flex-wrap: wrap;
  }

  .audiences-page .kw-table-controls .position-relative {
    order: 1;
  }

  .audiences-page .kw-table-controls .active-filter-pill {
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .audiences-page .kw-table-controls .filter-pill-close {
    font-size: 16px;
    padding: 2px;
    min-width: 20px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .audiences-page .kw-table-controls .add-filter-btn {
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
    min-height: 32px;
  }

  @media (max-width: 480px) {
    .audiences-page .kw-table-controls {
      gap: 6px;
    }

    .audiences-page .kw-table-controls > div:first-child {
      gap: 6px;
    }

    .audiences-page .kw-table-controls .active-filters-container {
      gap: 4px;
    }

    .audiences-page .kw-table-controls .active-filter-pill {
      font-size: 11px;
      padding: 5px 10px;
      min-height: 30px;
    }

    .audiences-page .kw-table-controls .filter-pill-close {
      font-size: 14px;
      min-width: 18px;
      min-height: 18px;
    }

    .audiences-page .kw-table-controls .add-filter-btn {
      font-size: 11px;
      padding: 5px 10px;
      min-height: 30px;
    }
  }

  /* Audiences Page - Disable Sticky Columns on Mobile */
  .audiences-page .table-sticky .sticky-col,
  .audiences-page .table-sticky .sticky-col-1,
  .audiences-page .table-sticky .sticky-col-2,
  .audiences-page .table-sticky .sticky-col-3 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  .audiences-page .table-sticky thead th.sticky-col,
  .audiences-page .table-sticky thead th.sticky-col-1,
  .audiences-page .table-sticky thead th.sticky-col-2,
  .audiences-page .table-sticky thead th.sticky-col-3 {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }

  .audiences-page .table-sticky tbody td.sticky-col,
  .audiences-page .table-sticky tbody td.sticky-col-1,
  .audiences-page .table-sticky tbody td.sticky-col-2,
  .audiences-page .table-sticky tbody td.sticky-col-3 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  @media (max-width: 480px) {
    .audiences-page .table-sticky thead th.sticky-col,
    .audiences-page .table-sticky thead th.sticky-col-1,
    .audiences-page .table-sticky thead th.sticky-col-2,
    .audiences-page .table-sticky thead th.sticky-col-3 {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
    }
  }

  /* Locations Page Header - Small Mobile */
  .locations-page .subHeading {
    font-size: 1.1rem;
  }

  .locations-page .d-flex.align-items-center.justify-content-end {
    gap: 6px;
  }

  .locations-page #quick-range-label {
    font-size: 10px;
  }

  .locations-page .date-chip {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .locations-page .date-chip span:first-child {
    font-size: 11px;
  }

  .locations-page .date-chip .material-icons {
    font-size: 16px;
  }

  .locations-page #rangePrev,
  .locations-page #rangeNext {
    width: 28px;
    height: 28px;
  }

  .locations-page #rangePrev .material-icons,
  .locations-page #rangeNext .material-icons {
    font-size: 16px;
  }

  .locations-page #showLast30 {
    font-size: 11px;
  }

  /* Locations Page Add Filter Menu - Small Mobile */
  .locations-page #locAddFilterMenu {
    max-height: 73vh !important;
  }

  .locations-page #locAddFilterMenu .filter-recent,
  .locations-page #locAddFilterMenu .filter-item {
    padding: 16px !important;
    font-size: 16px;
  }

  .locations-page #locAddFilterMenu [style*="max-height:240px"] {
    max-height: calc(85vh - 220px) !important;
  }

  /* Locations Page Segment Menu Time Submenu - Small Mobile */
  .locations-page .kw-flyout .kw-submenu {
    max-height: 80vh !important;
  }

  .locations-page .kw-flyout .kw-submenu li {
    padding: 16px;
    font-size: 16px;
  }

  /* Disable sticky columns on small mobile - Locations Page */
  .locations-page .table-sticky .sticky-col-1,
  .locations-page .table-sticky .sticky-col-2,
  .locations-page .table-sticky .sticky-col-3,
  .locations-page .table-sticky th.sticky-col-1,
  .locations-page .table-sticky td.sticky-col-1,
  .locations-page .table-sticky th.sticky-col-2,
  .locations-page .table-sticky td.sticky-col-2,
  .locations-page .table-sticky th.sticky-col-3,
  .locations-page .table-sticky td.sticky-col-3 {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }

  .keywords-page .d-flex.align-items-center.justify-content-end {
    gap: 6px;
  }

  .keywords-page #quick-range-label {
    font-size: 10px;
  }

  .keywords-page .date-chip {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .keywords-page .date-chip span:first-child {
    font-size: 11px;
  }

  .keywords-page .date-chip .material-icons {
    font-size: 16px;
  }

  .keywords-page #rangePrev,
  .keywords-page #rangeNext {
    width: 28px;
    height: 28px;
  }

  .keywords-page #rangePrev .material-icons,
  .keywords-page #rangeNext .material-icons {
    font-size: 16px;
  }

  .keywords-page #showLast30 {
    font-size: 11px;
  }

  /* Keywords Page Add Filter Menu - Small Mobile */
  .keywords-page #kwAddFilterMenu {
    max-height: 75vh !important;
    width: 195px;
  }

  .keywords-page #kwAddFilterMenu .filter-recent,
  .keywords-page #kwAddFilterMenu .filter-saved,
  .keywords-page #kwAddFilterMenu .filter-item {
    padding: 16px !important;
    font-size: 16px;
  }

  .keywords-page #kwAddFilterMenu [style*="font-size:13px"],
  .keywords-page #kwAddFilterMenu .kw-filter-menu-section-title {
    font-size: 15px !important;
    padding: 12px 16px 8px !important;
  }

  .keywords-page #kwAddFilterMenu [style*="max-height:300px"] {
    max-height: calc(85vh - 320px) !important;
  }

  /* Keywords Page Segment Menu - Small Mobile */

  .keywords-page #segmentMenu li {
    padding: 16px !important;
    font-size: 16px;
  }

  .keywords-page #segmentMenu .kw-submenu {
    max-height: 80vh !important;
  }

  .keywords-page #segmentMenu .kw-submenu li {
    padding: 16px !important;
    font-size: 16px;
  }

  /* Keywords Table - Small Mobile */
  .kw-table-controls {
    padding: 0.5rem;
    gap: 6px;
    border-top: none !important;
    border-bottom: none !important;
  }

  .kw-table-controls .add-btn {
    width: 32px;
    height: 32px;
  }

  .kw-table-controls .add-btn .material-icons {
    font-size: 18px;
  }

  .kw-table-controls .filter-btn {
    width: 32px;
    height: 32px;
  }

  .kw-table-controls .filter-btn svg {
    width: 14px;
    height: 14px;
  }

  .kw-table-controls .active-filter-pill {
    font-size: 11px;
    padding: 3px 8px;
  }

  .kw-table-controls .add-filter-btn {
    font-size: 11px;
    padding: 3px 8px;
  }

  .kw-table-controls .icon-group {
    gap: 3px;
  }

  .kw-table-controls .icon-group .kw-icon-btn {
    padding: 3px 6px;
    font-size: 10px;
    gap: 2px;
  }

  .kw-table-controls .icon-group .kw-icon-btn .material-icons,
  .kw-table-controls .icon-group .kw-icon-btn svg {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }

  .kw-table-controls .icon-group .kw-icon-btn span:not(.material-icons) {
    font-size: 10px;
  }

  .kw-table-wrapper {
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
    width: calc(100% + 0.5rem);
    border: none !important;
  }

  #keywordsTable thead th,
  #negativeKeywordsTable thead th,
  #urlInclusionsTable thead th,
  #urlExclusionsTable thead th {
    padding: 5px 6px;
    font-size: 11px;
  }

  #keywordsTable tbody td,
  #negativeKeywordsTable tbody td,
  #urlInclusionsTable tbody td,
  #urlExclusionsTable tbody td {
    padding: 6px;
    font-size: 11px;
  }

  /* Disable sticky columns on small mobile */
  #keywordsTable th.sticky-col-1,
  #keywordsTable td.sticky-col-1,
  #keywordsTable th.sticky-col-2,
  #keywordsTable td.sticky-col-2,
  #keywordsTable th.sticky-col-3,
  #keywordsTable td.sticky-col-3 {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }
}

.columns-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.columns-modal-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-panel-inline {
  position: static;
  background: transparent;
  display: none;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}
.columns-panel-inline .columns-modal-container {
  max-width: 100%;
  max-height: none;
  height: auto;
  box-shadow: none;
  border: 1px solid #e0e0e0;
}

.columns-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.columns-modal-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ga-text);
  margin: 0;
}

.columns-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--ga-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.columns-modal-close:hover {
  background: #f1f3f4;
}

.columns-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}
.columns-panel-inline .columns-modal-body {
  height: auto;
  min-height: 0;
}

.columns-modal-left {
  width: 50%;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-search-wrapper {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.columns-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.columns-search-input:focus {
  border-color: var(--color-third);
}

.columns-search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ga-text-muted);
  font-size: 20px;
  pointer-events: none;
}

.columns-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.columns-category {
  border-bottom: 1px solid var(--ga-border);
}

.columns-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.columns-category-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ga-text);
}

.columns-category-chevron {
  color: var(--ga-text-muted);
  font-size: 18px;
  transition: transform 0.2s;
}

.columns-category.expanded .columns-category-chevron {
  transform: rotate(90deg);
}

.columns-category-items {
  padding: 8px 0;
}

.columns-category-item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.column-select-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ga-border);
  border-radius: 3px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.column-select-indicator.selected {
  background: #1a73e8;
  border-color: var(--color-third);
}

.column-select-indicator.selected::after {
  content: "-";
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.column-name {
  font-size: 14px;
  color: var(--ga-text);
  position: relative;
}

.columns-category-item .column-name::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px dashed var(--ga-border);
}

.columns-modal-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-your-columns-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ga-text);
  margin: 0;
  padding: 20px 24px 8px;
}

.columns-drag-instruction {
  font-size: 13px;
  color: var(--ga-text-muted);
  margin: 0 0 12px;
  padding: 0 24px;
}

.columns-your-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.columns-your-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background 0.2s;
  cursor: move;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.columns-your-item.locked {
  cursor: default;
  touch-action: auto;
}

.columns-your-item.draggable:hover {
  cursor: pointer;
}

.columns-your-item.dragging {
  opacity: 0.5;
}

.columns-lock-icon,
.columns-drag-icon,
.columns-remove-icon {
  font-size: 18px;
  color: var(--ga-text-muted);
  margin-right: 12px;
  flex-shrink: 0;
}

.columns-remove-icon {
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.columns-remove-icon:hover {
  background: #e8eaed;
}

.columns-your-item .column-name {
  flex: 1;
}

.columns-your-item .column-name::after {
  display: none;
}

.columns-modal-footer {
  border-top: 1px solid #e0e0e0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.columns-footer-left,
.columns-footer-right {
  display: flex;
  align-items: center;
}

.columns-save-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--ga-text);
}

.columns-save-checkbox input {
  margin-right: 8px;
}

.columns-toggle-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.columns-toggle-switch input {
  display: none;
}

.columns-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  margin-right: 12px;
  transition: background 0.3s;
}

.columns-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.columns-toggle-switch input:checked + .columns-toggle-slider {
  background: #1a73e8;
}

.columns-toggle-switch input:checked + .columns-toggle-slider::before {
  transform: translateX(20px);
}

.columns-toggle-label {
  font-size: 14px;
  color: var(--ga-text);
}

.columns-footer-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.columns-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.columns-btn-apply {
  background: #1a73e8;
  color: white;
}

.columns-btn-apply:hover {
  background: #1557b0;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
}

.columns-btn-cancel {
  background: white;
  color: var(--color-third);
  border: 1px solid var(--ga-border);
}

.columns-btn-cancel:hover {
  background: #f8f9fa;
}

.custom-column-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow-y: auto;
  padding: 20px;
}

.custom-column-modal-overlay[style*="flex"] {
  display: flex !important;
}
[data-theme="dark"] .custom-column-modal {
  background: var(--light-color);
}
.custom-column-modal {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin: auto;
}

.custom-column-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.custom-column-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--ga-text);
}

.custom-column-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--ga-text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.custom-column-close:hover {
  background: #f1f3f4;
}

.custom-column-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.custom-column-owner-section {
  margin-bottom: 24px;
}

.custom-column-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ga-text);
  margin-bottom: 8px;
}

.custom-column-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  /* background: white; */
  margin-bottom: 12px;
  cursor: pointer;
}

.custom-column-select:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.custom-column-info-box {
  display: flex;
  gap: 8px;
  padding: 12px;
  /* background: #e8f0fe; */
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-third);
  line-height: 1.5;
}

.custom-column-form-section {
  margin-bottom: 24px;
}

.custom-column-field {
  margin-bottom: 20px;
  position: relative;
}

.custom-column-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  box-sizing: border-box;
}

.custom-column-input:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.custom-column-counter {
  position: absolute;
  right: 12px;
  top: 38px;
  font-size: 12px;
  color: var(--ga-text-muted);
}

.custom-column-formula-section {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.custom-column-formula-main {
  flex: 1;
}

.custom-column-formula-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.custom-column-formula-btn {
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  /* background: white; */
  color: var(--ga-text);
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.custom-column-formula-btn:hover {
  /* background: #f8f9fa; */
  border-color: var(--color-third);
  color: var(--color-third);
}

.custom-column-formula-separator {
  width: 1px;
  height: 20px;
  background: #e0e0e0;
}

.custom-column-formula-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 12px;
}

.custom-column-view-btn {
  padding: 6px 16px;
  border: none;
  /* background: white; */
  /* color: var(--ga-text-muted); */
  font-size: 14px;
  cursor: pointer;
  border-right: 1px solid #dadce0;
  transition: all 0.2s;
}

.custom-column-view-btn:last-child {
  border-right: none;
}

.custom-column-view-btn.active {
  background: #1a73e8;
  color: white;
}

.custom-column-formula-input-area {
  min-height: 200px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  padding: 16px;
  /* background: white; */
  position: relative;
  cursor: text;
  font-size: 14px;
  color: var(--ga-text);
  line-height: 1.5;
}

.custom-column-formula-input-area:focus-within {
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.custom-column-formula-placeholder {
  color: #9aa0a6;
  font-size: 14px;
  pointer-events: none;
  position: absolute;
  top: 16px;
  left: 16px;
}

.custom-column-formula-input-area:focus-within
  .custom-column-formula-placeholder,
.custom-column-formula-input-area:not(:empty)
  .custom-column-formula-placeholder {
  display: none;
}

.custom-column-formula-input-area[contenteditable="true"] {
  outline: none;
}

.custom-column-formula-ideas {
  width: 300px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  padding: 16px;
  /* background: #f8f9fa; */
  flex-shrink: 0;
}

.custom-column-formula-ideas h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ga-text);
}

.custom-column-idea-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  /* background: white; */
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
}

.custom-column-idea-content {
  flex: 1;
  margin-right: 8px;
}

.custom-column-idea-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ga-text);
  margin-bottom: 4px;
}

.custom-column-idea-formula {
  font-size: 12px;
  color: var(--ga-text-muted);
  font-family: "Courier New", monospace;
  word-break: break-all;
}

.custom-column-idea-insert {
  padding: 6px 12px;
  border: 1px solid #1a73e8;
  border-radius: 4px;
  /* background: white; */
  color: var(--color-third);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.custom-column-idea-insert:hover {
  background: #e8f0fe;
}

.custom-column-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  flex-shrink: 0;
}

.custom-column-footer-left {
  display: flex;
  align-items: center;
}

.custom-column-save-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ga-text);
  cursor: pointer;
}

.custom-column-save-checkbox input {
  margin: 0;
  cursor: pointer;
}

.custom-column-footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.custom-column-recommended-text {
  font-size: 14px;
  color: var(--ga-text-muted);
}

.custom-column-footer-buttons {
  display: flex;
  gap: 8px;
}

.custom-column-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.custom-column-btn-cancel {
  color: var(--ga-text);
  border: 1px solid var(--ga-border);
}

.custom-column-btn-save {
  background: #1a73e8;
  color: white;
}

.custom-column-btn-save:hover {
  background: #1557b0;
}

@media (prefers-color-scheme: dark) {
  .kw-hero {
    background: #1e1e1e;
  }

  .kw-tabs {
    border-bottom-color: #3a3a3a;
  }

  .kw-tab {
    color: #e8eaed;
  }

  /* .kw-tab:hover {
    color: #fff;
  } */

  .kw-tab.active {
    color: #8ab4f8;
    border-bottom-color: #8ab4f8;
  }

  /* .kw-card {
    background: #2d2d2d;
    border-color: #3a3a3a;
  } */

  /* .kw-chart-bar {
    background: #2d2d2d;
    border-color: #3a3a3a;
  } */

  .kw-add-keyword-section .kw-card {
    background: #2d2d2d !important;
    border-color: #3a3a3a !important;
  }

  .kw-add-keyword-header-inline {
    border-bottom-color: #3a3a3a !important;
  }

  .kw-add-keyword-close-inline {
    color: #9aa0a6 !important;
  }

  .kw-add-keyword-close-inline:hover {
    background: #3a3a3a !important;
    color: #e8eaed !important;
  }

  .kw-add-keyword-content-inline {
    background: #2d2d2d !important;
  }

  .kw-add-keyword-main-content {
    border-right-color: #3a3a3a !important;
  }

  .kw-add-keyword-main-content h2 {
    color: #e8eaed !important;
  }

  .kw-add-keyword-instruction {
    color: #9aa0a6 !important;
  }

  .kw-add-keyword-instruction a {
    color: #8ab4f8 !important;
  }

  .kw-add-keyword-adgroup {
    background: #3a3a3a !important;
    color: #e8eaed !important;
  }

  .kw-add-keyword-adgroup .material-icons {
    color: #9aa0a6 !important;
  }

  .kw-add-keyword-adgroup a {
    color: #8ab4f8 !important;
  }

  .kw-add-keyword-sidebar h3 {
    color: #e8eaed !important;
  }

  .kw-add-keyword-suggestions > div > span {
    color: #e8eaed !important;
  }

  .kw-add-keyword-match-types p {
    color: #9aa0a6 !important;
  }

  .kw-add-keyword-match-types > div > div {
    color: #e8eaed !important;
  }

  .kw-add-keyword-match-types code {
    background: #3a3a3a !important;
    color: #f28b82 !important;
  }

  .kw-add-keyword-match-types a {
    color: #8ab4f8 !important;
  }

  .kw-add-keyword-textarea {
    background: #1e1e1e;
    border-color: #3a3a3a;
    color: #e8eaed;
  }

  .kw-add-keyword-textarea:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
  }

  .kw-add-keyword-textarea::placeholder {
    color: var(--ga-text-muted);
  }

  .kw-add-keyword-sidebar h3 {
    color: #e8eaed;
  }

  .kw-add-keyword-idea-input {
    background: #1e1e1e;
    border-color: #3a3a3a;
    color: #e8eaed;
  }

  .kw-add-keyword-idea-input:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
  }

  .kw-add-keyword-idea-input::placeholder {
    color: var(--ga-text-muted);
  }

  .kw-add-keyword-suggestions {
    background: #1e1e1e;
    border-color: #3a3a3a;
  }

  .kw-add-keyword-suggestions > div > span {
    color: #e8eaed;
  }

  .kw-add-keyword-suggestion-item {
    border-bottom-color: #3a3a3a;
    color: #e8eaed;
  }

  .kw-add-keyword-suggestion-item:hover {
    background: #3a3a3a;
  }

  .kw-add-keyword-suggestion-add {
    color: #8ab4f8;
  }

  .kw-add-keyword-suggestion-add:hover {
    background: #3a3a3a;
  }

  .kw-add-keyword-add-all {
    background: #8ab4f8 !important;
    color: #1e1e1e !important;
  }

  .kw-add-keyword-add-all:hover {
    background: #669df6 !important;
  }

  .kw-add-keyword-footer-inline {
    background: #2d2d2d;
    border-top-color: #3a3a3a;
  }

  .kw-add-keyword-match-types p {
    color: #9aa0a6 !important;
  }

  .kw-add-keyword-match-types > div > div {
    color: #e8eaed !important;
  }

  .kw-add-keyword-match-types code {
    background: #3a3a3a !important;
    color: #f28b82 !important;
  }

  .kw-add-keyword-match-types a {
    color: #8ab4f8 !important;
  }

  .kw-add-keyword-tab-content#kwTabContentNegative h2 {
    color: #e8eaed !important;
  }

  #addKeywordSection *[style*="#202124"] {
    color: #e8eaed !important;
  }

  #addKeywordSection *[style*="#5f6368"]:not(.material-icons) {
    color: #9aa0a6 !important;
  }

  #addKeywordSection *[style*="#fff"],
  #addKeywordSection *[style*="#f8f9fa"] {
    background: #2d2d2d !important;
  }

  #addKeywordSection *[style*="#dadce0"],
  #addKeywordSection *[style*="#e8eaed"] {
    border-color: #3a3a3a !important;
  }

  #addKeywordSection .kw-add-keyword-adgroup *[style*="#f8f9fa"] {
    background: #3a3a3a !important;
  }

  #addKeywordSection .kw-card[style*="background"] {
    background: #2d2d2d !important;
    border-color: #3a3a3a !important;
  }

  #addKeywordSection h2[style*="color"] {
    color: #e8eaed !important;
  }

  #addKeywordSection h3[style*="color"] {
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-header-inline[style*="border-bottom"] {
    border-bottom-color: #3a3a3a !important;
  }

  #addKeywordSection .kw-add-keyword-close-inline[style*="color"] {
    color: #9aa0a6 !important;
  }

  #addKeywordSection .kw-add-keyword-adgroup[style*="background"] {
    background: #3a3a3a !important;
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-adgroup .material-icons[style*="color"] {
    color: #9aa0a6 !important;
  }

  #addKeywordSection span[style*="color"][style*="#202124"] {
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-match-types p[style*="color"] {
    color: #9aa0a6 !important;
  }

  #addKeywordSection .kw-add-keyword-match-types > div[style*="color"] {
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-match-types > div > div[style*="color"] {
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-btn-cancel[style*="background"] {
    background: #2d2d2d !important;
    border-color: #3a3a3a !important;
    color: #e8eaed !important;
  }

  #addKeywordSection .kw-add-keyword-btn-save[style*="background"] {
    background: #8ab4f8 !important;
    color: #1e1e1e !important;
  }

  .kw-add-keyword-btn-cancel {
    background: #2d2d2d !important;
    border-color: #3a3a3a !important;
    color: #e8eaed !important;
  }

  .kw-add-keyword-btn-cancel:hover {
    background: #3a3a3a !important;
  }

  .kw-add-keyword-btn-save {
    background: #8ab4f8 !important;
    color: #1e1e1e !important;
  }

  .kw-add-keyword-btn-save:hover {
    background: #669df6 !important;
  }

  .kw-select-adgroup-modal {
    background: #2d2d2d;
  }

  .kw-select-adgroup-header {
    border-bottom-color: #3a3a3a;
  }

  .kw-select-adgroup-header h2 {
    color: #e8eaed;
  }

  .kw-select-adgroup-close {
    color: #9aa0a6;
  }

  .kw-select-adgroup-close:hover {
    background: #3a3a3a;
  }

  .kw-select-adgroup-content {
    background: #2d2d2d;
  }

  .kw-select-adgroup-search-input {
    background: #1e1e1e;
    border-color: #3a3a3a;
    color: #e8eaed;
  }

  .kw-select-adgroup-search-input:focus {
    border-color: #8ab4f8;
  }

  .kw-select-adgroup-campaign-item,
  .kw-select-adgroup-adgroup-item {
    color: #e8eaed;
  }

  .kw-select-adgroup-campaign-item:hover,
  .kw-select-adgroup-adgroup-item:hover {
    background: #3a3a3a;
  }

  .kw-select-adgroup-left {
    background: #2d2d2d;
    border-right-color: #3a3a3a;
  }

  .kw-select-adgroup-right {
    background: #2d2d2d;
  }

  .kw-select-adgroup-search {
    background: #2d2d2d;
  }

  .kw-select-adgroup-search .material-icons {
    color: #9aa0a6 !important;
  }

  .kw-select-adgroup-campaigns {
    background: #2d2d2d;
  }

  .kw-select-adgroup-campaigns > div:first-child {
    color: #9aa0a6;
    border-bottom-color: #3a3a3a;
  }

  .kw-select-adgroup-campaign-list {
    background: #2d2d2d;
  }

  .kw-select-adgroup-campaign-item {
    color: #e8eaed;
  }

  .kw-select-adgroup-campaign-item > div > div:first-child {
    color: #e8eaed;
  }

  .kw-select-adgroup-campaign-item > div > div:last-child {
    color: #9aa0a6;
  }

  .kw-select-adgroup-adgroups {
    background: #2d2d2d;
  }

  .kw-select-adgroup-adgroups > div:first-child {
    color: #9aa0a6;
    border-bottom-color: #3a3a3a;
  }

  .kw-select-adgroup-adgroup-list {
    background: #2d2d2d;
  }

  .kw-select-adgroup-footer {
    background: #2d2d2d;
    border-top-color: #3a3a3a;
  }

  .kw-select-adgroup-upload-btn {
    background: #3a3a3a !important;
    border-color: #4a4a4a !important;
    color: #e8eaed !important;
  }

  .kw-select-adgroup-upload-btn:hover {
    background: #4a4a4a !important;
  }

  .kw-select-adgroup-upload-btn .material-icons {
    color: #e8eaed !important;
  }

  .kw-select-adgroup-campaign-item.selected {
    background: #3a3a3a !important;
  }

  .kw-select-adgroup-adgroup-item {
    color: #e8eaed;
    border-bottom-color: #3a3a3a;
  }

  .kw-select-adgroup-adgroup-item:hover {
    background: #3a3a3a;
  }

  .kw-select-adgroup-right > div:first-child {
    color: #9aa0a6;
    border-bottom-color: #3a3a3a;
  }

  .kw-select-adgroup-right > div:last-child {
    color: #9aa0a6;
  }

  .kw-table-controls {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-table-wrapper {
    background: #2d2d2d;
  }

  .kw-table-wrapper table {
    background: #2d2d2d;
  }

  .kw-table-wrapper thead {
    background: #2d2d2d;
  }

  .kw-table-wrapper th {
    color: #9aa0a6;
    border-bottom-color: #3a3a3a;
  }

  .kw-table-wrapper td {
    /* color: #e8eaed; */
    border-bottom-color: #3a3a3a;
  }

  .kw-table-wrapper tbody tr:hover {
    background: #3a3a3a;
  }

  .link-blue {
    color: #8ab4f8;
  }

  /* .status-text {
    color: #e8eaed;
  } */

  .kw-filter-menu {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-filter-header h6 {
    color: #e8eaed;
  }

  .kw-filter-option {
    color: #e8eaed;
  }

  .kw-filter-option:hover {
    background: #3a3a3a;
  }

  .kw-flyout {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-flyout-header {
    color: #9aa0a6;
  }

  .kw-flyout ul li:hover {
    background: #3a3a3a;
  }

  .kw-download-dropdown {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-download-dropdown .kw-dd-item {
    color: #e8eaed;
  }

  .kw-download-dropdown .kw-dd-item:hover {
    background: #3a3a3a;
  }

  .table-footer {
    /* background: #2d2d2d; */
    color: #9aa0a6;
  }

  .status-dot.green {
    background: #34a853;
  }

  .status-dot.gray {
    background: #9aa0a6;
  }

  .status-dot.red {
    background: #ea4335;
  }

  .form-check-input {
    border-color: #3a3a3a;
  }

  .form-check-input:checked {
    background-color: #8ab4f8;
    border-color: #8ab4f8;
  }

  .kw-pill {
    /* background: #3a3a3a; */
    color: #e8eaed;
  }

  /* .kw-pill:hover {
    background: #4a4a4a;
  } */

  .kw-menu {
    /* background: #2d2d2d; */
    /* border-color: #3a3a3a; */
  }

  .kw-menu-item {
    color: #e8eaed;
  }

  .kw-menu-item:hover {
    background: #3a3a3a;
  }

  .kw-chart-type-menu,
  .kw-adjust-menu {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-chart-type-option,
  .kw-adjust-option {
    color: #e8eaed;
  }

  .kw-chart-type-option:hover,
  .kw-adjust-option:hover {
    background: #3a3a3a;
  }

  .kw-icon-btn {
    color: #9aa0a6;
  }

  .kw-icon-btn:hover {
    background: #3a3a3a;
    color: #e8eaed;
  }

  .active-filter-pill {
    background: #3a3a3a !important;
    border-color: #4a4a4a !important;
    color: #e8eaed !important;
  }

  .selection-bar {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .selection-count {
    color: #e8eaed;
  }

  .dropdown-menu {
    /* background: #2d2d2d; */
    border-color: #3a3a3a;
  }

  .dropdown-item {
    color: #e8eaed;
  }

  .dropdown-item:hover {
    background: #3a3a3a;
  }

  .status-menu,
  .match-menu {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .status-option,
  .match-option {
    color: #e8eaed;
  }

  .status-option:hover,
  .match-option:hover {
    background: #3a3a3a;
  }

  .filter-category-header {
    color: #e8eaed !important;
  }

  .filter-category-header .category-chevron {
    color: #9aa0a6 !important;
  }

  .filter-item {
    color: #e8eaed !important;
  }

  .filter-item:hover {
    background: #3a3a3a !important;
  }

  /* .filter-recent,
  .filter-saved {
    color: #e8eaed !important;
  } */

  .filter-recent:hover,
  .filter-saved:hover {
    background: #3a3a3a !important;
  }

  .kw-filter-menu .separator {
    background: #3a3a3a !important;
  }

  .kw-filter-menu > div:first-child {
    color: #9aa0a6 !important;
  }

  .kw-add-filter-menu {
    background: #2d2d2d;
    border-color: #3a3a3a;
  }

  .kw-add-filter-search-input {
    background: #1e1e1e;
    border-color: #3a3a3a;
    color: #e8eaed;
  }

  .kw-add-filter-search-input:focus {
    border-color: #8ab4f8;
  }

  .kw-add-filter-search-input::placeholder {
    color: var(--ga-text-muted);
  }

  .kw-add-filter-search-input + .material-icons {
    color: #9aa0a6 !important;
  }
}

body.dark-mode .kw-hero,
html.dark-mode .kw-hero,
[data-theme="dark"] .kw-hero {
  background: #1e1e1e;
}

body.dark-mode .kw-tabs,
html.dark-mode .kw-tabs,
[data-theme="dark"] .kw-tabs {
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-tab,
html.dark-mode .kw-tab,
[data-theme="dark"] .kw-tab {
  color: #e8eaed;
}

body.dark-mode .kw-tab:hover,
html.dark-mode .kw-tab:hover,
[data-theme="dark"] .kw-tab:hover {
  color: #fff;
}

body.dark-mode .kw-tab.active,
html.dark-mode .kw-tab.active,
[data-theme="dark"] .kw-tab.active {
  color: #8ab4f8;
  border-bottom-color: #8ab4f8;
}

body.dark-mode .kw-card,
html.dark-mode .kw-card,
[data-theme="dark"] .kw-card {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-add-keyword-section .kw-card,
html.dark-mode .kw-add-keyword-section .kw-card,
[data-theme="dark"] .kw-add-keyword-section .kw-card {
  background: #2d2d2d !important;
  border-color: #3a3a3a !important;
}

body.dark-mode .kw-add-keyword-header-inline,
html.dark-mode .kw-add-keyword-header-inline,
[data-theme="dark"] .kw-add-keyword-header-inline {
  border-bottom-color: #3a3a3a !important;
}

body.dark-mode .kw-add-keyword-close-inline,
html.dark-mode .kw-add-keyword-close-inline,
[data-theme="dark"] .kw-add-keyword-close-inline {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-add-keyword-close-inline:hover,
html.dark-mode .kw-add-keyword-close-inline:hover,
[data-theme="dark"] .kw-add-keyword-close-inline:hover {
  background: #3a3a3a !important;
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-content-inline,
html.dark-mode .kw-add-keyword-content-inline,
[data-theme="dark"] .kw-add-keyword-content-inline {
  background: #2d2d2d !important;
}

body.dark-mode .kw-add-keyword-main-content,
html.dark-mode .kw-add-keyword-main-content,
[data-theme="dark"] .kw-add-keyword-main-content {
  border-right-color: #3a3a3a !important;
}

body.dark-mode .kw-add-keyword-main-content h2,
html.dark-mode .kw-add-keyword-main-content h2,
[data-theme="dark"] .kw-add-keyword-main-content h2 {
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-instruction,
html.dark-mode .kw-add-keyword-instruction,
[data-theme="dark"] .kw-add-keyword-instruction {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-add-keyword-instruction a,
html.dark-mode .kw-add-keyword-instruction a,
[data-theme="dark"] .kw-add-keyword-instruction a {
  color: #8ab4f8 !important;
}

body.dark-mode .kw-add-keyword-adgroup,
html.dark-mode .kw-add-keyword-adgroup,
[data-theme="dark"] .kw-add-keyword-adgroup {
  background: #3a3a3a !important;
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-adgroup .material-icons,
html.dark-mode .kw-add-keyword-adgroup .material-icons,
[data-theme="dark"] .kw-add-keyword-adgroup .material-icons {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-add-keyword-adgroup a,
html.dark-mode .kw-add-keyword-adgroup a,
[data-theme="dark"] .kw-add-keyword-adgroup a {
  color: #8ab4f8 !important;
}

body.dark-mode .kw-add-keyword-sidebar h3,
html.dark-mode .kw-add-keyword-sidebar h3,
[data-theme="dark"] .kw-add-keyword-sidebar h3 {
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-suggestions > div > span,
html.dark-mode .kw-add-keyword-suggestions > div > span,
[data-theme="dark"] .kw-add-keyword-suggestions > div > span {
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-match-types p,
html.dark-mode .kw-add-keyword-match-types p,
[data-theme="dark"] .kw-add-keyword-match-types p {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-add-keyword-match-types > div > div,
html.dark-mode .kw-add-keyword-match-types > div > div,
[data-theme="dark"] .kw-add-keyword-match-types > div > div {
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-match-types code,
html.dark-mode .kw-add-keyword-match-types code,
[data-theme="dark"] .kw-add-keyword-match-types code {
  background: #3a3a3a !important;
  color: #f28b82 !important;
}

body.dark-mode .kw-add-keyword-match-types a,
html.dark-mode .kw-add-keyword-match-types a,
[data-theme="dark"] .kw-add-keyword-match-types a {
  color: #8ab4f8 !important;
}

body.dark-mode .kw-add-keyword-textarea,
html.dark-mode .kw-add-keyword-textarea,
[data-theme="dark"] .kw-add-keyword-textarea {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e8eaed;
}

body.dark-mode .kw-add-keyword-textarea:focus,
html.dark-mode .kw-add-keyword-textarea:focus,
[data-theme="dark"] .kw-add-keyword-textarea:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
}

body.dark-mode .kw-add-keyword-textarea::placeholder,
html.dark-mode .kw-add-keyword-textarea::placeholder,
[data-theme="dark"] .kw-add-keyword-textarea::placeholder {
  color: var(--ga-text-muted);
}

body.dark-mode .kw-add-keyword-sidebar h3,
html.dark-mode .kw-add-keyword-sidebar h3,
[data-theme="dark"] .kw-add-keyword-sidebar h3 {
  color: #e8eaed;
}

body.dark-mode .kw-add-keyword-idea-input,
html.dark-mode .kw-add-keyword-idea-input,
[data-theme="dark"] .kw-add-keyword-idea-input {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e8eaed;
}

body.dark-mode .kw-add-keyword-idea-input:focus,
html.dark-mode .kw-add-keyword-idea-input:focus,
[data-theme="dark"] .kw-add-keyword-idea-input:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.1);
}

body.dark-mode .kw-add-keyword-idea-input::placeholder,
html.dark-mode .kw-add-keyword-idea-input::placeholder,
[data-theme="dark"] .kw-add-keyword-idea-input::placeholder {
  color: var(--ga-text-muted);
}

body.dark-mode .kw-add-keyword-suggestions,
html.dark-mode .kw-add-keyword-suggestions,
[data-theme="dark"] .kw-add-keyword-suggestions {
  background: #1e1e1e;
  border-color: #3a3a3a;
}

body.dark-mode .kw-add-keyword-suggestions > div > span,
html.dark-mode .kw-add-keyword-suggestions > div > span,
[data-theme="dark"] .kw-add-keyword-suggestions > div > span {
  color: #e8eaed;
}

body.dark-mode .kw-add-keyword-suggestion-item,
html.dark-mode .kw-add-keyword-suggestion-item,
[data-theme="dark"] .kw-add-keyword-suggestion-item {
  border-bottom-color: #3a3a3a;
  color: #e8eaed;
}

body.dark-mode .kw-add-keyword-suggestion-item:hover,
html.dark-mode .kw-add-keyword-suggestion-item:hover,
[data-theme="dark"] .kw-add-keyword-suggestion-item:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-add-keyword-suggestion-add,
html.dark-mode .kw-add-keyword-suggestion-add,
[data-theme="dark"] .kw-add-keyword-suggestion-add {
  color: #8ab4f8;
}

body.dark-mode .kw-add-keyword-suggestion-add:hover,
html.dark-mode .kw-add-keyword-suggestion-add:hover,
[data-theme="dark"] .kw-add-keyword-suggestion-add:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-add-keyword-add-all,
html.dark-mode .kw-add-keyword-add-all,
[data-theme="dark"] .kw-add-keyword-add-all {
  background: #8ab4f8 !important;
  color: #1e1e1e !important;
}

body.dark-mode .kw-add-keyword-add-all:hover,
html.dark-mode .kw-add-keyword-add-all:hover,
[data-theme="dark"] .kw-add-keyword-add-all:hover {
  background: #669df6 !important;
}

body.dark-mode .kw-add-keyword-footer-inline,
html.dark-mode .kw-add-keyword-footer-inline,
[data-theme="dark"] .kw-add-keyword-footer-inline {
  background: #2d2d2d;
  border-top-color: #3a3a3a;
}

body.dark-mode .kw-add-keyword-match-types p,
html.dark-mode .kw-add-keyword-match-types p,
[data-theme="dark"] .kw-add-keyword-match-types p {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-add-keyword-match-types > div > div,
html.dark-mode .kw-add-keyword-match-types > div > div,
[data-theme="dark"] .kw-add-keyword-match-types > div > div {
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-match-types code,
html.dark-mode .kw-add-keyword-match-types code,
[data-theme="dark"] .kw-add-keyword-match-types code {
  background: #3a3a3a !important;
  color: #f28b82 !important;
}

body.dark-mode .kw-add-keyword-match-types a,
html.dark-mode .kw-add-keyword-match-types a,
[data-theme="dark"] .kw-add-keyword-match-types a {
  color: #8ab4f8 !important;
}

body.dark-mode .kw-add-keyword-tab-content#kwTabContentNegative h2,
html.dark-mode .kw-add-keyword-tab-content#kwTabContentNegative h2,
[data-theme="dark"] .kw-add-keyword-tab-content#kwTabContentNegative h2 {
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection *[style*="#202124"],
html.dark-mode #addKeywordSection *[style*="#202124"],
[data-theme="dark"] #addKeywordSection *[style*="#202124"] {
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection *[style*="#5f6368"]:not(.material-icons),
html.dark-mode #addKeywordSection *[style*="#5f6368"]:not(.material-icons),
[data-theme="dark"]
  #addKeywordSection
  *[style*="#5f6368"]:not(.material-icons) {
  color: #9aa0a6 !important;
}

body.dark-mode #addKeywordSection *[style*="#fff"],
body.dark-mode #addKeywordSection *[style*="#f8f9fa"],
html.dark-mode #addKeywordSection *[style*="#fff"],
html.dark-mode #addKeywordSection *[style*="#f8f9fa"],
[data-theme="dark"] #addKeywordSection *[style*="#fff"],
[data-theme="dark"] #addKeywordSection *[style*="#f8f9fa"] {
  background: #2d2d2d !important;
}

body.dark-mode #addKeywordSection *[style*="#dadce0"],
body.dark-mode #addKeywordSection *[style*="#e8eaed"],
html.dark-mode #addKeywordSection *[style*="#dadce0"],
html.dark-mode #addKeywordSection *[style*="#e8eaed"],
[data-theme="dark"] #addKeywordSection *[style*="#dadce0"],
[data-theme="dark"] #addKeywordSection *[style*="#e8eaed"] {
  border-color: #3a3a3a !important;
}

body.dark-mode #addKeywordSection .kw-add-keyword-adgroup *[style*="#f8f9fa"],
html.dark-mode #addKeywordSection .kw-add-keyword-adgroup *[style*="#f8f9fa"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-adgroup
  *[style*="#f8f9fa"] {
  background: #3a3a3a !important;
}

body.dark-mode #addKeywordSection .kw-card[style*="background"],
html.dark-mode #addKeywordSection .kw-card[style*="background"],
[data-theme="dark"] #addKeywordSection .kw-card[style*="background"] {
  background: #2d2d2d !important;
  border-color: #3a3a3a !important;
}

body.dark-mode #addKeywordSection h2[style*="color"],
html.dark-mode #addKeywordSection h2[style*="color"],
[data-theme="dark"] #addKeywordSection h2[style*="color"] {
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection h3[style*="color"],
html.dark-mode #addKeywordSection h3[style*="color"],
[data-theme="dark"] #addKeywordSection h3[style*="color"] {
  color: #e8eaed !important;
}

body.dark-mode
  #addKeywordSection
  .kw-add-keyword-header-inline[style*="border-bottom"],
html.dark-mode
  #addKeywordSection
  .kw-add-keyword-header-inline[style*="border-bottom"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-header-inline[style*="border-bottom"] {
  border-bottom-color: #3a3a3a !important;
}

body.dark-mode #addKeywordSection .kw-add-keyword-close-inline[style*="color"],
html.dark-mode #addKeywordSection .kw-add-keyword-close-inline[style*="color"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-close-inline[style*="color"] {
  color: #9aa0a6 !important;
}

body.dark-mode #addKeywordSection .kw-add-keyword-adgroup[style*="background"],
html.dark-mode #addKeywordSection .kw-add-keyword-adgroup[style*="background"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-adgroup[style*="background"] {
  background: #3a3a3a !important;
  color: #e8eaed !important;
}

body.dark-mode
  #addKeywordSection
  .kw-add-keyword-adgroup
  .material-icons[style*="color"],
html.dark-mode
  #addKeywordSection
  .kw-add-keyword-adgroup
  .material-icons[style*="color"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-adgroup
  .material-icons[style*="color"] {
  color: #9aa0a6 !important;
}

body.dark-mode #addKeywordSection span[style*="color"][style*="#202124"],
html.dark-mode #addKeywordSection span[style*="color"][style*="#202124"],
[data-theme="dark"] #addKeywordSection span[style*="color"][style*="#202124"] {
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection .kw-add-keyword-match-types p[style*="color"],
html.dark-mode #addKeywordSection .kw-add-keyword-match-types p[style*="color"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-match-types
  p[style*="color"] {
  color: #9aa0a6 !important;
}

body.dark-mode
  #addKeywordSection
  .kw-add-keyword-match-types
  > div[style*="color"],
html.dark-mode
  #addKeywordSection
  .kw-add-keyword-match-types
  > div[style*="color"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-match-types
  > div[style*="color"] {
  color: #e8eaed !important;
}

body.dark-mode
  #addKeywordSection
  .kw-add-keyword-match-types
  > div
  > div[style*="color"],
html.dark-mode
  #addKeywordSection
  .kw-add-keyword-match-types
  > div
  > div[style*="color"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-match-types
  > div
  > div[style*="color"] {
  color: #e8eaed !important;
}

body.dark-mode
  #addKeywordSection
  .kw-add-keyword-btn-cancel[style*="background"],
html.dark-mode
  #addKeywordSection
  .kw-add-keyword-btn-cancel[style*="background"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-btn-cancel[style*="background"] {
  background: #2d2d2d !important;
  border-color: #3a3a3a !important;
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection .kw-add-keyword-btn-save[style*="background"],
html.dark-mode #addKeywordSection .kw-add-keyword-btn-save[style*="background"],
[data-theme="dark"]
  #addKeywordSection
  .kw-add-keyword-btn-save[style*="background"] {
  background: #8ab4f8 !important;
  color: #1e1e1e !important;
}

body.dark-mode #addKeywordSection [style*="color: #202124"],
body.dark-mode #addKeywordSection [style*="color:#202124"],
html.dark-mode #addKeywordSection [style*="color: #202124"],
html.dark-mode #addKeywordSection [style*="color:#202124"],
[data-theme="dark"] #addKeywordSection [style*="color: #202124"],
[data-theme="dark"] #addKeywordSection [style*="color:#202124"] {
  color: #e8eaed !important;
}

body.dark-mode #addKeywordSection [style*="color: #5f6368"],
body.dark-mode #addKeywordSection [style*="color:#5f6368"],
html.dark-mode #addKeywordSection [style*="color: #5f6368"],
html.dark-mode #addKeywordSection [style*="color:#5f6368"],
[data-theme="dark"] #addKeywordSection [style*="color: #5f6368"],
[data-theme="dark"] #addKeywordSection [style*="color:#5f6368"] {
  color: #9aa0a6 !important;
}

body.dark-mode #addKeywordSection [style*="background: #fff"],
body.dark-mode #addKeywordSection [style*="background:#fff"],
body.dark-mode #addKeywordSection [style*="background: #f8f9fa"],
body.dark-mode #addKeywordSection [style*="background:#f8f9fa"],
html.dark-mode #addKeywordSection [style*="background: #fff"],
html.dark-mode #addKeywordSection [style*="background:#fff"],
html.dark-mode #addKeywordSection [style*="background: #f8f9fa"],
html.dark-mode #addKeywordSection [style*="background:#f8f9fa"],
[data-theme="dark"] #addKeywordSection [style*="background: #fff"],
[data-theme="dark"] #addKeywordSection [style*="background:#fff"],
[data-theme="dark"] #addKeywordSection [style*="background: #f8f9fa"],
[data-theme="dark"] #addKeywordSection [style*="background:#f8f9fa"] {
  background: #2d2d2d !important;
}

body.dark-mode #addKeywordSection [style*="border: 1px solid #dadce0"],
body.dark-mode #addKeywordSection [style*="border:1px solid #dadce0"],
body.dark-mode #addKeywordSection [style*="border-bottom: 1px solid #e8eaed"],
body.dark-mode #addKeywordSection [style*="border-bottom:1px solid #e8eaed"],
html.dark-mode #addKeywordSection [style*="border: 1px solid #dadce0"],
html.dark-mode #addKeywordSection [style*="border:1px solid #dadce0"],
html.dark-mode #addKeywordSection [style*="border-bottom: 1px solid #e8eaed"],
html.dark-mode #addKeywordSection [style*="border-bottom:1px solid #e8eaed"],
[data-theme="dark"] #addKeywordSection [style*="border: 1px solid #dadce0"],
[data-theme="dark"] #addKeywordSection [style*="border:1px solid #dadce0"],
[data-theme="dark"]
  #addKeywordSection
  [style*="border-bottom: 1px solid #e8eaed"],
[data-theme="dark"]
  #addKeywordSection
  [style*="border-bottom:1px solid #e8eaed"] {
  border-color: #3a3a3a !important;
}

body.dark-mode .kw-add-keyword-btn-cancel,
html.dark-mode .kw-add-keyword-btn-cancel,
[data-theme="dark"] .kw-add-keyword-btn-cancel {
  background: #2d2d2d !important;
  border-color: #3a3a3a !important;
  color: #e8eaed !important;
}

body.dark-mode .kw-add-keyword-btn-cancel:hover,
html.dark-mode .kw-add-keyword-btn-cancel:hover,
[data-theme="dark"] .kw-add-keyword-btn-cancel:hover {
  background: #3a3a3a !important;
}

body.dark-mode .kw-add-keyword-btn-save,
html.dark-mode .kw-add-keyword-btn-save,
[data-theme="dark"] .kw-add-keyword-btn-save {
  background: #8ab4f8 !important;
  color: #1e1e1e !important;
}

body.dark-mode .kw-add-keyword-btn-save:hover,
html.dark-mode .kw-add-keyword-btn-save:hover,
[data-theme="dark"] .kw-add-keyword-btn-save:hover {
  background: #669df6 !important;
}

body.dark-mode .kw-select-adgroup-modal,
html.dark-mode .kw-select-adgroup-modal,
[data-theme="dark"] .kw-select-adgroup-modal {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-header,
html.dark-mode .kw-select-adgroup-header,
[data-theme="dark"] .kw-select-adgroup-header {
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-header h2,
html.dark-mode .kw-select-adgroup-header h2,
[data-theme="dark"] .kw-select-adgroup-header h2 {
  color: #e8eaed;
}

body.dark-mode .kw-select-adgroup-close,
html.dark-mode .kw-select-adgroup-close,
[data-theme="dark"] .kw-select-adgroup-close {
  color: #9aa0a6;
}

body.dark-mode .kw-select-adgroup-close:hover,
html.dark-mode .kw-select-adgroup-close:hover,
[data-theme="dark"] .kw-select-adgroup-close:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-search-input,
html.dark-mode .kw-select-adgroup-search-input,
[data-theme="dark"] .kw-select-adgroup-search-input {
  background: #1e1e1e;
  border-color: #3a3a3a;
  color: #e8eaed;
}

body.dark-mode .kw-select-adgroup-search-input:focus,
html.dark-mode .kw-select-adgroup-search-input:focus,
[data-theme="dark"] .kw-select-adgroup-search-input:focus {
  border-color: #8ab4f8;
}

body.dark-mode .kw-select-adgroup-left,
html.dark-mode .kw-select-adgroup-left,
[data-theme="dark"] .kw-select-adgroup-left {
  background: #2d2d2d;
  border-right-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-right,
html.dark-mode .kw-select-adgroup-right,
[data-theme="dark"] .kw-select-adgroup-right {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-search,
html.dark-mode .kw-select-adgroup-search,
[data-theme="dark"] .kw-select-adgroup-search {
  background: #2d2d2d;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-search .material-icons,
html.dark-mode .kw-select-adgroup-search .material-icons,
[data-theme="dark"] .kw-select-adgroup-search .material-icons {
  color: #9aa0a6 !important;
}

body.dark-mode .kw-select-adgroup-campaigns,
html.dark-mode .kw-select-adgroup-campaigns,
[data-theme="dark"] .kw-select-adgroup-campaigns {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-campaigns > div:first-child,
html.dark-mode .kw-select-adgroup-campaigns > div:first-child,
[data-theme="dark"] .kw-select-adgroup-campaigns > div:first-child {
  color: #9aa0a6;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-campaign-list,
html.dark-mode .kw-select-adgroup-campaign-list,
[data-theme="dark"] .kw-select-adgroup-campaign-list {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-campaign-item,
html.dark-mode .kw-select-adgroup-campaign-item,
[data-theme="dark"] .kw-select-adgroup-campaign-item {
  color: #e8eaed;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-campaign-item > div > div:first-child,
html.dark-mode .kw-select-adgroup-campaign-item > div > div:first-child,
[data-theme="dark"] .kw-select-adgroup-campaign-item > div > div:first-child {
  color: #e8eaed;
}

body.dark-mode .kw-select-adgroup-campaign-item > div > div:last-child,
html.dark-mode .kw-select-adgroup-campaign-item > div > div:last-child,
[data-theme="dark"] .kw-select-adgroup-campaign-item > div > div:last-child {
  color: #9aa0a6;
}

body.dark-mode .kw-select-adgroup-campaign-item:hover,
html.dark-mode .kw-select-adgroup-campaign-item:hover,
[data-theme="dark"] .kw-select-adgroup-campaign-item:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-campaign-item.selected,
html.dark-mode .kw-select-adgroup-campaign-item.selected,
[data-theme="dark"] .kw-select-adgroup-campaign-item.selected {
  background: #3a3a3a !important;
}

body.dark-mode .kw-select-adgroup-adgroups,
html.dark-mode .kw-select-adgroup-adgroups,
[data-theme="dark"] .kw-select-adgroup-adgroups {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-adgroups > div:first-child,
html.dark-mode .kw-select-adgroup-adgroups > div:first-child,
[data-theme="dark"] .kw-select-adgroup-adgroups > div:first-child {
  color: #9aa0a6;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-adgroup-list,
html.dark-mode .kw-select-adgroup-adgroup-list,
[data-theme="dark"] .kw-select-adgroup-adgroup-list {
  background: #2d2d2d;
}

body.dark-mode .kw-select-adgroup-adgroup-item,
html.dark-mode .kw-select-adgroup-adgroup-item,
[data-theme="dark"] .kw-select-adgroup-adgroup-item {
  color: #e8eaed;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-adgroup-item:hover,
html.dark-mode .kw-select-adgroup-adgroup-item:hover,
[data-theme="dark"] .kw-select-adgroup-adgroup-item:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-right > div:last-child,
html.dark-mode .kw-select-adgroup-right > div:last-child,
[data-theme="dark"] .kw-select-adgroup-right > div:last-child {
  color: #9aa0a6;
}

body.dark-mode .kw-select-adgroup-footer,
html.dark-mode .kw-select-adgroup-footer,
[data-theme="dark"] .kw-select-adgroup-footer {
  background: #2d2d2d;
  border-top-color: #3a3a3a;
}

body.dark-mode .kw-select-adgroup-upload-btn,
html.dark-mode .kw-select-adgroup-upload-btn,
[data-theme="dark"] .kw-select-adgroup-upload-btn {
  background: #3a3a3a !important;
  border-color: #4a4a4a !important;
  color: #e8eaed !important;
}

body.dark-mode .kw-select-adgroup-upload-btn:hover,
html.dark-mode .kw-select-adgroup-upload-btn:hover,
[data-theme="dark"] .kw-select-adgroup-upload-btn:hover {
  background: #4a4a4a !important;
}

body.dark-mode .kw-select-adgroup-upload-btn .material-icons,
html.dark-mode .kw-select-adgroup-upload-btn .material-icons,
[data-theme="dark"] .kw-select-adgroup-upload-btn .material-icons {
  color: #e8eaed !important;
}

body.dark-mode .kw-table-controls,
html.dark-mode .kw-table-controls,
[data-theme="dark"] .kw-table-controls {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-table-wrapper,
html.dark-mode .kw-table-wrapper,
[data-theme="dark"] .kw-table-wrapper {
  background: #2d2d2d;
}

body.dark-mode .kw-table-wrapper table,
html.dark-mode .kw-table-wrapper table,
[data-theme="dark"] .kw-table-wrapper table {
  background: #2d2d2d;
}

body.dark-mode .kw-table-wrapper thead,
html.dark-mode .kw-table-wrapper thead,
[data-theme="dark"] .kw-table-wrapper thead {
  background: #2d2d2d;
}

body.dark-mode .kw-table-wrapper th,
html.dark-mode .kw-table-wrapper th,
[data-theme="dark"] .kw-table-wrapper th {
  color: #9aa0a6;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-table-wrapper td,
html.dark-mode .kw-table-wrapper td,
[data-theme="dark"] .kw-table-wrapper td {
  color: #e8eaed;
  border-bottom-color: #3a3a3a;
}

body.dark-mode .kw-table-wrapper tbody tr:hover,
html.dark-mode .kw-table-wrapper tbody tr:hover,
[data-theme="dark"] .kw-table-wrapper tbody tr:hover {
  background: #3a3a3a;
}

body.dark-mode .link-blue,
html.dark-mode .link-blue,
[data-theme="dark"] .link-blue {
  color: #8ab4f8;
}

body.dark-mode .status-text,
html.dark-mode .status-text,
[data-theme="dark"] .status-text {
  color: #e8eaed;
}

body.dark-mode .kw-filter-menu,
html.dark-mode .kw-filter-menu,
[data-theme="dark"] .kw-filter-menu {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-filter-header h6,
html.dark-mode .kw-filter-header h6,
[data-theme="dark"] .kw-filter-header h6 {
  color: #e8eaed;
}

body.dark-mode .kw-filter-option,
html.dark-mode .kw-filter-option,
[data-theme="dark"] .kw-filter-option {
  color: #e8eaed;
}

body.dark-mode .kw-filter-option:hover,
html.dark-mode .kw-filter-option:hover,
[data-theme="dark"] .kw-filter-option:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-flyout,
html.dark-mode .kw-flyout,
[data-theme="dark"] .kw-flyout {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-flyout-header,
html.dark-mode .kw-flyout-header,
[data-theme="dark"] .kw-flyout-header {
  color: #9aa0a6;
  background: #5f6368;
}

body.dark-mode .kw-flyout ul li,
html.dark-mode .kw-flyout ul li,
[data-theme="dark"] .kw-flyout ul li {
  background: #3a3a3a !important;
}

body.dark-mode .kw-flyout ul li:hover,
html.dark-mode .kw-flyout ul li:hover,
[data-theme="dark"] .kw-flyout ul li:hover {
  background: #3a3a3a;
}

body.dark-mode .kw-download-dropdown,
html.dark-mode .kw-download-dropdown,
[data-theme="dark"] .kw-download-dropdown {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-download-dropdown .kw-dd-item,
html.dark-mode .kw-download-dropdown .kw-dd-item,
[data-theme="dark"] .kw-download-dropdown .kw-dd-item {
  color: #e8eaed;
}

body.dark-mode .kw-download-dropdown .kw-dd-item:hover,
html.dark-mode .kw-download-dropdown .kw-dd-item:hover,
[data-theme="dark"] .kw-download-dropdown .kw-dd-item:hover {
  background: #3a3a3a;
}

body.dark-mode .form-check-input,
html.dark-mode .form-check-input,
[data-theme="dark"] .form-check-input {
  border-color: #3a3a3a;
}

body.dark-mode .form-check-input:checked,
html.dark-mode .form-check-input:checked,
[data-theme="dark"] .form-check-input:checked {
  background-color: #8ab4f8;
  border-color: #8ab4f8;
}

body.dark-mode .kw-pill,
html.dark-mode .kw-pill,
[data-theme="dark"] .kw-pill {
  background: #3a3a3a;
  color: #e8eaed;
}

body.dark-mode .kw-pill:hover,
html.dark-mode .kw-pill:hover,
[data-theme="dark"] .kw-pill:hover {
  background: #4a4a4a;
}

body.dark-mode .kw-menu,
html.dark-mode .kw-menu,
[data-theme="dark"] .kw-menu {
  background: #2d2d2d;
  border-color: #3a3a3a;
}

body.dark-mode .kw-menu-item,
html.dark-mode .kw-menu-item,
[data-theme="dark"] .kw-menu-item {
  color: #e8eaed;
}

body.dark-mode .kw-menu-item:hover,
html.dark-mode .kw-menu-item:hover,
[data-theme="dark"] .kw-menu-item:hover {
  background: #3a3a3a;
}

.kw-add-keyword-section .kw-card {
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border) !important;
}

.kw-add-keyword-header-inline {
  border-bottom: 1px solid var(--ga-border) !important;
}

.kw-add-keyword-close-inline {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-close-inline:hover {
  background: var(--ga-surface-hover) !important;
}

.kw-add-keyword-section h2,
.kw-add-keyword-section h3 {
  color: var(--ga-text) !important;
}

.kw-add-keyword-instruction {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-instruction a {
  color: var(--color-third) !important;
}

.kw-add-keyword-adgroup {
  background: var(--ga-bg) !important;
  color: var(--ga-text) !important;
}

.kw-add-keyword-adgroup .material-icons {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-adgroup a {
  color: var(--color-third) !important;
}

.kw-add-keyword-idea-input {
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-text) !important;
}

.kw-add-keyword-idea-input::placeholder {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-idea-input + .material-icons {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-suggestions span {
  color: var(--ga-text) !important;
}

.kw-add-keyword-add-all {
  background: var(--color-third) !important;
  color: var(--color-white) !important;
}

.kw-add-keyword-add-all:hover {
  opacity: 0.9;
}

.kw-add-keyword-match-types p {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-match-types div {
  color: var(--ga-text) !important;
}

.kw-add-keyword-match-types code {
  background: var(--ga-surface-hover) !important;
  color: var(--color-red) !important;
}

.kw-add-keyword-btn-cancel {
  border: 1px solid var(--ga-border) !important;
  background: var(--color-white) !important;
  color: var(--ga-text) !important;
}

.kw-add-keyword-btn-cancel:hover {
  background: var(--ga-surface-hover) !important;
}

.kw-add-keyword-btn-save {
  background: var(--color-third) !important;
  color: var(--color-white) !important;
}

.kw-add-keyword-btn-save:hover {
  opacity: 0.9;
}

.kw-add-keyword-textarea {
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-text) !important;
}

.kw-add-keyword-textarea::placeholder {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-suggestions-list {
  background: var(--color-white) !important;
}

.kw-add-keyword-suggestion-item {
  color: var(--ga-text) !important;
  border-bottom: 1px solid var(--ga-border) !important;
}

.kw-add-keyword-suggestion-item:last-child {
  border-bottom: none !important;
}

.kw-add-keyword-suggestion-item:hover {
  background: var(--ga-surface-hover) !important;
}

.kw-add-keyword-suggestion-add {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-suggestion-add:hover {
  color: var(--color-third) !important;
  background: var(--ga-surface-selected) !important;
}
.active-filter-pill {
  background: var(--ga-surface-hover) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-text) !important;
}

.kw-filter-menu-search-icon {
  color: var(--ga-text-muted) !important;
}

.kw-filter-menu-separator {
  background: var(--ga-border) !important;
}

.kw-filter-menu-section-title {
  color: var(--ga-text) !important;
}

.kw-filter-menu-category-header {
  color: var(--ga-text) !important;
}

.kw-filter-menu-category-chevron {
  color: var(--ga-text-muted) !important;
}

.kw-filter-menu-item-text {
  color: var(--ga-text) !important;
}

.kw-select-adgroup-search-icon {
  color: var(--ga-text-muted) !important;
}

.kw-select-adgroup-section-title {
  color: var(--ga-text) !important;
}

.kw-select-adgroup-campaign-name {
  color: var(--ga-text) !important;
}

.kw-select-adgroup-campaign-subtitle {
  color: var(--ga-text-muted) !important;
}

.kw-select-adgroup-campaign-icon {
  color: var(--ga-text-muted) !important;
}

.kw-select-adgroup-selected-campaign {
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border) !important;
}

.kw-select-adgroup-selected-campaign:hover {
  background: var(--ga-surface-hover) !important;
}

.kw-select-adgroup-empty-state {
  color: var(--ga-text-muted) !important;
}

.kw-add-keyword-modal-link {
  color: var(--color-third) !important;
}

.kw-add-keyword-modal-code {
  background: var(--ga-surface-hover) !important;
}

.columns-search-icon {
  color: var(--ga-text-muted) !important;
}

.columns-separator {
  background: var(--ga-border) !important;
}

.columns-custom-btn {
  border: 1px solid var(--ga-border) !important;
  background: var(--color-white) !important;
  color: var(--color-third) !important;
}

.custom-column-info-icon {
  color: var(--color-third) !important;
}

.custom-column-required {
  color: var(--color-red) !important;
}

.status-menu-item,
.match-menu-item {
  color: var(--ga-text) !important;
}

.status-menu-item:hover,
.match-menu-item:hover {
  background: var(--ga-surface-hover) !important;
}

.filter-item {
  color: var(--ga-text) !important;
}

.filter-item:hover {
  background: var(--ga-surface-hover) !important;
}

#keywordsTable tbody tr.row-selected {
  background: var(--color-active) !important;
}

#keywordsTable tbody tr.row-selected td {
  background: var(--color-active) !important;
  color: var(--ga-text) !important;
}

#keywordsTable th,
#keywordsTable td {
  background: var(--color-white) !important;
}

#keywordsTable th.sticky-col-1,
#keywordsTable td.sticky-col-1,
#keywordsTable th.sticky-col-2,
#keywordsTable td.sticky-col-2,
#keywordsTable th.sticky-col-3,
#keywordsTable td.sticky-col-3 {
  background: var(--color-white) !important;
}

#keywordsTable tbody tr:hover td.sticky-col-1,
#keywordsTable tbody tr:hover td.sticky-col-2,
#keywordsTable tbody tr:hover td.sticky-col-3 {
  background: var(--ga-surface-hover) !important;
}

#keywordsTable tbody tr.row-selected td.sticky-col-1,
#keywordsTable tbody tr.row-selected td.sticky-col-2,
#keywordsTable tbody tr.row-selected td.sticky-col-3 {
  background: var(--color-active) !important;
}

.kw-upload-keyword-section {
  margin-bottom: 16px;
}

.kw-upload-keyword-section .kw-card {
  background: var(--color-white) !important;
  border: 1px solid var(--ga-border) !important;
}

.kw-upload-header-inline {
  border-bottom: 1px solid var(--ga-border) !important;
}

.kw-upload-close-inline {
  color: var(--ga-text-muted) !important;
}

.kw-upload-close-inline:hover {
  background: var(--ga-surface-hover) !important;
}

.kw-upload-content-inline {
  padding: 24px;
}

.kw-upload-main-content {
  max-width: 900px;
}

.kw-upload-content-inline h2 {
  color: var(--ga-text) !important;
}

.kw-upload-content-inline p {
  color: var(--ga-text-muted) !important;
}

.kw-upload-content-inline a {
  color: var(--color-third) !important;
}

.kw-upload-footer-inline {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid var(--ga-border);
  background: var(--color-white);
}

.kw-upload-step {
  margin-bottom: 32px;
}

.kw-upload-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-third);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
}

.kw-upload-step-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ga-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.kw-upload-step-desc {
  font-size: 13px;
  color: var(--ga-text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  margin-left: 36px;
}

.kw-upload-step-content {
  margin-left: 36px;
}

.kw-upload-dropdown {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--ga-text);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 8px;
}

.kw-upload-dropdown:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.1);
}

.kw-upload-info-text {
  font-size: 13px;
  color: var(--ga-text-muted);
  margin-top: 4px;
}

.kw-upload-button-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.kw-upload-btn-primary {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--color-third);
  border-radius: 4px;
  color: var(--color-third);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kw-upload-btn-primary:hover {
  background: var(--ga-surface-selected);
}

.kw-upload-link {
  color: var(--color-third);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kw-upload-link:hover {
  text-decoration: underline;
}

.kw-upload-instructions-content {
  display: none;
}

.kw-upload-instructions-content.show {
  display: block;
}

.kw-upload-instructions-icon.expanded {
  transform: rotate(180deg);
}

.kw-upload-email-input {
  width: 100%;
  max-width: 400px;
}

.kw-upload-email-input:focus {
  outline: none;
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.1);
}

.kw-upload-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.kw-upload-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-third);
}

.kw-upload-checkbox label {
  font-size: 14px;
  color: var(--ga-text);
  cursor: pointer;
}

.kw-upload-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.kw-upload-btn-cancel {
  background: transparent;
  border: 1px solid var(--ga-border);
  color: var(--ga-text);
}

.kw-upload-btn-cancel:hover {
  background: var(--ga-surface-hover);
}

.kw-upload-btn-apply {
  background: var(--color-third);
  border: none;
  color: var(--color-white);
}

.kw-upload-btn-apply:hover {
  opacity: 0.9;
}

.kw-upload-btn-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kw-upload-btn-preview {
  background: transparent;
  border: 1px solid var(--ga-border);
  color: var(--ga-text);
}

.kw-upload-btn-preview:hover {
  background: var(--ga-surface-hover);
}

.kw-upload-btn-preview:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-card {
  width: 420px;
  margin: 40px auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
[data-theme="dark"] .modal-card {
  background: var(--color-white);
}
[data-theme="light"] .modal-card {
  background: #fff;
}

.modal-header-custom {
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 500;
  border-bottom: 1px solid #e0e0e0;
}

.modal-body-custom {
  padding: 16px;
}

.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-dot {
  width: 26px;
  height: 26px;
  aspect-ratio: 1/1;
  margin-top: 10px;
  border-radius: 50%;
  background: #e88b8b;
  cursor: pointer;
}

.color-popup {
  position: absolute;
  top: 36px;
  left: 0;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 10px;
}

.color-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

.color-item.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.form-control {
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #5f6368;
  margin-top: 4px;
}

.section-label {
  font-size: 14px;
  color: #5f6368;
  margin-bottom: 6px;
}

.owner-select {
  position: relative;
}

.owner-select select {
  appearance: none;
}

.owner-select .material-icons {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  pointer-events: none;
}

.info-box {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  color: #202124;
  margin-top: 14px;
}

.info-box .material-icons {
  color: #1a73e8;
  font-size: 20px;
}
.info-box div *,
.info-box div {
  font-size: 13px;
  line-height: 1.5;
}

.modal-footer-custom {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.action-btn {
  font-size: 15px;
  color: #1a73e8;
  cursor: pointer;
  font-weight: 500;
}

.action-btn:hover {
  text-decoration: underline;
}

.daterangepicker .applyBtn {
  color: #fff;
  background: #000;
}
.daterangepicker .applyBtn:hover {
  background: #000;
}
/* location css */

.locations-page {
  background: var(--bg-gray);
}

/* Summary Cards Styles */
#locationSummaryCards .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 8px;
}

#locationSummaryCards .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#locationSummaryCards .card-body {
  padding: 16px;
}

#locationSummaryCards h5 {
  font-size: 20px;
  color: var(--color-first);
}

#locationSummaryCards .text-muted {
  font-size: 13px;
  color: #5f6368;
}

/* Add Location Button */
#addLocationBtn {
  transition: background-color 0.2s ease;
}

#addLocationBtn:hover {
  background: #1557b0 !important;
}

/* Add Location Modal Styles */
#addLocationModal .modal-content {
  border-radius: 8px;
}

#addLocationModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 4px;
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f4;
  transition: background-color 0.15s ease;
}

.autocomplete-item:hover {
  background-color: #f8f9fa;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item .location-name {
  font-weight: 500;
  color: #202124;
  margin-bottom: 4px;
}

.autocomplete-item .location-type {
  font-size: 12px;
  color: #5f6368;
}

#selectedLocationPreview {
  transition: all 0.2s ease;
}

#saveLocationBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kw-tabs {
  display: flex;
  gap: 10px;
}

.kw-tab {
  border: none;
  background: transparent;
  padding: 10px 6px;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.kw-tab.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
}

.locations-page .quick-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.locations-page .pill-btn {
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
  color: var(--color-first);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.locations-page .pill-btn.active {
  border-color: var(--color-third);
  color: var(--color-third);
  background: var(--color-active);
}

.locations-page .pill-btn:hover {
  background: var(--color-hover);
}

.locations-page .date-range-trigger {
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
}

.locations-page .date-range-trigger .label {
  font-weight: 600;
}

.locations-page .select {
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--color-white);
  color: var(--color-first);
  cursor: pointer;
  min-width: 180px;
}

.locations-page .location-toolbar {
  border: 1px solid var(--bg-gray2);
}

.locations-page .action-btn,
.locations-page .export-btn,
.locations-page .bid-btn {
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
  padding: 0 10px !important;
  align-items: center !important;
  cursor: pointer;
  font-size: 12px !important;
  line-height: 1.5 !important;
  gap: 4px !important;
  font-weight: 600 !important;
  color: gray !important;
}

.locations-page .action-btn svg,
.locations-page .export-btn svg,
.locations-page .bid-btn svg {
  color: #6c757d !important;
}

.locations-page
  .action-btn
  span:not(.material-icons):not(.material-symbols-outlined),
.locations-page
  .export-btn
  span:not(.material-icons):not(.material-symbols-outlined),
.locations-page
  .bid-btn
  span:not(.material-icons):not(.material-symbols-outlined) {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: gray !important;
}

.locations-page .action-btn .material-icons,
.locations-page .action-btn .material-symbols-outlined,
.locations-page .export-btn .material-icons,
.locations-page .export-btn .material-symbols-outlined {
  color: #6c757d !important;
  font-size: 18px !important;
}

.locations-page .export-btn {
  font-weight: 600;
}

.locations-page .bid-btn {
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
}

.locations-page .table-total-row {
  background: var(--bg-light-gray);
  font-weight: 600;
}

.locations-page .row-selected {
  background: var(--color-active) !important;
}

.locations-page .date-popover {
  position: fixed;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px;
  width: 260px;
  z-index: 30;
}

.locations-page .date-popover .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.locations-page .date-popover input[type="date"] {
  width: 100%;
  border: 1px solid var(--bg-gray2);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--color-white);
  color: var(--color-first);
}

/* ---- TABLE BORDERS: Add borders to all sides of th and td, not hide any border ---- */

.locations-page .table-shell {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  background: #f8f9fa;
  padding: 0;
  border-radius: 0;
}

.locations-page .table-sticky {
  min-width: 1400px;
  width: 100%;
  table-layout: auto;
  background: var(--color-white);
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  position: relative;
}

.locations-page .table-sticky thead th,
.locations-page .table-sticky tbody td {
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  padding: 6px 10px;
  line-height: 20px;
  vertical-align: middle;
  background: var(--color-white);
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}

.locations-page .table-sticky thead th *,
.locations-page .table-sticky tbody td * {
  white-space: nowrap !important;
}

.locations-page .table-sticky thead th a,
.locations-page .table-sticky tbody td a,
.locations-page .table-sticky thead th span,
.locations-page .table-sticky tbody td span {
  white-space: nowrap !important;
}

.locations-page .table-sticky thead th {
  background: var(--color-white);
  font-size: 14px;
  color: #202124;
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  padding: 6px 10px;
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}

.locations-page .table-sticky thead th:last-child,
.locations-page .table-sticky tbody td:last-child {
  border-right: 1px solid var(--bg-gray2) !important;
}

.locations-page .table-sticky tbody tr:hover {
  background: #f8f9fa;
}

.locations-page .info-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5f6368;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}

.locations-page .chevron-icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 14px;
  vertical-align: middle;
}

.locations-page th.sortable {
  user-select: none;
  cursor: pointer;
}

.locations-page th.sortable:hover {
  background: var(--color-hover);
}

.locations-page .sort-icon {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
  display: inline-block;
  min-width: 12px;
  line-height: 1;
  vertical-align: middle;
  color: #5f6368;
}

.locations-page th.sortable:hover .sort-icon {
  opacity: 0.8;
}

.locations-page .sort-icon.active {
  color: #5f6368;
  opacity: 1;
  font-weight: 600;
}

.locations-page .kw-table {
  background: var(--color-white);
  overflow: hidden;
}

.locations-page .kw-table-wrapper {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  background: #f8f9fa;
  padding: 0;
  border-radius: 0;
}

.locations-page .kw-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.locations-page .kw-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

.locations-page .kw-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
  border-radius: 4px;
}

.locations-page .kw-table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  flex-wrap: wrap;
  background: var(--color-white);
}

.locations-page .kw-table-controls .icon-group {
  display: flex;
  gap: 0;
  margin-left: auto;
}

.locations-page .kw-icon-btn {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 2px;
  background: transparent;
  padding: 0 10px;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  gap: 4px;
  font-weight: 500;
  color: gray;
}

.locations-page .kw-icon-btn svg,
.locations-page .kw-icon-btn path,
.locations-page .kw-icon-btn rect,
.locations-page .kw-icon-btn line,
.locations-page .kw-icon-btn polygon,
.locations-page .kw-icon-btn circle,
.locations-page .kw-icon-btn ellipse,
.locations-page .kw-icon-btn polyline,
.locations-page .kw-icon-btn text {
  color: gray;
}

.locations-page .kw-icon-btn span {
  font-size: 12px;
  font-weight: 500;
  color: gray;
}

.locations-page .kw-flyout {
  position: absolute;
  top: 44px;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 25;
  overflow: visible; /* ADDED: Allows submenu to show outside menu bounds */
  min-width: 190px; /* ADDED: Ensures minimum menu width */
  isolation: isolate; /* ADDED: Prevents submenu from affecting main menu */
}

.locations-page #kwMoreMenu {
  left: auto;
}

.locations-page .kw-flyout.visible {
  display: block;
}

.locations-page .kw-flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.locations-page .kw-flyout li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-first);
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.locations-page .kw-flyout li:hover {
  background: var(--bg-gray);
}

.locations-page .kw-flyout li .kw-chevron {
  font-size: 14px;
  color: var(--color-dark);
}

/* .locations-page .kw-flyout .kw-submenu {
  position: absolute;
  top: 0;
  right: -12px;
  transform: translate(100%, 0);
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 30;
} */
.locations-page .kw-flyout .kw-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 12px); /* CHANGED: Was left: 100% + margin-left, now uses calc for 12px gap */
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 35;
  list-style: none; /* ADDED: Removes default list styling */
  pointer-events: auto; /* ADDED: Ensures submenu is clickable */
  isolation: isolate; /* ADDED: Prevents affecting parent menu */
}
/* NEW: Left positioning class for responsive behavior */
.locations-page .kw-flyout .kw-submenu.submenu-left {
  left: auto;
  right: calc(100% + 12px); /* Positions submenu to left with 12px gap */
}
/* Changed: Added hover and click support for submenu display */
.locations-page .kw-flyout li.has-submenu:hover > .kw-submenu,
.locations-page .kw-flyout li.has-submenu.submenu-open > .kw-submenu {
  display: block; /* Shows submenu on hover or when submenu-open class is present */
}
/* Changed: Added submenu item styling */
.locations-page .kw-flyout .kw-submenu li {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 400;
  color: var(--color-first);
  transition: background-color 0.12s ease;
  white-space: nowrap; /* ADDED: Prevents text wrapping */
  display: block; /* ADDED: Ensures proper block display */
}
.locations-page .kw-flyout li:hover > .kw-submenu {
  display: block;
}

.locations-page .kw-flyout-header {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bg-gray2);
}

.locations-page .kw-flyout li.has-submenu {
  position: relative; /* ADDED: Required for submenu absolute positioning */
}
.locations-page .kw-flyout li.has-submenu:hover,
.locations-page .kw-flyout li.has-submenu.submenu-open {
  background: var(--bg-gray);
}
.locations-page .kw-flyout li.active {
  background: #e8f0fe;
  color: #1a73e8;
}

.locations-page .kw-flyout li.active:hover {
  background: #e8f0fe;
}

.locations-page .filter-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.locations-page .filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-third);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.locations-page .active-filters-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.locations-page .table-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--bg-gray2);
  font-size: 14px;
  color: var(--color-dark);
  background: var(--color-white);
}

.locations-page .selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-first);
  color: var(--color-white) !important;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 30;
}

.locations-page .selection-bar .selection-count {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-white) !important;
}

.locations-page .selection-bar .selection-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-black);
  border-radius: 8px;
  background: transparent;
  color: var(--color-white) !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.locations-page .selection-bar .selection-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

.locations-page .selection-bar .selection-close {
  border: none;
  background: transparent;
  color: var(--color-white);
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.locations-page .header-dashed {
  border-bottom: 1px dashed var(--bg-gray2) !important;
  border-right: 1px solid var(--bg-gray2) !important;
  padding-bottom: 2px;
}

/* Sticky column styles for first and second column ONLY */
.locations-page .table-sticky th.sticky-col-1,
.locations-page .table-sticky td.sticky-col-1 {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--color-white);
}

.locations-page .table-sticky th.sticky-col-2,
.locations-page .table-sticky td.sticky-col-2 {
  position: sticky;
  left: 40px;
  z-index: 9;
  background: var(--color-white);
}

.locations-page .table-sticky th.sticky-col-3,
.locations-page .table-sticky td.sticky-col-3 {
  position: sticky;
  left: 70px;
  z-index: 8;
  background: var(--color-white);
  min-width: 160px;
}

/* Raise z-index for header cells */
.locations-page .table-sticky th.sticky-col-1 {
  z-index: 11 !important;
}

.locations-page .table-sticky th.sticky-col-2 {
  z-index: 10 !important;
}

.locations-page .table-sticky tbody td.sticky-col-1 {
  z-index: 11;
  background: var(--color-white);
}

.locations-page .table-sticky tbody td.sticky-col-2 {
  z-index: 10;
  background: var(--color-white);
}

.locations-page .table-sticky tbody td.sticky-col-3 {
  z-index: 9;
  background: var(--color-white);
}

/* Remove sticky-col base style for sticky-col-3 in case applied */
.locations-page .table-sticky th.sticky-col-3.sticky-col,
.locations-page .table-sticky td.sticky-col-3.sticky-col {
  position: static !important;
  left: auto !important;
  z-index: 1 !important;
}

/* Remove border-right only from sticky-col-1 (checkbox column) */
.locations-page .table-sticky th.sticky-col-1,
.locations-page .table-sticky td.sticky-col-1 {
  border-right: none;
}

/* Material Design Pagination Styles (only core for pagination look) */
.mdc-data-table__pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--bg-gray2);
  background: var(--color-white);
}

.mdc-data-table__pagination-trailing {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mdc-data-table__pagination-rows-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdc-data-table__pagination-rows-per-page-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  white-space: nowrap;
}

.mdc-select-wrapper {
  position: relative;
}

.mdc-data-table__pagination-rows-per-page-select {
  min-width: 80px;
  height: 40px;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  background: var(--color-white);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6368' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
}

.mdc-data-table__pagination-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdc-data-table__pagination-total {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  margin-right: 8px;
  white-space: nowrap;
}

.mdc-data-table__pagination-button {
  width: 40px;
  height: 40px;
  padding: 8px;
  color: rgba(0, 0, 0, 0.54);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.mdc-data-table__pagination-button:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04);
}

.mdc-data-table__pagination-button:disabled {
  color: rgba(0, 0, 0, 0.26);
  cursor: not-allowed;
}

/* Fullscreen table styles */
.locations-page.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--color-white);
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.locations-page.fullscreen-mode .container-fluid {
  max-width: 100%;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.locations-page.fullscreen-mode .location-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.locations-page.fullscreen-mode .table-shell {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.locations-page.fullscreen-mode .table-sticky {
  width: 100%;
}

.locations-page.fullscreen-mode .location-toolbar {
  flex-shrink: 0;
}

body.no-scroll {
  overflow: hidden;
}

/* Filter Menu Styles - matching keywords.php */
.location-toolbar .active-filters-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.kw-filter-menu {
  position: absolute;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  padding: 10px 0;
  min-width: 280px;
  top: 48px;
  left: 54px;
  z-index: 11;
  display: none;
}

.location-toolbar .add-filter-btn,
.location-table-actions .add-filter-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 600;
  transition: color 0.15s ease;
  padding: 0;
  box-shadow: none !important;
}

.location-toolbar .add-filter-btn:hover,
.location-table-actions .add-filter-btn:hover {
  color: var(--color-third);
  background: transparent !important;
}

#locAddFilterMenu .filter-item {
  transition: background-color 0.15s ease;
  color: var(--color-dark);
  font-size: 14px;
}

#locAddFilterMenu .filter-item:hover {
  background-color: var(--bg-gray);
}

#locAddFilterMenu .filter-recent {
  transition: background-color 0.15s ease;
}

#locAddFilterMenu .filter-recent:hover {
  background-color: var(--color-hover) !important;
}

#locAddFilterMenu {
  top: 44px;
  left: 0;
}

.kw-filter-menu.visible {
  display: block;
}

.status-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
}

.active-filter-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.active-filter-pill:hover {
  background: var(--bg-gray);
}

/* Columns Modal Styles */
.columns-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.columns-modal-container {
  /* background: #fff; */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-panel-inline {
  position: static;
  /* background: transparent; */
  display: none;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}

.columns-panel-inline .columns-modal-container {
  max-width: 100%;
  max-height: none;
  height: auto;
  box-shadow: none;
  border: 1px solid #e0e0e0;
}

[data-theme="dark"] .columns-panel-inline {
  background: var(--color-white);
}

[data-theme="light"] .columns-panel-inline {
  background: #fff;
}

.columns-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
}

.columns-modal-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.columns-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #5f6368;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.columns-modal-close:hover {
  background: #f1f3f4;
}

.columns-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}

.columns-panel-inline .columns-modal-body {
  height: auto;
  min-height: 0;
}

.columns-modal-left {
  width: 50%;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-search-wrapper {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.columns-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.columns-search-input:focus {
  border-color: #1a73e8;
}

.columns-search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  font-size: 20px;
  pointer-events: none;
}

.columns-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.columns-category {
  border-bottom: 1px solid #f1f3f4;
}

.columns-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.columns-category-title {
  font-size: 14px;
  font-weight: 500;
}

.columns-category-chevron {
  color: #5f6368;
  font-size: 18px;
  transition: transform 0.2s;
}

.columns-category.expanded .columns-category-chevron {
  transform: rotate(90deg);
}

.columns-category-items {
  padding: 8px 0;
}

.columns-category-item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 40px;
  cursor: pointer;
  transition: background 0.2s;
}

/* .columns-category-item:hover {
    background: #f8f9fa;
} */

.column-select-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid #dadce0;
  border-radius: 3px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.column-select-indicator.selected {
  background: #1a73e8;
  border-color: #1a73e8;
}

.column-select-indicator.selected::after {
  content: "−";
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.column-name {
  font-size: 14px;
  position: relative;
}

.columns-category-item .column-name::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px dashed #dadce0;
}

.columns-modal-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-your-columns-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  padding: 20px 24px 8px;
}

.columns-drag-instruction {
  font-size: 13px;
  color: #5f6368;
  margin: 0 0 12px;
  padding: 0 24px;
}

.columns-your-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.columns-your-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background 0.2s;
  cursor: move;
}

.columns-your-item.locked {
  cursor: default;
}

.columns-your-item.dragging {
  opacity: 0.5;
}

.columns-lock-icon,
.columns-drag-icon,
.columns-remove-icon {
  font-size: 18px;
  color: #5f6368;
  margin-right: 12px;
  flex-shrink: 0;
}

.columns-remove-icon {
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.columns-remove-icon:hover {
  background: #e8eaed;
  color: #202124;
}

.columns-your-item .column-name {
  flex: 1;
}

.columns-your-item .column-note {
  display: block;
  color: #5f6368;
  font-size: 12px;
  margin-left: 28px;
  line-height: 1.3;
}

.columns-your-item .column-name::after {
  display: none;
}

.columns-modal-footer {
  border-top: 1px solid #e0e0e0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.columns-footer-left,
.columns-footer-right {
  display: flex;
  align-items: center;
}

.columns-save-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
}

.columns-save-checkbox input {
  margin-right: 8px;
}

.columns-toggle-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.columns-toggle-switch input {
  display: none;
}

.columns-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  margin-right: 12px;
  transition: background 0.3s;
}

.columns-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.columns-toggle-switch input:checked + .columns-toggle-slider {
  background: #1a73e8;
}

.columns-toggle-switch input:checked + .columns-toggle-slider::before {
  transform: translateX(20px);
}

.columns-toggle-label {
  font-size: 14px;
  color: #202124;
}

.columns-footer-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.columns-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.columns-btn-apply {
  background: #1a73e8;
  color: white;
}

.columns-btn-apply:hover {
  background: #1557b0;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
}

.columns-btn-cancel {
  background: white;
  color: #1a73e8;
  border: 1px solid #dadce0;
}

.columns-btn-cancel:hover {
  background: #f8f9fa;
}

/* Segment Dropdown Styles */
.segment-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-white);
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  min-width: 240px;
  z-index: 1050;
  overflow: hidden;
}

.segment-dropdown-header {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark);
  border-bottom: 1px solid #e8eaed;
  background: var(--color-white);
}

.segment-menu-item {
  position: relative;
  padding: 10px 16px;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.15s ease;
}

.segment-menu-item:hover {
  background: #e8f0fe;
}

.segment-menu-item.active {
  background: #e8f0fe;
  color: var(--color-third);
}

.segment-menu-item.has-submenu {
  padding-right: 12px;
}

.segment-arrow {
  font-size: 18px;
  color: #5f6368;
  margin-left: auto;
  font-weight: normal;
}

.segment-submenu {
  position: absolute;
  left: calc(100% + 4px);
  top: 0;
  background: var(--color-white);
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 1051;
  display: none;
}

.segment-menu-item.has-submenu:hover .segment-submenu {
  display: block;
}

.segment-submenu-item {
  padding: 10px 16px;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.segment-submenu-item:first-child {
  color: rgba(32, 33, 36, 0.6);
}

.segment-submenu-item.active {
  font-weight: 600;
}

.segment-submenu-item:hover {
  background: #f8f9fa;
}

/* Filter Badge Styles */
.filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #1a73e8;
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
}

/* Active Filter Tags Styles */
.active-filters-container {
  margin-left: 8px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 16px;
  padding: 4px 8px 4px 12px;
  font-size: 13px;
  color: #202124;
  white-space: nowrap;
}

.filter-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  color: #5f6368;
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.15s ease;
}

.filter-tag-remove:hover {
  background: #e8eaed;
  color: #202124;
}

.filter-actions {
  margin-left: auto;
}

.filter-actions button {
  transition: opacity 0.15s ease;
}

.filter-actions button:hover {
  opacity: 0.7;
}

/* Narrow by Modal Styles */
.narrow-by-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.narrow-by-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  max-width: 300px;
  overflow: hidden;
}
[data-theme="dark"] .narrow-by-modal {
  background-color: #202124 !important;
}
.narrow-by-title {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
}

.narrow-by-menu {
  max-height: 400px;
  overflow-y: auto;
}

.narrow-by-item {
  width: 100%;
  border: none;
  padding: 12px 16px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: block;
}


.location-link {
  color: #1a73e8 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.location-link:hover {
  text-decoration: underline !important;
}

/* Campaign Map Styles */
.campaign-map-container {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.campaign-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 15px;
  border-bottom: 1px solid var(--bg-gray2);
  background: var(--color-white);
}

.campaign-map-close:hover {
  background: #f1f3f4;
}

#campaignMap {
  position: relative;
}

.campaign-link {
  color: #1a73e8 !important;
  text-decoration: underline !important;
  cursor: pointer;
}

.campaign-link:hover {
  color: #1557b0 !important;
}

[data-theme="dark"] .design-btn {
  background: #000 !important;
}
/* dashboard */

.dashboards-page {
  background: var(--bg-gray);
  font-family: var(--font-family-primary);
}

.dashboards-page .chip {
  background: var(--color-active);
  color: var(--color-third);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  font-weight: 500;
  font-family: var(--font-family-primary);
}

.dashboards-page .action-btn {
  color: var(--color-third);
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  font-family: var(--font-family-primary);
}

.dashboards-page .action-btn:hover {
  background: var(--color-hover);
  border-color: var(--color-third);
}

.dashboards-page .table-hover tbody tr:hover {
  background: var(--color-hover);
}

.dashboards-page .row-selected {
  background: var(--color-active) !important;
}

.dashboards-page .toolbar {
  border: 1px solid var(--bg-gray2);
  border-radius: 8px;
}

.dashboards-page .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
}

.dashboards-page .placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.dashboards-page .placeholder-tile {
  background: var(--bg-gray1);
  border-radius: 6px;
  height: 120px;
}

.dashboards-page .dashboards-table-wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: var(--color-white);
  width: 100%;
  display: block;
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  width: 100%;
  display: block;
}

.dashboards-page .dashboards-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Scroll indicator for mobile only - hidden on desktop */
.dashboards-page .dashboards-table-wrapper::after,
.dashboards-page .dashboards-table-wrapper::before {
  display: none;
}

@media (max-width: 768px) {
  .dashboards-page .dashboards-table-wrapper::after {
    display: none !important;
  }

  .dashboards-page .dashboards-table-wrapper::before {
    display: none !important;
  }

  /* Hide scroll indicators completely on mobile */
  .dashboards-page .dashboards-table-wrapper.scrollable-right::after {
    display: none !important;
  }

  .dashboards-page .dashboards-table-wrapper.scrollable-left::before {
    display: none !important;
  }
}

/* Selection bar styles */
.dashboards-page .dashboards-selection-bar {
  display: flex;
  align-items: center;
  background: #000000;
}

.dashboards-page .dashboards-remove-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-primary);
  transition: opacity 0.2s;
}

.dashboards-page .dashboards-remove-btn:hover {
  opacity: 0.7;
}

/* Dark mode support - white background, black text */
[data-bs-theme="dark"] .dashboards-page .dashboards-selection-bar {
  background: #ffffff;
}

[data-bs-theme="dark"] .dashboards-page .dashboards-remove-btn {
  color: #000000;
}

.dashboards-page .dashboards-table {
  min-width: 820px;
  border-collapse: collapse;
  font-family: var(--font-family-primary);
  width: 100%;
}

.dashboards-page .dashboards-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-light-gray);
  border-bottom: 1px solid var(--bg-gray2);
  font-weight: 500;
  color: var(--color-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  font-family: var(--font-family-primary);
}

.dashboards-page .dashboards-table th,
.dashboards-page .dashboards-table td {
  border-bottom: 1px solid var(--bg-gray2);
  padding: 12px 16px;
}

.dashboards-page .dashboards-table tbody tr {
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.dashboards-page .dashboards-table tbody tr:hover {
  background: var(--color-hover);
  transform: translateX(2px);
}

.dashboards-page .dashboards-table .row-selected {
  background: var(--color-active);
}

/* Micro-interactions */
.dashboards-page button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboards-page button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboards-page button:active {
  transform: translateY(0);
}

/* Focus states */
.dashboards-page button:focus-visible,
.dashboards-page input:focus-visible,
.dashboards-page select:focus-visible {
  outline: 2px solid var(--color-third);
  outline-offset: 2px;
  border-radius: 4px;
}

.dashboards-page .dash-row-link:focus-visible {
  outline: 2px solid var(--color-third);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Loading states */
.dashboards-page .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 8px;
}

.dashboards-page .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--bg-gray2);
  border-top-color: var(--color-third);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Keyboard shortcut indicator */
/* Keyboard hint styles - REMOVED as per user requirement */
/* .dashboards-page .keyboard-hint {
        // Removed keyboard shortcuts popup styles
    } */

/* Sortable column styles */
.dashboards-page .sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.2s;
}

.dashboards-page .sortable:hover {
  background-color: var(--color-hover);
}

.dashboards-page .sort-icon {
  transition: opacity 0.2s, transform 0.2s;
}

.dashboards-page .sortable.active .sort-icon {
  opacity: 1;
  color: var(--color-third);
}

.dashboards-page .dashboards-table .form-check-input {
  border-color: var(--color-dark);
  cursor: pointer;
}

.dashboards-page .dashboards-table .form-check-input:checked {
  background-color: var(--color-third);
  border-color: var(--color-third);
}

.dashboards-page .dashboards-table a {
  color: var(--color-third);
  text-decoration: none;
  font-weight: 500;
}

.dashboards-page .dashboards-table a:hover {
  text-decoration: underline;
}

@media (max-width: 992px) {
  .dashboards-page .toolbar,
  .dashboards-page .header-title .d-flex {
    gap: 10px;
  }

  .dashboards-page .toolbar .btn,
  .dashboards-page .header-title .icon-btn {
    width: 36px;
    height: 36px;
  }

  #dashboardDetailView .d-flex.flex-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Dashboard Detail View - Tablet */
  #dashboardDetailView {
    padding: 16px !important;
  }

  #dashboardDetailView .dashboard-header-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  #dashboardDetailView .dashboard-header-actions {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  #dashboardDetailView .dashboard-header-actions::-webkit-scrollbar {
    height: 2px;
  }

  #dashboardDetailView .dashboard-action-item {
    flex-shrink: 0;
    padding: 3px 6px !important;
  }

  #dashboardDetailView .dashboard-action-item .material-icons {
    font-size: 18px !important;
  }

  #dashboardDetailView .dashboard-action-item span:last-child {
    font-size: 10px !important;
  }

  #dashboardDetailView .dashboard-action-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px !important;
    padding: 4px 10px !important;
  }

  #dashboardDetailView .dashboard-title {
    font-size: 22px !important;
  }

  #dashboardDetailView .dashboard-control-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #dashboardDetailView .dashboard-control-bar > div {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  #dashboardDetailView .dashboard-account-selector,
  #dashboardDetailView .dashboard-date-range {
    min-width: 150px;
    flex: 1 1 auto;
  }

  /* Campaign details row responsive */
  .campaign-details-row .d-flex {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  .campaign-details-row .vr {
    display: none;
  }

  .campaign-details-row .ms-auto {
    margin-left: 0 !important;
    margin-top: 8px;
    width: 100%;
  }

  /* Table responsive */
  .dashboards-page .dashboards-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
    position: relative;
    scroll-behavior: smooth;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar {
    height: 6px;
  }

  .dashboards-page .dashboards-table {
    min-width: 700px;
  }

  .dashboards-page .dashboards-table thead th,
  .dashboards-page .dashboards-table tbody td {
    padding: 10px 12px !important;
    font-size: 13px;
  }

  .dashboards-page .dashboards-table thead th {
    font-size: 11px;
  }

  /* Button container responsive */
  .button-rep-container {
    flex-direction: column;
    align-items: stretch !important;
  }

  .button-rep-left,
  .button-rep-right {
    width: 100%;
    justify-content: flex-start;
  }

  .button-rep-item {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  /* Campaign details row mobile */
  .campaign-details-row {
    padding: 14px 12px !important;
    margin-bottom: 12px !important;
  }

  .campaign-details-row .d-flex {
    flex-wrap: wrap;
    gap: 8px 12px !important;
    align-items: center !important;
    font-size: 13px !important;
  }

  .campaign-details-row .d-flex > div,
  .campaign-details-row .d-flex > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 13px !important;
  }

  .campaign-details-row .d-flex .status-indicator {
    width: 7px !important;
    height: 7px !important;
    flex-shrink: 0;
  }

  .campaign-details-row .vr {
    display: none;
  }

  .campaign-details-row .ms-auto {
    margin-left: 0 !important;
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .campaign-details-row .ms-auto button {
    flex: 0 0 auto;
    padding: 6px 10px !important;
    font-size: 13px !important;
    min-width: auto;
  }

  /* Table mobile */
  .dashboards-page .dashboards-table-wrapper {
    border-radius: 4px;
    margin: 0 -12px !important;
    width: calc(100% + 24px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    position: relative;
    touch-action: pan-x;
    display: block !important;
    max-width: 100vw;
  }

  /* Hide table when d-none class is present on mobile */
  .dashboards-page .dashboards-table-wrapper.d-none,
  .dashboards-page #dashboardListView.d-none {
    display: none !important;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar {
    height: 8px;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
  }

  .dashboards-page .dashboards-table {
    min-width: 600px;
    font-size: 13px;
    width: 100%;
  }

  .dashboards-page .dashboards-table thead {
    display: table-header-group !important;
  }

  .dashboards-page .dashboards-table thead tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table thead th {
    display: table-cell !important;
    font-size: 10px;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .dashboards-page .dashboards-table tbody tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table tbody td {
    display: table-cell !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    padding: 8px 10px !important;
    font-size: 12px;
  }

  /* DataTable info and pagination at bottom on mobile */
  .dashboards-page .dashboards-table-wrapper .dataTables_wrapper {
    display: flex;
    flex-direction: column;
  }

  .dashboards-page .dashboards-table-wrapper .dataTables_wrapper > div:last-child {
    order: 2;
    margin-top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 12px;
  }

  .dashboards-page .dashboards-table-wrapper .dataTables_info {
    text-align: center;
    width: 100%;
    font-size: 13px;
    color: var(--color-dark);
    margin: 0;
    padding: 0;
  }

  .dashboards-page .dashboards-table-wrapper .dataTables_paginate {
    display: none !important;
  }

  /* Modal responsive */
  .modal-dialog {
    margin: 10px;
  }

  .modal-content {
    border-radius: 8px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px !important;
  }

  /* Dashboard Detail View - Mobile */
  #dashboardDetailView {
    padding: 12px !important;
    margin-bottom: 16px !important;
  }

  #dashboardDetailView .dashboard-header-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  #dashboardDetailView .dashboard-title {
    font-size: 20px !important;
    line-height: 1.3;
  }

  #dashboardDetailView .dashboard-info-icon {
    font-size: 16px !important;
  }

  #dashboardDetailView .dashboard-header-actions {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  #dashboardDetailView .dashboard-header-actions::-webkit-scrollbar {
    height: 2px;
  }

  #dashboardDetailView .dashboard-action-item {
    flex-shrink: 0;
    padding: 4px 6px !important;
  }

  #dashboardDetailView .dashboard-action-item .material-icons {
    font-size: 16px !important;
  }

  #dashboardDetailView .dashboard-action-item span:last-child {
    font-size: 9px !important;
  }

  #dashboardDetailView .dashboard-action-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  #dashboardDetailView .dashboard-separator {
    margin-bottom: 12px !important;
  }

  #dashboardDetailView .dashboard-control-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  #dashboardDetailView .dashboard-control-bar > div {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  #dashboardDetailView .dashboard-control-bar > div:first-child {
    justify-content: flex-start;
  }

  #dashboardDetailView .dashboard-control-bar > div:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #dashboardDetailView .dashboard-control-btn {
    width: 32px !important;
    height: 32px !important;
  }

  #dashboardDetailView .dashboard-control-btn .material-icons {
    font-size: 18px !important;
  }

  #dashboardDetailView .dashboard-account-selector,
  #dashboardDetailView .dashboard-date-range {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 100%;
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  #dashboardDetailView .dashboard-date-range {
    flex: 1 1 180px;
  }

  #dashboardDetailView .dashboard-account-selector .material-icons,
  #dashboardDetailView .dashboard-date-range .material-icons {
    font-size: 16px !important;
  }

  #dashboardDetailView .dashboard-nav-btn {
    width: 32px !important;
    height: 32px !important;
  }

  #dashboardDetailView .dashboard-nav-btn .material-icons {
    font-size: 16px !important;
  }

  #dashboardDetailView .dashboard-filter-btn {
    padding: 4px 6px !important;
  }

  #dashboardDetailView .dashboard-filter-btn svg {
    width: 16px;
    height: 16px;
  }

  #dashboardDetailView .dashboard-filter-btn span {
    font-size: 10px !important;
  }

  #dashboardDetailView #quick-range-label-dashboard {
    font-size: 11px !important;
  }

  #dashboardDetailView #date-range-label-dashboard {
    font-size: 13px !important;
  }

  #dashboardDetailView .download-dropdown-menu {
    right: auto !important;
    left: 0 !important;
    min-width: 180px;
  }

  /* Charts row mobile */
  #dashboardDetailView .row {
    margin: 0;
  }

  #dashboardDetailView .col-lg-6,
  #dashboardDetailView .col-lg-4 {
    padding: 0;
    margin-bottom: 12px;
  }

  /* Campaign settings drawer mobile */
  .campaign-settings-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .campaign-settings-header,
  .campaign-settings-content,
  .campaign-settings-footer {
    padding: 16px !important;
  }
}

@media (max-width: 576px) {
  .dashboards-page .chip {
    width: 100%;
  }

  .dashboards-page .account-chip {
    width: 100%;
    justify-content: space-between;
  }

  .dashboards-page .toolbar {
    flex-wrap: wrap;
  }

  #dashboardDetailView .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Dashboard Detail View - Small Mobile */
  #dashboardDetailView {
    padding: 10px !important;
  }

  #dashboardDetailView .dashboard-header-top {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  #dashboardDetailView .dashboard-title {
    font-size: 18px !important;
  }

  #dashboardDetailView .dashboard-info-icon {
    font-size: 14px !important;
  }

  #dashboardDetailView .dashboard-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #dashboardDetailView .dashboard-action-item {
    padding: 3px 5px !important;
  }

  #dashboardDetailView .dashboard-action-item .material-icons {
    font-size: 14px !important;
  }

  #dashboardDetailView .dashboard-action-item span:last-child {
    font-size: 8px !important;
  }

  #dashboardDetailView .dashboard-action-link {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }

  #dashboardDetailView .dashboard-control-bar {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  #dashboardDetailView .dashboard-control-bar > div {
    gap: 5px !important;
  }

  #dashboardDetailView .dashboard-control-btn {
    width: 30px !important;
    height: 30px !important;
  }

  #dashboardDetailView .dashboard-control-btn .material-icons {
    font-size: 16px !important;
  }

  #dashboardDetailView .dashboard-account-selector,
  #dashboardDetailView .dashboard-date-range {
    min-width: 120px;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  #dashboardDetailView .dashboard-account-selector span,
  #dashboardDetailView .dashboard-date-range span {
    font-size: 12px !important;
  }

  #dashboardDetailView .dashboard-account-selector .material-icons,
  #dashboardDetailView .dashboard-date-range .material-icons {
    font-size: 14px !important;
  }

  #dashboardDetailView .dashboard-nav-btn {
    width: 30px !important;
    height: 30px !important;
  }

  #dashboardDetailView .dashboard-nav-btn .material-icons {
    font-size: 14px !important;
  }

  #dashboardDetailView .dashboard-filter-btn {
    padding: 3px 5px !important;
  }

  #dashboardDetailView .dashboard-filter-btn svg {
    width: 14px;
    height: 14px;
  }

  #dashboardDetailView .dashboard-filter-btn span {
    font-size: 9px !important;
  }

  #dashboardDetailView #quick-range-label-dashboard {
    font-size: 10px !important;
  }

  #dashboardDetailView #date-range-label-dashboard {
    font-size: 12px !important;
  }

  /* Header mobile */
  .dashboards-section h4 {
    font-size: 20px !important;
  }

  .dashboards-section .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #addDashboardBtn {
    align-self: flex-end;
  }

  /* Button container mobile */
  .button-rep-container {
    gap: 8px;
  }

  .button-rep-item {
    font-size: 12px;
    padding: 6px 12px;
  }

  .button-rep-title {
    font-size: 18px !important;
  }

  /* Table mobile small */
  .dashboards-page .dashboards-table-wrapper {
    margin: 0 -8px !important;
    width: calc(100% + 16px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    display: block !important;
    max-width: 100vw;
  }

  /* Hide table when d-none class is present on small mobile */
  .dashboards-page .dashboards-table-wrapper.d-none,
  .dashboards-page #dashboardListView.d-none {
    display: none !important;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar {
    height: 10px;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
  }

  .dashboards-page .dashboards-table {
    min-width: 550px;
    font-size: 12px;
    width: 100%;
  }

  .dashboards-page .dashboards-table thead {
    display: table-header-group !important;
  }

  .dashboards-page .dashboards-table thead tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table thead th {
    display: table-cell !important;
    font-size: 9px;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .dashboards-page .dashboards-table tbody tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table tbody td {
    display: table-cell !important;
    padding: 6px 8px !important;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Campaign details row small mobile */
  .campaign-details-row {
    padding: 12px 10px !important;
  }

  .campaign-details-row .d-flex {
    font-size: 12px !important;
    gap: 6px 10px !important;
  }

  .campaign-details-row .d-flex > div,
  .campaign-details-row .d-flex > span {
    font-size: 12px !important;
  }

  .campaign-details-row .ms-auto {
    margin-top: 8px;
  }

  .campaign-details-row .ms-auto button {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  .campaign-details-row .ms-auto .d-none.d-md-inline {
    display: none !important;
  }

  /* Modal small mobile */
  .modal-dialog {
    margin: 5px;
  }

  .modal-header h5 {
    font-size: 18px !important;
  }

  .modal-body {
    padding: 16px 12px !important;
  }

  .modal-footer {
    padding: 12px !important;
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .webContent {
    padding: 8px 4px !important;
  }

  .dashboards-page .dashboards-table-wrapper {
    margin: 0 -4px !important;
    width: calc(100% + 8px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    display: block !important;
    max-width: 100vw;
  }

  /* Hide scroll indicators on mobile */
  .dashboards-page .dashboards-table-wrapper::after,
  .dashboards-page .dashboards-table-wrapper::before {
    display: none !important;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar {
    height: 12px;
  }

  .dashboards-page .dashboards-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
  }

  .dashboards-page .dashboards-table {
    min-width: 500px;
    font-size: 11px;
    width: 100%;
  }

  .dashboards-page .dashboards-table thead {
    display: table-header-group !important;
  }

  .dashboards-page .dashboards-table thead tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table thead th {
    display: table-cell !important;
    font-size: 8px;
    padding: 5px 6px !important;
    white-space: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .dashboards-page .dashboards-table tbody tr {
    display: table-row !important;
  }

  .dashboards-page .dashboards-table tbody td {
    display: table-cell !important;
    padding: 5px 6px !important;
    font-size: 10px;
    white-space: nowrap;
  }

  /* DataTable info at bottom on mobile */
  .dashboards-page .dashboards-table-wrapper .dataTables_wrapper > div:last-child {
    order: 2;
    margin-top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 12px;
  }

  .dashboards-page .dashboards-table-wrapper .dataTables_info {
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: var(--color-dark);
    margin: 0;
    padding: 0;
  }

  .dashboards-page .dashboards-table-wrapper .dataTables_paginate {
    display: none !important;
  }

  .campaign-details-row {
    padding: 10px 8px !important;
  }

  .campaign-details-row .d-flex {
    font-size: 11px !important;
    gap: 5px 8px !important;
  }

  .campaign-details-row .d-flex > div,
  .campaign-details-row .d-flex > span {
    font-size: 11px !important;
  }

  .campaign-details-row .d-flex .status-indicator {
    width: 6px !important;
    height: 6px !important;
  }

  .campaign-details-row .ms-auto button {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }

  .button-rep-item {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* extra css */
.button-rep-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

/* left group */
.button-rep-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* right group (buttons) */
.button-rep-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Desktop → Move right group to the right side */
@media (min-width: 992px) {
  .button-rep-container {
    justify-content: end;
  }
}

.button-rep-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--color-white);
  border-radius: 4px;
  border: 1px solid var(--bg-gray2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-dark);
  transition: all 0.2s;
  font-family: var(--font-family-primary);
}

.button-rep-item:hover:not(:disabled) {
  background: var(--color-hover);
  border-color: var(--color-third);
  color: var(--color-third);
}

.button-rep-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-hover);
  color: var(--color-dark);
}

.button-rep-title {
  font-size: 20px;
  font-weight: 500;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--color-first);
  cursor: default;
  font-family: var(--font-family-secondary);
}

.button-rep-title:hover {
  background: none !important;
  border: none !important;
  color: var(--color-first) !important;
}

.edit-icon {
  cursor: pointer;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--color-dark);
}

.edit-icon:hover {
  color: var(--color-third);
}

.btn-cancel {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  color: var(--color-dark);
}

.btn-cancel:hover {
  background: var(--color-hover);
  border-color: var(--color-third);
  color: var(--color-third);
}

.btn-save {
  background: var(--color-third);
  border-color: var(--color-third);
  color: var(--color-white);
}

.btn-save:hover {
  background: var(--color-third);
  border-color: var(--color-third);
  opacity: 0.9;
  box-shadow: var(--shadow);
}

.btn-saveas {
  background: var(--color-active);
  border-color: var(--color-third);
  color: var(--color-third);
}

.btn-saveas:hover {
  background: var(--color-active);
  border-color: var(--color-third);
  opacity: 0.9;
}

@media (max-width: 576px) {
  .button-rep-item {
    font-size: 13px;
    padding: 5px 10px;
  }
  .columns-modal-body .columns-modal-left .columns-search-wrapper{
    display: block !important;
  }
  .keywords-page .kw-table .icon-group .dropdown-menu {
    z-index: 99999;
  }
}

/* New Dashboard Header Styles (Image 2 Style) */
.dashboard-header-top {
  padding: 0;
}

.dashboard-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-first);
  font-family: var(--font-family-secondary);
  margin: 0;
  padding: 0;
}

.dashboard-info-icon,
.dashboard-edit-icon {
  transition: all 0.2s;
}

.dashboard-info-icon:hover,
.dashboard-edit-icon:hover {
  opacity: 1 !important;
  color: var(--color-third) !important;
}

.dashboard-header-actions {
  flex-wrap: wrap;
}

.dashboard-action-item {
  transition: all 0.2s;
  border-radius: 4px;
}

.dashboard-action-item:hover {
  background: var(--color-hover);
  color: var(--color-third) !important;
}

.dashboard-action-link {
  transition: all 0.2s;
  border-radius: 4px;
  border: none !important;
  color: var(--color-dark) !important;
  background: transparent !important;
  flex-direction: row;
  font-size: 14px;
  padding: 6px 12px;
}

.dashboard-action-link:hover {
  opacity: 0.8;
  background: transparent;
}

/* Download Dropdown Styles */
.dashboard-download-dropdown {
  position: relative;
}

.download-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  padding: 8px 0;
  margin-top: 4px;
  z-index: 1000;
  display: none;
}

.download-dropdown-menu.show {
  display: block;
}

.download-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--color-first);
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font-family);
  text-decoration: none;
}

.download-dropdown-item:hover {
  background: var(--color-hover);
}

.download-dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.download-dropdown-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Dark Theme Support for Download Dropdown */
html[data-bs-theme="dark"] .download-dropdown-menu {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .download-dropdown-item {
  color: var(--color-first);
}

html[data-bs-theme="dark"] .download-dropdown-item:hover {
  background: var(--color-hover);
}

/* Responsive Styles for Download Dropdown */
@media (max-width: 768px) {
  .download-dropdown-menu {
    right: auto;
    left: 0;
    min-width: 160px;
  }
}

@media (max-width: 576px) {
  .download-dropdown-menu {
    min-width: 140px;
  }

  .download-dropdown-item {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Schedule Modal Styles */
.schedule-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

.schedule-modal.show {
  display: flex;
  pointer-events: auto;
}

.schedule-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.schedule-modal-content {
  position: relative;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 540px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.schedule-modal-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--color-first);
  margin: 0;
  padding: 24px 24px 20px;
  flex-shrink: 0;
  letter-spacing: 0;
}

.schedule-modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.schedule-time-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-frequency-time-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.schedule-frequency-group,
.schedule-time-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.schedule-frequency-group {
  min-width: 140px;
}

.schedule-time-group {
  min-width: 140px;
}

.schedule-time-group .schedule-label {
  opacity: 0;
  height: 20px;
  pointer-events: none;
}

.schedule-timezone {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 0;
}

.schedule-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 20px;
  margin-bottom: 0;
}

.schedule-select {
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: var(--color-white);
  outline: none;
  cursor: pointer;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

.schedule-select:hover {
  border-color: var(--text-muted);
}

.schedule-select:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
  padding-right: 31px;
}

.schedule-textarea {
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: var(--color-white);
  outline: none;
  resize: vertical;
  font-family: inherit;
  width: 100%;
  min-height: 80px;
  line-height: 20px;
  box-sizing: border-box;
}

.schedule-textarea:hover {
  border-color: var(--text-muted);
}

.schedule-textarea:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input {
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: var(--color-white);
  outline: none;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  height: 36px;
  line-height: 20px;
}

.schedule-input:hover {
  border-color: var(--text-muted);
}

.schedule-input.error {
  border-color: var(--color-red);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-input-group .schedule-label {
  margin-bottom: 0;
}

.schedule-recipients-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 4px;
  padding: 8px 0;
  z-index: 1000;
}

.schedule-recipient-item {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-recipient-item input[type="checkbox"] {
  cursor: pointer;
}

.schedule-recipient-item label {
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
}

.schedule-error {
  color: var(--color-red);
  font-size: 12px;
  margin-top: 4px;
  line-height: 16px;
}

.schedule-owner-display {
  font-size: 14px;
  color: var(--color-first);
  padding: 0;
  line-height: 20px;
}

.schedule-info-box {
  padding: 12px 16px;
  background: var(--color-hover);
  border-radius: 4px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 0;
}

.schedule-info-box svg {
  color: var(--color-third);
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.schedule-info-box span {
  font-size: 13px;
  color: var(--color-first);
  line-height: 20px;
}

.schedule-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--color-white);
  flex-shrink: 0;
}

.schedule-btn-cancel,
.schedule-btn-schedule {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 88px;
  height: 36px;
  box-sizing: border-box;
}

.schedule-btn-cancel {
  background: transparent;
  color: var(--color-third);
}

.schedule-btn-cancel:hover {
  background: var(--color-hover);
}

.schedule-btn-schedule {
  background: var(--color-third);
  color: var(--color-white);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
}

.schedule-btn-schedule:hover {
  background: var(--color-third);
  opacity: 0.9;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

/* Dark Theme Support for Schedule Modal */
html[data-bs-theme="dark"] .schedule-modal-content {
  background: var(--color-white);
}

html[data-bs-theme="dark"] .schedule-select,
html[data-bs-theme="dark"] .schedule-textarea,
html[data-bs-theme="dark"] .schedule-input {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  color: var(--color-first);
}

html[data-bs-theme="dark"] .schedule-recipients-dropdown {
  background: var(--color-white);
  border-color: var(--bg-gray2);
}

/* Responsive Styles for Schedule Modal */
@media (max-width: 768px) {
  .schedule-modal-content {
    width: 90vw;
    max-height: 85vh;
  }

  .schedule-frequency-time-row {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .schedule-modal-title {
    font-size: 20px;
    padding: 20px 20px 16px;
  }

  .schedule-modal-body {
    padding: 0 20px 20px;
    gap: 20px;
  }

  .schedule-modal-footer {
    padding: 12px 20px 20px;
    flex-direction: column;
  }

  .schedule-btn-cancel,
  .schedule-btn-schedule {
    width: 100%;
  }
}

/* Accounts Modal Styles */
.accounts-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.accounts-modal.show {
  display: flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
}

.accounts-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.accounts-modal-content {
  position: relative;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 800px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.accounts-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bg-gray2);
}

.accounts-modal-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.accounts-modal-title-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-modal-dropdown {
  padding: 6px 32px 6px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-first);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.accounts-modal-search-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.accounts-modal-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: var(--color-white);
}

.accounts-modal-search svg {
  color: var(--color-dark);
  flex-shrink: 0;
}

.accounts-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--color-first);
  background: transparent;
}

.accounts-selected-count {
  font-size: 14px;
  color: var(--color-first);
  white-space: nowrap;
}

.accounts-clear-all {
  background: none;
  border: none;
  color: var(--color-third);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.accounts-clear-all:hover {
  text-decoration: underline;
}

.accounts-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
  max-height: calc(90vh - 180px);
}

.accounts-list-section {
  flex: 1;
  border-right: 1px solid var(--bg-gray2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.accounts-list-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-gray2);
}

.accounts-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-third);
}

.accounts-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.accounts-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.accounts-list-item:hover {
  background: var(--color-hover);
}

.accounts-list-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-third);
  flex-shrink: 0;
}

.accounts-item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.accounts-item-primary {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-item-secondary {
  font-size: 14px;
  color: var(--color-dark);
}

.accounts-selected-section {
  width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg-gray);
}

.accounts-selected-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-gray2);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
}

.accounts-selected-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.accounts-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

.accounts-selected-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.accounts-selected-item-primary {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-selected-item-secondary {
  font-size: 13px;
  color: var(--color-dark);
}

.accounts-selected-item-remove {
  background: none;
  border: none;
  color: var(--color-dark);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.accounts-selected-item-remove:hover {
  opacity: 1;
}

.accounts-btn-cancel,
.accounts-btn-save {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.accounts-btn-cancel {
  background: var(--color-white);
  color: var(--color-third);
  border-color: transparent;
}

.accounts-btn-cancel:hover {
  background: var(--color-hover);
}

.accounts-btn-save {
  background: var(--color-third);
  color: var(--color-white);
  border-color: var(--color-third);
}

.accounts-btn-save:hover {
  background: var(--color-third);
  opacity: 0.9;
}

/* Dark Theme Support for Accounts Modal */
html[data-bs-theme="dark"] .accounts-modal-content {
  background: var(--color-white);
}

html[data-bs-theme="dark"] .accounts-modal-dropdown,
html[data-bs-theme="dark"] .accounts-modal-search {
  background: var(--color-white);
  border-color: var(--bg-gray2);
}

html[data-bs-theme="dark"] .accounts-selected-section {
  background: var(--bg-gray);
}

/* Responsive Styles for Accounts Modal */
@media (max-width: 768px) {
  .accounts-modal-content {
    width: calc(100% - 40px);
    max-height: calc(100vh - 40px);
  }

  .accounts-modal-body {
    flex-direction: column;
  }

  .accounts-list-section {
    border-right: none;
    border-bottom: 1px solid var(--bg-gray2);
    max-height: 300px;
  }

  .accounts-selected-section {
    width: 100%;
    max-height: 200px;
  }
}

.dashboard-separator {
  border-top: 1px solid var(--bg-gray2);
  opacity: 0.3;
  margin: 0;
}

.dashboard-control-bar {
  padding: 0;
}

.dashboard-add-btn {
  transition: all 0.2s;
}

.dashboard-add-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.dashboard-control-btn {
  transition: all 0.2s;
}

.dashboard-control-btn:hover:not(:disabled) {
  background: var(--color-hover) !important;
  border-color: var(--color-third) !important;
}

.dashboard-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dashboard-account-selector:hover,
.dashboard-date-range:hover {
  background: var(--color-hover) !important;
  border-color: var(--color-third) !important;
}

.dashboard-nav-btn {
  transition: all 0.2s;
}

.dashboard-nav-btn:hover {
  background: var(--color-hover) !important;
  border-color: var(--color-third) !important;
}

.dashboard-filter-btn {
  transition: all 0.2s;
  border-radius: 4px;
}

.dashboard-filter-btn:hover {
  background: var(--color-hover);
  color: var(--color-third) !important;
}

/* Responsive Styles for Dashboard Header */
@media (max-width: 768px) {
  .dashboard-header-top {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .dashboard-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-action-item,
  .dashboard-action-link {
    font-size: 10px;
  }

  .dashboard-action-item .material-icons {
    font-size: 18px !important;
  }

  .dashboard-title {
    font-size: 20px;
  }

  .dashboard-control-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .dashboard-control-bar > div {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-account-selector,
  .dashboard-date-range {
    flex: 1;
    min-width: 0;
  }

  /* Dashboard Header - Mobile */
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
  }

  .dashboard-title-section {
    width: 100%;
  }

  .dashboard-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .dashboard-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas {
    flex: 1;
    min-width: calc(33.33% - 4px);
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Dashboard Controls - Mobile */
  .dashboard-controls {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .dashboard-controls-left {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .add-widget-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }

  .add-widget-btn svg {
    width: 20px;
    height: 20px;
  }

  .btn-undo-redo {
    width: 32px;
    height: 32px;
  }

  .btn-undo-redo svg {
    width: 16px;
    height: 16px;
  }

  .dashboard-controls-right {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .accounts-selector {
    width: 100%;
    justify-content: space-between;
    padding: 6px 0;
  }

  .accounts-text {
    font-size: 13px;
  }

  .edit-accounts-btn svg {
    width: 12px;
    height: 12px;
  }

  .date-range-selector {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

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

  .date-range-label-top {
    font-size: 10px;
  }

  .date-range-btn-daterangepicker {
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    font-size: 13px;
  }

  .date-range-value {
    font-size: 13px;
  }

  .date-nav-buttons {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .date-nav-btn {
    flex: 1;
    padding: 6px;
    font-size: 10px;
  }

  .date-nav-btn svg {
    width: 14px;
    height: 14px;
  }

  .date-filter-btn {
    width: 100%;
    padding: 6px;
    font-size: 10px;
  }

  .date-filter-btn svg {
    width: 16px;
    height: 16px;
  }

  .date-filter-btn .filter-label {
    font-size: 10px;
  }
}

@media (max-width: 576px) {
  .dashboard-title {
    font-size: 16px;
  }

  .dashboard-header-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  .dashboard-action-item {
    padding: 2px 4px;
  }

  .dashboard-action-item span:last-child {
    font-size: 9px !important;
  }

  .dashboard-add-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .dashboard-add-btn .material-icons {
    font-size: 24px !important;
  }

  .dashboard-control-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .dashboard-control-bar > div:last-child {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  .dashboard-filter-btn span:last-child {
    font-size: 9px !important;
  }

  /* Dashboard Header - Small Mobile */
  .dashboard-header {
    gap: 10px;
    padding-bottom: 10px;
  }

  .dashboard-title {
    font-size: 16px;
  }

  .dashboard-actions {
    gap: 4px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas {
    min-width: calc(33.33% - 3px);
    padding: 5px 8px;
    font-size: 11px;
  }

  /* Dashboard Controls - Small Mobile */
  .dashboard-controls {
    gap: 10px;
    margin-bottom: 12px;
  }

  .dashboard-controls-left {
    gap: 6px;
  }

  .add-widget-btn {
    width: 40px;
    height: 40px;
  }

  .add-widget-btn svg {
    width: 18px;
    height: 18px;
  }

  .btn-undo-redo {
    width: 30px;
    height: 30px;
  }

  .btn-undo-redo svg {
    width: 14px;
    height: 14px;
  }

  .accounts-text {
    font-size: 12px;
  }

  .date-range-label-top {
    font-size: 9px;
  }

  .date-range-btn-daterangepicker {
    padding: 5px 8px;
    font-size: 12px;
  }

  .date-range-value {
    font-size: 12px;
  }

  .date-nav-btn,
  .date-filter-btn {
    padding: 5px;
    font-size: 9px;
  }

  .date-filter-btn .filter-label {
    font-size: 9px;
  }
}

/* Dark Mode Support for New Dashboard Header */
html[data-bs-theme="dark"] .dashboard-header-top,
html[data-bs-theme="dark"] .dashboard-control-bar {
  color: var(--color-first);
}

html[data-bs-theme="dark"] .dashboard-title {
  color: var(--color-first);
}

html[data-bs-theme="dark"] .dashboard-info-icon,
html[data-bs-theme="dark"] .dashboard-edit-icon {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .dashboard-action-item {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .dashboard-action-item:hover {
  background: var(--color-hover);
  color: var(--color-third) !important;
}

html[data-bs-theme="dark"] .dashboard-separator {
  border-color: var(--bg-gray2);
}

/* Dashboard Filters Bar Styles */
.dashboard-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-top: 0;
  margin-bottom: 0;
}

.filters-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 400;
  white-space: nowrap;
}

.active-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--color-hover);
  border: 1px solid var(--bg-gray2);
  border-radius: 16px;
  font-size: 13px;
  color: var(--color-first);
}

.filter-chip-text {
  flex: 1;
}

.filter-chip-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-dark);
  border-radius: 50%;
  transition: background 0.2s;
}

.filter-chip-remove:hover {
  background: rgba(0, 0, 0, 0.1);
}

.filter-chip-remove svg {
  width: 14px;
  height: 14px;
}

.delete-all-filters-btn {
  background: transparent;
  border: none;
  color: var(--color-dark);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.delete-all-filters-btn:hover {
  background: var(--color-hover);
}

.delete-all-filters-btn svg {
  width: 18px;
  height: 18px;
}

/* Dark Theme Support for Filters Bar */

html[data-bs-theme="dark"] .filters-label {
  color: var(--color-first);
}

html[data-bs-theme="dark"] .filter-chip {
  background: var(--color-hover);
  border-color: var(--bg-gray2);
  color: var(--color-first);
}

html[data-bs-theme="dark"] .filter-chip-remove {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .filter-chip-remove:hover {
  background: rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .delete-all-filters-btn {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .delete-all-filters-btn:hover {
  background: var(--color-hover);
}

/* Responsive Styles for Filters Bar */
@media (max-width: 768px) {
  .dashboard-filters-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .filters-label {
    width: 100%;
  }

  .active-filters-container {
    width: 100%;
  }
}

html[data-bs-theme="dark"] .dashboard-control-btn,
html[data-bs-theme="dark"] .dashboard-account-selector,
html[data-bs-theme="dark"] .dashboard-date-range,
html[data-bs-theme="dark"] .dashboard-nav-btn {
  background: var(--color-white);
  border-color: var(--bg-gray2);
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .dashboard-control-btn:hover:not(:disabled),
html[data-bs-theme="dark"] .dashboard-account-selector:hover,
html[data-bs-theme="dark"] .dashboard-date-range:hover,
html[data-bs-theme="dark"] .dashboard-nav-btn:hover {
  background: var(--color-hover);
  border-color: var(--color-third);
}

html[data-bs-theme="dark"] .dashboard-filter-btn {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .dashboard-filter-btn:hover {
  background: var(--color-hover);
  color: var(--color-third) !important;
}

/* Dark Mode Specific Styles for Dashboards Page */
html[data-bs-theme="dark"] .dashboards-page .loading-overlay {
  background: rgba(42, 43, 46, 0.9);
}

html[data-bs-theme="dark"] .dashboards-page .dashboards-table-wrapper {
  border: 1px solid var(--bg-gray2);
  box-shadow: none;
}

html[data-bs-theme="dark"] .dashboards-page .campaign-details-row {
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
}

html[data-bs-theme="dark"] .dashboards-page .campaign-details-row .text-muted {
  color: var(--color-dark) !important;
}

html[data-bs-theme="dark"] .dashboards-page .campaign-details-row .color-first {
  color: var(--color-first) !important;
}

html[data-bs-theme="dark"] .dashboards-page .campaign-details-row .color-third {
  color: var(--color-third) !important;
}

html[data-bs-theme="dark"] .dashboards-page .campaign-details-row button {
  color: var(--color-dark) !important;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .campaign-details-row
  button.color-third {
  color: var(--color-third) !important;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .campaign-details-row
  button:disabled {
  opacity: 0.5;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .campaign-details-row
  button:disabled
  .material-icons {
  opacity: 0.5;
}

html[data-bs-theme="dark"] .dashboards-page .dashboards-table thead th {
  background: var(--bg-light-gray);
  color: var(--color-dark);
  border-bottom-color: var(--bg-gray2);
}

html[data-bs-theme="dark"] .dashboards-page .dashboards-table tbody td {
  color: var(--color-first);
  border-bottom-color: var(--bg-gray2);
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dashboards-table
  tbody
  td
  .text-muted {
  color: var(--color-dark) !important;
}

html[data-bs-theme="dark"] .dashboards-page .dashboards-table tbody tr:hover {
  background: var(--color-hover);
}

html[data-bs-theme="dark"] .dashboards-page .dashboards-table .row-selected {
  background: var(--color-active) !important;
}

html[data-bs-theme="dark"] .dashboards-page .dash-row-link {
  color: var(--color-third) !important;
}

html[data-bs-theme="dark"] .dashboards-page .dash-row-link:hover {
  color: var(--color-third) !important;
  opacity: 0.8;
}

html[data-bs-theme="dark"] .dashboards-page .sortable:hover {
  background-color: var(--color-hover);
}

html[data-bs-theme="dark"] .dashboards-page .sortable.active {
  color: var(--color-third);
}

html[data-bs-theme="dark"] .dashboards-page .sort-icon {
  color: var(--color-dark);
}

html[data-bs-theme="dark"] .dashboards-page .sortable.active .sort-icon {
  color: var(--color-third);
}

html[data-bs-theme="dark"] .dashboards-page button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

html[data-bs-theme="dark"] .dashboards-page .material-icons {
  color: inherit;
}

html[data-bs-theme="dark"] .dashboards-page .form-check-input {
  background-color: var(--color-white);
  border-color: var(--bg-gray2);
}

html[data-bs-theme="dark"] .dashboards-page .form-check-input:checked {
  background-color: var(--color-third);
  border-color: var(--color-third);
}

html[data-bs-theme="dark"] .dashboards-page .form-check-input:focus {
  border-color: var(--color-third);
  box-shadow: 0 0 0 0.25rem rgba(122, 184, 255, 0.25);
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_info {
  color: var(--color-dark);
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button {
  color: var(--color-first) !important;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button:hover {
  background: var(--color-hover) !important;
  color: var(--color-first) !important;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current:hover,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.current,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.current:hover,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.active,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.active:hover,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.active,
html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.active:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

html[data-bs-theme="dark"]
  .dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.disabled {
  color: var(--color-dark) !important;
  opacity: 0.5;
}

/* Light mode pagination button current - All possible selectors */
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current:hover,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.current,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.current:hover,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.active,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.active:hover,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.active,
.dashboards-page
  .dataTables_wrapper
  .dataTables_paginate
  a.paginate_button.active:hover,
.dashboards-page .pagination .page-item.active .page-link,
.dashboards-page .pagination .page-item.active .page-link:hover,
.dashboards-page .pagination .page-item.active .page-link:focus {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* Campaign Settings Drawer */
.campaign-settings-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 999998;
}

.campaign-settings-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.campaign-settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 640px;
  max-width: 90vw;
  background: var(--color-white);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15), -4px 0 16px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-settings-drawer.active {
  transform: translateX(0);
}

.campaign-settings-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-gray2);
  flex-shrink: 0;
}

.campaign-settings-close {
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  transition: background 0.15s ease;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.campaign-settings-close:hover {
  background: var(--color-hover);
}

.campaign-settings-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-first);
  margin: 0;
  flex: 1;
}

.campaign-settings-status-bar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--bg-gray2);
  background: var(--bg-light-gray);
  flex-shrink: 0;
}

.campaign-settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.campaign-settings-section {
  margin-bottom: 32px;
}

.campaign-settings-section:last-child {
  margin-bottom: 0;
}

.campaign-settings-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-first);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-gray2);
}

.campaign-settings-field {
  margin-bottom: 20px;
}

.campaign-settings-field:last-child {
  margin-bottom: 0;
}

.campaign-settings-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
  margin-bottom: 6px;
}

.campaign-settings-value {
  font-size: 14px;
  color: var(--color-first);
  line-height: 1.5;
}

.campaign-settings-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--bg-gray2);
  flex-shrink: 0;
}

.campaign-settings-content::-webkit-scrollbar {
  width: 8px;
}

.campaign-settings-content::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
  border-radius: 4px;
}

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

html[data-bs-theme="dark"] .campaign-settings-drawer {
  background: var(--color-white);
}

html[data-bs-theme="dark"] .campaign-settings-status-bar {
  background: var(--bg-light-gray);
}

html[data-bs-theme="dark"] .campaign-settings-content::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
}

@media (max-width: 768px) {
  .campaign-settings-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}
/* Removed conflicting styles - handled in main calendar styles above */
.dashboard-edit-btn {
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  color: blanchedalmond;
}
/* ============================================
   DASHBOARD & NEWMODAL COMPONENT STYLES
   ============================================ */
.dashboard-editor-wrapper {
  background: var(--color-white);
  border-radius: 8px;
  padding: 24px;
  margin-top: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Prevent overflow in parent containers */
.main-section.dashboards-page,
.container-fluid.webContent,
.row,
.col-12 {
  /* overflow-x: hidden !important; */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bg-gray2);
}

.dashboard-title-section {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dashboard-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

/* Dashboard title styles consolidated above */

.dashboard-status {
  font-size: 14px;
  color: var(--color-dark);
  font-weight: 400;
}

.dashboard-saved-in {
  font-size: 14px;
  color: var(--color-dark);
  font-weight: 400;
}

.dashboard-question-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  margin-left: 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dashboard-question-btn:hover {
  opacity: 1;
}

.dashboard-edit-actions {
  display: flex;
  gap: 8px;
}

.dashboard-view-actions {
  display: flex;
  align-items: center;
}

.dashboard-action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--color-first);
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
  transition: background 0.2s;
  position: relative;
}

.dashboard-action-btn:hover {
  background: var(--color-hover);
}

.dashboard-action-btn.active {
  background: var(--bg-gray);
}

.dashboard-action-btn svg {
  width: 18px;
  height: 18px;
}

/* Dashboard action link styles consolidated above */

.dashboard-action-dropdown {
  position: relative;
}

.dashboard-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--ga-surface);
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--ga-shadow);
  min-width: 200px;
  padding: 8px 0;
  margin-top: 4px;
  display: none;
  z-index: 1000;
}

.dashboard-dropdown-menu.show {
  display: block;
}

.dashboard-dropdown-menu .dropdown-item {
  display: block;
  padding: 8px 16px;
  color: var(--color-first);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.dashboard-dropdown-menu .dropdown-item:hover {
  background: var(--color-hover);
}

.feedback-menu-header {
  padding: 12px 16px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
  border-bottom: 1px solid var(--bg-gray2);
}

.feedback-menu-question {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--color-first);
}

.feedback-menu-item {
  display: block;
  padding: 8px 16px;
  color: var(--color-first);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.feedback-menu-item:hover {
  background: var(--color-hover);
}

.edit-title-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.edit-title-btn:hover {
  opacity: 1;
}

.dashboard-actions {
  display: flex;
  gap: 8px;
}

.btn-cancel,
.btn-save,
.btn-saveas {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-first);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

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

.btn-save {
  background: var(--color-third);
  color: var(--ga-surface);
  border-color: var(--color-third);
}

.btn-save:hover:not(:disabled) {
  background: var(--ga-blue);
  border-color: var(--ga-blue);
  opacity: 0.9;
}

.btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ga-border);
  border-color: var(--ga-border);
  color: var(--ga-text-muted);
}

.btn-saveas {
  background: var(--ga-focus);
  border-color: var(--color-third);
  color: var(--color-third);
}

.btn-saveas:hover {
  background: var(--ga-surface-selected);
}

.dashboard-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-top: 0;
}

.dashboard-controls-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.add-widget-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-third);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add-widget-btn:hover:not(:active) {
  background: #0a58ca;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.add-widget-btn:active {
  transform: scale(0.95);
}

.undo-redo-buttons {
  display: flex;
  gap: 4px;
}

.btn-undo-redo {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--bg-gray2);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-undo-redo:hover:not(:disabled) {
  background: var(--color-hover);
}

.btn-undo-redo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dashboard-controls-right {
  display: flex;
  align-items: center;
  position: relative;
  gap: 20px;
}

/* All Accounts Selector */
.accounts-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}

.accounts-text {
  font-size: 14px;
  color: var(--color-first);
  cursor: pointer;
}

.edit-accounts-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.edit-accounts-btn:hover {
  opacity: 1;
}

/* Date Range Wrapper */
.date-range-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-range-label-top {
  font-size: 11px;
  color: var(--color-dark);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* View and Campaigns Selectors */
.view-campaigns-selectors {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-selector-wrapper,
.campaigns-selector-wrapper {
  position: relative;
}

.view-selector-label,
.campaigns-selector-label {
  font-size: 11px;
  color: var(--ga-text-muted);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.view-selector-btn,
.campaigns-selector-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  background: var(--ga-surface);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 180px;
  position: relative;
}

.view-selector-btn:hover,
.campaigns-selector-btn:hover {
  border-color: var(--color-third);
  box-shadow: 0 1px 2px var(--ga-shadow), 0 1px 3px 1px var(--ga-shadow);
}

.view-selector-btn.active,
.campaigns-selector-btn.active {
  border-color: var(--color-third);
  box-shadow: 0 1px 2px var(--ga-shadow), 0 1px 3px 1px var(--ga-shadow);
}

.view-selector-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-third);
}

.grid-icon,
.chevron-icon,
.home-icon {
  width: 16px;
  height: 16px;
  color: var(--ga-text-muted);
  flex-shrink: 0;
}

.view-selector-value,
.campaigns-selector-value {
  font-size: 14px;
  color: var(--ga-text);
  flex: 1;
  text-align: left;
}

/* View Selector Dropdown */
.view-selector-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--ga-shadow);
  min-width: 200px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.view-dropdown-item:hover {
  background: var(--ga-surface-hover);
}

.view-dropdown-item-text {
  font-size: 14px;
  color: var(--ga-text);
}

.select-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ga-border);
}

.select-view-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ga-text);
  margin: 0;
}

.select-view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-view-feedback-btn,
.select-view-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  color: var(--ga-text-muted);
}

.select-view-feedback-btn:hover,
.select-view-close-btn:hover {
  background: var(--ga-surface-hover);
}

.select-view-feedback-btn svg,
.select-view-close-btn svg {
  width: 24px;
  height: 24px;
}

.select-view-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.select-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.select-view-tab {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--ga-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: all 0.2s;
}

.select-view-tab:hover {
  color: var(--color-third);
}

.select-view-tab.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
  background: transparent;
}

.tab-chevron {
  width: 16px;
  height: 16px;
  color: inherit;
}

.select-view-tab-content {
  display: block;
}

.select-view-tab-content[data-content="select"] {
  position: relative;
}

.select-view-dropdown-list {
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--ga-shadow);
  overflow: hidden;
  margin-top: 8px;
}

.select-view-dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ga-text);
  cursor: pointer;
  transition: background 0.2s;
}

.select-view-dropdown-item:hover {
  background: var(--ga-surface-hover);
}

.select-view-dropdown-item:first-child,
.select-view-dropdown-item.active {
  background: var(--ga-focus);
  color: var(--color-third);
}

.select-view-item-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.select-view-item-subtitle {
  font-size: 12px;
  color: var(--ga-text-muted);
}

.select-view-content-body {
  display: flex;
  flex-direction: column;
}

.select-view-section {
  margin-bottom: 24px;
}

.select-view-section:last-child {
  margin-bottom: 0;
}

.select-view-section-title {
  font-size: 12px;
  color: var(--ga-text-muted);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.select-view-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.select-view-item:hover {
  background: var(--ga-surface-hover);
}

.select-view-item.active {
  background: var(--ga-focus);
}

.view-circle-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ga-text-muted);
  flex-shrink: 0;
}

.view-blue-circle-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-third);
  flex-shrink: 0;
}

.view-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ga-text-muted);
}

.select-view-item.active .view-icon {
  color: var(--color-third);
}

.select-view-item-text {
  font-size: 14px;
  color: var(--ga-text);
}

.select-view-footer {
  border-top: 1px solid var(--ga-border);
  padding: 16px 24px;
}

.create-view-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--color-third);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.create-view-btn:hover {
  background: #f1f3f4;
}

.create-view-btn svg {
  width: 16px;
  height: 16px;
}

.date-range-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.date-range-btn,
.date-range-btn-daterangepicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--color-third);
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 180px;
  max-width: 100%;
  position: relative;
  padding-right: 32px;
}

.date-range-btn:hover,
.date-range-btn-daterangepicker:hover {
  border-color: var(--color-third);
  background: var(--color-hover);
}

.date-range-value {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}

.date-range-btn svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
}

.date-nav-buttons {
  display: flex;
  gap: 4px;
}

.date-nav-btn,
.date-filter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 11px;
}

.date-filter-btn .filter-label {
  font-size: 11px;
  color: var(--color-dark);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.date-nav-btn:hover,
.date-filter-btn:hover {
  background: var(--color-hover);
}

/* Dashboard Filter Row */
.dashboard-filter-row {
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #e8eaed;
  border-bottom: 1px solid #e8eaed;
}

.filter-row-content {
  position: relative;
  max-width: 400px;
}

.filter-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.filter-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}
html[data-bs-theme="dark"] .filter-dropdown-menu {
  background-color: var(--bg-gray);
}

.filter-dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-dropdown-item:hover {
  background: var(--bs-body-bg);
}

.filter-dropdown-item.hidden {
  display: none !important;
}

.filter-dropdown-item:first-child {
  border-radius: 4px 4px 0 0;
}

.filter-dropdown-item:last-child {
  border-radius: 0 0 4px 4px;
}

/* Active Filters Bar */
.dashboard-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  margin-top: 16px;
  border-bottom: 1px solid #e8eaed;
}

.filters-label {
  font-size: 14px;
  color: var(--filter-text);
  font-weight: 400;
}

.active-filters-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #dadce0;
  border-radius: 16px;
  font-size: 13px;
  background: var(--filter-bg);
  color: var(--filter-text);
}

.filter-chip-text {
  flex: 1;
}

.filter-chip-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #5f6368;
  border-radius: 50%;
  transition: background 0.2s;
}

.filter-chip-remove:hover {
  background: rgba(0, 0, 0, 0.1);
}

.filter-chip-remove svg {
  width: 14px;
  height: 14px;
}

.add-filter-btn-text {
  background: transparent;
  border: none;
  color: #5f6368;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.add-filter-btn-text:hover {
  background: var(--ga-surface-hover);
}

/* Add Report Modal */
.add-report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
}

.add-report-modal.show {
  display: flex;
}

.add-report-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.add-report-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 10003;
}

.add-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ga-border);
}

.add-report-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
}

.add-report-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ga-text-muted);
  transition: background 0.2s;
  padding: 0;
}

.add-report-close:hover {
  background: var(--ga-surface-hover);
}

.add-report-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.add-report-search-container {
  position: relative;
  margin-bottom: 12px;
}

.add-report-search {
  width: 100%;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  box-sizing: border-box;
}

.add-report-search:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.add-report-search::placeholder {
  color: #9aa0a6;
}

.add-report-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  border-radius: 50%;
  transition: background 0.2s;
  padding: 0;
}

.add-report-search-clear:hover {
  background: #f1f3f4;
}

.clear-filters-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  padding: 4px;
  border-radius: 4px;
}

.clear-filters-btn:hover {
  background: #f1f3f4;
}

/* Create View Modal */
.create-view-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-view-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.create-view-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.3);
}

.create-view-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ga-border);
  gap: 16px;
}

.create-view-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  color: var(--ga-text-muted);
  flex-shrink: 0;
}

.create-view-back-btn:hover {
  background: var(--ga-surface-hover);
}

.create-view-back-btn svg {
  width: 24px;
  height: 24px;
}

.create-view-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ga-text);
  margin: 0;
  flex: 1;
}

.create-view-feedback-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ga-text-muted);
  transition: color 0.2s;
}

.create-view-feedback-btn:hover {
  color: var(--color-third);
}

.create-view-feedback-btn svg {
  width: 24px;
  height: 24px;
}

.create-view-feedback-label {
  font-size: 11px;
  color: inherit;
}

/* .create-view-save-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            background: #1a73e8;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .create-view-save-btn:hover {
            background: #1557b0;
        }

        .create-view-save-btn svg {
            width: 20px;
            height: 20px;
        } */

/* Report Confirmation Modal */
.report-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
}

.report-confirm-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.report-confirm-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  width: 90%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  z-index: 10003;
}

.report-confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ga-border);
}

.report-confirm-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
}

.report-confirm-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ga-text-muted);
  transition: background 0.2s;
  padding: 0;
}

.report-confirm-close:hover {
  background: var(--ga-surface-hover);
}

.report-confirm-body {
  padding: 20px 24px;
}

.report-confirm-input-wrapper {
  position: relative;
  width: 100%;
}

.report-confirm-input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  border: none;
  border-bottom: 1px solid var(--ga-border);
  font-size: 14px;
  color: var(--ga-text);
  background: transparent;
  outline: none;
  box-sizing: border-box;
}

.report-confirm-input:focus {
  border-bottom-color: #1a73e8;
}

.report-confirm-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ga-text-muted);
  transition: background 0.2s;
  padding: 0;
}

.report-confirm-clear:hover {
  background: var(--ga-surface-hover);
}

.report-confirm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--ga-border);
}

.report-confirm-cancel-btn,
.report-confirm-add-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.report-confirm-cancel-btn {
  background: transparent;
  color: var(--ga-text);
}

.report-confirm-cancel-btn:hover {
  background: var(--ga-surface-hover);
}

.report-confirm-add-btn {
  background: #1a73e8;
  color: white;
}

.report-confirm-add-btn:hover {
  background: #1557b0;
}

.add-report-list {
  display: flex;
  flex-direction: column;
}

.add-report-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.add-report-item:hover {
  background: var(--ga-surface-hover);
}

.add-report-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.add-report-edit-icon {
  opacity: 0;
  transition: opacity 0.2s;
}

.add-report-item:hover .add-report-edit-icon {
  opacity: 0.6;
}

.add-report-edit-icon:hover {
  opacity: 1 !important;
}

.add-report-item-edit-input {
  border: 1px solid #1a73e8 !important;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  width: 100%;
  max-width: 200px;
  outline: none;
  background: var(--ga-surface);
  color: var(--ga-text);
}

.add-report-item-text {
  font-size: 14px;
  color: var(--ga-text);
  flex: 1;
}

.add-report-chevron {
  width: 16px;
  height: 16px;
  color: var(--ga-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Expandable Category */
.add-report-category {
  display: flex;
  flex-direction: column;
}

.add-report-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.add-report-category-header:hover {
  background: var(--ga-surface-hover);
}

.add-report-category-text {
  font-size: 14px;
  color: var(--ga-text);
  flex: 1;
}

.add-report-category.expanded .add-report-chevron {
  transform: rotate(180deg);
}

.add-report-category-items {
  display: none;
  flex-direction: column;
  padding-left: 0;
}

.add-report-category.expanded .add-report-category-items {
  display: flex;
}

.add-report-subitem {
  padding: 12px 16px 12px 32px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ga-text);
  transition: background 0.2s;
}

.add-report-subitem:hover {
  background: var(--ga-surface-hover);
}

/* Filter Modal */
.filter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.filter-modal.show {
  display: flex;
}

/* .filter-modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        } */

.filter-modal-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

.filter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ga-border);
}

.filter-modal-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
}

.filter-modal-close {
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ga-text-muted);
  transition: background 0.2s;
}

.filter-modal-close:hover {
  background: var(--ga-surface-hover);
}

.filter-close-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--ga-text);
  color: var(--ga-surface);
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.filter-modal-close:hover .filter-close-tooltip {
  opacity: 1;
}

.filter-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
}

.filter-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--ga-border);
}

.filter-modal-close-btn {
  padding: 10px 24px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--ga-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-modal-close-btn:hover {
  background: var(--ga-bg);
}

.filter-modal-apply-btn {
  padding: 10px 24px;
  background: var(--color-third);
  border: none;
  border-radius: 4px;
  color: var(--ga-surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-modal-apply-btn:hover {
  background: var(--ga-blue);
  opacity: 0.9;
}

/* Filter-specific styles */
.filter-checkbox-group,
.filter-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-checkbox-item,
.filter-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-checkbox-item:hover,
.filter-radio-item:hover {
  background: var(--ga-surface-hover);
}

.filter-checkbox-item input[type="checkbox"],
.filter-radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.filter-checkbox-item label,
.filter-radio-item label {
  flex: 1;
  cursor: pointer;
  font-size: 14px;
  color: var(--ga-text);
  margin: 0;
}

.filter-radio-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.filter-search-container {
  position: relative;
  margin-bottom: 20px;
}

.filter-search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  box-sizing: border-box;
}

.filter-search-input:focus {
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px var(--ga-focus);
}

.filter-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ga-text-muted);
  pointer-events: none;
}

.filter-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 400px;
}

.filter-column {
  display: flex;
  flex-direction: column;
  border: 1px solid #dadce0;
  border-radius: 4px;
  overflow: hidden;
}

.filter-column-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #dadce0;
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
}

.filter-column-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.filter-column-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9aa0a6;
  font-size: 14px;
}

.filter-condition-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-condition-select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  color: #202124;
  background: white;
  outline: none;
  cursor: pointer;
}

.filter-condition-select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.filter-value-textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 16px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  color: #202124;
  font-family: inherit;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.filter-value-textarea:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.filter-value-textarea::placeholder {
  color: #9aa0a6;
}

.dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  min-height: 600px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  grid-auto-flow: row;
  position: relative;
}

/* Ensure grid items don't overflow */
.dashboard-widget-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.widget-placeholder {
  aspect-ratio: 16 / 9;
  background: #5f6368;
  border-radius: 8px;
  min-height: 180px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* position: relative; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* piche */
}

.widget-placeholder:hover {
  background: #4a4f54;
}

.widget-placeholder .widget-add-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transition: all 0.2s;
}

.widget-placeholder:hover .widget-add-icon {
  display: flex;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.widget-placeholder:active .widget-add-icon {
  transform: scale(0.95);
}

/* Widget Container */
.dashboard-widget {
  background: var(--ga-surface);
  border-radius: 8px;

  min-height: 180px;

  box-sizing: border-box;
  position: relative;
  box-shadow: 0 1px 3px var(--ga-shadow);
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  cursor: move;
  user-select: none;
  position: relative;
  z-index: 2;
}

.dashboard-widget.dragging {
  opacity: 0.5;
  z-index: 1000;
}

.dashboard-widget.drag-over {
  border: 2px dashed #1a73e8;
}

.widget-drag-handle {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  cursor: move;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-widget:hover .widget-drag-handle,
.dashboard-widget.selected .widget-drag-handle {
  opacity: 1;
}

.widget-drag-handle::before {
  content: "⋮⋮";
  font-size: 16px;
  color: var(--ga-text-muted);
  line-height: 1;
  letter-spacing: -2px;
}

/* Widget Header */
.widget-header {
  padding: 2px 5px;
  border-bottom: 1px solid var(--ga-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  background: var(--ga-surface);
}

.widget-header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.widget-date {
  font-size: 12px;
  color: var(--ga-text-muted);
  font-weight: 400;
}

.widget-title {
  font-size: 10px;
  font-weight: 400;
  color: var(--ga-text);
  text-decoration: underline;
  cursor: default;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-menu-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  border-radius: 4px;
  padding: 0;
}

.widget-menu-btn:hover {
  background: var(--ga-surface-hover);
}

.widget-menu-btn svg {
  width: 20px;
  height: 20px;
}

/* Widget Content */
.widget-content {
  flex: 1;
  padding: 16px;
  overflow: auto;
  position: relative;
  background: var(--ga-surface);
}

/* Sirf report widget ke liye */
.dashboard-widget.report-widget .widget-content {
  padding: 0;
  overflow: hidden;
}

/* Report Simple Table - widget ke andar */
.report-simple-table {
  /* padding: 16px; */
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.report-simple-table .table-responsive {
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.report-simple-table .report-table {
  margin: 0;
  width: 100%;
  font-size: 13px;
  background: var(--ga-surface);
  color: var(--ga-text);
  border-collapse: collapse;
}

.report-simple-table .report-table {
  margin: 0;
  width: 100%;
  font-size: 13px;
  background: var(--ga-surface);
  color: var(--ga-text);
  border-collapse: collapse;
}

.report-simple-table .report-table thead th {
  background: var(--ga-surface);
  color: var(--ga-text);
  font-weight: 500;
  border-bottom: 1px solid var(--ga-border);
  white-space: nowrap;
  cursor: pointer;
  padding: 12px 16px;
  text-align: left;
}

.report-simple-table .report-table thead th:hover {
  background: var(--ga-surface-hover);
}

.report-simple-table .report-table thead th svg {
  opacity: 0.6;
}

.report-simple-table .report-table tbody td {
  border-bottom: 1px solid var(--ga-border);
  color: var(--ga-text);
  padding: 12px 16px;
}

.report-simple-table .report-table tbody tr:hover {
  background: var(--ga-surface-hover);
}

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

/* Edit Report Modal Styles */
.edit-report-modal {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.edit-report-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.edit-report-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  z-index: 10001;
}

.edit-report-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ga-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}

.edit-report-header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-report-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-report-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
}

.edit-report-actions {
  display: flex;
  gap: 8px;
}

.edit-report-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--ga-text);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.edit-report-action-btn:hover {
  background: var(--ga-surface-hover);
}

.edit-report-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Download Dropdown */
.edit-report-download-wrapper {
  position: relative;
}

.edit-report-download-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10002;
  padding: 4px 0;
}

.edit-report-download-item {
  padding: 10px 16px;
  color: var(--ga-text);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.edit-report-download-item:hover {
  background: var(--ga-surface-hover);
}

.edit-report-download-item:active {
  background: var(--ga-border);
}

/* Scrollbar styling for download dropdown */
.edit-report-download-dropdown::-webkit-scrollbar {
  width: 8px;
}

.edit-report-download-dropdown::-webkit-scrollbar-track {
  background: var(--ga-surface);
}

.edit-report-download-dropdown::-webkit-scrollbar-thumb {
  background: var(--ga-border);
  border-radius: 4px;
}

.edit-report-download-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--ga-text-muted);
}

.edit-report-header-links {
  display: flex;
  gap: 16px;
}

.edit-report-link {
  color: var(--ga-text);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.edit-report-link:hover {
  color: #1a73e8;
}

.edit-report-body {
  flex: 1;
  overflow: auto;
  padding: 16px 24px;
}

.edit-report-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.edit-report-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ga-text);
}

.edit-report-date-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  cursor: pointer;
}

.edit-report-date-nav {
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--ga-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-report-date-nav:hover {
  background: var(--ga-surface-hover);
}

.edit-report-account-filter {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--ga-text);
}

.edit-report-filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.edit-report-filter-btn,
.edit-report-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  color: var(--ga-text);
  cursor: pointer;
  font-size: 14px;
}

.edit-report-filter-btn:hover,
.edit-report-view-btn:hover {
  background: var(--ga-surface-hover);
}

.edit-report-table-container {
  overflow: auto;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
}

.edit-report-table {
  margin: 0;
  width: 100%;
  font-size: 13px;
  background: var(--ga-surface);
  color: var(--ga-text);
  border-collapse: collapse;
}

.edit-report-table thead th {
  background: var(--ga-surface);
  color: var(--ga-text);
  font-weight: 500;
  border-bottom: 1px solid var(--ga-border);
  white-space: nowrap;
  cursor: pointer;
  padding: 12px 16px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
}

.edit-report-table thead th:hover {
  background: var(--ga-surface-hover);
}

.edit-report-table thead th svg {
  opacity: 0.6;
}

.edit-report-table tbody td {
  border-bottom: 1px solid var(--ga-border);
  color: var(--ga-text);
  padding: 12px 16px;
}

.edit-report-table tbody tr:hover {
  background: var(--ga-surface-hover);
}

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

/* Mobile Responsive Styles for Edit Report Modal */
@media (max-width: 768px) {
  .edit-report-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  .edit-report-header-left {
    width: 100%;
  }

  .edit-report-title-row {
    gap: 6px;
  }

  .edit-report-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .edit-report-title-row svg {
    width: 16px;
    height: 16px;
  }

  .edit-report-actions {
    gap: 6px;
  }

  .edit-report-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    gap: 4px;
  }

  .edit-report-action-btn svg {
    width: 16px;
    height: 16px;
  }

  .edit-report-header-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  .edit-report-header-links {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    order: 1;
  }

  .edit-report-link {
    font-size: 13px;
  }

  .edit-report-body {
    padding: 12px 16px;
  }

  .edit-report-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .edit-report-date-range {
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
  }

  .edit-report-date-dropdown {
    flex: 1;
    min-width: 0;
    padding: 5px 10px;
    font-size: 12px;
  }

  .edit-report-date-nav {
    padding: 4px 6px;
  }

  .edit-report-date-nav svg {
    width: 14px;
    height: 14px;
  }

  .edit-report-account-filter {
    font-size: 13px;
  }

  .edit-report-account-filter svg {
    width: 14px;
    height: 14px;
  }

  .edit-report-filter-actions {
    margin-left: 0;
    width: 100%;
    gap: 6px;
  }

  .edit-report-filter-btn,
  .edit-report-view-btn {
    flex: 1;
    justify-content: center;
    padding: 5px 10px;
    font-size: 12px;
  }

  .edit-report-table-container {
    margin: 0 -16px;
    width: calc(100% + 32px);
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .edit-report-table {
    font-size: 11px;
    min-width: 800px;
  }

  .edit-report-table thead th {
    padding: 8px 10px;
    font-size: 10px;
  }

  .edit-report-table thead th svg {
    width: 12px;
    height: 12px;
  }

  .edit-report-table tbody td {
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .edit-report-header {
    padding: 10px 12px;
  }

  .edit-report-title {
    font-size: 14px;
  }

  .edit-report-actions {
    gap: 4px;
  }

  .edit-report-action-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .edit-report-header-links {
    gap: 10px;
  }

  .edit-report-link {
    font-size: 12px;
  }

  .edit-report-body {
    padding: 10px 12px;
  }

  .edit-report-filters {
    gap: 8px;
  }

  .edit-report-date-range {
    font-size: 12px;
  }

  .edit-report-date-dropdown {
    font-size: 11px;
  }

  .edit-report-table-container {
    margin: 0 -12px;
    width: calc(100% + 24px);
  }

  .edit-report-table {
    font-size: 10px;
    min-width: 700px;
  }

  .edit-report-table thead th {
    padding: 6px 8px;
    font-size: 9px;
  }

  .edit-report-table tbody td {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* Report Widget Styles */
.report-widget {
  background: var(--ga-surface);
}

.report-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-filter {
  font-size: 13px;
  color: var(--ga-text-muted);
  margin-bottom: 8px;
}

.report-measure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ga-text);
}

.measure-info-icon {
  width: 16px;
  height: 16px;
  color: var(--ga-text-muted);
  cursor: help;
}

.report-value {
  font-size: 36px;
  font-weight: 400;
  color: var(--ga-text);
  line-height: 1.2;
  font-family: var(--font-family-secondary, sans-serif);
}

/* Show content even when selected */
.dashboard-widget.selected .widget-content {
  position: relative;
}

.widget-content-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
}

.widget-edit-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ga-surface-hover);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ga-text-muted);
  transition: all 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 2px 4px var(--ga-shadow);
}

.dashboard-widget:hover:not(.selected) .widget-edit-button {
  display: flex;
}

.dashboard-widget.selected .widget-edit-button {
  display: flex;
}

/* Ensure edit button is centered properly */
.dashboard-widget.selected .widget-content {
  position: relative;
}

.widget-edit-button:hover {
  background: var(--ga-border);
  transform: translate(-50%, -50%) scale(1.05);
}

.widget-content-empty .widget-edit-button {
  display: flex;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.widget-content-empty .widget-edit-button:hover {
  transform: scale(1.05);
}

.widget-edit-button svg {
  width: 24px;
  height: 24px;
}

/* Resize Handles */
.widget-resize-handles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  overflow: visible;
  display: none;
}

.dashboard-widget:hover:not(.selected) .widget-resize-handles {
  display: block;
}

.dashboard-widget.selected .widget-resize-handles {
  display: block !important;
}

.dashboard-widget.selected .widget-resize-handle.nw,
.dashboard-widget.selected .widget-resize-handle.ne,
.dashboard-widget.selected .widget-resize-handle.se,
.dashboard-widget.selected .widget-resize-handle.sw,
.dashboard-widget.selected .widget-resize-handle.n,
.dashboard-widget.selected .widget-resize-handle.s {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

/* Show 6 handles: 4 corners + top and bottom midpoints */
.widget-resize-handle.e,
.widget-resize-handle.w {
  display: none !important;
}

.widget-resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #1a73e8;
  border: 2.5px solid white;
  border-radius: 50%;
  z-index: 101;
  pointer-events: all;
  cursor: default;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(26, 115, 232, 0.2);
  display: block !important;
}

.widget-resize-handle:hover {
  background: #1557b0;
  transform: scale(1.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(26, 115, 232, 0.3);
}

.widget-resize-handle.nw {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}

.widget-resize-handle.n {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
  display: block !important;
}

.widget-resize-handle.ne {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}

.widget-resize-handle.e {
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  cursor: e-resize;
}

.widget-resize-handle.se {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

.widget-resize-handle.s {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
  display: block !important;
}

.widget-resize-handle.sw {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
}

.widget-resize-handle.w {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  cursor: w-resize;
}

.widget-resize-handle.n:hover {
  transform: translateX(-50%) scale(1.2);
}

.widget-resize-handle.s:hover {
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(26, 115, 232, 0.3);
}

.widget-resize-handle.e:hover {
  transform: translateY(-50%) scale(1.2);
}

.widget-resize-handle.w:hover {
  transform: translateY(-50%) scale(1.2);
}

/* Widget Type Dropdown */
.widget-type-dropdown {
  position: fixed;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--ga-shadow);
  z-index: 10000;
  min-width: 180px;
  padding: 8px 0;
}

/* Responsive widget type dropdown */
@media (max-width: 768px) {
  .widget-type-dropdown {
    min-width: 160px;
    max-width: 90vw;
  }

  .widget-type-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .widget-type-item svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 576px) {
  .widget-type-dropdown {
    min-width: 140px;
    max-width: 85vw;
  }

  .widget-type-item {
    padding: 6px 10px;
    font-size: 12px;
    gap: 8px;
  }

  .widget-type-item svg {
    width: 16px;
    height: 16px;
  }
}

.widget-type-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--ga-text);
  font-size: 14px;
  transition: background 0.2s;
}

.widget-type-item:hover {
  background: var(--ga-surface-hover);
}

.widget-type-item svg {
  width: 20px;
  height: 20px;
  color: var(--ga-text-muted);
}

/* Widget Menu Dropdown (3 dots) */
.widget-menu-dropdown {
  position: fixed;
  background: white;
  border: 1px solid #dadce0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10001;
  min-width: 160px;
  padding: 8px 0;
}

.widget-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: #202124;
  font-size: 14px;
  transition: background 0.2s;
}

.widget-menu-item:hover {
  background: #f1f3f4;
}

.widget-menu-item svg {
  width: 16px;
  height: 16px;
  color: #5f6368;
}

.widget-menu-item[data-action="delete"] {
  color: #ea4335;
}

.widget-menu-item[data-action="delete"] svg {
  color: var(--color-red);
}

/* Widget Menu Dropdown - Fixed duplicate */
.widget-menu-dropdown {
  position: fixed;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--ga-shadow);
  z-index: 10001;
  min-width: 160px;
  padding: 8px 0;
}

.widget-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--ga-text);
  font-size: 14px;
  transition: background 0.2s;
}

.widget-menu-item:hover {
  background: var(--ga-surface-hover);
}

.widget-menu-item svg {
  width: 16px;
  height: 16px;
  color: var(--ga-text-muted);
}

.widget-menu-item[data-action="delete"] {
  color: var(--color-red);
}

.widget-menu-item[data-action="delete"] svg {
  color: var(--color-red);
}

/* Responsive Widget Styles */
@media (max-width: 768px) {
  .widget-type-dropdown {
    min-width: 160px;
    font-size: 13px;
    max-width: calc(100vw - 40px);
  }

  .widget-type-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .widget-type-item svg {
    width: 18px;
    height: 18px;
  }

  .widget-menu-dropdown {
    min-width: 140px;
    font-size: 13px;
    max-width: calc(100vw - 40px);
  }

  .widget-menu-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .widget-edit-button {
    width: 48px;
    height: 48px;
  }

  .widget-edit-button svg {
    width: 20px;
    height: 20px;
  }

  .widget-resize-handle {
    width: 6px;
    height: 6px;
    border-width: 1.5px;
  }

  .widget-resize-handle.nw {
    top: -4px;
    left: -4px;
  }

  .widget-resize-handle.ne {
    top: -4px;
    right: -4px;
  }

  .widget-resize-handle.se {
    bottom: -4px;
    right: -4px;
  }

  .widget-resize-handle.sw {
    bottom: -4px;
    left: -4px;
  }
}

@media (max-width: 576px) {
  .widget-type-dropdown {
    min-width: 140px;
    padding: 6px 0;
  }

  .widget-type-item {
    padding: 8px 12px;
    font-size: 12px;
    gap: 10px;
  }

  .widget-type-item svg {
    width: 16px;
    height: 16px;
  }

  .widget-menu-dropdown {
    min-width: 120px;
    padding: 6px 0;
  }

  .widget-menu-item {
    padding: 8px 12px;
    font-size: 12px;
    gap: 10px;
  }

  .widget-menu-item svg {
    width: 14px;
    height: 14px;
  }

  .widget-edit-button {
    width: 44px;
    height: 44px;
  }

  .widget-edit-button svg {
    width: 18px;
    height: 18px;
  }
}

/* Add/Edit Note Modal */
.add-note-modal,
.edit-note-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-note-backdrop,
.edit-note-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.add-note-content,
.edit-note-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 8px 32px var(--ga-shadow);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10002;
}

.add-note-header,
.edit-note-header {
  padding: 20px 24px 0;
}

.add-note-title,
.edit-note-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
}

.add-note-body,
.edit-note-body {
  padding: 16px 24px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Rich Text Toolbar */
.rich-text-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ga-border);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.toolbar-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--ga-text-muted);
  padding: 0;
  transition: background 0.2s;
}

.toolbar-btn svg {
  color: inherit;
}

.toolbar-btn strong,
.toolbar-btn em,
.toolbar-btn u {
  color: inherit;
}

.toolbar-btn:hover {
  background: var(--ga-surface-hover);
}

.toolbar-btn.active {
  background: var(--ga-focus);
  color: var(--color-third);
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--ga-border);
  margin: 0 4px;
}

.rich-text-editor {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ga-text);
  background: var(--ga-surface);
}

.rich-text-editor:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 11px;
  /* Adjust padding to compensate for border width */
}

.rich-text-editor a {
  color: var(--color-third);
  text-decoration: underline;
  cursor: pointer;
}

.rich-text-editor a:hover {
  text-decoration: none;
}

.rich-text-editor:empty::before {
  content: attr(placeholder);
  color: var(--ga-text-muted);
}

.add-note-footer,
.edit-note-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.add-note-btn-cancel,
.edit-note-btn-cancel,
.add-note-btn-add,
.edit-note-btn-save {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #dadce0;
  transition: all 0.2s;
}

.add-note-btn-cancel,
.edit-note-btn-cancel {
  background: var(--ga-surface);
  color: var(--ga-text);
}

.add-note-btn-cancel:hover,
.edit-note-btn-cancel:hover {
  background: var(--ga-bg);
}

.add-note-btn-add,
.edit-note-btn-save {
  background: var(--color-third);
  color: var(--ga-surface);
  border-color: var(--color-third);
}

.add-note-btn-add:hover,
.edit-note-btn-save:hover {
  background: var(--ga-blue);
  border-color: var(--ga-blue);
  opacity: 0.9;
}

/* Toolbar Wrapper for dropdowns */
.toolbar-btn-wrapper {
  position: relative;
}

/* Text Size Dropdown */
.text-size-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--ga-shadow);
  min-width: 120px;
  z-index: 1000;
  padding: 4px 0;
}

.text-size-option {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--ga-text);
  cursor: pointer;
  transition: background 0.2s;
}

.text-size-option:hover {
  background: var(--ga-surface-hover);
}

.text-size-option.active {
  background: var(--ga-focus);
  color: var(--color-third);
}

/* Color Picker Dropdown */
.color-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--ga-shadow);
  padding: 8px;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 120px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: #dadce0;
}

.color-swatch.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.color-swatch[data-color="#000000"].selected::after {
  color: white;
}

.color-swatch:not([data-color="#000000"]).selected::after {
  color: white;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

/* Link Popup */
.link-popup {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--ga-shadow);
  padding: 16px;
  z-index: 1000;
  min-width: 280px;
}

.link-popup-field {
  margin-bottom: 12px;
}

.link-popup-field:last-of-type {
  margin-bottom: 16px;
}

.link-popup-field label {
  display: block;
  font-size: 13px;
  color: var(--ga-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.link-popup-field input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  box-sizing: border-box;
}

.link-popup-field input:focus {
  border-color: var(--color-third);
}

.link-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.link-remove-btn,
.link-apply-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.link-remove-btn {
  background: transparent;
  color: var(--ga-text-muted);
}

.link-remove-btn:hover {
  background: var(--ga-surface-hover);
}

.link-apply-btn {
  background: var(--color-third);
  color: var(--ga-surface);
}

.link-apply-btn:hover:not(:disabled) {
  background: var(--ga-blue);
  opacity: 0.9;
}

.link-apply-btn:disabled {
  background: var(--ga-border);
  color: var(--ga-text-muted);
  cursor: not-allowed;
}

@media (max-width: 1400px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .dashboard-header {
    flex-wrap: wrap;
  }

  .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .date-range-selector {
    flex-wrap: wrap;
    gap: 8px;
  }

  .date-range-btn {
    min-width: auto;
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 768px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
  }

  .dashboard-title-section {
    width: 100%;
  }

  .dashboard-title {
    font-size: 20px;
  }

  .dashboard-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .dashboard-controls-left {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-controls-right {
    width: 100%;
  }

  .date-range-selector {
    width: 100%;
    flex-wrap: wrap;
  }

  .date-range-btn {
    width: 100%;
    min-width: 100%;
  }

  .date-nav-buttons {
    margin-left: auto;
  }

  .widget-placeholder {
    min-height: 150px;
  }
}

@media (max-width: 576px) {
  .dashboard-editor-wrapper {
    padding: 16px;
    margin-top: 16px;
  }

  .dashboard-widget-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 400px;
  }

  .dashboard-header {
    padding: 16px 0;
  }

  .dashboard-title {
    font-size: 18px;
    padding: 4px 6px;
  }

  .dashboard-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas {
    width: 100%;
    justify-content: center;
  }

  .dashboard-controls-left {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .add-widget-btn {
    width: 40px;
    height: 40px;
  }

  .undo-redo-buttons {
    margin-left: 0;
  }

  .date-range-selector {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .date-range-btn {
    width: 100%;
  }

  .date-nav-buttons,
  .date-filter-btn {
    align-self: flex-end;
  }

  .widget-placeholder {
    min-height: 120px;
  }
}

/* Fullscreen Mode - Hide Sidebar */
body.dashboard-fullscreen .side-menu-wrapper {
  display: none !important;
}

body.dashboard-fullscreen .filter-bar-section {
  margin-left: 0 !important;
  padding-left: 24px !important;
}

body.dashboard-fullscreen .main-section {
  margin-left: 0 !important;
  width: 100% !important;
  padding-left: 24px !important;
}

body.dashboard-fullscreen .webContent {
  margin-left: 0 !important;
  padding-left: 0 !important;
  max-width: 100% !important;
}

body.dashboard-fullscreen .dashboard-editor-wrapper {
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  body.dashboard-fullscreen .filter-bar-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.dashboard-fullscreen .main-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.dashboard-fullscreen .dashboard-editor-wrapper {
    padding: 16px !important;
  }
}

@media (max-width: 576px) {
  body.dashboard-fullscreen .filter-bar-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.dashboard-fullscreen .main-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.dashboard-fullscreen .dashboard-editor-wrapper {
    padding: 12px !important;
  }
}

/* Date Range Picker Modal Styles */
.date-range-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.date-range-modal.show {
  display: block;
  pointer-events: auto;
}

.date-range-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.date-range-modal-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 10001;
}

.date-range-modal-body {
  pointer-events: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 640px;
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  position: fixed;
  z-index: 10002;
}

/* Left Side: Presets */
.date-range-presets {
  width: 200px;
  border-right: 1px solid var(--bg-gray2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

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

.preset-item {
  padding: 10px 16px;
  cursor: pointer;
  color: var(--color-first);
  font-size: 13px;
  transition: background 0.2s;
  border-bottom: 1px solid var(--bg-gray);
  white-space: nowrap;
}

.preset-item:hover {
  background: var(--color-hover);
}

.preset-item.active {
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: 500;
}

.compare-toggle-wrapper {
  padding: 16px;
  border-top: 1px solid var(--bg-gray2);
}

.compare-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
}

.compare-toggle-input {
  display: none;
}

.compare-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.3s;
}

.compare-toggle-slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.compare-toggle-input:checked + .compare-toggle-slider {
  background: #1a73e8;
}

.compare-toggle-input:checked + .compare-toggle-slider:before {
  transform: translateX(20px);
}

/* Right Side: Calendar */
.date-range-calendar {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  min-width: 0;
}

.calendar-date-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.date-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-input-group label {
  font-size: 12px;
  color: var(--color-dark);
  font-weight: 500;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  cursor: pointer;
}

.date-input:focus {
  outline: none;
  border-color: #1a73e8;
}

.date-separator {
  margin-top: 20px;
  color: var(--color-dark);
  font-weight: 500;
}

.calendar-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  max-height: 320px;
}

.calendar-wrapper {
  position: relative;
}

.calendar-month {
  margin-bottom: 16px;
}

.calendar-month:last-child {
  margin-bottom: 0;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 8px;
}

.month-year-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.month-year-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
  text-transform: uppercase;
}

.month-nav-buttons {
  display: flex;
  gap: 8px;
}

.month-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--bg-gray2);
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.month-nav-btn:hover {
  background: var(--color-hover);
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
}

.calendar-table thead th {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-dark);
  text-transform: uppercase;
}

.calendar-table td {
  padding: 6px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-first);
  position: relative;
  width: 32px;
  height: 32px;
}

.calendar-table td.other-month {
  color: #ccc;
}

/* .calendar-table td:hover:not(.disabled) {
            background: var(--color-hover);
            border-radius: 4px;
        } */

.calendar-table td.start-date,
.calendar-table td.end-date {
  background: #1a73e8;
  color: white;
  /* border-radius: 50%; */
  font-weight: 500;
}

.calendar-table td.start-date.in-range {
  background: #1a73e8;
  border-radius: 50% 0 0 50%;
}

.calendar-table td.end-date.in-range {
  background: #1a73e8;
  border-radius: 0 50% 50% 0;
}

.calendar-table td.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .calendar-scroll-wrapper {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: #1a73e8 !important;
  color: #fff;
}
.calendar-table td.start-date:hover,
.calendar-table td.end-date:hover {
  background-color: #000 !important;
  color: #fff !important;
}
.daterangepicker .applyBtn {
  color: #fff;
  background-color: #000;
  border-radius: 8px;
}
.daterangepicker .cancelBtn {
  color: #fff;
  background-color: #000;
  border-radius: 8px;
}
.daterangepicker .applyBtn:hover,
.daterangepicker .cancelBtn:hover {
  background-color: #1765cc;
}
.calendar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-gray2);
  margin-top: 16px;
}

.btn-calendar-cancel,
.btn-calendar-apply {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-calendar-cancel {
  background: var(--ga-surface);
  color: var(--color-first);
}

.btn-calendar-cancel:hover {
  background: var(--color-hover);
}

.btn-calendar-apply {
  background: var(--color-third);
  color: var(--ga-surface);
  border-color: var(--color-third);
}

.btn-calendar-apply:hover {
  background: var(--ga-blue);
  opacity: 0.9;
}

@media (max-width: 992px) {
  .date-range-modal-body {
    width: 90%;
    max-width: 600px;
    max-height: 480px;
  }

  .date-range-presets {
    width: 180px;
  }
}

/* Accounts Selection Modal Styles */
.accounts-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.accounts-modal.show {
  display: flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
}

.accounts-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.accounts-modal-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  width: 800px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.accounts-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bg-gray2);
}

.accounts-modal-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.accounts-modal-title-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-modal-dropdown {
  padding: 6px 32px 6px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: var(--ga-surface);
  color: var(--color-first);
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.accounts-modal-search-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.accounts-modal-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: var(--ga-surface);
}

.accounts-modal-search svg {
  color: var(--color-dark);
  flex-shrink: 0;
}

.accounts-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--color-first);
  background: transparent;
}

.accounts-selected-count {
  font-size: 14px;
  color: var(--color-first);
  white-space: nowrap;
}

.accounts-clear-all {
  background: none;
  border: none;
  color: var(--color-third);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

.accounts-clear-all:hover {
  text-decoration: underline;
}

.accounts-modal-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
  max-height: calc(90vh - 180px);
}

.accounts-list-section {
  flex: 1;
  border-right: 1px solid var(--bg-gray2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.accounts-list-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-gray2);
}

.accounts-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-third);
}

.accounts-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.accounts-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.accounts-list-item:hover {
  background: var(--color-hover);
}

.accounts-list-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1a73e8;
  flex-shrink: 0;
}

.accounts-item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.accounts-item-primary {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-item-secondary {
  font-size: 14px;
  color: var(--color-dark);
}

.accounts-selected-section {
  width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg-gray);
}

.accounts-selected-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg-gray2);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
}

.accounts-selected-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.accounts-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

.accounts-selected-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.accounts-selected-item-primary {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.accounts-selected-item-secondary {
  font-size: 13px;
  color: var(--color-dark);
}

.accounts-selected-item-remove {
  background: none;
  border: none;
  color: var(--color-dark);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.accounts-selected-item-remove:hover {
  opacity: 1;
}

.accounts-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--bg-gray2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.accounts-btn-cancel,
.accounts-btn-save {
  padding: 8px 16px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.accounts-btn-cancel {
  background: white;
  color: #1a73e8;
  border-color: transparent;
}

.accounts-btn-cancel:hover {
  background: var(--color-hover);
}

.accounts-btn-save {
  background: #1a73e8;
  color: white;
  border-color: #1a73e8;
}

.accounts-btn-save:hover {
  background: #1557b0;
  border-color: #1557b0;
}

@media (max-width: 768px) {
  .date-range-modal-body {
    flex-direction: column;
    width: calc(100% - 40px);
    max-width: 540px;
    left: 20px !important;
    right: 20px !important;
    max-height: calc(100vh - 40px);
    height: auto;
  }

  .accounts-modal-content {
    width: calc(100% - 40px);
    max-height: calc(100vh - 40px);
  }

  .accounts-modal-body {
    flex-direction: column;
  }

  .accounts-list-section {
    border-right: none;
    border-bottom: 1px solid var(--bg-gray2);
    max-height: 300px;
  }

  .accounts-selected-section {
    width: 100%;
    max-height: 200px;
  }
}

.date-range-presets {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--bg-gray2);
  max-height: 250px;
  overflow-y: auto;
}

.date-range-calendar {
  padding: 12px;
}

.calendar-date-inputs {
  flex-wrap: wrap;
  gap: 8px;
}

.date-input-group {
  flex: 1;
  min-width: 140px;
}

.date-separator {
  margin-top: 0;
  align-self: flex-end;
  margin-bottom: 24px;
}

.calendar-container {
  padding: 4px 0;
}

.calendar-month {
  margin-bottom: 16px;
}

/* } */

@media (max-width: 576px) {
  .date-range-modal-body {
    width: calc(100% - 20px);
    left: 10px !important;
    right: 10px !important;
    top: 60px !important;
    max-height: calc(100vh - 80px);
  }

  .date-range-presets {
    max-height: 200px;
    padding: 0;
  }

  .preset-item {
    padding: 10px 12px;
    font-size: 13px;
  }

  .date-range-calendar {
    padding: 12px 8px;
  }

  .calendar-date-inputs {
    flex-direction: column;
    gap: 12px;
  }

  .date-input-group {
    width: 100%;
  }

  .date-separator {
    display: none;
  }

  .calendar-date-inputs {
    margin-bottom: 12px;
  }

  .calendar-header {
    padding: 6px 0;
  }

  .month-year-text {
    font-size: 13px;
  }

  .month-nav-btn {
    width: 28px;
    height: 28px;
  }

  .calendar-table {
    font-size: 13px;
  }

  .calendar-table td,
  .calendar-table th {
    padding: 6px 4px;
  }

  .calendar-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .btn-calendar-cancel,
  .btn-calendar-apply {
    width: 100%;
    justify-content: center;
  }

  .compare-toggle-wrapper {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .date-range-modal-body {
    width: calc(100% - 16px);
    left: 8px !important;
    right: 8px !important;
    border-radius: 4px;
  }

  .date-range-presets {
    width: 100%;
  }

  .calendar-date-inputs {
    gap: 8px;
  }

  .calendar-table {
    font-size: 12px;
  }

  .calendar-table td,
  .calendar-table th {
    padding: 4px 2px;
  }
}

/* Rename Dashboard Modal Styles */
.rename-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.rename-modal.show {
  display: flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
}

.rename-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.rename-modal-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  width: 480px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.rename-modal-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-first);
  margin: 0;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--bg-gray2);
}

.rename-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rename-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rename-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.rename-label-link {
  color: var(--color-third);
  position: relative;
  padding-bottom: 4px;
}

.rename-label-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-third);
}

.rename-input {
  padding: 10px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: var(--ga-surface);
  outline: none;
  transition: border-color 0.2s;
}

.rename-input:focus {
  border-color: var(--color-third);
}

.rename-input-focused {
  border-color: var(--color-third);
}

.rename-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--bg-gray2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--ga-surface);
}

.rename-btn-cancel,
.rename-btn-save {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.rename-btn-cancel {
  background: transparent;
  color: var(--color-third);
}

.rename-btn-cancel:hover {
  background: var(--color-hover);
}

.rename-btn-save {
  background: var(--color-third);
  color: var(--ga-surface);
}

.rename-btn-save:hover {
  background: var(--ga-blue);
  opacity: 0.9;
}

/* Save Dashboard Modal Styles */
.save-dashboard-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

.save-dashboard-modal.show {
  display: flex;
  pointer-events: auto;
}

.save-dashboard-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.save-dashboard-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  width: 480px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.save-dashboard-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-first);
  margin: 0;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--bg-gray2);
}

.save-dashboard-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.save-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.save-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.save-input,
.save-select {
  padding: 10px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: var(--ga-surface);
  outline: none;
  transition: border-color 0.2s;
}

.save-input:focus,
.save-select:focus {
  border-color: var(--color-third);
}

.save-select {
  cursor: pointer;
}

.save-info-box {
  padding: 12px;
  background: var(--ga-focus);
  border-radius: 4px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.save-info-box svg {
  color: var(--color-third);
  flex-shrink: 0;
  margin-top: 2px;
}

.save-info-box span {
  font-size: 14px;
  color: var(--color-first);
  line-height: 1.5;
}

.save-dashboard-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--bg-gray2);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--ga-surface);
}

.save-btn-cancel,
.save-btn-save {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.save-btn-cancel {
  background: transparent;
  color: var(--color-third);
}

.save-btn-cancel:hover {
  background: var(--color-hover);
}

.save-btn-save {
  background: var(--color-third);
  color: var(--ga-surface);
}

.save-btn-save:hover {
  background: var(--ga-blue);
  opacity: 0.9;
}

/* Schedule Modal Styles */
.schedule-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

.schedule-modal.show {
  display: flex;
  pointer-events: auto;
}

.schedule-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.schedule-modal-content {
  position: relative;
  background: var(--ga-surface);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--ga-shadow);
  width: 540px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
}

.schedule-modal-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--ga-text);
  margin: 0;
  padding: 24px 24px 20px;
  flex-shrink: 0;
  letter-spacing: 0;
}

.schedule-modal-body {
  padding: 0 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.schedule-time-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-frequency-time-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.schedule-frequency-group,
.schedule-time-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.schedule-frequency-group {
  min-width: 140px;
}

.schedule-time-group {
  min-width: 140px;
}

.schedule-time-group .schedule-label {
  opacity: 0;
  height: 20px;
  pointer-events: none;
}

.schedule-timezone {
  font-size: 12px;
  color: var(--ga-text-muted);
  margin-top: 4px;
  padding-left: 0;
}

.schedule-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ga-text-muted);
  line-height: 20px;
  margin-bottom: 0;
}

.schedule-select {
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  cursor: pointer;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f6368' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

.schedule-select:hover {
  border-color: var(--ga-text-muted);
}

.schedule-select:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
  padding-right: 31px;
}

.schedule-textarea {
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  resize: vertical;
  font-family: inherit;
  width: 100%;
  min-height: 80px;
  line-height: 20px;
  box-sizing: border-box;
}

.schedule-textarea:hover {
  border-color: var(--ga-text-muted);
}

.schedule-textarea:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input {
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--ga-text);
  background: var(--ga-surface);
  outline: none;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  height: 36px;
  line-height: 20px;
}

.schedule-input:hover {
  border-color: var(--ga-text-muted);
}

.schedule-input.error {
  border-color: var(--color-red);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input:focus {
  border-color: var(--color-third);
  border-width: 2px;
  padding: 7px 11px;
}

.schedule-input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-input-group .schedule-label {
  margin-bottom: 0;
}

.schedule-recipients-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ga-surface);
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--ga-shadow);
  margin-top: 4px;
  padding: 8px 0;
  z-index: 1000;
}

.schedule-recipient-item {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-recipient-item input[type="checkbox"] {
  cursor: pointer;
}

.schedule-recipient-item label {
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
}

.schedule-error {
  color: var(--color-red);
  font-size: 12px;
  margin-top: 4px;
  line-height: 16px;
}

.schedule-owner-display {
  font-size: 14px;
  color: var(--ga-text);
  padding: 0;
  line-height: 20px;
}

.schedule-info-box {
  padding: 12px 16px;
  background: var(--ga-focus);
  border-radius: 4px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 0;
}

.schedule-info-box svg {
  color: var(--color-third);
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.schedule-info-box span {
  font-size: 13px;
  color: var(--ga-text);
  line-height: 20px;
}

.schedule-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--ga-surface);
  flex-shrink: 0;
}

.schedule-btn-cancel,
.schedule-btn-schedule {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 88px;
  height: 36px;
  box-sizing: border-box;
}

.schedule-btn-cancel {
  background: transparent;
  color: var(--color-third);
}

.schedule-btn-cancel:hover {
  background: var(--ga-focus);
}

.schedule-btn-schedule {
  background: var(--color-third);
  color: var(--ga-surface);
  box-shadow: 0 1px 2px 0 var(--ga-shadow), 0 1px 3px 1px var(--ga-shadow);
}

.schedule-btn-schedule:hover {
  background: var(--ga-blue);
  opacity: 0.9;
  box-shadow: 0 1px 3px 0 var(--ga-shadow), 0 4px 8px 3px var(--ga-shadow);
}

/* Send Feedback Modal Styles */
.send-feedback-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.send-feedback-modal.show {
  display: block;
  pointer-events: auto;
}

.send-feedback-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.send-feedback-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  width: 400px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.send-feedback-modal.show .send-feedback-content {
  transform: translateX(0);
}

.send-feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--bg-gray2);
  flex-shrink: 0;
}

.send-feedback-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--color-first);
  margin: 0;
}

.send-feedback-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-dark);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.send-feedback-close:hover {
  opacity: 1;
}

.send-feedback-illustration {
  padding: 40px 24px 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
}

.feedback-illustration-icon {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-feedback-options {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.feedback-option-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}

.feedback-option-btn:hover {
  background: #f8f9fa;
  border-color: #1a73e8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feedback-option-btn svg {
  width: 24px;
  height: 24px;
  color: #4285f4;
}

.feedback-option-btn svg {
  flex-shrink: 0;
}

/* Report Issue Modal Styles */
.report-issue-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.report-issue-modal.show {
  display: block;
  pointer-events: auto;
}

.report-issue-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.report-issue-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  width: 600px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.report-issue-modal.show .report-issue-content {
  transform: translateX(0);
}

.report-issue-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--bg-gray2);
  gap: 12px;
  flex-shrink: 0;
}

.report-issue-back,
.report-issue-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-dark);
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.report-issue-back:hover,
.report-issue-close:hover {
  opacity: 1;
}

.report-issue-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-first);
  margin: 0;
  flex: 1;
}

.report-issue-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.report-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-label {
  font-size: 14px;
  color: var(--color-first);
  font-weight: 500;
}

.report-select,
.report-textarea {
  padding: 10px 12px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-first);
  background: white;
  outline: none;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.report-select:focus,
.report-textarea:focus {
  border-color: #1a73e8;
}

.report-select {
  cursor: pointer;
}

.report-textarea {
  resize: vertical;
  min-height: 100px;
}

.report-help-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-dark);
  margin-top: 4px;
}

.report-help-text svg {
  flex-shrink: 0;
}

.screenshot-container {
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  overflow: hidden;
}

.screenshot-placeholder {
  padding: 40px;
  text-align: center;
  background: #f8f9fa;
}

.capture-screenshot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  transition: all 0.2s;
}

.capture-screenshot-btn:hover {
  background: var(--color-hover);
  border-color: #1a73e8;
}

.screenshot-preview {
  position: relative;
}

.screenshot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--bg-gray2);
}

.screenshot-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-first);
}

.screenshot-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #ea4335;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.screenshot-delete:hover {
  opacity: 1;
}

.screenshot-image-wrapper {
  position: relative;
  padding: 16px;
  background: white;
  overflow: hidden;
}

.screenshot-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.screenshot-annotation-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.highlight-hide-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  border: 2px solid #1a73e8;
  border-radius: 24px;
  color: #1a73e8;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
}

.highlight-hide-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.highlight-hide-btn svg {
  width: 20px;
  height: 20px;
}

.report-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-checkbox {
  cursor: pointer;
}

.report-checkbox-label {
  font-size: 14px;
  color: var(--color-first);
  cursor: pointer;
}

.report-privacy-text {
  font-size: 13px;
  color: var(--color-dark);
  line-height: 1.5;
}

.report-link {
  color: #1a73e8;
  text-decoration: none;
}

.report-link:hover {
  text-decoration: underline;
}

.report-issue-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--bg-gray2);
  display: flex;
  justify-content: flex-end;
  background: white;
}

.report-btn-send {
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  background: #1a73e8;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.report-btn-send:hover {
  background: #1557b0;
}

.report-btn-send:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Screenshot Annotation Modal Styles */
.screenshot-annotation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}

.screenshot-annotation-modal.show {
  display: flex;
  pointer-events: auto;
}

.screenshot-annotation-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.screenshot-annotation-content {
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  width: 90vw;
  max-width: 1200px;
  height: 90vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  z-index: 10003;
  overflow: hidden;
}

.annotation-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid #dadce0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  background: white !important;
}

.annotation-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 1 !important;
}

.annotation-title {
  font-size: 20px;
  font-weight: 400;
  color: #202124;
  margin: 0;
}

.annotation-tools {
  display: flex;
  gap: 0;
  border: 1px solid #dadce0;
  border-radius: 4px;
  overflow: hidden;
}

.annotation-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-right: 1px solid #dadce0;
  border-radius: 0;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  transition: all 0.2s;
  white-space: nowrap;
}

.annotation-tool-btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.annotation-tool-btn:last-child {
  border-right: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.annotation-tool-btn:hover:not(.active) {
  background: #f8f9fa;
}

.annotation-tool-btn.active {
  background: #1a73e8;
  color: white;
  border-color: #1a73e8;
  position: relative;
  z-index: 1;
}

.annotation-tool-btn.active:hover {
  background: #1557b0;
}

.annotation-tool-btn.active svg {
  stroke: white;
  fill: none;
}

.annotation-tool-btn[data-tool="hide"].active svg {
  fill: white;
  stroke: white;
}

.annotation-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: auto;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#annotationCanvas {
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
  touch-action: none;
  user-select: none;
}

.annotation-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #dadce0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  background: white !important;
  flex-shrink: 0 !important;
}

.annotation-btn-cancel,
.annotation-btn-done {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 88px;
  height: 36px;
  box-sizing: border-box;
}

.annotation-btn-cancel {
  background: transparent;
  color: #1a73e8;
}

.annotation-btn-cancel:hover {
  background: rgba(26, 115, 232, 0.08);
}

.annotation-btn-done {
  background: #1a73e8;
  color: white;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
    0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.annotation-btn-done:hover {
  background: #1557b0;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
    0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

/* Feedback Confirmation Modal Styles */
.feedback-confirmation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  pointer-events: none;
}

.feedback-confirmation-modal.show {
  display: block;
  pointer-events: auto;
}

.feedback-confirmation-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.feedback-confirmation-content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  width: 400px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  z-index: 10001;
  overflow: hidden;
  text-align: center;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.feedback-confirmation-modal.show .feedback-confirmation-content {
  transform: translateX(0);
}

.feedback-confirmation-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-dark);
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 1;
}

.feedback-confirmation-close:hover {
  opacity: 1;
}

.feedback-confirmation-illustration {
  padding: 60px 24px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.confirmation-illustration-icon {
  width: 180px;
  height: 135px;
}

.feedback-confirmation-text {
  padding: 0 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.confirmation-title {
  font-size: 22px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 12px;
}

.confirmation-message {
  font-size: 14px;
  color: #5f6368;
  line-height: 1.5;
  margin: 0;
}

.feedback-confirmation-footer {
  padding: 24px;
  flex-shrink: 0;
}

.confirmation-btn-close {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  background: #1a73e8;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.confirmation-btn-close:hover {
  background: #1557b0;
}

/* ============================================
   COMPREHENSIVE RESPONSIVE STYLES
   ============================================ */

/* Large Desktop (1920px and above) */
@media (min-width: 1920px) {
  .dashboard-editor-wrapper {
    max-width: 1800px;
    margin: 0 auto;
  }

  .dashboard-widget-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Desktop (1400px - 1919px) */
@media (max-width: 1919px) and (min-width: 1400px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Medium Desktop (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-controls-right {
    flex-wrap: wrap;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-header {
    flex-wrap: wrap;
  }

  .dashboard-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .dashboard-controls {
    flex-wrap: wrap;
  }

  .date-range-selector {
    flex-wrap: wrap;
  }

  /* Modals */
  .date-range-modal-body {
    width: 90%;
    max-width: 700px;
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content {
    width: 500px;
  }

  .schedule-modal-content {
    width: 500px;
  }

  .send-feedback-content,
  .report-issue-content {
    width: 500px;
  }

  .screenshot-annotation-content {
    width: 95vw;
    max-width: 1000px;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
  }

  .dashboard-title-section {
    width: 100%;
  }

  .dashboard-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }

  .dashboard-controls-left,
  .dashboard-controls-right {
    width: 100%;
  }

  .date-range-selector {
    width: 100%;
    flex-wrap: wrap;
  }

  .date-range-btn {
    flex: 1;
    min-width: 200px;
  }

  /* Modals */
  .date-range-modal-body {
    flex-direction: column;
    width: calc(100% - 40px);
    max-width: 600px;
    left: 20px !important;
    right: 20px !important;
    max-height: calc(100vh - 40px);
  }

  .date-range-presets {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dadce0;
    max-height: 200px;
    overflow-y: auto;
  }

  .date-range-calendar {
    width: 100%;
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content {
    width: 90%;
    max-width: 500px;
  }

  .schedule-modal-content {
    width: 90%;
    max-width: 500px;
  }

  .send-feedback-content,
  .report-issue-content {
    width: 90%;
    max-width: 500px;
  }

  .screenshot-annotation-content {
    width: 95vw;
    height: 85vh;
  }

  .annotation-header {
    padding: 16px 20px;
    flex-wrap: wrap;
  }

  .annotation-header-left {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }

  .annotation-title {
    font-size: 18px;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  .dashboard-editor-wrapper {
    padding: 12px;
    margin-top: 12px;
  }

  .dashboard-widget-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .dashboard-header {
    padding: 12px 0;
  }

  .dashboard-title {
    font-size: 18px;
  }

  .dashboard-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas,
  .btn-download,
  .btn-schedule,
  .btn-feedback,
  .btn-edit {
    flex: 1;
    min-width: 120px;
  }

  .dashboard-controls-left {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .add-widget-btn {
    width: 44px;
    height: 44px;
  }

  .date-range-selector {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .date-range-btn {
    width: 100%;
  }

  .accounts-selector,
  .date-nav-buttons,
  .date-filter-btn {
    width: 100%;
  }

  /* Modals */
  .date-range-modal-body {
    width: calc(100% - 32px);
    left: 16px !important;
    right: 16px !important;
    top: 80px !important;
    max-height: calc(100vh - 100px);
  }

  .date-range-presets {
    max-height: 180px;
  }

  .calendar-table {
    font-size: 13px;
  }

  .calendar-table td,
  .calendar-table th {
    padding: 6px 4px;
    width: 36px;
    height: 36px;
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .schedule-modal-content {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .send-feedback-content,
  .report-issue-content {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .feedback-confirmation-content {
    width: calc(100% - 32px);
    max-width: 100%;
  }

  .screenshot-annotation-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .annotation-header {
    padding: 12px 16px;
  }

  .annotation-title {
    font-size: 16px;
  }

  .annotation-tools {
    flex: 1;
  }

  .annotation-tool-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .annotation-canvas-wrapper {
    padding: 12px;
  }

  .annotation-footer {
    padding: 12px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .annotation-btn-cancel,
  .annotation-btn-done {
    width: 100%;
  }
}

/* Mobile Portrait (480px - 575px) */
@media (max-width: 575px) and (min-width: 480px) {
  .dashboard-editor-wrapper {
    padding: 10px;
    margin-top: 10px;
  }

  .dashboard-widget-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 400px;
  }

  .dashboard-header {
    padding: 10px 0;
  }

  .dashboard-title {
    font-size: 16px;
    padding: 4px 8px;
  }

  .dashboard-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas,
  .btn-download,
  .btn-schedule,
  .btn-feedback,
  .btn-edit {
    width: 100%;
    justify-content: center;
  }

  .dashboard-controls {
    gap: 12px;
  }

  .dashboard-controls-left {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .add-widget-btn {
    width: 40px;
    height: 40px;
    align-self: flex-start;
  }

  .undo-redo-buttons {
    margin-left: 0;
    align-self: flex-start;
  }

  .date-range-selector {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .date-range-btn {
    width: 100%;
  }

  .accounts-selector {
    width: 100%;
  }

  .accounts-text {
    font-size: 13px;
  }

  .widget-placeholder {
    min-height: 120px;
  }

  /* Modals */
  .date-range-modal-body {
    width: calc(100% - 20px);
    left: 10px !important;
    right: 10px !important;
    top: 60px !important;
    max-height: calc(100vh - 80px);
    padding: 12px;
  }

  .date-range-presets {
    max-height: 150px;
    font-size: 13px;
  }

  .preset-item {
    padding: 10px 12px;
  }

  .calendar-table {
    font-size: 12px;
  }

  .calendar-table td,
  .calendar-table th {
    padding: 4px 2px;
    width: 32px;
    height: 32px;
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content {
    width: calc(100% - 20px);
    max-width: 100%;
  }

  .schedule-modal-content {
    width: calc(100% - 20px);
    max-width: 100%;
  }

  .send-feedback-content,
  .report-issue-content {
    width: calc(100% - 20px);
    max-width: 100%;
  }

  .feedback-confirmation-content {
    width: calc(100% - 20px);
    max-width: 100%;
  }

  .screenshot-annotation-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .annotation-header {
    padding: 10px 12px;
  }

  .annotation-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .annotation-title {
    font-size: 15px;
    width: 100%;
  }

  .annotation-tools {
    width: 100%;
  }

  .annotation-tool-btn {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
  }

  .annotation-canvas-wrapper {
    padding: 10px;
  }

  .annotation-footer {
    padding: 10px 12px;
    flex-direction: column-reverse;
  }

  .annotation-btn-cancel,
  .annotation-btn-done {
    width: 100%;
    padding: 10px 16px;
  }
}

/* Small Mobile (360px - 479px) */
@media (max-width: 479px) {
  .dashboard-editor-wrapper {
    padding: 8px;
    margin-top: 8px;
  }

  .dashboard-widget-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 300px;
  }

  .dashboard-header {
    padding: 8px 0;
  }

  .dashboard-title {
    font-size: 14px;
    padding: 4px 6px;
  }

  .dashboard-actions {
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas,
  .btn-download,
  .btn-schedule,
  .btn-feedback,
  .btn-edit {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
  }

  .dashboard-controls {
    gap: 10px;
  }

  .dashboard-controls-left {
    flex-direction: column;
    gap: 8px;
  }

  .add-widget-btn {
    width: 36px;
    height: 36px;
  }

  .undo-redo-buttons button {
    width: 32px;
    height: 32px;
  }

  .widget-placeholder {
    min-height: 100px;
  }

  /* Modals */
  .date-range-modal-body {
    width: calc(100% - 16px);
    left: 8px !important;
    right: 8px !important;
    top: 50px !important;
    max-height: calc(100vh - 60px);
    padding: 10px;
    border-radius: 4px;
  }

  .date-range-presets {
    max-height: 120px;
    font-size: 12px;
  }

  .preset-item {
    padding: 8px 10px;
  }

  .calendar-table {
    font-size: 11px;
  }

  .calendar-table td,
  .calendar-table th {
    padding: 3px 1px;
    width: 28px;
    height: 28px;
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content {
    width: calc(100% - 16px);
    max-width: 100%;
  }

  .schedule-modal-content {
    width: calc(100% - 16px);
    max-width: 100%;
  }

  .send-feedback-content,
  .report-issue-content {
    width: calc(100% - 16px);
    max-width: 100%;
  }

  .feedback-confirmation-content {
    width: calc(100% - 16px);
    max-width: 100%;
  }

  .screenshot-annotation-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .annotation-header {
    padding: 8px 10px;
  }

  .annotation-title {
    font-size: 14px;
  }

  .annotation-tool-btn {
    padding: 6px 8px;
    font-size: 11px;
    gap: 4px;
  }

  .annotation-tool-btn svg {
    width: 16px;
    height: 16px;
  }

  .annotation-canvas-wrapper {
    padding: 8px;
  }

  .annotation-footer {
    padding: 8px 10px;
  }

  .annotation-btn-cancel,
  .annotation-btn-done {
    padding: 8px 12px;
    font-size: 13px;
    min-width: auto;
  }
}

/* Extra Small Mobile (below 360px) */
@media (max-width: 359px) {
  .dashboard-editor-wrapper {
    padding: 6px;
  }

  .dashboard-title {
    font-size: 13px;
  }

  .btn-cancel,
  .btn-save,
  .btn-saveas,
  .btn-download,
  .btn-schedule,
  .btn-feedback,
  .btn-edit {
    font-size: 12px;
    padding: 6px 10px;
  }

  .date-range-modal-body {
    width: calc(100% - 12px);
    left: 6px !important;
    right: 6px !important;
    padding: 8px;
  }

  /* Responsive Dropdowns and Menus */
  .dashboard-action-dropdown,
  .download-menu,
  .feedback-menu {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: 80px !important;
    width: 90% !important;
    max-width: 300px !important;
  }

  .dashboard-action-buttons {
    flex-wrap: wrap;
    gap: 6px;
  }

  .dashboard-action-btn {
    flex: 1;
    min-width: calc(50% - 3px);
  }

  /* Responsive Modal Headers and Footers */
  .rename-modal-header,
  .save-dashboard-header,
  .schedule-modal-title,
  .send-feedback-header,
  .report-issue-header {
    padding: 12px 16px;
  }

  .rename-modal-body,
  .save-dashboard-body,
  .schedule-modal-body,
  .send-feedback-options,
  .report-issue-body {
    padding: 16px;
  }

  .rename-modal-footer,
  .save-dashboard-footer,
  .schedule-modal-footer,
  .report-issue-footer {
    padding: 10px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .rename-btn-save,
  .save-btn-save,
  .schedule-btn-schedule,
  .report-btn-send,
  .rename-btn-cancel,
  .save-btn-cancel,
  .schedule-btn-cancel,
  .report-btn-cancel {
    width: 100%;
  }

  /* Responsive Accounts Modal */
  .accounts-modal-header {
    padding: 12px 16px;
  }

  .accounts-modal-body {
    padding: 16px;
    max-height: calc(100vh - 200px);
  }

  .accounts-modal-footer {
    padding: 10px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .accounts-btn-save,
  .accounts-btn-cancel {
    width: 100%;
  }

  /* Responsive Input Fields */
  .schedule-select,
  .schedule-input,
  .schedule-textarea,
  .rename-input,
  .save-input,
  .report-input,
  .report-textarea {
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  .accounts-modal-content,
  .rename-modal-content,
  .save-dashboard-modal-content,
  .schedule-modal-content,
  .send-feedback-content,
  .report-issue-content,
  .feedback-confirmation-content {
    width: calc(100% - 12px);
  }

  .annotation-title {
    font-size: 13px;
  }

  .annotation-tool-btn {
    padding: 5px 6px;
    font-size: 10px;
  }
}

/* scorecard */
.scorecard-modal {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.scorecard-body {
  overflow-y: auto;
  padding: 20px 24px;
  max-height: calc(90vh - 130px);
}

/* Responsive styles for scorecard modal */
@media (max-width: 768px) {
  .scorecard-modal {
    max-height: 95vh;
  }

  .scorecard-body {
    padding: 16px;
    max-height: calc(95vh - 120px);
  }

  .scorecard-modal .modal-header,
  .scorecard-modal .modal-footer {
    padding: 12px 16px;
  }

  .scorecard-modal .form-label {
    font-size: 13px;
  }

  .scorecard-modal .form-control {
    font-size: 14px;
    padding: 8px 12px;
  }

  .measures-panel {
    max-height: 250px;
  }

  .measures-body {
    max-height: 180px;
  }
}

@media (max-width: 576px) {
  .scorecard-modal {
    max-height: 100vh;
    margin: 0;
  }

  .scorecard-body {
    padding: 12px;
    max-height: calc(100vh - 100px);
  }

  .scorecard-modal .modal-header h5 {
    font-size: 18px;
  }

  .scorecard-modal .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  .scorecard-modal .modal-footer .btn {
    width: 100%;
    margin: 0;
  }

  .measures-panel {
    max-height: 200px;
  }

  .measures-body {
    max-height: 150px;
  }
}

.modal-header,
.modal-footer {
  flex-shrink: 0;
}

.measures-panel {
  margin-top: 12px;
  border-radius: 12px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  box-shadow: 0 6px 20px var(--ga-shadow);
  max-height: 320px;
  overflow: hidden;
}

.measures-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ga-border);
}

.measures-body {
  padding: 12px 16px;
  overflow-y: auto;
  max-height: 250px;
}

.link {
  color: #1a73e8;
  cursor: pointer;
  font-weight: 500;
}

.arrow {
  transition: 0.3s;
}

.collapsed > .measure-content {
  display: none;
}

.collapsed > .measure-title .arrow {
  transform: rotate(180deg);
}

/* Toggle switch */
.switch {
  position: relative;
  width: 40px;
  height: 20px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--ga-border);
  border-radius: 20px;
}

.slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--ga-surface);
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: var(--color-third);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* Responsive styles for note modals */
@media (max-width: 768px) {
  .add-note-content,
  .edit-note-content {
    width: 95%;
    max-width: 100%;
    max-height: 95vh;
  }

  .add-note-header,
  .edit-note-header {
    padding: 16px 20px 0;
  }

  .add-note-title,
  .edit-note-title {
    font-size: 18px;
  }

  .add-note-body,
  .edit-note-body {
    padding: 12px 20px;
  }

  .rich-text-toolbar {
    padding: 6px 0;
    gap: 2px;
  }

  .toolbar-btn {
    width: 28px;
    height: 28px;
  }

  .rich-text-editor {
    min-height: 150px;
    max-height: 300px;
    font-size: 14px;
  }

  .add-note-footer,
  .edit-note-footer {
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .add-note-footer .btn,
  .edit-note-footer .btn {
    flex: 1;
    min-width: 100px;
  }
}

@media (max-width: 576px) {
  .add-note-content,
  .edit-note-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .add-note-header,
  .edit-note-header {
    padding: 12px 16px 0;
  }

  .add-note-title,
  .edit-note-title {
    font-size: 16px;
  }

  .add-note-body,
  .edit-note-body {
    padding: 10px 16px;
  }

  .rich-text-toolbar {
    padding: 4px 0;
    gap: 1px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .toolbar-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .toolbar-btn span {
    font-size: 12px;
  }

  .rich-text-editor {
    min-height: 120px;
    max-height: calc(100vh - 250px);
    font-size: 14px;
    padding: 8px;
  }

  .add-note-footer,
  .edit-note-footer {
    padding: 10px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .add-note-footer .btn,
  .edit-note-footer .btn {
    width: 100%;
    margin: 0;
  }
}

/* measure */
/* INPUT + CHIPS */
.measure-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  background: var(--ga-surface);
  cursor: text;
  min-height: 40px;
}

.measure-input-wrapper input {
  border: none;
  outline: none;
  font-size: 14px;
  min-width: 80px;
  flex: 1;
  background: transparent;
  color: var(--ga-text-muted);
}

.measure-input-wrapper input::placeholder {
  color: var(--ga-text-muted);
}

.selected-measures {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.measure-chip {
  background: var(--ga-surface-hover);
  padding: 5px 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ga-text);
}

.measure-chip span {
  cursor: pointer;
  font-weight: bold;
}

/* PANEL */
.measures-panel {
  margin-top: 10px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 12px;
  box-shadow: 0 6px 20px var(--ga-shadow);
}

.measures-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--ga-border);
}

.measures-body {
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 16px;
}

.link {
  color: #1a73e8;
  cursor: pointer;
  font-weight: 500;
}

.measure-title {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
  font-weight: 500;
}

.measure-content {
  padding-left: 16px;
}

.measure-item {
  display: block;
  padding: 6px 0;
  cursor: pointer;
  color: var(--ga-text);
  transition: color 0.2s;
}

.measure-item:hover {
  color: var(--color-third);
}

.arrow {
  transition: 0.3s;
}

.collapsed > .measure-content {
  display: none;
}

.collapsed > .measure-title .arrow {
  transform: rotate(180deg);
}

/* Toggle */
.switch {
  width: 40px;
  height: 20px;
  position: relative;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 20px;
}

.slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: var(--color-third);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

#addConditionBtn.disabled {
  color: #9e9e9e;
  pointer-events: none;
}

#addConditionBtn.enabled {
  color: var(--color-third);
  pointer-events: auto;
  cursor: pointer;
  font-weight: 500;
}

/* Condition Row */
.condition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.condition-row select,
.condition-row input {
  height: 36px;
}

.condition-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* custon filter modal */
/* Trigger (Add filter) */
.filter-trigger {
  padding: 8px 12px;
  border: 1px solid var(--ga-border);
  border-radius: 4px;
  background: var(--ga-surface);
  cursor: pointer;
  font-weight: 400;
  color: var(--ga-text-muted);
  font-size: 14px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.filter-trigger.selected {
  color: var(--ga-text);
  border-color: var(--color-third);
}

.filter-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 260px;
  background: var(--ga-surface);
  border: 1px solid var(--ga-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--ga-shadow);
  overflow-y: auto;
  z-index: 1050;
  margin-top: 8px;
}

.filter-item {
  padding: 14px 16px;
  color: var(--ga-text);
  cursor: pointer;
  transition: background 0.2s;
}

.filter-item:hover {
  background: var(--ga-surface-hover);
}

.filter-item:hover {
  background: #f1f3f4;
}
/* audience css */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   AUDIENCES PAGE COMPONENT STYLES
   ============================================ */
.audiences-page {
  --aud-surface: var(--color-white);
  --aud-surface-alt: var(--bg-light-gray);
  --aud-border: var(--bg-gray2);
  --aud-accent: var(--color-third);
  --aud-danger: var(--color-red);
  --aud-hover: var(--color-hover);
  --aud-active: var(--color-active);
  --aud-muted: var(--color-dark);
  --aud-shadow: var(--shadow);
  background: var(--bg-gray);
  color: var(--color-first);
}

.audiences-page .hero,
.audiences-page .aud-card,
.audiences-page .demo-card {
  background: var(--aud-surface);
  border: 1px solid var(--aud-border);
  border-radius: 12px;
  box-shadow: var(--aud-shadow);
}

.audiences-page .demo-card {
  border-radius: 10px;
}

.audiences-page .hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.audiences-page .hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.audiences-page .hero-subtitle {
  color: var(--aud-muted);
  font-size: 0.95rem;
}

.audiences-page .hero-controls,
.audiences-page .quick-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.audiences-page .quick-filters {
  gap: 8px;
}

.audiences-page .pill-btn {
  border: 1px solid var(--aud-border);
  background: var(--aud-surface);
  color: var(--color-first);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.audiences-page .pill-btn:hover {
  background: var(--aud-hover);
}

.audiences-page .pill-btn.active {
  border-color: var(--aud-accent);
  color: var(--aud-accent);
  background: var(--aud-active);
}

.audiences-page .select,
.audiences-page .date-range-trigger {
  border: 1px solid var(--aud-border);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--aud-surface);
  color: var(--color-first);
  cursor: pointer;
  min-height: 40px;
}

.audiences-page .select {
  min-width: 180px;
}

.audiences-page .date-range-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.audiences-page .date-range-trigger .label {
  font-weight: 600;
}

.audiences-page .aud-banner {
  border: 1px solid var(--aud-accent);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-first);
}

.audiences-page .aud-banner i {
  color: var(--aud-accent);
  margin-right: 6px;
}

.audiences-page .aud-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audiences-page .metric-btn {
  border: 1px solid var(--bg-gray2);
  border-radius: 4px;
  padding: 12px;
  background: var(--color-white);
  gap: 10px;
  min-width: 140px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.audiences-page .metric-btn:hover {
  background: var(--color-hover);
  border-color: #cfd4dc;
}

.audiences-page .metric-btn .metric-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.audiences-page .aud-chevron {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.7;
}

.audiences-page .chart-controls {
  color: #6c757d;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  min-width: 82px;
  font-weight: 600;
  font-size: 12px;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.audiences-page .chart-controls svg {
  color: #6c757d;
}

.audiences-page .chart-controls:hover {
  background: var(--color-hover);
  border-color: #e0e4eb;
  color: var(--color-first);
}

.audiences-page .aud-metric,
.audiences-page .aud-control {
  position: relative;
}

.audiences-page .aud-menu {
  position: absolute;
  top: 58px;
  right: 0;
  min-width: 320px;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  padding: 6px 0;
  display: none;
  z-index: 20;
}

.audiences-page .aud-menu.visible {
  display: block;
}

.audiences-page .aud-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-first);
}

.audiences-page .aud-menu-item:hover {
  background: var(--bg-gray);
}

.audiences-page .aud-menu-item.disabled {
  color: var(--color-dark);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.audiences-page .aud-menu-item.active {
  color: var(--color-third);
}

.audiences-page .aud-card.expanded #audienceTrendChart {
  height: 420px !important;
}

.audiences-page .aud-table-toggle {
  font-weight: 600;
  color: var(--color-first);
}

.audiences-page .aud-table-shell table thead th {
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 1;
  border-bottom: 1px solid var(--bg-gray2);
}

.audiences-page .aud-table-shell table tbody td {
  border-bottom: 1px solid var(--bg-gray2);
  font-size: 14px;
}

.audiences-page .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 6px;
}

.audiences-page .status-dot.green {
  background: #28a745;
}

.audiences-page .status-dot.gray {
  background: #6c757d;
}

.audiences-page .status-dot.red {
  background: #c5221f;
}

.theme-dark #aud-date-apply {
  background: white !important;
  color: black !important;
}

.theme-dark .daterangepicker,
.theme-dark .daterangepicker > div,
.theme-dark .daterangepicker .drp-calendar,
.theme-dark .daterangepicker .calendar-table,
.theme-dark .daterangepicker .drp-input,
.theme-dark .custom-date-range {
  background: rgb(52, 58, 63) !important;
}

.theme-dark .daterangepicker .ranges li:hover {
  background: rgba(28, 34, 39, 1) !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-dark .daterangepicker td.available:hover:not(.active):not(.start-date):not(.end-date):not(.in-range) {
  background: rgba(66, 133, 244, 0.15) !important;
  color: #fff !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-dark .daterangepicker .calendar-table th.month select.month-year-select,
.theme-dark .daterangepicker .drp-input,
.theme-dark .daterangepicker label,
.theme-dark .daterangepicker li,
.theme-dark .daterangepicker .available:not(.off) {
  color: white !important;
}

/* Dark theme - Selected dates hover effect - darker blue instead of gray */
.theme-dark .daterangepicker td.start-date:hover,
.theme-dark .daterangepicker td.end-date:hover,
.theme-dark .daterangepicker td.active:hover,
.theme-dark .daterangepicker td.in-range:hover,
html[data-bs-theme="dark"] .daterangepicker td.start-date:hover,
html[data-bs-theme="dark"] .daterangepicker td.end-date:hover,
html[data-bs-theme="dark"] .daterangepicker td.active:hover,
html[data-bs-theme="dark"] .daterangepicker td.in-range:hover {
  background: #1765cc !important;
  color: #fff !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-dark .daterangepicker td.start-date,
.theme-dark .daterangepicker td.end-date,
.theme-dark .daterangepicker td.active,
html[data-bs-theme="dark"] .daterangepicker td.start-date,
html[data-bs-theme="dark"] .daterangepicker td.end-date,
html[data-bs-theme="dark"] .daterangepicker td.active {
  background: #1a73e8 !important;
  color: #fff !important;
}

.theme-dark .daterangepicker td.in-range,
html[data-bs-theme="dark"] .daterangepicker td.in-range {
  background: rgba(26, 115, 232, 0.25) !important;
}

.theme-dark .daterangepicker td.start-date.end-date:hover,
html[data-bs-theme="dark"] .daterangepicker td.start-date.end-date:hover {
  background: #1765cc !important;
}



.theme-dark #aud-date-cancel {
  background: transparent !important;
}

/* Ad Group Selection Modal Styles */
.ad-group-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ad-group-modal-overlay.show {
  display: flex;
  opacity: 1;
}

.ad-group-modal {
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.2s ease, opacity 0.2s ease;
  overflow: hidden;
  opacity: 0;
}

.ad-group-modal-overlay.show .ad-group-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.ad-group-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ad-group-modal-title {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
}

.ad-group-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  transition: background-color 0.15s ease;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: -8px;
}

.ad-group-modal-close:hover {
  background: rgba(95, 99, 104, 0.1);
}

.ad-group-modal-close svg {
  width: 20px;
  height: 20px;
}

.ad-group-modal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.ad-group-search-wrapper {
  margin-bottom: 16px;
}

.ad-group-search-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-group-search-label {
  font-size: 13px;
  color: #202124;
  line-height: 1.4;
}

.ad-group-search-link {
  color: #1a73e8;
  text-decoration: underline;
  cursor: pointer;
}

.ad-group-search-link:hover {
  color: #1557b0;
}

.ad-group-search-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.ad-group-search-icon {
  position: absolute;
  left: 12px;
  color: #5f6368;
  pointer-events: none;
  z-index: 1;
}

.ad-group-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: Roboto, Arial, sans-serif;
}

.ad-group-search-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

.ad-group-summary {
  font-size: 14px;
  color: #5f6368;
  margin-bottom: 8px;
  padding-top: 8px;
}

.ad-group-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.ad-group-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 44px;
}

/* .ad-group-item:hover {
        background: #f8f9fa;
    } */

.ad-group-item .status-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.ad-group-item .status-dot.green {
  background: #28a745;
}

.ad-group-item .status-dot.gray {
  background: #6c757d;
}

.ad-group-item .status-dot.red {
  background: #c5221f;
}

.ad-group-modal-body {
  display: flex;
  flex-direction: row;
}

.ad-group-modal-body > div {
  display: flex;
  flex-direction: column;
}

.ad-group-name {
  font-size: 14px;
  /* color: #202124; */
  font-family: Roboto, Arial, sans-serif;
}

.demo-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.demo-tab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.demo-tab.active {
  color: var(--color-third);
  border-bottom-color: var(--color-third);
}

.demo-banner {
  border: 1px solid var(--color-third);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--color-first);
}

.demo-banner .material-icons {
  color: var(--color-third);
}

.audiences-page .chart-footer {
  border-top: 1px solid var(--aud-border);
  padding: 12px;
}

.audiences-page .bottom-link {
  color: var(--aud-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.audiences-page .bottom-link:hover {
  color: var(--color-first);
}

.audiences-page .tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--aud-border);
  margin-bottom: 12px;
}

.audiences-page .tab-btn {
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--aud-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.audiences-page .tab-btn.active {
  border-bottom-color: var(--aud-accent);
  color: var(--aud-accent);
}

.audiences-page .demo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.audiences-page .download-btn {
  border: 1px solid var(--aud-border);
  background: var(--aud-surface);
  color: var(--color-first);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.audiences-page .download-btn:hover {
  background: var(--aud-hover);
}

.audiences-page .demo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: var(--aud-surface);
}

.audiences-page .demo-table th,
.audiences-page .demo-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--aud-border);
  text-align: left;
  white-space: nowrap;
  font-size: 0.95rem;
}

.audiences-page .demo-table th {
  background: var(--aud-surface-alt);
  color: var(--color-first);
  font-weight: 600;
}

.audiences-page .demo-table tbody tr:hover {
  background: var(--aud-hover);
}

.theme-dark .apexcharts-svg,
.theme-dark .side-fixed-menu-list .nav-link-tab.show-indicator .svg path {
  fill: rgba(255, 255, 255, 1) !important;
}

.audiences-page .aud-card.fullscreen-card {
  position: fixed;
  inset: 16px;
  z-index: 1060;
  overflow: auto;
  background: var(--bg-gray);
  max-width: 1200px;
  margin: 0 auto;
}

.audiences-page .table-shell,
.audiences-page .kw-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.audiences-page .kw-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.audiences-page .kw-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

.audiences-page .kw-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--bg-gray2);
  border-radius: 4px;
}

.audiences-page .table-sticky {
  min-width: 1400px;
  width: 100%;
  table-layout: auto;
  background: var(--color-white);
  border-collapse: collapse;
}

.audiences-page .table-sticky thead th,
.audiences-page .table-sticky tbody td {
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  padding: 10px;
  line-height: 20px;
  vertical-align: middle;
  background: var(--color-white);
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
}

.audiences-page .table-sticky thead th *,
.audiences-page .table-sticky tbody td * {
  white-space: nowrap !important;
}

.audiences-page .table-sticky thead th a,
.audiences-page .table-sticky tbody td a,
.audiences-page .table-sticky thead th span,
.audiences-page .table-sticky tbody td span {
  white-space: nowrap !important;
}

.audiences-page .table-sticky thead th {
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid var(--bg-gray2);
  border-bottom: 1px solid var(--bg-gray2);
  border-collapse: collapse;
  padding: 6px 10px;
  white-space: nowrap !important;
  overflow: visible;
  text-overflow: ellipsis;
  position: sticky;
  top: 0;
  z-index: 5;
}

.audiences-page .table-sticky thead th:last-child,
.audiences-page .table-sticky tbody td:last-child {
  border-right: 1px solid var(--bg-gray2) !important;
}

.audiences-page .table-sticky tbody tr:hover {
  background: #f8f9fa;
}

.audiences-page .row-selected {
  background: var(--color-active) !important;
}

/* Sticky column styles for first column ONLY */
.audiences-page .table-sticky th.sticky-col-1,
.audiences-page .table-sticky td.sticky-col-1 {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--color-white);
}

/* Raise z-index for header cells */
.audiences-page .table-sticky th.sticky-col-1 {
  z-index: 11 !important;
}

.audiences-page .table-sticky tbody td.sticky-col-1 {
  z-index: 11;
  background: var(--color-white);
}

/* Toolbar styles matching locations page */
.audiences-page .kw-table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 1rem;
  flex-wrap: wrap;
  background: var(--color-white);
}

.audiences-page .kw-table-controls .icon-group {
  display: flex;
  gap: 0;
  margin-left: auto;
}

.audiences-page .kw-icon-btn {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 2px;
  background: transparent;
  padding: 0 10px;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  color: gray;
  gap: 2px;
}

.audiences-page .kw-icon-btn:hover {
  background: var(--bg-gray);
}

.audiences-page .kw-icon-btn svg,
.audiences-page .kw-icon-btn .material-icons,
.audiences-page .kw-icon-btn path,
.audiences-page .kw-icon-btn rect,
.audiences-page .kw-icon-btn line,
.audiences-page .kw-icon-btn polygon,
.audiences-page .kw-icon-btn circle,
.audiences-page .kw-icon-btn ellipse,
.audiences-page .kw-icon-btn polyline,
.audiences-page .kw-icon-btn text {
  color: gray;
  font-size: 18px;
}

.audiences-page .kw-icon-btn span {
  font-size: 12px;
  font-weight: 500;
  color: gray;
}

.audiences-page .kw-flyout {
  position: absolute;
  top: 44px;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 10007 !important;
}

.audiences-page #audMoreMenu,
.audiences-page #demoMoreMenu {
  left: auto;
  right: 0;
}

.audiences-page .icon-group {
  position: relative;
  z-index: 1000;
}

.audiences-page .kw-table-controls .position-relative {
  z-index: 10003 !important;
}

.audiences-page .kw-table-controls {
  position: relative;
  z-index: 9999;
}

.audiences-page .kw-flyout.visible {
  display: block;
}

.audiences-page .kw-flyout ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.audiences-page .kw-flyout li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-first);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.audiences-page .kw-flyout li:hover {
  background: var(--bg-gray);
}

.audiences-page .kw-flyout-header {
  padding: 8px 16px 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bg-gray2);
  margin-bottom: 4px;
}

.audiences-page .filter-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.audiences-page .add-filter-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 600;
  transition: color 0.15s ease;
  padding: 0;
}

.audiences-page .info-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5f6368;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
  cursor: help;
}

.audiences-page .header-dashed {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

.audiences-page .kw-filter-menu {
  position: absolute;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  padding: 10px 0;
  min-width: 280px;
  top: 44px;
  left: 0;
  z-index: 9999999;
  display: none;
}

.audiences-page .kw-filter-menu.visible {
  display: block;
}

/* Table total row styling */
.audiences-page .table-total-row {
  background: #f8f9fa;
}

.audiences-page .table-total-row:nth-child(even) {
  background: #ffffff;
}

/* Offcanvas Columns Modal */
.columns-offcanvas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.columns-offcanvas-overlay.show {
  display: block !important;
  opacity: 1;
}

.columns-offcanvas {
  position: fixed !important;
  top: 0 !important;
  right: -800px;
  width: 800px;
  max-width: 90vw;
  height: 100vh !important;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 100000 !important;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  overflow: hidden;
}
.theme-dark .columns-offcanvas {
  background: #1e1e1e !important;
}
.columns-offcanvas.show {
  right: 0;
}

.columns-offcanvas-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.columns-offcanvas-title {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.columns-offcanvas-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #5f6368;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.audiences-page .columns-offcanvas-close:hover {
  background: #f1f3f4;
}

.columns-offcanvas-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

.columns-offcanvas-left {
  width: 75%;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.columns-offcanvas-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.audiences-page .columns-search-wrapper {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.audiences-page .columns-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.audiences-page .columns-search-input:focus {
  border-color: #1a73e8;
}

.audiences-page .columns-search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  font-size: 20px;
  pointer-events: none;
}

.audiences-page .columns-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.audiences-page .columns-category {
  border-bottom: 1px solid #f1f3f4;
}

.audiences-page .columns-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.audiences-page .columns-category-header:hover {
  background: #f8f9fa;
}

.audiences-page .columns-category-title {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.audiences-page .columns-category-chevron {
  color: #5f6368;
  font-size: 18px;
  transition: transform 0.2s;
}

.audiences-page .columns-category.expanded .columns-category-chevron {
  transform: rotate(90deg);
}

.audiences-page .columns-category-items {
  padding: 8px 0;
  display: none;
}

.audiences-page .columns-category.expanded .columns-category-items {
  display: block;
}

.audiences-page .columns-category-item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.audiences-page .columns-category-item:hover {
  background: #f8f9fa;
}

.audiences-page .column-select-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #dadce0;
  border-radius: 3px;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.audiences-page .column-select-indicator.selected {
  background: #1a73e8;
  border-color: #1a73e8;
}

.audiences-page .column-select-indicator.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.audiences-page .column-name {
  flex: 1;
  font-size: 14px;
  color: #202124;
  position: relative;
}

.audiences-page .columns-your-columns-title {
  font-size: 16px;
  font-weight: 500;
  color: #202124;
  padding: 20px 24px 8px;
  flex-shrink: 0;
}

.audiences-page .columns-drag-instruction {
  font-size: 13px;
  color: #5f6368;
  padding: 0 24px 12px;
  margin: 0;
  flex-shrink: 0;
}

.audiences-page .columns-your-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.audiences-page .columns-your-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.audiences-page .columns-your-item.draggable {
  cursor: move;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.audiences-page .columns-your-item.locked {
  cursor: default;
  background: #f8f9fa;
  touch-action: auto;
}

.audiences-page .columns-your-item.locked {
  cursor: default;
  background: #f8f9fa;
}

.audiences-page .columns-your-item.dragging {
  opacity: 0.5;
}

.audiences-page .columns-lock-icon,
.audiences-page .columns-drag-icon,
.audiences-page .columns-remove-icon {
  font-size: 18px;
  color: #5f6368;
  margin-right: 12px;
  flex-shrink: 0;
}

.audiences-page .columns-remove-icon {
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.audiences-page .columns-remove-icon:hover {
  background: #e8eaed;
  color: #202124;
}

.audiences-page .columns-your-item .column-name {
  flex: 1;
}

.audiences-page .columns-your-item .column-note {
  display: block;
  color: #5f6368;
  font-size: 12px;
  margin-top: 2px;
}

.columns-offcanvas-footer {
  border-top: 1px solid #e0e0e0;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.audiences-page .columns-footer-left,
.audiences-page .columns-footer-right {
  display: flex;
  align-items: center;
}

.audiences-page .columns-save-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
}

.audiences-page .columns-save-checkbox input {
  margin-right: 8px;
}

.audiences-page .columns-toggle-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
}

.audiences-page .columns-toggle-switch input {
  display: none;
}

.audiences-page .columns-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  margin-right: 12px;
  transition: background 0.3s;
}

.audiences-page .columns-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.audiences-page .columns-toggle-switch input:checked + .columns-toggle-slider {
  background: #1a73e8;
}

.audiences-page
  .columns-toggle-switch
  input:checked
  + .columns-toggle-slider::before {
  transform: translateX(20px);
}

.audiences-page .columns-footer-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.audiences-page .columns-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.audiences-page .columns-btn-apply {
  background: #1a73e8;
  color: white;
}

.audiences-page .columns-btn-apply:hover {
  background: #1557b0;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
}

.audiences-page .columns-btn-cancel {
  background: white;
  color: #1a73e8;
  border: 1px solid #dadce0;
}

.audiences-page .columns-btn-cancel:hover {
  background: #f8f9fa;
}

/* Global columns offcanvas styles (works when moved to body) */
.columns-search-wrapper,
.audiences-page .columns-search-wrapper {
  position: relative;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.columns-search-input,
.audiences-page .columns-search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.columns-search-input:focus,
.audiences-page .columns-search-input:focus {
  border-color: #1a73e8;
}

.columns-search-icon,
.audiences-page .columns-search-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  font-size: 20px;
  pointer-events: none;
}

.columns-categories,
.audiences-page .columns-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.columns-category,
.audiences-page .columns-category {
  border-bottom: 1px solid #f1f3f4;
}

.columns-category-header,
.audiences-page .columns-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.columns-category-title,
.audiences-page .columns-category-title {
  font-size: 14px;
  font-weight: 500;
}

.columns-category-chevron,
.audiences-page .columns-category-chevron {
  color: #5f6368;
  font-size: 18px;
  transition: transform 0.2s;
}

.columns-category.expanded .columns-category-chevron,
.audiences-page .columns-category.expanded .columns-category-chevron {
  transform: rotate(90deg);
}

.columns-category-items,
.audiences-page .columns-category-items {
  padding: 8px 0;
  display: none;
}

.columns-category.expanded .columns-category-items,
.audiences-page .columns-category.expanded .columns-category-items {
  display: block;
}

.columns-category-item,
.audiences-page .columns-category-item {
  display: flex;
  align-items: center;
  padding: 8px 16px 8px 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.column-select-indicator,
.audiences-page .column-select-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #dadce0;
  border-radius: 3px;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.column-select-indicator.selected,
.audiences-page .column-select-indicator.selected {
  background: #1a73e8;
  border-color: #1a73e8;
}

.column-select-indicator.selected::after,
.audiences-page .column-select-indicator.selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.column-name,
.audiences-page .column-name {
  flex: 1;
  font-size: 14px;
  position: relative;
}

.columns-your-columns-title,
.audiences-page .columns-your-columns-title {
  font-size: 16px;
  font-weight: 500;
  padding: 20px 24px 8px;
  flex-shrink: 0;
}

.columns-drag-instruction,
.audiences-page .columns-drag-instruction {
  font-size: 13px;
  color: #5f6368;
  padding: 0 24px 12px;
  margin: 0;
  flex-shrink: 0;
}

.columns-your-list,
.audiences-page .columns-your-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.columns-your-item,
.audiences-page .columns-your-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.columns-your-item.draggable,
.audiences-page .columns-your-item.draggable {
  cursor: move;
}

.columns-your-item.locked,
.audiences-page .columns-your-item.locked {
  cursor: default;
}

.columns-your-item.dragging,
.audiences-page .columns-your-item.dragging {
  opacity: 0.5;
}

.columns-lock-icon,
.columns-drag-icon,
.columns-remove-icon,
.audiences-page .columns-lock-icon,
.audiences-page .columns-drag-icon,
.audiences-page .columns-remove-icon {
  font-size: 18px;
  color: #5f6368;
  margin-right: 12px;
  flex-shrink: 0;
}

.columns-remove-icon,
.audiences-page .columns-remove-icon {
  margin-left: auto;
  margin-right: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s;
}

.columns-remove-icon:hover,
.audiences-page .columns-remove-icon:hover {
  background: #e8eaed;
  color: #202124;
}

.columns-your-item .column-name,
.audiences-page .columns-your-item .column-name {
  flex: 1;
}

.columns-your-item .column-note,
.audiences-page .columns-your-item .column-note {
  display: block;
  color: #5f6368;
  font-size: 12px;
  margin-top: 2px;
}

.columns-footer-left,
.columns-footer-right,
.audiences-page .columns-footer-left,
.audiences-page .columns-footer-right {
  display: flex;
  align-items: center;
}

.columns-save-checkbox,
.audiences-page .columns-save-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
}

.columns-save-checkbox input,
.audiences-page .columns-save-checkbox input {
  margin-right: 8px;
}

.columns-toggle-switch,
.audiences-page .columns-toggle-switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #202124;
}

.columns-toggle-switch input,
.audiences-page .columns-toggle-switch input {
  display: none;
}

.columns-toggle-slider,
.audiences-page .columns-toggle-slider {
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  margin-right: 12px;
  transition: background 0.3s;
}

.columns-toggle-slider::before,
.audiences-page .columns-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}

.columns-toggle-switch input:checked + .columns-toggle-slider,
.audiences-page .columns-toggle-switch input:checked + .columns-toggle-slider {
  background: #1a73e8;
}

.columns-toggle-switch input:checked + .columns-toggle-slider::before,
.audiences-page
  .columns-toggle-switch
  input:checked
  + .columns-toggle-slider::before {
  transform: translateX(20px);
}

.columns-footer-buttons,
.audiences-page .columns-footer-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.columns-btn,
.audiences-page .columns-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.columns-btn-apply,
.audiences-page .columns-btn-apply {
  background: #1a73e8;
  color: white;
}

.columns-btn-apply:hover,
.audiences-page .columns-btn-apply:hover {
  background: #1557b0;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3);
}

.columns-btn-cancel,
.audiences-page .columns-btn-cancel {
  background: white;
  color: #1a73e8;
  border: 1px solid #dadce0;
}

.columns-btn-cancel:hover,
.audiences-page .columns-btn-cancel:hover {
  background: #f8f9fa;
}

.columns-offcanvas-close:hover,
.audiences-page .columns-offcanvas-close:hover {
  background: #f1f3f4;
}

.audiences-page .kw-chevron {
  font-size: 14px;
  color: var(--color-dark);
  margin-left: auto;
}

.audiences-page .kw-submenu {
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  display: none;
  z-index: 10008 !important;
  max-height: 400px;
  overflow-y: auto;
}

.audiences-page .kw-flyout li.has-submenu {
  position: relative;
}

.audiences-page .kw-flyout li.has-submenu:hover {
  z-index: 10005 !important;
  background: var(--bg-gray);
}

.audiences-page .kw-flyout li.has-submenu:hover .kw-submenu {
  display: block;
  z-index: 10008 !important;
}

/* Submenu hover for aud-menu items */
.audiences-page .aud-menu-item.has-submenu {
  position: relative;
  cursor: pointer;
}

.audiences-page .aud-menu-item.has-submenu:hover {
  background: var(--bg-gray);
}

.audiences-page .aud-menu-item.has-submenu .kw-chevron {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-dark);
}

.audiences-page .kw-flyout li.has-submenu .kw-chevron {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-dark);
}

.audiences-page .kw-submenu li {
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--color-first);
  font-size: 14px;
}

.audiences-page .kw-submenu li:hover {
  background: var(--bg-gray);
}

.audiences-page .aud-menu .form-control {
  font-size: 14px;
}

.audiences-page .aud-menu .form-control:focus {
  border-color: var(--color-third);
  box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.1);
}

.audiences-page .date-popover {
  position: fixed;
  background: var(--aud-surface);
  border: 1px solid var(--aud-border);
  border-radius: 10px;
  box-shadow: var(--aud-shadow);
  padding: 12px;
  width: 260px;
  z-index: 30;
}

.audiences-page .date-popover .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.audiences-page .date-popover input[type="date"] {
  width: 100%;
  border: 1px solid var(--aud-border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--aud-surface);
  color: var(--color-first);
}

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

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
  .audiences-page .aud-card,
  .audiences-page .demo-card {
    max-width: 100%;
  }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
  .audiences-page .kw-table-controls {
    padding: 0.5rem 0.75rem;
  }

  .audiences-page .kw-icon-btn {
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media (max-width: 1199px) {
  .audiences-page .hero {
    padding: 14px;
  }

  .audiences-page .hero-header {
    flex-direction: column;
    align-items: stretch;
  }

  .audiences-page .hero-controls,
  .audiences-page .quick-filters {
    width: 100%;
    justify-content: flex-start;
  }

  .audiences-page .kw-table-controls {
    flex-wrap: wrap;
    gap: 8px;
  }

  .audiences-page .kw-icon-btn {
    min-width: auto;
    padding: 0 6px;
  }

  .audiences-page .kw-icon-btn span {
    font-size: 11px;
  }

  .audiences-page .aud-card,
  .audiences-page .demo-card {
    margin-bottom: 16px;
  }

  .audiences-page .table-sticky {
    min-width: 1200px;
  }
}

/* Tablet Portrait (768px - 991px) */
@media (max-width: 991px) {
  .audiences-page .hero {
    padding: 12px;
    gap: 10px;
  }

  .audiences-page .hero-title {
    font-size: 1.5rem;
  }

  .audiences-page .hero-subtitle {
    font-size: 0.875rem;
  }

  .audiences-page .hero-controls,
  .audiences-page .quick-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .audiences-page .pill-btn {
    width: 100%;
    justify-content: center;
  }

  .audiences-page .select {
    min-width: 100%;
  }

  .audiences-page .date-range-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .audiences-page .kw-table-controls {
    padding: 0.5rem;
    gap: 6px;
  }

  .audiences-page .kw-icon-btn {
    min-width: 0;
    padding: 8px 4px;
  }

  .audiences-page .kw-icon-btn .material-icons {
    font-size: 16px;
  }

  .audiences-page .kw-icon-btn span {
    font-size: 10px;
  }

  .audiences-page .kw-flyout {
    min-width: 200px;
    max-width: 90vw;
  }

  .audiences-page .kw-submenu {
    min-width: 200px;
    left: calc(100% + 2px);
  }

  .audiences-page .aud-card,
  .audiences-page .demo-card {
    padding: 12px;
  }

  .audiences-page .aud-card-header,
  .audiences-page .demo-card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .audiences-page .table-sticky {
    min-width: 1000px;
  }

  .audiences-page .aud-table-shell,
  .audiences-page .kw-table-wrapper {
    overflow-x: auto;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
  .audiences-page {
    padding: 8px;
  }

  .audiences-page .hero {
    padding: 10px;
    border-radius: 8px;
  }

  .audiences-page .hero-title {
    font-size: 1.25rem;
  }

  .audiences-page .hero-subtitle {
    font-size: 0.8125rem;
  }

  .audiences-page .hero-controls,
  .audiences-page .quick-filters {
    gap: 6px;
  }

  .audiences-page .pill-btn {
    font-size: 0.8125rem;
    padding: 6px 12px;
  }

  .audiences-page .select {
    font-size: 0.8125rem;
  }

  .audiences-page .kw-table-controls {
    padding: 0.375rem;
    flex-wrap: wrap;
  }

  .audiences-page .kw-icon-btn {
    flex: 0 0 auto;
    min-width: 60px;
    padding: 6px 4px;
  }

  .audiences-page .kw-icon-btn .material-icons {
    font-size: 18px;
  }

  .audiences-page .kw-icon-btn span {
    font-size: 9px;
    line-height: 1.2;
  }

  .audiences-page .kw-flyout {
    max-width: 85vw;
    left: 0;
    right: auto;
  }

  .audiences-page #audMoreMenu,
  .audiences-page #demoMoreMenu {
    left: 0;
    right: auto;
  }

  .audiences-page .kw-submenu {
    position: fixed;
    left: auto !important;
    right: 10px;
    transform: translateY(-50%);
    min-width: 180px;
    max-width: 70vw;
  }

  .audiences-page .aud-card,
  .audiences-page .demo-card {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .audiences-page .aud-card-header,
  .audiences-page .demo-card-header {
    padding: 8px 0;
  }

  .audiences-page .aud-card-title,
  .audiences-page .demo-card-title {
    font-size: 1rem;
  }

  .audiences-page .table-sticky {
    min-width: 800px;
    font-size: 12px;
  }

  .audiences-page .table-sticky thead th,
  .audiences-page .table-sticky tbody td {
    padding: 6px 8px;
  }

  .audiences-page .aud-table-shell,
  .audiences-page .kw-table-wrapper {
    border-radius: 6px;
  }

  .audiences-page .date-popover {
    width: 240px;
    max-width: 90vw;
  }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
  .audiences-page {
    padding: 6px;
  }

  .audiences-page .hero {
    padding: 8px;
    gap: 8px;
  }

  .audiences-page .hero-title {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .audiences-page .hero-subtitle {
    font-size: 0.75rem;
  }

  .audiences-page .hero-controls,
  .audiences-page .quick-filters {
    gap: 4px;
  }

  .audiences-page .pill-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
  }

  .audiences-page .select {
    font-size: 0.75rem;
    padding: 6px 8px;
  }

  .audiences-page .date-range-trigger {
    font-size: 0.75rem;
    padding: 6px 8px;
  }

  .audiences-page .kw-table-controls {
    padding: 0.25rem;
    gap: 4px;
  }

  .audiences-page .kw-icon-btn {
    min-width: 50px;
    padding: 4px 2px;
    gap: 1px;
  }

  .audiences-page .kw-icon-btn .material-icons {
    font-size: 16px;
  }

  .audiences-page .kw-icon-btn span {
    font-size: 8px;
    line-height: 1.1;
  }

  .audiences-page .kw-flyout-header {
    padding: 8px 12px;
    font-size: 11px;
  }

  .audiences-page .kw-flyout ul li {
    padding: 6px 12px;
    font-size: 12px;
  }

  .audiences-page .kw-submenu {
    min-width: 160px;
    max-width: 65vw;
    padding: 4px 0;
  }

  .audiences-page .kw-submenu li {
    padding: 6px 12px;
    font-size: 12px;
  }

  .audiences-page .aud-card,
  .audiences-page .demo-card {
    padding: 8px;
    margin-bottom: 10px;
  }

  .audiences-page .aud-card-header,
  .audiences-page .demo-card-header {
    padding: 6px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .audiences-page .aud-card-title,
  .audiences-page .demo-card-title {
    font-size: 0.9375rem;
  }

  .audiences-page .table-sticky {
    min-width: 700px;
    font-size: 11px;
  }

  .audiences-page .table-sticky thead th,
  .audiences-page .table-sticky tbody td {
    padding: 4px 6px;
    font-size: 11px;
  }

  .audiences-page .aud-menu {
    min-width: 182px;
    max-width: 85vw;
  }

  .audiences-page .aud-menu-item {
    padding: 8px 12px;
    font-size: 13px;
  }

  .audiences-page .date-popover {
    width: 220px;
    max-width: 85vw;
    padding: 10px;
  }

  /* Hide less important elements on very small screens */
  .audiences-page .hero-subtitle {
    display: none;
  }

  /* Stack chart controls vertically */
  .audiences-page .aud-card-header .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .audiences-page .aud-card-header .btn-group .btn {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* Extra Small Devices (up to 400px) */
@media (max-width: 400px) {
  .audiences-page .kw-icon-btn span {
    display: none;
  }

  .audiences-page .kw-icon-btn {
    min-width: 40px;
    padding: 6px;
  }

  .audiences-page .table-sticky {
    min-width: 600px;
  }

  .audiences-page .kw-submenu {
    min-width: 140px;
  }
}

/* Top Actions Responsive */
@media (max-width: 991px) {
  .top-actions-wrapper {
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
  }

  .top-actions {
    gap: 15px;
    flex-wrap: wrap;
  }

  .action-item {
    font-size: 12px;
  }

  .action-item .material-icons {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .top-actions-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .top-actions {
    justify-content: space-around;
    width: 100%;
    gap: 10px;
  }

  .action-item {
    flex: 1;
    min-width: 0;
  }

  .divider {
    display: none;
  }

  .ad-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .top-actions {
    gap: 8px;
  }

  .action-item {
    font-size: 11px;
  }

  .action-item .material-icons {
    font-size: 18px;
  }
}

/* Chart Responsive */
@media (max-width: 991px) {
  .audiences-page #audienceTrendChart,
  .audiences-page #demoChart {
    height: 300px !important;
  }

  .audiences-page .aud-card.expanded #audienceTrendChart {
    height: 350px !important;
  }
}

@media (max-width: 767px) {
  .audiences-page #audienceTrendChart,
  .audiences-page #demoChart {
    height: 250px !important;
  }

  .audiences-page .aud-card.expanded #audienceTrendChart {
    height: 300px !important;
  }
}

@media (max-width: 575px) {
  .audiences-page #audienceTrendChart,
  .audiences-page #demoChart {
    height: 200px !important;
  }

  .audiences-page .aud-card.expanded #audienceTrendChart {
    height: 250px !important;
  }
}

/* Demographics Tabs Responsive */
@media (max-width: 767px) {
  .audiences-page .demo-tabs {
    flex-wrap: wrap;
    gap: 4px;
  }

  .audiences-page .demo-tab {
    flex: 1;
    min-width: calc(50% - 4px);
    font-size: 0.8125rem;
    padding: 6px 8px;
  }
}

@media (max-width: 575px) {
  .audiences-page .demo-tabs {
    flex-direction: column;
  }

  .audiences-page .demo-tab {
    width: 100%;
    min-width: 100%;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 991px) and (orientation: landscape) {
  .audiences-page .hero {
    padding: 10px;
  }

  .audiences-page .aud-card,
  .audiences-page .demo-card {
    padding: 10px;
  }

  .audiences-page #audienceTrendChart,
  .audiences-page #demoChart {
    height: 280px !important;
  }
}

/* extra css */

.top-actions-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

.ad-btn {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 14px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  color: #444;
  gap: 5px;
}

.ad-btn:hover {
  background: #eee;
}

.divider {
  width: 1px;
  height: 32px;
  background: #d0d0d0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #5f6368;
  font-size: 14px;
}

.action-item .material-icons {
  font-size: 22px;
  margin-bottom: 3px;
  color: #5f6368;
}

.action-item:hover {
  color: #202124;
}

.action-item:hover .material-icons {
  color: #202124;
}

.someextra {
  width: 100% !important;
}

.dropdown-menu .list-group-item {
  cursor: pointer;
}

.dropdown-menu .list-group-item:hover {
  background: #f8f9fa;
}

/* Filter menu improvements */
.aud-filter-item,
.demo-filter-item {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.aud-filter-item:hover,
.demo-filter-item:hover {
  background-color: #f8f9fa;
}

.aud-column-toggle,
.demo-column-toggle {
  cursor: pointer;
}

.aud-column-toggle:hover,
.demo-column-toggle:hover {
  background-color: #f8f9fa;
}

.aud-column-toggle .form-check,
.demo-column-toggle .form-check {
  margin: 0;
  padding: 4px 0;
  cursor: pointer;
}

.aud-column-toggle .form-check-input,
.demo-column-toggle .form-check-input {
  cursor: pointer;
  margin-top: 0.25rem;
}

.aud-column-toggle .form-check-label,
.demo-column-toggle .form-check-label {
  cursor: pointer;
  margin-left: 0.5rem;
}

.aud-view-option,
.aud-segment-option,
.demo-segment-option {
  cursor: pointer;
}

.aud-view-option:hover,
.aud-segment-option:hover,
.demo-segment-option:hover {
  background-color: #f8f9fa;
}

/* Filter functionality styles */
.audiences-page .filter-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

.audiences-page .filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-third);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.audiences-page .add-filter-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-first);
  font-weight: 600;
  transition: color 0.15s ease;
}


.audiences-page .kw-filter-menu {
  position: absolute;
  background: var(--color-white);
  border: 1px solid var(--bg-gray2);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  padding: 10px 0;
  min-width: 280px;
  top: 44px;
  left: 0;
  z-index: 10;
  display: none;
}

.audiences-page .kw-filter-menu.visible {
  display: block;
}

.audiences-page #audAddFilterMenu .filter-item,
.audiences-page #demoAddFilterMenu .filter-item,
.audiences-page #exclusionsAddFilterMenu .filter-item,
.audiences-page #segmentsAddFilterMenu .filter-item {
  transition: background-color 0.15s ease;
}

.audiences-page #audAddFilterMenu .filter-item:hover,
.audiences-page #demoAddFilterMenu .filter-item:hover,
.audiences-page #exclusionsAddFilterMenu .filter-item:hover,
.audiences-page #segmentsAddFilterMenu .filter-item:hover {
  background-color: var(--bg-gray);
}

.audiences-page #audAddFilterMenu .filter-recent,
.audiences-page #demoAddFilterMenu .filter-recent,
.audiences-page #exclusionsAddFilterMenu .filter-recent,
.audiences-page #segmentsAddFilterMenu .filter-recent {
  transition: background-color 0.15s ease;
}

.audiences-page #audAddFilterMenu .filter-recent:hover,
.audiences-page #demoAddFilterMenu .filter-recent:hover,
.audiences-page #exclusionsAddFilterMenu .filter-recent:hover,
.audiences-page #segmentsAddFilterMenu .filter-recent:hover {
  background-color: var(--color-hover) !important;
}

/* Add Audience Button - Theme colors and no hover effect */
.audiences-page #addAudienceBtn {
  background: var(--color-first) !important;
  color: var(--color-white) !important;
}

[data-theme="dark"] .audiences-page #addAudienceBtn,
body.dark-mode .audiences-page #addAudienceBtn,
html.dark-mode .audiences-page #addAudienceBtn {
  background:  var(--color-first) !important;
  color: var(--color-white) !important;
}

.audiences-page #addAudienceBtn:hover,
.audiences-page #addAudienceBtn:focus,
.audiences-page #addAudienceBtn:active {
  background: var(--color-first) !important;
  color: var(--color-white) !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .audiences-page #addAudienceBtn:hover,
[data-theme="dark"] .audiences-page #addAudienceBtn:focus,
[data-theme="dark"] .audiences-page #addAudienceBtn:active,
body.dark-mode .audiences-page #addAudienceBtn:hover,
body.dark-mode .audiences-page #addAudienceBtn:focus,
body.dark-mode .audiences-page #addAudienceBtn:active,
html.dark-mode .audiences-page #addAudienceBtn:hover,
html.dark-mode .audiences-page #addAudienceBtn:focus,
html.dark-mode .audiences-page #addAudienceBtn:active {
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

.audiences-page #addAudienceBtn .material-icons,
.audiences-page #addAudienceBtn span {
  color: inherit !important;
}

.audiences-page .active-filters-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.audiences-page .status-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
}

.audiences-page .active-filter-pill {
  border: 1px solid var(--bg-gray2);
  border-radius: 18px;
  padding: 4px 12px;
  background: var(--color-white);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.audiences-page .active-filter-pill:hover {
  background: var(--bg-gray);
}

.audiences-page .filter-pill-close {
  color: var(--color-dark);
  font-size: 16px;
  line-height: 1;
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
}

.audiences-page .filter-pill-close:hover {
  color: var(--color-red);
}

/* Filter category styles */
.audiences-page .filter-category {
  border-bottom: 1px solid #f1f3f4;
}

.audiences-page .filter-category-header {
  transition: background-color 0.15s ease;
}

/* .audiences-page .filter-category-header:hover {
        background: #f8f9fa;
    } */

.audiences-page .filter-category-items .filter-item:hover {
  background: #f8f9fa;
}

.audiences-page .filter-category-items .filter-item.active {
  background: #e8f0fe;
}

/* Segment menu active states */
.audiences-page .kw-flyout li.segment-option.active,
.audiences-page .kw-flyout li.group-rows-option.active {
  background: #e8f0fe;
  color: #1a73e8;
}

.audiences-page .kw-flyout li.segment-option:hover,
.audiences-page .kw-flyout li.group-rows-option:hover {
  background: #f8f9fa;
}

/* Edit Audience Offcanvas (Right Side - 60% Width) */
.edit-audience-offcanvas-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(60, 64, 67, 0.4);
  backdrop-filter: blur(2px);
  z-index: 99999 !important;
  display: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.edit-audience-offcanvas-overlay.show {
  display: block !important;
  opacity: 1;
}

.edit-audience-offcanvas {
  position: fixed !important;
  top: 0 !important;
  right: -60vw;
  width: 60vw;
  max-width: 1200px;
  min-width: 650px;
  height: 100vh !important;
  /* background: #fff; */
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 100000 !important;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.edit-audience-offcanvas.show {
  background-color: #fff !important;
}

[data-theme="dark"] .edit-audience-offcanvas.show,
.dark .edit-audience-offcanvas.show,
body.dark-theme .edit-audience-offcanvas.show,
body.dark .edit-audience-offcanvas.show {
  background: var(--color-white) !important;
}

.edit-audience-offcanvas.show {
  right: 0;
}

.edit-audience-offcanvas-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e8eaed;
  flex-shrink: 0;
  gap: 16px;
  /* background: white; */
}

.edit-audience-offcanvas-title {
  font-size: 20px;
  font-weight: 500;
  /* color: #202124; */
  margin: 0;
  flex: 1;
}

.edit-audience-offcanvas-close {
  /* background: none; */
  border: none;
  font-size: 24px;
  /* color: #5f6368; */
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  flex-shrink: 0;
}

.edit-audience-offcanvas-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

.edit-audience-left {
  flex: 1;
  display: flex;
  /* flex-direction: column; */
  min-height: 0;
  overflow: hidden;
}

.edit-audience-left-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 220, 224, 0.5) transparent;
}

.edit-audience-left-scrollable::-webkit-scrollbar {
  width: 6px;
}

.edit-audience-left-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.edit-audience-left-scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(218, 220, 224, 0.5);
  border-radius: 3px;
}

.edit-audience-left-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(189, 193, 198, 0.8);
}

/* Input field focus states */
.edit-audience-left-scrollable input[type="text"]:focus,
.edit-audience-left-scrollable input[type="text"]:active,
.edit-audience-left-scrollable select:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1) !important;
  outline: none;
}

.edit-audience-footer {
  flex-shrink: 0;
  /* background: white; */
  padding: 16px 24px;
  border-top: 1px solid #e8eaed;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.edit-audience-right {
  width: 320px;
  min-width: 300px;
  border-left: 1px solid #e8eaed;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  flex-shrink: 0;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(218, 220, 224, 0.5) transparent;
}

.edit-audience-right::-webkit-scrollbar {
  width: 6px;
}

.edit-audience-right::-webkit-scrollbar-track {
  background: transparent;
}

.edit-audience-right::-webkit-scrollbar-thumb {
  background-color: rgba(218, 220, 224, 0.5);
  border-radius: 3px;
}

.edit-audience-right::-webkit-scrollbar-thumb:hover {
  background-color: rgba(189, 193, 198, 0.8);
}

.additional-demo-toggle {
  cursor: pointer;
}

@media (max-width: 1400px) {
  .edit-audience-offcanvas {
    width: 65vw;
    max-width: 1100px;
    min-width: 650px;
  }

  .edit-audience-right {
    width: 320px;
    min-width: 300px;
  }
}

@media (max-width: 1200px) {
  .edit-audience-offcanvas {
    width: 70vw;
    max-width: 900px;
    min-width: 600px;
  }

  .edit-audience-right {
    width: 300px;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .edit-audience-offcanvas {
    width: 90vw;
    max-width: 90vw;
    min-width: 90vw;
    right: -90vw;
  }

  .edit-audience-offcanvas-body {
    flex-direction: column;
  }

  .edit-audience-right {
    width: 50%;
    min-width: 50%;
    border-left: none;
    border-top: 1px solid #e8eaed;
  }

  .edit-audience-left {
    min-height: 60vh;
  }

  .edit-audience-left-scrollable {
    padding: 16px;
    width: 50%;
    min-width:50%;
  }

  .edit-audience-offcanvas-header {
    padding: 12px 16px;
  }

  .edit-audience-offcanvas-title {
    font-size: 1.125rem;
  }
}

@media (max-width: 575px) {
  .edit-audience-offcanvas {
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    right: -100vw;
  }

  .edit-audience-left-scrollable {
    padding: 12px;
  }

  .edit-audience-offcanvas-header {
    padding: 10px 12px;
  }

  .edit-audience-offcanvas-title {
    font-size: 1rem;
  }

  .edit-audience-footer {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
  }

  .edit-audience-footer .btn {
    width: 100%;
  }

  .edit-audience-right {
    padding: 12px;
  }
}

/* Segment and Search Term Chips */
.segment-chip,
.search-term-chip {
  transition: box-shadow 0.2s, border-color 0.2s;
}

.segment-chip:hover,
.search-term-chip:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #c0c0c0;
}

.remove-segment-btn:hover,
.remove-search-term-btn:hover {
  background: #f1f3f4 !important;
}

/* Suggested Segment Buttons */
.suggested-segment-btn {
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.suggested-segment-btn:hover {
  background: #d2e3fc !important;
  border-color: #1a73e8 !important;
}

/* Input Focus States */
#segmentSearchInput:focus,
#yourDataInput:focus,
#customSearchInput:focus,
#exclusionsInput:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

/* Toggle Sections */
.interests-toggle,
.suggested-segments-toggle,
.your-data-toggle,
.custom-search-toggle,
.exclusions-toggle {
  transition: background 0.2s;
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
}

.interests-toggle:hover,
.suggested-segments-toggle:hover,
.your-data-toggle:hover,
.custom-search-toggle:hover,
.exclusions-toggle:hover {
  background: #f8f9fa;
}

/* Tooltip positioning */
.segment-tooltip {
  pointer-events: none;
}

.kw-icon-btn {
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #1976d2;
  cursor: pointer;
  transition: background 0.2s;
}

.material-icons.text-lg {
  font-size: 20px;
}

.selected-text {
  font-weight: 500;
}

.dropdown-toggle::after {
  display: none;
  /* Hide default caret */
}

.dropdown-menu {
  min-width: 250px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#exclusionsTable th {
  /* background: #f8f9fa; */
  font-weight: 500;
  /* color: #202124; */
  padding: 12px 8px;
}

#exclusionsTable td {
  padding: 12px 8px;
}

#exclusionsTable tbody tr:hover {
  background: #f8f9fa;
}

.sortable {
  cursor: pointer;
  position: relative;
}

.sort-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  opacity: 0.3;
}

.sortable:hover .sort-icon {
  opacity: 0.6;
}

.sort-asc .sort-icon::after {
  content: "↑";
  opacity: 1;
}

.sort-desc .sort-icon::after {
  content: "↓";
  opacity: 1;
}

.exclusions-empty-state {
  color: #5f6368;
  font-size: 14px;
}

.exclusions-edit-btn {
  background: #1a73e8 !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  cursor: pointer !important;
}

.exclusions-edit-btn:hover {
  background: #1557b0 !important;
  box-shadow: 0 2px 4px rgba(26, 115, 232, 0.3) !important;
}

.table-responsive {
  overflow: hidden;
}

/* ADD THIS - GRAY BADGE LIKE IMAGE 1 */
.badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 500;
}

.badge.rounded-pill {
  border-radius: 50rem;
  padding: 0.25em 0.6em;
}

.level-badge {
  background: linear-gradient(135deg, #adb5bd 0%, #6c757d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.insights-wrap {
  padding: 50px 25px 50px 25px;
}

/* ============================================
   INSIGHTS PAGE COMPONENT STYLES
   ============================================ */
   

    :root {
        --color-primary: black;
        --color-primary-hover: rgba(0, 0, 0, 0.8);
        --color-secondary: #5f6368;
        --color-dark: #202124;
        --color-light: #5f6368;
        --color-border: #dadce0;
        --color-bg: #f8f9fa;
        --color-white: #ffffff;
        --color-success: #1e8e3e;
        --color-warning: #f9ab00;
        --color-error: #d93025;
        --color-conv: #5f6368;
        --color-cost: #ea4335;
        --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
        --shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    }

    .theme-dark {
        --color-primary: white;
        --color-primary-hover: rgba(255, 255, 255, 0.8);
        --color-secondary: #5f6368;
        --color-light: #a3a3a3;
        --color-dark: #f6faffff;
        --color-border: #505050ff;
        --color-bg: #303030ff;
        --color-white: #202124;
        --color-success: #1e8e3e;
        --color-warning: #f9ab00;
        --color-error: #d93025;
        --color-conv: #5f6368;
        --color-cost: #ea4335;
        --shadow-sm: 0 1px 2px 0 rgba(186, 186, 186, 0.3), 0 1px 3px 1px rgba(186, 186, 186, 0.3);
        --shadow-md: 0 1px 3px 0 rgba(186, 186, 186, 0.3), 0 4px 8px 3px rgba(186, 186, 186, 0.3);
    }
    body {
        font-family: 'Google Sans', 'Segoe UI', Roboto, Arial, sans-serif;
        background-color: var(--color-bg);
        color: var(--color-dark);
        line-height: 1.5;
    }

    .insightpage {
        min-height: 100vh;
        padding: 24px;
    }

    .page-shell {
        max-width: 1400px;
        margin: 0 auto;
    }

    .theme-dark .apexcharts-tooltip.apexcharts-theme-light,
    .theme-dark .apexcharts-tooltip.apexcharts-theme-light>div,
    .theme-dark .apexcharts-active {
        background: rgba(0, 0, 0, 0.96)
    }

    .page-header {
        margin-bottom: 24px;
    }

    .page-title {
        font-size: 22px;
        font-weight: 400;
        color: var(--color-dark);
    }

    .theme-dark .bg-light {
        background: #5f6368 !important;
    }

    .filter-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .filter-button {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s;
    }

    .filter-button:hover {
        background: var(--color-bg);
        border-color: var(--color-secondary);
    }

    .filter-label {
        font-size: 12px;
        color: var(--color-light);
        margin-bottom: 2px;
    }

    .filter-value {
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 500;
    }

    .compare-note {
        font-size: 12px;
        color: var(--color-light);
    }

    .filter-pills {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pill {
        padding: 4px 12px;
        background: #e8f0fe;
        color: var(--color-primary);
        border-radius: 16px;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
    }

    .pill.add {
        background: transparent;
        border: 1px dashed var(--color-border);
        color: var(--color-secondary);
        cursor: pointer;
    }

    .section-card {
        background: var(--color-white);
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 16px;
        box-shadow: var(--shadow-sm);
        position: relative;
    }

    .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
        gap: 16px;
    }

    #highlightData .section-head {
        padding: 24px 24px 0 24px;
        padding: 24px;
    }

    .section-head h2 {
        font-size: 18px;
        font-weight: 400;
        color: var(--color-dark);
        margin-bottom: 4px;
    }

    .section-sub {
        font-size: 13px;
        color: var(--color-light);
    }

    .attention-nav-buttons,
    .recommendation-nav {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .recommendation-pagination {
        font-size: 14px;
        color: var(--color-dark);
        padding: 0 4px;
    }

    .attention-nav-buttons {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 9999;
        transform: translate(-50%, -50%);
        width: calc(100% - 32px);
        justify-content: space-between;
        border-radius: 50%;

        .icon-button {
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
        }

        .swiper-button-disabled {
            visibility: hidden;
        }
    }


    .icon-button {
        width: 32px;
        height: 32px;
        border: 1px solid var(--color-border);
        background: var(--color-white);
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-secondary);
        transition: all 0.2s;
    }

    .icon-button:hover {
        background: var(--color-bg);
        border-color: var(--color-secondary);
    }

    .attention-row {
        overflow: hidden;
        max-height: 1000px;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 1;
        margin-top: 0px;
    }

    .attention-row.collapsed {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .attention-row-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: transform 0.3s ease, background-color 0.2s ease;
        color: var(--color-dark);
    }

    .attention-row-toggle:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    .attention-row-toggle svg {
        transition: transform 0.3s ease;
    }

    .attention-row-toggle.collapsed svg {
        transform: rotate(-90deg);
    }

    .attention-card {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 100%;
    }

    .attention-top {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .attention-id {
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 500;
    }

    .attention-status {
        display: inline-flex;
        padding: 4px 8px;
        background: #fef7e0;
        color: #f9ab00;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        width: fit-content;
    }


    .theme-dark .attention-status {
        background: #3a3a3aff;

    }


    .attention-issue {
        font-size: 13px;
        color: var(--color-dark);
    }

    .primary-btn {
        padding: 8px 24px;
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }

    .primary-btn:hover {
        background: var(--color-primary-hover);
        box-shadow: var(--shadow-sm);
    }

    .secondary-btn {
        padding: 8px 24px;
        background: var(--color-white);
        color: var(--color-primary);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }

    .secondary-btn:hover {
        background: var(--color-bg);
        border-color: var(--color-primary);
    }

    .radio-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .radio-chip {
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        transition: all 0.2s;
        gap: 12px;
    }

    .radio-chip input[type="radio"] {
        margin: 0;
        margin-top: 2px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--color-primary);
        flex-shrink: 0;
    }

    .radio-chip .radio-content {
        flex: 1;
    }

    .radio-chip .filter-label {
        font-size: 14px;
        color: var(--color-dark);
        line-height: 1.4;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .radio-chip .filter-label .filter-value {
        font-size: 14px;
        color: var(--color-dark);
        margin-top: 0;
        line-height: 1.4;
        display: none;
    }

    .radio-chip .filter-compare {
        font-size: 12px;
        color: var(--color-light);
        margin-top: 2px;
        display: none;
    }

    .radio-chip input[type="radio"]:checked~.radio-content .filter-compare,
    .radio-chip input[type="radio"]:checked~.radio-content .filter-value {
        display: inline-block;
    }

    .metrics-grid {
        /* display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 24px;
    }

    .metric-card {
        /* padding: 16px; */
        /* border: 1px solid var(--color-border); */
        border-radius: 8px;
        width: fit-content;
    }

    .metric-label {
        font-size: 13px;
        color: var(--color-light);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .legend-dot.legend-conv {
        background: var(--color-conv);
    }

    .legend-dot.legend-cost {
        background: var(--color-cost);
    }

    .metric-value {
        font-size: 28px;
        color: var(--color-dark);
        font-weight: 400;
        margin-bottom: 4px;
    }

    .metric-sub {
        font-size: 12px;
        color: var(--color-light);
    }

    .chart-wrapper {
        margin-top: 24px;
        position: relative;
    }

    .chart-legend {
        display: flex;
        gap: 20px;
        align-items: center;
        font-size: 13px;
        color: var(--color-light);
        margin-bottom: 16px;
    }

    #insightsTrend {
        max-width: 100%;
        min-height: 320px;
    }

    .highlights-tabs {
        display: flex;
        gap: 20px;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 20px;
        overflow-x: auto;
        padding: 0 24px;
    }

    .highlights-tab {
        padding: 6px 0;
        background: transparent;
        border: none;
        color: var(--color-secondary);
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        white-space: nowrap;
        font-family: inherit;
    }

    .highlights-tab:hover {
        color: var(--color-dark);
    }

    .highlights-tab.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .audience-tabs {
        display: flex;
        gap: 20px;
        /* border-bottom: 1px solid var(--color-border); */
        margin-bottom: 20px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0 24px;
    }

    .audience-tab {
        padding: 8px 16px;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        color: var(--color-secondary);
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        white-space: nowrap;
        font-family: inherit;
    }

    .audience-tab:hover {
        color: var(--color-dark);
    }

    .audience-tab.active {
        color: #1976d2;
        background: #e3f2fd;
    }

    #highlightData.section-card {
        padding: 0;
    }

    .highlights-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 1px solid var(--color-border);
    }

    .highlights-header-left {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 500;
    }

    .highlights-header-right {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .highlights-footer {
        display: flex;
        justify-content: flex-end;
        padding: 16px 24px;
        border-top: 1px solid var(--color-border);
    }

    .select {
        padding: 8px 32px 8px 12px;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        background: var(--color-white);
        font-size: 14px;
        color: var(--color-dark);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px;
    }

    .select:hover {
        border-color: var(--color-secondary);
    }

    .select:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    /* Dark theme styles for select */
    .theme-dark .select,
    [data-theme="dark"] .select,
    html[data-bs-theme="dark"] .select {
        background: rgb(52, 58, 63) !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .theme-dark .select:hover,
    [data-theme="dark"] .select:hover,
    html[data-bs-theme="dark"] .select:hover {
        border-color: rgba(255, 255, 255, 0.4) !important;
        background: rgb(60, 66, 71) !important;
    }

    .theme-dark .select:focus,
    [data-theme="dark"] .select:focus,
    html[data-bs-theme="dark"] .select:focus {
        border-color: #1a73e8 !important;
        background: rgb(60, 66, 71) !important;
    }

    .theme-dark .select option,
    [data-theme="dark"] .select option,
    html[data-bs-theme="dark"] .select option {
        background: rgb(52, 58, 63) !important;
        color: #fff !important;
    }

    .highlights-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        padding: 24px;
    }

    .highlight-block {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-right: 24px;
        border-right: 1px solid var(--color-border);
    }

    .highlight-block:last-child {
        padding-right: 0;
        border-right: none;
    }

    .block-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-dark);
        display: flex;
        align-items: center;
    }

    .block-desc {
        font-size: 12px;
        color: var(--color-light);
        margin-bottom: 8px;
    }

    .highlight-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: var(--color-bg);
        border-radius: 4px;
        font-size: 13px;
        gap: 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--color-border);
    }

    .highlight-item:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }

    .highlight-item span:first-child {
        flex: 1;
        color: var(--color-dark);
    }

    .highlight-item .delta {
        color: var(--color-success);
        font-weight: 500;
        text-align: right;
    }

    .highlight-item .delta.negative {
        color: var(--color-error);
    }

    .recommendation {
        /* border: 1px solid var(--color-border); */
        border-radius: 8px;
        /* padding: 16px; */
        background: var(--color-white);
    }

    .recommendation-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .recommendation-row .filter-label {
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 400;
        margin-bottom: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .recommendation-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .recommendation-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .recommendation-help {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid var(--color-border);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        color: var(--color-dark);
        transition: background-color 0.2s;
    }

    .recommendation-help:hover {
        background: var(--color-bg);
    }

    .recommendation-view-link {
        color: var(--color-primary);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s;
    }
    .recommendation-view-link:hover {
        color: var(--color-primary-hover);
    }
    .recommendation-view-link.is-disabled {
        color: var(--color-muted);          
        cursor: not-allowed;
        pointer-events: none;              
        opacity: 0.6;
    }

    .badge-impact {
        padding: 4px 12px;
        background: #e3f2fd;
        color: #1976d2;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .audience-table {
        width: 100%;
        border-collapse: collapse;
    }

    .audience-table th {
        text-align: left;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-light);
        border-bottom: 1px solid var(--color-border);
    }


    .audience-table td {
        padding: 16px;
        font-size: 13px;
        color: var(--color-dark);
        border-bottom: 1px solid var(--color-border);
    }

    .audience-table tr:hover {
        background: var(--color-bg);
    }

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

        .section-card {
            padding: 16px;
        }

        .section-head {
            flex-direction: column;
        }

        .metrics-grid {
            grid-template-columns: 1fr;
        }

        .highlights-columns {
            grid-template-columns: 1fr;
        }

        .highlight-block {
            padding-right: 0;
            padding-bottom: 24px;
            border-right: none;
            border-bottom: 1px solid var(--color-border);
        }

        .highlight-block:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

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

        .highlights-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 16px;
        }

        .highlights-header-left {
            width: 100%;
            font-size: 14px;
        }

        .highlights-header-right {
            flex-direction: column;
            width: 100%;
            gap: 12px;
            align-items: stretch;
        }

        .highlights-header-right .radio-group {
            flex-direction: column;
            width: 100%;
            gap: 8px;
        }

        .highlights-header-right .radio-chip {
            width: 100%;
            padding: 8px;
            min-width: 0;
        }

        .highlights-header-right .radio-chip .radio-content {
            min-width: 0;
            flex: 1;
            overflow: hidden;
        }

        .highlights-header-right .radio-chip .filter-label {
            flex-wrap: wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            font-size: 13px;
            line-height: 1.5;
        }

        .highlights-header-right .radio-chip .filter-label .filter-value {
            display: inline-block;
            word-wrap: break-word;
            overflow-wrap: break-word;
            font-size: 13px;
        }

        .highlights-header-right .radio-chip .filter-compare {
            display: block;
            word-wrap: break-word;
            overflow-wrap: break-word;
            font-size: 11px;
            line-height: 1.4;
            margin-top: 4px;
        }

        .highlights-header-right .radio-chip input[type="radio"]:checked~.radio-content .filter-compare {
            display: block;
        }

        .highlights-header-right .select {
            width: 100%;
            margin-left: 0 !important;
        }

        .recommendation-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .recommendation-row > div:first-child {
            width: 100%;
            min-width: 0;
            flex-wrap: wrap;
        }

        .recommendation-row > div:first-child > div:last-child {
            min-width: 0;
            flex: 1;
            overflow: visible;
            width: 100%;
            max-width: 100%;
        }

        .recommendation-row .filter-label {
            font-size: 13px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.5;
            max-width: 100%;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }

        .recommendation-actions {
            width: 100%;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-start;
        }

        .recommendation-view-link {
            font-size: 13px;
        }

        .badge-impact {
            font-size: 11px;
            padding: 3px 10px;
        }

        .primary-btn {
            font-size: 13px;
            padding: 8px 16px;
        }

        .recommendation-nav {
            gap: 8px;
        }

        .recommendation-pagination {
            font-size: 13px;
        }
    }

    .chart-tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        pointer-events: none;
        display: none;
        transform: translateX(-50%) translateY(-100%);
        white-space: nowrap;
        z-index: 100;
    }

    .chart-tooltip strong {
        display: block;
        margin-bottom: 4px;
    }


    /* BACKDROP */
    .drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
        z-index: 999998 !important;
    }

    /* DRAWER */
    .right-drawer {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 640px;
        max-width: 100%;
        background: var(--color-white, #fff);
        box-shadow: -20px 0 40px rgba(20, 20, 20, 0.12);
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
        z-index: 999998 !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* when open */
    .drawer-open .drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .drawer-open .right-drawer {
        transform: translateX(0);
    }

    /* header */
    .drawer-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 24px;
        border-bottom: 1px solid var(--color-border, #dadce0);
        min-height: 64px;
    }

    .drawer-header #drawerClose {
        padding: 8px;
        margin: -8px;
        border-radius: 50%;
        transition: background-color 0.2s;
    }

    .drawer-header #drawerClose:hover {
        background-color: rgba(60, 64, 67, 0.08);
    }

    .drawer-header #drawerClose svg {
        width: 24px;
        height: 24px;
        color: var(--color-dark, #202124);
    }

    .drawer-header h3 {
        font-size: 22px;
        font-weight: 400;
        margin: 0;
        color: var(--color-dark, #202124);
        flex: 1;
    }

    /* content */
    .drawer-content {
        padding: 24px;
        overflow-y: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Campaign Overview */
    .drawer-campaign-overview {
        margin-bottom: 24px;
    }

    .drawer-campaign-name {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-dark, #202124);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .drawer-campaign-name::before {
        content: '';
        width: 24px;
        height: 24px;
        background: #dadce0;
        border-radius: 4px;
        display: inline-block;
        flex-shrink: 0;
    }

    .drawer-status-badge {
        margin-bottom: 16px;
    }

    .drawer-status-badge span {
        display: inline-flex;
        padding: 4px 8px;
        background: #fef7e0;
        color: #f9ab00;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    .drawer-status-badge span.status-error {
        background: #fce8e6;
        color: #d93025;
    }

    .drawer-status-badge span.status-limited {
        background: #fef7e0;
        color: #f9ab00;
    }

    .drawer-bidding-strategy,
    .drawer-budget {
        font-size: 14px;
        color: var(--color-dark, #202124);
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .drawer-label {
        color: var(--color-light, #5f6368);
        margin-right: 4px;
    }

    /* Diagnostic Filters */
    .drawer-filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 24px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--color-border, #dadce0);
    }

    .drawer-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        background: var(--color-white, #fff);
        border: 1px solid var(--color-border, #dadce0);
        border-radius: 20px;
        font-size: 14px;
        font-weight: 400;
        color: var(--color-dark, #202124);
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
        line-height: 1.43;
    }

    .drawer-filter-btn:hover {
        background: var(--color-bg, #f8f9fa);
        border-color: var(--color-secondary, #5f6368);
    }

    .drawer-filter-btn.active {
        background: #e3f2fd;
        border-color: #e3f2fd;
        color: #1976d2;
    }

    .drawer-filter-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .drawer-filter-btn.active svg {
        color: #1976d2;
    }

    .drawer-filter-btn:not(.active) {
        color: #5f6368;
    }

    .drawer-filter-btn:not(.active) svg.warning-icon {
        color: #f9ab00;
    }

    .drawer-filter-btn:not(.active) svg.success-icon {
        color: #1e8e3e;
    }

    /* Issues Section */
    .drawer-issues {
        flex: 1;
        margin-bottom: 24px;
    }

    /* Issue Card */
    .issue-card {
        border: 1px solid var(--color-border, #dadce0);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        background: var(--color-white, #fff);
    }

    .issue-card-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .issue-card-icon {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .issue-card-icon svg {
        width: 20px;
        height: 20px;
    }

    .issue-card-icon.warning svg {
        color: #f9ab00;
    }

    .issue-card-icon.error svg {
        color: #d93025;
    }

    .issue-card-content {
        flex: 1;
    }

    .issue-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-dark, #202124);
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .issue-desc {
        font-size: 14px;
        color: var(--color-light, #5f6368);
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .issue-learn-more {
        display: inline-block;
        font-size: 14px;
        color: #1976d2;
        text-decoration: none;
        margin-bottom: 16px;
        font-weight: 500;
    }

    .issue-learn-more:hover {
        text-decoration: underline;
    }

    .issue-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .issue-actions .primary-btn {
        padding: 8px 24px;
        background: #1976d2;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
    }

    .issue-actions .primary-btn:hover {
        background: #1565c0;
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    }
    .drawer-footer {
        padding: 16px 24px;
        border-top: 1px solid var(--color-border, #dadce0);
        background: var(--color-white, #fff);
    }

    .help-cta {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-end;
    }

    .help-cta>span {
        font-size: 14px;
        color: var(--color-light, #5f6368);
    }

    .help-cta .icon-button {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-border, #dadce0);
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;
    }

    .help-cta .icon-button:hover {
        background: var(--color-bg, #f8f9fa);
        border-color: var(--color-secondary, #5f6368);
    }
    .icon-button {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
    }

    .theme-dark .daterangepicker,
    .theme-dark .daterangepicker>div,
    .theme-dark .daterangepicker .drp-calendar,
    .theme-dark .daterangepicker .calendar-table,
    .theme-dark .daterangepicker .drp-input,
    .theme-dark .custom-date-range {
        background: var(--color-white) !important;
    }

    .theme-dark .daterangepicker .ranges li:hover,
    .theme-dark .daterangepicker td.available:hover {
        background: rgba(28, 34, 39, 1) !important;
    }

    .theme-dark .daterangepicker .calendar-table th.month select.month-year-select,
    .theme-dark .daterangepicker .drp-input,
    .theme-dark .daterangepicker label,
    .theme-dark .daterangepicker li,
    .theme-dark .daterangepicker .available:not(.off) {
        color: white !important;
    }

    .theme-dark #aud-date-cancel {
        background: transparent !important;
    }

    .icon-button:hover {
        background: rgba(0, 0, 0, 0.04);
    }
    @media (max-width: 720px) {
        .right-drawer {
            width: 100%;
        }

        .drawer-content {
            padding: 16px;
        }

        .drawer-header {
            padding: 12px 16px;
        }
    }
    .attentionSwiper {
        width: 100%;
        padding-bottom: 0;
    }

    .attentionSwiper .swiper-slide {
        height: auto;
    }

    .w-fit {
        width: fit-content;
    }

    .no-highlight-bg .highlight-item {
        background: transparent;
    }

    .webContent {
        background-color: var(--bg-gray);
    }

    .section-card-interactions {
        position: absolute;
        left: calc(100% + 4px);
        top: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 10;
    }

    .section-interaction-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--color-secondary);
        padding: 0;
    }

    .section-interaction-btn:hover {
        transform: scale(1.05);
    }

    .section-interaction-btn svg {
        width: 20px;
        height: 20px;
    }
    @media (max-width: 768px) {
        .section-card-interactions {
            right: 8px;
            gap: 8px;
        }

        .section-interaction-btn {
            width: 36px;
            height: 36px;
        }

        .section-interaction-btn svg {
            width: 18px;
            height: 18px;
        }
    }
    .feedback-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
        z-index: 999999;
    }

    .feedback-modal-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    .feedback-dialog {
        position: fixed;
        background: var(--color-white);
        border-radius: 8px;
        padding: 24px;
        min-width: 400px;
        max-width: calc(100vw - 32px);
        max-height: 90vh;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
        opacity: 0;
        pointer-events: none;
        transition: all 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
        z-index: 1000000;
        display: flex;
        flex-direction: column;
        gap: 20px;
        transform: scale(0.9);
    }

    .feedback-modal-backdrop.show .feedback-dialog {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        top: 130px !important;
    }

    .feedback-dialog .title {
        font-size: 20px;
        font-weight: 500;
        color: var(--color-dark);
        margin: 0;
    }

    .feedback-dialog .description {
        font-size: 14px;
        color: var(--color-light);
        margin: 0;
    }

    .feedback-dialog .input-container {
        position: relative;
        width: 100%;
    }

    .feedback-dialog textarea {
        width: 100%;
        min-height: 120px;
        padding: 12px;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        font-family: inherit;
        font-size: 14px;
        color: var(--color-dark);
        resize: vertical;
        transition: border-color 0.2s;
        box-sizing: border-box;
    }

    .feedback-dialog textarea:focus {
        outline: none;
        border-color: #1976d2;
    }

    .feedback-dialog textarea::placeholder {
        color: var(--color-light);
    }

    .feedback-dialog .button-group {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 8px;
    }

    .feedback-dialog .btn-cancel,
    .feedback-dialog .btn-submit {
        padding: 8px 24px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        font-family: inherit;
        background: transparent;
        color: #1976d2;
    }

    .feedback-dialog .btn-cancel:hover,
    .feedback-dialog .btn-submit:hover {
        background: rgba(25, 118, 210, 0.08);
    }

    .feedback-dialog .btn-submit {
        color: #1976d2;
    }

    @media (max-width: 480px) {
        .feedback-dialog {
            min-width: calc(100% - 32px);
            padding: 20px;
        }
    }
    .feedback-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
        z-index: 999998;
    }

    .feedback-sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    .feedback-sidebars {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 400px;
        max-width: 90vw;
        background: var(--color-white);
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.24);
        transform: translateX(100%);
        transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
        z-index: 999999;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .feedback-sidebar-backdrop.show .feedback-sidebars {
        transform: translateX(0);
    }

    .feedback-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .feedback-sidebar-header .title {
        font-size: 20px;
        font-weight: 500;
        color: var(--color-dark);
        margin: 0;
    }

    .feedback-sidebar-close {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-dark);
        transition: background-color 0.2s;
        padding: 0;
    }

    .feedback-sidebar-close:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .feedback-sidebar-close svg {
        width: 24px;
        height: 24px;
    }

    .feedback-sidebar-content {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .feedback-sidebar-illustration {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .feedback-sidebar-illustration svg {
        width: 200px;
        height: 150px;
    }

    .feedback-sidebar-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .feedback-sidebar-option {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        background: var(--color-white);
    }

    .feedback-sidebar-option:hover {
        background: var(--color-bg);
        border-color: var(--color-secondary);
        box-shadow: var(--shadow-sm);
    }

    .feedback-sidebar-option-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .feedback-sidebar-option-icon svg {
        width: 24px;
        height: 24px;
        color: #1976d2;
    }

    .feedback-sidebar-option-text {
        flex: 1;
        font-size: 16px;
        font-weight: 500;
        color: var(--color-dark);
    }

    @media (max-width: 480px) {
        .feedback-sidebars {
            width: 100vw;
            max-width: 100vw;
        }
    }
  html[data-bs-theme="dark"]
.calendar-scroll-wrapper.drp-calendar
.month-view
.month-header
.month-year-dropdown
.month-year-select {
    background-color: #000 !important;
    color: #fff !important;
}
[data-theme="dark"] .apexcharts-text tspan {
    fill: #ffffff !important;
}
.audiences-page #segmentsSelectionBar .selection-count,
.audiences-page #exclusionsSelectionBar .selection-count {
    font-weight: 700;
    font-size: 15px;
}

.audiences-page #segmentsSelectionBar .selection-btn,
.audiences-page #exclusionsSelectionBar .selection-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.audiences-page #segmentsSelectionBar .selection-close,
.audiences-page #exclusionsSelectionBar .selection-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.audiences-page #segmentsSelectionBar .dropdown-menu,
.audiences-page #exclusionsSelectionBar .dropdown-menu {
    margin-top: 8px;
}

/* Bid adj. column hover edit icon */
.when-where-page #wwTable .ww-bid-adj-cell:hover .ww-edit-icon {
    opacity: 1 !important;
}

/* Bid Adjustment Modal Styling */
.ww-bid-modal .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 16px rgba(60, 64, 67, 0.3);
    background: var(--color-white);
}

.ww-bid-modal .modal-header {
    border-bottom: 1px solid var(--bg-gray2);
    padding: 20px 24px;
}

.ww-bid-modal .modal-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-first);
    margin: 0;
}

.ww-bid-modal .modal-body {
    padding: 24px;
}

.ww-bid-modal .form-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.ww-bid-modal .form-select,
.ww-bid-modal .form-control {
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-first);
    background: var(--color-white);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ww-bid-modal .form-select:focus,
.ww-bid-modal .form-control:focus {
    outline: none;
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}

.ww-bid-modal .input-group-text {
    background: var(--color-white);
    border: 1px solid #dadce0;
    border-left: none;
    border-radius: 0 8px 8px 0;
    color: var(--color-dark);
    padding: 10px 12px;
}

.ww-bid-modal .input-group .form-control {
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.ww-bid-modal .input-group .form-control:focus + .input-group-text {
    border-color: #1a73e8;
}

.ww-bid-modal .modal-footer {
    border-top: 1px solid var(--bg-gray2);
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.ww-bid-modal .ww-bid-cancel,
.ww-bid-modal .ww-bid-save {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ww-bid-modal .ww-bid-cancel:hover,
.ww-bid-modal .ww-bid-save:hover {
    background: rgba(26, 115, 232, 0.08);
}

.ww-bid-modal .ww-bid-save:hover {
    background: rgba(26, 115, 232, 0.12);
}

/* Dark theme styling */
.theme-dark .ww-bid-modal .modal-content,
html[data-bs-theme="dark"] .ww-bid-modal .modal-content {
    background: var(--color-white);
    border: 1px solid var(--bg-gray2);
}

.theme-dark .ww-bid-modal .modal-header,
html[data-bs-theme="dark"] .ww-bid-modal .modal-header {
    border-bottom-color: var(--bg-gray2);
}

.theme-dark .ww-bid-modal .modal-title,
html[data-bs-theme="dark"] .ww-bid-modal .modal-title {
    color: var(--color-first);
}

.theme-dark .ww-bid-modal .form-label,
html[data-bs-theme="dark"] .ww-bid-modal .form-label {
    color: var(--color-dark);
}

.theme-dark .ww-bid-modal .form-select,
.theme-dark .ww-bid-modal .form-control,
html[data-bs-theme="dark"] .ww-bid-modal .form-select,
html[data-bs-theme="dark"] .ww-bid-modal .form-control {
    background: var(--color-white);
    border-color: #dadce0;
    color: var(--color-first);
}

.theme-dark .ww-bid-modal .input-group-text,
html[data-bs-theme="dark"] .ww-bid-modal .input-group-text {
    background: var(--color-white);
    border-color: #dadce0;
    color: var(--color-dark);
}

.theme-dark .ww-bid-modal .modal-footer,
html[data-bs-theme="dark"] .ww-bid-modal .modal-footer {
    border-top-color: var(--bg-gray2);
}

.theme-dark .ww-bid-modal .ww-bid-cancel,
.theme-dark .ww-bid-modal .ww-bid-save,
html[data-bs-theme="dark"] .ww-bid-modal .ww-bid-cancel,
html[data-bs-theme="dark"] .ww-bid-modal .ww-bid-save {
    color: #1a73e8;
}