/**
 * Theme overlay: blue/slate palette.
 * Light mode = lightest shades (700–900). Dark mode = darkest shades (100–500).
 * Load after common.css. Only color variables are overridden.
 */

/* ---- Raw palette (for reference and reuse) ---- */
:root {
  /* smart_blue */
  --smart-blue-100: #011428;
  --smart-blue-200: #022950;
  --smart-blue-300: #023d78;
  --smart-blue-400: #0352a0;
  --smart-blue-500: #0466c8;
  --smart-blue-600: #0f85fa;
  --smart-blue-700: #4ba3fb;
  --smart-blue-800: #87c2fd;
  --smart-blue-900: #c3e0fe;
  /* sapphire */
  --sapphire-100: #011121;
  --sapphire-200: #012242;
  --sapphire-300: #023263;
  --sapphire-400: #034384;
  --sapphire-500: #0353a4;
  --sapphire-600: #0576e8;
  --sapphire-700: #3698fb;
  --sapphire-800: #79bbfc;
  --sapphire-900: #bcddfe;
  /* regal_navy */
  --regal-navy-100: #000c19;
  --regal-navy-200: #011932;
  --regal-navy-300: #01254b;
  --regal-navy-400: #023164;
  --regal-navy-500: #023e7d;
  --regal-navy-600: #0363c9;
  --regal-navy-700: #1d89fc;
  --regal-navy-800: #68b0fd;
  --regal-navy-900: #b4d8fe;
  /* prussian_blue (#002855) */
  --prussian-blue-100: #000811;
  --prussian-blue-200: #001023;
  --prussian-blue-300: #001834;
  --prussian-blue-400: #002045;
  --prussian-blue-500: #002855;
  --prussian-blue-600: #0050ab;
  --prussian-blue-700: #0178ff;
  --prussian-blue-800: #56a5ff;
  --prussian-blue-900: #aad2ff;
  /* prussian_blue_mid (#001845) */
  --prussian-blue-mid-100: #00050e;
  --prussian-blue-mid-200: #000a1d;
  --prussian-blue-mid-300: #000f2b;
  --prussian-blue-mid-400: #001439;
  --prussian-blue-mid-500: #001845;
  --prussian-blue-mid-600: #00389f;
  --prussian-blue-mid-700: #0056f7;
  --prussian-blue-mid-800: #508dff;
  --prussian-blue-mid-900: #a7c6ff;
  /* prussian_blue_dark (#001233) */
  --prussian-blue-dark-100: #00040a;
  --prussian-blue-dark-200: #000714;
  --prussian-blue-dark-300: #000b1f;
  --prussian-blue-dark-400: #000e29;
  --prussian-blue-dark-500: #001233;
  --prussian-blue-dark-600: #00328f;
  --prussian-blue-dark-700: #0052eb;
  --prussian-blue-dark-800: #4788ff;
  --prussian-blue-dark-900: #a3c3ff;
  /* twilight_indigo */
  --twilight-indigo-100: #0a0d12;
  --twilight-indigo-200: #141a25;
  --twilight-indigo-300: #1e2737;
  --twilight-indigo-400: #29344a;
  --twilight-indigo-500: #33415c;
  --twilight-indigo-600: #4d628b;
  --twilight-indigo-700: #7186b1;
  --twilight-indigo-800: #a0aecb;
  --twilight-indigo-900: #d0d7e5;
  /* blue_slate */
  --blue-slate-100: #131519;
  --blue-slate-200: #252a32;
  --blue-slate-300: #383f4c;
  --blue-slate-400: #4b5365;
  --blue-slate-500: #5c677d;
  --blue-slate-600: #79859c;
  --blue-slate-700: #9ba3b5;
  --blue-slate-800: #bcc2ce;
  --blue-slate-900: #dee0e6;
  /* slate_grey */
  --slate-grey-100: #191a1f;
  --slate-grey-200: #31353d;
  --slate-grey-300: #4a4f5c;
  --slate-grey-400: #62697a;
  --slate-grey-500: #7d8597;
  --slate-grey-600: #979dab;
  --slate-grey-700: #b1b6c0;
  --slate-grey-800: #cbced5;
  --slate-grey-900: #e5e7ea;
  /* lavender_grey */
  --lavender-grey-100: #1d1f24;
  --lavender-grey-200: #393d47;
  --lavender-grey-300: #565c6b;
  --lavender-grey-400: #737a8e;
  --lavender-grey-500: #979dac;
  --lavender-grey-600: #abb0bc;
  --lavender-grey-700: #c0c4cd;
  --lavender-grey-800: #d5d7dd;
  --lavender-grey-900: #eaebee;
}

/* ---- Light mode: lightest combination ---- */
:root,
[data-theme="light"] {
  --black-color: var(--twilight-indigo-500);
  --black-color-2: var(--twilight-indigo-400);
  --black-color-3: var(--blue-slate-500);
  --black-color-4: var(--blue-slate-400);
  --black-color-control-1: var(--twilight-indigo-300);
  --black-color-control-2: var(--twilight-indigo-400);
  --black-color-control-light: var(--blue-slate-400);
  --grey-color-1: var(--blue-slate-600);
  --grey-color-2: var(--slate-grey-600);
  --grey-color-3: var(--blue-slate-500);
  --grey-color-4: var(--slate-grey-600);
  --grey-color-5: var(--slate-grey-700);
  --grey-color-6: var(--blue-slate-600);
  --grey-color-7: var(--slate-grey-700);
  --grey-light-color-1: var(--lavender-grey-900);
  --grey-light-color-2: var(--slate-grey-800);
  --grey-light-color-3: var(--slate-grey-800);
  --grey-light-color-4: var(--lavender-grey-800);
  --grey-light-color-5: var(--slate-grey-900);
  --grey-light-color-6: var(--slate-grey-800);
  --white-color: #fff;
  --blue-color: var(--smart-blue-500);
  --blue-color-a15: rgba(4, 102, 200, 0.15);
  --blue-color-2: var(--smart-blue-600);
  --blue-color-control-1: var(--smart-blue-600);
  --blue-color-control-2: var(--sapphire-500);
  --primary-color: var(--smart-blue-500);
  --teal-color: #22cce2;
  --red-color: #fd594a;
  --red-color-2: #ff3d57;
  --green-color: #09b66d;
  --orange-color-1: #ff8a48;
  --orange-color-2: #fdbf5e;
}

/* ---- Dark mode: darkest combination ---- */
[data-theme="dark"] {
  --black-color: var(--lavender-grey-900);
  --black-color-2: var(--lavender-grey-800);
  --black-color-3: var(--lavender-grey-700);
  --black-color-4: var(--slate-grey-700);
  --black-color-control-1: var(--lavender-grey-800);
  --black-color-control-2: var(--lavender-grey-700);
  --black-color-control-light: var(--slate-grey-600);
  --grey-color-1: var(--slate-grey-600);
  --grey-color-2: var(--slate-grey-700);
  --grey-color-3: var(--blue-slate-600);
  --grey-color-4: var(--slate-grey-600);
  --grey-color-5: var(--slate-grey-700);
  --grey-color-6: var(--lavender-grey-600);
  --grey-color-7: var(--slate-grey-600);
  --grey-light-color-1: var(--prussian-blue-dark-200);
  --grey-light-color-2: var(--regal-navy-200);
  --grey-light-color-3: var(--prussian-blue-dark-300);
  --grey-light-color-4: var(--regal-navy-200);
  --grey-light-color-5: var(--prussian-blue-dark-200);
  --grey-light-color-6: var(--twilight-indigo-600);
  --white-color: var(--lavender-grey-900);
  --blue-color: var(--smart-blue-600);
  --blue-color-a15: rgba(15, 133, 250, 0.2);
  --blue-color-2: var(--smart-blue-700);
  --blue-color-control-1: var(--smart-blue-700);
  --blue-color-control-2: var(--smart-blue-600);
  --primary-color: var(--smart-blue-600);
  --teal-color: #22cce2;
  --red-color: #fd594a;
  --red-color-2: #ff3d57;
  --green-color: #09b66d;
  --orange-color-1: #ff8a48;
  --orange-color-2: #fdbf5e;
}

/* Dark mode: page/sidebar/header backgrounds (use semantic vars where possible) */
[data-theme="dark"] body,
[data-theme="dark"] .page-home {
  background-color: #0f172a;
}

[data-theme="dark"] .page-content {
  background-color: #0f172a;
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar__container {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .header,
[data-theme="dark"] .header__inner {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .sidebar__link {
  color: #cbd5e1;
}

[data-theme="dark"] .sidebar__link:hover,
[data-theme="dark"] .sidebar__link.active {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

[data-theme="dark"] .sidebar__logo-text {
  color: #f1f5f9;
}

/* Theme toggle button: show moon in light mode (click to go dark), sun in dark mode (click to go light) */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--grey-color-3);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle-btn:hover {
  color: var(--blue-color);
  background: var(--blue-color-a15);
}
.theme-toggle-btn__icon--moon {
  display: inline-flex;
}
.theme-toggle-btn__icon--sun {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn__icon--moon {
  display: none;
}
[data-theme="dark"] .theme-toggle-btn__icon--sun {
  display: inline-flex;
}
[data-theme="dark"] .theme-toggle-btn {
  color: #94a3b8;
}
[data-theme="dark"] .theme-toggle-btn:hover {
  color: #f1f5f9;
  background: rgba(99, 102, 241, 0.2);
}


/* Additional Dark Mode Overrides for Better Contrast */
[data-theme="dark"] .header__profile-text {
  color: #e2e8f0;
}

[data-theme="dark"] .header__profile-text span {
  color: #f1f5f9;
}

[data-theme="dark"] .header__profile-image {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

[data-theme="dark"] .header__profile-image-text {
  color: #fff;
}

[data-theme="dark"] .icon-arrow-down,
[data-theme="dark"] .icon-icon-arrow-down {
  color: #94a3b8;
}

/* ========================================
   Header Profile Styles
   ======================================== */

/* Profile toggle button */
.header__profile-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: 50px;
  background: var(--grey-light-color-1, #f8fafb);
  border: 1px solid var(--grey-light-color-3, #eaedf0);
  transition: all 0.2s ease;
  text-decoration: none;
}

.header__profile-toggle:hover {
  background: #ffffff;
  border-color: var(--blue-color, #0081ff);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .header__profile-toggle {
  background: rgba(30, 41, 59, 0.8);
  border-color: #334155;
}

[data-theme="dark"] .header__profile-toggle:hover {
  background: rgba(30, 41, 59, 1);
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Profile image */
.header__profile-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.header__profile-image-text {
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

[data-theme="dark"] .header__profile-image {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

/* Profile text */
.header__profile-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--black-color, #1e293b);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__profile-text span {
  color: inherit;
}

[data-theme="dark"] .header__profile-text {
  color: #e2e8f0;
}

/* Arrow down icon */
.icon-arrow-down,
.icon-icon-arrow-down {
  color: var(--grey-color-1, #64748b);
  transition: transform 0.2s ease, color 0.2s ease;
}

.header__profile-toggle[aria-expanded="true"] .icon-arrow-down,
.header__profile-toggle[aria-expanded="true"] .icon-icon-arrow-down {
  transform: rotate(180deg);
  color: var(--blue-color, #6366f1);
}

/* ========================================
   Light Mode Dropdown Styles
   ======================================== */

/* Light mode: Clean white with subtle shadows matching dashboard cards */
.dropdown-menu,
[data-theme="light"] .dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--grey-light-color-3, #eaedf0);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(21, 35, 46, 0.12), 0 4px 12px rgba(21, 35, 46, 0.08);
  padding: 0.5rem;
  min-width: 220px;
}

/* Dropdown menu items */
.dropdown-menu__item,
[data-theme="light"] .dropdown-menu__item {
  color: var(--black-color, #1e293b);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Dropdown menu item hover - matching the sidebar link hover style */
.dropdown-menu__item:hover,
[data-theme="light"] .dropdown-menu__item:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: #6366f1;
}

/* Active/selected dropdown item */
.dropdown-menu__item.active,
[data-theme="light"] .dropdown-menu__item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
  color: #6366f1;
  font-weight: 600;
}

/* Divider */
.dropdown-menu__divider,
[data-theme="light"] .dropdown-menu__divider {
  background: var(--grey-light-color-3, #eaedf0);
  height: 1px;
  margin: 0.5rem 0.75rem;
}

/* Dropdown visibility */
.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

/* Profile dropdown specific - add arrow indicator */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  animation: dropdown-fade-in 0.2s ease-out;
  z-index: 1050;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 1.5rem;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid var(--grey-light-color-3, #eaedf0);
  border-top: 1px solid var(--grey-light-color-3, #eaedf0);
  transform: rotate(45deg);
}

/* Profile dropdown items */
.profile-dropdown__item {
  color: var(--black-color, #1e293b);
  font-weight: 500;
}

.profile-dropdown__item:hover {
  color: #dc2626; /* Red color for logout to indicate action */
}

.profile-dropdown__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* Text colors */
.text-grey,
[data-theme="light"] .text-grey {
  color: var(--grey-color-1, #64748b) !important;
  font-size: 0.8125rem;
}

/* ========================================
   Dark Mode Dropdown Styles
   ======================================== */

[data-theme="dark"] .dropdown-menu {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-menu__item {
  color: #e2e8f0;
}

[data-theme="dark"] .dropdown-menu__item:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

[data-theme="dark"] .dropdown-menu__divider {
  background: #334155;
}

[data-theme="dark"] .profile-dropdown::before {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-left-color: #334155;
  border-top-color: #334155;
}

[data-theme="dark"] .profile-dropdown__item:hover {
  color: #f87171; /* Lighter red for dark mode logout hover */
}

[data-theme="dark"] .text-grey {
  color: #94a3b8 !important;
}

[data-theme="dark"] .sidebar__link-icon {
  color: #94a3b8;
}

[data-theme="dark"] .sidebar__link:hover .sidebar__link-icon,
[data-theme="dark"] .sidebar__link.active .sidebar__link-icon {
  color: #818cf8;
}

[data-theme="dark"] .sidebar__link-text {
  color: #cbd5e1;
}

[data-theme="dark"] .sidebar__link:hover .sidebar__link-text,
[data-theme="dark"] .sidebar__link.active .sidebar__link-text {
  color: #818cf8;
}

/* ===== Card Preview Styles ===== */
.card-preview {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.card-preview--visa {
  background: linear-gradient(135deg, #1a1f71 0%, #2d3a8c 50%, #1a1f71 100%);
}

.card-preview--mastercard {
  background: linear-gradient(135deg, #eb001b 0%, #ff5f00 50%, #f79e1b 100%);
}

.card-preview--amex {
  background: linear-gradient(135deg, #016fd0 0%, #007bc2 50%, #016fd0 100%);
}

.card-preview__inner {
  position: relative;
  padding: 1.25rem;
  color: #fff;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
}

.card-preview__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  border-radius: 16px;
}

/* Card Preview Actions (Eye Button & Badge) */
.card-preview__actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
}

.card-preview__eye-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.card-preview__eye-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

.card-preview__eye-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.card-preview__eye-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-preview__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.card-preview__badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 0.25rem 0.625rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* Card Preview Header */
.card-preview__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.card-preview__brand img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Card Preview Number */
.card-preview__number {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
  margin: 0.5rem 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Card Preview Info (Cardholder & Expiry) */
.card-preview__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: auto;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.card-preview__info-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 0.125rem;
}

.card-preview__info-value {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Card Preview Footer */
.card-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 1;
}

.card-preview__balance-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 0.125rem;
}

.card-preview__balance-value {
  font-size: 1rem;
  font-weight: 700;
}

.card-preview__actions-row {
  display: flex;
  gap: 0.75rem;
}

.card-preview__action-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.card-preview__action-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Card Preview Below (Copy & Billing) */
.card-preview__below {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-preview__copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--grey-light-color-1, #f8fafb);
  border: 1px solid var(--grey-light-color-3, #eaedf0);
  border-radius: 10px;
  color: var(--grey-color-1, #64748b);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-preview__copy-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

[data-theme="dark"] .card-preview__copy-btn {
  background: #334155;
  border-color: #475569;
  color: #94a3b8;
}

[data-theme="dark"] .card-preview__copy-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.card-preview__billing {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--grey-light-color-1, #f8fafb);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--grey-color-1, #64748b);
}

[data-theme="dark"] .card-preview__billing {
  background: #334155;
  color: #94a3b8;
}

.card-preview__billing svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.card-preview__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Page Content Improvements ===== */
.page-content {
  transition: background-color 0.3s ease;
}

.page-content > .container {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* ===== Enhanced Sidebar Styles ===== */

/* Sidebar Container */
.sidebar {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.sidebar__container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Sidebar Logo Area */
.sidebar__top {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--grey-light-color-3, #eaedf0);
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .sidebar__top {
  border-color: rgba(255, 255, 255, 0.1);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sidebar__logo:hover {
  opacity: 0.8;
}

.sidebar__logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
}

.sidebar__logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--black-color, #15232e);
  letter-spacing: -0.02em;
}

/* Sidebar Navigation */
.sidebar__content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}

.sidebar__nav {
  padding-bottom: 1rem;
}

.sidebar__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar__menu-item {
  position: relative;
}

/* Sidebar Link Styling */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  color: var(--grey-color-1, #64748b);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sidebar__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 0 4px 4px 0;
  transition: transform 0.2s ease;
}

.sidebar__link:hover {
  background: var(--grey-light-color-1, #f8fafb);
  color: var(--black-color, #15232e);
}

.sidebar__link:hover::before {
  transform: translateY(-50%) scaleY(0.5);
}

.sidebar__link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #6366f1;
  font-weight: 600;
}

.sidebar__link.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* Sidebar Icons */
.sidebar__link-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  color: inherit;
}

.sidebar__link-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar__link:hover .sidebar__link-icon {
  transform: scale(1.1);
}

.sidebar__link.active .sidebar__link-icon {
  color: #6366f1;
}

/* Sidebar Text */
.sidebar__link-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

/* Menu Section Divider */
.sidebar__section-title {
  padding: 1.25rem 1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-color-1, #8697a8);
}

[data-theme="dark"] .sidebar__section-title {
  color: #64748b;
}

/* Sidebar Footer */
.sidebar__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--grey-light-color-3, #eaedf0);
  margin-top: auto;
}

[data-theme="dark"] .sidebar__footer {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Close Button (Mobile) */
.sidebar__close {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--grey-light-color-1, #f8fafb);
  color: var(--grey-color-1, #8697a8);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sidebar__close:hover {
  background: var(--grey-light-color-2, #eef3f5);
  color: var(--black-color, #15232e);
}

[data-theme="dark"] .sidebar__close {
  background: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .sidebar__close:hover {
  background: #475569;
  color: #f1f5f9;
}

@media screen and (max-width: 768px) {
  .sidebar__close {
    display: flex;
  }
}

/* Backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sidebar-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ===== Light Mode Specific ===== */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  border-right: 1px solid var(--grey-light-color-3, #eaedf0);
}

.sidebar__link {
  color: #64748b;
}

.sidebar__link:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.sidebar__link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  color: #4f46e5;
}

.sidebar__logo-text {
  color: #1e293b;
}

/* Scrollbar Styling */
.sidebar__content::-webkit-scrollbar {
  width: 5px;
}

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

.sidebar__content::-webkit-scrollbar-thumb {
  background: var(--grey-light-color-3, #eaedf0);
  border-radius: 10px;
}

[data-theme="dark"] .sidebar__content::-webkit-scrollbar-thumb {
  background: #334155;
}

.sidebar__content::-webkit-scrollbar-thumb:hover {
  background: var(--grey-color-1, #8697a8);
}

/* Active Link Glow Effect */
.sidebar__link.active::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* Collapsed Sidebar State */
@media screen and (min-width: 1366px) {
  .sidebar--collapsed .sidebar__link-text,
  .sidebar--collapsed .sidebar__section-title,
  .sidebar--collapsed .sidebar__logo-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }
  
  .sidebar--collapsed .sidebar__link {
    justify-content: center;
    padding: 0.875rem;
  }
  
  .sidebar--collapsed .sidebar__link-icon {
    margin: 0;
  }
}

/* ===== Header Improvements ===== */
.header {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header__inner {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

[data-theme="light"] .header__inner {
  border-bottom-color: var(--grey-light-color-3, #eaedf0);
}

[data-theme="dark"] .header__inner {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Toggle Menu Button */
.header__toggle-menu {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--grey-color-1, #64748b);
  cursor: pointer;
  transition: all 0.2s ease;
}

.header__toggle-menu:hover {
  background: var(--grey-light-color-1, #f8fafb);
  color: var(--black-color, #15232e);
}

[data-theme="dark"] .header__toggle-menu {
  color: #94a3b8;
}

[data-theme="dark"] .header__toggle-menu:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}